/* gepard-instruction.css — 2026-08-13, страница «Инструкция к боту».
 *
 * НАМЕРЕННО МАЛЕНЬКИЙ ФАЙЛ. Шапка, первый экран, заголовки секций и кнопки
 * берутся из gepard-landing.css и gepard-seo.css — страница должна выглядеть
 * ровно как остальные посадочные, а не как гость. Здесь только блоки,
 * которых в тех файлах нет: карточки режимов, шаги, плашки-примечания.
 *
 * Палитра совпадает с gepard-doc-check.css: тот же оранжевый #F26522 и тот
 * же янтарный для предупреждений. Токены объявлены локально, потому что seo-
 * страницы их не экспортируют.
 */

.gl {
  --in-ink: #131316;
  --in-ink-2: #4A4A52;
  --in-ink-3: #84848C;
  --in-line: rgba(19,19,22,0.08);
  --in-brand: #F26522;
  --in-brand-ink: #C24A12;
  --in-warn: #F0930C;
  --in-warn-ink: #A85F06;
  --in-warn-text: #7A5210;
  --in-r: 20px;
}

/* Две кнопки в первом экране: основная и «скачать PDF». Вторая намеренно
   тише — PDF это запасной путь, а не равноценная альтернатива.
   justify-content обязателен: секция центрирует текст, но флекс-контейнер
   этого не наследует, и без явного выравнивания кнопки прижимаются влево,
   а подпись под ними остаётся по центру. */
.in-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-top: 22px;
}
.in-cta__note { display: block; margin-top: 12px; font-size: 13.5px; color: var(--in-ink-3); }

/* !important у цвета — не прихоть: в базовом .seo-btn стоит
   `color: #FFFFFF !important`, и без такой же пометки текст остаётся белым
   на белом фоне, то есть невидимым. Ровно так же решено у соседнего
   .seo-btn--light в gepard-seo.css.
   Размеры и скругление повторяют .seo-btn--lg: кнопки стоят в одном ряду и
   обязаны совпадать по высоте. */
.seo-btn--ghost {
  gap: 9px;
  padding: 18px 30px; border-radius: 13px;
  background: #FFFFFF; border: 1px solid var(--in-line);
  color: var(--in-ink) !important;
  font-size: 17px;
  box-shadow: 0 8px 22px rgba(19, 19, 22, 0.07);
  text-decoration: none;
}
.seo-btn--ghost:hover { border-color: var(--in-brand); background: #FFF8F4; text-decoration: none; }
.seo-btn--ghost i { font-size: 19px; color: var(--in-brand); }

/* ── Три режима ─────────────────────────────────────────────────────────
   Сетка на auto-fit, а не на три жёстких колонки: на планшете режимы
   складываются в два столбца сами, без отдельной медиазапроса. */
.in-modes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 26px;
}
.in-mode {
  background: #fff; border: 1px solid var(--in-line); border-radius: var(--in-r);
  padding: 24px 22px;
}
.in-mode__ico {
  width: 46px; height: 46px; border-radius: 14px; background: #FFF3EC;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.in-mode__ico i { font-size: 23px; color: var(--in-brand); }
.in-mode__t { font-size: 17px; font-weight: 800; margin: 0 0 6px; color: var(--in-ink); letter-spacing: -0.01em; }
/* Строка «для какой проверки» — самое важное в карточке: человек выбирает
   режим именно по ней, а не по описанию. Поэтому она выделена цветом и
   стоит выше текста. */
.in-mode__for { font-size: 13px; font-weight: 700; color: var(--in-brand-ink); margin: 0 0 12px; line-height: 1.45; }
.in-mode__d { font-size: 14.5px; line-height: 1.65; color: var(--in-ink-2); margin: 0; }

/* ── Плашки-примечания ──────────────────────────────────────────────────
   Три вида: обычная (оранжевая), предупреждение (янтарная) и спокойная
   (серая, для юридической оговорки — там нагнетать нечего). */
.in-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFF8F4; border: 1px solid #F5D5C2; border-radius: var(--in-r);
  padding: 18px 20px; margin-top: 22px;
  font-size: 14.5px; line-height: 1.65; color: var(--in-ink-2);
}
.in-note i { font-size: 22px; color: var(--in-brand); flex: none; margin-top: 1px; }
.in-note b { color: var(--in-ink); }

.in-note--warn { background: #FFF8E8; border-color: #F0D78A; color: var(--in-warn-text); }
.in-note--warn i { color: var(--in-warn); }
.in-note--warn b { color: var(--in-warn-ink); }


/* ── Две карточки рядом ─────────────────────────────────────────────── */
.in-two {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 26px;
}
.in-card {
  background: #fff; border: 1px solid var(--in-line); border-radius: var(--in-r);
  padding: 24px 22px;
}
.in-card__h {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800; color: var(--in-ink); margin-bottom: 12px;
}
.in-card__h i { font-size: 21px; color: var(--in-brand); }
.in-card p { font-size: 14.5px; line-height: 1.65; color: var(--in-ink-2); margin: 0 0 10px; }
.in-card__note { font-size: 13px !important; color: var(--in-ink-3) !important; margin: 0 !important; }

/* ── Шаги ───────────────────────────────────────────────────────────── */
.in-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: 26px;
}
.in-step {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--in-line); border-radius: 16px; padding: 18px 20px;
}
.in-step__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--in-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
}
.in-step p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--in-ink-2); }

/* ── Списки и абзацы ────────────────────────────────────────────────── */
.in-list { margin: 22px 0 0; padding-left: 20px; }
.in-list li { font-size: 14.5px; line-height: 1.7; color: var(--in-ink-2); margin-bottom: 8px; }
.in-list li b { color: var(--in-ink); }
.in-list--tight { margin-top: 0; }
.in-list--tight li { font-size: 14px; margin-bottom: 6px; }

.in-p { font-size: 15px; line-height: 1.7; color: var(--in-ink-2); margin: 22px 0 0; }

/* ── Три числа ──────────────────────────────────────────────────────── */
.in-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-top: 26px;
}
.in-fact {
  background: #fff; border: 1px solid var(--in-line); border-radius: 16px;
  padding: 20px; text-align: center;
}
.in-fact b { display: block; font-size: 28px; font-weight: 800; color: var(--in-brand-ink); letter-spacing: -0.02em; }
.in-fact span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--in-ink-3); }

/* ── Перелинковка ───────────────────────────────────────────────────────
   Ссылки на соседние разделы. Без них новая страница будет висеть в
   стороне от сайта, и поисковик найдёт её нескоро — на автооглавлении мы
   этот урок уже получили. */
.in-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin-top: 26px;
}
.in-link {
  display: block; background: #fff; border: 1px solid var(--in-line);
  border-radius: 16px; padding: 20px; text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease;
}
.in-link:hover { border-color: var(--in-brand); transform: translateY(-2px); text-decoration: none; }
.in-link i { font-size: 22px; color: var(--in-brand); }
.in-link b { display: block; margin: 10px 0 5px; font-size: 15px; font-weight: 700; color: var(--in-ink); }
.in-link span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--in-ink-3); }

@media (max-width: 640px) {
  .in-mode, .in-card { padding: 20px 18px; }
  .in-note { padding: 16px 17px; font-size: 14px; }
  .in-fact b { font-size: 24px; }
}