/* ============================================================
   Блог tokego — швейцарский стиль, зеркалит кабинет:
   фон #F4F4F1, белые панели, острые углы (radius 0), без теней,
   Manrope + Spline Sans Mono, акцент #2563EB.
   Один файл на индекс блога и все статьи.
   ============================================================ */

:root{
  --bl-bg:#F4F4F1;
  --bl-surface:#FFFFFF;
  --bl-border:#E4E4DE;
  --bl-border-2:#DDDDD5;
  --bl-text:#111111;
  --bl-text-soft:#33332E;
  --bl-text-mid:#76766E;
  --bl-text-dim:#A6A69E;
  --bl-primary:#2563EB;
  --bl-primary-d:#1B4F9C;
  --bl-tint:#EEF3FD;
  --bl-ok:#15803D;
  --bl-ok-bg:#EAF3EC;
  --bl-ok-br:#BFE3CC;
  --bl-max:1240px;
  --bl-ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bl-bg);
  color:var(--bl-text);
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.mono{font-family:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,monospace}

img{max-width:100%;height:auto}

/* ---------- Шапка ---------- */
.bl-head{
  position:sticky;top:0;z-index:50;
  background:var(--bl-bg);
  border-bottom:1px solid var(--bl-border);
}
.bl-head-in{
  max-width:var(--bl-max);margin:0 auto;
  height:64px;padding:0 clamp(16px,3vw,40px);
  display:flex;align-items:center;gap:20px;
}
.bl-logo{display:flex;flex-direction:column;text-decoration:none;flex:none;line-height:1.1}
.bl-logo b{font-size:16px;font-weight:800;color:var(--bl-text);letter-spacing:-.01em}
.bl-logo span{
  font-size:9.5px;font-weight:700;color:var(--bl-text-dim);
  text-transform:uppercase;letter-spacing:.16em;margin-top:2px;
}
.bl-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.bl-nav a{
  font-size:14px;font-weight:600;color:var(--bl-text-mid);
  text-decoration:none;transition:color .15s;
}
.bl-nav a:hover{color:var(--bl-text)}
.bl-nav a.on{color:var(--bl-text);font-weight:800}
.bl-head-cta{
  display:inline-flex;align-items:center;
  background:var(--bl-primary);color:#fff;border:1px solid var(--bl-primary);
  padding:10px 18px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:background .15s;flex:none;
}
.bl-head-cta:hover{background:var(--bl-primary-d)}

/* ---------- Общая обёртка ---------- */
.bl-wrap{
  flex:1;width:100%;max-width:var(--bl-max);
  margin:0 auto;padding:0 clamp(16px,3vw,40px);
}

/* ---------- Кикеры / служебная типографика ---------- */
.bl-kicker{
  font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bl-text-dim);
}
.bl-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:22px 0 0;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bl-text-dim);
}
.bl-crumbs a{color:var(--bl-text-mid);text-decoration:none}
.bl-crumbs a:hover{color:var(--bl-primary)}
.bl-crumbs i{font-style:normal;color:var(--bl-border-2)}

/* ---------- Hero индекса ---------- */
.bl-hero{padding:52px 0 44px;border-bottom:1px solid var(--bl-border)}
.bl-hero h1{
  font-size:clamp(34px,5.4vw,58px);font-weight:800;
  letter-spacing:-.035em;line-height:1.03;color:var(--bl-text);
  margin:14px 0 0;max-width:16ch;
}
.bl-hero .bl-lead{
  font-size:clamp(16px,1.6vw,19px);line-height:1.6;
  color:var(--bl-text-mid);max-width:58ch;margin:20px 0 0;
}
.bl-hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Полоса-статистика под hero */
.bl-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--bl-surface);border:1px solid var(--bl-border);
  margin:40px 0 0;
}
.bl-stat{padding:22px 24px;border-left:1px solid var(--bl-border)}
.bl-stat:first-child{border-left:none}
.bl-stat .l{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bl-text-dim);
}
.bl-stat .v{
  font-family:'Spline Sans Mono',monospace;
  font-size:30px;font-weight:700;color:var(--bl-text);
  letter-spacing:-.02em;margin-top:8px;line-height:1;
}
.bl-stat .s{font-size:12.5px;color:var(--bl-text-mid);margin-top:8px;line-height:1.45}

/* ---------- Кнопки ---------- */
.bl-btn,.bl-btn-l,.bl-btn-g{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border-radius:0;
  font-family:inherit;transition:background .15s,color .15s,border-color .15s;
}
.bl-btn{background:var(--bl-primary);color:#fff;border:1px solid var(--bl-primary)}
.bl-btn:hover{background:var(--bl-primary-d);border-color:var(--bl-primary-d)}
.bl-btn-l{background:none;color:var(--bl-primary);border:1px solid var(--bl-primary)}
.bl-btn-l:hover{background:var(--bl-primary);color:#fff}
.bl-btn-g{background:var(--bl-surface);color:var(--bl-text-mid);border:1px solid var(--bl-border)}
.bl-btn-g:hover{border-color:var(--bl-primary);color:var(--bl-primary)}

/* ---------- Рубрикатор ---------- */
.bl-rubs{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--bl-border);background:var(--bl-surface);
  margin:36px 0 0;
}
.bl-rub{
  font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--bl-text-mid);background:none;border:none;
  border-left:1px solid var(--bl-border);
  padding:14px 18px;cursor:pointer;transition:background .15s,color .15s;
}
.bl-rub:first-child{border-left:none}
.bl-rub:hover{color:var(--bl-text)}
.bl-rub.on{background:var(--bl-primary);color:#fff}
.bl-rub .n{
  font-family:'Spline Sans Mono',monospace;
  font-size:10.5px;opacity:.65;margin-left:7px;font-weight:600;
}

/* ---------- Секции индекса ---------- */
.bl-sec{padding:48px 0 0}
.bl-sec-hd{
  display:flex;align-items:baseline;gap:14px;
  padding-bottom:16px;border-bottom:2px solid var(--bl-text);
  margin-bottom:0;flex-wrap:wrap;
}
.bl-sec-hd h2{
  font-size:clamp(20px,2.4vw,27px);font-weight:800;
  letter-spacing:-.02em;color:var(--bl-text);
}
.bl-sec-hd .bl-kicker{margin-left:auto}

/* Сетка карточек — швейцарская: без зазоров, разделена бордерами */
.bl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--bl-border);gap:1px;
  border:1px solid var(--bl-border);border-top:none;
}
.bl-card{
  background:var(--bl-surface);
  padding:26px 24px 22px;
  display:flex;flex-direction:column;
  text-decoration:none;min-height:186px;
  transition:background .18s var(--bl-ease);
  position:relative;
}
.bl-card:hover{background:#FAFAF8}
.bl-card .bl-kicker{color:var(--bl-primary)}
.bl-card h3{
  font-size:17.5px;font-weight:800;line-height:1.28;
  letter-spacing:-.015em;color:var(--bl-text);margin:12px 0 0;
}
.bl-card p{
  font-size:13.5px;line-height:1.55;color:var(--bl-text-mid);
  margin:10px 0 0;
}
.bl-card .go{
  margin-top:auto;padding-top:18px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bl-primary);
  display:flex;align-items:center;gap:7px;
}
.bl-card .go em{
  font-style:normal;transition:transform .18s var(--bl-ease);
  display:inline-block;
}
.bl-card:hover .go em{transform:translateX(4px)}

/* Крупная карточка-промо внутри сетки */
.bl-card.feat{background:var(--bl-text);grid-column:span 2}
.bl-card.feat h3{color:#fff;font-size:23px}
.bl-card.feat p{color:rgba(255,255,255,.66)}
.bl-card.feat .bl-kicker{color:#7BA4F5}
.bl-card.feat .go{color:#fff}
.bl-card.feat:hover{background:#1c1c1a}

/* ---------- Статья ---------- */
.bl-art-head{padding:26px 0 34px;border-bottom:1px solid var(--bl-border)}
.bl-art-head h1{
  font-size:clamp(30px,4.4vw,46px);font-weight:800;
  letter-spacing:-.032em;line-height:1.08;color:var(--bl-text);
  margin:14px 0 0;max-width:20ch;
}
.bl-art-head .lead{
  font-size:clamp(16px,1.5vw,18.5px);line-height:1.62;
  color:var(--bl-text-mid);max-width:62ch;margin:20px 0 0;
}

.bl-cols{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:56px;padding:44px 0 72px}
.bl-art{min-width:0;max-width:none}

.bl-art h2{
  font-size:clamp(22px,2.3vw,28px);font-weight:800;
  letter-spacing:-.025em;line-height:1.2;color:var(--bl-text);
  margin:46px 0 18px;padding-top:22px;border-top:1px solid var(--bl-border);
}
.bl-art h2:first-child{margin-top:0;padding-top:0;border-top:none}
.bl-art h3{
  font-size:18px;font-weight:800;letter-spacing:-.015em;
  color:var(--bl-text);margin:30px 0 12px;
}
.bl-art p{
  font-size:17px;line-height:1.72;color:var(--bl-text-soft);margin:0 0 18px;
}
.bl-art .lead{
  font-size:19px;line-height:1.65;color:var(--bl-text-mid);margin:0 0 26px;
}
.bl-art a{color:var(--bl-primary);text-decoration:none;border-bottom:1px solid rgba(37,99,235,.32)}
.bl-art a:hover{border-bottom-color:var(--bl-primary)}
.bl-art strong,.bl-art b{font-weight:800;color:var(--bl-text)}

.bl-art ul,.bl-art ol{margin:0 0 22px;padding:0;list-style:none}
.bl-art ol{counter-reset:bl-ol}
.bl-art li{
  font-size:16.5px;line-height:1.65;color:var(--bl-text-soft);
  padding:11px 0 11px 30px;border-bottom:1px solid var(--bl-border);
  position:relative;
}
.bl-art li:first-child{border-top:1px solid var(--bl-border)}
.bl-art ul li::before{
  content:'';position:absolute;left:6px;top:20px;
  width:9px;height:1.5px;background:var(--bl-primary);
}
.bl-art ol li{counter-increment:bl-ol;padding-left:38px}
.bl-art ol li::before{
  content:counter(bl-ol);position:absolute;left:0;top:11px;
  font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:700;
  color:var(--bl-primary);letter-spacing:.02em;
}

/* Врезка */
.bl-art .note{
  background:var(--bl-surface);border:1px solid var(--bl-border);
  border-left:3px solid var(--bl-primary);
  padding:20px 24px;margin:0 0 24px;
  font-size:15.5px;line-height:1.62;color:var(--bl-text-soft);
}
.bl-art .note b{color:var(--bl-text)}

/* Чипы ниш */
.bl-art .niches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.bl-art .niches a{
  display:inline-flex;align-items:center;
  background:var(--bl-surface);border:1px solid var(--bl-border);
  padding:9px 15px;font-size:13.5px;font-weight:600;
  color:var(--bl-text);text-decoration:none;transition:border-color .15s,color .15s;
}
.bl-art .niches a:hover{border-color:var(--bl-primary);color:var(--bl-primary)}

/* Таблица-сравнение. Обёртка .bl-tw даёт горизонтальный скролл самой таблице,
   чтобы страница целиком не ехала вбок на узких экранах. */
.bl-tw{margin:0 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bl-tw .cmp{margin:0}
.bl-art .cmp{width:100%;border-collapse:collapse;margin:0 0 26px;background:var(--bl-surface);border:1px solid var(--bl-border)}
.bl-art .cmp th{
  text-align:left;padding:13px 16px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bl-text-dim);
  border-bottom:1px solid var(--bl-border);background:var(--bl-bg);
}
.bl-art .cmp td{
  padding:14px 16px;font-size:15px;line-height:1.5;
  color:var(--bl-text-soft);border-bottom:1px solid var(--bl-border);
  vertical-align:top;
}
.bl-art .cmp tr:last-child td{border-bottom:none}
.bl-art .cmp td:first-child{font-weight:700;color:var(--bl-text)}
.bl-art .cmp .num{font-family:'Spline Sans Mono',monospace;font-weight:700;white-space:nowrap}

/* Шаги */
.bl-steps{border:1px solid var(--bl-border);background:var(--bl-surface);margin:0 0 26px}
.bl-step{display:flex;gap:18px;padding:20px 22px;border-bottom:1px solid var(--bl-border)}
.bl-step:last-child{border-bottom:none}
.bl-step .n{
  font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:700;
  color:var(--bl-primary);flex:none;width:22px;padding-top:3px;
}
.bl-step .t{font-size:16px;font-weight:800;color:var(--bl-text);margin-bottom:5px}
.bl-step .d{font-size:14.5px;line-height:1.55;color:var(--bl-text-mid)}

/* FAQ */
.bl-art .faq-item{
  border-bottom:1px solid var(--bl-border);padding:20px 0;margin:0;
}
.bl-art .faq-item:first-of-type{border-top:1px solid var(--bl-border)}
.bl-art .faq-item h3{
  font-size:16.5px;font-weight:800;color:var(--bl-text);margin:0 0 9px;
}
.bl-art .faq-item p{font-size:15.5px;line-height:1.62;color:var(--bl-text-mid);margin:0}

/* CTA внутри текста */
.bl-inline-cta{
  background:var(--bl-text);color:#fff;padding:30px 32px;margin:34px 0;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.bl-inline-cta .tx{flex:1;min-width:230px}
.bl-inline-cta .tt{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.bl-inline-cta .ds{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66);margin-top:8px}
.bl-inline-cta .bl-btn{background:#fff;color:var(--bl-text);border-color:#fff}
.bl-inline-cta .bl-btn:hover{background:var(--bl-primary);color:#fff;border-color:var(--bl-primary)}

/* Старый класс .cta из прежней вёрстки — оставлен, чтобы не ломать 72 статьи */
.bl-art .cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bl-primary);color:#fff;border:1px solid var(--bl-primary);
  padding:15px 30px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  margin:8px 0 26px;transition:background .15s;
}
.bl-art .cta:hover{background:var(--bl-primary-d);border-bottom-color:var(--bl-primary-d)}
.bl-art .back{display:none}
.bl-art .more{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--bl-border);
  font-size:13.5px;color:var(--bl-text-mid);
}
.bl-art .more a{margin-right:14px;display:inline-block}

/* ---------- Сайдбар статьи ---------- */
.bl-side{min-width:0}
.bl-side-in{position:sticky;top:88px;display:flex;flex-direction:column;gap:1px}
.bl-side-card{background:var(--bl-surface);border:1px solid var(--bl-border);padding:24px}
.bl-side-card+.bl-side-card{border-top:none}
.bl-side-card .tt{
  font-size:19px;font-weight:800;letter-spacing:-.02em;
  line-height:1.25;color:var(--bl-text);margin:12px 0 0;
}
.bl-side-card .ds{font-size:14px;line-height:1.55;color:var(--bl-text-mid);margin:10px 0 0}
.bl-side-list{list-style:none;margin:18px 0 0;padding:0}
.bl-side-list li{
  font-size:14px;line-height:1.5;color:var(--bl-text-soft);
  padding:9px 0 9px 22px;position:relative;border-top:1px solid var(--bl-border);
}
.bl-side-list li::before{
  content:'✓';position:absolute;left:0;top:9px;
  color:var(--bl-primary);font-size:12px;font-weight:800;
}
.bl-side-card .bl-btn{width:100%;margin-top:20px}
.bl-side-card .fine{
  font-size:12px;line-height:1.5;color:var(--bl-text-dim);
  margin-top:12px;text-align:center;
}
.bl-side-links{display:flex;flex-direction:column}
.bl-side-links a{
  font-size:14.5px;font-weight:600;line-height:1.4;color:var(--bl-text);
  text-decoration:none;padding:12px 0;border-top:1px solid var(--bl-border);
  transition:color .15s;
}
.bl-side-links a:first-of-type{border-top:none}
.bl-side-links a:hover{color:var(--bl-primary)}

/* ---------- Финальный CTA-блок ---------- */
.bl-cta{
  background:var(--bl-primary);color:#fff;
  padding:clamp(38px,5vw,62px) clamp(24px,4vw,58px);
  margin:0 0 72px;
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
}
.bl-cta .tx{flex:1;min-width:270px}
.bl-cta .bl-kicker{color:rgba(255,255,255,.66)}
.bl-cta h2{
  font-size:clamp(24px,3.2vw,38px);font-weight:800;
  letter-spacing:-.03em;line-height:1.12;margin:12px 0 0;
}
.bl-cta p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.78);margin:14px 0 0;max-width:52ch}
.bl-cta .act{display:flex;flex-direction:column;gap:10px;flex:none}
.bl-cta .bl-btn{background:#fff;color:var(--bl-primary);border-color:#fff;padding:16px 34px}
.bl-cta .bl-btn:hover{background:var(--bl-text);color:#fff;border-color:var(--bl-text)}
.bl-cta .bl-btn-l{color:#fff;border-color:rgba(255,255,255,.45)}
.bl-cta .bl-btn-l:hover{background:#fff;color:var(--bl-primary);border-color:#fff}

/* ---------- Читайте также ---------- */
.bl-next{padding:0 0 64px}
.bl-next .bl-sec-hd{border-bottom-width:2px}

/* ---------- Футер ---------- */
.bl-foot{
  border-top:1px solid var(--bl-border);background:var(--bl-bg);margin-top:auto;
}
.bl-foot-in{
  max-width:var(--bl-max);margin:0 auto;
  padding:34px clamp(16px,3vw,40px);
  display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;
}
.bl-foot a{font-size:13.5px;color:var(--bl-text-mid);text-decoration:none}
.bl-foot a:hover{color:var(--bl-primary)}
.bl-foot .cp{font-size:13px;color:var(--bl-text-dim);margin-left:auto}

/* ---------- Адаптив ---------- */
@media(max-width:1080px){
  .bl-cols{grid-template-columns:1fr;gap:0}
  .bl-side{margin-top:44px}
  .bl-side-in{position:static}
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .bl-card.feat{grid-column:span 2}
}
@media(max-width:860px){
  .bl-nav{display:none}
  .bl-stats{grid-template-columns:repeat(2,1fr)}
  .bl-stat:nth-child(odd){border-left:none}
  .bl-stat:nth-child(n+3){border-top:1px solid var(--bl-border)}
  .bl-hero{padding:36px 0 32px}
  .bl-cta{gap:26px}
  .bl-cta .act{width:100%}
  .bl-cta .bl-btn,.bl-cta .bl-btn-l{width:100%}
}
@media(max-width:620px){
  .bl-grid{grid-template-columns:1fr}
  .bl-card.feat{grid-column:span 1}
  .bl-card{min-height:0;padding:22px 20px 20px}
  .bl-head-in{height:58px;gap:12px}
  .bl-head-cta{padding:9px 14px;font-size:10.5px}
  .bl-art p{font-size:16px}
  .bl-art li{font-size:15.5px}
  .bl-inline-cta{padding:24px 22px;gap:18px}
  .bl-rubs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bl-rubs::-webkit-scrollbar{display:none}
  .bl-rub{white-space:nowrap;padding:13px 15px;font-size:11.5px}
  .bl-cols{padding:30px 0 52px}
  .bl-art-head{padding:20px 0 26px}
  .bl-hero-act{flex-direction:column;gap:10px}
  .bl-hero-act .bl-btn,.bl-hero-act .bl-btn-l,.bl-hero-act .bl-btn-g{width:100%}
  .bl-foot .cp{margin-left:0;width:100%}
  /* На узком экране таблица не сжимается в кашу, а скроллится внутри .bl-tw */
  .bl-tw .cmp{min-width:540px}
  .bl-art .cmp td,.bl-art .cmp th{padding:11px 13px}
  .bl-art .cmp td{font-size:14px}
}