/* =============================================================
   cn.css — оболочка публичного сайта CHATONAUT: шапка, подвал,
   переключатель языков, кнопки.

   Тело страниц красит pchk.css (та же дизайн-система, что у ЭТОЧАТБОТ):
   она берёт акцент из --color-brand-700 и потому перекрашивается сама.
   Здесь только то, чего в pchk нет, — навигация издания.

   Канон, общий с pchk: НИКАКИХ градиентов; ховер не двигает элемент
   (прыгающая под курсором кнопка читается как сбой, а не как отклик).
   ============================================================= */

:root{
  --cn-ink:#22242B;
  --cn-ink-2:#5F6062;
  --cn-ink-3:#96969A;
  --cn-paper:#F4F3EF;
  --cn-line:#DAD8D1;
  --cn-line-soft:#E9E7E1;
  --cn-brand:var(--color-brand-700,#3A45D6);
  --cn-brand-hover:var(--color-brand-800,#2D37AE);
  --cn-brand-50:var(--color-brand-50,#EEF0FD);
}

/* ─── Кнопка ─────────────────────────────────────────────── */
.cn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;background:var(--cn-brand);color:#fff;
  font-size:15px;font-weight:600;line-height:1;
  padding:13px 22px;border:0;cursor:pointer;
  transition:background .15s ease;
}
.cn-btn:hover{background:var(--cn-brand-hover);}
.cn-btn--sm{padding:9px 16px;font-size:14px;border-radius:10px;}
.cn-btn--ghost{background:transparent;color:var(--cn-ink);border:1px solid var(--cn-line);}
.cn-btn--ghost:hover{background:#fff;border-color:var(--cn-ink-3);}

/* ─── Шапка ──────────────────────────────────────────────── */
.cn-hdr{position:sticky;top:0;z-index:60;background:var(--cn-paper);border-bottom:1px solid var(--cn-line);}
.cn-hdr__in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;
}
.cn-hdr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}
.cn-hdr__brand img{width:32px;height:32px;display:block;}
.cn-hdr__brand span{font-size:16.5px;font-weight:700;letter-spacing:.08em;color:var(--cn-ink);}

.cn-hdr__nav{display:none;align-items:center;gap:22px;}
.cn-hdr__lnk{
  font-size:14.5px;font-weight:500;color:var(--cn-ink-2);text-decoration:none;
  transition:color .15s ease;white-space:nowrap;
}
.cn-hdr__lnk:hover,.cn-hdr__lnk.is-on{color:var(--cn-ink);}
.cn-hdr__side{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.cn-hdr__signin{display:none;}

/* Выпадающее «Channels» */
.cn-menu{position:relative;}
.cn-menu__btn{
  display:inline-flex;align-items:center;gap:5px;background:0;border:0;cursor:pointer;padding:0;
  font-size:14.5px;font-weight:500;color:var(--cn-ink-2);font-family:inherit;
  transition:color .15s ease;
}
.cn-menu__btn:hover,.cn-menu[data-open] .cn-menu__btn{color:var(--cn-ink);}
.cn-menu__btn svg{transition:transform .15s ease;}
.cn-menu[data-open] .cn-menu__btn svg{transform:rotate(180deg);}
.cn-menu__panel{
  position:absolute;top:calc(100% + 14px);left:-16px;width:330px;
  background:#fff;border:1px solid var(--cn-line);border-radius:16px;padding:8px;
  box-shadow:0 18px 40px -22px rgba(21,22,27,.35);
}
.cn-menu__panel a{
  display:block;padding:11px 12px;border-radius:11px;text-decoration:none;
  transition:background .12s ease;
}
.cn-menu__panel a:hover{background:var(--cn-paper);}
.cn-menu__t{display:block;font-size:14.5px;font-weight:600;color:var(--cn-ink);}
.cn-menu__d{display:block;margin-top:2px;font-size:13px;color:var(--cn-ink-3);line-height:1.35;}

/* Бургер (мобильный) */
.cn-hdr__burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:0 9px;border:1px solid var(--cn-line);border-radius:10px;
  background:#fff;cursor:pointer;
}
.cn-hdr__burger span{display:block;height:1.5px;background:var(--cn-ink);border-radius:2px;}
.cn-hdr__mob{
  border-top:1px solid var(--cn-line);background:var(--cn-paper);
  padding:8px 20px 16px;display:flex;flex-direction:column;
}
.cn-hdr__mob a{
  padding:11px 0;font-size:15.5px;font-weight:500;color:var(--cn-ink);text-decoration:none;
  border-bottom:1px solid var(--cn-line-soft);
}
.cn-hdr__mob a:last-child{border-bottom:0;}

/* ─── Подвал ─────────────────────────────────────────────── */
.cn-ftr{margin-top:clamp(56px,7vw,104px);border-top:1px solid var(--cn-line);background:var(--cn-paper);}
.cn-ftr__in{
  max-width:1200px;margin:0 auto;padding:clamp(36px,4vw,56px) 20px clamp(28px,3vw,40px);
  display:grid;gap:36px;
}
.cn-ftr__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;}
.cn-ftr__logo img{width:26px;height:26px;display:block;}
.cn-ftr__logo span{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--cn-ink);}
.cn-ftr__tag{margin:12px 0 16px;font-size:14px;line-height:1.5;color:var(--cn-ink-2);max-width:34ch;}
.cn-ftr__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
.cn-ftr__cols h3{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cn-ink-3);}
.cn-ftr__cols a{display:block;padding:5px 0;font-size:14px;color:var(--cn-ink-2);text-decoration:none;transition:color .15s ease;}
.cn-ftr__cols a:hover{color:var(--cn-ink);}
.cn-ftr__bot{
  border-top:1px solid var(--cn-line);
  max-width:1200px;margin:0 auto;padding:16px 20px 28px;
  display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--cn-ink-3);
}
.cn-ftr__note{max-width:60ch;}

/* ─── Раскладка пошире ───────────────────────────────────── */
@media (min-width:900px){
  .cn-hdr__nav{display:flex;}
  .cn-hdr__signin{display:inline;}
  .cn-hdr__burger{display:none;}
  .cn-hdr__mob{display:none !important;}
  .cn-ftr__in{grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:56px;}
  .cn-ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr));}
  .cn-ftr__bot{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;}
}

/* ─── Значок внутри .pk-btn ──────────────────────────────────
   ЗАЧЕМ ЗДЕСЬ, А НЕ В pchk.css. Файл pchk.css общий с ЭТОЧАТБОТ, и правка в
   нём доехала бы до чужого издания. cn.css грузит только layout
   chatonaut_site — дальше издания она не уйдёт.

   ЧТО ЧИНИТ. Стрелку и знаки в кнопках печатают ОБЩИЕ помощники контентного
   слоя (cnb_arrow, реестр cnb_icon). Размер атрибутами они намеренно не
   задают: один и тот же знак стоит на странице в нескольких кеглях, и решать
   обязан CSS. Для .pk-link, .pk-eyebrow, .pk-faq-ic и .pk-card-ic правило у
   страниц есть, а для .pk-btn его не было нигде во всём издании — и <svg>
   оставался заменяемым элементом с дефолтом 300×150. Замерено в браузере:
   стрелка «Start for free» в финальном CTA — 97px на /, 158px на /pricing,
   97px на /about и 259px на /ai-agents (на /contacts своё правило на 16px,
   поэтому там было верно). Значение 16px взято оттуда же, чтобы кнопки
   издания не разъезжались.

   :not([width]) — страховка: правило не имеет права трогать знак, которому
   размер УЖЕ задан разметкой (у автора были причины). */
.pk-btn svg:not([width]){width:16px;height:16px;flex:none;}