/* Блок «Поговорить с психологом» в статьях о поддержке.
   Оформление спокойное: акцентная рамка на поверхности, без заливки.
   Все цвета — чернильными токенами на --color-surface: на --color-plate
   текст был бы того же цвета, что фон (в светлой теме оба #22262B). */

.psy{ padding:0 }
.psy__inner{ margin:26px auto 0; padding:22px 24px;
  background:var(--color-surface); border:1px solid var(--color-accent);
  border-radius:12px }
.psy__kicker{ margin:0 0 6px; font:700 10.5px/1 var(--font-base, "PT Sans", system-ui, sans-serif);
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-ink) }
.psy__h{ margin:0 0 12px; font:700 22px/1.25 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-text) }
.psy__lead{ margin:0 0 12px; font-size:16px; line-height:1.6; color:var(--color-text) }
.psy__facts{ margin:0 0 12px; padding-left:20px }
.psy__facts li{ margin:0 0 6px; font-size:15.5px; line-height:1.55; color:var(--color-text) }

/* Граница честности: то, что нельзя пролистать. Отделяем линией слева,
   как предупреждение, но не красим в тревожный цвет — это не ошибка
   пользователя, а важное уточнение. */
.psy__now{ margin:0 0 14px; padding:12px 14px;
  border-left:3px solid var(--color-accent);
  background:var(--color-bg); border-radius:0 6px 6px 0;
  font-size:15.5px; line-height:1.6; color:var(--color-text) }

.psy__act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:0 0 12px }
.psy__btn{ display:inline-flex; align-items:center; min-height:46px; padding:0 20px;
  background:var(--color-accent-fill); color:var(--color-on-fill);
  border-radius:2px; text-decoration:none;
  font:700 16px/1 var(--font-base, "PT Sans", system-ui, sans-serif) }
.psy__btn:hover{ background:var(--color-accent-fill-hover) }
.psy__btn:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px }
.psy__link{ font:700 15px/1.3 var(--font-base, "PT Sans", system-ui, sans-serif);
  color:var(--color-accent-ink) }
.psy__note{ margin:0; font-size:14px; line-height:1.5; color:var(--color-text-mute) }

@media (max-width:640px){
  .psy__inner{ padding:18px 16px }
  .psy__h{ font-size:20px }
  .psy__act{ gap:10px }
  .psy__btn{ width:100%; justify-content:center }
}