/* YAZME 2026 | Стили разборов /kak/*
   Файл: persona/assets/guide.css
   Дополняет hub.css — переменные, шапка, сетка карточек и FAQ берутся оттуда.
   Здесь только то, чего в витринах нет: длинный текст, блок прямого ответа
   и промо-блок с витриной персонажей. */

article{max-width:760px}
.gsec{padding:22px 0 0}
.gsec h2{font-size:clamp(19px,2.7vw,25px);letter-spacing:-.02em;font-weight:750;margin:0 0 12px}
.gsec h3{font-size:17px;font-weight:700;margin:18px 0 8px}
.gsec p{color:var(--tx2);font-size:15.5px;line-height:1.62;margin:0 0 12px}
.gsec p b{color:var(--tx);font-weight:650}
.gsec a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.gsec a:hover{color:var(--acc2)}

/* БЛОК ПРЯМОГО ОТВЕТА.
   Стоит первым, до всякого продвижения, и визуально выделен: человек пришёл
   с конкретным вопросом, и первое, что он должен увидеть, — ответ на него.
   Он же чаще всего попадает в расширенный сниппет выдачи. */
.answer{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:0 14px 14px 0;padding:16px 18px;margin:16px 0 6px;max-width:760px}
.answer-l{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);font-weight:750;margin-bottom:7px}
.answer p{margin:0;color:var(--tx);font-size:16px;line-height:1.58}

/* списки с галочками */
ul.ticks{list-style:none;padding:0;margin:0 0 12px}
ul.ticks li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--tx2);
  font-size:15.5px;line-height:1.55}
ul.ticks li:before{content:"—";position:absolute;left:0;top:0;color:var(--acc);font-weight:700}
ul.ticks li b{color:var(--tx);font-weight:650}

.mut{color:var(--tx3);font-size:13px}
.cmp .mut{font-size:12px}
.cmp .ok{color:var(--acc);font-weight:600}
.cmp td b{color:var(--tx)}

.checked{margin:22px 0 4px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--tx3);font-size:12.5px;line-height:1.5;max-width:760px}

/* ─────────────────────────────────────────────────────────────────────────
   ПРОМО-БЛОК
   Стоит ПОСЛЕ ответа на вопрос. Это не вёрстка, а правило: страница,
   которая начинается с рекламы вместо ответа, теряет человека за десять
   секунд, а поисковик видит возврат в выдачу и понижает её.
   ───────────────────────────────────────────────────────────────────────── */
.promo{margin:34px 0 10px;padding:24px 22px 26px;border:1px solid var(--line);
  border-radius:20px;background:linear-gradient(155deg,rgba(217,119,87,.09),transparent 62%),var(--bg2)}
html[data-yz-theme="cloud"] .promo{background:linear-gradient(155deg,rgba(201,101,67,.08),transparent 62%),#fff}
@media(max-width:560px){.promo{padding:20px 16px 22px;border-radius:16px}}
.promo-head h2{font-size:clamp(21px,3.1vw,28px);letter-spacing:-.025em;font-weight:800;margin:0 0 10px}
.promo-head p{color:var(--tx2);font-size:15.5px;line-height:1.58;margin:0 0 18px;max-width:640px}
.promo-h3{font-size:16px;font-weight:700;margin:22px 0 12px}
.promo .grid{margin:0 0 18px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
@media(max-width:520px){.promo .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}}
.promo .pc a{background:var(--card)}

.promo-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.cta2{display:inline-block;background:transparent;color:var(--tx);font-weight:650;
  padding:13px 22px;border-radius:12px;font-size:14.5px;border:1px solid var(--line);
  text-decoration:none}
.cta2:hover{border-color:var(--acc)}
.promo .cta{margin-top:0}

.also-in{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:16px 0 0}
.also-in a{display:inline-block;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px;font-size:12.5px;color:var(--tx2);text-decoration:none}
html[data-yz-theme="cloud"] .also-in a{background:rgba(35,32,25,.04)}
.also-in a:hover{border-color:var(--acc);color:var(--tx)}

/* карточки разборов на /kak/ */
.gcards{list-style:none;display:grid;gap:11px;padding:0;margin:22px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.gcards a{display:block;background:var(--bg2);border:1px solid var(--line);border-radius:15px;
  padding:16px 18px;height:100%;text-decoration:none;transition:border-color .15s,transform .15s}
.gcards a:hover{border-color:var(--acc);transform:translateY(-2px)}
.gcards b{display:block;font-size:16px;font-weight:700;margin-bottom:6px;color:var(--tx)}
.gcards span{display:block;color:var(--tx2);font-size:13.5px;line-height:1.5}