
/* CTA-бар и пост-интеракционные правки. Грузится async: бар появляется
   только после копирования — в критическом пути ему делать нечего. */
  .bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    padding: 0.6rem var(--gap);
    background: var(--surface); border-top: 1px solid var(--glass-2);
  }
  .bar { flex-wrap: wrap; }
  body:has(#cta-bar:not([hidden])) { padding-bottom: 6rem; }
  .filters label { position: relative; }
  .filters input { position: absolute; inset: 0; width: 100%; height: 100%; }
  .filters { padding-block: 3px; }

/* ── похожее ──────────────────────────────────────────────────────
   Блок ниже сгиба, поэтому здесь, а не в критическом инлайне. */
  /* Было: ряд одинаковых пилюль на glass-1 — ссылки читались как теги,
     а не как переходы, и блок ничем не принадлежал сайту. Стало:
     карточки на --surface со стеклянной обводкой, тот же язык, что у
     панелей лендинга. Ярусы разделены подписью, а не только порядком. */
  .related { margin: 3rem 0 0; }
  .related > h2 {
    font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1.25rem;
  }
  .rel-group + .rel-group { margin-top: 1.5rem; }
  .rel-label {
    margin: 0 0 .625rem; font-size: .75rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-mute);
  }
  .rel-grid {
    list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .rel-grid a {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; min-height: 3.25rem; padding: .875rem 1rem;
    border: 1px solid var(--glass-2); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text); text-decoration: none;
    font-size: var(--fs-sm); line-height: 1.35;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .rel-anchor { min-width: 0; }
  .rel-go {
    flex: none; color: var(--text-mute); font-size: 1rem;
    transition: color .18s ease, transform .18s ease;
  }
  .rel-grid a:hover {
    background: var(--glass-1); border-color: var(--primary);
    box-shadow: 0 0 1.25rem var(--primary-glow);
  }
  .rel-grid a:hover .rel-go { color: var(--primary); transform: translateX(.2rem); }
  .rel-grid a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  /* Ярус «ещё на этом языке» — вспомогательный: карточки уже и тише,
     чтобы соседи по разделу читались первыми. */
  .rel-grid--wide { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .rel-grid--wide a { min-height: 2.75rem; padding: .625rem .875rem; color: var(--text-dim); }
  @media (prefers-reduced-motion: reduce) {
    .rel-grid a, .rel-go { transition: none; }
    .rel-grid a:hover .rel-go { transform: none; }
  }


