/* ═══════════════════════════════════════════════════════════════════
   Стили посадочных страниц раздела «Инструменты».

   Все страницы под запросы устроены одинаково — первый экран с примером,
   шаги, цены, соседние инструменты, вопросы, — поэтому стили общие. Иначе
   через три страницы они разъедутся: так уже вышло с копиями первого
   экрана. Отличается на страницах содержание, а не устройство.

   Общее для всего сайта (токены, шапка, меню, кнопки, подвал) — в
   sayt.css, он подключается первым.
   ═══════════════════════════════════════════════════════════════════ */
/* ───────── Посадочная под запрос «создать картинку нейросетью» ─────────
   Общее — в sayt.css. Здесь только устройство этой страницы.

   Задача страницы не та же, что у хаба: человек пришёл из поиска с
   конкретным намерением и должен за один экран понять, что попал по
   адресу, увидеть результат и цену. Поэтому первый экран — текст плюс
   настоящая картинка, а не обещание. */
.lhero{ padding:var(--s8) 0 0; }
.lhero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:var(--s12); align-items:center; }
.krohi{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-faint); }
.krohi a{ color:var(--ink-dim); }
.krohi a:hover{ color:var(--ink); }
.lhero__t{ margin-top:var(--s4); font-size:clamp(32px, 4.4vw, 50px); font-weight:500;
  letter-spacing:-0.035em; line-height:1.05; }
.lhero__s{ margin-top:var(--s4); font-size:18px; line-height:1.55; color:var(--ink-dim); max-width:56ch; }
.lhero__cta{ margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.lhero__note{ margin-top:var(--s4); font-size:14px; color:var(--ink-faint); }

/* Пример на первом экране: картинка и запрос, которым она сделана.
   Запрос показан целиком — без него кадр ничего не доказывает. */
.primer{ border-radius:var(--r-surface); overflow:hidden; border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--sh-flat), var(--sh-lift); }
.primer img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.primer__q{ padding:14px 16px; border-top:1px solid var(--line); background:#FCFCFE;
  font-size:13.5px; line-height:1.5; color:var(--ink-dim); }
.primer__q b{ font-weight:500; color:var(--ink); }

/* Четыре модели на одной фразе. Смысл раздела — показать, что выбор
   есть и он стоит разных денег; цены настоящие, из каталога. */
.chetyre{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s4); }
.chetyre figure{ margin:0; }
.chetyre img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; border:1px solid var(--line); }
.chetyre figcaption{ margin-top:10px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.chetyre b{ font-size:15px; font-weight:500; letter-spacing:-0.015em; }
.chetyre span{ font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.chetyre em{ font-style:normal; font-size:13px; color:var(--ink-faint); }

/* Три шага — узкой лентой, без картинок: на посадочной это служебная
   информация, а не главный аргумент. */
.shagi{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s4); }
.shagi div{ padding:var(--s4) var(--s4) var(--s6); border-top:2px solid var(--accent-soft); }
.shagi b{ display:block; font-size:13px; color:var(--accent); font-variant-numeric:tabular-nums; }
.shagi h3{ margin-top:10px; font-size:17px; font-weight:500; letter-spacing:-0.02em; }
.shagi p{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--ink-dim); }

/* Цены. Отдельным блоком и крупно: это первое, чего не пишут
   конкуренты, и первое, что спрашивают. */
.cena{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s4); }
.cena__c{ padding:var(--s6); border:1px solid var(--line); border-radius:var(--r-surface);
  background:var(--surface); box-shadow:var(--sh-flat); }
.cena__c b{ display:block; font-size:26px; font-weight:500; letter-spacing:-0.03em; color:var(--accent); }
.cena__c p{ margin-top:8px; font-size:15px; line-height:1.55; color:var(--ink-dim); }

/* Соседние инструменты — перелинковка внутри раздела. */
.ryadom{ margin-top:var(--s6); display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s4); }
.ryadom a{ display:block; padding:var(--s4); border:1px solid var(--line);
  border-radius:var(--r-surface); background:var(--surface);
  transition:border-color .18s ease, transform .18s cubic-bezier(.16,1,.3,1); }
.ryadom a:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.ryadom b{ display:block; font-size:16px; font-weight:500; letter-spacing:-0.02em; }
.ryadom span{ display:block; margin-top:6px; font-size:14px; line-height:1.5; color:var(--ink-dim); }

@media (max-width:1100px){
  .lhero__in{ grid-template-columns:1fr; gap:var(--s6); }
  .chetyre{ grid-template-columns:repeat(2, 1fr); }
  .shagi{ grid-template-columns:1fr; }
  .ryadom{ grid-template-columns:repeat(2, 1fr); }
  .cena{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .lhero{ padding:var(--s6) 0 0; }
  .lhero__s{ font-size:16.5px; }
}