/* =========================================================
   Переменные: цвета, отступы, радиусы
   ========================================================= */
:root {
  --navy: #0B1F3A;
  --navy-2: #13294B;
  --navy-3: #1C3560;
  --yellow: #FFDD2D;
  --yellow-hover: #FFE55C;
  --yellow-soft: #FFF8D6;
  --yellow-border: #FBE58A;
  --yellow-ink: #8A6A00;
  --white: #FFFFFF;
  --bg-soft: #F6F7F9;
  --card: #F2F3F5;
  --line: #E4E6EA;
  --text: #1A1D24;
  --muted: #5C6370;
  --on-dark: #FFFFFF;
  --on-dark-muted: #B8C3D6;
  --green: #1E9E5A;
  --red: #D93025;
  --bonus: #C2410C; /* метка «Бонус» в блоке «Что получаю?» */
  --pay-ok: #22A06B; /* круг с галочкой на странице после оплаты */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gap: 16px;
  --gutter: 16px;
  /* Вертикальный отступ секций (сверху и снизу) и уменьшенный нижний — у секций, которые кончаются кнопкой покупки */
  --section-y: 40px;
  --section-y-buy: 32px;
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 64px;

  --shadow: 0 6px 24px rgba(11, 31, 58, 0.08);
  --shadow-cta: 0 10px 30px rgba(255, 221, 45, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   База
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* viewport-fit=cover (index, оферта, политика): в альбомной ориентации iPhone текст не заходит под вырез */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

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

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

button { font: inherit; }

/* Рамка фокуса: на светлом фоне тёмно-синяя с белым зазором (жёлтая на белом почти не видна),
   в тёмных секциях, подвале и cookie-плашке — жёлтая */
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); border-radius: 6px; }
.section--dark :focus-visible,
.footer :focus-visible,
.cookie :focus-visible { outline-color: var(--yellow); outline-offset: 3px; box-shadow: none; }

/* «Перейти к содержимому»: первая остановка по Tab, видна только в фокусе */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }
/* <main> получает фокус только от этой ссылки — рамка вокруг всей страницы не нужна */
#main:focus { outline: none; box-shadow: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 860px; }

/* =========================================================
   Кнопки
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.btn--primary {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(255, 221, 45, 0.35);
}
.btn--primary:hover { background: var(--yellow-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
/* Финальная кнопка покупки после прокрутки от верхних кнопок (script.js): два пульса с жёлтым ореолом */
.btn--pulse { animation: btn-pulse .7s ease-in-out 2; }
@keyframes btn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(255, 221, 45, 0.35), 0 0 0 0 rgba(255, 221, 45, 0.6); }
  50% { transform: scale(1.04); box-shadow: 0 4px 14px rgba(255, 221, 45, 0.35), 0 0 0 12px rgba(255, 221, 45, 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* Без увеличения и повторов: один раз проявляется и гаснет ореол */
  .btn--pulse { animation: btn-glow 1.4s ease-out 1; }
}
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 221, 45, 0.35), 0 0 0 0 rgba(255, 221, 45, 0); }
  30% { box-shadow: 0 4px 14px rgba(255, 221, 45, 0.35), 0 0 0 6px rgba(255, 221, 45, 0.7); }
}

.btn--dark { background: var(--navy); color: var(--white); }
.btn--dark:hover { background: var(--navy-3); }

.btn--sm { padding: 10px 14px; font-size: 14px; }
.btn--lg { padding: 18px 28px; font-size: 18px; width: 100%; }
.btn--xl {
  padding: 22px 32px;
  font-size: 20px;
  letter-spacing: .02em;
  width: 100%;
  box-shadow: var(--shadow-cta);
}

/* =========================================================
   Общие элементы секций (в стиле гайда: жёлтая плашка + заголовок)
   ========================================================= */
.section { padding: var(--section-y) 0; }
/* Секция кончается кнопкой покупки: кнопка ближе к заголовку следующей секции */
.section--buy { padding-bottom: var(--section-y-buy); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--navy); color: var(--on-dark); }

.section__head { margin-bottom: 28px; }
.section__head--center { text-align: center; }
.section__head--center .bar { margin-left: auto; margin-right: auto; }

.bar {
  display: block;
  width: 56px;
  height: 6px;
  border-radius: 3px;
  background: var(--yellow);
  margin-bottom: 16px;
}

.section__title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section__text {
  margin-top: 12px;
  font-size: 17px;
  color: var(--muted);
}
.section--dark .section__text { color: var(--on-dark-muted); }


/* Жёлтая плашка-выноска, как в гайде */
.callout {
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-border);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 17px;
}

/* Плашка-вступление в тёмном блоке «Как всё работает простыми словами» */
.how__intro { margin-bottom: 32px; }
.section--dark .callout { background: rgba(255, 221, 45, .08); border-color: rgba(255, 221, 45, .4); color: var(--on-dark); }
.section--dark .callout strong { color: var(--yellow); }

.note { margin-top: 20px; color: var(--muted); }

/* Тонкий разделитель внутри секции (блок 7: Безопасность → Гарантия) */
.divider { margin: 48px 0; border: 0; border-top: 1px solid var(--line); }

/* Кнопка покупки + цена: на мобильном цена над кнопкой, с 768px — слева от неё */
.buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.buy > .btn { max-width: 100%; }

.price { display: grid; gap: 4px; margin: 0; }
.price__value { font-size: 34px; line-height: 1.1; font-weight: 700; color: var(--navy); white-space: nowrap; }
.price__note { font-size: 14px; line-height: 1.35; color: var(--muted); }
.section--dark .price__value { color: var(--yellow); }
.section--dark .price__note { color: var(--on-dark-muted); }

.cta-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.cta-note--light { color: var(--on-dark-muted); }
/* Финальный CTA: сроки под кнопкой — полужирно и на 2px крупнее */
.cta-note--strong { font-size: 16px; font-weight: 700; line-height: 1.45; }

/* Промежуточные кнопки покупки (после 1го экрана, «Что получаю?» и гарантии): по центру */
.buy-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  text-align: center;
}
.buy-strip > .btn { max-width: 100%; }

/* Текст только для экранных дикторов */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Скриншоты + плейсхолдер, если картинка не загрузилась */
.shot { margin: 0; position: relative; }
.shot img { border-radius: var(--radius-sm); }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.section--dark .shot figcaption { color: var(--on-dark-muted); }

.shot--card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow);
}
.shot--card img { width: 100%; }
.section--dark .shot--card { border-color: var(--navy-3); }
.section--dark .shot--card figcaption { color: var(--muted); }

.shot--missing {
  min-height: 220px;
  background: #eee;
  border-radius: var(--radius);
}
.shot--missing img { display: none; }
.shot--missing::after {
  content: attr(data-alt);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #777;
  font-size: 14px;
}

/* Плавное появление */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* «Уменьшить движение» в системе: блоки видны сразу, без сдвига и проявления */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transition: none; transform: none; opacity: 1; }
}

/* =========================================================
   Шапка (вне нумерации блоков)
   ========================================================= */
/* Шапка липкая на всех ширинах (кроме телефона в альбомной ориентации — см. ниже) */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.header--scrolled { box-shadow: 0 4px 18px rgba(11, 31, 58, .12); border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--navy);
  flex-shrink: 0; /* длинный заголовок рядом не сжимает ссылку-логотип уже картинки */
}
/* Знак ApiTable — шестиугольник (54 : 62, images/logo.svg): задаём высоту, ширина — по пропорциям */
.logo__img { width: auto; height: 48px; flex-shrink: 0; }

/* Главный заголовок страницы (H1) рядом с логотипом */
.header__title {
  min-width: 0;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.header__inner > .btn { flex-shrink: 0; white-space: nowrap; }
/* Кнопка покупки в шапке — компактная, справа; заголовок сжимается рядом с ней, а не под нее */
.header__buy { margin-left: auto; }
@media (max-width: 479px) {
  .header__inner { gap: 10px; }
  .logo__img { height: 40px; }
  .header__title { font-size: 17px; }
  .header__buy { padding: 8px 12px; }
}
@media (max-width: 399px) { .header__title { font-size: 16px; } }
@media (min-width: 1024px) { .header__buy { display: none; } }
html { scroll-padding-top: var(--header-h); }
/* Телефон в альбомной ориентации (844×390): липкая шапка заняла бы пятую часть экрана */
@media (orientation: landscape) and (max-height: 500px) {
  .header { position: relative; }
  html { scroll-padding-top: 0; }
}

/* =========================================================
   Блок 1 — 1й экран
   ========================================================= */
.hero {
  padding: 40px 0 var(--section-y-buy);
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 221, 45, .14), transparent 45%),
    var(--navy);
}

.hero__inner { display: grid; gap: 36px; }


/* Плашка «Работает на ПК с Windows»: заметная (тёмно-синяя заливка, жёлтая рамка и иконка),
   но не жёлтая заливка — чтобы не спорить с кнопкой покупки */
.hero__platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 8px 18px 8px 14px;
  background: var(--navy-3);
  border: 2px solid var(--yellow);
  border-radius: 999px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--on-dark);
}
.hero__platform-icon { flex-shrink: 0; color: var(--yellow); }

.hero__audience {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--yellow);
}

.hero__promise {
  margin-top: 22px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--on-dark);
}

.hero__lead {
  margin-top: 16px;
  font-size: 17px;
  color: var(--on-dark-muted);
}

.hero__cta { margin-top: 28px; }
/* Акцент и звёздочка-сноска: тёмно-золотой на светлом фоне, жёлтый — на тёмных секциях */
.hero__accent { color: var(--yellow-ink); font-weight: 800; }
.section--dark .hero__accent { color: var(--yellow); }
/* Звёздочка-ссылка на сноску и сама сноска: мелкий приглушённый текст, звёздочка цветом акцента */
.fn-ref { color: inherit; text-decoration: none; }
.fn-ref:hover { text-decoration: underline; }
/* Звёздочка внутри кнопки-плашки (span вместо ссылки) — тоже кликабельна */
.fn-ref[data-fn] { cursor: pointer; }
.footnote { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.section--dark .footnote { color: var(--on-dark-muted); }

/* Плашки-теги под обещанием */
/* Каждая плашка на своей строке, по левому краю: две длинные плашки в один ряд
   не помещаются ни на телефоне, ни в левой колонке 1го экрана на десктопе */
.hero-tags {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--on-dark);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.hero-tag::before { content: "✓"; color: var(--yellow); font-weight: 800; }
/* Уже 360px: плашка «Без навыков программирования» не помещалась в 288px и давала горизонтальную прокрутку */
@media (max-width: 359px) {
  .hero-tag { padding: 8px 12px; font-size: 15px; white-space: normal; }
  .hero__content { min-width: 0; }
  /* 320px: шаги «Как запустить автоматизацию?» и кнопка предпросмотра давали горизонтальную прокрутку */
  .gallery,
  .auto-steps { grid-template-columns: minmax(0, 1fr); }
  .auto-step { padding: 10px 8px; gap: 10px; font-size: 15px; }
  .auto-step__num { width: 32px; height: 32px; font-size: 15px; }
  .auto-step__text { min-width: 0; overflow-wrap: anywhere; }
  .preview__btn { padding: 12px 14px; font-size: 14px; }
}

/* Сроки: шаги с номерами. На мобильном столбиком с вертикальной линией, с 768px в ряд со стрелкой-линией */
.hero-steps {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.hero-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  align-content: start;
}
.hero-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: -14px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 221, 45, .45);
}
.hero-step__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
}
.hero-step__body { display: grid; gap: 2px; }
.hero-step__time { font-size: 24px; line-height: 1.2; font-weight: 800; color: var(--yellow); white-space: nowrap; }
.hero-step__text { font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--on-dark); }

/* Карусель листов таблицы: рамка 5:4 — высота не меняется при листании, картинка вписана целиком */
.hero__media { width: 100%; min-width: 0; }
.hero__carousel .carousel__track { box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.hero__carousel.carousel--frame .carousel__slide { aspect-ratio: 5 / 4; padding: 8px; background: var(--white); border: 0; }
.hero__carousel.carousel--frame .carousel__slide img { border-radius: 4px; }

/* Бонус под шагами: текст + скриншот утреннего отчёта */
/* Расстояние от главного скриншота до бонуса: 36 + 4 = 40px на мобильном, 32 + 24 = 56px с 768px */
.hero__bonus { display: grid; gap: 18px; margin-top: 4px; }
.hero__bonus .hero__lead { margin-top: 0; }
.hero__bonus-shot { width: 100%; max-width: 422px; }
.hero__bonus-shot img { width: 100%; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }

/* До 1023px карусель листов — сразу под жёлтым подзаголовком: плашка Windows → подзаголовок → карусель →
   обещание → плашки ✓ → шаги → бонус. Левая колонка раскрывается (display: contents), порядок задаёт order,
   отступы — margin (у flex-колонки gap 0). Порядок в HTML и на ПК (две колонки с 1024px) не меняется */
@media (max-width: 1023px) {
  .hero__inner { display: flex; flex-direction: column; gap: 0; }
  .hero__content { display: contents; }
  .hero__platform { order: 1; align-self: flex-start; }
  .hero__audience { order: 2; }
  .hero__media { order: 3; margin-top: 24px; }
  .hero__promise { order: 4; margin-top: 32px; }
  .hero-tags { order: 5; }
  .hero-steps { order: 6; }
  .hero__bonus { order: 7; margin-top: 40px; }
}

/* =========================================================
   Блок 2 — Боль (Знакомо?)
   ========================================================= */
.pain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Плашки в ряду одной высоты (растягиваются сеткой), текст сразу под заголовком, свободное место — внизу */
.pain-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
}

.pain-card__body { display: grid; align-content: start; gap: 6px; }
.pain-card__title { padding-top: 10px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--text); }
.pain-card__body p { color: var(--text); }
/* Блок на сером фоне: карточки белые, иначе серые карточки сливаются с фоном */
.section--soft .pain-card { background: var(--white); }

.pain-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--yellow);
  font-size: 22px;
}

/* =========================================================
   Блок 9 — Кому
   ========================================================= */
/* Чек-лист без карточек: жёлтая галочка в кружке + текст. С 1024px — две колонки по три пункта */
.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.fit-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  font-size: 17px;
  line-height: 28px;
}
.fit-item__check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
}
.fit-item p { color: var(--on-dark-muted); }
.fit-item strong { color: var(--on-dark); font-weight: 700; }

/* Подблок «Кому не подойдёт»: компактный, вторичный, отделён тонкой линией */
.nofit {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.nofit__title { font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--on-dark); }
.nofit__lead { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--on-dark-muted); }
.nofit-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.nofit-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 26px;
}
.nofit-item__x {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(229, 115, 107, .14);
  border: 1px solid rgba(229, 115, 107, .45);
  color: #E8847C;
}
.nofit-item p { color: var(--on-dark-muted); }
.nofit-item strong { color: var(--on-dark); font-weight: 700; }

/* =========================================================
   Скрытая секция «Как запустить автоматизацию?» (в разметке между блоками 5 и 6) — шаги 1–6 (кнопки) + общая карусель
   Секция сейчас скрыта (закомментирована в index.html), стили оставлены, чтобы её можно было вернуть
   ========================================================= */
.auto-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.auto-step {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.auto-step:hover { border-color: var(--yellow-border); }
.auto-step:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.auto-step[aria-current="true"] { background: var(--yellow-soft); border-color: var(--yellow); }
.auto-step__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 17px;
  font-weight: 800;
}
.auto-step__text { padding-top: 4px; }
.auto-step__text strong { font-weight: 700; }

/* =========================================================
   Аккордеон (<details>): «Что в инструкции?»
   ========================================================= */
.acc {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  interpolate-size: allow-keywords;
}
.section--dark .acc { background: var(--navy-2); border-color: var(--navy-3); box-shadow: none; }
.acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.acc__summary::-webkit-details-marker { display: none; }
.acc__title { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
.acc__chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  transition: transform .3s ease;
}
.acc[open] .acc__chevron { transform: rotate(180deg); }
.acc__summary:hover .acc__chevron { background: var(--yellow-hover); }
.acc__body { padding: 4px 22px 24px; }
/* Плавное раскрытие (браузеры с поддержкой ::details-content); в остальных — мгновенно */
.acc::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s ease allow-discrete;
}
.acc[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .acc::details-content, .acc__chevron { transition: none; }
}

/* =========================================================
   Блок 4 — «Как всё работает простыми словами» (всегда видимый блок; бывший аккордеон «Техническая логика работы»)
   ========================================================= */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--navy-2);
  border: 1px solid var(--navy-3);
  border-radius: var(--radius);
  padding: 24px 16px;
  margin-bottom: 32px;
}

.flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.flow__label { font-weight: 700; font-size: 15px; }

.flow__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 32px;
}
.flow__icon--python { background: #1A1F2B; border: 1px solid #3A4458; }
.flow__icon--sheets { background: #1E9E5A; }
.flow__icon--tg { background: #229ED9; border-radius: 50%; }

.flow__pair { display: flex; gap: 10px; }

/* Источник данных в схеме — текстом, без логотипа брокера */
.flow__source {
  display: grid;
  gap: 2px;
  padding: 12px 18px;
  border: 1px solid var(--yellow);
  border-radius: 16px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
}
.flow__source-note { font-weight: 600; font-size: 14px; color: var(--on-dark-muted); }

.flow__arrow {
  width: 2px;
  height: 28px;
  background: var(--yellow);
  position: relative;
}
.flow__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  transform: translateX(-50%) rotate(45deg);
}

/* Основной текст плашки: ключевые слова полужирным белым, звёздочка остаётся жёлтой */
.how__intro-main { line-height: 1.6; color: rgba(255, 255, 255, .9); }
.how__intro-main strong:not(.hero__accent) { color: var(--on-dark); font-weight: 700; }
/* Заметка «Важно» внутри плашки: полупрозрачная тёмная подложка, подпись с иконкой над текстом */
.how__note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(11, 31, 58, .55);
  border: 1px solid rgba(255, 221, 45, .18);
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-dark-muted);
}
.how__note-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yellow);
}
.how__note-icon { font-size: 18px; line-height: 1; letter-spacing: 0; }
.how__note-arrow { color: var(--yellow); font-weight: 700; }
.section--dark .how__note strong { color: var(--on-dark); font-weight: 700; }

.how__text { display: grid; gap: 16px; align-content: start; font-size: 17px; color: var(--on-dark-muted); }

/* =========================================================
   Двухколоночный layout (текст + скрин): блок 6 «Что в инструкции?» и блок 7 «Безопасность»
   ========================================================= */
.split { display: grid; gap: 32px; align-items: start; }

/* =========================================================
   Блок 7 — Безопасность и гарантия · Безопасность
   ========================================================= */
.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.checklist li {
  position: relative;
  padding: 16px 16px 16px 56px;
  background: var(--card);
  border-radius: var(--radius);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230B1F3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* «Что именно запускается на вашем компьютере?» */
.runs {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.runs__title { font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--navy); }
.runs__lead { margin-top: 10px; }
/* Список пунктов: маленькие жёлтые кружки с галочкой, как в чек-листе выше */
.runs__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.runs__list li { position: relative; padding-left: 32px; }
.runs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230B1F3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* =========================================================
   Блок 6 — Что в инструкции? (аккордеон; бывший «Один час — и навсегда»)
   ========================================================= */
.time-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.time-table th,
.time-table td { padding: 14px 16px; text-align: left; }

.time-table thead th {
  background: var(--yellow);
  color: var(--navy);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.time-table tbody tr + tr td { border-top: 1px solid var(--line); }
.time-table td:last-child { white-space: nowrap; font-weight: 700; text-align: right; }

.time-table tfoot th,
.time-table tfoot td {
  background: var(--navy);
  color: var(--white);
  font-size: 17px;
}
.time-table tfoot td { color: var(--yellow); text-align: right; }

@media (max-width: 479px) {
  /* Кнопка покупки на телефоне — текст в одну строку */
  .buy > .btn--xl { width: 100%; padding: 20px 16px; font-size: 18px; letter-spacing: 0; white-space: nowrap; }
  /* Промежуточные кнопки — тоже в одну строку на 360px */
  .buy-strip > .btn--lg { padding: 18px 12px; font-size: 17px; }
}

/* До 767px таблица — список карточек «номер — шаг — время» и отдельная карточка «Итого».
   Разметка та же (тексты правятся в одном месте), роли ARIA в index.html сохраняют таблицу для экранных дикторов */
@media (max-width: 767px) {
  .time-table {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    counter-reset: step;
  }
  .time-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .time-table tbody { display: grid; gap: 10px; }
  .time-table tbody tr {
    counter-increment: step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
  }
  /* Номер шага; «/ ""» — дикторы номер не читают (браузер без этой записи берёт строку выше) */
  .time-table tbody tr::before {
    content: counter(step);
    content: counter(step) / "";
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-size: 15px;
    font-weight: 800;
  }
  .time-table tbody td { display: block; min-width: 0; padding: 0; border: 0; text-align: left; overflow-wrap: break-word; }
  .time-table tbody tr + tr td { border-top: 0; }
  .time-table tbody td:first-child { padding-top: 4px; line-height: 1.45; }
  /* Время — жёлтая метка под описанием */
  .time-table tbody td:last-child {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--yellow);
    color: var(--navy);
    font-size: 15px;
    line-height: 1.4;
  }
  .time-table tfoot { display: block; margin-top: 12px; }
  .time-table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 16px 18px;
    background: var(--navy);
    border-radius: var(--radius-sm);
  }
  .time-table tfoot th,
  .time-table tfoot td { display: block; padding: 0; background: none; }
  .time-table tfoot td { font-size: 20px; white-space: nowrap; }
}
/* С 480px места хватает — время справа от описания */
@media (min-width: 480px) and (max-width: 767px) {
  .time-table tbody tr { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; }
  .time-table tbody tr::before { grid-row: auto; }
  .time-table tbody td:first-child { padding-top: 0; }
}

/* =========================================================
   Блок 5 — Что получаю? и скрытая «Как запустить автоматизацию?» — пункты «текст + скриншот»
   ========================================================= */
/* Блок 5: плашки + общая карусель скриншотов в рамке 4:3. До 1024px карусель под плашками */
.gallery { display: grid; gap: 24px; }
.gallery__media { display: grid; gap: 8px; min-width: 0; }
.gallery__hint { font-size: 14px; color: var(--muted); text-align: center; }
/* Подсказка под каруселью на тёмном фоне 1го экрана: читается, но второстепенная */
.section--dark .gallery__hint { color: rgba(184, 195, 214, .75); }
.hero__media .gallery__hint { margin-top: 8px; }
.gallery__list { min-width: 0; }

.gallery + .buy-strip { margin-top: 32px; }

/* Блок 3 «Демо‑таблица»: постер видео демо-таблицы с кнопкой ▶, подпись и ссылка на саму таблицу.
   До 1023px — всё по центру столбиком, под подписью мелкая ссылка; с 1024px — постер слева,
   справа подпись, описание и контурная кнопка (см. брейкпоинт 1024px) */
.demo-video { text-align: center; }
.demo-video__poster {
  position: relative;
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.demo-video__poster img { display: block; width: 100%; height: auto; }
.demo-video__poster::after { content: ""; position: absolute; inset: 0; background: rgba(11, 31, 58, .18); transition: background-color .2s ease; }
.demo-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 0 6px 20px rgba(11, 31, 58, .35);
  transition: transform .2s ease;
}
.demo-video__play svg { margin-left: 4px; }
.demo-video__poster:hover::after { background: rgba(11, 31, 58, .08); }
.demo-video__poster:hover .demo-video__play,
.demo-video__poster:focus-visible .demo-video__play { transform: scale(1.08); }
.demo-video__poster:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.demo-video__caption { margin-top: 12px; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--navy); }
.demo-video__link { display: inline-block; margin-top: 6px; padding: 6px 4px; font-size: 14px; color: var(--muted); }
.demo-video__link:hover { color: var(--navy); }
.demo-video__text,
.demo-video__btn { display: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-video__poster::after, .demo-video__play { transition: none; }
}

/* Окно с видео демо-таблицы: затемнение на весь экран, видео по центру, крестик как у лайтбокса.
   Появляется плавно; при prefers-reduced-motion — без анимации */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 64px 12px 16px;
  /* viewport-fit=cover: видео не заходит под вырез и полоску «домой» iPhone */
  padding: 64px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(5, 14, 28, .94);
  animation: video-modal-in .2s ease-out;
}
.video-modal[hidden] { display: none; }
.video-modal__video {
  display: block;
  width: 100%;
  max-width: 1400px;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  border-radius: 8px;
  background: #000;
  animation: video-modal-zoom .2s ease-out;
}
@keyframes video-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes video-modal-zoom { from { transform: scale(.96); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .video-modal, .video-modal__video { animation: none; }
}
/* Телефон в альбомной ориентации: крестик поверх угла, видео на всю высоту экрана */
@media (orientation: landscape) and (max-height: 500px) {
  .video-modal { padding: 8px 64px; }
  .video-modal__video { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
}

/* Вторичная кнопка: контур тёмно-синий, не спорит с жёлтой кнопкой покупки */
.btn--outline {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn--outline:focus-visible { box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 2px var(--white); }
.pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pick {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.pick:hover { border-color: var(--yellow-border); }
.pick:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.pick[aria-current="true"] { background: var(--yellow-soft); border-color: var(--yellow); }
.pick__text strong { font-weight: 700; }
/* Метка «В таблице» над текстом плашки: где находится функция, а не часть заголовка */
.pick__tag {
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
/* Метка «Бонус»: та же форма, что у «В таблице», но насыщенный оранжевый —
   не жёлтый, чтобы не сливаться с кнопками «Купить» и выбранной плашкой.
   Белый текст на #C2410C — контраст 5.2:1. Раз в 5 с по метке проходит блик */
.pick__tag--bonus {
  position: relative;
  overflow: hidden;
  border-color: var(--bonus);
  background: var(--bonus);
  font-weight: 700;
  color: var(--white);
}
.pick__tag--bonus::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: bonus-shine 5s ease-in-out 1s infinite;
}
@keyframes bonus-shine {
  0% { transform: translateX(-100%); }
  20%, 100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pick__tag--bonus::after { animation: none; display: none; }
}
.pick .feature__icon { width: 40px; height: 40px; font-size: 20px; }

/* Подпись под слайдом карусели «Что получаю?» (script.js): только до 1024px, где плашки не связаны с каруселью */
.carousel__caption { display: none; }
@media (max-width: 1023px) {
  /* Плашки — обычный список: без указателя, наведения и подсветки */
  .pick { cursor: default; transition: none; -webkit-tap-highlight-color: transparent; }
  .pick:hover { border-color: transparent; }

  /* Подпись висит под рамкой слайда, в нижнем отступе ленты: рамка 4:3 не меняется,
     а отступ одинаковый для всех слайдов — по самой высокой подписи (--caption-h), и высота при листании не прыгает.
     Подпись стоит посередине между рамкой и стрелками: отступ сверху (padding-top) равен отступу стрелок снизу (14px),
     а текст выровнен по центру высоты --caption-h */
  .gallery .carousel__track { padding-bottom: var(--caption-h, 0px); }
  .gallery .carousel__slide .carousel__caption {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    height: var(--caption-h, auto);
    margin: 0;
    padding-top: 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    text-align: center;
  }
  .carousel__caption .pick__tag { display: inline-block; margin: 0 6px 0 0; vertical-align: middle; }
}

.carousel--frame { min-width: 0; }
.carousel--frame .carousel__slide {
  min-width: 0;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
}
/* Картинка вписана целиком, без обрезки и без растягивания сверх натурального размера */
.carousel--frame .carousel__slide img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
}
/* Скрины Telegram в карусели «Что получаю?» сняты в одном масштабе (шаг строк 18px) и обрезаны по ширине до 422px.
   Отчет по команде почти квадратный (422×405): в рамке 4:3 уже ~575px он упирается в высоту и выходит мельче
   утреннего отчета — так и задумано, рамка у всех слайдов одна */

/* Лайтбокс */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 56px 16px 16px;
  background: rgba(11, 31, 58, .92);
  /* Жесты пальцем в окне обрабатывает скрипт: увеличение, листание, закрытие свайпом вниз */
  touch-action: none;
  overscroll-behavior: contain;
}
.lightbox[hidden] { display: none; }
/* Высота — от экрана за вычетом отступов окна сверху и снизу (56 + 16): у max-height: 100% не было
   заданной высоты, от которой считать, и в альбомной ориентации скриншот обрезался снизу */
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  object-fit: contain;
  border-radius: 8px;
  background: var(--white);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Номер скриншота «2 / 4» — сверху по центру, напротив крестика */
.lightbox__count {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 14px;
  border-radius: 22px;
  background: rgba(0, 0, 0, .35);
  color: var(--white);
  font-size: 15px;
  line-height: 44px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.lightbox__count[hidden] { display: none; }
.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: none; }
/* Стрелки лайтбокса — листают скриншоты той же карусели */
.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 18px;
  cursor: pointer;
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__nav:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: none; }
/* Стрелки не лежат поверх скриншота: по бокам под них оставлено место (12 + 44 + 12) */
.lightbox--nav { padding-left: 68px; padding-right: 68px; }
/* Телефон в портретной ориентации: места по бокам мало — стрелки под скриншотом, по центру */
@media (max-width: 767px) and (orientation: portrait) {
  .lightbox--nav { padding: 56px 16px 72px; }
  .lightbox--nav .lightbox__img { max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); }
  .lightbox__nav { top: auto; bottom: 14px; margin-top: 0; }
  .lightbox__nav--prev { left: calc(50% - 56px); }
  .lightbox__nav--next { right: calc(50% - 56px); }
}
/* viewport-fit=cover: кнопки окна не заходят под вырез и скругления экрана iPhone (без выреза env() = 0 и ничего не меняется) */
.lightbox__close { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); }
.lightbox__count { top: calc(12px + env(safe-area-inset-top)); }
.lightbox__nav--prev { left: calc(12px + env(safe-area-inset-left)); }
.lightbox__nav--next { right: calc(12px + env(safe-area-inset-right)); }
@media (max-width: 767px) and (orientation: portrait) {
  .lightbox__nav { bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lightbox__nav--prev { left: calc(50% - 56px); }
  .lightbox__nav--next { right: calc(50% - 56px); }
}
img[data-zoom] { cursor: zoom-in; }

/* Кнопка-лупа на слайде карусели: правый нижний угол, видна всегда, при наведении на слайд ярче */
.carousel__slide { position: relative; }
.zoom-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 31, 58, .6);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: zoom-in;
  transition: background-color .2s ease, transform .2s ease;
}
.carousel__slide:hover .zoom-btn,
.zoom-btn:hover,
.zoom-btn:focus-visible { background: rgba(11, 31, 58, .9); transform: scale(1.08); }
/* Лупа лежит на светлом скриншоте и в тёмной секции — рамка всегда тёмно-синяя с белым зазором */
.carousel__slide .zoom-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
@media (prefers-reduced-motion: reduce) { .zoom-btn { transition: none; } }
/* На телефоне кнопка компактнее и ближе к углу — меньше закрывает скриншот */
@media (max-width: 767px) {
  .zoom-btn { right: 6px; bottom: 6px; width: 36px; height: 36px; }
  .zoom-btn svg { width: 20px; height: 20px; }
}

/* Подсказка под каруселью: на телефоне короче и с маленькой лупой */
.hint-narrow { display: none; }
.zoom-icon { flex-shrink: 0; }
@media (max-width: 767px) {
  .hint-wide { display: none; }
  .hint-narrow { display: inline-flex; align-items: center; gap: 6px; }
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  font-weight: 500;
}

.feature__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--navy);
  font-size: 22px;
}


/* Акцентная карточка (блок «Безопасность») */
.feature--accent {
  margin-top: 14px;
  background: var(--yellow-soft);
  border: 1px solid var(--yellow-border);
  font-weight: 700;
}

/* Главная карточка блока «Безопасность»: заголовок + обычный текст */
.feature--lead { margin: 0 0 14px; font-weight: 400; }
.feature__title { font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--navy); }
.feature__body p { margin-top: 8px; }
/* Плашка «Это не торговый робот» под двумя колонками блока «Безопасность» */
.feature--plain { margin-top: 32px; padding: 20px; background: var(--white); border: 1px solid var(--line); font-weight: 400; }

/* Карусель */
.carousel { position: relative; }

.carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Свайп до края ленты не переходит в жест «Назад» браузера */
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  margin: 0; /* без браузерного отступа <figure>: рамка по ширине карусели */
  scroll-snap-align: start;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px;
}
.carousel__slide img { width: 100%; background: var(--white); }
/* WebP в <picture> с запасным PNG: обёртка не участвует в раскладке — рамка слайда и .shot выравнивают сам <img>, как раньше */
.carousel__slide > picture,
.shot > picture { display: contents; }
.carousel__slide figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}

.carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
}
.carousel__btn:hover { background: var(--navy-3); }
.section--dark .carousel__btn { background: var(--yellow); color: var(--navy); }
.section--dark .carousel__btn:hover { background: var(--yellow-hover); }
.section--dark .carousel__slide { border-color: var(--navy-3); }

.carousel__dots { display: flex; gap: 8px; }

/* Контраст с фоном не меньше 3:1: на белом и #F2F3F5 — серая и тёмно-золотая, на тёмном — серая и жёлтая */
.carousel__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #7F8898;
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}
.carousel__dot[aria-current="true"] { width: 26px; background: var(--yellow-ink); }
.section--dark .carousel__dot[aria-current="true"] { background: #E0B800; }
/* Зона нажатия 44×44 при прежнем виде точки. Зоны соседних точек перекрываются — какую точку
   выбрало касание, решает скрипт (ближайшая к пальцу) */
.carousel__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Предпросмотр инструкции */
.preview { display: grid; justify-items: center; gap: 10px; }

.preview__frame {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* Пропорции видео 400×554: рамка не меняет высоту, пока видео грузится после клика */
  aspect-ratio: 400 / 554;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--white);
}

.preview__frame > picture { display: contents; }
.preview__poster { display: block; width: 100%; height: 100%; filter: blur(1px); opacity: .55; }

.preview__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 20px;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(11, 31, 58, .3);
}
/* Уже 480px полный текст не помещается в рамку: короткий вариант, а если и он не влезет (320px) — перенос */
.preview__btn-short { display: none; }
@media (max-width: 479px) {
  .preview__btn { width: max-content; max-width: calc(100% - 24px); padding: 14px 16px; white-space: normal; text-align: center; }
  .preview__btn-long { display: none; }
  .preview__btn-short { display: inline; }
}

.preview__video { display: block; width: 100%; height: 100%; }

.preview__note { font-size: 14px; color: var(--muted); text-align: center; }

/* =========================================================
   Блок 8 — Прувы (Почему я создал эту автоматизацию)
   ========================================================= */
.author {
  /* Без фото: текст на всю ширину карточки, по одной левой линии */
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  /* .author сам является .container, поэтому боковые поля — через ширину */
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(1200px - 2 * var(--gutter));
}

.author__text p { margin-top: 12px; font-size: 17px; color: var(--muted); }

/* Акцентная версия: тёмная карточка с жёлтой рамкой, текст крупнее */
.author--accent {
  background: var(--navy);
  color: var(--on-dark);
  border: 2px solid var(--yellow);
  box-shadow: 0 16px 40px rgba(11, 31, 58, .22);
}
.author--accent .author__text p { margin-top: .875em; font-size: 16px; line-height: 1.5; color: var(--on-dark); }
.author--accent .author__text strong { color: var(--on-dark); font-weight: 800; }
.author--accent .author__text .author__punch {
  margin-top: 18px;
  font-size: min(24px, calc((100vw - 76px) / 12)); /* вся фраза в одну строку и на 320 */
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--yellow);
}

/* =========================================================
   Блок 7 — Безопасность и гарантия · Гарантия
   ========================================================= */
.guarantee {
  display: grid;
  gap: 16px;
  background: var(--white);
  border: 2px solid var(--yellow);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}

.guarantee__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--navy);
  font-size: 32px;
}

.guarantee p { margin-top: 12px; font-size: 17px; }
.guarantee__note { color: var(--muted); font-size: 15px; }
/* Ссылки на почту в «Гарантии»: тёмно-синий текст с жёлтым подчёркиванием, как ссылки в документах */
.guarantee__link {
  color: var(--navy);
  font-weight: 600;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.guarantee__link:hover { color: var(--yellow-ink); }

/* =========================================================
   Блок 10 — Вопросы
   ========================================================= */
.faq { display: grid; gap: 10px; }

.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq__item h3 { font-size: inherit; }

.faq__q {
  position: relative;
  display: block;
  width: 100%;
  padding: 18px 56px 18px 18px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.faq__q::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 20px;
  line-height: 1;
  transform: translateY(-50%);
}
.faq__q[aria-expanded="true"]::after { content: "−"; }

.faq__a { padding: 0 18px 18px; color: var(--muted); }

/* =========================================================
   Блок 11 — Финальный CTA
   ========================================================= */
.cta {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 221, 45, .18), transparent 55%),
    var(--navy);
}

.cta__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 720px;
}

.cta__logo { width: auto; height: 88px; margin-bottom: 16px; }
.cta__title { font-size: 24px; line-height: 1.25; margin-bottom: 28px; }
/* Сноска к «первый утренний отчёт*» под сроками */
.cta__footnote { max-width: 560px; }
/* «↑ Назад» под сноской: маленькая ссылка, появляется после перехода по звёздочке */
.fn-back {
  margin-top: 8px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fn-back[hidden] { display: none; }
.fn-back:hover { color: var(--yellow-hover); }

.pay-methods {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.pay-methods li {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--navy-3);
  background: var(--navy-2);
  font-size: 14px;
  color: var(--on-dark);
}

/* =========================================================
   Подвал (вне нумерации)
   ========================================================= */
.footer {
  padding: 32px 0 40px;
  background: #07162A;
  color: var(--on-dark-muted);
  font-size: 14px;
}
.footer .container { display: grid; gap: 12px; }

/* Ссылки высотой 44px (зона нажатия пальцем); отрицательные поля сохраняют прежние отступы вокруг строки */
.footer__links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: -11px 0; }
.footer__links a,
.footer__cookie { display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.footer__links a:hover { color: var(--yellow); }
/* «Настройки cookie» — кнопка (действие на странице), выглядит как ссылки рядом */
.footer__cookie {
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer__cookie:hover { color: var(--yellow); }

.footer__legal { font-size: 14px; opacity: .8; }

/* Соцсети: иконка и подпись, ссылка высотой 44px (зона нажатия), как ссылки выше */
.footer__social { display: flex; flex-wrap: wrap; gap: 0 20px; margin: -11px 0; padding: 0; list-style: none; }
.footer__social a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--white); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px;
}
.footer__social a:hover { color: var(--yellow); }
.footer__social-icon { flex: none; width: 24px; height: 24px; }

/* =========================================================
   Уведомление о cookie (до согласия Метрика не загружается)
   ========================================================= */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  gap: 10px;
  max-height: 33vh;
  overflow-y: auto;
  /* Снизу — отступ над полоской «домой» iPhone, по бокам — от выреза в альбомной ориентации */
  padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--navy);
  color: var(--on-dark);
  border-top: 2px solid var(--yellow);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .25);
}
.cookie__text { font-size: 13px; line-height: 1.4; }
.cookie__text a { color: var(--yellow); text-underline-offset: 3px; }
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Обе кнопки одинакового веса: выбор не навязывается */
.cookie__btn {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.cookie__btn:hover { background: rgba(255, 255, 255, .1); }
.cookie__btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

@media (min-width: 768px) {
  .cookie {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 16px max(24px, calc((100% - 1136px) / 2), env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(24px, calc((100% - 1136px) / 2), env(safe-area-inset-left));
  }
  .cookie__text { font-size: 14px; line-height: 1.45; }
  .cookie__actions { grid-template-columns: repeat(2, 140px); }
}

/* =========================================================
   Страницы документов: оферта и политика конфиденциальности
   ========================================================= */
.doc { padding: 32px 0 56px; background: var(--white); }
.doc__inner { max-width: calc(760px + 2 * var(--gutter)); }
.doc__back {
  display: inline-block;
  /* Зона нажатия 44px в высоту; отрицательные поля сохраняют прежние отступы */
  padding: 11px 0;
  margin: -11px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.doc__back:hover { color: var(--yellow-ink); }
.doc__back--bottom { margin-top: 29px; }
.doc__title { margin-top: 24px; font-size: 26px; line-height: 1.2; font-weight: 800; color: var(--navy); }
.doc__date { margin-top: 12px; font-size: 15px; color: var(--muted); }
.doc__section { margin-top: 32px; }
.doc__h2 { font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--navy); }
.doc__item,
.doc__requisites { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text); }
.doc__num { font-weight: 700; }
.doc__item--note { color: var(--muted); }
/* Пункт, на который ведёт ссылка (oferta.html#p-9-2): в окне документов и на отдельной странице */
.doc__item { scroll-margin-top: calc(var(--header-h) + 16px); border-radius: 6px; transition: background-color .6s ease, box-shadow .6s ease; }
.doc__item:target,
.doc__item--hl { background: var(--yellow-soft); box-shadow: 0 0 0 6px var(--yellow-soft); }
/* Длинный адрес сайта не должен давать горизонтальную прокрутку на телефоне */
.doc a { color: var(--navy); overflow-wrap: anywhere; }
.doc a[href^="tel:"] { white-space: nowrap; } /* номер телефона не разрывается, в т. ч. на дефисе */
.doc__back { overflow-wrap: normal; }
/* Места в [квадратных скобках] — заполнить перед запуском */
.doc__fill { padding: 0 3px; border-radius: 4px; background: var(--yellow); color: var(--text); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Страница 404: крупный номер ошибки, короткий текст и кнопка на главную; подвал прижат к низу экрана */
.page-notfound { display: flex; flex-direction: column; min-height: 100vh; }
.page-notfound > main { flex: 1; }
.notfound .doc__inner { text-align: center; }
.notfound__code { margin-top: 24px; font-size: 72px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--yellow-ink); }
.notfound .doc__title { margin-top: 12px; }
.notfound__text { max-width: 560px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; color: var(--muted); }
.notfound__btn { margin-top: 28px; }

/* Страница после оплаты /pay/success.php, «Оплата прошла»: зелёный круг с галочкой, строка заказа,
   текст про ссылку прямо над кнопкой, карточка Telegram-канала, два абзаца про письмо */
.pay-ok__mark {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin: 24px auto 0; border-radius: 50%;
  background: var(--pay-ok); box-shadow: 0 6px 18px rgba(34, 160, 107, 0.3);
  animation: pay-ok-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
@keyframes pay-ok-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pay-ok__mark { animation: none; } }
.pay-ok__order { margin: 12px auto 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--text); }
.pay-ok__num { padding: 1px 8px; border-radius: 6px; background: var(--yellow-soft); box-shadow: inset 0 0 0 1px var(--yellow-border); white-space: nowrap; }
.pay-ok__test { margin: 6px auto 0; font-size: 14px; color: var(--muted); }
.notfound__text.pay-ok__lead { margin-top: 28px; }
.notfound__btn.pay-ok__btn { margin-top: 14px; }
/* Карточка Telegram-канала — как плашка в письме покупателю (order_mail_html): те же цвета, отступы и размеры */
.tg-card {
  display: flex; align-items: flex-start; gap: 14px; max-width: 560px; margin: 28px auto 0; padding: 18px;
  border: 1px solid #CDE8F7; border-radius: 14px; background: #EEF8FE; text-align: left;
}
.tg-card__icon { flex: none; width: 48px; height: 48px; }
.tg-card__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.tg-card__text .nowrap { white-space: nowrap; }
.doc .tg-card__btn { /* .doc — сильнее правила .doc a (тёмно-синие ссылки документа) */
  display: inline-block; margin-top: 12px; padding: 10px 20px; border-radius: 10px;
  font-size: 15px; line-height: 18px; font-weight: 700; color: #FFFFFF; text-decoration: none;
  background: #229ED9; transition: background-color 0.2s;
}
.doc .tg-card__btn:hover { background: #1B8BC2; }
.tg-card__btn:focus-visible { outline: 3px solid #229ED9; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tg-card__btn { transition: none; } }
.notfound__text.pay-note { margin-top: 28px; }
.notfound__text.pay-note--next { margin-top: 14px; }

/* Форма заказа /pay/start.php: email и согласие с офертой и политикой */
.pay-form { max-width: 480px; margin: 28px auto 0; text-align: left; }
.pay-form__field + .pay-form__field { margin-top: 20px; }
.pay-form__label { display: block; margin-bottom: 8px; font-size: 17px; line-height: 1.4; font-weight: 600; text-align: center; }
.pay-form__input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 17px; color: var(--text);
  background: var(--white); border: 1.5px solid #B9BEC7; border-radius: var(--radius-sm);
}
.pay-form__input:focus-visible { border-color: var(--navy); }
.pay-form__input[aria-invalid="true"] { border-color: var(--red); }
.pay-form__check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.pay-form__check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy); cursor: pointer; }
.pay-form__check a { color: var(--navy); text-decoration: underline; }
.pay-form__error { margin-top: 6px; font-size: 14px; color: var(--red); }
.pay-form .pay-form__btn { margin-top: 24px; width: 100%; }
.pay-form__note { margin-top: 12px; font-size: 14px; color: var(--muted); text-align: center; }
/* Ловушка для ботов (start.php): поле за пределами экрана — человек его не видит и не заполняет */
.pay-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Всплывающее окно с документом: карточка по центру на затемнённом фоне, на телефоне — с отступом 12px от краёв */
.doc-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  /* viewport-fit=cover: окно не заходит под вырез и полоску «домой» iPhone */
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(11, 31, 58, .72);
}
.doc-modal[hidden] { display: none; }
.doc-modal__dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
  outline: none;
}
.doc-modal__head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--line);
}
.doc-modal__title { flex: 1; min-width: 0; padding-top: 8px; font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--navy); }
.doc-modal__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.doc-modal__close:hover { background: var(--yellow-hover); }
.doc-modal__close:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.doc-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 32px;
  outline: none;
}
.doc-modal__body .doc__date { margin-top: 16px; }
.doc-modal__body .doc__section { margin-top: 28px; }
.doc-modal__body a { color: var(--navy); overflow-wrap: anywhere; }
.doc-modal__error { margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--text); }
.doc-modal__error a { font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (min-width: 768px) {
  .doc { padding: 48px 0 80px; }
  .doc__title { font-size: 34px; }
  .doc__section { margin-top: 40px; }
  .doc__h2 { font-size: 22px; }
  .doc__item,
  .doc__requisites { font-size: 17px; }
  .doc-modal { padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .doc-modal__dialog { max-width: 820px; }
  .doc-modal__head { padding: 20px 20px 18px 32px; }
  .doc-modal__title { font-size: 22px; }
  .doc-modal__body { padding: 4px 32px 40px; }
}

/* =========================================================
   Breakpoint 480px
   ========================================================= */
@media (min-width: 480px) {
  .btn--lg { width: auto; }
  .btn--xl { width: auto; padding: 24px 44px; font-size: 22px; }
  .author--accent .author__text .author__punch { font-size: 28px; }
}

/* =========================================================
   Breakpoint 768px
   ========================================================= */
@media (min-width: 768px) {
  :root { --section-y: 56px; --section-y-buy: 40px; --gutter: 24px; --header-h: 76px; }

  .logo__img { height: 56px; }
  .header__title { font-size: 24px; }
  .btn--sm { padding: 12px 20px; font-size: 16px; }

  .buy { flex-direction: row; gap: 24px; text-align: left; }
  .buy--center { justify-content: center; }
  .price { flex-shrink: 0; max-width: 200px; }
  .buy > .btn { flex-shrink: 0; white-space: nowrap; }

  .section__title { font-size: 36px; }
  .hero { padding-top: 64px; }
  .acc__summary { padding: 24px 28px; }
  .acc__body { padding: 4px 28px 32px; }
  .acc__title { font-size: 28px; }
  .hero__platform { font-size: 19px; padding: 10px 22px 10px 16px; }
  .hero__audience { font-size: 24px; }
  .hero__promise { font-size: 23px; }
  .hero__lead { font-size: 19px; }
  /* Отступы в левой колонке 1го экрана: заголовок → обещание → плашки по 24px, шаги — отдельной группой */
  .hero__inner { row-gap: 32px; }
  .hero__promise { margin-top: 24px; }
  .hero-tags { margin-top: 24px; }
  .hero-steps { margin-top: 32px; }

  .hero-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero-step { grid-template-columns: 1fr; gap: 10px; }
  .hero-step:not(:last-child)::after {
    left: 46px;
    right: -10px;
    top: 17px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, rgba(255, 221, 45, .7), rgba(255, 221, 45, .15));
  }
  .hero-step__time { font-size: 22px; }

  .hero__bonus { grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
  .hero__bonus { margin-top: 24px; }

  /* «Знакомо?»: четыре карточки — с 768px сетка 2 × 2, карточки в ряду одной высоты */
  .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .flow {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 32px;
  }
  .flow__arrow { width: 56px; height: 2px; }
  .how__intro { padding: 24px 28px; font-size: 18px; }
  .how__note { margin-top: 18px; padding: 16px 20px; font-size: 17px; }
  .flow__arrow::after {
    left: auto;
    right: -2px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }



  .author { padding: 32px; }
  .author--accent .author__text .author__punch { font-size: 32px; }

  .guarantee { grid-template-columns: auto 1fr; padding: 32px; gap: 24px; }

  .cta__title { font-size: 32px; }
}

/* =========================================================
   Breakpoint 1024px
   ========================================================= */
@media (min-width: 1024px) {
  /* Блок 8: текст чуть крупнее, абзацы на всю ширину карточки */
  .author--accent .author__text p { font-size: 17px; }
  /* Блок 5: плашки слева, карусель справа и липнет при прокрутке */
  .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: start; }
  .gallery__media { position: sticky; top: calc(var(--header-h) + 24px); }

  /* 1й экран — две колонки с «этажами» с 1024px.
     Строка 1: слева текст, плашки и шаги; справа карусель с подсказкой (верх — на линии жёлтого заголовка).
     Строка 2: слева «Бонус*», справа скриншот отчёта — через 64px под каруселью.
     Если левая колонка выше карусели, строка 2 начинается не раньше, чем через 32px после шагов (−8 + 40). */
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0 56px;
  }
  .hero__content { grid-column: 1; grid-row: 1; margin-bottom: -8px; }
  .hero__media { grid-column: 2; grid-row: 1; max-width: 471px; justify-self: center; margin-bottom: 64px; }
  .hero-steps { margin-top: 24px; }
  .hero__bonus { display: contents; }
  .hero__bonus-text { grid-column: 1; grid-row: 2; margin-top: 40px; }
  .hero__bonus-shot { grid-column: 2; grid-row: 2; justify-self: center; }
  .hero-step__time { font-size: 20px; }
  .hero-tag { font-size: 18px; padding: 9px 17px; }
  .fit-list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 24px 48px; }
  /* Колонки без общей сетки строк: пункты идут подряд, без пустот из-за соседа в другой колонке */
  .nofit-list { display: block; columns: 2; column-gap: 48px; }
  .nofit-item { break-inside: avoid; margin-bottom: 14px; }
  .nofit__title { font-size: 26px; }
  .demo-video { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: center; gap: 48px; text-align: left; }
  .demo-video__poster { max-width: none; margin: 0; }
  .demo-video__caption { margin-top: 0; font-size: 22px; line-height: 1.3; }
  .demo-video__text { display: block; margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--muted); }
  /* inline-block — стрелка ↗ идёт в строку с текстом, а не отдельным элементом flex */
  .demo-video__btn { display: inline-block; margin-top: 24px; padding: 14px 20px; font-size: 16px; }
  .demo-video__link { display: none; }
}

/* 768–1023: карусель под жёлтым подзаголовком (см. «До 1023px карусель листов…») — отступы вокруг неё
   и до бонуса крупнее, чем общие для 768px (там они рассчитаны на шаги сразу после плашек) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__inner { row-gap: 0; }
  .hero__media { margin-top: 28px; }
  .hero__promise { margin-top: 36px; }
  .hero__bonus { margin-top: 48px; }
}

/* 1024–1199: левая колонка 1го экрана узкая — шаги компактнее, чтобы три стояли в ряд */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero__inner { column-gap: 40px; }
  .hero-steps { gap: 10px; }
  .hero-step__time { font-size: 17px; }
  .hero-step__text { font-size: 15px; }
  .hero-step:not(:last-child)::after { right: -6px; }
}

/* =========================================================
   Breakpoint 1200px
   ========================================================= */
@media (min-width: 1200px) {
  :root { --section-y: 72px; --section-y-buy: 48px; --gutter: 32px; }

  .section__title { font-size: 42px; }

  .header__title { font-size: 28px; }
  /* С 1200px карусель крупнее */
  .hero__media { max-width: 520px; }




  .split { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .split__media { position: sticky; top: calc(var(--header-h) + 24px); }



}