/* Реаліті по AI — сторінка трьох ефірів (15–17 вересня 2026).
   Стиль знято з /camp-new: та сама палітра, ті самі шрифти й форма карток,
   але верстка своя і набагато коротша — на сторінці всього три екрани.

   Свідомо НЕ підключаю camp-new.css: там 1500 рядків під зовсім іншу
   сторінку, і будь-яка правка кемпу тягла б за собою перевірку ще й цієї.
   Спільні тут лише картинки (лого, квіти) з /camp-assets/. */

/* ── шрифти ──────────────────────────────────────────────────────────
   Inter Tight — текст, Playfair Display italic — акценти в заголовках.
   Один лінк на обидва стоїть у <head> сторінки з display=swap. */

/* ── токени: ті самі значення, що в camp-new.css ──────────────────── */
:root {
  --lime: #b7e830;
  --lime-soft: #dfffac;
  --pink: #ff5b97;
  --pink-light: #ff8eb7;
  --pink-deep: #f7689d;
  --navy: #0c293d;
  --cream: #fcfbfa;
  --ice: #f5faff;
  --ink: #100d05;
  --muted: #6b7c89;

  --r-lg: 25px;
  --r-md: 18px;
  --r-sm: 14px;

  --gutter: clamp(16px, 4vw, 48px);
  --sec-y: clamp(38px, 5vw, 86px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Запобіжник від гортання сторінки вбік пальцем. Стоїть саме на html, а
     не на body: overflow з body передається на вікно тільки поки в html
     воно visible, і значення clip при цьому не передається взагалі — тобто
     попередній варіант (clip на body) нічого не обрізав, і на телефоні
     сторінку можна було тягати вправо-вліво на 45px.
     Вертикаль не страждає: тут обрізається лише горизонталь. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* Обрізає html (див. вище). Тут нічого не треба: overflow на body або
     передався б на вікно, дублюючи html, або обрізав би сам body — і в
     обох випадках це лише заплутує, де саме стоїть межа. */
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec-y); position: relative; }

.h2 {
  margin: 0 0 clamp(16px, 2vw, 30px);
  font-weight: 500;
  font-size: clamp(28px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.h2 em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--pink);
}
/* Коли під заголовком іде рядок .sublead, вони мають читатись як одне
   ціле — звичайний відступ заголовка для цього завеликий. */
.h2--tight { margin-bottom: clamp(8px, 1vw, 14px); }

/* Рядок під заголовком секції. Ширина обмежена в символах, а не в
   пікселях: так рядок ламається приблизно в тому самому місці на будь-якій
   ширині екрана, замість тягнутись на всю колонку. */
.sublead {
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  max-width: 52ch;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.45;
  color: var(--muted);
}
.sublead b { color: var(--navy); font-weight: 600; }

/* ── кнопки ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px clamp(20px, 3vw, 36px);
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--pink { background: var(--pink); color: #fff; box-shadow: 0 10px 30px rgba(255, 91, 151, .3); }
.btn--pink:hover { background: var(--pink-deep); }
.btn--lime { background: var(--lime); color: var(--ink); box-shadow: 0 10px 30px rgba(183, 232, 48, .34); }
.btn--lime:hover { background: var(--lime-soft); }

/* ══ 1. перший екран ══════════════════════════════════════════════════
   Сама смужка з лого — на будь-якій ширині однаково. Заголовок, абзац і
   пігулки з датами прибрані на прохання замовника: на широкому екрані має
   бути рівно те саме, що на телефоні. */
.hero {
  position: relative;
  /* Знизу навмисно менше за --sec-y: у шапці лишилось саме лого, а під
     нею одразу йде секція днів зі своїм верхнім відступом — разом
     виходила порожня смуга на пів екрана. */
  padding-block: clamp(20px, 3vw, 34px) clamp(22px, 3vw, 44px);
  /* світанкове небо переходить у кремовий фон сторінки — межі не видно */
  background: linear-gradient(175deg, #eaf5ff 0%, #f7fbff 46%, var(--cream) 100%);

  /* clip по горизонталі, visible по вертикалі — саме те, чого не вміє
     hidden: той змусив би другу вісь стати auto й обрізав би заразом і
     низ, а квітка навмисно звисає з шапки на секцію днів. Так вона
     заходить за бічний край, але не додає сторінці ширини.
     Старі браузери clip не знають — там спрацює запобіжник у html. */
  overflow-x: clip;
  overflow-y: visible;

  /* z-index піднімає всю шапку над тим, що йде далі: інакше <main>
     малювався б пізніше (обидва позиціоновані, обидва без свого рівня —
     виграє той, хто нижче в розмітці) і накривав би те, що звисає. */
  z-index: 2;
}

.hero__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero__logo img { width: 128px; height: auto; }
/* Плашка, а не просто текст: посилання стоїть у тому кутку, звідки
   виглядає квітка, і без підкладки читалося б по рожевому. */
.hero__back {
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px rgba(12, 41, 61, .08);
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.hero__back:hover { color: var(--pink); }
/* Під 560px посилання не вміщається поруч із лого і лізе під квітку.
   Втрати немає: на курс ведуть і форма нижче, і приліплена смуга внизу. */
@media (max-width: 559px) { .hero__back { display: none; } }

/* ── квітка ───────────────────────────────────────────────────────────
   Та сама азалія, що в блоці «8 напрямів» на камп-сторінках — файл
   lrn-flower-r у теці картинок кемпу; повернута в самому файлі, дивиться
   вліво. Одна, у правому куті: лівої немає, бо шапка тепер усюди заввишки
   ~70px і квітка з лівого краю лягала б просто на лого.

   Чіпляється за ВЕРХНІЙ край і звисає на секцію днів, лягаючи поверх неї
   (z-index у .hero) — як пелюстки над аркою на камп-сторінках. Прив'язка
   саме до верху, бо від нижнього краю такої низької шапки квітка вилазила
   б угору за межі екрана й різалась там по суцвіттю.

   Ширина через clamp: 38vw добре виглядає на телефоні, але на моніторі
   дало б піваркуша, тож зверху обмежено. Заголовок «Три дні реаліті»
   короткий і стоїть ліворуч — по горизонталі вони не сходяться. */
.hero__flower {
  position: absolute;
  right: -9%;
  top: -12px;
  width: clamp(130px, 38vw, 250px);
  /* Обовʼязково: у <img> стоять розміри файла атрибутами, і без height:auto
     висота береться саме звідти — квітку стискало по ширині й лишало
     235px заввишки, тобто розтягувало. */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: blur(.6px);
  opacity: .75;
}

.hero__top { position: relative; z-index: 1; }

/* ── картка форми ────────────────────────────────────────────────── */
.card {
  background: rgba(255, 255, 255, .97);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 22px 54px rgba(12, 41, 61, .12);
}
.card > p { margin: 0 0 18px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Перший рядок картки — гачок: дата старту й назва курсу. Більший і
   темніший за решту тексту, але це не заголовок: заголовок сторінки —
   «Три дні реаліті» над картками, і другого h1 тут бути не має.
   Селектор із типом (p.card__hook), бо інакше його перебиває .card > p:
   у того специфічність вища за голий клас. */
.card > p.card__hook {
  margin: 0 0 12px;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

/* Картка заявки стоїть у тому ж потоці, що й дні, тож їй потрібна власна
   ознака — інакше читається як іще один день. Кант той самий, що в
   найближчого дня (.day.is-next), і ширина обмежена: на всю колонку
   поля розтягуються так, що форма виглядає як анкета, а не як заявка. */
.card--lead {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  box-shadow: 0 14px 40px rgba(255, 91, 151, .18), inset 0 0 0 2px var(--pink-light);
}

.fld { display: block; margin-bottom: 12px; }
.fld span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fld input {
  width: 100%; height: 52px; padding: 0 16px;
  font: inherit; font-size: 15px; color: var(--navy);
  background: var(--ice); border: 1px solid #dfe6ec; border-radius: var(--r-sm);
  outline: none;
}
.fld input:focus { border-color: var(--pink); background: #fff; }
.card .btn { width: 100%; margin-top: 4px; }
.legal { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.legal a { color: var(--muted); }

/* подяка замість форми — показує realiti.js, додаючи .is-sent на картку */
.done { display: none; text-align: center; padding: 18px 4px 8px; }
.done b { display: block; font-size: 19px; margin-bottom: 6px; }
.done span { font-size: 14px; color: var(--muted); }
.is-sent .done { display: block; }
.is-sent form { display: none; }
/* Разом із формою ховаємо й запрошення над нею: «Залиш контакти» одразу
   під «Дякуємо, заявка прийнята» читається як прохання зробити це ще раз. */
.is-sent > p { display: none; }


/* Відлік «Записи доступні ще» під заголовком. Сам блок .timer уже описано
   нижче — він лишився від карток днів, коли ті ще були анонсами. Ширину
   обмежуємо: на всю колонку чотири клітинки розтягуються в рідку смугу. */
.countdown {
  margin: 0 0 clamp(20px, 2.4vw, 34px);
  max-width: 460px;
}
.countdown__cap {
  margin: 0 0 8px;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 600;
  color: var(--navy);
}

/* ══ 2. три дні ═══════════════════════════════════════════════════════ */
.days { display: grid; gap: clamp(14px, 1.8vw, 22px); }

.day {
  display: grid;
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(18px, 2.2vw, 28px);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 14px 40px rgba(12, 41, 61, .09);
}
/* Кадр ліворуч, текст праворуч — але тільки там, де є місце під обидва.
   Нижче 780px усе стає в одну колонку: кадр, далі підпис. */
@media (min-width: 780px) {
  .day { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
}

/* Сьогоднішній/найближчий день підсвічений рожевим кантом — видно, куди
   дивитись, без зайвого підпису. Клас ставить realiti.js. */
.day.is-next { box-shadow: 0 14px 40px rgba(255, 91, 151, .18), inset 0 0 0 2px var(--pink-light); }

.day__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.day__num {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
}
.day__date {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: 999px;
  background: var(--ice); box-shadow: inset 0 0 0 1px rgba(12, 41, 61, .08);
  font-size: 13px; font-weight: 600;
}
.day__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.day__note { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ── стан дня: запис / таймер / ефір ──────────────────────────────── */
.day__state { min-width: 0; }

/* кадр 16:9 — і під плеєр, і під заглушку «запис буде» */
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0b1a26;
}
.frame iframe, .frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* Заглушка плеєра YouTube: обкладинка + кнопка. Сам плеєр вантажиться
   лише після кліку — інакше кожен візит тягнув би ~1 МБ скриптів ютуба
   заради кадру, який більшість гортає далі. */
.play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; cursor: pointer;
}
.play::after {
  content: "";
  width: clamp(56px, 9vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") no-repeat 54% 50% / 42%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transition: transform .15s ease;
}
.play:hover::after { transform: scale(1.06); }
/* Кут вибрано під шаблон обкладинок цього реаліті: по центру зверху лого
   CREO, ліворуч посередині пігулка «День N», під нею назва, праворуч
   ведучий — вільний лишається саме верхній лівий кут. Знизу плашка
   лягала на назву. Зміниться шаблон — переставити. */
.frame__tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(12, 41, 61, .78); color: #fff;
  font-size: 12px; font-weight: 700; backdrop-filter: blur(4px);
}

/* Таймер. Цифри табличні — інакше на кожній секунді ширина стрибає
   і блок сіпається. */
.timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: clamp(16px, 2vw, 22px) clamp(10px, 1.6vw, 18px);
  border-radius: var(--r-md);
  background: linear-gradient(140deg, #0c293d, #14405e);
  color: #fff;
  text-align: center;
}
.timer__cell b {
  display: block;
  font-size: clamp(26px, 5.6vw, 40px);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.timer__cell span {
  display: block; margin-top: 5px;
  font-size: clamp(9px, 1.1vw, 11px); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255, 255, 255, .6);
}
.timer__cap {
  margin: 10px 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
}

/* «Зараз в ефірі» — пульсуюча крапка, щоб було видно без читання */
.live {
  display: grid; gap: 12px; place-items: center;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-md);
  background: linear-gradient(140deg, #ff5b97, #ff8eb7);
  color: #fff; text-align: center;
}
.live__now { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; }
.live__dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.live .btn { background: #fff; color: var(--pink); box-shadow: none; }
.live .btn:hover { background: var(--ice); }
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none; } }

/* Заглушка: ефір минув, запису ще немає */
.soon {
  display: grid; place-items: center; gap: 6px;
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--r-md);
  background: var(--ice);
  box-shadow: inset 0 0 0 1px rgba(12, 41, 61, .08);
  text-align: center;
}
.soon b { font-size: 17px; font-weight: 600; }
.soon span { font-size: 13px; color: var(--muted); }



/* ── «8 напрямів AI-контенту», перенесений блок ────────────────────────
   Розмітку збирає tools/camp-learn.js із масиву НАПРЯМИ — та сама, що на
   камп-сторінках: вісім карток, серед них два відео й один Vimeo. Картки
   правляться в тому масиві, не тут.

   Стилі скопійовані з camp-assets/css/camp-blocks.css. Підключати той
   файл цілком не можна: він везе ще й програму з відгуками і весь
   порахований під колонку рівно 480px. Самі ж .lrn-правила прив'язані
   до ширини контейнера (container-type: inline-size, одиниці cqw), тож
   переживають будь-яку ширину — треба лише не давати блоку розтягтися
   на всю сторінку, див. обмеження в кінці.

   Селектори лишені як є, з префіксом .cnb: саме в такий <div> загортає
   блок camp-learn.js. */

@font-face {
  font-family: Nonbureau;
  src: url("/camp-assets/fonts/686bf6b97775fdaa82afa12a_NonBureau-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

@font-face {
  font-family: Nonbureau;
  src: url("/camp-assets/fonts/686bf6b97339dde893570cbe_NonBureau-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

.cnb *, .cnb *::before, .cnb *::after { box-sizing: border-box; }

.cnb img { max-width: 100%; display: block; }

.cnb a { color: inherit; }

.cnb .sec { width: 100%; position: relative; }

.cnb .wrap { width: 100%; max-width: none; margin-inline: auto; padding-inline: 0; }

/* ── «Ти навчишся робити» ────────────────────────────────────────────
   Блок зібрано наново (tools/camp-learn.js) замість вихідної верстки
   Webflow, де кожна картинка стояла на власних абсолютних координатах і
   не трималась своєї картки.

   Оформлення шапки взяте з такого ж блока на /camp: фонова арка з
   блакитним небом, поверх неї смуга з піонами, під нею заголовок великим
   кеглем по центру. Значення фону — ті самі, що там: 550px, по центру,
   від верхнього краю.

   Картки стоять рівною сіткою на дві колонки: у ряду спільна висота,
   кадри на одній лінії. */
.cnb--learn {
  /* На камп-сторінках усередині блока лишається рідна кнопка Webflow
     «Записатися на курс»: вона position: absolute зі зсувом угору, тобто
     рахується від найближчого позиціонованого предка. Раніше ним була
     обгортка .div-block-928, яку ми замінили, — тож тепер це наш блок. */
  position: relative;
  /* Бічний padding знімаємо з блока й віддаємо його вмісту: арка й небо
     мають іти від краю до краю, інакше з боків лишалась голуба смужка і
     було видно, що картинка не дотягнута. */
  padding: 0 0 40px;
  /* Два шари: хмари поверх неба. У самому знімку неба хмари є, але вони
     припадають на нижню частину блока, де стоять картки, — біля заголовка
     лишалась рівна синь. Тож окремий шар із хмарами, зсунутий під заголовок. */
  background:
    url("/camp-assets/img/lrn-clouds.webp") 50% 96px / 132% auto no-repeat,
    url("/camp-assets/img/69c16f3b29f3e51b1b311df4_Frame_2085663986.avif") 50% 0 / cover no-repeat;
}

/* Камп-сторінки: у кінці блока лишається рідна смуга з краєвидом
   (.image-1119) — вона й закриває блок знизу, тож наш відступ там зайвий.
   На нейрокемпах прямої дитини-картинки немає, і відступ лишається. */
.cnb--learn:has(> img) { padding-bottom: 0; }

/* Своя .sec на цій сторінці має вертикальні відступи, а всередині блока
   вони зайві: арка з небом має починатись від самого верху. Без цього над
   аркою лишалась рівна синя смуга у висоту відступу — видно було, що це
   фон, а не картинка. Знизу блок закриває власний padding .cnb--learn. */
.cnb--learn > .sec { padding-block: 0; }

/* z-index — щоб абсолютні піони не лягли поверх заголовка: вони звисають
   нижче за арку й дістають до першого рядка. */
.cnb--learn > .sec > .wrap { padding-inline: 10px; position: relative; z-index: 1; }

/* Квіти лежать поверх арки й звисають нижче за неї, тож абсолютно — щоб не
   додавали висоти. Біле тло з них вибите, лягають прямо на небо.

   Дві окремі: ліва нижча, права трохи вища — щоб не було дзеркальної
   симетрії. Обидві виїжджають за край блока, тож видно тільки їхню
   внутрішню, рожеву частину. Легкий blur — щоб не сперечались різкістю з
   аркою й заголовком. */
.cnb .lrn__top { position: relative; }

.cnb .lrn__arch { width: 100%; height: auto; display: block; }

.cnb .lrn__flower {
  position: absolute;
  width: 74%;
  height: auto;
  pointer-events: none;
  /* сам знімок уже м'який, тож блюру тут ледь-ледь — тільки прибрати
     різкість країв після повороту */
  filter: blur(.6px);
}

/* Обидві заведені за край, тож у кадр потрапляє саме суцвіття, а стебло з
   листям лишається за межами. Ліва нижча, права вища — щоб не було
   дзеркальної симетрії. Повернуті вони у самих файлах, не тут:
   ліва дивиться вправо, права — вліво. */
.cnb .lrn__flower--l { left: -57.5%; top: -6%; }

.cnb .lrn__flower--r { right: -57.5%; top: -22%; }

/* Заголовок — порт .div-block-929 з /camp, значення зняті з тієї сторінки
   на 375px: кегль 12vw (там він упирається в 49px, тож стільки й максимум),
   підзаголовок 5vw, міжрядок 0.44 від кегля — рядки навмисно тісні, а
   повітря між ними дають margin-bottom 20 і 15px.

   Рядки зсунуті один відносно одного, і саме так у макеті: контейнер
   центрований, у першого рядка margin-right 20px (текст їде вліво на 10px),
   у другого padding-left 40px (вправо на 20px), третій без зсувів. */
.cnb .lrn__title {
  margin: 20px 0;
  text-align: center;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 500;
  color: #0c293d;
}

.cnb .lrn__title span { display: block; }

.cnb .lrn__t1,
.cnb .lrn__t2 { font-size: clamp(38px, 12vw, 49px); line-height: .44; }

.cnb .lrn__t1 { margin: 0 20px 20px 0; }

.cnb .lrn__t2 { margin: 0 0 15px; padding-left: 40px; }

.cnb .lrn__t3 { font-size: clamp(16px, 5vw, 19px); line-height: 1.05; }

.cnb .lrn__title em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

/* ── сітка карток ─────────────────────────────────────────────────── */
/* Картки — прямі діти сітки, тож висота ряду в них спільна. Опис розтягує
   верх картки (.lrn__t { flex: 1 }

картинки в ряду стоять на одній лінії, скільки б тексту не було в
   сусідки. */
.cnb .lrn-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Світла підкладка картки обривається на середині фото — нижня половина
   кадру виступає за неї. Малюємо підкладку окремим шаром (::before), а не
   фоном самої картки: інакше вона тягнулась би на всю висоту.

   Наскільки не доходити до низу, картка рахує сама, через одиниці контейнера:
   100cqw — це ширина її вмісту, тобто рівно ширина кадру (внутрішні поля вже
   відкинуті), а --кадр переводить ширину в половину висоти. Для звичайних
   карток кадр 3/4, тобто пів висоти = ширина × 2/3; у плашки кадр квадратний
   (× 1/2); у картки з Vimeo він 16/9 (× 9/32). */
.cnb .lrn {
  --кадр: .6667;
  --поле: 14px;
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--поле);
  min-width: 0;
}

.cnb .lrn::before {
  content: "";
  position: absolute;
  /* + внутрішнє поле: воно лежить між низом кадру й низом картки */
  inset: 0 0 calc(100cqw * var(--кадр) + var(--поле)) 0;
  background: #f3f3f2;
  border-radius: 14px;
}

.cnb .lrn > * { position: relative; }

.cnb .lrn__n {
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}

.cnb .lrn__n em { font-style: normal; opacity: .55; }

.cnb .lrn__h {
  margin: 0 0 8px;
  font-family: Nonbureau, Arial, sans-serif;
  font-weight: 400;
  /* Кегль прив'язаний до ширини: на 20px довгі заголовки («UGC-аватари та
     інфлюєнсери») розсипались на чотири рядки, а на вузькому екрані те саме
     ставалось і з 17px. Верхня межа 17px, нижче — за шириною екрана. */
  font-size: clamp(15px, 4.2vw, 17px);
  line-height: 1.08;
  color: #22252a;
}

.cnb .lrn__h em {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: #609eda;
}

.cnb .lrn__t {
  flex: 1 1 auto;          /* опис розсуває картку, медіа лягає до низу */
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #22252a;
}

.cnb .lrn__m {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #e7e7e6;     /* поки картинка вантажиться */
}

.cnb .lrn__m img,
.cnb .lrn__m video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ролик Vimeo знятий 16/9, а рамка вертикальна. Сам плеєр вписує відео в
   iframe («contain» — перевірено), тобто лишив би чорні поля згори й знизу.
   Тому розтягуємо iframe по висоті рамки, а завширшки даємо йому рівно
   стільки, скільки потребує та висота: 4/3 × 16/9 = 237% ширини рамки.
   Зайве ховає overflow самої рамки — виходить те саме, що object-fit: cover:
   видно середину кадру, боки зрізані. */
.cnb .lrn__m iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 237.04%;
  height: 100%;
  border: 0;
}

/* Блок зверстано під колонку 480px (кеглі підписів і номерів там у
   пікселях), тож на широкій сторінці тримаємо йому ту саму ширину й
   ставимо посередині — інакше текст у картках стає дрібним відносно
   кадрів. На телефоні обмеження ні на що не впливає. */
.cnb--learn {
  max-width: 520px;
  margin-inline: auto;
  /* Квіти по боках арки навмисно заведені далеко за край (left/right
     -57.5%), і на камп-сторінках їх обрізає сама 480-піксельна колонка
     сторінки. Тут такої колонки немає, тож без цього рядка блок
     розсував сторінку вбік на 216px. clip, а не hidden: hidden змусив би
     другу вісь стати auto й зробив би блок окремим скрол-контейнером. */
  overflow-x: clip;
  overflow-y: visible;
}

/* ══ 3. вступ: перший екран курсу ═══════════════════════════════════════
   Порт першого екрана /camp (.div-block-895 і далі у верстці camp-spring).
   Значення зняті з тієї сторінки на 375px і лишені в пікселях: там колонка
   320–480px, а тут блок так само живе в колонці не ширшій за 520px — як
   «8 напрямів» одразу під ним, щоб на моніторі вони читались одним стовпцем.

   Фон — та сама картинка з конем і колонами (1206×2352, cover). Кінь у ній
   стоїть приблизно на середині висоти, і темна картка зсунута вниз на 260px,
   щоб лягти йому на ноги, як на /camp. На ширшій колонці cover обрізає
   картинку по вертикалі симетрично, тож кінь лишається посередині.

   Куща з /camp і рядка «-40% для early bird» тут немає — прибрано на
   прохання замовника (24.09.2026); замість куща на стику з цифрами лежить
   його власний живопліт (.facts__hedge). Висота блока ≈ 742px, картка
   починається на 67% висоти — близько до пропорції /camp (526 із 824). */
.intro {
  position: relative;
  max-width: 520px;
  margin-inline: auto;
  /* 90px знизу — там, де на /camp стояли кнопка й рядок «-40%»; без цього
     фон нижчий, і кінь підіймається під заголовок */
  padding: 20px 15px 90px;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 500;
  text-align: center;
  color: #22252a;
  background: url("/camp-assets/img/69b41614b44d49d169b74e63_mob.avif") 50% 50% / cover no-repeat;
}

/* Дужки в підписах — курсивом і з повітрям: на /camp це чотири &nbsp;
   з кожного боку, тут те саме відступом. */
.intro i { font-style: italic; margin-inline: 12px; }

/* Темна смуга з двома пігулками: ліва рожева, права — просто текст */
.intro__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin: 0 0 10px;
  padding: 7px 10px;
  background: #1a374b;
  border-radius: 30px;
}
.intro__pill {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px;
  font-size: 11px; line-height: 1.8;
  color: #f1f2f3;
  white-space: nowrap;
}
.intro__pill b { margin-left: 3px; font-weight: 600; color: #ff639e; }
.intro__pill--pink {
  padding: 15px 10px;
  border-radius: 25px;
  background: linear-gradient(90deg, #ff8cbc, #ff5d99);
  color: #22252a;
}
.intro__pill--pink b { font-weight: 700; color: inherit; }

.intro__kicker { margin: 0; font-size: 15px; line-height: 1.3; color: #3a5c96; }
.intro__course { margin: 0; font-size: 20px; font-weight: 700; line-height: 1; color: #1e3d54; }

/* Заголовок трьома рядками, кожен окремим блоком з тісним міжряддям:
   20px на 45-піксельний кегль плюс 14px відступу, рівно як у Webflow.
   «Стань» — Playfair курсивом, решта — Inter Tight. */
.intro__title {
  margin: 15px 0 0;
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 0;
  color: #21385f;
}
.intro__title > * { display: block; margin: 0 0 14px; line-height: 20px; }
.intro__title > :last-child { margin-bottom: 0; }
.intro__title em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; }

/* Темна картка: 260px зверху — місце під коня з фону */
.intro__card {
  position: relative; z-index: 1;
  margin: 260px 0 0;
  padding: 20px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .73);
  color: #dde0e5;
  font-size: 14px;
  line-height: 1.4;
}
.intro__card p { margin: 0; }
.intro__lead { line-height: 21px; }
.intro__lead em { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: 25px; }
.intro__card .intro__lime { margin: 5px 0; color: #a3ee0b; }

/* ── смужка цифр ─────────────────────────────────────────────────────
   Порт .div-block-826 з /camp: три колонки, число Playfair курсивом 50px
   у 20-піксельному рядку (виступає за нього вгору й униз — так у Webflow),
   підпис 15px. Цифри — ті самі, що СМУЖКА_ЦИФР у relink.js тримає на
   камп-сторінках; зміняться там — поміняти й тут. */
.facts {
  --w: min(100vw, 520px);   /* ширина колонки */
  max-width: 520px;
  margin-inline: auto;
  padding: 0 20px 30px;
  /* зрізає хвіст живоплоту, що виходить за колонку; по вертикалі лишається
     visible, тож верхня половина живоплоту й далі лягає на небо */
  overflow-x: clip;
}

/* Живопліт-перегородка (файл від замовника, 492×179 з прозорістю). По
   альфа-каналу листя займає 4–96% ширини і 17–79% висоти файла, решта —
   прозорі поля. Тому картинка на 12% ширша за колонку і центрована: по 6%
   з кожного боку йде за край (зрізає overflow-x), і прозорі поля з обох
   боків лишаються поза колонкою — інакше на краях просвічував стик неба з
   кремовим тлом. Від'ємний верхній відступ ставить середину листя (48%
   висоти файла) рівно на той стик: висота = 1,12 × ширина × 179/492 =
   0,4075 ширини, 0,48 від неї = 0,196 ширини. Цифри нижче — із запасом,
   щоб не ховались під листям (число ще й виступає над рядком на ~15px). */
.facts__hedge {
  position: relative; z-index: 1;
  display: block;
  width: calc(var(--w) * 1.12);
  max-width: none;
  height: auto;
  margin: calc(var(--w) * -0.196) 0 0 calc(-20px - var(--w) * 0.06);
  pointer-events: none;
}
.facts__grid { margin-top: 26px; }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: center;
  color: #22252a;
}
.fact b {
  display: block;
  margin: 0 0 20px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 50px;
  line-height: 20px;
}
.fact span { display: block; font-size: 15px; font-weight: 500; line-height: 1; }

/* ── низ сторінки ────────────────────────────────────────────────── */
/* Знизу відступ більший на висоту приліпленої смуги: вона fixed і висить
   поверх сторінки, тож без цього запасу назавжди затуляла б нижній рядок
   футера. */
.foot {
  padding-block: clamp(26px, 3vw, 44px) calc(clamp(26px, 3vw, 44px) + 72px);
  background: var(--navy);
  color: #fff;
}
.foot__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.foot img { width: 100px; height: auto; }
.foot__soc { display: flex; gap: 12px; margin-top: 14px; }
.foot__soc img { width: 20px; height: 20px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.foot__nav a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.foot__nav a:hover { color: #fff; }
.foot__bot { margin-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .45); }

/* ── приліплена смуга ─────────────────────────────────────────────────
   fixed і видима завжди, з першого кадру. Нічим не керується з JS і не
   має жодного стану: ні появи після прокрутки, ні ховання, коли форма на
   екрані — обидва варіанти тут уже були, і обидва дають те саме відчуття,
   що смуга смикається під час гортання.

   Щоб вона нічого не затуляла, футеру знизу дано запас на її висоту
   (див. .foot): смуга лягає на порожній відступ, а не на текст. */
.stick {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  /* Лого прибрано, лишилась сама кнопка — тож по центру, а не по краях. */
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px clamp(12px, 3vw, 26px);
  background: rgba(12, 41, 61, .92);
  backdrop-filter: blur(8px);
}
/* Смуга — тільки на телефоні. На широкому екрані вона не потрібна: там
   видно і шапку з заголовком, і посилання на курс угорі праворуч.
   Межа та сама, що й у решти сторінки. */
@media (min-width: 900px) { .stick { display: none; } }

.stick__cta { position: relative; display: inline-flex; }

.stick__btn {
  position: relative;
  overflow: hidden;            /* тримає блиск у межах кнопки */
  display: inline-flex; align-items: center; justify-content: center;
  /* Гострі кути — навмисно, на замовлення. Решта кнопок сторінки
     лишаються круглими (.btn), це виняток саме для приліпленої смуги. */
  min-height: 44px; padding: 10px 20px; border-radius: 0;
  background: var(--pink); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.stick__btn:hover { background: var(--pink-deep); }

/* Блиск: вузька світла смуга, що раз на 6 секунд проїжджає по кнопці.
   Саме проїзд, а не перелив фону — колір кнопки лишається той самий.
   Рух у keyframes стоїть на transform, а не на left: так браузер не
   перераховує розкладку на кожному кадрі.
   Довгий «мертвий» проміжок (0–78%) і робить це рідкою подією. */
.stick__btn::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; left: 0;
  width: 36%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: blysk 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes blysk {
  0%, 78% { transform: translateX(-180%) skewX(-18deg); }
  100%    { transform: translateX(440%) skewX(-18deg); }
}

/* Кружечок зі знижкою — у правому верхньому куті, навмисно вище за
   кнопку. Лежить поза кнопкою (див. коментар у розмітці), тому її
   overflow його не чіпає. */
.stick__badge {
  position: absolute;
  /* right не глибше за −6px: під 420px кнопка на всю ширину смуги, і при
     −12px кружечок лягав рівно на край екрана. */
  top: -15px; right: -6px;
  display: grid; place-items: center;
  min-width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--lime); color: var(--ink);
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
  animation: pulsBadge 1.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulsBadge {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

@media (prefers-reduced-motion: reduce) {
  .stick__btn::after, .stick__badge { animation: none; }
}

@media (max-width: 420px) {
  .stick__cta { flex: 1; }
  .stick__btn { width: 100%; }
}

/* ══ програма курсу і тарифи ══════════════════════════════════════════
   Є лише на /zarobitok-na-ai — на /realiti і /zakryta-prezentaciya-ai
   цих блоків немає, тож правила просто ні до чого не чіпляються.

   Програму кладе tools/camp-blocks.js із /camp-new, тарифи стоять
   у розмітці сторінки. Нижче — порт стилів: програма з
   camp-assets/css/camp-blocks.css, тарифи з camp-new-assets/css/camp-new.css.
   Міняється джерело — звіряти й тут. */

/* ── програма ──────────────────────────────────────────────────────── */
/* .cnb .wrap вище знімає поля (блок вставляють у готову колонку), а тут
   блок лежить просто в body, тож ширину й поля задаємо самі. */
.cnb--prog { padding-block: var(--sec-y); }
.cnb--prog > .sec > .wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

.cnb .h2 { text-align: center; }

.cnb .prog { display: flex; flex-direction: column; gap: 12px; }
.cnb .blk { background: #fff; border-radius: var(--r-lg); overflow: hidden; }
.cnb .blk__sum { display: flex; align-items: center; gap: 12px; padding: 18px; cursor: pointer; list-style: none; }
.cnb .blk__sum::-webkit-details-marker { display: none; }
.cnb .blk__n { flex: none; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 26px; color: var(--pink); line-height: 1; }
.cnb .blk__n span { display: block; font-family: "Inter Tight", sans-serif; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.cnb .blk__h { flex: 1; font-family: "Inter Tight", system-ui, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.1; }
.cnb .blk__new { font-family: "Playfair Display", Georgia, serif; font-style: italic; color: var(--pink); white-space: nowrap; }
.cnb .blk__x { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-size: 19px; font-weight: 700; color: var(--ink); transition: transform .2s ease; }
.cnb .blk[open] .blk__x { transform: rotate(45deg); }

.cnb .blk__body { padding: 0 18px 18px; display: grid; gap: 0; }
.cnb .blk__media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.cnb .blk__media img { width: 100%; aspect-ratio: 330 / 438; object-fit: cover; border-radius: var(--r-md); }
.cnb .blk__vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--navy); grid-column: 1 / -1; }
.cnb .blk__vid iframe,
.cnb .blk__vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.cnb .blk__vid--v { aspect-ratio: 3 / 4; }

/* модулі — рейка з крапками */
.cnb .mod { background: none; border-radius: 0; padding: 12px 0 12px 18px; border-left: 2px solid rgba(255, 91, 151, .28); position: relative; }
.cnb .mod::before { content: ""; position: absolute; left: -6px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.cnb .mod:last-child { border-left-color: transparent; box-shadow: inset 2px 0 0 rgba(255, 91, 151, .28); }
.cnb .mod__h { position: relative; padding-right: 24px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.cnb .mod__h::-webkit-details-marker { display: none; }
.cnb .mod__h::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: rotate(45deg); transition: transform .2s ease, margin-top .2s ease; }
.cnb .mod[open] > .mod__h::after { margin-top: -2px; transform: rotate(-135deg); }
.cnb .mod__h i { font-style: normal; color: var(--pink); }
.cnb .mod__l { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cnb .mod__l li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; }
.cnb .mod__l b { flex: none; min-width: 52px; font-weight: 600; color: var(--muted); }

.cnb .extra { margin-top: 12px; background: var(--pink); color: #fff; border-radius: var(--r-lg); padding: 20px; }
.cnb .extra h3 { margin: 0 0 14px; font-family: "Inter Tight", system-ui, sans-serif; font-weight: 500; font-size: 19px; }
.cnb .extra ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cnb .extra li { display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.cnb .extra li::before { content: "//"; flex: none; opacity: .65; }

/* ── тарифи ────────────────────────────────────────────────────────── */
.h2--center { text-align: center; }

.tar-sec { background: var(--navy); color: #fff; position: relative; isolation: isolate; overflow: hidden; }
.tar-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/camp-new-assets/img/bg-tariffs.webp") center / cover no-repeat; opacity: .18; }
.tar-sec .h2 { color: #fff; }

/* На телефоні три тарифи стовпчиком дають нескінченну сторінку, тому
   стрічка з прилипанням: гортаються вбік і їх зручно порівнювати.
   Від 760px — звичайна сітка. */
.tars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(88%, 340px);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tars::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
  .tars {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }
}
.tar { scroll-snap-align: start; background: #fff; color: var(--navy); border-radius: var(--r-lg); padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; }
.tar--hot { background: var(--lime); }
.tar__n { font-family: "Inter Tight", system-ui, sans-serif; font-size: clamp(20px, 2.2vw, 28px); color: var(--pink); line-height: 1; }
.tar--hot .tar__n { color: var(--navy); opacity: .45; }
.tar__h { margin-top: 4px; font-family: "Inter Tight", system-ui, sans-serif; font-weight: 500; font-size: clamp(24px, 2.8vw, 36px); line-height: 1; }
.tar__list { margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tar__list li { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.4; }
.tar__list li::before { content: "//"; flex: none; opacity: .5; }
.tar__list li.is-bonus::before { content: "🎁"; }
.tar__list li.is-off { opacity: .38; }
.tar__list li b { font-weight: 700; }
.tar__foot { margin-top: auto; padding-top: clamp(16px, 2vw, 24px); display: grid; gap: 10px; }
.tar__ever { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }

/* Ціна. Елементи цін — <div> з id: саме їх шукає tools/prices.js, тож
   структуру всередині .tar__price не спрощувати до <b>/<s>. */
.tar__price { margin-top: clamp(16px, 2vw, 22px); padding-top: clamp(14px, 1.6vw, 18px); border-top: 1px solid rgba(12, 41, 61, .14); }
.tar--hot .tar__price { border-top-color: rgba(12, 41, 61, .22); }
.tar__eur { font-family: "Inter Tight", system-ui, sans-serif; font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: -.02em; }
.tar__uah { margin-top: 4px; font-size: 15px; font-weight: 600; opacity: .72; }
.tar__old { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; font-size: 13px; opacity: .5; }
.tar__eur-old,
.tar__uah-old { text-decoration: line-through; }