/* Автоинформирование (/products/autoinform) — продающая страница готового
   решения автоотбивок для Битрикс24. Стили извлечены из inline-<style> тела
   продукта; всё scoped под .ai, токены .rl. Подключается только на странице
   продукта через @push('head') в resources/views/products/show.blade.php. */

/* Логотип: иконка-трубка в золотом квадрате + слово. Те же цветовые токены .rl. */
.ai-logo {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
}
.ai-logo__mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-gradient, linear-gradient(135deg,#EFD6A6,#C9A362));
  color: #14171a;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent, #E3C083) 28%, transparent);
  flex-shrink: 0;
}
.ai-logo__word {
  font: 800 22px/1 var(--text, #fff);
  letter-spacing: -.03em;
}

/* Крупный портрет лендинга – hero чуть плотнее на широких экранах */
@media (min-width: 1025px) {
  .ai .rl-hero { padding: 80px 0 72px; }
}

/* Обнуляем дефолтный нижний margin <p> подзаголовка и задаём зазор у кнопок */
.ai .rl-hero-sub { margin-bottom: 0; }
.ai .rl-hero-cta { margin-top: 32px; }

/* Подписи-«бейджи» под hero-подзаголовком (фишки в одну строку) */
.ai-featline { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.ai-featline span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 6px;
  background: var(--card, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  font-size: 13px; color: var(--muted-hi, rgba(255,255,255,.75));
}
.ai-featline span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent, #E3C083);
}

/* ═══ Блок метрик ═══
   Три крупных числа с подписями — сильнее дефолтного rl-stats, чтобы цифры
   ~70% / 1 мин / 0 читались как смысловые якоря, а не как табличка. */
.ai-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 40px;
}
.ai-stat {
  padding: 28px 26px;
  background: var(--card, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: var(--radius, 6px);
}
.ai-stat-num {
  font-size: clamp(40px, 6vw, 64px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--text, #fff);
  margin: 0 0 12px;
}
.ai-stat-num em { font-style: normal; color: var(--accent, #E3C083); }
.ai-stat-label {
  font-size: 14px; line-height: 1.55; color: var(--sec, rgba(255,255,255,.7));
  margin: 0;
}
@media (max-width: 760px) {
  .ai-stats { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══ Галерея скриншотов интерфейса ═══
   У скриншотов РАЗНЫЕ пропорции (дашборд ~1.6:1, журнал/симулятор ~2:1,
   аналитика — широкая лента ~4:1), поэтому фиксированный aspect-ratio как
   у inCam не подходит: обрезал бы суть. Здесь — природные пропорции картинок
   в светлой рамке с тенью (imac-стиль); широкую ленту аналитики тянем на
   всю ширину через .ai-shot--wide. */
.ai-shots {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.ai-shot { margin: 0; }
/* По умолчанию скриншот занимает одну ячейку; широкая лента — две. */
.ai-shot--wide { grid-column: 1 / -1; }
.ai-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: var(--radius, 6px);
  background: #0f1115;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-shot:hover img {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -12px rgba(0,0,0,.65);
}
.ai-shot figcaption {
  margin-top: 12px;
  font-size: 14px; line-height: 1.5; color: var(--sec, rgba(255,255,255,.7));
}
.ai-shot figcaption b { color: var(--text, #fff); font-weight: 700; }
@media (max-width: 760px) {
  .ai-shots { grid-template-columns: 1fr; gap: 24px; }
}

/* ═══ «Терминал» журнала решений ═══
   Имитация консольного вывода прогона: каждая строка — решение по лиду.
   Цветные теги статусов (~отбивки sent / route / пропуски), моноширинный
   текст, фон темнее карточки. Слева — терминал, справа — чек-лист защиты. */
.ai-terminal {
  background: #0d0f12;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: var(--radius, 6px);
  overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.55);
}
.ai-terminal .rl-terminal-body {
  font-family: var(--mono, "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px; line-height: 1.85;
  color: var(--sec, rgba(255,255,255,.72));
  padding: 18px 20px;
  white-space: normal;
  word-break: break-word;
}
.ai-log-time { color: var(--muted, rgba(255,255,255,.4)); }
.ai-log-tag {
  display: inline-block; min-width: 92px;
  padding: 1px 7px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: lowercase;
}
.ai-log-tag--ok    { background: var(--green-dim, rgba(78,238,160,.12));
                     color: var(--green, #4EEEA0); }
.ai-log-tag--route { background: color-mix(in srgb, var(--accent, #E3C083) 16%, transparent);
                     color: var(--accent, #E3C083); }
.ai-log-tag--skip  { background: rgba(255,255,255,.06);
                     color: var(--muted-hi, rgba(255,255,255,.6)); }

/* Заголовок блока внутри .rl-grid-2 (рядом с чек-листом) */
.ai-block-h {
  font-size: 16px; font-weight: 800; color: var(--text, #fff);
  letter-spacing: -.01em; margin: 0 0 14px;
}