/* =============================================================================
   Polza Course Landings — Shared Base
   Спільна база для лендингів курсів. Підключати ПІСЛЯ brand.css і ПЕРЕД
   локальним style.css кожного ленду.

   Використовується на: /course/undebt, /course/fintriangle, /course/finlevel

   Тут лежать однакові для всіх лендів елементи:
   — заголовок hero (назва курсу + акцентний рядок)
   — система декоративних маскотів
   Змінюй тут — застосується одразу на всіх лендах.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   HERO TITLE — назва курсу (name) + акцентний рядок (accent)
   Розмір підібраний так, щоб уміщались і короткі, і довгі назви.
   -------------------------------------------------------------------------- */
.hero__title-name {
  display: block;
  font-size: 56px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 4px;
  color: var(--color-text);
}

.hero__title-accent {
  display: block;
  font-size: var(--text-4xl); /* 40px */
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* -----------------------------------------------------------------------------
   MASCOT — декоративний маскот, що визирає з-за блоків
   - .mascot--left   : визирає з-за лівого боку diag-card (тільки десктоп)
   - .mascot--corner : визирає з нижнього правого кута insight-картки (всі екрани)
   -------------------------------------------------------------------------- */

/* Обгортка diag-card — обмежена шириною картки, щоб лівий маскот
   прив'язувався до краю картки, а не до краю екрана. */
.diag-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.mascot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Clip-контейнер — повторює форму картки, щоб маскот не виходив за її межі */
.insight__mascot-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Кутовий маскот — визирає зсередини нижнього правого кута, нахил вліво */
.mascot--corner {
  top: auto;
  bottom: -30px;
  right: -37px;
  width: 90px;
  transform: rotate(-30deg);
}

/* Лівий маскот — визирає з-за лівого боку картки, нахил вліво, по центру висоти */
.mascot--left {
  top: 50%;
  left: -70px;
  width: 120px;
  transform: translateY(-50%) rotate(-30deg);
  z-index: -1;
}


/* -----------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1279.98px) {
  .hero__title-name   { font-size: 42px; }
  .hero__title-accent { font-size: 30px; }

  /* Бічний маскот потребує бічного відступу контейнера — нижче 1280px ховаємо.
     Кутовий живе всередині картки (обрізаний), тому лишається. */
  .mascot--left { display: none; }
}

@media only screen and (max-width: 743.98px) {
  .hero__title-name   { font-size: 32px; }
  .hero__title-accent { font-size: 22px; }

  .mascot--corner {
    width: 65px;
    bottom: -30px;
    right: -28px;
  }
}


/* =============================================================================
   SHARED COMPONENT BLOCKS — спільні для undebt + fintriangle
   (finlevel ці блоки не використовує)
   ============================================================================= */

/* --- Insight / Root Cause --- */
.insight { margin-top: var(--space-15); position: relative; }
.insight__card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
}

.insight__card::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-button);
  /* Біла SVG-лампочка по центру градієнтного кола */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z'/%3E%3C/svg%3E") center / 28px 28px no-repeat,
    var(--gradient-brand);
}

.insight__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.insight__lead {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.insight__lead em {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.insight__body {
  margin: 0;
  /* Бічний відступ, щоб текст не залазив на кутовий маскот (.mascot--corner) */
  padding-inline: 48px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* --- Not For --- */
.not-for {
  max-width: 620px;
  margin: var(--space-20) auto 0;
}

.not-for__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-8);
}

.not-for__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.not-for__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  margin-bottom: 14px;
}

.not-for__list li:last-child { margin-bottom: 0; }

.not-for__list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Outcomes --- */
/* Outcomes Section */
.outcomes { margin-top: 90px; }

.outcomes h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-10);
}

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* Адаптація сітки під кількість карток (загальне правило для всіх лендів).
   База — 3 колонки (ідеально для 3/6/9). Але рівно 4 картки в 3 колонках дають
   некрасиве «3 + 1 самотня», а рівно 2 — розтягуються на пів-ряди. Тому:
     • рівно 4 → 2×2
     • рівно 2 → 2 колонки
   `:nth-child(N):last-child` = контейнер має РІВНО N карток. Лише десктоп:
   планшет уже 2 колонки, мобайл — 1, і вища специфічність :has не має їх перебити. */
@media only screen and (min-width: 1280px) {
  .outcomes__grid:has(.outcome:nth-child(4):last-child),
  .outcomes__grid:has(.outcome:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.outcome {
  position: relative;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .outcome:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }
}

.outcome__num {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.outcome__title {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.outcome__text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.outcome__text b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* Outcomes — тематичні іконки замість цифр (опційно; замість .outcome__num) */
.outcome__icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
}

/* --- Diagnostic card (Два сценарії) --- */
.diag-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto var(--space-10);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.diag-card__head {
  text-align: center;
  padding: var(--space-8) var(--space-6) 0;
}

.diag-card__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--color-bg-mint);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.diag-card__body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: var(--space-6) var(--space-8) var(--space-8);
}

.diag-card__col {
  text-align: center;
  padding: 0 var(--space-5);
}

.diag-card__sym {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: 0 6px 16px rgba(0, 191, 165, 0.2);
}

.diag-card__person {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.diag-card__text {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.diag-card__text b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.diag-card__fade {
  color: rgba(244, 67, 54, 0.7);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 67, 54, 0.55);
  text-decoration-thickness: 1px;
}

.diag-card__divider {
  width: 1px;
  margin: var(--space-3) 0;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%);
}

.diag-card__foot {
  text-align: center;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary);
  border-top: none;
}

.diag-card__foot span {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: #fff;
}



/* =============================================================================
   FULL SHARED BASE — решта спільних блоків (container, hero, for-whom,
   lessons, price, reviews) + усі адаптивні медіа-запити.
   Спільне для undebt + fintriangle. finlevel НЕ підключає цей файл.
   ============================================================================= */

/* Container */
[class*=__container] {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  overflow: clip;
  /* Клип лишається (захист від h-scroll), але даємо запас навколо контентної
     межі, щоб тіні карток на hover не обрізались по лівому/правому краю.
     24px ховаються в горизонтальному padding контейнера, тож scroll не зʼявляється. */
  overflow-clip-margin: 24px;
}

@media only screen and (max-width: 1279.98px) {
  [class*=__container] {
    max-width: var(--container-tablet);
    padding: 0 var(--space-4);
  }
}

/* Hero entrance animation */
.hero__titles { animation: polza-fadeUp 0.6s ease-out both; }
.hero__left   { animation: polza-fadeUp 0.6s ease-out 0.15s both; }
.hero__right  { animation: polza-fadeUp 0.6s ease-out 0.3s both; }

/* Hero Section */
.hero {
  margin-top: var(--space-6);
}

.hero__titles {
  text-align: center;
  margin-bottom: var(--space-12);
}

.hero__badge {
  display: inline-block;
  padding: 10px 24px;
  background: var(--color-primary);
  border-radius: 50px;
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: 19px;
  color: #fff;
  margin-bottom: var(--space-4);
}

.hero__titles h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-4xl);
  line-height: 1.2;
  color: var(--color-text);
  text-align: center;
}

/* .hero__title-name / .hero__title-accent → /resources/css/course.css */

.hero__subtitle {
  margin-top: var(--space-3);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  text-align: center;
}

/* Main row: left | right */
.hero__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  justify-content: center;
}

.hero__left { flex: 0 0 auto; }

.hero__author {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.hero__photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.hero__photo img {
  width: 186px;
  height: 186px;
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--gradient-brand);
  padding: 7px;
  box-sizing: content-box;
}

.hero__author-name {
  margin-top: 10px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: center;
}

.hero__message {
  position: relative;
  max-width: 340px;
  margin-top: var(--space-10);
  padding: 20px 24px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.hero__message::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--color-bg-card);
  border-left: 1px solid rgba(12, 26, 75, 0.12);
  border-bottom: 1px solid rgba(12, 26, 75, 0.12);
  box-shadow: -2px 2px 4px rgba(50, 50, 71, 0.04);
}

.hero__message p { margin: 0; }

.hero__download {
  margin-top: var(--space-8);
  text-align: center;
}

/* Right column: cover */
.hero__right { flex-shrink: 0; }

.hero__cover {
  position: relative;
  width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-banner);
  background: var(--gradient-brand);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

@media (hover: hover) {
  .hero__cover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(33, 33, 33, 0.2);
  }
}

.hero__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hero cover — опційне MP4 поверх картинки-фолбеку.
   .hero__cover уже має position:relative + overflow:hidden.
   <img> завжди знизу; відео проявляється, коли повністю готове (canplaythrough). */
.hero__cover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero__cover-video.is-ready {
  opacity: 1;
}

/* Price Section */
.price-section {
  margin-top: 90px;
  padding-bottom: var(--space-20);
  text-align: center;
}

.price__card {
  width: 268px;
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: 0.4s;
}

@media (hover: hover) {
  .price__card:hover {
    background: var(--color-primary);
  }
  .price__card:hover .price__label,
  .price__card:hover .price__value,
  .price__card:hover .price__uah {
    color: #fff;
  }
}

.price__label {
  font-weight: var(--font-weight-semibold);
  font-size: 22px;
  line-height: 27px;
  color: var(--color-text);
  transition: color 0.4s;
}

.price__value {
  margin-top: var(--space-4);
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: 70px;
  line-height: 1;
  color: var(--color-primary);
  transition: color 0.4s;
}

.price__block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.price__includes {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.price__includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.price__includes li:last-child { margin-bottom: 0; }

.price__includes li::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Telegram CTA */
.btn-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 343px;
  height: 56px;
  padding: 16px 32px;
  background: var(--color-dark);
  box-shadow: var(--shadow-button);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base);
}

.btn-telegram:hover { background: var(--color-dark-hover); }

.btn-telegram span {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: 19px;
  color: #fff;
}

.btn-telegram img {
  width: 24px;
  height: 24px;
}

.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 343px;
  height: 56px;
  padding: 16px 32px;
  background: var(--color-primary);
  box-shadow: 0px 4px 15px var(--color-primary-glow);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-base);
}

.btn-buy:hover { background: var(--color-primary-hover); }

.btn-buy span {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  line-height: 19px;
  color: #fff;
}

/* Not About Section */
.not-about { margin-top: 90px; }

.not-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  max-width: 920px;
  margin: 0 auto;
}

.not-about__col {
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--color-bg-card);
  box-shadow: var(--shadow-card);
}

.not-about__col--yes {
  background: var(--color-bg-mint);
  border: 1px solid rgba(0, 191, 165, 0.18);
}

.not-about__label {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: var(--space-4);
  border-radius: 50px;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
}

.not-about__col--yes .not-about__label {
  color: #fff;
  background: var(--color-primary);
}

.not-about__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.not-about__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.not-about__list li:last-child { margin-bottom: 0; }

.not-about__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: var(--color-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.not-about__about {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.not-about__about b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

/* Insight / not-for / outcomes / diag-card → /resources/css/course.css */

/* For Whom Section */
.for-whom { margin-top: 90px; }

.for-whom h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-8);
}

.for-whom__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 620px;
}

.for-whom__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-text);
  margin-bottom: 14px;
}

.for-whom__list li:last-child { margin-bottom: 0; }

.for-whom__list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}


/* Lessons Section */
.lessons-section { margin-top: 90px; }

.lessons-section h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-10);
}

.lessons__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.lesson {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .lesson:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
}

.lesson__img {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lesson__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lessons__group-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: var(--space-5);
}

.lessons__group-label:first-child { padding-top: 0; }

.lessons__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-2);
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  padding: 2px 10px;
  position: relative;
  top: -1px;
}

.lessons__pill--free {
  background: var(--color-primary);
  color: #fff;
  top: -2px;
}

.lessons__pill--locked {
  background: var(--color-bg-muted);
  color: var(--color-text-hint);
  padding: 4px 7px;
}

.lessons__pill--locked svg { display: block; }

.lesson__info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.lesson__num {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-primary);
  flex-shrink: 0;
}

.lesson__text { min-width: 0; }

.lesson__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
}

.lesson__subtitle {
  margin-top: 2px;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* Reviews Section */
.reviews-section {
  margin: 100px auto 0;
  max-width: var(--container-max);
  width: 100%;
  overflow: clip;
}

@media only screen and (max-width: 1279.98px) {
  .reviews-section {
    max-width: 1279.98px;
  }
}

.reviews-section h2 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-2xl);
  line-height: 34px;
  color: var(--color-text);
  text-align: center;
}

/* ─── Horizontal review cards ─────────────────────────────────────────────── */
.reviews-h__slider {
  margin-top: var(--space-10);
  width: 100%;
}

.reviews-h__slider .swiper {
  margin-left: var(--container-padding);
  padding: var(--space-2) 0 var(--space-10);
}

.reviews-h__slider .swiper-scrollbar {
  background: none;
}

.reviews-h__slider .swiper-scrollbar .swiper-scrollbar-drag {
  background: var(--color-primary);
}

.reviews-h__slider .swiper .swiper-slide {
  width: 45% !important;
  height: 224px !important;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .reviews-h__slider .swiper .swiper-slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.reviews-h__slider .swiper .swiper-slide--personified .slide-photo {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
}

.reviews-h__slider .swiper .swiper-slide--personified .slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.reviews-h__slider .swiper .swiper-slide--personified .review-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-brand);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: #fff;
}

.reviews-h__slider .swiper .swiper-slide--personified .slider-wrap {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border-card);
  overflow: hidden;
}

.reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-name {
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  line-height: 19px;
  color: var(--color-text);
}

.reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-descr {
  margin-top: 3px;
  font-size: 12px;
  line-height: 14px;
  color: var(--color-text-muted);
}

.reviews-h__slider .swiper .swiper-slide--personified .slider-wrap hr {
  margin: var(--space-3) 0;
  border: 0;
  border-top: 1px solid var(--color-primary);
  flex-shrink: 0;
}

.reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-text {
  font-size: 13px;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.reviews-h__slider .swiper .swiper-slide--screenshot {
  flex-direction: row;
  justify-content: flex-start;
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-body {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-body::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: var(--ss-bg, transparent) center / cover no-repeat;
  filter: blur(24px);
  opacity: 0.35;
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption {
  flex-shrink: 0;
  width: 176px;
  padding: var(--space-4);
  border-left: 1px solid var(--color-border-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-bg-card);
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption__name {
  display: block;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-md);
  line-height: 19px;
  color: var(--color-text);
}

.reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption__job {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 14px;
  color: var(--color-text-muted);
}

@media only screen and (max-width: 1279.98px) {
  .reviews-h__slider .swiper { margin-left: var(--space-4); }
  .reviews-h__slider .swiper .swiper-slide { width: 76% !important; height: 200px !important; }
  .reviews-h__slider .swiper .swiper-slide--personified .slide-photo { width: 190px; }
  .reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption { width: 148px; }
}

@media only screen and (max-width: 743.98px) {
  .reviews-h__slider .swiper { margin-left: 0; padding: var(--space-2) var(--space-4) var(--space-10); }
  .reviews-h__slider .swiper .swiper-slide { width: 100% !important; height: 200px !important; }
  .reviews-h__slider .swiper .swiper-slide--personified .slide-photo { width: 110px; }
  .reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption { width: 130px; padding: var(--space-3); }
  .reviews-h__slider .swiper .swiper-slide--personified .slider-wrap { padding: var(--space-3) var(--space-4); }
  .reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-name { font-size: 14px; }
  .reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-descr { font-size: 11px; }
  .reviews-h__slider .swiper .swiper-slide--personified .slider-wrap .slider-text { font-size: 11px; -webkit-line-clamp: 8; }
  .reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption__name { font-size: 14px; }
  .reviews-h__slider .swiper .swiper-slide--screenshot .screenshot-caption__job { font-size: 11px; }
}

/* Responsive - Tablet */
@media only screen and (max-width: 1279.98px) {
  .hero { margin-top: 20px; }

  .hero__titles h1 {
    font-size: 32px;
    line-height: 38px;
  }

  .hero__subtitle { font-size: var(--text-md); }

  .hero__row { gap: var(--space-8); }

  .hero__photo img {
    width: 140px;
    height: 140px;
    padding: 5px;
  }

  .hero__message {
    max-width: 260px;
    font-size: 14px;
  }

  .hero__cover { width: 240px; }

  .not-about { margin-top: 56px; }
  .not-about__col { padding: var(--space-6); }
  .not-about__about { font-size: var(--text-md); }

  .insight { margin-top: var(--space-12); }
  .insight__card { padding: var(--space-8) var(--space-6); }
  .insight__lead { font-size: var(--text-xl); }
  .insight__body { font-size: var(--text-md); }

  .for-whom { margin-top: 56px; }

  .for-whom h2 {
    font-size: var(--text-xl);
    line-height: 29px;
  }

  .for-whom__list li { font-size: var(--text-base); }

  .outcomes { margin-top: 56px; }
  .outcomes h2 {
    font-size: var(--text-xl);
    line-height: 29px;
    margin-bottom: var(--space-6);
  }
  .outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .outcome { padding: var(--space-5); }

  .diag-card { margin-bottom: var(--space-8); }
  .diag-card__head { padding-top: var(--space-6); }
  .diag-card__body {
    grid-template-columns: 1fr 1px 1fr;
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
  .diag-card__col { padding: 0 var(--space-3); }
  .diag-card__sym {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }
  .diag-card__text { font-size: var(--text-md); }

  .lessons-section { margin-top: 56px; }

  .lessons-section h2 {
    font-size: var(--text-xl);
    line-height: 29px;
    margin-bottom: var(--space-6);
  }

  .lessons__grid { gap: var(--space-3); }

  .lesson__num { font-size: 20px; }
  .lesson__title { font-size: 14px; }
  .lesson__subtitle { font-size: 12px; }

  .price-section { margin-top: 56px; }

  .reviews-section { margin-top: 64px; }

  .reviews-section h2 {
    font-size: var(--text-xl);
    line-height: 29px;
  }

}

/* Responsive - Mobile */
@media only screen and (max-width: 743.98px) {
  .hero { margin-top: var(--space-4); }

  .hero__titles { margin-bottom: var(--space-8); }

  .hero__titles h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .hero__subtitle { font-size: 14px; }

  .hero__badge {
    font-size: 14px;
    padding: var(--space-2) 18px;
  }

  .hero__row {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-8);
  }

  .hero__author { gap: var(--space-3); }

  .hero__photo img {
    width: 96px;
    height: 96px;
    padding: 4px;
  }

  .hero__author-name { font-size: 14px; }

  .hero__message {
    max-width: none;
    flex: 1;
    font-size: 13px;
    padding: var(--space-3) 14px;
    line-height: 1.4;
    margin-top: 0;
  }

  .hero__message::before {
    top: 50%;
    left: -6px;
    transform: translateY(-50%) rotate(45deg);
    border-left: 1px solid rgba(12, 26, 75, 0.12);
    border-bottom: 1px solid rgba(12, 26, 75, 0.12);
    border-top: none;
    border-right: none;
    box-shadow: -2px -2px 4px rgba(50, 50, 71, 0.04);
  }

  .hero__cover {
    width: 240px;
    border-radius: var(--radius-xl);
  }

  .not-about { margin-top: var(--space-10); }
  .not-about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .not-about__col { padding: var(--space-5); }
  .not-about__about { font-size: var(--text-base); }
  .not-about__list li { font-size: 14px; }

  .insight { margin-top: var(--space-10); }
  .insight__card {
    padding: var(--space-8) var(--space-5);
  }
  .insight__card::before {
    width: 44px;
    height: 44px;
    font-size: 44px;
    padding-top: 12px;
    top: -22px;
  }
  .insight__lead { font-size: var(--text-lg); }
  .insight__body { font-size: var(--text-base); padding-inline: 24px; }

  .for-whom { margin-top: var(--space-10); }

  .for-whom h2 {
    font-size: 22px;
    margin-bottom: var(--space-6);
  }

  .for-whom__list li {
    font-size: 14px;
    margin-bottom: var(--space-3);
    gap: 10px;
  }

  .not-for {
    margin-top: var(--space-6);
  }
  .not-for__list li { font-size: 14px; }

  .outcomes { margin-top: var(--space-10); }
  .outcomes h2 {
    font-size: 22px;
    margin-bottom: var(--space-5);
  }
  .outcomes__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .outcome { padding: var(--space-4); }
  .outcome__title { font-size: 14px; }
  .outcome__text { font-size: 12px; }

  .diag-card { margin-bottom: var(--space-6); }
  .diag-card__head { padding: var(--space-5) var(--space-4) 0; }
  .diag-card__body {
    grid-template-columns: 1fr;
    padding: var(--space-4) var(--space-4) var(--space-5);
    gap: var(--space-5);
  }
  .diag-card__col { padding: 0; }
  .diag-card__divider {
    width: auto;
    height: 1px;
    margin: 0 var(--space-8);
    background: linear-gradient(90deg,
      transparent 0%,
      var(--color-border) 20%,
      var(--color-border) 80%,
      transparent 100%);
  }
  .diag-card__sym {
    width: 44px;
    height: 44px;
    font-size: 24px;
    margin-bottom: var(--space-2);
  }
  .diag-card__person { font-size: 14px; }
  .diag-card__text { font-size: 14px; }
  .diag-card__foot { padding: var(--space-4); }
  .diag-card__foot span {
    font-size: 13px;
    display: inline-block;
  }

  .for-whom__list li::before {
    width: 16px;
    height: 16px;
    background-size: 10px;
  }

  .lessons-section { margin-top: var(--space-10); }

  .lessons-section h2 {
    font-size: 22px;
    margin-bottom: var(--space-5);
  }

  .lessons__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lesson {
    padding: 10px;
    gap: var(--space-3);
  }

  .lesson__img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }

  .lesson__num { font-size: 18px; }
  .lesson__title { font-size: 14px; }
  .lesson__subtitle { font-size: 12px; }

  .lessons__group-label {
    font-size: 12px;
    padding-top: var(--space-3);
  }

  .price-section { margin-top: var(--space-12); }

  .price__block {
    flex-direction: column;
    gap: var(--space-6);
  }

  .price__includes { text-align: left; }

  .price__card {
    width: 100%;
    max-width: 260px;
  }

  .price__value { font-size: 36px; }

  .btn-telegram,
  .btn-buy {
    width: 100%;
    max-width: 320px;
  }

}

.price__uah {
  font-size: 14px;
  font-weight: 500;
  color: #999;
  margin-top: 4px;
}


/* =============================================================================
   GUARANTEE — спільний блок «Безумовна гарантія» (після відгуків)
   Дизайн-мова інсайт-картки: radius-2xl, плаваюча градієнт-іконка (shield-check),
   gradient-em акцент, кутовий маскот. Розмітка: course/components/guarantee.php
   ============================================================================= */
.guarantee {
  margin-top: var(--space-25);
  /* padding-top тримає плаваючу іконку всередині .wrapper__container
     (overflow:clip), коли блок гарантії — перший у контейнері */
  padding-top: var(--space-10);
  position: relative;
}

.guarantee__card {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-10) var(--space-10);
  border-radius: var(--radius-2xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-card);
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
}

.guarantee__card::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-button);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' fill-rule='evenodd'%3E%3Cpath d='M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41-5.65 5.66z'/%3E%3C/svg%3E") center / 30px 30px no-repeat,
    var(--gradient-brand);
}

/* Clip-обгортка кутового маскота (повторює форму картки) */
.guarantee__mascot-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.guarantee__lead {
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.guarantee__text {
  max-width: 560px;
  margin: 0 auto;
}

.guarantee__text p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.guarantee__text p + p {
  margin-top: var(--space-4);
}

.guarantee__text em {
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.guarantee__note {
  max-width: 620px;
  margin: var(--space-6) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.guarantee__note-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

@media only screen and (max-width: 1279.98px) {
  .guarantee { margin-top: var(--space-12); padding-top: var(--space-8); }

  .guarantee__card {
    padding: var(--space-10) var(--space-6) var(--space-8);
  }

  .guarantee__lead { font-size: var(--text-xl); }

  .guarantee__text p { font-size: var(--text-base); }
}