/* ============================================================
   Сторінка курсу на телефоні — макет «Курс · мобільна V3».

   Один DOM на обидві версії: усе тут живе всередині
   @media (max-width:600px) і на десктоп не впливає. Блоки, яких у
   десктопній версії немає (бургер, картка Аліни, соц-чипи), лежать
   у розмітці з класом cm-only і сховані ширше за брейкпоінт.

   Палітра макета трохи синіша за загальносайтову (#0E1420 проти
   #101010) — перевизначаємо змінні лише на цій сторінці й лише на
   мобільному, щоб не чіпати решту сайту.
   ============================================================ */

/* Мобільні блоки не показуємо на десктопі — і навпаки */
.cm-only { display: none; }

@media (max-width: 600px) {

.r2 {
  --cm-bg: #0E1420;
  --cm-raised: #131B2C;
  --cm-ink: #F2F5F9;
  --cm-ac: #FFD500;
  --cm-ac-act: #FFC400;
  --cm-line: rgba(255,255,255,.10);
  --cm-dim: rgba(242,245,249,.62);
  /* Шеврон FAQ — маскою, щоб колір міняла сама CSS, без другої іконки */
  --cm-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background: var(--cm-bg);
  color: var(--cm-ink);
  font-variant-numeric: tabular-nums;
}
html:has(.r2), body:has(.r2) { background: #0E1420; }

.cm-only { display: block; }
.r2 *, .r2 *::before, .r2 *::after { box-sizing: border-box; }

/* Сторінка тримається 16px по краях у hero і 18px у секціях нижче */
.r2 .r2-wrap { width: 100%; max-width: none; padding: 0; margin: 0; }

/* ── 1. Хедер ─────────────────────────────────────────────── */
.r2 .r2-hdr { position: static; border: 0; background: none; padding: 0; }
.r2 .r2-hdr .r2-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
}
.r2 .r2-hdr nav { display: none; }             /* усе меню — у бургері */
.r2 .r2-logo img { width: 104px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.r2 .r2-hdr__auth {
  display: flex; flex-direction: row-reverse;  /* бургер крайній справа */
  align-items: center; gap: 10px;
}
.r2 .r2-hdr__auth .r2-hdr__link { display: none; }
.r2 .r2-hdr__auth .r2-cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 12px 18px;
  background: var(--cm-ac); color: #0E1420; border: 0; border-radius: 12px;
  font-size: 13.5px; font-weight: 800; white-space: nowrap; flex: 0 0 auto;
}
.r2 .r2-hdr__auth .r2-cta-btn:active { background: var(--cm-ac-act); }
.cm-burger {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 5px;
  border: 1px solid var(--cm-line); border-radius: 12px; background: none;
  cursor: pointer; flex: 0 0 auto; padding: 0;
}
.cm-burger i { display: block; width: 18px; height: 2px; background: var(--cm-ink); border-radius: 2px; }
.cm-burger:active { border-color: var(--cm-ac); }
.cm-burger:active i { background: var(--cm-ac); }

/* Повноекранне меню */
/* Меню живе в <body>, поза .r2 — тому змінні палітри повторюємо тут:
   інакше фон лишається прозорим, і пункти висять поверх сторінки. */
.cm-menu {
  position: fixed; inset: 0; z-index: 90;
  --cm-bg: #0E1420; --cm-ink: #F2F5F9; --cm-ac: #FFD500;
  --cm-line: rgba(255,255,255,.10);
  background: var(--cm-bg); color: var(--cm-ink);
  font-family: 'NL Apostrophe Site', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  padding: 12px 16px 32px; overflow-y: auto; display: none;
}
.cm-menu.is-on { display: block; }
.cm-menu__top { display: flex; justify-content: flex-end; }
.cm-menu__x {
  width: 44px; height: 44px; border: 1px solid var(--cm-line); border-radius: 12px;
  background: none; color: var(--cm-ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.cm-menu__x:active { border-color: var(--cm-ac); color: var(--cm-ac); }
.cm-menu nav { display: flex; flex-direction: column; margin-top: 18px; }
.cm-menu nav a {
  padding: 14px 0; font-size: 18px; font-weight: 700; color: var(--cm-ink);
  border-bottom: 1px solid var(--cm-line); text-decoration: none;
}
.cm-menu nav a.is-on { color: var(--cm-ac); }

/* ── 2. Хлібні крихти — горизонтальний слайдер ────────────── */
.r2 .r2-crumb {
  position: relative; display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 0 16px 12px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--cm-line);
}
.r2 .r2-crumb::-webkit-scrollbar { display: none; }
.r2 .r2-crumb a, .r2 .r2-crumb .cur {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--cm-dim); white-space: nowrap;
}
.r2 .r2-crumb .cur { color: var(--cm-ac); padding-right: 22px; }
.r2 .r2-crumb .sep { flex: 0 0 auto; font-size: 12px; color: var(--cm-dim); opacity: .45; }
/* Затемнення праворуч — підказка, що рядок скролиться */
.cm-crumb-wrap { position: relative; }
.cm-crumb-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 1px; width: 34px;
  background: linear-gradient(90deg, rgba(14,20,32,0), var(--cm-bg)); pointer-events: none;
}

/* ── 3. Hero ──────────────────────────────────────────────── */
.r2 .r2-cx-hero {
  display: flex; flex-direction: column; gap: 0;
  padding: 20px 16px 28px; margin: 0; border: 0;
}
.r2 .r2-cx-hero__art {                          /* ілюстрація — першою */
  /* display:block обов'язково: у десктопній версії це флекс-контейнер,
     і <picture> усередині стискається до ширини за вмістом. */
  /* Ілюстрацію показуємо, лише поки немає відео-запрошення: воно
     сильніше, а два візуали поспіль відсувають ціну за перший екран. */
  order: -1; display: block; width: 100%; height: 230px; margin: 0 0 20px;
  background: var(--cm-raised); border: 1px solid var(--cm-line);
  border-radius: 18px; overflow: hidden;
}
.r2 .r2-cx-hero__art picture { display: block; width: 100%; height: 100%; }
.r2 .r2-cx-hero__art img {
  width: 100%; height: 100%; max-height: none; object-fit: cover;
  display: block; aspect-ratio: auto; border-radius: 0;
}

.r2 .r2-cx-hero__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 0; letter-spacing: 0; text-transform: none; color: inherit;
}
.r2 .r2-cx-hero__eyebrow .r2-course__badge,
.r2 .r2-cx-hero__eyebrow .cm-chip {
  display: inline-flex; align-items: center; margin: 0;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 7px;
}
.r2 .r2-cx-hero__eyebrow .r2-course__badge { background: var(--cm-ac); color: #0E1420; }
.r2 .r2-cx-hero__eyebrow .cm-chip {
  background: none; color: var(--cm-dim); border: 1px solid var(--cm-line); padding: 5px 11px;
}

.r2 .r2-cx-hero h1 {
  margin: 0 0 12px; font-size: 36px; line-height: 1.02; font-weight: 800;
  letter-spacing: -.03em; text-transform: uppercase;
}
.r2 .r2-cx-hero__lead {
  margin: 0; font-size: 15px; line-height: 1.6; color: var(--cm-dim); text-wrap: pretty;
}

/* 4 факти рядками */
.r2 .r2-cx-hero__meta {
  display: block; margin: 22px 0 0; padding: 0;
  border-top: 1px solid var(--cm-line); border-bottom: 0;
}
.r2 .r2-cx-hero__meta > div {
  display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--cm-line); border-right: 0;
}
.cm-ico {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: rgba(255,213,0,.11); color: var(--cm-ac);
}
.r2 .r2-cx-hero__meta .cm-row__b > span {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--cm-dim); margin-bottom: 3px;
}
.r2 .r2-cx-hero__meta .cm-row__b > b {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3;
}

/* Відео */
.cm-video { margin-top: 22px; }
.cm-video__box {
  position: relative; height: 196px; background: var(--cm-raised);
  border: 1px solid var(--cm-line); border-radius: 16px; overflow: hidden;
  width: 100%; padding: 0; cursor: pointer; display: block;
}
.cm-video__box img, .cm-video__box iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.cm-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; background: var(--cm-ac); color: #0E1420;
  display: grid; place-items: center; pointer-events: none; z-index: 2;
  box-shadow: 0 8px 24px -8px rgba(255,213,0,.6);
}
.cm-video__box.is-loading .cm-video__play { opacity: .6; }
.cm-video__cap {
  display: block; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--cm-dim); text-align: center;
}

/* Блок купівлі */
.cm-buy {
  margin-top: 22px; padding: 20px 18px; background: var(--cm-raised);
  border: 1px solid rgba(255,213,0,.26); border-radius: 18px;
}
.r2 .cm-buy .r2-cx-hero__price {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 14px;
  font-size: 38px; font-weight: 800; letter-spacing: -.04em; color: var(--cm-ac); line-height: 1;
}
.r2 .cm-buy .r2-cx-hero__price small {
  font-size: 13px; font-weight: 600; color: var(--cm-dim); letter-spacing: 0;
}
.r2 .cm-buy .r2-cx-hero__cta { margin: 0; display: block; }
.r2 .cm-buy .r2-cta-btn, .r2 .cm-tar .r2-cta-btn {
  display: grid; place-items: center; width: 100%; min-height: 56px;
  background: var(--cm-ac); color: #0E1420; border: 0; border-radius: 14px;
  font-size: 15.5px; font-weight: 800; padding: 17px 20px; text-align: center;
}
.r2 .cm-buy .r2-cta-btn:active, .r2 .cm-tar .r2-cta-btn:active { background: var(--cm-ac-act); }
.cm-note {
  display: block; margin-top: 12px; font-size: 11.5px; font-weight: 600;
  color: var(--cm-dim); text-align: center;
}

/* ── 4. Секції ────────────────────────────────────────────── */
.r2 .r2-cx-section, .r2 .r2-faq {
  padding: 40px 18px 0; margin: 0; border: 0; text-align: left; max-width: none;
  /* Секції — колонка-флекс із align-items:center; у макеті все по лівому краю */
  align-items: stretch;
}
.r2 .r2-cx-section > h2, .r2 .r2-faq > h2 {
  margin: 0 0 18px; max-width: none; font-size: 24px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; text-align: left;
}
.r2 .r2-cx-section > h2 em, .r2 .r2-faq > h2 em { font-style: normal; color: inherit; }
.cm-eyebrow {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cm-ac); margin-bottom: 10px; text-align: left;
}

/* Для кого */
.r2 .r2-aud-list { display: flex; flex-direction: column; gap: 10px; }
.r2 .r2-aud-list__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 16px; background: var(--cm-raised); border: 1px solid var(--cm-line);
  border-radius: 16px; font-size: inherit; color: inherit;
}
/* Ромб-маркер десктопної версії — його роль тут виконує іконка */
.r2 .r2-aud-list__item::before { display: none; }
.cm-whom-ico {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,213,0,.12);
  color: var(--cm-ac); display: grid; place-items: center;
}
.r2 .r2-aud-list__item b {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: -.015em;
  line-height: 1.3; margin-bottom: 5px; color: var(--cm-ink);
}
.r2 .r2-aud-list__item p {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--cm-dim); text-wrap: pretty;
}
.cm-proof {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 18px;
  border: 1px dashed rgba(255,213,0,.35); border-radius: 14px;
}
.cm-proof b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--cm-ac); }
.cm-proof span { font-size: 12.5px; font-weight: 600; color: var(--cm-dim); }

/* Програма */
.cm-prog-meta {
  display: flex; align-items: center; gap: 12px; margin: -6px 0 16px;
  font-size: 13px; font-weight: 600; color: var(--cm-dim);
}
.cm-prog-meta b { color: var(--cm-ink); font-weight: 800; }
.cm-prog-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--cm-dim); }
.r2 .r2-cx-program {
  display: block; background: none; border: 0; border-top: 1px solid var(--cm-line);
  border-radius: 0; padding: 0; margin: 0 0 14px;
}
.r2 .r2-cx-program__row {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--cm-line); background: none; border-radius: 0;
}
.r2 .r2-cx-program__row.is-hidden { display: none; }
.r2 .r2-cx-program__num {
  font-size: 11.5px; font-weight: 800; color: var(--cm-ac); opacity: .8; padding-top: 3px;
}
.r2 .r2-cx-program__title {
  margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; text-wrap: pretty; color: var(--cm-ink);
}
/* .r2 у селекторі обов'язкове: у homepage-v2.css кнопки скинуті
   правилом такої ж ваги, і без нього рамка ghost-кнопки зникає. */
.r2 .cm-ghost {
  display: block; width: 100%; min-height: 48px; background: none;
  border: 1px solid var(--cm-line); border-radius: 12px; color: var(--cm-ink);
  font: inherit; font-size: 13.5px; font-weight: 700; padding: 13px 18px;
  cursor: pointer; text-align: center; text-decoration: none;
}
.r2 .cm-ghost:active { border-color: var(--cm-ac); color: var(--cm-ac); }

/* ── 6. Вартість ──────────────────────────────────────────── */
/* Порядок макета: тарифи → гарантія → попередження.
   У розмітці попередження стоїть першим (десктоп), тому переставляємо. */
.r2 #tariffs { display: flex; flex-direction: column; }
.r2 #tariffs > .cm-eyebrow { order: 0; }
.r2 #tariffs > h2 { order: 1; }
.r2 #tariffs > .cm-tabs { order: 2; }
.r2 #tariffs > .r2-tariffs { order: 3; }
.r2 #tariffs > .r2-guarantee { order: 4; }
.r2 #tariffs > .r2-warn { order: 5; }

.cm-tabs {
  display: flex; gap: 6px; margin-bottom: 14px; padding: 4px;
  background: var(--cm-raised); border: 1px solid var(--cm-line); border-radius: 12px;
}
.cm-tabs button {
  flex: 1; min-height: 42px; background: none; border: 0; border-radius: 9px;
  color: var(--cm-dim); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.cm-tabs button.is-on { background: var(--cm-ac); color: #0E1420; }
/* Акцент на «Преміум» — фірмовим жовтим, тим самим, що в кнопках. Червоний
   на сторінці про гроші читається як попередження, а не як підказка.
   Малюємо outline, а не border: рамка на кнопці зі своїм box-sizing зсунула
   б сусідні таби на два пікселі, і ряд перестав би стояти рівно. На
   вибраному табі рамка зливається із заливкою — і не заважає: коли таб
   вибраний, показувати на нього вже нема потреби. */
.cm-tabs button.cm-tab--pick {
  outline: 2px solid var(--cm-ac); outline-offset: 0; border-radius: 9px;
}

.r2 .r2-tariffs { display: block; gap: 0; }
.r2 .r2-tariff {
  padding: 22px 18px; background: var(--cm-raised);
  border: 1px solid rgba(255,213,0,.28); border-radius: 18px; margin: 0;
}
.r2 .r2-tariff.is-off { display: none; }
.r2 .r2-tariff--featured { transform: none; }
.r2 .r2-tariff--featured::before {
  content: 'Обирають найчастіше';
  /* align-self — бо картка тарифу колонка-флекс: без нього плашка
     розтягується на всю ширину замість пігулки */
  display: inline-block; align-self: flex-start; width: fit-content; margin-bottom: 12px;
  background: rgba(255,213,0,.14); color: var(--cm-ac);
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 99px;
}
.r2 .r2-tariff__name {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cm-dim); margin-bottom: 8px;
}
.r2 .r2-tariff__price {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 20px;
  font-size: 38px; font-weight: 800; letter-spacing: -.04em; color: var(--cm-ac); line-height: 1;
}
.r2 .r2-tariff__price span { font-size: 13px; font-weight: 600; color: var(--cm-dim); letter-spacing: 0; }
.r2 .r2-tariff__list {
  list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.r2 .r2-tariff__list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  font-size: 13.5px; line-height: 1.5; color: var(--cm-dim); padding: 0;
}
.r2 .r2-tariff__list li::before { display: none; }
.cm-check { color: var(--cm-ac); margin-top: 3px; }

/* Гарантія */
.r2 .r2-guarantee {
  margin: 14px 0 0; padding: 20px 18px; background: none;
  border: 1px solid var(--cm-line); border-radius: 16px;
}
.cm-guar-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cm-guar-h b { font-size: 15px; font-weight: 800; }
.cm-guar-ico {
  width: 38px; height: 38px; border-radius: 11px; background: rgba(255,213,0,.12);
  color: var(--cm-ac); display: grid; place-items: center; flex: 0 0 38px;
}
.r2 .r2-guarantee p {
  margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--cm-dim); text-wrap: pretty;
}
.r2 .r2-guarantee ul {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.r2 .r2-guarantee ul li {
  position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.55; color: var(--cm-dim);
}
.r2 .r2-guarantee ul li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--cm-ac);
}
.r2 .r2-guarantee small, .r2 .r2-guarantee .cm-guar-all {
  display: block; font-size: 12px; font-weight: 700; color: var(--cm-dim);
}

.r2 .r2-warn {
  margin: 12px 0 0; padding: 14px 16px; background: rgba(255,213,0,.08);
  border: 1px solid rgba(255,213,0,.22); border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; font-weight: 700; color: var(--cm-ink);
}

/* ── 7. Відгуки ───────────────────────────────────────────── */
.r2 .r2-reviews {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 0 18px 4px;
  scrollbar-width: none; grid-template-columns: none;
}
.r2 .r2-reviews::-webkit-scrollbar { display: none; }
.r2 .r2-review {
  /* Один відгук у кадрі: 250 px давали півтори картки — обрізана друга
     читається як зламана верстка. Решта — стрілками, як і всюди. */
  flex: 0 0 100%; min-height: 200px; padding: 0; overflow: hidden;
  background: var(--cm-raised); border: 1px solid var(--cm-line); border-radius: 16px;
}
.r2 .r2-review img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-revs-hint {
  display: block; margin-top: 12px; font-size: 11.5px; font-weight: 600;
  color: var(--cm-dim); text-align: center;
}

/* ── 8. Часті запитання ───────────────────────────────────── */
.r2 .r2-faq__list { border-top: 1px solid var(--cm-line); display: block; }
.r2 .r2-faq details {
  border-bottom: 1px solid var(--cm-line); border-top: 0; border-left: 0; border-right: 0;
  border-radius: 0; background: none; padding: 0; margin: 0;
}
.r2 .r2-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 58px; padding: 15px 0; font-size: 14.5px; font-weight: 700; line-height: 1.35;
  color: var(--cm-ink); list-style: none; cursor: pointer;
}
.r2 .r2-faq summary::-webkit-details-marker { display: none; }
/* Нумерація питань — з десктопної версії; у макеті її немає */
.r2 .r2-faq summary::before { content: none; }
/* Шеврон малюємо в порожньому <span>, який уже є в розмітці */
.r2 .r2-faq summary > span {
  flex: 0 0 16px; width: 16px; height: 16px; background: none; border: 0; transform: none;
  -webkit-mask: var(--cm-chev) center / 16px 16px no-repeat;
          mask: var(--cm-chev) center / 16px 16px no-repeat;
  background-color: var(--cm-dim); transition: transform .15s, background-color .15s;
}
.r2 .r2-faq details[open] summary > span { transform: rotate(180deg); background-color: var(--cm-ac); }
/* Відповідь — окрема плашка, а не хвіст під питанням. Раніше вона стояла
   з відʼємним відступом, кольором підказки і без власного тла: очима
   зливалась із наступним питанням, і на телефоні доводилось вгадувати, де
   вона закінчується. Тепер: своє тло, жовта риска зліва, повітря зверху й
   знизу, колір основного тексту.

   Відповідь буває з кількох абзаців і списку, а обгортки в розмітці немає —
   блоки лежать прямо в <details>. Тому плашку збираємо з них: тло на
   кожному, відступи по краях лише в першого й останнього, між сусідніми
   блоками розривів немає. Інакше відповідь із трьох абзаців виглядала б як
   три різні відповіді. */
.r2 .r2-faq details > p, .r2 .r2-faq details > ul {
  margin: 0; padding: 0 16px;
  background: var(--cm-raised); border-left: 2px solid rgba(255,213,0,.55);
  font-size: 14px; line-height: 1.65; color: var(--cm-ink);
  text-wrap: pretty;
}
.r2 .r2-faq details > summary + p, .r2 .r2-faq details > summary + ul {
  margin-top: 2px; padding-top: 14px; border-top-right-radius: 12px;
}
.r2 .r2-faq details > :last-child {
  padding-bottom: 14px; margin-bottom: 18px; border-bottom-right-radius: 12px;
}
/* Повітря між абзацами всередині однієї відповіді */
.r2 .r2-faq details > p + p, .r2 .r2-faq details > p + ul, .r2 .r2-faq details > ul + p {
  padding-top: 10px;
}
.r2 .r2-faq details > ul { padding-left: 34px; }
.r2 .r2-faq details > ul li + li { margin-top: 6px; }
/* Нижній відступ останнього пункту виходить за межі списку (схлопування
   полів) і пробиває в плашці смужку тла сторінки. */
.r2 .r2-faq details > ul li:last-child { margin-bottom: 0; }
/* Трохи більше повітря під відкритим питанням, щоб воно не злипалось із
   плашкою відповіді. Колір питання не чіпаємо: жовтий шеврон праворуч уже
   каже, що воно розкрите. */
.r2 .r2-faq details[open] summary { padding-bottom: 10px; }

/* Блок про спікера. Загальні правила (homepage-v2.css, до 900 px) ставлять
   фото 168 px поруч із текстом — на планшеті це доречно, а на 375 px під
   текст лишається 178 px: абзац розсипається на десять рядків і читається
   як зламана верстка. Тому на телефоні абзац віддаємо на всю ширину, а фото
   лишаємо поруч зі списком регалій — рядки там короткі. */
/* Поля з боків — обов'язкові й задаються тут. Мобільна розкладка обнуляє
   падінги .r2-wrap і повертає їх кожній секції окремо (`40px 18px 0`), але
   блок спікера — не .r2-cx-section, тож своїх полів не мав: заголовок і
   абзац упирались у лівий край екрана, а фото — у правий. */
.r2 .r2-cx-author {
  grid-template-columns: minmax(0, 1fr) 124px; column-gap: 14px;
  padding: 36px 18px;
}
.r2 .r2-cx-author__body p { grid-column: 1 / -1; grid-row: 3; }
.r2 .r2-cx-author__facts { grid-column: 1; grid-row: 4; align-self: start; }
.r2 .r2-cx-author__art { grid-column: 2; grid-row: 4; width: 124px; }

/* На вузьких екранах 124 px фото лишають списку регалій менше двохсот
   пікселів, і кожен пункт ламається натроє. Фото трохи меншає — обличчя
   на ньому все одно впізнаване. */
@media (max-width: 430px) {
  .r2 .r2-cx-author { grid-template-columns: minmax(0, 1fr) 104px; column-gap: 12px; }
  .r2 .r2-cx-author__art { width: 104px; }
}

/* ── 9. Аліна + футер ─────────────────────────────────────── */
.cm-admin {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px;
  padding: 22px 18px; background: var(--cm-raised);
  border: 1px solid var(--cm-line); border-radius: 18px;
}
.cm-admin__ava {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: var(--cm-bg); border: 2px solid rgba(255,213,0,.4);
}
.cm-admin__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-admin__body .cm-eyebrow { margin-bottom: 6px; }
.cm-admin__body > b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cm-admin__role { display: block; font-size: 12.5px; font-weight: 600; color: var(--cm-dim); margin-top: 3px; }
.cm-admin__body > p { margin: 10px 0 8px; font-size: 13px; line-height: 1.55; color: var(--cm-dim); }
.cm-admin__hours { display: block; font-size: 12px; font-weight: 700; color: var(--cm-dim); }
.cm-admin > .cm-ghost { grid-column: 1 / -1; margin-top: 4px; }

/* Футер: заклик, соц-чипи й копірайт. Юридичні посилання лишаємо:
   прибрати оферту й політику з сайту не можна. */
.r2 .r2-ftr {
  margin-top: 36px; padding: 28px 18px 26px; border-top: 1px solid var(--cm-line);
  display: flex; flex-direction: column; gap: 14px; align-items: center; background: none;
}
/* «Готові почати?» з кнопкою — одразу після останнього питання. Раніше на
   телефоні їх ховали: у макеті внизу була лише стрічка соцмереж. Але FAQ —
   це місце, де людина закриває останній сумнів, і сторінка не має
   закінчуватись переліком юридичних посилань. */
.r2 .r2-ftr > h2 {
  margin: 0; font-family: Unbounded, Manrope, sans-serif;
  font-size: 26px; font-weight: 400; line-height: 1.15; text-align: center; color: var(--cm-ink);
}
.r2 .r2-ftr > .r2-cta-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin-bottom: 8px;
  background: var(--cm-ac); color: #14171F; border-radius: 14px;
  font-size: 15.5px; font-weight: 800; text-decoration: none;
}
.r2 .r2-ftr > .r2-cta-btn:active { background: var(--cm-ac-act); }
.cm-soc { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cm-soc a {
  font-size: 12px; font-weight: 700; color: var(--cm-dim); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--cm-line); border-radius: 99px;
}
.cm-soc a:active { color: var(--cm-ac); border-color: rgba(255,213,0,.4); }
.r2 .r2-ftr__row {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  width: 100%; align-self: stretch;
  font-size: 11.5px; font-weight: 600; color: var(--cm-dim); opacity: .7;
}

/* Десктопні блоки, яких у мобільному макеті немає */
.r2 .cm-hide-mobile { display: none; }

} /* /max-width:600px */

/* Смуга 601–720 px навмисно порожня.
   Тут стояло `.r2-wrap { max-width: 430px }` — «тримаємо колонку по центру».
   Але мобільний макет живе до 600 px: у цій смузі не працює ні його CSS, ні
   скрипт, і колонка просто затискалась до 430 px усередині ширшого вікна.
   Розмітка при цьому лишалась десктопною, тому шапка й тарифи вилазили за
   край — сторінка їхала і з'являлась горизонтальна прокрутка.
   Поза макетом віддаємо сторінку звичайній адаптивній верстці
   homepage-v2.css: у неї для цих ширин є власні правила. */

/* ── 8. Відео-запрошення замість ілюстрації ─────────────────
   Ставимо на місце картинки: той самий верхній слот шапки. Секцію
   «Запрошення на курс» з десктопної версії при цьому ховаємо —
   два однакових відео на одній сторінці не потрібні.

   Увесь блок — усередині медіа-запиту, і це не формальність: без нього
   `.r2-cx-video { display: none }` діяло на всіх ширинах і ховало
   запрошення на комп'ютері, де жодної заміни немає. Секцію просто не
   бачили. */
@media (max-width: 600px) {
  .r2 .r2-cx-hero:has(.cm-video) .r2-cx-hero__art { display: none; }
  .r2 .cm-video { order: -1; margin: 0 0 20px; }
  /* 16:9, а не 230 px від ілюстрації: у кадрі відео є заголовок, і фіксована
     висота зрізала його з обох боків. */
  .r2 .cm-video__box { height: auto; aspect-ratio: 16/9; border-radius: 18px; }
  .r2 .r2-cx-video { display: none; }
}