/* ---------- баннеры курса в тексте (vm-kurs), 25.09.2026 ----------
   Три формы, в одной статье не повторяются. Все контрастные: сайт белый,
   баннер тёмный сливовый или сплошной розовый, чтобы глаз цеплялся на скролле.
   --chek   середина статьи: цены на такую работу строками чека
   --put    перед FAQ: путь с нуля до первого заказа, сплошной розовый
   --stroka длинная статья, третье место: тонкая полоса, не мешает чтению */

.vm-kurs {
  margin: 48px 0;
  border-radius: 20px;
  overflow: hidden;
  font-family: Evolventa, system-ui, sans-serif;
}
.vm-kurs img { display: block; max-width: 100%; height: auto; }
.vm-kurs__nad { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin: 0 0 8px; }
.vm-kurs__zag { font-weight: 700; font-size: 28px; line-height: 1.12; margin: 0 0 14px; }
.vm-kurs__text { font-size: 17px; line-height: 1.5; margin: 0 0 20px; }
.vm-kurs__cena { font-size: 15px; margin: 0 0 14px; line-height: 1.35; }
.vm-kurs__cena b { display: block; font-size: 24px; line-height: 1.15; }
.vm-kurs--chek .vm-kurs__cena b { color: #FFD66B; }
.vm-kurs--put .vm-kurs__cena b { color: #fff; }
.vm-statya .vm-kurs__knopka {
  display: block; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 18px; border-radius: 14px; padding: 16px 20px;
}
.vm-statya .vm-kurs__knopka:focus-visible { outline: 3px solid #FFD66B; outline-offset: 3px; }

/* чек: тёмный сливовый, картинка сверху, цены с точками-лидерами */
.vm-kurs--chek { background: #2A1621; color: #FAF6F1; }
.vm-kurs--chek .vm-kurs__kartinka { background: #3B2230; padding: 20px 24px 0; }
.vm-kurs--chek .vm-kurs__kartinka img { margin: 0 auto; max-height: 200px; width: auto; }
.vm-kurs--chek .vm-kurs__telo { padding: 24px; }
.vm-kurs--chek .vm-kurs__nad { color: #F0A6C2; opacity: 1; }
.vm-kurs__chek { list-style: none; margin: 0 0 8px; padding: 16px; background: #FAF6F1; color: #2A1621;
  border-radius: 12px; font-variant-numeric: tabular-nums; }
.vm-kurs__chek li { display: flex; align-items: baseline; gap: 8px; font-size: 16px; padding: 4px 0; }
.vm-kurs__chek .vm-kurs__tochki { flex: 1; border-bottom: 2px dotted #C9B7BF; transform: translateY(-4px); }
.vm-kurs__chek b { white-space: nowrap; }
.vm-kurs__istochnik { font-size: 13px; opacity: .6; margin: 0 0 18px; }
.vm-statya .vm-kurs--chek .vm-kurs__knopka { background: #F0A6C2; color: #2A1621; }
.vm-statya .vm-kurs--chek .vm-kurs__knopka:hover { background: #FFD66B; color: #2A1621; }

/* путь: сплошной розовый, шаги с номерами, тёмная кнопка */
.vm-kurs--put { background: #C16585; color: #fff; padding: 28px 24px; position: relative; }
.vm-kurs--put .vm-kurs__kartinka { float: right; width: 38%; margin: -8px -8px 8px 12px; }
.vm-kurs__shagi { list-style: none; counter-reset: sh; margin: 0 0 22px; padding: 0; clear: both; }
.vm-kurs__shagi li { counter-increment: sh; display: flex; gap: 12px; align-items: center; font-size: 17px; font-weight: 700; padding: 8px 0; }
.vm-kurs__shagi li::before { content: counter(sh); flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #FAF6F1; color: #C16585; display: grid; place-items: center; font-size: 17px; }
.vm-statya .vm-kurs--put .vm-kurs__knopka { background: #2A1621; color: #FAF6F1; }
.vm-statya .vm-kurs--put .vm-kurs__knopka:hover { background: #000; color: #FFD66B; }

/* строка: тонкая тёмная полоса с иконкой */
.vm-kurs--stroka { background: #2A1621; color: #FAF6F1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px; border-radius: 16px; }
.vm-kurs--stroka .vm-kurs__kartinka { flex: none; width: 56px; }
.vm-kurs--stroka .vm-kurs__text { margin: 0; font-size: 17px; font-weight: 700; flex: 1 1 calc(100% - 80px); }
.vm-statya .vm-kurs--stroka .vm-kurs__knopka { flex: 1 1 100%; background: #F0A6C2; color: #2A1621; padding: 12px 16px; font-size: 16px; border-radius: 10px; }
@media (min-width: 700px) { .vm-kurs--stroka { flex-wrap: nowrap; } .vm-statya .vm-kurs--stroka .vm-kurs__knopka { flex: none; } }

@media (min-width: 700px) {
  .vm-kurs--chek { display: grid; grid-template-columns: 40% 1fr; }
  .vm-kurs--chek .vm-kurs__kartinka { display: grid; place-items: center; padding: 24px; }
  .vm-kurs--chek .vm-kurs__telo { padding: 32px; }
  .vm-kurs--put { padding: 36px; }
  .vm-kurs--put .vm-kurs__kartinka { width: 30%; }
  .vm-kurs__zag { font-size: 32px; }
  .vm-statya .vm-kurs__knopka { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .vm-kurs * { transition: none; } }