/* ==========================================================================
   Подписка — pricing cards, gift banner, steps
   ========================================================================== */

.page-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  text-align: center;
  background: var(--color-sand);
}

.page-hero h1 {
  max-width: 20ch;
  margin-inline: auto;
}

.page-hero p {
  margin-top: var(--space-sm);
  font-size: var(--fs-body-lg);
  color: var(--color-ember-60);
  max-width: 46ch;
  margin-inline: auto;
}

/* ---------- Pricing cards ---------- */

.plans {
  background: var(--color-mist);
}

.plans__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: stretch;
}

@media (min-width: 860px) {
  .plans__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-white);
  border: 1px solid var(--color-ember-12);
  border-radius: var(--radius-lg);
  position: relative;
}

.plan-card--featured {
  background: var(--gradient-dawn);
  border: none;
  color: var(--color-white);
  box-shadow: var(--shadow-lift);
  transform: scale(1.03);
}

.plan-card__badge {
  position: absolute;
  top: -14px;
  left: var(--space-lg);
  background: var(--color-ember);
  color: var(--color-white);
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-pill);
}

.plan-card__term {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.plan-card__savings {
  font-size: var(--fs-body-sm);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.plan-card--featured .plan-card__savings {
  color: rgba(255, 255, 255, 0.85);
}

.plan-card:not(.plan-card--featured) .plan-card__savings {
  color: var(--color-terracotta-rose);
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: var(--space-md);
}

.plan-card__price-value {
  font-family: var(--font-display);
  font-size: 2.75rem;
}

.plan-card__price-period {
  font-size: var(--fs-body-sm);
  opacity: 0.75;
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: var(--space-lg);
  flex-grow: 1;
}

.plan-card__features li {
  display: flex;
  gap: 0.6rem;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
}

.plan-card__features li::before {
  content: '✓';
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-marigold);
}

.plan-card--featured .plan-card__features li::before {
  color: var(--color-white);
}

.plan-card .btn {
  width: 100%;
}

.plan-card--featured .btn-primary {
  background: var(--color-white);
  color: var(--color-marigold);
  box-shadow: none;
}

/* ---------- Gift / Подвешенная йога ---------- */

.gift-banner {
  background: var(--color-terracotta-rose);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-white);
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

@media (min-width: 780px) {
  .gift-banner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.gift-banner h3 {
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.gift-banner p {
  color: rgba(255, 255, 255, 0.88);
  line-height: var(--lh-normal);
  max-width: 56ch;
}

.gift-banner .btn {
  background: var(--color-white);
  color: var(--color-terracotta-rose);
  white-space: nowrap;
}

/* ---------- Steps ---------- */

.steps {
  background: var(--color-sand);
}

.steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: step;
}

@media (min-width: 700px) {
  .steps__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  text-align: left;
}

.step__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--color-marigold);
  opacity: 0.5;
  margin-bottom: 0.4rem;
}

.step__title {
  font-weight: 700;
  font-size: var(--fs-body-lg);
}

/* ==========================================================================
   Блок тарифов на главной (#podpiska)
   ========================================================================== */

/*
 * Две карточки вместо трёх — на лендинге показываем только месяц и три месяца.
 * Полугодовой тариф остался в кабинете, на экране выбора после оформления:
 * третья карточка на этом экране удлиняла выбор, ничего к нему не добавляя.
 *
 * Правила ниже нарочно привязаны к .plans__grid--two, а не к .plan-card:
 * на podpiska.html та же вёрстка с тремя карточками, и её трогать незачем.
 */

/* Блоки на сайте чередуют фон; у соседей mist — здесь sand (#F5EDE2). */
#podpiska {
  background: var(--color-sand);
}

.plans__grid--two {
  /* Шире, чем было: длинные строки переносились по три раза и раздували
     карточку в высоту — а высота здесь и была главной бедой. */
  max-width: 980px;
  margin-inline: auto;
  /* Бейдж «Выгоднее» висит на top:-14px, да ещё карточка увеличена
     на 3% — без отступа он наезжал на подзаголовок секции. */
  margin-top: var(--space-lg);
}

@media (min-width: 760px) {
  .plans__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Компактнее по вертикали: те же семь пунктов, но без лишнего воздуха. */
.plans__grid--two .plan-card {
  padding: var(--space-md);
}

.plans__grid--two .plan-card__term {
  font-size: 1.3rem;
}

.plans__grid--two .plan-card__price {
  margin-bottom: var(--space-sm);
}

.plans__grid--two .plan-card__price-value {
  font-size: 2.25rem;
}

.plans__grid--two .plan-card__features {
  gap: 0.5rem;
  margin-bottom: var(--space-md);
}

/* Телефон: карточка занимает всю ширину экрана, и всё лишнее в ней
   читается как массивность. */
@media (max-width: 759px) {
  /* scale(1.03) растягивает выделенную карточку в обе стороны —
     на узком экране она вылезает за край контейнера. */
  .plans__grid--two .plan-card--featured {
    transform: none;
  }

  .plans__grid--two .plan-card {
    padding: var(--space-sm) var(--space-md);
  }

  .plans__grid--two .plan-card__term {
    font-size: 1.8rem;
  }

  .plans__grid--two .plan-card__price-value {
    font-size: 2rem;
  }

  .plans__grid--two .plan-card__features {
    gap: 0.4rem;
  }

  .plans__grid--two .plan-card__features li {
    font-size: 0.875rem;
  }

  /* Срок и цена — одной строкой: срок слева, цена прижата вправо.
     В колонку они съедали верх карточки, а цена — главное, что человек
     ищет глазами, и ей место на одной высоте с названием тарифа.
     Делаем сеткой, а не правкой разметки: на podpiska.html та же вёрстка. */
  .plans__grid--two .plan-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "term     price"
      "features features"
      "cta      cta";
    align-items: center;
    column-gap: var(--space-sm);
  }

  .plans__grid--two .plan-card__term {
    grid-area: term;
    margin-bottom: 0;
  }

  .plans__grid--two .plan-card__price {
    grid-area: price;
    justify-self: end;
    margin-bottom: 0;
  }

  .plans__grid--two .plan-card__features {
    grid-area: features;
    margin-top: var(--space-sm);
  }

  /* Отступ от подзаголовка секции. На компьютере он большой, потому что
     бейдж выделенной карточки висит над её верхним краем. На телефоне
     карточки идут стопкой, бейдж оказывается у второй, и ему хватает
     промежутка между карточками — а сверху эта пустота лишняя.
     Задавать его у сетки бесполезно: рядом стоит .section-head со своим
     нижним отступом, соседние отступы схлопываются в больший из двух. */
  #podpiska .section-head {
    margin-bottom: var(--space-sm);
  }

  .plans__grid--two {
    margin-top: var(--space-sm);
  }

  .plans__grid--two .plan-card .btn {
    grid-area: cta;
  }

  /* Период рядом с ценой был почти неразличим. */
  .plans__grid--two .plan-card__price-period {
    font-size: var(--fs-body);
    opacity: 0.85;
  }
}