/* ---------- шрифти: свої, не з Google ----------
   Було: <link> на fonts.googleapis.com із display=swap. Текст спершу малювався
   запасним шрифтом, потім стрибав на потрібний — це була ЄДИНА провалена
   перевірка Lighthouse на мобільному (зсув макета, заміряно 03.09.2026).

   Тепер файли лежать у нас: мінус два зовнішні з'єднання, мінус залежність
   від чужого сервісу, і size-adjust підганяє запасний шрифт під метрики
   основного, тож підміна більше не рухає текст.

   Взяли лише те, що справді використовується: Unbounded 700 (заголовки й
   мітки) і Golos Text 400/500/600 (текст). Набори — кирилиця й латиниця;
   latin-ext важив 115 КБ на накреслення і для української не потрібен.
   Разом 256 КБ замість 876. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Unbounded-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Unbounded-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/GolosText-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/GolosText-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/GolosText-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/GolosText-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/GolosText-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/GolosText-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Golos Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 102%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial Bold'), local('Arial'), local('Liberation Sans');
  size-adjust: 112%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}


:root {
  --bg: #0E2129;
  --panel: #16303A;
  --panel-2: #1B3A46;
  --ink: #F2EFE8;
  --dim: #9DB4BC;
  --aqua: #6FA8B5;
  --amber: #F2A33C;
  --red: #E0533D;
  --maxw: 860px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  background-image: radial-gradient(1100px 700px at 88% -10%, rgba(111,168,181,.10), transparent 60%);
  color: var(--ink);
  font-family: 'Golos Text', 'Golos Fallback', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aqua); text-decoration: none; }
a:hover { color: var(--amber); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- шапка ---------- */
header.site {
  border-bottom: 1px solid rgba(111,168,181,.2);
  position: sticky; top: 0; z-index: 10;
  /* Фон СУЦІЛЬНИЙ, не напівпрозорий. Було rgba(...,.92) + blur: текст, що
     проїжджав під липкою шапкою, просвічував крізь неї, і читачі скаржились,
     що «меню накладається на текст» (03.09.2026). Розмиття лишаємо як
     запасний варіант для браузерів, де воно є, але воно вже не потрібне. */
  background: var(--bg);
}
/* Якір під липкою шапкою: без цього перехід за посиланням-якорем ставить
   заголовок рівно під шапку, і читач бачить середину абзацу. */
html { scroll-padding-top: 96px; }
@media (max-width: 640px) { html { scroll-padding-top: 68px; } }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px; gap: 16px;
}
.brand {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.brand span { color: var(--aqua); }
nav.site a { margin-left: 20px; font-size: 16px; color: var(--dim); }
nav.site a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: 70px 0 44px; }
.hero h1 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 46px;
  line-height: 1.14; letter-spacing: -.01em;
}
.hero p.lead { color: var(--dim); font-size: 20px; margin-top: 18px; max-width: 640px; }
.cta {
  display: inline-block; margin-top: 26px; padding: 13px 26px;
  background: var(--aqua); color: var(--bg); border-radius: 10px;
  font-weight: 600; font-size: 17px;
}
.cta:hover { background: var(--amber); color: var(--bg); }

/* ---------- список постів ---------- */
.section-title {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--aqua);
  margin: 46px 0 20px;
}
.card {
  display: block; background: var(--panel); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 14px;
  border: 1px solid transparent; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: rgba(111,168,181,.35); transform: translateY(-1px); }
.card .meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
              font-size: 14px; color: var(--dim); margin-bottom: 9px; }
.tag {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
  background: var(--aqua); color: var(--bg);
}
.tag.practice { background: var(--amber); }
.tag.vendor { background: var(--panel-2); color: var(--aqua); border: 1px solid var(--aqua); }
.card h3 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 22px;
  line-height: 1.26; color: var(--ink);
}
.card p { color: var(--dim); font-size: 16px; margin-top: 8px; }

/* ---------- сторінка поста ---------- */
article.post { padding: 44px 0 20px; }
article.post h1 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 36px; line-height: 1.2;
}
article.post .meta { color: var(--dim); font-size: 15px; margin: 14px 0 26px;
                     display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
article.post .body { font-size: 18px; }
article.post .body p { margin-bottom: 17px; }
article.post .body b { color: var(--ink); }
article.post img.scheme {
  width: 100%; border-radius: 14px; margin: 8px 0 26px;
  border: 1px solid rgba(111,168,181,.2);
}
article.post code {
  display: block; background: var(--panel); border-left: 3px solid var(--amber);
  padding: 16px 18px; border-radius: 8px; margin: 16px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; color: var(--ink);
}
.source-line { color: var(--dim); font-size: 15px; margin-top: 22px;
               padding-top: 18px; border-top: 1px solid rgba(111,168,181,.2); }

.backlink { display: inline-block; margin: 30px 0 0; color: var(--dim); font-size: 16px; }

/* ---------- підвал ---------- */
footer.site {
  margin-top: 70px; padding: 34px 0 46px;
  border-top: 1px solid rgba(111,168,181,.2); color: var(--dim); font-size: 15px;
}
footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- адаптив ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding: 44px 0 30px; }
  .hero h1 { font-size: 32px; }
  .hero p.lead { font-size: 18px; }
  article.post h1 { font-size: 27px; }
  .card h3 { font-size: 19px; }
  /* Меню в ОДИН рядок із горизонтальною прокруткою.
     Було: сім посилань переносились на три рядки, шапка виростала до 115 px —
     14% екрана телефона, і це на кожній сторінці, бо шапка липка.
     Було: висота посилання 18 px при мінімумі 44 px для пальця — влучити
     важко, легко натиснути сусіднє. Обидві скарги від читачів, 03.09.2026. */
  header.site .wrap { padding-top: 6px; padding-bottom: 6px; gap: 12px; }
  .brand { font-size: 16px; white-space: nowrap; flex: 0 0 auto; }
  nav.site {
    display: flex; align-items: center;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* натяк, що рядок прокручується: праворуч текст плавно згасає */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  nav.site::-webkit-scrollbar { display: none; }
  nav.site a {
    margin-left: 0; margin-right: 20px; font-size: 15px;
    white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  nav.site a:last-child { margin-right: 8px; }

  /* Дрібні посилання поза меню — джерело під статтею й підвал. 18 px заввишки
     теж важко влучити пальцем, хоч вони й не такі критичні, як навігація. */
  article.post .src a, footer.site a { display: inline-block; padding: 10px 2px; }
}

/* Картинка статті: пропорції задає розмітка, тож місце під неї
   резервується до завантаження і текст не стрибає. */
img.scheme { height: auto; max-width: 100%; }

/* ---------- банер довідника на головній ---------- */
.promo {
  display: block; margin: 34px 0 10px; padding: 26px 28px;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid rgba(242,163,60,.35); border-radius: 16px;
  transition: border-color .15s, transform .15s;
}
.promo:hover { border-color: var(--amber); transform: translateY(-1px); }
.promo-tag {
  display: inline-block; font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--amber); color: var(--bg); padding: 4px 11px; border-radius: 6px;
}
.promo-title {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 23px; line-height: 1.28;
  color: var(--ink); margin-top: 13px;
}
.promo-sub { color: var(--dim); font-size: 16px; margin-top: 9px; }

/* ---------- сторінка довідника ---------- */
.dovidnyk .body { font-size: 17.5px; }
.dovidnyk h2 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 27px; line-height: 1.24;
  margin: 42px 0 16px; color: var(--ink);
}
.dovidnyk h3 {
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 21px;
  margin: 28px 0 12px; color: var(--aqua);
}
.dovidnyk .lead-intro { font-size: 19px; color: var(--dim); margin-bottom: 6px; }

table.dov {
  width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: 16px;
}
table.dov th {
  text-align: left; padding: 12px 14px; background: var(--panel-2);
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--aqua);
}
table.dov td {
  padding: 13px 14px; border-top: 1px solid rgba(111,168,181,.18);
  vertical-align: top; line-height: 1.5;
}
table.dov td.warn { color: #F2A33C; }
table.dov td.ok { color: #7FC8A9; }
table.dov tr:nth-child(even) td { background: rgba(22,48,58,.4); }

ul.red, ul.sum, ol.steps-list { margin: 16px 0 24px; padding-left: 4px; }
ul.red li, ul.sum li, ol.steps-list li {
  list-style: none; padding: 9px 0 9px 30px; position: relative; line-height: 1.5;
  border-bottom: 1px solid rgba(111,168,181,.12);
}
ul.red li::before { content: '✕'; position: absolute; left: 4px; color: var(--red); font-weight: 700; }
ul.sum li::before { content: '✓'; position: absolute; left: 4px; color: var(--aqua); font-weight: 700; }
ol.steps-list { counter-reset: st; }
ol.steps-list li::before {
  counter-increment: st; content: counter(st);
  position: absolute; left: 0; top: 8px; width: 22px; height: 22px;
  background: var(--aqua); color: var(--bg); border-radius: 6px;
  font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}

p.action {
  background: rgba(242,163,60,.12); border-left: 3px solid var(--amber);
  padding: 15px 18px; border-radius: 8px; margin: 18px 0;
}
pre.prompt {
  background: var(--panel); border-left: 3px solid var(--aqua);
  padding: 18px 20px; border-radius: 8px; margin: 16px 0 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; line-height: 1.6; white-space: pre-wrap; color: var(--ink);
}
p.footnote {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(111,168,181,.2);
  color: var(--dim); font-size: 15.5px;
}

@media (max-width: 640px) {
  .dovidnyk h2 { font-size: 22px; }
  .promo-title { font-size: 19px; }
  table.dov { font-size: 14.5px; }
  table.dov th, table.dov td { padding: 10px 9px; }
}

/* ---------- розділи на головній ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 46px 0 4px; gap: 14px;
}
.section-head .section-title { margin: 0; }
.more { font-size: 15px; color: var(--dim); white-space: nowrap; }
.more:hover { color: var(--amber); }
.section-sub { color: var(--dim); font-size: 15.5px; margin: 0 0 18px; }

/* ---------- пошук і фільтри ---------- */
.searchbox {
  position: relative; margin: 28px 0 18px;
}
.searchbox svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--dim); pointer-events: none;
  transition: color .18s;
}
.searchbox input {
  width: 100%; padding: 16px 18px 16px 50px;
  background: var(--panel);
  border: 1px solid rgba(111,168,181,.22);
  border-radius: 14px; color: var(--ink); font-size: 16.5px;
  font-family: 'Golos Text', 'Golos Fallback', sans-serif;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.searchbox input::placeholder { color: var(--dim); opacity: .75; }
.searchbox input:focus {
  outline: none; border-color: var(--aqua); background: var(--panel-2);
  box-shadow: 0 0 0 3px rgba(111,168,181,.13);
}
.searchbox:focus-within svg { color: var(--aqua); }
.searchbox input::-webkit-search-cancel-button {
  -webkit-appearance: none; height: 15px; width: 15px; cursor: pointer;
  background: var(--dim); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='3'/></svg>") center/12px no-repeat;
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.chip {
  background: transparent; color: var(--dim);
  border: 1px solid rgba(111,168,181,.28);
  border-radius: 999px; padding: 9px 18px; font-size: 14.5px;
  font-weight: 500; cursor: pointer; font-family: 'Golos Text', 'Golos Fallback', sans-serif;
  transition: color .18s, border-color .18s, background .18s, transform .12s;
}
.chip:hover { color: var(--ink); border-color: var(--aqua); background: rgba(111,168,181,.08); }
.chip:active { transform: scale(.97); }
.chip.on {
  background: var(--aqua); color: var(--bg);
  border-color: var(--aqua); font-weight: 600;
}
.chip.on:hover { background: var(--amber); border-color: var(--amber); }

/* Фільтр, який на поточному перетині нічого не дасть. Не ховаємо, а глушимо:
   кнопки, що зникають і повертаються, збивають з пантелику дужче, ніж
   притінені. Клік лишається робочим — людина побачить порожній стан і
   зрозуміє, що комбінація не сходиться. */
.chip.off { opacity: .34; border-color: rgba(111,168,181,.14); }
.chip.off:hover { color: var(--dim); border-color: rgba(111,168,181,.24); background: transparent; }

.reset {
  background: transparent; color: var(--amber);
  border: 1px dashed rgba(242,163,60,.45); border-radius: 999px;
  padding: 7px 16px; font-size: 14px; cursor: pointer;
  font-family: 'Golos Text', 'Golos Fallback', sans-serif; margin-left: auto;
}
.reset:hover { background: rgba(242,163,60,.1); border-style: solid; }

.empty {
  color: var(--dim); padding: 34px 4px; font-size: 16.5px;
  text-align: center; border: 1px dashed rgba(111,168,181,.22);
  border-radius: 14px; margin-top: 8px;
}

/* ---------- «читайте також» ---------- */
.related { margin-top: 40px; padding-top: 4px; }
.rel {
  display: block; background: var(--panel); border-radius: 12px;
  padding: 15px 18px; margin-bottom: 10px; color: var(--ink); font-size: 16.5px;
  border: 1px solid transparent; transition: border-color .15s;
}
.rel:hover { border-color: rgba(111,168,181,.35); color: var(--ink); }

@media (max-width: 640px) {
  .section-head { flex-direction: column; gap: 4px; margin-top: 36px; }
  .chip { padding: 7px 13px; font-size: 14px; }
  .search { font-size: 16px; padding: 12px 15px; }
}

/* Розгорнута версія матеріалу — під коротким постом, з візуальною межею:
   читач має бачити, де закінчується анонс і починається розбір. */
.longread { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.longread h2 { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 21px;
  line-height: 1.3; margin: 32px 0 14px; color: var(--ink); }
.longread h2:first-child { margin-top: 0; }
.longread p { margin: 0 0 15px; }
.longread ul { margin: 0 0 16px; padding-left: 22px; }
.longread li { margin: 0 0 9px; }
.longread code { display: block; background: var(--code-bg, rgba(255,255,255,.05));
  border-left: 2px solid var(--aqua); padding: 12px 14px; margin: 4px 0 16px;
  font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; border-radius: 0 6px 6px 0; }
@media (max-width: 640px) { .longread h2 { font-size: 18px; } }

/* Фільтр за вендором — другий вимір поруч із рубриками. Візуально тихіший:
   рубрика відповідає на «що це», вендор на «про кого», і другий не має
   перетягувати увагу. */
.chips.vendors { margin-top: -2px; }
.chip.vendor { font-size: 13px; padding: 6px 12px; opacity: .82; }
.chip.vendor:hover { opacity: 1; }
.chip.vendor.on { opacity: 1; }
.chip.vendor .n { opacity: .55; font-size: 11.5px; margin-left: 3px; }

/* Промпт для копіювання. У Telegram це згорнутий blockquote з кнопкою; на
   сайті — блок із моноширинним текстом і власною кнопкою копіювання. */
.prompt-block { position: relative; margin: 18px 0; }
.prompt-block pre { background: rgba(255,255,255,.05); border-left: 2px solid var(--aqua);
  padding: 14px 16px; margin: 0; font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; border-radius: 0 6px 6px 0;
  max-height: 220px; overflow: hidden; transition: max-height .25s; }
.prompt-block.open pre { max-height: none; }
.prompt-block .acts { display: flex; gap: 8px; margin-top: 8px; }
.prompt-block button { font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
  background: transparent; color: var(--aqua); border: 1px solid var(--line);
  border-radius: 6px; }
.prompt-block button:hover { border-color: var(--aqua); }

/* Коли повна версія замінює короткий пост, верхня межа зайва — вона відділяла
   б заголовок від тексту. */
.longread.lead { margin-top: 0; padding-top: 0; border-top: none; }

/* Кейс — окремий тип поруч із практикою й новиною. Теплий відтінок:
   реалізований проєкт, а не порада й не подія. */
/* Колір тексту НЕ перекриваємо: базовий .tag має темний var(--bg), і саме
   він дає потрібний контраст. Світлий var(--ink) на бурштиновому давав 2.54
   при нормі 4.5 — Lighthouse побачив це 03.09.2026, щойно кейси з'явились
   на головній. На /keisy/ ця вада жила непоміченою від самого початку. */
.tag.case { background: #C98A3E; }

/* ---------- плитки тем на головній ---------- */
/* Теми — головний вхід у базу знань: вони не старіють, на відміну від
   стрічки за датами. На головній показуємо чотири найбільші плиткою, щоб
   вони не губились серед карток матеріалів. */
.topic-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.topic-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-radius: 12px;
  background: rgba(111,168,181,.08);
  border: 1px solid rgba(111,168,181,.18);
}
.topic-tile:hover { background: rgba(111,168,181,.14); }
.topic-name { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); }
.topic-count { font-size: 14px; color: var(--dim); }
@media (max-width: 640px) {
  /* Два стовпці й на телефоні: плитки короткі, а в один стовпець вони
     з'їдали півтора екрана й губились між картками матеріалів. */
  .topic-tiles { gap: 10px; }
  .topic-tile { padding: 14px 14px; }
  .topic-name { font-size: 15px; }
  .topic-count { font-size: 13px; }
}

/* ---------- зміст, навігація темою, заклик ---------- */
/* Зміст: лише для довгих розборів (від двох підзаголовків). Читач бачить
   обсяг наперед і може стрибнути в потрібний блок — на телефоні це важливо,
   бо розбір на 3-4 тисячі символів це шість-сім екранів. */
.toc {
  margin: 26px 0 8px; padding: 16px 20px; border-radius: 12px;
  background: rgba(111,168,181,.07); border: 1px solid rgba(111,168,181,.16);
}
.toc b { display: block; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aqua); margin-bottom: 10px; }
.toc a { display: block; padding: 7px 0; color: var(--ink); font-size: 16px;
  border-bottom: 1px solid rgba(111,168,181,.10); }
.toc a:last-child { border-bottom: none; }
.toc a:hover { color: var(--aqua); }

/* Перехід у межах ТЕМИ, а не за датою: читач статті про Claude Code хоче
   ще про Claude Code, а не те, що вийшло наступного дня про регуляції. */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 0; }
.post-nav a {
  padding: 16px 18px; border-radius: 12px; background: var(--panel);
  border: 1px solid rgba(111,168,181,.16); color: var(--ink);
  font-weight: 500; line-height: 1.32;
}
.post-nav a:hover { border-color: var(--aqua); }
.post-nav a span { display: block; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.post-nav .nav-next { text-align: right; }

/* Один заклик, не два: конкуруючі заклики не спрацьовують обидва. */
.post-cta {
  display: block; margin: 30px 0 0; padding: 20px 24px; border-radius: 12px;
  background: var(--aqua); color: var(--bg);
}
.post-cta:hover { background: var(--amber); color: var(--bg); }
.post-cta b { display: block; font-family: 'Unbounded', 'Unbounded Fallback', sans-serif;
  font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.post-cta span { font-size: 15px; opacity: .82; }

@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .nav-next { text-align: left; }
  .toc { padding: 14px 16px; }
}

/* ---------- пошук ---------- */
.hero.narrow { padding: 40px 0 16px; }
.search-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 16px 18px; margin: 0 0 10px;
  font-family: inherit; font-size: 17px;
  color: var(--ink); background: var(--panel);
  border: 1px solid rgba(111,168,181,.28); border-radius: 12px;
}
.search-input::placeholder { color: var(--dim); }
.search-input:focus { outline: none; border-color: var(--aqua); }
.search-count { color: var(--dim); font-size: 14px; margin: 0 0 18px; min-height: 20px; }

/* ---------- пакети для компаній ---------- */
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 34px; }
.pack {
  padding: 26px 28px; border-radius: 14px; background: var(--panel);
  border: 1px solid rgba(111,168,181,.20);
}
.pack-name { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif;
  font-weight: 700; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--aqua); }
.pack-price { font-family: 'Unbounded', 'Unbounded Fallback', sans-serif;
  font-weight: 700; font-size: 30px; margin: 10px 0 2px; }
.pack-price span { display: block; font-family: inherit; font-weight: 400;
  font-size: 14px; color: var(--dim); letter-spacing: 0; text-transform: none; }
.pack-lead { color: var(--dim); margin: 12px 0 14px; }
.pack ul { margin: 0; padding-left: 20px; }
.pack li { margin-bottom: 8px; }
.offer-why { margin: 10px 0 6px; }
.offer-why p { margin-bottom: 14px; }
@media (max-width: 640px) { .packs { grid-template-columns: 1fr; } .pack { padding: 22px 20px; } }

/* ── Сторінка курсу /kurs/ ─────────────────────────────────────────────
   Одна сторінка продажу. Стримано: та сама палітра, без банерів і
   таймерів — читач тут уже після контенту, йому потрібні факти й кнопка. */
.kurs .hero { padding: 64px 0 28px; }
.kurs .hero .kicker { color: var(--amber); font: 600 13px/1.4 'Golos Text', 'Golos Fallback', sans-serif;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.kurs .hero h1 { max-width: 760px; }
.kurs .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.btn { display: inline-block; padding: 14px 22px; border-radius: 10px; font-weight: 600;
  text-decoration: none; font-size: 16px; border: 1px solid transparent; cursor: pointer;
  font-family: 'Golos Text', 'Golos Fallback', sans-serif; }
/* Колір при наведенні задаємо ЯВНО. Глобальне `a:hover { color: amber }`
   вище фарбувало напис бурштиновим — на бурштиновій кнопці він зникав, і
   людина, навівши курсор, переставала бачити, що натискає (09.09.2026). */
.btn-amber { background: var(--amber); color: #1a1408; }
.btn-amber:hover, .btn-amber:focus-visible { color: #1a1408; filter: brightness(1.08); }
.btn-ghost { border-color: rgba(111,168,181,.45); color: var(--ink); background: transparent; }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink); border-color: var(--aqua);
  background: rgba(111,168,181,.10); }
/* «Вже маю доступ» — окрема кнопка, а не рядок дрібним: власник шукав її
   довго й не знаходив з першого погляду. */
.btn-login { border-color: rgba(242,163,60,.5); color: var(--amber); background: transparent; }
.btn-login:hover, .btn-login:focus-visible { color: var(--amber); border-color: var(--amber);
  background: rgba(242,163,60,.10); }
.btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.kurs section { margin-top: 56px; }
.kurs h2.section-title { margin-bottom: 18px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.roles span { background: var(--panel); border: 1px solid rgba(255,255,255,.06); border-radius: 999px;
  padding: 8px 14px; font-size: 15px; color: var(--ink); }
.outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.outcomes .card { padding: 18px 20px; }
.outcomes .card h3 { font-size: 17px; }
.outcomes .card p { font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--panel); border-radius: 12px; padding: 18px 16px; text-align: center; }
.stat b { display: block; font: 700 30px/1 'Unbounded', 'Unbounded Fallback', sans-serif; color: var(--aqua); }
.stat span { display: block; margin-top: 8px; color: var(--dim); font-size: 14px; }
.modules { list-style: none; padding: 0; margin: 0; counter-reset: m; }
.modules li { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.modules li::before { counter-increment: m; content: counter(m, decimal-leading-zero);
  font: 700 15px/1 'Unbounded', 'Unbounded Fallback', sans-serif; color: var(--amber); }
.modules li b { font-weight: 600; }
.modules li small { color: var(--dim); font-size: 14px; white-space: nowrap; }
.modules li p { grid-column: 2 / 4; color: var(--dim); font-size: 15px; margin: 4px 0 0; }
.reqs { color: var(--dim); font-size: 15px; }
.reqs b { color: var(--ink); font-weight: 600; }
.author { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  background: var(--panel); border-radius: 14px; padding: 20px 22px; }
.author .ini { width: 56px; height: 56px; border-radius: 50%; background: var(--panel-2);
  display: grid; place-items: center; font: 700 20px/1 'Unbounded', 'Unbounded Fallback', sans-serif; color: var(--aqua); }
.author p { color: var(--dim); font-size: 15px; margin-top: 6px; }
.lead-form { background: var(--panel); border: 1px solid rgba(111,168,181,.25); border-radius: 16px;
  padding: 26px 24px; }
.lead-form h2 { margin-bottom: 6px; }
.lead-form .sub { color: var(--dim); font-size: 15px; margin-bottom: 18px; }
.lead-form label { display: block; font-size: 14px; color: var(--dim); margin: 14px 0 6px; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 12px 14px; font: 16px 'Golos Text', 'Golos Fallback', sans-serif; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { outline: none; border-color: var(--aqua); }
.lead-form .hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
/* Вибір платника: два варіанти в рядок, на телефоні — стовпчиком. Радіо
   лишаємо звичайними — вони одразу зрозумілі й доступні з клавіатури. */
.lead-form .payer { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.lead-form .payer label { display: flex; align-items: center; gap: 8px; margin: 0;
  color: var(--ink); font-size: 15px; cursor: pointer; }
.lead-form .payer input { width: auto; accent-color: var(--amber); margin: 0; }
.lead-form [hidden] { display: none; }
.lead-form .actions { margin-top: 20px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lead-form .msg { font-size: 15px; color: var(--dim); }
.lead-form .msg.ok { color: #9fd3a8; }
.lead-form .msg.err { color: var(--red); }
.lead-form .fallback { margin-top: 14px; font-size: 15px; color: var(--dim); display: none; }
.lead-form .fallback a { color: var(--aqua); }
@media (max-width: 640px) {
  .kurs .hero { padding: 40px 0 20px; }
  .modules li { grid-template-columns: 36px 1fr; }
  .modules li small { grid-column: 2; white-space: normal; }
  .modules li p { grid-column: 2; }
  .author { grid-template-columns: 1fr; }
}

/* Розділ «Безпека» (11.09.2026) */
.tag.security { background: #7FA6A0; }
.basics { margin: 4px 0 32px; padding-left: 1.2em; line-height: 1.8; }
.basics a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.dovidnyk h2[id] { scroll-margin-top: 80px; }