/* ==== Баннер со скидкой ====================================================
   Подключается только с /next/ — на живой странице этого файла нет.

   Цвета берутся из переменных лендинга. Своя здесь одна — янтарь: он уже есть
   на сайте (им нарисованы звёзды в отзывах), и это единственное место, где
   уместен не брендовый синий: срочность и «нажми» — разные сообщения, и если
   отсчёт покрасить в синий, он сольётся с кнопками.
   =========================================================================== */
:root {
  /* Зелёный — тот же, что у живого индикатора в шапке лендинга. Для ТЕКСТА он
     не годится: 1.6:1 на белом. Поэтому цвета два — светлый для точки и
     тёмный для цифр, 5.4:1. */
  --promo-live: #4ee96d;
  --promo-live-ink: #177a34;
}

.promo {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  /* Уже, чем было (372): заголовок в две строки не добирал до правого края, и
     справа оставалась пустая колонка. На 330 строки заполняются целиком. */
  width: 330px; max-width: calc(100vw - 32px);
  padding: 18px 18px 16px;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(20,20,20,.06), 0 24px 60px rgba(20,20,20,.18);
  transform: translateY(18px); opacity: 0; pointer-events: none;
  transform-origin: 100% 100%;
  transition: transform .42s cubic-bezier(.22,.8,.28,1), opacity .32s ease;
}
.promo.is-in { transform: none; opacity: 1; pointer-events: auto; }

/* Под курсором карточка подрастает — еле заметно, на 3%.

   transform-origin задан НЕ в :hover, а на самой карточке, и это не мелочь:
   когда он стоял только в правиле наведения, при уходе курсора точка отсчёта
   мгновенно возвращалась в центр, а масштаб в это время ещё уезжал обратно —
   карточка дёргалась вбок. Свойство должно быть одним и тем же в обоих
   состояниях, тогда возврат идёт ровно по той же дуге, что и рост.

   Угол выбран нижний правый, потому что карточка прижата к этому углу экрана:
   растёт она вверх и влево, в пустое место, а не за границу окна.

   Только для настоящего курсора: на тач-экранах :hover прилипает после
   касания, и карточка осталась бы увеличенной. */
@media (hover: hover) and (pointer: fine) {
  .promo.is-in:hover { transform: scale(1.03); }
}
.promo__top { display: flex; align-items: center; margin-bottom: 8px; padding-right: 28px; }
@keyframes promoPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(78,233,109,.34); }
  50%      { box-shadow: 0 0 0 7px rgba(78,233,109,.12); }
}
/* Верхняя строка — цены, мелко. Отсчёта в баннере нет намеренно: пока человек
   не согласился, торопить его нечем, а таймер над предложением превращает его
   в давление. Отсчёт появляется после нажатия и уже в карточке тарифа, где
   решается покупка. */
.promo__old {
  font-weight: 700; font-size: 13px; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  font-variant-numeric: tabular-nums;
}
.promo__new {
  margin-left: 7px;
  font-weight: 800; font-size: 13px; letter-spacing: -.1px;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.promo__x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 17px; cursor: pointer;
}
.promo__x:hover { background: rgba(18,18,18,.06); color: var(--text); }
.promo__title {
  margin: 0 0 14px;
  font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -.66px;
  text-wrap: balance; color: var(--text);
}

.promo__form { display: flex; gap: 8px; }
.promo__input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-weight: 600; font-size: 14px; line-height: 20px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(18,18,18,.16); background: var(--white); color: var(--text);
}
.promo__input::placeholder { color: var(--muted); font-weight: 600; }
.promo__input[aria-invalid="true"] { border-color: #d93025; }
/* Поле и кнопка ниже, чем кнопки на странице: в углу экрана карточка не должна
   спорить по весу с настоящими кнопками покупки. Высота у обоих одна — 38px.

   И без внутренних теней. У .btn--dark их четыре — светлая сверху, тёмная
   снизу, по светлой с боков; на большой кнопке это объём, а на 38 пикселях
   превращается в скос, из-за которого кнопка выглядит кривой. Скругление тоже
   своё: 16px на такой высоте — не капсула, а прямоугольник с уголками. */
.promo__go {
  white-space: nowrap; font-size: 14px; line-height: 20px; padding: 7px 18px;
  border-radius: 999px; box-shadow: none;
}
.promo__go:hover { box-shadow: none; background: #333; }
.promo__err {
  display: none; margin: 8px 0 0; font-weight: 700; font-size: 12.5px; color: #c5221f;
}
.promo.has-err .promo__err { display: block; }




@media (prefers-reduced-motion: reduce) {
  .promo { transition: none; }
  .promo.is-in:hover { transform: none; }
}
/* На телефоне внизу уже стоит плавающая кнопка загрузки (.mobile-dl: высота
   54, отступ снизу 18, z-index 90). Карточка на 16 пикселях от низа легла бы
   ровно под неё — кнопка закрыла бы «Claim it». Поэтому карточка встаёт НАД
   ней: 18 + 54 + 12 зазора = 84. Порог тот же, что у самой кнопки (768), а не
   свой собственный — иначе между 720 и 768 они снова встретятся. */
/* On a phone the card does not sit ABOVE the floating button, it REPLACES it.
   Stacking them cost 140 vertical pixels of a 812-pixel screen and asked the
   reader to choose between two dark rounded things at once; and the card is
   the one with something to say. It takes the button's exact resting place, so
   the swap reads as the same object changing rather than two arriving. */
@media (max-width: 768px) {
  .promo { left: 12px; right: 12px; bottom: 18px; width: auto; padding: 16px 16px 14px; }
  .promo__title { font-size: 20px; letter-spacing: -.6px; }
  body:has(.promo.is-in) .mobile-dl {
    opacity: 0; transform: translateY(26px); pointer-events: none;
  }
}

/* ==== Смена цены в карточке тарифа =========================================
   Нажатие на «Claim it» происходит на глазах у человека — блок цен к этому
   моменту уже на экране, — поэтому цена не должна подменяться беззвучно.

   Зачёркнутая цена появляется слева направо через clip-path: подрезается вся
   строка целиком, вместе с линией зачёркивания, и это читается как «черту
   проводят прямо сейчас». Само свойство text-decoration анимировать нельзя,
   а рисовать линию отдельным элементом ради этого не стоит.

   Вспышка карточки — тот же самый ::after, что зажигается при наведении:
   отдельного эффекта не изобретаем, у него уже есть свой переход в .6s, так
   что класс достаточно снять — и свечение погаснет само.
   =========================================================================== */
@keyframes promoWasIn {
  from { clip-path: inset(0 100% 0 0); opacity: .15; }
  to   { clip-path: inset(0 0 0 0);    opacity: .55; }
}
@keyframes promoNowIn {
  from { opacity: 0; transform: translateY(7px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.plan__price-was.is-drawing { animation: promoWasIn .5s cubic-bezier(.22,.8,.28,1) both; }
[data-price-now].is-new { animation: promoNowIn .42s cubic-bezier(.22,.8,.28,1) .1s both; }
.plan--pro.is-flash::after { opacity: 1; }

/* Пока идёт отсчёт — то же свечение, что при наведении, и та же его пульсация
   (proGlowPulse из styles.css). Своей анимации не завожу: это должно читаться
   как «карточка под курсором», а не как второй, незнакомый эффект.

   Наведение при этом ничего не ломает: правило то же самое, значения те же,
   и переход от «дышит само» к «дышит под курсором» незаметен. */
.plan--pro.is-live::after {
  opacity: 1;
  animation: proGlowPulse 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .plan--pro.is-live::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .plan__price-was.is-drawing, [data-price-now].is-new { animation: none; }
}

/* Плашка тарифа на время скидки показывает отсчёт — в голубом, том же, что у
   зачёркнутой цены рядом: одна скидка, один цвет.

   Ровно как у зачёркнутой цены не вышло, и вот почему. Она нарисована accent
   при 55% прозрачности, то есть поверх голубой карточки даёт #93caff. Плашка
   же стоит на БЕЛОЙ подложке, и тот же цвет дал бы контраст 1.7 — цифры
   пришлось бы угадывать. Поэтому текст взят чистым accent (2.8), а точка —
   accent-ink, она темнее, как и просили, и заодно вытягивает читаемость
   метки. Оба ниже нормы 4.5 для текста такого кегля: это осознанный выбор
   цвета в пользу единства со скидкой, но, если на экране покажется бледно,
   темнее делается одной строкой. */
.plan__badge--timer {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.plan__badge--timer::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-ink); box-shadow: 0 0 0 4px rgba(59,158,255,.26);
  animation: promoBlink 2.6s ease-in-out infinite;
}
@keyframes promoBlink {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59,158,255,.30); }
  50%      { box-shadow: 0 0 0 7px rgba(59,158,255,.10); }
}
@media (prefers-reduced-motion: reduce) {
  .plan__badge--timer::before { animation: none; }
}

/* Подпись под капсулой. Тем же голубым, что и отсчёт в ней: это одна вещь,
   разнесённая на две строки, а не две разные. По центру капсулы, а не по её
   правому краю — капсула сама себе ось, и подпись должна висеть под её
   серединой; и верх, и центр ставит скрипт, потому что размеры капсулы
   зависят от языка. */
.plan__offer {
  position: absolute; transform: translateX(-50%);
  font-weight: 700; font-size: 12px; letter-spacing: -.2px;
  color: var(--accent); text-align: center; white-space: nowrap;
  pointer-events: none;
}

/* Мягкий диагональный блик, время от времени пробегающий по кнопке. Держится
   на маске из самой кнопки (overflow:hidden + скруглённая форма), так что за
   капсулу он не вылезает.

   Пауза длиннее самого блика в десять раз: пробег в 1.1 секунды раз в
   двенадцать — это напоминание, а не мигалка. Полоса широкая и полупрозрачная,
   поэтому читается как отблеск на поверхности, а не как белая черта. */
.promo__go { position: relative; overflow: hidden; }
.promo__go::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; width: 42%;
  left: -60%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  animation: promoSheen 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes promoSheen {
  0%, 91%  { left: -60%; }
  100%     { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .promo__go::after { animation: none; opacity: 0; }
}