/* ---------- Главная кнопка ----------
   Одна на весь сайт: «Попробовать», «Пробный доступ» в шапке, подвале и
   мобильном меню, «Выбрать тариф» у Label, «Получить» в форме.
   Таблетка с фирменным градиентом, справа тёмный круг с шевроном.
   Свечение при наведении — общее правило из styles.css (Figma, Hover Button).
   Файл подключается последним: двойной класс перекрывает старые стили кнопок,
   а размеры и расположение каждой кнопки остаются из её собственных правил.
   Отступы в em — круг и поля масштабируются вместе с кеглем кнопки. */

.cta.cta {
  --chip-inset: .3em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* справа — место под круг: он почти во всю высоту кнопки */
  padding: 0 3.25em 0 1.5em;
  border: 0;
  border-radius: 999px;
  color: #2a1a6e;
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  white-space: nowrap;
}

.cta.cta > span:not(.cta__chip) { color: inherit; }

/* Круг позиционируется от кнопки; у пункта мобильного меню своего position не было. */
.cta.mobile-menu__trial { position: relative; }

/* Круг над свечением (::after), иначе при наведении он осветлялся бы вместе с кнопкой. */
.cta__chip {
  position: absolute;
  z-index: 1;
  top: var(--chip-inset);
  right: var(--chip-inset);
  bottom: var(--chip-inset);
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: #2a1a6e;
  color: #efe2ff;
}

/* Старые правила вида «.primary-cta span» красили бы и круг — он тоже span. */
.cta.cta .cta__chip { color: #efe2ff; font-size: inherit; }

.cta__chip svg {
  width: 46%;
  height: 46%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 640ms cubic-bezier(.16, 1, .3, 1);
}

.cta:is(:hover, :focus-visible) .cta__chip svg { transform: translateX(14%); }

/* Кнопка в шапке — компактная, размером как прежняя: поля уже,
   круг чуть меньше относительно высоты. */
.cta.trial {
  --chip-inset: .28em;
  padding: 0 2.75em 0 .9em;
  font-size: 1.0417cqw;
}

@media (max-width: 1023px) {
  .cta.trial { font-size: 14px; }
}

/* Вторичные кнопки (серые) — той же формы, что и главная. */
.plan__button,
.mobile-menu__login { border-radius: 999px; }

/* Десктоп: у кнопок шапки и первого экрана была фиксированная ширина
   под текст с молнией — теперь ширина по содержимому. */
@media (min-width: 1024px) {
  .cta.trial {
    width: auto;
    /* Ниже главных кнопок страницы, кегль — как у «Войти» и кнопок тарифов. */
    --chip-inset: .2em;
    height: 2.3611cqw;
    padding: 0 2.45em 0 .8em;
    font-size: 1.1111cqw;
  }

  /* Пара «Войти» + кнопка прижата к правому краю, между ними воздух. */
  .account {
    justify-content: flex-end;
    gap: .8333cqw;
  }

  .cta.primary-cta {
    left: 50%;
    width: auto;
    font-size: 1.3889cqw;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta__chip svg { transition: none; }
}