/* ===== tochka-foto: интерактивные блоки поверх общего шаблона сети ===== */

/* --- подборщик «что сделать с фото» --- */
.picker{background:#fff;border:1px solid #D7DEE7;border-radius:var(--radius);box-shadow:var(--shadow-1);padding:18px;margin-top:16px}
.picker__q{font:800 17px/1.25 var(--f-display);margin:0 0 12px}
.picker__opts{display:flex;flex-wrap:wrap;gap:8px}
.picker__opt{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:9px 14px;font:600 14px/1 var(--f-body);color:var(--ink);cursor:pointer;transition:.15s}
.picker__opt:hover{border-color:var(--accent);color:var(--accent)}
.picker__opt.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.picker__res{margin-top:16px;border-top:1px solid var(--line);padding-top:16px;display:none}
.picker__res.is-on{display:block}
.picker__pick{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.picker__logo{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font:800 15px/1 var(--f-display);color:#fff;background:var(--accent);flex:0 0 auto}
.picker__body{flex:1 1 240px;min-width:0}
.picker__name{font:800 18px/1.2 var(--f-display)}
.picker__why{font-size:14px;color:var(--ink-2);margin:4px 0 0}
.picker__alt{font-size:13px;color:var(--muted);margin:8px 0 0}
.picker__cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* --- фильтры каталога --- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px}
.filters__lbl{font:700 13px/1 var(--f-body);color:var(--muted);margin-right:2px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:600 13px/1 var(--f-body);color:var(--ink-2);cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.filters__count{font-size:13px;color:var(--muted);margin-left:auto}
.tool[hidden]{display:none!important}
.empty-note{display:none;padding:18px;text-align:center;color:var(--muted);font-size:14px}
.empty-note.is-on{display:block}

/* --- калькулятор --- */
.calc{background:#fff;border:1px solid #D7DEE7;border-radius:var(--radius);box-shadow:var(--shadow-1);padding:18px;margin-top:16px}
.calc__row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.calc__row:last-of-type{border-bottom:0}
.calc__lbl{flex:1 1 190px;font:600 14px/1.3 var(--f-body)}
.calc__lbl span{display:block;font:400 12.5px/1.3 var(--f-body);color:var(--muted)}
.calc__range{flex:2 1 220px;accent-color:var(--accent)}
.calc__val{flex:0 0 62px;text-align:right;font:800 15px/1 var(--f-mono)}
.calc__out{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.calc__box{border:1px solid var(--line);border-radius:12px;padding:14px}
.calc__box--bad{background:#FFF6F5;border-color:#F6C9C2}
.calc__box--good{background:var(--accent-bg);border-color:var(--accent)}
.calc__box b{display:block;font:800 22px/1.1 var(--f-display)}
.calc__box span{font-size:12.5px;color:var(--ink-2)}
.calc__save{margin-top:14px;font:700 15px/1.4 var(--f-body);color:var(--accent-dk)}
@media(max-width:560px){.calc__out{grid-template-columns:1fr}}

/* --- таблица сравнения --- */
.cmp{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px;background:#fff}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.cmp thead th{background:var(--paper);font:700 13.5px/1.3 var(--f-body)}
.cmp td:first-child{color:var(--muted);font-weight:600;width:34%}
.cmp .win{background:var(--accent-bg);font-weight:700}

/* --- промты с копированием --- */
.prompts{display:grid;gap:12px;margin-top:16px}
.prompt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.prompt__h{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.prompt__h b{font:800 15px/1.2 var(--f-display)}
.prompt__tag{font:600 11.5px/1 var(--f-body);color:var(--accent-dk);background:var(--accent-bg);border-radius:999px;padding:5px 9px}
.prompt__txt{font:500 13.5px/1.5 var(--f-mono);background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:11px;white-space:pre-wrap;color:var(--ink-2)}
.prompt__copy{margin-top:9px}
.prompt__copy.is-done{background:var(--ok,#0E7C66);color:#fff;border-color:transparent}

/* --- оглавление --- */
.toc{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.toc b{display:block;margin-bottom:8px;font:800 14px/1 var(--f-display)}
.toc ol{margin:0;padding-left:18px;font-size:14px}
.toc li{margin:5px 0}

/* --- быстрый ответ в категории --- */
.quick{display:grid;gap:10px;margin-top:14px}
.quick__row{display:flex;gap:12px;align-items:baseline;background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:11px 14px;flex-wrap:wrap}
.quick__if{font:600 14px/1.35 var(--f-body);flex:1 1 260px}
.quick__then{font:800 14px/1.35 var(--f-display);color:var(--accent-dk)}

/* ===== шапка на мобилке: бренд + УТП слева, кнопки справа, бургер под ними ===== */
@media(max-width:899.98px){
  .site-head__in{gap:10px;align-items:flex-start;padding-top:10px;padding-bottom:10px}
  .brand{max-width:52%!important;align-items:flex-start}
  .brand__name{font-size:13px!important;line-height:1.2!important;-webkit-line-clamp:3!important;white-space:normal!important}
  .brand__utp{display:block!important;font:500 10.5px/1.25 var(--f-body)!important;color:var(--muted)}
  .site-head__in .head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin-left:auto;order:2;flex:0 0 auto}
  .site-head__in .head-actions__row{display:flex;align-items:center;gap:6px}
  .site-head__in .head-cta{display:inline-flex!important}
  .site-head__in .btn--sm{padding:7px 10px;font-size:12.5px;border-radius:8px;white-space:nowrap}
  .site-head__in .burger{margin-left:0;width:40px;height:40px}
}
@media(max-width:400px){
  .site-head__in .btn--sm{padding:6px 8px;font-size:11.5px}
  .brand{max-width:46%!important}
}

/* ===== меньше сплошной заливки акцентом ===== */
.answer{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px}
.sec--alt .answer{background:#fff}

/* блок «что ищут» — компактные чипсы вместо простыни списка */
.queries{background:#fff;border:1px solid #D7DEE7;border-radius:12px;padding:16px;margin-top:18px}
.queries__h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:0 0 12px}
.queries__h b{font:800 15px/1.25 var(--f-display)}
.queries__vol{font:700 12.5px/1 var(--f-mono);color:var(--accent-dk);background:var(--accent-bg);border-radius:999px;padding:5px 9px}
.queries__list{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.queries__list li{font:500 13px/1 var(--f-body);color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 11px}
.queries__note{margin:12px 0 0;font-size:12.5px;color:var(--muted)}

/* --- цена задачи в карточке: главное — общий баланс --- */
.tool__cost{padding:0 15px 12px;display:flex;flex-direction:column;gap:2px}
.tool__cost-main{font:800 15px/1.2 var(--f-display);color:var(--accent-dk)}
.tool__cost-sub{font:500 12px/1.3 var(--f-body);color:var(--muted)}

/* --- бренд в шапке не обрезаем --- */
@media(max-width:899.98px){
  .brand{max-width:46%!important}
  .brand__name{font-size:13.5px!important;-webkit-line-clamp:2!important;white-space:normal!important}
}

/* --- страница вопросов: разделы слева, аккордеон справа --- */
.faq-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:18px}
.faq-top a{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid #D7DEE7;border-radius:12px;padding:14px 16px;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.05);min-width:0}
.faq-top a:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 4px 12px rgba(14,124,102,.14)}
.faq-top a b,.faq-top a span{min-width:0;overflow-wrap:anywhere}
.faq-top a b{display:block;font:800 14.5px/1.2 var(--f-display)}
.faq-top a span{font-size:12.5px;color:var(--muted)}
.faq-top a.is-cta{background:var(--accent);border-color:var(--accent-dk);color:#fff;box-shadow:0 6px 16px rgba(14,124,102,.28)}
.faq-top a.is-cta span{color:rgba(255,255,255,.85)}
.faq-layout{display:grid;grid-template-columns:250px 1fr;gap:18px;margin-top:18px;align-items:start}
.faq-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px}
.faq-side p{margin:0 0 6px;padding:6px 10px;font:700 11.5px/1 var(--f-body);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.faq-side button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:10px 12px;font:600 14px/1.25 var(--f-body);color:var(--ink-2);cursor:pointer}
.faq-side button:hover{background:var(--paper)}
.faq-side button.is-on{background:var(--accent-bg);color:var(--accent-dk);box-shadow:inset 3px 0 0 var(--accent)}
.faq-list .faq__item[hidden]{display:none}
@media(max-width:860px){.faq-top{grid-template-columns:1fr}.faq-layout{grid-template-columns:1fr}
  .faq-side{display:flex;gap:6px;overflow-x:auto;padding:8px}
  .faq-side p{display:none}.faq-side button{white-space:nowrap;width:auto}}

/* --- цены: подписка против общего доступа --- */
.pricecmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.pricecmp__col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.pricecmp__col--good{border-color:var(--accent);background:var(--accent-bg)}
.pricecmp__lbl{display:block;font:700 11.5px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pricecmp__col b{display:block;font:800 20px/1.2 var(--f-display);margin-bottom:6px}
.pricecmp__col--good b{color:var(--accent-dk)}
@media(max-width:600px){.pricecmp{grid-template-columns:1fr}}

/* --- карточка сервиса: название и подпись в столбик, а не слитно --- */
.tool__head{display:flex!important;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.tool__name{display:block;overflow-wrap:anywhere}
.tool__vendor{display:block;line-height:1.25}
.tool__top{align-items:flex-start}
.tool__rate{flex:0 0 auto;padding-left:8px}

/* ===== лонгриды блога ===== */
.article{max-width:760px;margin:0 auto}
.article h2{margin:38px 0 14px;font:800 27px/1.25 var(--f-display);letter-spacing:-.02em}
.article h3{margin:26px 0 10px;font:800 19px/1.3 var(--f-display)}
.article p{margin:0 0 15px;font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.article ul,.article ol{margin:0 0 18px;padding-left:22px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.article li{margin:7px 0}
.article strong,.article b{color:var(--ink)}
.article .lead{font-size:18px;line-height:1.6;color:var(--ink)}
.fig{margin:26px 0;padding:18px;background:#fff;border:1px solid #D7DEE7;border-radius:14px;overflow-x:auto}
.fig__svg{width:100%;height:auto;min-width:520px;display:block;font-family:var(--f-body)}
.fig__cap{margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.callout{margin:24px 0;padding:16px 18px;background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:10px;font-size:15.5px;line-height:1.6}
.callout b{color:var(--accent-dk)}
.post-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:6px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}
.post-card{display:block;background:#fff;border:1px solid #D7DEE7;border-radius:14px;padding:18px;color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.post-card:hover{border-color:var(--accent);text-decoration:none;box-shadow:0 6px 18px rgba(14,124,102,.12)}
.post-card b{display:block;font:800 17px/1.28 var(--f-display);margin-bottom:7px}
.post-card span{display:block;font-size:13.5px;line-height:1.5;color:var(--muted)}
.post-card em{display:block;margin-top:10px;font-size:12px;color:var(--accent-dk);font-style:normal;font-weight:700}
@media(max-width:640px){.article h2{font-size:23px}.fig{padding:12px}}

/* --- «с этой задачей часто ищут ещё» — навигация вместо простыни запросов --- */
.nextsteps{margin-top:22px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.nextsteps__h{margin:0 0 10px;font:700 13px/1 var(--f-body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.nextsteps__row{display:flex;flex-wrap:wrap;gap:8px}
.nextsteps .chip{text-decoration:none;background:#fff}
.nextsteps .chip:hover{border-color:var(--accent);color:var(--accent-dk);text-decoration:none}

/* --- контекстный конверсионный блок --- */
.cta2{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:center;margin:26px 0;padding:22px;
  background:linear-gradient(135deg,#fff,var(--accent-bg));border:1px solid var(--accent);border-radius:16px;
  box-shadow:0 8px 26px rgba(14,124,102,.10)}
.cta2__task{margin:0 0 4px;font:800 20px/1.25 var(--f-display);color:var(--ink)}
.cta2__price{margin:0 0 8px;font:800 26px/1.1 var(--f-display);color:var(--accent-dk)}
.cta2__sub{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.cta2__list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.cta2__list li{position:relative;padding-left:24px;font-size:14px;color:var(--ink-2)}
.cta2__list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--accent);opacity:.18}
.cta2__list li::after{content:"";position:absolute;left:4px;top:10px;width:6px;height:3px;border-left:2px solid var(--accent-dk);
  border-bottom:2px solid var(--accent-dk);transform:rotate(-45deg)}
.cta2__act{text-align:center}
.cta2__act .btn{width:100%;justify-content:center}
@media(max-width:760px){.cta2{grid-template-columns:1fr;padding:18px}.cta2__price{font-size:23px}}