/* home.css — стили ТОЛЬКО главной страницы (index.html).
   Самодостаточный файл: styles.css на главной не подключается, чтобы новый дизайн
   не воевал с каскадом общего файла. Все классы/id, на которые опирается script.js
   (модалки, чат-виджет, .reveal, .open-modal.loading, .buy-error, .faq-item.open,
   .pricing-grid .pricing-card), описаны здесь. Другие страницы файл не трогают.

   Система (общая с кабинетом партнёра):
   поверхности  --bg → --bg-2 (alt-секции, шапка) → --surface (карточки) → --surface-2 (hover/вложенное) → --surface-3;
   линии        --line-in .05 (внутри карточек) · --line .07 (границы карточек) · --line-2 .12 (hover, секции);
   акцент       --acc = только «действие» (кнопки, чекмарки, фокус); синий — только в градиенте знака и марке Gemini;
   радиусы      8 (мелкие тайлы) · 10 (кнопки, поля, plan-mark) · 16 (карточки) · 20 (модалки, чат);
   шрифт        Inter, кегли 12(caps)/13/14/15/16/17/20/24/40/54, интерлиньяж на 4pt-сетке. */

@font-face { font-family: 'Inter'; src: url('fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* ── Палитра BananPay ─────────────────────────────────────────────────────
     Пропорции экрана из брендбука: Sand ≈58%, Paper ≈24%, Ink ≈12%,
     Banana ≈5%, Signal ≈1%. Жёлтый — только заливка, никогда текст. */
  /* Спека сайта: бумага — основной фон, песок — каждая вторая секция,
     карточки белые. Третьей поверхности на странице нет. */
  --bg: #FAF7F0;              /* Paper — фон страницы */
  --bg-2: #F3F0E9;            /* Sand — альтернативная секция */
  --surface: #FFFFFF;         /* карточки */
  --surface-2: #F3F0E9;
  --surface-3: #F3F0E9;
  --input: #FFFFFF;
  --card-hi: var(--card-hi);   /* единственная выделенная карточка */
  --line-in: rgba(20,18,14,.06);
  --line: rgba(20,18,14,.10);
  --line-2: rgba(20,18,14,.18);
  --tx: #14120E;              /* Ink */
  --tx-2: rgba(20,18,14,.72);
  --tx-3: rgba(20,18,14,.55);
  --mut-2: rgba(20,18,14,.42);

  /* Акцент разведён по ролям: заливка — банановая, акцентный ТЕКСТ — Signal.
     Жёлтые буквы на светлом читаются с контрастом 1.4:1 и запрещены. */
  --acc: #FFC61E;             /* Banana — фон кнопок, заливки, звёзды */
  --acc-2: #F0B60A;           /* Signal — ссылки и акцентные подписи, ≤5% площади */
  --acc-3: #F0B60A;           /* Banana hover */
  --acc-ink: #14120E;         /* текст на банановом */
  --acc-soft: rgba(255,198,30,.20);
  --acc-line: rgba(20,18,14,.18);

  --danger: #C7402B;
  --star: #FFC61E;

  /* Радиусы бренда: поле 11, кнопка 13, блок 18, карточка 22. */
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 18px;
  --card-pad: 24px;

  /* Теней у бренда почти нет: только оверлеи и модалки. Карточки держатся
     на границе и разнице Paper/Sand, а не на тени. */
  --shadow-card: none;
  --shadow-float: none;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.3,0,.25,1);
  --header-h: 64px;

  --ease-out: cubic-bezier(.3,0,.25,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --dur-1: .16s;
  --dur-2: .12s;
  --grad-acc: #FFC61E;        /* градиентов у бренда нет — плоская заливка */
  --sh-acc: none;             /* и свечений тоже */
  --sh-acc-hover: none;
  --sh-lift: none;
  --glass: rgba(20,18,14,.04);
  --glass-hover: rgba(20,18,14,.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  background: var(--bg);
  color: var(--tx);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; font-feature-settings: inherit; }
img, svg { display: block; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
h3, h4 { letter-spacing: -.015em; }
.hero-sub, .section-header p, .step p, .safety-item p, .plan-features li, .review-text, .guarantee p, .faq-answer > p, .cta-card p, .footer-brand p, .trust-oferta { text-wrap: pretty; }
.icn { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.m-only { display: none; }

/* Атрибут hidden обязан побеждать любой display у компонента: скрытый элемент,
   оставшийся на экране, — это уже не косметика, а сломанная логика окна. */
[hidden] { display: none !important; }

/* Спека: экран 1280, контейнер 1136, поля 72. */
/* Контейнер растёт до 1360 и центрируется: на широком мониторе полоса
   контента у левого края читается как ошибка вёрстки. */
.container { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); }
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
/* «Смотреть тарифы» ведёт к самой сетке тарифов (секция #pricing начинается с первого экрана) */
#plans { scroll-margin-top: calc(var(--header-h) + 20px); }

/* ---------- Кнопки ----------
   primary  — многослойная: градиент 135°, верхний блик 1px, тень цвета акцента; hover — подъём + блик-шиммер (::before,
              один проезд за 600 мс); active — scale(.98) за 80 мс; disabled — приглушение без тени.
   secondary — стекло: rgba .04 + hairline + blur 8px; hover — светлее фон и рамка.
   ::after занят спиннером «.loading» (script.js), поэтому шиммер живёт в ::before. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 24px; border-radius: 12px; border: 0;
  font-family: var(--font-text, Manrope, sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: -.005em; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums; word-spacing: -.06em;
  text-decoration: none !important;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
  position: relative; isolation: isolate; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn > svg { transition: transform var(--dur-2) var(--ease-out); }
.btn-primary {
  /* Плоская банановая заливка: у бренда нет ни градиентов, ни свечений. */
  background: var(--acc); color: var(--acc-ink);
  box-shadow: none;
}
.btn-primary::before { content: none; }
.btn-secondary { background: transparent; color: var(--tx);
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); }
.btn-ghost { background: transparent; color: var(--tx-2); border-color: transparent; }
@media (hover: hover) {
  /* Только смена цвета фона — ни подъёма, ни тени, ни блика. */
  .btn-primary:hover { background: var(--acc-3); }
  .btn-secondary:hover { background: var(--glass); }
  .btn-ghost:hover { color: var(--tx); background: var(--glass); }
  .btn:hover > svg { transform: translateX(2px); }
  .btn:hover > .icn-x { transform: rotate(90deg); }
}
@keyframes btn-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.btn-primary:active, .btn-secondary:active { transform: scale(.98); transition-duration: .08s; }
.btn-primary:active { background: #E0A800; box-shadow: none; }
.btn-secondary:active { background: var(--glass); }
.btn[disabled] { background: var(--surface-3); color: var(--tx-3); box-shadow: none; cursor: default; transform: none; filter: none; }
.btn[disabled]::before { display: none; }
/* «Открываем оплату»: кнопка НЕ сереет и не исчезает в карточке — сохраняет свой вариант (градиент / стекло),
   лишь приглушается; текст прячем (color: transparent), спиннер — по центру, а не поверх «₽» */
.btn.loading { color: transparent !important; cursor: default; transform: none !important; box-shadow: none !important; text-shadow: none; }
.btn.loading::before { display: none; }
.btn-primary.loading { filter: saturate(.55) brightness(.9); }
.btn-secondary.loading { background: var(--glass); border-color: var(--line-2); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
/* Подбор тарифа доступен всегда: окно само встречает только новичка, а этой
   кнопкой его можно открыть повторно. */
.sec-quiz { margin-top: 16px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-full { width: 100%; }
.btn:focus-visible, .faq-question:focus-visible, .modal-close:focus-visible, .chat-toggle:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--acc-2); outline-offset: 2px; box-shadow: none;
}

/* «Открываем оплату»: класс .loading ставит script.js на все .open-modal разом (какая кнопка нажата — CSS не знает,
   решение «loading только нажатой» — за владельцем в script.js). Окно заказа теперь ОСТАЁТСЯ открытым до payUrl:
   #emGo.loading — спиннер в кнопке, форма заблокирована (script.js снимает класс при ошибке). */
.open-modal.loading, #rentContinue.loading, #emGo.loading { pointer-events: none; }
#emGo.loading { filter: saturate(.8) brightness(.95); box-shadow: none !important; }
.open-modal.loading::after, #rentContinue.loading::after, #emGo.loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(4,21,15,.18); border-top-color: var(--acc-ink); border-radius: 50%;
  animation: scg-spin .7s linear infinite;
}
.btn-secondary.loading::after { border-color: rgba(20,18,14,.10); border-top-color: var(--tx); }
@keyframes scg-spin { to { transform: rotate(360deg); } }
/* Один общий индикатор состояния вместо «крутятся все кнопки»: пилюля внизу экрана (body::before занят зерном).
   При открытом окне заказа пилюля не нужна — статус виден в кнопке «Перейти к оплате». */
body:has(.open-modal.loading):not(:has(#emailModal.active))::after {
  content: 'Открываем оплату…'; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 950;
  transform: translateX(-50%); padding: 10px 16px 10px 40px; border-radius: 100px; white-space: nowrap;
  background: rgba(22,26,34,.92); border: 1px solid var(--line-2); color: var(--tx); font-size: 14px; line-height: 20px; font-weight: 500;
  box-shadow: var(--shadow-float); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120E' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 1-6.4 2.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px;
  animation: buy-pill-in .2s var(--ease-out) both, buy-pill-pulse 1.4s .2s ease-in-out infinite alternate;
}
@keyframes buy-pill-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@keyframes buy-pill-pulse { from { opacity: 1; } to { opacity: .72; } }

/* Плашка ошибки перехода к оплате (создаёт script.js) */
.buy-error { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(199,64,43,.35);
  color: #14120E; border: 0; border-radius: 12px; padding: 12px 14px; }
/* иконка-предупреждение слева (script.js кладёт в плашку только текст — иконку даём псевдоэлементом; тап по плашке закрывает её) */
.buy-error::before {
  content: ''; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7402B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.buy-error.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ---------- Шапка ---------- */
.header {
  position: sticky; top: 0; z-index: 200;
  background: var(--paper, #FAF7F0);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.header.scrolled { background: var(--paper, #FAF7F0); border-color: var(--line-2); }
.header::after { content: ''; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--line-2); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.header.scrolled::after { opacity: 1; }
.header .container { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
/* Лок собран в brand.css по метрикам макета. Тема задаёт только кегль слова —
   маскот, знак и подпись считаются от него. */
.logo { color: var(--tx); flex-shrink: 0; font-size: 20px;
  text-decoration: none; transition: opacity var(--dur-2) var(--ease-out); }
.logo:hover { opacity: .85; }
.logo-text { transition: transform .25s var(--ease-out); transform-origin: left center; }
/* Вордмарк без глифа: «Chat» чуть легче и приглушённее, «GPT» — акцентной мятой. Только буквы, никаких знаков. */
/* Вордмарк — ОДИН цвет: разноцветные куски (серый Chat + мятный GPT) владелец забраковал.
   Различаем части только весом: Sell/GPT — 700, Chat — 600, всё белым. */
.lt-chat { font-weight: 600; }
.lt-gpt { font-weight: 700; }
.header.scrolled .logo-text { transform: scale(.94); }
.header-nav { display: flex; gap: 4px; margin-left: 8px; }
.header-nav a { position: relative; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tx-2); transition: color var(--dur-2) var(--ease-out); }
/* подчёркивание выезжает из центра */
.header-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1.5px; border-radius: 2px; background: var(--acc-2); transform: scaleX(0); transform-origin: center; opacity: 1; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.header-nav a:hover { color: var(--tx); }
.header-nav a:hover::after { transform: scaleX(1); }
/* Активный раздел при скролле (класс ставит инлайн-скрипт по IntersectionObserver) */
.header-nav a.is-active { color: var(--tx); }
.header-nav a.is-active::after { transform: scaleX(1); opacity: .55; }
.header-spacer { flex: 1; }
.hdr-lk { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--tx-2); border: 1px solid transparent; transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.hdr-lk svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.hdr-lk:hover { color: var(--tx); background: var(--glass); border-color: var(--line); }
.hdr-lk:hover svg { transform: translateY(-1px); }
/* «К тарифам» появляется только когда витрина ушла за сгиб (класс .header--past ставит инлайн-скрипт) */
.hdr-buy { opacity: 1; visibility: visible; transform: none; transition: background .2s; }
.hdr-buy svg { width: 16px; height: 16px; stroke-width: 2; }
.header--past .hdr-buy { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) { .hdr-buy:hover > svg { transform: translateY(-2px); } }
/* Бургер: без рамки/фона, тап-зона ровно 44×44 (полоски внутри 18px — визуально размер тот же), выступ вправо
   компенсируем отрицательным margin, чтобы кнопка вставала по краю контейнера */
.nav-burger { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; transition: background var(--dur-2) var(--ease-out); }
.nav-burger:active { background: rgba(20,18,14,.05); }
.nav-burger span { display: block; width: 18px; height: 2px; background: var(--tx); border-radius: 2px; transition: transform .25s var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-mobile {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 210; display: none; flex-direction: column;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  background: var(--paper, #FAF7F0);
  border-bottom: 1px solid var(--line); box-shadow: none;
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
}
.nav-mobile.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-mobile { box-shadow: none; }
.nav-mobile a:not(.btn) { position: relative; display: flex; align-items: center; min-height: 52px; padding: 14px 26px 14px 4px; font-size: 16px; font-weight: 500; color: var(--tx); border-bottom: 1px solid var(--line-in); }
/* шеврон справа — пункт читается как переход, а не как строка текста */
.nav-mobile a:not(.btn)::after {
  content: ''; position: absolute; right: 2px; top: 50%; width: 18px; height: 18px; margin-top: -9px; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.nav-mobile .btn { margin-top: 14px; }
/* Пункты входят каскадом (40 мс шаг), только opacity/transform */
.nav-mobile.open > a { animation: hero-in .3s var(--ease-out) both; }
.nav-mobile.open > a:nth-child(1) { animation-delay: .02s; }
.nav-mobile.open > a:nth-child(2) { animation-delay: .06s; }
.nav-mobile.open > a:nth-child(3) { animation-delay: .10s; }
.nav-mobile.open > a:nth-child(4) { animation-delay: .14s; }
.nav-mobile.open > a:nth-child(5) { animation-delay: .18s; }
.nav-mobile.open > a:nth-child(6) { animation-delay: .22s; }
/* Скрим меню: на фоне #0a0c10 полупрозрачный чёрный не читался — берём почти непрозрачный тон + размытие,
   чтобы контент под меню явно ушёл на второй план */
.nav-scrim { position: fixed; inset: 0; z-index: 150; background: rgba(20,18,14,.55); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.nav-scrim.open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------- Первый экран + витрина ---------- */
/* Лёгкое зерно поверх фона (feTurbulence, .04) — только на «голом» фоне: карточки и секции его перекрывают */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
.pricing { position: relative; padding: 72px 0 64px; overflow: hidden; }
.pricing > .container { position: relative; z-index: 1; }
/* Аврора: три мягких пятна (teal / blue / коралл за Claude-плиткой), медленный дрейф transform'ом 40 с —
   композитно, без blur-фильтра. На тёмном .35 читалось как грязь: подняли до .55/.5. */
/* Фон первого экрана у бренда плоский: Sand без пятен и градиентов. Прежняя
   «аврора» из мятного и синего пятен осталась от старой темы — гасим. */
.pricing::before, .pricing::after { content: none; }
/* третье пятно — тёплый коралл под композицией hero (живёт на .container, оба псевдоэлемента .pricing заняты) */
.pricing > .container::before { content: none; }

@keyframes aurora-a { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(140px, 60px, 0) scale(1.08); } 100% { transform: translate3d(-60px, 110px, 0) scale(.96); } }
@keyframes aurora-b { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-160px, 90px, 0) scale(1.06); } 100% { transform: translate3d(90px, -30px, 0) scale(1.1); } }
@keyframes aurora-c { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-90px, 70px, 0) scale(1.12); } }

/* Первый экран: слева текст + пара кнопок, справа композиция «плавающих карточек подписок» */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; max-width: 1096px; margin: 0 auto 56px; }
.hero-copy { min-width: 0; }
/* Каскад при загрузке: h1 → подзаголовок → кнопки → УТП → платёжки, шаг 80 мс; только opacity/transform — без CLS */
.hero-copy > * { animation: hero-in .6s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .13s; }
.hero-copy > :nth-child(3) { animation-delay: .21s; }
.hero-copy > :nth-child(4) { animation-delay: .29s; }
.hero-copy > :nth-child(5) { animation-delay: .37s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Карточки витрины тоже входят каскадом при загрузке (backwards: после анимации hover-transform свободен) */
.pricing-grid > * { animation: card-in .55s var(--ease-out) backwards; }
.pricing-grid > :nth-child(1)  { animation-delay: .30s; }
.pricing-grid > :nth-child(2)  { animation-delay: .36s; }
.pricing-grid > :nth-child(3)  { animation-delay: .42s; }
.pricing-grid > :nth-child(4)  { animation-delay: .48s; }
.pricing-grid > :nth-child(5)  { animation-delay: .54s; }
.pricing-grid > :nth-child(6)  { animation-delay: .60s; }
.pricing-grid > :nth-child(7)  { animation-delay: .66s; }
.pricing-grid > :nth-child(8)  { animation-delay: .72s; }
.pricing-grid > :nth-child(9)  { animation-delay: .78s; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
/* Кегли по целым шагам сетки: 56/60 (десктоп) · 68/72 (≥1600) · 44/48 (≤1080) · 26/30 (мобиль) */
.hero h1 { font-family: var(--font-display); font-size: 56px; font-weight: 800;
  letter-spacing: -.05em; line-height: 1.05; color: var(--tx); text-wrap: balance; }
/* Градиентный акцент на смысловой части заголовка (одна фраза, не весь H1) */
/* Было: градиент из мяты в синий — читался как «радуга». Один акцентный цвет. */
/* Заголовок набирается одним цветом: жёлтый текст запрещён (1.4:1), а Signal
   по брендбуку живёт в метках и ссылках и занимает ≤5% площади — половина
   H1 фиолетовым это уже второй основной цвет, а не акцент. */
.h1-acc { color: inherit; }
.hero-sub { margin: 20px 0 0; max-width: 560px; font-size: 19px; line-height: 28px; letter-spacing: -.01em; color: var(--tx-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-usp {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; margin: 28px 0 0;
  width: 100%; max-width: 560px; padding: 14px 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-card);
  color: var(--tx-2); font-size: 15px; line-height: 22px;
}
.hero-usp svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--tx); margin-top: 1px; }
.hero-usp b { color: var(--tx); font-weight: 600; }
/* подтверждение обещания H1 — способы оплаты сразу под УТП */
/* марки и подпись — двумя строками на любой ширине (в одну строку они то влезали, то нет — «прыгающая» вёрстка) */
.hero-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 20px; }
.hero-pay .pay-marks { gap: 6px; }
.hero-pay-note { font-size: 13px; line-height: 18px; color: var(--tx-3); }

/* ---------- Композиция первого экрана: «плавающие» карточки подписок ----------
   Три стеклянные плитки под лёгким наклоном (perspective + rotateY), со ступенчатым смещением и каскадом входа.
   Декоративно (aria-hidden): те же тарифы с теми же ценами стоят витриной ниже. */
.hero-visual { position: relative; perspective: 1100px; }
.hero-visual::before {
  content: ''; position: absolute; inset: -12% -8% -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: none;
}
.hv-stack { position: relative; z-index: 1; display: grid; gap: 14px; transform: rotateY(-9deg) rotate(-1.6deg); transform-style: preserve-3d; }
.hv-card {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; row-gap: 4px; padding: 13px 16px; border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: none;
  animation: hv-in .65s var(--ease-out) both;
}
/* ступенька смещения: карточки «раскладываются» вправо-вниз */
.hv-card:nth-child(1) { margin-right: 34px; animation-delay: .34s; }
.hv-card:nth-child(2) { margin: 0 16px 0 18px; animation-delay: .42s; }
.hv-card:nth-child(3) { margin-left: 36px; animation-delay: .5s; }
@keyframes hv-in { from { opacity: 0; transform: translate3d(18px, 14px, 0); } }
.hv-mark { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; }
.hv-mark svg { width: 19px; height: 19px; }
.hv-mark--gpt { background: rgba(20,18,14,.05); color: var(--tx); }
.hv-mark--claude { background: rgba(20,18,14,.05); color: var(--tx); }
.hv-mark--gemini { background: rgba(20,18,14,.05); }
.hv-name { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--tx); }
.hv-price { justify-self: end; font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--tx); font-variant-numeric: tabular-nums lining-nums; word-spacing: -.06em; }
.hv-vendor { font-size: 12px; line-height: 16px; color: var(--tx-3); }
.hv-state { justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tx, #14120E); }
.hv-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: none; }

/* Сетка витрины (десктоп): 6 колонок, категории во всю ширину */
.pricing-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.pricing-cat { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.pricing-cat:first-child { margin-top: 0; }
/* Марка бренда живёт в карточке (.plan-mark 40); в заголовке категории её не дублируем (разметка остаётся — прячем) */
.pc-mark { display: none; }
.pc-name { font-family: var(--font-text, Manrope, sans-serif); font-size: 15px; font-weight: 700; line-height: 1; color: var(--tx); }
.pc-line { flex: 1; height: 1px; background: var(--line-in); }

/* Карточка тарифа: одна схема для всех — марка + название/описание сверху, цена строкой ниже слева, буллиты, кнопка */
.pricing-card {
  position: relative; overflow: hidden; display: grid; column-gap: 14px; row-gap: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: "mark head" "price price" "feat feat" "btn btn";
  align-content: start;
  padding: 28px; border-radius: 18px;
  background: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.14);
  transition: border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
/* Брендовая подсветка карточки: 1px верхняя линия + мягкое пятно сверху в цвете бренда.
   Цвет задаётся классом plan--gpt / plan--claude / plan--gemini (старые классы не трогаем). */
/* Подсветка карточек была мятной/коралловой от прежней темы. У бренда цветных
   градиентов нет: оставляем тонкую чернильную линию сверху как разделитель. */
.plan--gpt    { --brand-line: rgba(20,18,14,.14); --brand-glow: transparent; }
.plan--claude { --brand-line: rgba(20,18,14,.14); --brand-glow: transparent; }
.plan--gemini { --brand-line: rgba(20,18,14,.14); --brand-glow: transparent; }
.plan--gpt::before, .plan--claude::before, .plan--gemini::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--brand-line), transparent);
}
/* Полоса бренда во всю ширину карточки (120px сверху): пятно 340px читалось только на широкой карточке,
   а на статике вообще пропадало — теперь бренд виден до того, как глаз дошёл до марки-иконки. */
.plan--gpt::after, .plan--claude::after, .plan--gemini::after { content: none; }
.pricing-card > * { position: relative; z-index: 1; }
.price-amount { transition: text-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .pricing-card:hover { border-color: var(--line-2); background: var(--surface-2); box-shadow: var(--shadow-card), var(--sh-lift); transform: translateY(-2px); }
  /* цена подсвечивается, primary-кнопка внутри поднимается вместе с карточкой */
  .pricing-card:hover .price-amount { text-shadow: 0 0 24px rgba(255,198,30,.22); }
  .pricing-card:hover .plan-btn.btn-primary:not(.loading) { transform: translateY(-1px); box-shadow: none; }
  .pricing-card:hover .plan-btn.btn-secondary:not(.loading) { background: var(--glass-hover); border-color: rgba(20,18,14,.72); }
  .pricing-card--featured:hover { box-shadow: inset 0 0 0 1.5px var(--ring); }
}
.plan-mark { grid-area: mark; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,18,14,.05); color: var(--tx); flex: none; }
/* Один выделенный тариф на витрине (иерархия: primary-CTA только у него, у остальных — стекло) */
/* Выделенная карточка на странице ровно одна: кремовый фон и янтарная обводка. */
.pricing-card--featured { background: #FFF9E8; box-shadow: inset 0 0 0 2px var(--ring); }
.plan--half { grid-column: span 3; grid-template-rows: auto auto 1fr auto; }
.plan--third { grid-column: span 2; grid-template-rows: auto auto 1fr auto; }
.plan--half .plan-btn, .plan--third .plan-btn { align-self: end; }
.plan--full { grid-column: 1 / -1; }
.plan-mark { display: none; grid-area: mark; width: 40px; height: 40px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.plan-mark svg { width: 17px; height: 17px; }
.plan-mark--gpt { background: rgba(20,18,14,.05); color: var(--tx); }
.plan-mark--claude { background: rgba(20,18,14,.05); color: var(--tx); }
.plan-mark--gemini { background: rgba(20,18,14,.05); color: var(--tx); }
.plan-head { grid-area: head; min-width: 0; align-self: center; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.plan-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.plan-desc { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--tx-2); }
.plan-brief { display: none; }
.plan-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1; background: var(--glass); color: var(--tx-2); }
/* Чернила на банане: акцентным цветом по светлому фону текст не набираем. */
.plan-tag--acc { background: var(--acc); color: var(--acc-ink); font-weight: 700;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; height: 24px; padding: 0 10px;
  border-radius: 7px; }
.plan-price { grid-area: price; display: flex; align-items: baseline; gap: 10px; margin-top: 18px; white-space: nowrap; }
.price-amount { font-family: var(--font-text, Manrope, sans-serif); font-size: 36px; font-weight: 800;
  letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.price-period { font-size: 14px; line-height: 20px; color: rgba(20,18,14,.56); }
/* «≈ 72 ₽ в месяц» — в той же строке, через точку-разделитель (в flex-nowrap block+width:100% ложился без разделителя) */
.price-note { display: inline; font-size: 13px; line-height: 18px; color: var(--tx-3); }
.price-note::before { content: '·'; margin-right: 8px; color: var(--mut-2); }
.plan-features { grid-area: feat; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-in); display: grid; gap: 8px; align-content: start; }
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; color: var(--tx-2); }
/* Галочка фичи тонируется по бренду карточки (мята / коралл / фиолет из марки Gemini): цвет глифа зашит
   в data-URI, поэтому вместо шортхенда — longhand'ы, а бренд переопределяет только два из них. */
/* Пункт списка — янтарная точка 5 px, как в макете; галочка была лишним знаком. */
.plan-features li::before {
  content: ''; flex-shrink: 0; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%;
  background: var(--acc); background-image: none;
}
.plan-btn { grid-area: btn; margin-top: 22px; }
.plan-btn.btn { height: 48px; font-size: 15px; }
/* Иерархия CTA витрины: градиент — только у выделенного тарифа; остальные подписки — акцентная «обводка»
   (стекло акцентного тона: явное действие, не «выключенная кнопка»); аренда — нейтральное стекло (альтернатива). */
.plan--claude .plan-btn.btn-secondary, .plan--gemini .plan-btn.btn-secondary {
  background: var(--surface); border-color: var(--line-2); color: var(--tx);
  box-shadow: none;
}
@media (hover: hover) {
  .plan--claude .plan-btn.btn-secondary:hover, .plan--gemini .plan-btn.btn-secondary:hover,
  .pricing-card:hover .plan--claude .plan-btn.btn-secondary { background: var(--surface); border-color: var(--line-2); color: var(--tx); }
  .plan--claude:hover .plan-btn.btn-secondary, .plan--gemini:hover .plan-btn.btn-secondary { background: rgba(255,198,30,.22); border-color: rgba(255,198,30,.22); }
}
.plan--claude .plan-btn.btn-secondary.loading::after, .plan--gemini .plan-btn.btn-secondary.loading::after { border-color: var(--line-2); border-top-color: var(--tx); }
.plan-note { grid-area: note; margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--tx-3); }

/* Широкие карточки (ChatGPT ×2): та же схема; кнопка — на всю ширину, как в остальных (единая ширина CTA в ряду) */
.plan--half .plan-features { margin-top: 20px; padding-top: 20px; }
.plan--half .plan-btn { margin-top: 22px; }
/* Лента (Gemini): марка на обе строки (центр = центр блока название+описание, как в остальных карточках),
   цена под названием, буллиты справа, кнопка в правой колонке */
/* Лента (Gemini): одна строка из пяти колонок — марка · название/описание · цена в собственной колонке
   (с hairline-разделителем) · буллиты · кнопка. Цена в своей колонке = та же «крупная цифра», что и в карточках. */
.plan--full {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) minmax(210px, auto);
  grid-template-areas: "mark head price feat btn";
  grid-template-rows: auto;
  column-gap: 20px; align-items: center;
}
.plan--full .plan-price {
  flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 2px 0; align-self: center;
}
.plan--full .price-note::before { display: none; }
.plan--full .price-note { margin-top: 1px; }
.plan--full .plan-features { margin: 0; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid var(--line-in); align-self: center; }
/* margin у кнопки не входит в auto-трек и вылезал за паддинг карточки */
.plan--full .plan-btn { margin: 0; align-self: center; justify-self: end; min-width: 210px; }
/* марка и блок «название+описание» центрируются в ОДНОЙ строке сетки → их центры совпадают при любой высоте описания */
.plan--full .plan-head { align-self: center; }
.plan--full .plan-mark { align-self: center; }

/* Плашка доверия под витриной */
.trust-strip {
  margin-top: 32px; padding: 20px 28px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
}
/* На десктопе платёжки уже показаны в hero — в полосе доверия не дублируем (иначе тезисы ломались на 2 строки) */
.trust-pay { display: none; }
/* Три тезиса — ровная сетка 3×1fr с вертикальными hairline-разделителями: тезисы «стоят» в своих ячейках,
   а не висят по центру пустой плашки */
.trust-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.trust-item { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 20px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tx-2); text-align: left; }
.trust-item + .trust-item { border-left: 1px solid var(--line-in); }
.trust-item svg { width: 18px; height: 18px; color: var(--tx); flex-shrink: 0; }
.trust-pay { align-items: center; gap: 12px; min-width: 300px; justify-content: flex-end; }
.trust-pay-label { font-size: 13px; line-height: 18px; color: var(--tx-3); white-space: nowrap; }
.pay-marks { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* Платёжки — монохром на тёмном, без рамок-чипов (fill из CSS перебивает атрибуты svg); единая оптическая коробка:
   логотипы 14–16px по высоте, ширина от viewBox. Mastercard — два ОДИНАКОВЫХ диска с более светлым пересечением
   (два разнотонных читались как тумблер) */
/* Плитка платёжной системы: белая, знак внутри в родных цветах и без обрезки.
   Ширина по содержимому — знаки разной пропорции, фиксированная рамка их душила. */
.pay-mark { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 64px; height: 40px; padding: 0 12px; border-radius: 8px;
  background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(20,18,14,.12);
  color: rgba(20,18,14,.62); }
.pay-mark svg { max-width: 100%; max-height: 22px; object-fit: contain; }
.pay-mark svg { display: block; height: 16px; width: auto; }
.pay-mark[title="МИР"] svg { height: 14px; }
.pay-mark[title="Visa"] svg { height: 13px; }
.pm-t { font-weight: 600; font-size: 13px; color: rgba(20,18,14,.62); letter-spacing: .01em; }
.pay-crypto { font-size: 13px; font-weight: 600; }
.pay-crypto svg { width: 16px; height: 16px; }
.pay-crypto svg * { fill: none; stroke: rgba(20,18,14,.62); }
.trust-oferta { max-width: 640px; margin: 16px 0 0; font-size: 13px; line-height: 18px; color: var(--tx-3); text-align: left; letter-spacing: .005em; text-wrap: balance; }
.trust-oferta a { color: var(--tx-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20,18,14,.72); }
.trust-oferta a:hover { color: var(--tx); }

/* ---------- Секции ---------- */
/* Секции без hairline-разделителей на всю ширину (страница читалась «полосатой»): единое полотно, чередование фона
   остаётся мягким, ритм задают отступы 112 / 56 */
.section { padding: clamp(56px, 5.5vw, 88px) 0; }
/* Стык «Как это работает» → «Гарантии»: у шагов низ короче стандартного, иначе между последней карточкой
   и заголовком следующей секции складывались два полных отступа подряд и экран читался как пустой */
#how-it-works { padding-bottom: 64px; }
.section--alt { background: var(--bg-2); }
/* Заголовки секций стоят по левому краю контейнера, как в макете. */
.section-header { max-width: 720px; margin: 0 0 clamp(32px, 4vw, 52px); text-align: left; }
.section-header--tight { margin-bottom: 36px; }
/* H2 бренда: Unbounded 800, трекинг −4%. */
.section-header h2 { font-family: var(--font-display); font-size: 34px;
  font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
.section-header p { margin-top: 16px; font-size: 18px; line-height: 27px; letter-spacing: -.01em; color: var(--tx-2); text-wrap: pretty; }
.section-header--left { text-align: left; margin-left: 0; }

/* Как это работает: сетка 2×2 — на четырёх колонках по 262px текст рвался по 3–4 слова и низ карточек «лохматился».
   Внутри карточки — левый рельс (плитка-иконка + номер под ней) и текст справа: мера строки ~55 знаков,
   абзац укладывается в две ровные строки, высоты пар совпадают. */
.steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.step {
  position: relative; z-index: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px;
  padding: 26px 28px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
/* Маршрут: пунктирный «перегон» из карточки в соседнюю по центру плиток — та же идея линии, но она следует
   за строкой сетки (при 2×2 общая линия на всю ширину уже не работала) */
.step:nth-child(odd)::after {
  content: ''; position: absolute; z-index: 0; left: 100%; width: 16px; top: 50px; height: 0;
  border-top: 1px dashed var(--line-2); pointer-events: none;
}
.step-top { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; }
.step-ico { width: 48px; height: 48px; border-radius: 12px;    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);  background: rgba(20,18,14,.05); color: var(--tx); border: 0; }
.step-ico svg { width: 22px; height: 22px; }
/* Единое hover-поведение блоков: подъём 2px, рамка .12, мягкая тень (только на устройствах с курсором) */
.step, .safety-item, .review-card, .guarantee, .cta-card, .trust-strip { transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
.step-number { font-family: var(--bp-mono); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 1.04px; color: rgba(20,18,14,.42); opacity: 1;
  font-variant-numeric: tabular-nums lining-nums; }
.si-ico, .guarantee-ico { transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .step:hover, .safety-item:hover, .review-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-card), var(--sh-lift); }
  .step:hover .step-number { font-family: var(--bp-mono); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 1.04px; color: rgba(20,18,14,.42); opacity: 1;
  font-variant-numeric: tabular-nums lining-nums; }
  .step:hover .step-ico { transform: scale(1.06); background: rgba(255,198,30,.22); }
  .safety-item:hover .si-ico { transform: scale(1.06); background: rgba(20,18,14,.05); }
  .guarantee:hover { border-color: rgba(255,198,30,.22); box-shadow: none; }
  .guarantee:hover .guarantee-ico { transform: scale(1.05); }
  .cta-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-card), var(--sh-lift); }
}
.step-number { font-family: var(--bp-mono); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 1.04px; color: rgba(20,18,14,.42); opacity: 1;
  font-variant-numeric: tabular-nums lining-nums; }
.step h3 { margin-top: 2px; font-size: 20px; line-height: 28px; }
.step p { margin-top: 8px; max-width: 480px; font-size: 15px; line-height: 23px; color: var(--tx-2); }

/* Гарантии */
.guarantee {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
  padding: 32px; border-radius: var(--r);
  background: var(--acc-soft); border: 1px solid var(--acc-line);
}
/* Шкала плиток: 40 (плитки карточек: .plan-mark, .si-ico) · 56 (акцентные: .guarantee-ico, .rent-ico); глифы 20 / 24, штрих 1.75 / 2 */
.guarantee-ico { width: 56px; height: 56px; border-radius: var(--r); background: rgba(255,198,30,.22); display: flex; align-items: center; justify-content: center; color: var(--tx); }
.guarantee-ico svg { width: 24px; height: 24px; stroke-width: 2; }
.guarantee h3 { font-size: 24px; line-height: 32px; letter-spacing: -.025em; }
.guarantee a { color: var(--tx); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20,18,14,.72); }
.guarantee p { margin-top: 8px; font-size: 16px; line-height: 25px; color: var(--tx-2); max-width: 60ch; }
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; align-items: start; }
.safety-item { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: var(--card-pad); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.si-ico { width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(20,18,14,.05); display: flex; align-items: center; justify-content: center; color: var(--tx); }
.si-ico svg { width: 20px; height: 20px; }
.safety-item h4 { align-self: center; font-size: 18px; line-height: 24px; }
.safety-item p { grid-column: 2; margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--tx-2); }

/* Отзывы */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { position: relative; overflow: hidden; padding: var(--card-pad);     display: flex; flex-direction: column;  background: var(--card); border-radius: 18px; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--hairline); }
/* кавычка-глиф в углу: карточка отзыва перестаёт быть «ещё одной серой плиткой с текстом» */
.review-card::before { content: '\201C'; position: absolute; top: 4px; right: 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 78px; line-height: 1; color: var(--line-2); pointer-events: none; }
.review-stars { display: flex; gap: 2px; color: var(--star); }
.review-stars svg { width: 16px; height: 16px; fill: currentColor; }
.review-text { position: relative; margin-top: 16px; font-size: 17px; line-height: 26px; color: var(--tx-2); flex: 1; }
.review-author { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.review-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--tx); background: var(--surface-3); border: 1px solid var(--line-2); }
/* Монограммы тонируем по-разному (три одинаковых серых кружка читались как заглушка) */
.review-card:nth-child(1) .review-avatar { background: var(--acc-soft); color: var(--tx); border-color: var(--acc-line); }
.review-card:nth-child(2) .review-avatar { background: rgba(20,18,14,.05); color: var(--tx); border-color: rgba(20,18,14,.10); }
.review-card:nth-child(3) .review-avatar { background: rgba(20,18,14,.05); color: var(--tx); border-color: rgba(20,18,14,.10); }
.review-name { font-size: 15px; line-height: 20px; font-weight: 600; }
.review-meta { font-size: 13px; line-height: 18px; color: var(--tx-3); }

/* FAQ: строки-«блоки», а не плоская лента из десяти одинаковых хайрлайнов — вопрос крупнее (18/600),
   строка 72px, наведение и раскрытие подсвечивают всю строку поверхностью со скруглением 14. */
.faq-list { max-width: 1080px; margin: 0; border-top: 1px solid var(--line); }
.faq-item { position: relative; border-bottom: 1px solid var(--line); border-radius: 14px; transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.faq-question { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; text-align: left; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.015em; color: var(--tx); transition: color var(--dur-2) var(--ease-out); }
.faq-question:hover { color: #14120E; }
@media (hover: hover) { .faq-item:not(.open):hover { background: rgba(255,255,255,.022); } }
/* Раскрытая строка = поверхность со скруглением: состояние читается блоком, а не только поворотом «+» */
.faq-item.open { background: rgba(255,255,255,.035); border-bottom-color: transparent; box-shadow: none; }
.faq-item:has(+ .faq-item.open) { border-bottom-color: transparent; }
.faq-toggle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-2); transition: transform .3s var(--spring), background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.faq-toggle svg { width: 16px; height: 16px; stroke-width: 2; }
.faq-question:hover .faq-toggle { border-color: rgba(20,18,14,.72); color: var(--tx); background: var(--glass); }
/* Раскрытый вопрос: кружок берёт заливку, знак остаётся чернильным.
   Наоборот не работает — жёлтая линия по светлому не видна. */
.faq-item.open .faq-toggle { transform: rotate(45deg); background: rgba(20,18,14,.05);
  border-color: transparent; color: var(--tx); }
/* Аккордеон: плавная высота через grid 0fr→1fr; паддинг постоянный (клипуется overflow), поэтому без рывка в конце */
/* Нижний отступ ответа — на контейнере и только в open (паддинг на самом <p> не клипуется и давал закрытому пункту
   лишние 24px снизу: текст вопроса стоял ближе к верхней линии, чем к нижней) */
.faq-answer { display: grid; grid-template-rows: 0fr; padding-bottom: 0; transition: grid-template-rows .32s var(--ease-out), padding-bottom .32s var(--ease-out); }
.faq-answer > p { overflow: hidden; margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-68, rgba(20,18,14,.68)); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; padding-bottom: 26px; }
.faq-item.open .faq-answer > p { overflow: hidden; margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-68, rgba(20,18,14,.68)); }
.faq-answer a { color: var(--tx, #14120E); text-decoration: underline; text-underline-offset: 3px; }

/* CTA */
.cta-card { text-align: center; padding: 48px 32px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.cta-card::before { display: none; }
.cta-card > * { position: relative; }
.cta-card h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; }
.cta-card p { margin: 12px auto 0; max-width: 560px; font-size: 16px; line-height: 24px; color: var(--tx-2); }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta-card .btn svg { width: 18px; height: 18px; }
.cta-card p.cta-note { margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--tx-3); }

/* Футер */
/* нижний отступ с запасом: плавающая кнопка чата (FAB) не должна наезжать на юридический текст */
.footer { border-top: 1px solid var(--line-2); padding: 56px 0 88px; background: var(--bg); }
/* Колонки с равным шагом (было 1.4/1/1.25/1.15 — расстояния между колонками гуляли на 50px),
   в первой под описанием — марки оплаты: колонка перестала обрываться на второй строке. */
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }   /* 5 колонок: бренд + навигация + полезное + документы + контакты */
.footer-brand p { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--tx-3); max-width: 320px; }
.footer-pay { margin-top: 24px; }
.footer-pay-label { display: block; margin-bottom: 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.footer-pay .pay-marks { gap: 6px 12px; opacity: 1; }
.footer h4 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-contact a { position: relative; align-self: flex-start; font-size: 14px; line-height: 20px; color: var(--tx-2); transition: color var(--dur-2) var(--ease-out); }
.footer-links a::after, .footer-contact a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; opacity: .5; transform: scaleX(0); transform-origin: center; transition: transform var(--dur-2) var(--ease-out); }
.footer-links a:hover, .footer-contact a:hover { color: var(--tx); }
.footer-links a:hover::after, .footer-contact a:hover::after { transform: scaleX(1); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-hours { font-size: 13px; line-height: 18px; color: var(--tx-3); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.footer-bottom p { font-size: 13px; line-height: 18px; color: var(--tx-3); letter-spacing: .005em; }
.footer-bottom p:first-child { color: var(--tx-2); }

/* ---------- Модалки (структура и id — контракт script.js) ----------
   Окно заказа = шаг 1 воронки: тот же язык, что pay/success (funnel.css): индикатор шагов, сводка заказа
   (глиф бренда · тариф · срок · цена), поле 48 с подписью, кнопка 52 со спиннером, гарантия одной строкой,
   согласие 13px (юридический текст не трогаем), платёжки одной строкой. */
.modal-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(20,18,14,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
/* Модалка: scale .96→1 + fade за 160–220 мс (тот же кит, что тосты/шиты кабинета) */
.modal {
  width: 100%; max-width: 440px; position: relative;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 24px 28px 28px;
  box-shadow: none;
  opacity: 0; transform: scale(.96) translateY(8px); transition: transform .22s var(--ease-out), opacity var(--dur-1) var(--ease-out);
  max-height: min(92vh, 100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-overlay.active .modal { transform: none; opacity: 1; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,18,14,.05); color: var(--tx-2); display: flex; align-items: center; justify-content: center; z-index: 2; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.modal-close:hover { background: rgba(20,18,14,.10); color: var(--tx); transform: rotate(90deg); }
.modal-close svg { width: 18px; height: 18px; stroke-width: 2; }
.modal h2 { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.025em; padding-right: 40px; }
.modal-sub { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--tx-2); }
/* Индикатор шагов (1:1 с funnel.css / success / account): точка 20 + подпись 12 + коннектор; в окне — свои классы .em-step* (на главной .step занят блоком «Как это работает») */
.em-steps { display: flex; align-items: center; justify-content: flex-start; list-style: none; margin: 0 48px 16px 0; padding: 0; }
.em-step { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--tx-3); white-space: nowrap; }
.em-step + .em-step::before { content: ''; width: clamp(14px, 5vw, 32px); height: 1px; background: var(--line-2); margin: 0 10px; }
.em-step.is-done + .em-step::before { background: var(--acc-line); }
.em-step-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--tx-3); font-size: 10px; font-weight: 700; }
.em-step-dot svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; display: none; }
.em-step-dot i { font-style: normal; }
.em-step.is-done { color: var(--tx-2); }
.em-step.is-done .em-step-dot { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.em-step.is-done .em-step-dot svg { display: block; } .em-step.is-done .em-step-dot i { display: none; }
.em-step.is-active { color: var(--tx); font-weight: 600; }
.em-step.is-active .em-step-dot { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); box-shadow: none; }
/* Сводка заказа (1:1 с funnel.css .order-summary) */
.modal .order-summary { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; column-gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); }
.modal .os-mark { width: 40px; height: 40px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: rgba(20,18,14,.05); color: var(--tx); }
.modal .os-mark svg { width: 20px; height: 20px; display: none; }
.modal .os-mark[data-brand="gpt"] .os-g-gpt, .modal .os-mark[data-brand="claude"] .os-g-claude, .modal .os-mark[data-brand="gemini"] .os-g-gemini, .modal .os-mark[data-brand="other"] .os-g-other { display: block; }
.modal .os-mark[data-brand="claude"] { background: rgba(20,18,14,.05); color: var(--tx); }
.modal .os-mark[data-brand="gemini"] { background: rgba(20,18,14,.05); color: var(--tx); }
.modal .os-mark[data-brand="other"] { background: var(--acc-soft); color: var(--tx); }
.modal .os-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.modal .os-title { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .os-sub { font-size: 13px; line-height: 18px; color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .os-price { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.modal .os-price .os-was { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--tx-3); text-decoration: line-through; }
.modal .os-price.is-discount .os-now { color: var(--tx); }
/* Поле почты: подпись сверху (зачем почта), 48px, фокус-кольцо */
.em-label { display: block; margin: 18px 0 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--tx-2); }
.em-label-hint { color: var(--tx-3); font-weight: 400; }
.em-input {
  width: 100%; height: 48px; padding: 0 16px;
  background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--tx); font-family: inherit; font-size: 16px; outline: none;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow .25s var(--ease-out), background var(--dur-2) var(--ease-out);
}
.em-input::placeholder { color: rgba(20,18,14,.45); }   /* ≥4.5:1 на --input */
.em-input:hover { border-color: rgba(20,18,14,.10); }
.em-input:focus { border-color:#F0B60A;box-shadow: none; background: var(--input); }
.em-input:disabled { opacity: .6; }
/* Состояние ошибки: script.js показывает #emErr через style.display='block' — по этому признаку краснеет ТОЛЬКО поле
   почты (#emInput; поле промокода не трогаем) и один раз вздрагивает; при правке адреса script.js прячет #emErr. */
#emailForm:has(#emErr[style*="block"]) #emInput,
#emailForm:has(#emErr[style*="block"]) #emInput:focus { border-color: var(--danger); box-shadow: none; animation: em-shake .3s var(--ease-out) 1; }
#emailForm:has(#emErr[style*="block"]) #emInput:focus-visible { outline-color: var(--danger); }
@keyframes em-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 60% { transform: translateX(4px); } 85% { transform: translateX(-2px); } }
.em-err { display: none; margin-top: 8px; padding-left: 22px; position: relative; font-size: 13px; line-height: 18px; color: var(--danger); }
.em-err::before, .em-promo-msg.is-err::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7402B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.1'/%3E%3C/svg%3E") center / 16px no-repeat; }
.em-go { margin-top: 14px; }
/* Ошибка перехода к оплате — внутри окна под кнопкой (текст кладёт script.js), окно не закрывается */
.em-alert { position: relative; margin-top: 12px; padding: 11px 13px 11px 40px; border-radius: var(--r-sm); background: rgba(244,123,139,.12); border: 1px solid rgba(244,123,139,.4); color: #C7402B; font-size: 13.5px; line-height: 19px; }
.em-alert[hidden] { display: none; }
.em-alert::before { content: ''; position: absolute; left: 13px; top: 12px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7402B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E") center / 18px no-repeat; }
/* Гарантия — одна тихая строка с иконкой (плашка делала хвост окна тяжёлым) */
.pay-guarantee { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; color: var(--tx-2); font-size: 13px; line-height: 18px; }
.pay-guarantee svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tx); margin-top: 1px; }
/* Информированное согласие под кнопкой: клиент видит условия ДО клика (доказательство в споре).
   Приглушённо, но читаемо на тёмном (13/18 — минимальный кегль сайта); ссылки — подчёркнутые, того же тона. */
.consent-note { margin-top: 10px; font-size: 11px; line-height: 16px; color: var(--ink-50, rgba(20,18,14,.50)); }
.consent-note a { color: var(--tx-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(20,18,14,.72); transition: color var(--dur-2) var(--ease-out); }
.consent-note a:hover { color: var(--tx); }
/* Хвост модалки короткий: подпись «Оплата через Lava» и марки — одной строкой 22px (марки чуть компактнее витринных) */
.pay-methods { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-in); }
.pay-methods .pay-mark { height: 22px; padding: 0; gap: 5px; }
.pay-methods .pay-mark svg { height: 14px; }
.pay-methods .pay-mark[title="МИР"] svg { height: 12px; }
.pay-methods .pay-mark[title="Visa"] svg { height: 11px; }
.pay-methods .pay-mark[title="Mastercard"] svg { height: 15px; }
.pay-methods .pm-t, .pay-methods .pay-crypto { font-size: 12px; }
.pay-methods-note { margin: 0 4px 0 0; font-size: 12px; line-height: 18px; color: var(--tx-3); }
.modal-note { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--tx-3); }
.modal--center { text-align: center; }
/* Пояснение «это аренда» — информационное, не предупреждение: акцентный тон, не --danger */
.rent-ico { width: 56px; height: 56px; border-radius: var(--r); background: var(--acc-soft); color: var(--tx); display: flex; align-items: center; justify-content: center; margin: 4px auto 16px; }
.rent-ico svg { width: 24px; height: 24px; stroke-width: 2; }
.modal--center h2 { padding-right: 0; }
/* Пара кнопок одного роста и кегля (52/16 против 48/14 читались как разношёрстные) */
#rentContinue { margin-top: 20px; }
#rentSwitch { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--tx-2); padding: 0 12px; }
#rentSwitch:hover { color: var(--tx); }
/* Окно занято (ждём payUrl): форма не кликается, крестик приглушён — закрыть нельзя, пока идёт создание счёта */
.modal.is-busy .modal-close { opacity: .4; pointer-events: none; }
.modal.is-busy .em-promo-toggle, .modal.is-busy .em-promo-go, .modal.is-busy .em-promo-drop { pointer-events: none; opacity: .6; }

/* ---------- Чат-виджет (id/классы — контракт script.js) ---------- */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 900; }
.chat-choice {
  position: absolute; bottom: 70px; right: 0; min-width: 228px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-float);
  display: none; flex-direction: column; gap: 2px; transform-origin: bottom right; animation: choiceFadeIn .18s ease;
}
.chat-choice.open { display: flex; }
@keyframes choiceFadeIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.chat-choice-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); color: var(--tx) !important; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none !important; transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.chat-choice-item:hover { background: rgba(20,18,14,.05); transform: translateX(2px); }
.chat-choice-ico { display: inline-flex; line-height: 0; }
.chat-choice-ico svg { width: 19px; height: 19px; }
.chat-toggle {
  width: 56px; height: 56px; border-radius: 50%; position: relative;
  background: var(--grad-acc); color: var(--acc-ink);
  box-shadow: none;
  display: flex; align-items: center; justify-content: center; transition: transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}
/* пульс-кольцо раз в 6 с (transform/opacity, композитно) */
.chat-toggle::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255,198,30,.22); opacity: 0; pointer-events: none; animation: chat-pulse 6s ease-out infinite 2s; }
@keyframes chat-pulse { 0% { transform: scale(1); opacity: .7; } 14% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } }
.chat-toggle:hover { transform: scale(1.06); filter: brightness(1.05); box-shadow: none; }
.chat-toggle:active { transform: scale(.96); }
.chat-icon { transition: transform var(--dur-2) var(--ease-out); }
.chat-toggle:hover .chat-icon-open { transform: rotate(-8deg) scale(1.05); }
.chat-icon { display: flex; align-items: center; justify-content: center; }
.chat-icon svg { width: 24px; height: 24px; }
.chat-icon svg path { stroke: var(--acc-ink); }
.chat-unread { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; background: #C7402B; color: #14120E; border-radius: 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.chat-panel {
  position: absolute; bottom: 72px; right: 0; width: 350px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: none;
  display: none; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: chat-open .25s cubic-bezier(.34,1.4,.64,1);
}
.chat-panel.open { display: flex; }
@keyframes chat-open { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.chat-header { padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); position: relative; }
.chat-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20,18,14,.05); display: none; align-items: center; justify-content: center; }
.chat-close svg { width: 16px; height: 16px; }
.chat-agent { display: flex; align-items: center; gap: 12px; }
/* Аватар оператора: монограмма «А» на акцентной подложке (как .review-avatar). Мультяшный SVG из разметки и из
   script.js (AGENT_AVATAR) прячем — единственный пастельный стоковый элемент выбивался из тёмного стеклянного UI.
   Настоящее фото manager.jpg, если появится, ложится поверх (img в DOM позже псевдоэлемента). */
.chat-agent-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; background: var(--acc-soft); border: 1px solid var(--acc-line); flex-shrink: 0; }
/* Маскот в наушниках — служебная версия знака: поддержка, статус, автоответы. */
.chat-agent-avatar::before, .chat-mini::before { content: ''; position: absolute; inset: 0;
  background: url('brand/mascot-support.svg') center/78% no-repeat; }
.chat-mini::before { background-size: 82%; }
.chat-agent-avatar svg, .chat-mini svg { display: none; }
.chat-agent-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; }
.chat-agent-avatar img { object-fit: cover; }
.chat-agent-name { font-size: 14px; line-height: 20px; font-weight: 600; }
.chat-agent-status { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--tx-3); margin-top: 2px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: none; }
.chat-messages { flex: 1; padding: 16px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; min-height: 180px; max-height: 340px; background: var(--bg-2); }
.chat-msg { display: flex; flex-direction: column; gap: 4px; }
.chat-msg-agent { align-items: flex-start; }
.chat-msg-user { align-items: flex-end; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-mini { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; background: var(--acc-soft); border: 1px solid var(--acc-line); }
.chat-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chat-mini-spacer { width: 26px; flex-shrink: 0; }
.chat-bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.chat-sender { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--tx); margin: 0 0 3px 6px; }
.chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; word-break: break-word;  white-space: pre-wrap; word-break: break-word; }
.chat-msg-agent .chat-bubble { background: var(--surface-3); color: var(--tx); border-radius: 4px 16px 16px 16px; }
.chat-msg-agent .chat-time { margin-left: 34px; }
.chat-msg-user .chat-bubble { background: var(--acc); color: var(--acc-ink); border-radius: 16px 4px 16px 16px; }
.chat-time { font-size: 12px; line-height: 16px; color: var(--tx-3); padding: 0 4px; }
.chat-link { color: var(--tx, #14120E); text-decoration: underline; word-break: break-all; }
.chat-msg-user .chat-link { color: var(--acc-ink); }
.chat-typing { display: flex; gap: 4px; align-items: center; padding: 10px 14px; background: var(--surface-3); border-radius: 4px 16px 16px 16px; width: fit-content; }
.chat-typing span { width: 6px; height: 6px; background: var(--tx-3); border-radius: 50%; animation: typing-dot 1.4s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing-dot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-6px); opacity: 1; } }
/* Подсказки — нейтральные чипы (пять акцентных в три ряда шумели рядом с CTA): на десктопе три в одну строку,
   на мобиле (≤520) все пять горизонтальной прокруткой */
.chat-suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; background: var(--bg-2); }
.chat-chip:nth-child(n+4) { display: none; }
.chat-chip { flex-shrink: 0; background: var(--surface-3); border: 1px solid var(--line-2); color: var(--tx-2); border-radius: 100px; padding: 6px 12px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.chat-chip:hover { background: rgba(20,18,14,.10); color: var(--tx); border-color: rgba(20,18,14,.72); }
.chat-input-wrap { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 100px; background: var(--input); color: var(--tx); font-family: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.chat-input::placeholder { color: rgba(20,18,14,.45); }
.chat-input:focus { border-color:#F0B60A;box-shadow: none; }
.chat-send { width: 40px; height: 40px; border-radius: 50%; background: var(--acc); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, transform .15s; }
.chat-send:hover { background: var(--acc-2); }
.chat-send svg path { stroke: var(--acc-ink); }
.chat-msg-system { align-items: center; }
.chat-system-label { font-size: 12px; color: var(--tx-2); background: rgba(20,18,14,.05); border: 1px solid var(--line); border-radius: 100px; padding: 5px 14px; text-align: center; max-width: 100%; }
.rating-block { align-items: stretch !important; }
.rating-card { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 18px 16px; text-align: center; }
.rating-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.rating-sub { font-size: 13px; color: var(--tx-3); margin-bottom: 14px; }
.rating-stars { display: flex; gap: 6px; justify-content: center; }
.star-btn { font-size: 26px; color: #4b5260; transition: color .15s, transform .15s; line-height: 1; }
.star-btn.hover, .star-btn.active { color: var(--star); }
.star-btn.hover { transform: scale(1.15); }
.star-btn:disabled { cursor: default; }
.rating-thanks { padding: 8px 0; }
.rating-thanks-stars { font-size: 24px; color: var(--star); letter-spacing: 2px; margin-bottom: 8px; }
.rating-thanks-text { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.rating-thanks-sub { font-size: 12px; color: var(--tx-3); }
/* открытая модалка — прячем плавающий чат */
body:has(#emailModal.active) .chat-widget, body:has(#rentInfoModal.active) .chat-widget { display: none !important; }

/* ---------- Адаптив ---------- */
@media (min-width: 1600px) {
  /* На широком мониторе полотно 1096px читалось узкой лентой с полями по 412px: контейнер до 1256px по контенту.
     Сетки витрины (6 колонок), «Гарантий» и отзывов (3) это держат без переверстки. */
  .container { max-width: 1320px; }
  .hero { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 64px; }
  .hero h1 { font-size: 56px; }
  .hero-sub { font-size: 20px; line-height: 30px; max-width: 620px; }
  /* композиция первого экрана растёт вместе с шириной, а не висит мелкой в углу */
  .hv-stack { gap: 16px; }
  .hv-card { padding: 15px 18px; border-radius: 16px; column-gap: 14px; }
  .hv-mark { width: 40px; height: 40px; }
  .hv-mark svg { width: 21px; height: 21px; }
  .hv-name { font-size: 16px; line-height: 22px; }
  .hv-price { font-size: 18px; line-height: 22px; }
  .hv-vendor, .hv-state { font-size: 13px; line-height: 18px; }
  .faq-list { max-width: 100%; }
}
@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; }
  .hero h1 { font-size: 56px; }
}
@media (max-width: 1080px) {
  /* Планшет: композиция уезжает под текст горизонтальной лентой, текст снова по центру */
  .hero { display: block; text-align: left; max-width: 900px; }
  .hero-sub, .hero-usp { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: flex-start; }
  .hero-pay { align-items: center; }
  .hero-visual { margin-top: 32px; perspective: none; }
  .hero-visual::before { display: none; }
  .hv-stack { grid-template-columns: repeat(3, 1fr); transform: none; gap: 10px; }
  .hv-card { margin: 0 !important; text-align: left; }
  .hero h1 { font-size: 44px; }
  .plan--full { grid-template-columns: minmax(0, 1fr) minmax(200px, auto); grid-template-areas: "mark head price" "feat feat feat" "btn btn btn"; column-gap: 14px; }
  .plan--full .plan-features { margin: 18px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line-in); }
  .plan--full .plan-price { flex-direction: row; align-items: baseline; gap: 10px; margin: 0; padding: 0; border: 0; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
  .plan--full .price-note::before { display: inline; }
  .plan--full .plan-price .price-note { text-align: right; }
  .plan--full .plan-btn { margin: 22px 0 0; min-width: 0; }
  .plan--full .plan-head { align-self: center; }
  .plan--full .plan-mark { align-self: center; margin-top: 0; }
  .step { padding: 22px 24px; }
  .step:nth-child(odd)::after { top: 46px; }   /* линия по центру плитки при уменьшенном паддинге */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
}
@media (max-width: 900px) {
  .header-nav, .hdr-lk { display: none; }
  .safety-grid, .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .price-amount { font-size: 30px; line-height: 34px; }
  .trust-items { grid-template-columns: 1fr; gap: 12px; }
  .trust-item { justify-content: flex-start; padding: 0; }
  .trust-item + .trust-item { border-left: 0; }
  /* Планшет: одна колонка карточек-лент (3 колонки уже не влезают) */
  .pricing-card, .plan--half, .plan--third, .plan--full {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(160px, auto);
    grid-template-areas: "mark head price" "feat feat feat" "btn btn btn";
    grid-template-rows: auto;
  }
  .pricing-card .plan-features { margin: 18px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line-in); }
  .pricing-card .plan-price { flex-direction: row; align-items: baseline; gap: 10px; margin: 0 0 0 16px; padding: 0; border: 0; align-self: center; justify-content: flex-end; flex-wrap: wrap; }
  .pricing-card .plan-btn { margin: 20px 0 0; width: 100%; min-width: 0; justify-self: stretch; }
}
@media (min-width: 769px) {
  .nav-mobile, .nav-scrim { display: none !important; }
}
@media (max-width: 768px) {
  :root { --header-h: 56px; --card-pad: 16px; }
  .m-only { display: inline; }
  .d-only { display: none !important; }
  .container { padding: 0 20px; }
  .header .container { gap: 12px; }
  .nav-burger { display: flex; }
  .hdr-buy { display: none; }
  .nav-mobile { display: flex; }
  /* тап-зона логотипа-ссылки добирается вертикальным паддингом до 44px (кегль вордмарка не меняется).
     Футерный вордмарк — такая же ссылка на главную, и ему тоже нужна нормативная тап-зона. */
  .logo { font-size: 17px; }
  .header .logo, .footer-brand .logo { padding: 10px 0; }

  /* Первый экран: все 6 тарифов по-прежнему помещаются в 375×812 (требование владельца), но с воздухом:
     h1 28/32, подзаголовок 15/22, брифы 13/16. Место взято у плашки-УТП (.hero-usp): на мобиле она скрыта —
     тот же тезис «не выйдет — вернём деньги» стоит в полосе доверия сразу под тарифами и в модалке оплаты. */
  .pricing { padding: 12px 0 40px; }
  .hero { display: block; text-align: left; margin-bottom: 12px; }
  .hero h1 { font-size: 34px; line-height: 1.1; }
  .hero-sub { max-width: none; margin: 8px 0 0; font-size: 15px; line-height: 21px; letter-spacing: 0; }
  .hero-usp, .hero-pay, .hero-cta, .hero-visual { display: none; }
  .pricing > .container::before { display: none; }

  /* Витрина = компактные строки, все тарифы видны в один экран */
  .pricing-grid { display: flex; flex-direction: column; gap: 6px; }
  .pricing-cat { margin: 6px 0 0; gap: 8px; }
  .pricing-cat:first-child { margin-top: 0; }
  .pc-name { font-family: var(--font-text, Manrope, sans-serif); font-size: 15px; font-weight: 700; line-height: 1; color: var(--tx); }
    /* брендовая подсветка на компактных строках не нужна — марка-плитка уже несёт цвет */
  .plan--gpt::before, .plan--claude::before, .plan--gemini::before,
  .plan--gpt::after, .plan--claude::after, .plan--gemini::after { display: none; }
  .pricing-card, .plan--half, .plan--third, .plan--full {
    grid-template-columns: 30px minmax(0, 1fr) auto 28px;
    grid-template-areas: "mark head price btn" "brief brief brief brief";
    column-gap: 10px; row-gap: 0; align-items: center;
    padding: 8px 12px 8px; border-radius: 12px; min-height: 0;
    cursor: pointer;
  }
  .pricing-card:active { background: var(--surface-2); border-color: var(--line-2); }
  .plan-mark { width: 30px; height: 30px; border-radius: 8px; }
  .plan-mark svg { width: 17px; height: 17px; }
  .plan-head { align-self: center; min-height: 0; }
  .plan-head h3 { font-size: 15px; line-height: 20px; gap: 5px; flex-wrap: nowrap; white-space: nowrap; }
  .plan-desc { display: none; }
  .plan-tag { height: 18px; padding: 0 6px; font-size: 11px; }
  /* «Популярный» на строке — мини-бейдж вместо полного скрытия (featured отличался только тонкой рамкой) */
  .plan-tag--acc { height: 16px; padding: 0 4px; font-size: 10px; letter-spacing: 0; font-weight: 600; flex-shrink: 0; }
  .pricing-card .plan-price { flex-direction: column; }
  .plan-brief { grid-area: brief; display: block; margin-top: 3px; font-size: 13px; line-height: 16px; color: var(--tx-2); letter-spacing: 0;
    /* Раньше здесь было nowrap + ellipsis: на экранах ≤375px подпись резалась посреди слова
       («история чатов на…»). Тексты укорочены до ≤30 знаков, а если всё же не влезет —
       переносим на вторую строку: обрезанное слово выглядит как поломка. */
    overflow-wrap: anywhere; }
  .pricing-card .plan-price, .plan--half .plan-price, .plan--full .plan-price { flex-direction: column; align-items: flex-end; gap: 0; margin: 0; padding: 0; border: 0; text-align: right; align-self: center; }
  .price-amount { font-size: 17px; line-height: 20px; letter-spacing: -.02em; }
  .price-period { font-size: 12px; line-height: 14px; }
  .price-note { display: none; }
  .pricing-card--featured { background: #FFF9E8; box-shadow: inset 0 0 0 2px var(--ring); }
  .plan-features, .plan-note { display: none; }
  /* Кнопка = шеврон; тап по всей строке форвардит клик на кнопку (script.js).
     Селекторы (0,2,0) — чтобы перебить .plan-btn.btn из десктопной части. */
  .pricing-card .plan-btn, .plan--half .plan-btn, .plan--full .plan-btn {
    margin: 0; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%;
    font-size: 0; pointer-events: none; justify-self: end; position: relative;
    background: var(--acc-soft); box-shadow: none; border: 1px solid var(--acc-line); align-self: center; color: transparent;
  }
  /* ::before здесь = шеврон (на десктопе ::before primary-кнопки — шиммер, поэтому сбрасываем transform/z-index/animation) */
  .pricing-card .plan-btn::before {
    content: ''; position: absolute; inset: 0; z-index: auto; transform: none; animation: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314120E' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px no-repeat;
  }
  .pricing-card .plan-btn, .plan--half .plan-btn, .plan--full .plan-btn { transform: none !important; filter: none; }
  /* «Открываем оплату» на мобиле: шевроны НЕ крутятся все шестеро — приглушаются, статус показывает одна пилюля внизу */
  .pricing-card .plan-btn.loading { background: var(--acc-soft) !important; box-shadow: none !important; opacity: .45; }
  .pricing-card .plan-btn.loading::before { display: block; }
  .pricing-card .plan-btn.loading::after { display: none; }

  .trust-strip { margin-top: 20px; padding: 16px; gap: 14px; }
  .trust-items { flex-direction: column; gap: 10px; }
  .trust-item { font-size: 14px; align-items: flex-start; }
  .trust-item svg { margin-top: 1px; }
  /* Правый отступ = место под плавающую кнопку чата (48px + зазор): ряд платёжных марок больше не уезжает
     под FAB, «Крипта» не срезается */
  .trust-pay { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding-top: 14px; padding-right: 40px; border-top: 1px solid var(--line-in); justify-content: flex-start; min-width: 0; }
  /* Подпись «Принимаем к оплате» на телефоне съедала строку и выталкивала «Крипту» на вторую —
     марки говорят сами за себя, поэтому подпись прячем, а сам ряд ужимаем до одной строки. */
  .trust-pay .trust-pay-label { display: none; }
  .trust-pay .pay-marks { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; }
  .trust-pay .pay-mark { flex: 0 0 auto; }
  .trust-pay .pay-mark .pm-t { font-size: 11px; }
  .trust-oferta { text-align: left; }

  .section { padding: 56px 0; }
  .section-header { margin-bottom: 28px; }
  .section-header p { font-size: 15px; line-height: 22px; margin-top: 10px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .step:nth-child(odd)::after { display: none; }
  /* плитка-иконка слева на обе строки, номер — подписью под ней */
  .step-top { grid-row: 1 / 3; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; }
  .step-ico { width: 40px; height: 40px; border-radius: var(--r-sm); }
  .step-ico svg { width: 20px; height: 20px; }
  .step-number { font-family: var(--bp-mono); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: 1.04px; color: rgba(20,18,14,.42); opacity: 1;
  font-variant-numeric: tabular-nums lining-nums; }
  .step h3 { margin-top: 0; font-size: 16px; line-height: 24px; align-self: center; }
  .step p { grid-column: 2; margin-top: 4px; max-width: none; font-size: 14px; line-height: 20px; }
  .guarantee { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px; }
  .guarantee-ico { width: 44px; height: 44px; border-radius: 12px; }
  .guarantee-ico svg { width: 22px; height: 22px; }
  .guarantee h3 { font-size: 20px; line-height: 28px; }
  .guarantee p { font-size: 15px; line-height: 22px; }
  .safety-grid, .reviews-grid { grid-template-columns: 1fr; gap: 10px; }
  .safety-item { padding: 16px; }
  .safety-item h4 { font-size: 16px; }
  /* абзац — на всю ширину карточки, а не в 250px-колонке под заголовком (иначе 4 короткие рваные строки) */
  .safety-item p { grid-column: 1 / -1; margin-top: 8px; font-size: 14px; line-height: 20px; }
  .review-card { padding: 16px; }
  .review-card::before { font-size: 68px; right: 10px; }
  .review-text { font-size: 15px; line-height: 23px; margin-top: 12px; }
  .review-author { margin-top: 16px; }
  .faq-question { min-height: 60px; padding: 16px 0; font-size: 16px; line-height: 24px; }
  .faq-answer > p { overflow: hidden; margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-68, rgba(20,18,14,.68)); }
  .faq-item.open .faq-answer { padding-bottom: 18px; }
  .cta-card { padding: 32px 20px; }
  .cta-actions .btn { width: 100%; }
  /* Футер: две колонки (Навигация | Документы), тап-зоны ссылок 44px (были 20px при шаге 32) */
  .footer { padding: 40px 0 76px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: none; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-links, .footer-contact { gap: 0; }
  .footer-links a, .footer-contact a { min-height: 44px; display: flex; align-items: center; font-size: 15px; }
  .footer-links a::after, .footer-contact a::after { bottom: 10px; }
  .footer-hours { padding-top: 6px; }
  .footer-bottom { margin-top: 28px; }
  /* оферта под витриной: ссылки в тексте — с запасом по высоте строки */
  .trust-oferta { font-size: 13px; line-height: 22px; }

  /* Модалки на мобиле = bottom-sheet: снизу, с ручкой, скругление только сверху, безопасная зона; вход translateY */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px); overflow-y: auto; transform: translateY(24px);
  }
  .modal::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(20,18,14,.10); }
  .modal-overlay.active .modal { transform: none; }
  .modal-close { width: 44px; height: 44px; top: 10px; right: 10px; }   /* нормативная тап-зона пальца */
  .modal-close svg { width: 20px; height: 20px; }
  /* на узком экране подпись «Оплата через Lava» — отдельной строкой над марками */
  .pay-methods { row-gap: 8px; }
  .pay-methods-note { width: 100%; margin: 0; }
  .modal h2 { font-size: 22px; line-height: 28px; }
  .em-steps { margin-right: 44px; }
  .em-step + .em-step::before { margin: 0 8px; }
  .modal .order-summary { padding: 10px 12px; }
  .em-label { margin-top: 16px; }
  /* Окошко аренды — тот же шит снизу, что и «куда прислать доступ» (грабер, скругление только сверху,
     safe-area): два разных паттерна модалок на одной странице читались как разные продукты.
     Центрирование текста (.modal--center) остаётся, отдельного центрирования шита больше нет. */
  .modal--center .rent-ico { margin: 2px auto 14px; }
  #rentSwitch { margin-top: 8px; }

  /* FAB меньше и не перекрывает витрину: стартует скрытым (инлайн-скрипт), уезжает при скролле вниз */
  .chat-widget { bottom: calc(14px + env(safe-area-inset-bottom)); right: 12px; transition: transform .28s ease, opacity .28s ease; }
  .chat-toggle { width: 48px; height: 48px; }
  .chat-icon svg { width: 22px; height: 22px; }
  .chat-choice { bottom: 60px; }
  .chat-widget.hide { transform: translateY(160%); opacity: 0; pointer-events: none; }
}
@media (max-width: 520px) {
  .chat-close { display: flex; }
  /* Чат = bottom-sheet со скримом: страница за ним не скроллится (body:has), поле ввода над home-индикатором,
     панель сжимается под клавиатуру (max-height от dvh, лента сообщений flex без фикс. min-height), ручка сверху */
  .chat-panel { position: fixed; inset: auto 0 0 0; width: auto; border-radius: 20px 20px 0 0; bottom: 0; max-height: calc(100dvh - 12px); transform-origin: bottom center; }
  .chat-panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255,255,255,.2); z-index: 1; }
  .chat-header { padding-top: 20px; }
  .chat-messages { flex: 1 1 auto; min-height: 140px; max-height: none; }
  .chat-input-wrap { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat-widget:has(.chat-panel.open)::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(4,6,9,.55); animation: chat-scrim-in .2s var(--ease-out) both; }
  /* Пока шит открыт, у обёртки НЕ должно быть трансформа: transform на .chat-widget делает её
     containing block для position:fixed, и шит схлопывается в полоску 48px шириной ниже экрана
     (панель уезжает под нижнюю кромку — поле ввода становится недоступным). */
  .chat-widget:has(.chat-panel.open) { transform: none; opacity: 1; pointer-events: auto; }
  body:has(.chat-panel.open) { overflow: hidden; }
  .chat-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chat-suggest::-webkit-scrollbar { display: none; }
  .chat-chip:nth-child(n+4) { display: inline-block; }
  /* Тап-цели пальца 44px: чипы, закрыть, отправить, поле ввода */
  .chat-chip { padding: 13px 14px; font-size: 13px; }
  .chat-close { width: 44px; height: 44px; top: 10px; right: 10px; }
  .chat-input { height: 44px; }
  .chat-send { width: 44px; height: 44px; }
}
@keyframes chat-scrim-in { from { opacity: 0; } }
@media (max-width: 360px) {
  .price-amount { font-size: 16px; }
}
/* Тач: hover-состояния не «залипают» — все hover-правила выше завёрнуты в (hover: hover) */
@media (hover: none) {
  .btn-primary:hover { transform: none; }
  .pricing-card:hover { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-card); transform: none; }
}

/* ---------- Reveal (в самом конце: transition должен победить каскад) ----------
   Ловушка проекта: этот список transition ПЕРЕБИВАЕТ transition самих карточек (та же специфичность, ниже в файле).
   Поэтому (1) opacity здесь ВСЕГДА; (2) сдвиг появления идёт через `translate` (отдельное свойство), а hover-подъём — через
   `transform`, они не спорят; (3) список — надмножество hover-свойств карточек, а задержки reveal-delay-N заданы
   попозиционно и касаются ТОЛЬКО opacity/translate — иначе hover тормозил бы на 80–240 мс. */
.reveal-ready {
  opacity: 0; translate: 0 16px;
  transition: opacity .5s var(--ease-out), translate .5s var(--ease-out),
              transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), text-shadow var(--dur-2) var(--ease-out);
}
.reveal-ready.visible { opacity: 1; translate: 0 0; }
.reveal-delay-1.reveal-ready { transition-delay: .08s, .08s, 0s, 0s, 0s, 0s, 0s, 0s; }
.reveal-delay-2.reveal-ready { transition-delay: .16s, .16s, 0s, 0s, 0s, 0s, 0s, 0s; }
.reveal-delay-3.reveal-ready { transition-delay: .24s, .24s, 0s, 0s, 0s, 0s, 0s, 0s; }
/* Одно глобальное правило: любая анимация/переход выключаются по системной настройке */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .pricing::before, .pricing::after, .pricing > .container::before { animation: none !important; }
  .hv-stack { transform: none; }
  .chat-toggle::before { display: none; }
}

/* ── Промокод в модалке заказа ──────────────────────────────────────────────
   Свёрнут по умолчанию: обычная покупка остаётся в один шаг, поле разворачивает
   только тот, у кого код есть. Итоговую цену считает сервер — здесь только показ.
   Применённый код: строка ввода прячется, остаётся зелёный чип «CODE · −10% · −269 ₽ · убрать»
   (чистый CSS по классу .is-ok от script.js, без новых обработчиков). */
.em-promo-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 2px; padding: 0;
  background: none; border: 0; color: var(--tx-2); font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(20,18,14,.72);
  transition: color var(--dur-2) var(--ease-out);
}
.em-promo-toggle:hover { color: var(--tx); }
.em-promo-toggle[aria-expanded="true"] { display: none; }
.em-promo { margin-top: 10px; }
.em-promo-row { display: flex; gap: 8px; align-items: stretch; }
.em-promo-input { flex: 1 1 auto; min-width: 0; margin-top: 0; text-transform: uppercase; letter-spacing: .04em; }
.em-promo-input::placeholder { text-transform: none; letter-spacing: 0; }
.em-promo-go { flex: 0 0 auto; height: 48px; min-height: 0; padding: 0 18px; white-space: nowrap; font-size: 15px; }
.em-promo-msg { display: none; margin-top: 8px; font-size: 13px; line-height: 18px; }
.em-promo-msg.is-err { display: block; position: relative; padding-left: 22px; color: var(--danger); }
#emailForm:has(.em-promo-msg.is-err) .em-promo-input { border-color: var(--danger); box-shadow: none; }
.em-promo-msg.is-ok  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--acc-soft); border: 1px solid var(--acc-line); color: #147D5E; }
.em-promo-msg.is-ok b { color: var(--tx); font-weight: 700; letter-spacing: .03em; }
.em-promo-msg .em-promo-drop { flex: none; margin: -13px -8px -13px auto; color: var(--tx-3); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; min-height: 44px; padding: 0 8px; } /* тап-зона 44, как .os-promo-drop на pay */
.em-promo-msg .em-promo-drop:hover { color: var(--danger); }
.em-old { color: var(--tx-3); text-decoration: line-through; }
#emPromoBox:has(.em-promo-msg.is-ok) .em-promo-row { display: none; }

/* Узкие телефоны (≤400px): бейдж «Популярный» в компакт-строке налезал на цену
   (замер на 360px: правый край бейджа 248 при цене с 236; на 390 он ещё влезает). Строка featured и так
   отличается подсветкой и рамкой, поэтому на узких экранах бейдж убираем. */
@media (max-width: 380px) {
  .pricing-card .plan-tag--acc { display: none; }
  .pricing-card .plan-head { column-gap: 6px; }
}
/* Hero-карточки кликабельны: ведут в окно заказа своего тарифа */
.hv-card[data-buy] { cursor: pointer; }
.hv-card[data-buy]:hover { border-color: rgba(255,198,30,.22); box-shadow: none; }
.hv-card[data-buy]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── Как проходит подключение: полоска над тарифами (index) ── */
.how-strip { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.how-strip li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); color: var(--tx-2); font-size: 13.5px; line-height: 19px; text-wrap: pretty; }
.how-strip li b { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--tx); background: rgba(255,198,30,.22); margin-top: -1px; }
/* Мобила: витрина обязана оставаться «все тарифы в один экран» (см. память), а шапка и
   подписи строк уже говорят «карта РФ / СБП, ~15 минут, на ваш аккаунт без пароля» —
   полоску прячем; подробности на мобиле даёт .em-how в окне заказа. */
@media (max-width: 720px) { .how-strip { display: none; } }
/* ── Окно заказа: «что дальше» под кнопкой (вместо одной строки гарантии) ── */
/* Это СПРАВКА, не выбор: подпись сверху, маркер — галочка (кружки клиенты принимали за радиокнопки и спрашивали «надо ли что-то менять здесь?»). */
.em-how-cap { margin-top: 4px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.em-how { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 6px; }
.em-how li { position: relative; padding-left: 20px; color: var(--tx-2); font-size: 13.5px; line-height: 19px; }
.em-how li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--acc); border: 0; }
/* ── «В наличии» (склад): чип в заголовке карточки (десктоп) и строка-бриф (мобила) ── */
/* «В наличии» — про мгновенную выдачу, поэтому цвет успеха, а не жёлтый:
   рядом с банановым «Популярный» два жёлтых бейджа сливались в один. */
.plan-tag--stock { background: rgba(20,125,94,.10); color: #0F6A50; font-weight: 600;
  font-size: 11px; letter-spacing: .02em; height: 24px; padding: 0 10px 0 8px; border-radius: 7px; }
.plan-tag--stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #147D5E; margin-right: 7px; box-shadow: none; }
.plan-brief--stock { color: var(--tx-2); }
.em-how--stock li:last-child { color: var(--tx-2); }
/* На мобиле чип «В наличии» компактный: место в компакт-строке дорогое, но факт наличия
   продаёт сильнее, чем описание, — а критерий выбора остаётся в .plan-brief. */
@media (max-width: 720px) {
  .pricing-card .plan-tag--stock { height: 16px; padding: 0 6px 0 4px; font-size: 10px; letter-spacing: 0; }
  .pricing-card .plan-tag--stock::before { width: 4px; height: 4px; margin-right: 4px; box-shadow: none; }
}
/* Кнопки-уточнения после автоответа в чате */
.chat-suggest--auto { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px 44px; padding: 0; background: transparent; }

/* ── Блок «Уроки по Claude» (раздел /academy) ── */
.acad-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acad-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--tx); text-decoration: none; transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.acad-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-card), var(--sh-lift); }
.acad-kicker { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }
.acad-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 24px; }
.acad-desc { font-size: 14px; line-height: 20px; color: var(--tx-2); flex: 1; text-wrap: pretty; }
.acad-meta { font-family: var(--bp-mono); font-weight: 500; font-size: 12.5px; color: var(--tx-3); }
.acad-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-top: clamp(26px, 3vw, 36px); }
.acad-note { font-size: 13.5px; color: var(--tx-3); }
@media (max-width: 900px) { .acad-grid { grid-template-columns: 1fr; gap: 12px; } .acad-card { padding: 18px; border-radius: 16px; } .acad-name { font-size: 16px; line-height: 21px; } .acad-desc { font-size: 13.5px; line-height: 19px; } }

/* ── Призыв на середине страницы ── */
.midcta-sec { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.midcta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--acc-soft); }
.midcta-tx h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.midcta-tx p { margin: 0; color: var(--tx-2); font-size: 15px; line-height: 21px; max-width: 560px; text-wrap: pretty; }
.midcta-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.midcta-note { font-size: 13px; color: var(--tx-3); white-space: nowrap; }
@media (max-width: 760px) {
  .midcta { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; border-radius: 16px; }
  .midcta-act { align-items: stretch; }
  .midcta-act .btn { width: 100%; }
  .midcta-note { white-space: normal; text-align: center; }
}

/* ── Липкая полоса покупки (телефон) ── */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--paper, #FAF7F0); border-top: 1px solid rgba(20,18,14,.10); }
.buybar[hidden] { display: none; }
.buybar-tx { display: flex; flex-direction: column; font-size: 12.5px; line-height: 15px; color: var(--tx-3); }
.buybar-tx b { font-size: 15px; line-height: 19px; color: var(--tx); }
.buybar-btn { flex-shrink: 0; padding: 12px 18px; border-radius: 12px; background: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: none; }
.buybar-btn:active { transform: translateY(1px); }
/* Кнопка чата не должна спорить с полосой */
body.has-buybar .chat-toggle { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .buybar { display: none !important; } }

/* Довод доверия в первом экране телефона: плашка возврата, платёжки и полоса шагов там скрыты,
   а шесть цен без единого аргумента читаются как «просто дорого». */
.hero-trust { display: none; }
@media (max-width: 768px) {
  .hero-trust { display: block; margin: 8px 0 0; font-size: 13px; line-height: 18px; color: var(--tx-3); text-wrap: pretty; }
  .hero-trust b { color: var(--tx-2); font-weight: 600; }
}

/* ── Единый ритм блоков ───────────────────────────────────────────────────────
   Метка раздела над заголовком — тот же приём, что в блоке «Уроки»: взгляд сразу
   понимает, о чём секция, до чтения заголовка. */
.sec-kicker { display: inline-block; margin-bottom: 12px; font-family: var(--font-text, Manrope, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }

/* Карточки блоков — одна поверхность и один отклик на всех секциях */
.step, .safety-item, .review-card, .acad-card, .cta-card, .midcta {
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.step:hover, .safety-item:hover, .review-card:hover, .acad-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: none; }
.steps, .safety-grid, .reviews-grid, .acad-grid { gap: 18px; }
.safety-grid { margin-top: 0; }

/* Крупные призывы — капсулой: главный элемент блока должен читаться как кнопка,
   а не как ещё один прямоугольник среди карточек */
.btn-lg { border-radius: 999px; padding-left: 26px; padding-right: 26px; }
.cta-card { padding: clamp(36px, 5vw, 56px) clamp(22px, 4vw, 40px); }
.cta-card h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.035em; }
.cta-card p { font-size: 17px; line-height: 26px; }

/* FAQ: вопрос крупнее, разделители легче */
.faq-question { font-size: 19px; min-height: 76px; }
.faq-item { border-bottom-color: var(--line-in, rgba(20,18,14,.05)); }
.faq-answer > p { overflow: hidden; margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-68, rgba(20,18,14,.68)); }

/* Блок уроков — эталон ритма, подтягиваем к нему остальные размеры */
.acad-card { padding: 24px; }
.acad-name { font-size: 19px; line-height: 25px; }
.acad-desc { font-size: 14.5px; line-height: 21px; }

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .section-header { margin-bottom: 24px; }
  .sec-kicker { display: inline-block; margin-bottom: 12px; font-family: var(--font-text, Manrope, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }
  .section-header p { font-size: 16px; line-height: 24px; }
  .step, .safety-item, .review-card, .acad-card, .midcta { border-radius: 16px; }
  .steps, .safety-grid, .reviews-grid, .acad-grid { gap: 10px; }
  .faq-question { font-size: 17px; min-height: 64px; }
}

/* ── Окно заказа: короче на экран решения ──────────────────────────────────
   Подробности не выбрасываем, а прячем под строку — длинная простыня в момент
   оплаты читается как «сейчас будет сложно». */
.em-more { margin: 12px 0 0; }
.em-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 18px; color: var(--tx-3); padding: 4px 0; min-height: 28px; }
.em-more > summary::-webkit-details-marker { display: none; }
.em-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform var(--dur-2) var(--ease-out); }
.em-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.em-more > summary:hover { color: var(--tx-2); }
.em-more .em-how { margin: 8px 0 2px; }
.em-quick { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; line-height: 18px; color: var(--tx-3); text-wrap: pretty; }
.em-quick::before { content: ""; flex-shrink: 0; width: 6px; height: 10px; margin-top: 3px; border: solid #147D5E; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.consent-note { margin-top: 10px; font-size: 11px; line-height: 16px; color: var(--ink-50, rgba(20,18,14,.50)); }

/* Секция «Гарантии» и промежуточный призыв стоят на ОДНОЙ сетке: карточка гарантии,
   ряд из трёх плиток и призыв обязаны совпадать по левому и правому краю. Разные
   пределы ширины у соседних блоков читаются как перекос вёрстки. */
.guarantee, #safety .safety-grid, .midcta { max-width: 980px; margin-inline: auto; }
.guarantee h3 { font-size: 22px; line-height: 30px; }
.midcta { gap: 28px; }
.midcta-act { align-items: center; }

/* ── Финальный блок: два пути вместо одного вопроса на двоих ── */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: none; margin-inline: 0; }
.way { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 18px; background: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.14);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.way:hover { transform: none; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); }
.way--buy { border-color: transparent; background: var(--card-hi, #FFFCF2);
  box-shadow: inset 0 0 0 1.5px var(--ring, rgba(240,180,10,.70)); }
.way-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--glass); color: var(--tx-2); }
.way--buy .way-ico { background: rgba(255,198,30,.22); color: var(--tx); }
.way-ico svg { width: 21px; height: 21px; }
.way h3 { font-size: 21px; line-height: 28px; letter-spacing: -.02em; }
.way p { flex: 1; margin: 0; font-size: 15px; line-height: 22px; color: var(--tx-2); text-wrap: pretty; }
.way .btn { margin-top: 6px; gap: 8px; }
.way .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.way-note { font-size: 12.5px; line-height: 17px; color: var(--tx-3); text-align: left; }
@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; gap: 10px; }
  .way { padding: 20px; border-radius: 16px; }
  .way h3 { font-size: 19px; line-height: 25px; }
}

/* ── Покупка из-под кабинета: адрес аккаунта вместо поля ввода ── */
.em-acc { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 13px;
  background: rgba(255,198,30,.22); border: 1px solid rgba(255,198,30,.22); margin: 14px 0 0; }
.em-acc[hidden], .em-bal[hidden] { display: none; }
.em-acc-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,198,30,.22); color: var(--tx); }
.em-acc-ico svg { width: 13px; height: 13px; }
.em-acc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.em-acc-body b { font-size: 14.5px; line-height: 19px; color: var(--tx); overflow-wrap: anywhere; font-weight: 600; }
.em-acc-body span { font-size: 12px; line-height: 16px; color: var(--tx-3); }
.em-acc-alt { flex: none; background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13px;
  color: var(--tx-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.em-acc-alt:hover { color: var(--tx); }

/* ── Списание баллов ── */
.em-bal { display: flex; align-items: center; gap: 10px; padding: 10px 13px; margin-bottom: 12px; border-radius: 13px;
  background: var(--glass); border: 1px solid var(--line); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.em-bal:hover { border-color: var(--line-2); }
.em-bal input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--acc); cursor: pointer; }
.em-bal-body { display: flex; flex-direction: column; gap: 2px; }
.em-bal-body b { font-size: 14px; line-height: 19px; color: var(--tx); font-weight: 600; }
.em-bal-note { font-size: 12px; line-height: 16px; color: var(--tx-3); }
@media (max-width: 520px) {
  .em-acc { padding: 11px 12px; gap: 9px; }
  .em-acc-alt { font-size: 12.5px; }
}

/* ── Подбор тарифа: всплывающее окно ── */
.qz-modal { position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease-out); }
body.qz-open .qz-modal { opacity: 1; pointer-events: auto; }
.qz-back { position: absolute; inset: 0; background: rgba(20,18,14,.55); }
.qz { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: none; transform: translateY(14px) scale(.985);
  transition: transform var(--dur-3, .34s) var(--ease-out); }
body.qz-open .qz { transform: none; }
.qz-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.qz-tag { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--tx); }
.qz-x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(20,18,14,.05); border: 0; color: var(--tx-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.qz-x:hover { background: rgba(20,18,14,.10); color: var(--tx); transform: rotate(90deg); }
.qz-x svg { width: 18px; height: 18px; stroke-width: 2; }
.qz-head { text-align: center; margin-bottom: 22px; }
.qz-num { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 9px; }
.qz-head h3 { font-size: 25px; line-height: 32px; letter-spacing: -.02em; }
.qz-head p { margin-top: 6px; font-size: 14.5px; line-height: 21px; color: var(--tx-3); }
.qz-opts { display: grid; gap: 10px; }
.qz-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 16px 18px; border-radius: 16px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); color: var(--tx); font: inherit;
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.qz-opt:hover { transform: translateY(-2px); border-color: rgba(255,198,30,.22); background: rgba(255,198,30,.22); }
.qz-opt.is-on { border-color: var(--acc); background: rgba(255,198,30,.22); }
.qz-opt b { font-size: 16px; line-height: 22px; font-weight: 600; }
.qz-opt span { font-size: 13.5px; line-height: 19px; color: var(--tx-3); }
.qz-foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.qz-skip { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px; color: var(--tx-3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qz-skip:hover { color: var(--tx); }
.qz-bar { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qz-bar i { display: block; height: 100%; border-radius: 99px; background: var(--acc); transition: width var(--dur-2) var(--ease-out); }
.qz-results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qz-res { display: flex; flex-direction: column; gap: 7px; padding: 22px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,198,30,.22), rgba(255,198,30,.22)); border: 1px solid rgba(255,198,30,.22); }
.qz-res.is-alt { background: var(--glass); border-color: var(--line); }
.qz-res-cap { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.qz-res.is-alt .qz-res-cap { color: var(--tx-3); }
.qz-res h3 { font-size: 21px; line-height: 27px; letter-spacing: -.02em; }
.qz-res p { flex: 1; margin: 0; font-size: 14px; line-height: 20px; color: var(--tx-2); }
.qz-res-price { font-size: 15px; line-height: 21px; color: var(--tx); font-weight: 600; margin-top: 2px; }
.qz-res .btn { margin-top: 8px; }
.qz-foot--res { justify-content: space-between; }
.qz-all { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 14px; color: var(--tx-2); cursor: pointer; }
.qz-all:hover { color: var(--tx); }
@media (max-width: 700px) {
  /* Лист снизу: до центра экрана большим пальцем не дотянуться, а тут все ответы под рукой */
  .qz-modal { padding: 0; align-items: flex-end; }
  .qz { max-width: none; max-height: 88vh; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); transform: translateY(24px); }
  .qz-head h3 { font-size: 21px; line-height: 28px; }
  .qz-opt { padding: 14px 15px; border-radius: 14px; }
  .qz-results { grid-template-columns: 1fr; }
  .qz-foot--res { flex-direction: column-reverse; align-items: stretch; text-align: center; gap: 10px; }
}

/* ── Корзина (только для вошедших) ── */
.cart-btn { position: fixed; right: 22px; bottom: 96px; z-index: 940; width: 54px; height: 54px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--tx);
  box-shadow: none; transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.cart-btn.has-items { display: flex; }
.cart-btn:hover { transform: translateY(-2px); border-color: var(--tx); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; background: var(--acc); color: var(--acc-ink);
  font-size: 12px; font-weight: 700; }
.cart-back { position: fixed; inset: 0; z-index: 960; background: rgba(20,18,14,.16); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out); }
body.cart-open .cart-back { opacity: 1; pointer-events: auto; }
.cart-panel { position: fixed; top: 0; right: 0; z-index: 970; width: min(420px, 100%); height: 100%;
  display: flex; flex-direction: column; background: var(--bg-2, #14161a); border-left: 1px solid var(--line);
  transform: translateX(102%); transition: transform var(--dur-3, .34s) var(--ease-out); }
body.cart-open .cart-panel { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.cart-head b { font-size: 19px; letter-spacing: -.01em; }
.cart-x { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--tx-2); cursor: pointer; }
.cart-x:hover { color: var(--tx); }
.cart-x svg { width: 16px; height: 16px; }
.cart-list { flex: 1; overflow-y: auto; padding: 14px 22px; }
.cart-empty { font-size: 14.5px; line-height: 21px; color: var(--tx-3); margin: 18px 0; }
.cart-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-name b { font-size: 15px; line-height: 21px; }
.cart-name span { font-size: 12.5px; color: var(--tx-3); }
.cart-qty { flex: none; display: flex; align-items: center; gap: 2px; background: var(--glass); border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
.cart-qty button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--tx-2); font-size: 16px; cursor: pointer; }
.cart-qty button:hover:not(:disabled) { background: var(--surface); color: var(--tx); }
.cart-qty button:disabled { opacity: .35; cursor: default; }
.cart-qty span { min-width: 18px; text-align: center; font-size: 14px; font-weight: 600; }
.cart-sum { flex: none; font-size: 15px; min-width: 74px; text-align: right; }
.cart-foot { padding: 16px 22px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cart-total span { font-size: 14px; color: var(--tx-3); }
.cart-total b { font-size: 22px; letter-spacing: -.02em; }
.cart-bal { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 14px; color: var(--tx-2); cursor: pointer; }
.cart-bal input { width: 17px; height: 17px; accent-color: var(--acc); cursor: pointer; }
.cart-note { margin-top: 10px; font-size: 12.5px; line-height: 17px; color: var(--tx-3); }
.cart-err { margin-top: 10px; font-size: 13px; line-height: 18px; color: #ff9b9b; }
/* Кнопка «в корзину» на карточке тарифа */
.cart-add { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 38px; margin-top: 8px; white-space: nowrap;
  border-radius: 999px; background: none; border: 1px solid var(--line); color: var(--tx-3); cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.cart-add:hover { color: var(--tx); border-color: var(--line-2); }
.cart-add svg { width: 14px; height: 14px; }
@media (max-width: 768px) {
  .cart-btn { right: 16px; bottom: 150px; width: 48px; height: 48px; }
  .cart-panel { width: 100%; }
  .cart-add { display: none; }              /* мобильная витрина: строка ведёт в заказ, вторая кнопка мешает */
}

/* ── Окна на телефоне: лист снизу ──────────────────────────────────────────
   Одинаково для окна заказа, подбора и корзины. Карточка по центру экрана
   заставляет тянуться до кнопок, лист держит их под большим пальцем. */
@media (max-width: 700px) {
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; max-height: 88dvh;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
    transform: translateY(26px); opacity: 1;
  }
  .modal-overlay.active .modal { transform: none; }
  /* «Ручка» — привычный признак листа: его тянут и закрывают свайпом */
  .modal::before, .qz::before, .cart-panel::before {
    content: ''; position: sticky; top: 0; display: block;
    width: 38px; height: 4px; margin: -6px auto 12px; border-radius: 99px;
    background: rgba(20,18,14,.10);
  }
  .modal-close { top: 10px; right: 12px; }
  .cart-panel { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: auto; max-height: 88dvh;
    border-radius: 22px 22px 0 0; border-left: 0; border-top: 1px solid var(--line); transform: translateY(102%); }
  body.cart-open .cart-panel { transform: none; }
  .cart-head { padding-top: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   МИНИМАЛИСТИЧНЫЙ СЛОЙ
   Меньше рамок, больше воздуха; акцент — только на действии.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Первый экран ── */
.hero { display: block; max-width: 940px; margin-inline: 0; text-align: left; padding: clamp(64px, 8vw, 112px) 0 0; }
/* H1 бренда: Unbounded 800, трекинг −4.5%. */
.hero h1 { font-family: var(--font-display); font-size: 56px; line-height: 1.05; letter-spacing: -.05em;
   font-weight: 800; }
/* Заголовок набирается одним цветом: жёлтый текст запрещён (1.4:1), а Signal
   по брендбуку живёт в метках и ссылках и занимает ≤5% площади — половина
   H1 фиолетовым это уже второй основной цвет, а не акцент. */
.h1-acc { color: inherit; }
.hero-sub { max-width: 34em; margin: 20px 0 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; color: var(--tx-2); }
.hero-cta { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-link { font-size: 16px; color: var(--tx-2); text-decoration: none; }
.hero-link:hover { color: var(--tx); }
.hero-link::after { content: ' →'; }
.hero-note { margin-top: 20px; font-size: 14px; line-height: 21px; color: var(--tx-3); }
.hero-pay { display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-top: 30px; color: var(--tx-3); }
.hero-pay .pay-marks { display: contents; }
.hero-pay .pay-mark { display: inline-flex; align-items: center; color: var(--tx-3); opacity: .8; }
.hero-pay .pay-mark svg { display: block; }
.hero-pay .icn { width: 16px; height: 16px; }
.hero-pay-note { flex: 1 0 100%; margin-top: 4px; text-align: center; font-size: 12.5px; color: var(--tx-3); }

/* Декоративные слои первого экрана больше не нужны: их роль выполняет витрина */
.hero-visual, .hero-usp, .hero-trust, .hero-bg, .hero::before, .hero::after { display: none !important; }

/* ── Шаги подключения: ряд без рамок ── */
.how-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; max-width: 980px;
  margin: clamp(52px, 7vw, 88px) auto 0; padding: 0; list-style: none; background: none; border: 0; }
.how-strip li { display: block; padding: 0; background: none; border: 0; border-radius: 0; }
.how-strip li b { display: block; margin-bottom: 8px; width: auto; height: auto; background: none; color: var(--tx);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.how-strip li span { font-size: 15px; line-height: 23px; color: var(--tx-2); }
.how-strip { margin-bottom: clamp(44px, 6vw, 76px); }

/* ── Витрина: карточка без рамки, только мягкая поверхность ── */
/* Карточка бренда: Paper на Sand, радиус 22, тонкая чернильная граница.
   На тёмной теме её роль играла тень — на светлом нужна именно граница. */
.pricing-card { background: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1.5px var(--hairline);
  border-radius: 18px; }
.pricing-card:hover { transform: none; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); }
.pricing-card.is-featured, .pricing-card--featured { border: 0; box-shadow: inset 0 0 0 1.5px var(--ring); }
/* Чернила на банановой плашке: жёлтым текст не набираем. */
.plan-badge { background: var(--acc); border: 0; padding: 3px 8px; border-radius: var(--bp-r-badge, 6px);
  color: var(--acc-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.stock-badge { background: none; border: 0; padding: 0; color: var(--tx-3); font-size: 12px; }
.stock-badge i, .stock-badge span i { display: none; }

/* ── Секции: заголовки крупнее, подписи тише ── */
.section-header { text-align: left; max-width: 720px; margin-inline: 0; }
.section-header h2 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.14; letter-spacing: -.04em; }
.section-header p { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; color: var(--tx-3); }
.sec-kicker { display: inline-block; margin-bottom: 12px; font-family: var(--font-text, Manrope, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }

/* ── Гарантии ──────────────────────────────────────────────────────────────
   Обещание про возврат — плашка со щитом: это главный довод секции, голым
   текстом он терялся между цифрами и карточками. В карточках возвращены
   значки: без них заголовки висели в пустой колонке. */
#safety .guarantee { display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  align-items: start; max-width: 760px; margin-inline: 0; padding: 26px 28px;
  background: #FFFCF2; border: 0; box-shadow: inset 0 0 0 1.5px var(--ring); border-radius: 18px; }
#safety .guarantee:hover { border: 0; box-shadow: inset 0 0 0 1.5px var(--ring); }
#safety .guarantee-ico { display: flex; width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,198,30,.34); color: var(--tx); }
#safety .guarantee-ico svg { width: 26px; height: 26px; }
#safety .guarantee h3 { font-size: clamp(21px, 2.3vw, 26px); line-height: 1.24; letter-spacing: -.02em; }
#safety .guarantee p { margin: 10px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 25px; color: var(--tx-2); }
#safety .safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: clamp(24px, 3vw, 36px) 0 0; }
#safety .safety-item { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 6px;
  align-items: center; padding: 22px 24px; background: #FFFFFF; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.14); border-radius: 18px; }
#safety .safety-item:hover { transform: none; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.22); }
#safety .si-ico { display: flex; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(20,18,14,.05); color: var(--tx); }
#safety .safety-item h4 { font-size: 18px; line-height: 25px; }
#safety .safety-item p { grid-column: 2; margin-top: 0; font-size: 14.5px; line-height: 22px; color: var(--tx-2); }

/* ── Промежуточный призыв ── */
.midcta { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  max-width: 980px; padding: 0; background: none; border: 0; box-shadow: none; }
.midcta-tx h2 { font-size: clamp(20px, 2.2vw, 26px); }
.midcta-tx p { color: var(--tx-3); }

/* ── Курсы ── */
.acad-grid { gap: 34px; }
.acad-card { padding: 22px; background: var(--card, #FFFFFF); border: 0;
  box-shadow: inset 0 0 0 1.5px var(--hairline, rgba(20,18,14,.10)); border-radius: 18px; }
.acad-card:hover { transform: none; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); background: var(--card, #FFFFFF); }
.acad-card:hover .acad-name { color: var(--tx); }
.acad-kicker { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }
.acad-name { font-size: 18px; line-height: 25px; transition: color var(--dur-1) var(--ease-out); }
.acad-desc { color: var(--tx-3); }
.acad-meta { font-family: var(--bp-mono); font-weight: 500; color: var(--tx-3); opacity: .75; }

/* ── Два пути в финале ── */
.way { padding: 28px; background: #FFFFFF; border: 0;
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.14); border-radius: 18px; }
.way:hover { transform: none; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.22); }
.way-ico { display: none; }
.ways { gap: 20px; max-width: none; }
.way h3 { font-size: 20px; line-height: 27px; }
.way p { color: var(--tx-2); }

/* ── Отзывы и FAQ: тоньше границы, ровнее ритм ── */
.review-card { background: var(--card, #FFFFFF); border: 0;
  box-shadow: inset 0 0 0 1.5px var(--hairline, rgba(20,18,14,.10)); border-radius: 18px; padding: 24px; }
.review-card:hover { transform: none; border: 0; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); }
.reviews-grid { gap: 40px; }
.faq-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq-item:hover { border-color: var(--line); }

/* ── Мобильный ритм ── */
@media (max-width: 760px) {
  .hero { padding-top: 34px; }
  .hero-cta { gap: 16px; }
  .hero-cta .btn { width: 100%; }
  .how-strip { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }
  #safety .safety-grid { grid-template-columns: 1fr; gap: 28px; }
  .ways { gap: 32px; }
  .acad-grid { gap: 28px; }
  .reviews-grid { gap: 30px; }
}

/* Фоновая подсветка первого экрана — почти незаметная: цветной туман спорит
   с минимализмом и «пачкает» белый заголовок. */
.hero-bg, .bg-blob, .blob { opacity: .35 !important; filter: blur(90px) !important; }

/* Метки тарифа: «Популярный» — банановая плашка, «В наличии» — зелёная.
   Разный цвет нужен, чтобы два бейджа рядом не сливались в одно пятно. */
.pricing-card .plan-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.pricing-card .plan-tag--acc { color: var(--acc-ink); background: var(--acc);
  letter-spacing: .08em; text-transform: uppercase; }
.pricing-card .plan-tag--stock { color: #0F6A50; background: rgba(20,125,94,.10); font-weight: 600; }
.pricing-card .plan-tag--stock::before { display: inline-block; content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: #147D5E; margin-right: 7px; }

.plan-features li { color: var(--tx-3); }

/* Карточка тарифа по спеке: белая, радиус 18, обводка 1.5 px чернил 10%. */
.pricing-card { border: 0; box-shadow: inset 0 0 0 1.5px var(--hairline);
  background: #FFFFFF; border-radius: 18px; }
.pricing-card.is-featured, .pricing-card--featured {
  background: #FFF9E8; box-shadow: inset 0 0 0 2px var(--ring); }
.pricing-card::before, .pricing-card::after { display: none !important; }
.pricing-card:hover { box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); transform: none; }
.pricing-card--featured:hover { box-shadow: inset 0 0 0 1.5px var(--ring); }
.plan-mark { background: rgba(20,18,14,.05) !important; box-shadow: none !important; }
.plan-price .price-amount { letter-spacing: -.04em; }
.plan-price .price-period { color: var(--tx-3); }
/* Одна акцентная кнопка на витрину: остальные — спокойные */
.pricing-card .btn-secondary { background: transparent; border: 0; color: var(--tx); }
.pricing-card .btn-secondary:hover { background: rgba(20,18,14,.05); }

/* Кнопки: плоские, без ореола */
.btn-primary { box-shadow: none !important; }
.btn-primary:hover { box-shadow: none !important; transform: none; filter: brightness(1.06); }

.btn-lg { border-radius: var(--bp-r-button, 13px); }

/* Карточки тарифов: один нейтральный тон для всех брендов — цвет остаётся
   только в логотипе и в кнопке, иначе витрина пестрит тремя палитрами. */
/* Карточка бренда: Paper на песочной странице + тонкая чернильная граница.
   Полупрозрачная белая заливка работала на тёмном фоне, на светлом её не видно. */
.pricing-card.plan--gpt, .pricing-card.plan--claude, .pricing-card.plan--gemini,
.plan--gpt, .plan--claude, .plan--gemini {
  background: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1.5px var(--hairline); }
.pricing-card--featured.plan--gpt, .pricing-card--featured.plan--claude, .pricing-card--featured.plan--gemini {
  background: var(--card-hi); box-shadow: inset 0 0 0 1.5px var(--ring); }
.pricing-cat { border: 0; background: none; }

/* Чередование по спеке: бумага → песок → бумага, третьего фона нет. */
.section--alt { background: var(--bg-2); }
.section--alt::before, .section--alt::after { display: none !important; }

/* Вторичная кнопка: спокойная, но читаемая */
/* Вторичная кнопка бренда: прозрачная с обводкой 1.5 px, на наведении —
   только смена фона. */
.btn-secondary { background: transparent; border: 0; color: var(--tx);
  box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18); }
.btn-secondary:hover { background: rgba(20,18,14,.05); color: var(--tx); }

/* Полоса доверия: строка, а не карточка */
.trust-strip { background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin-top: clamp(34px, 5vw, 56px); }
.trust-item { color: var(--tx-3); }
.trust-item .icn { color: var(--tx-3); opacity: .7; }

@media (max-width: 768px) {
  .pricing-card .plan-tag { display: none; }
  .trust-items { grid-template-columns: 1fr; gap: 12px; }
  .trust-item { justify-content: flex-start; padding: 0; }
}

/* Первый экран заканчивается строкой оплаты — до витрины нужен воздух,
   иначе тарифы «наезжают» на призыв. */
.hero { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(48px, 5.5vw, 84px); }

/* ══════════════════════════════════════════════════════════════════════════
   РАЗДЕЛЕНИЕ БЛОКОВ
   ══════════════════════════════════════════════════════════════════════════ */

.section { position: relative; padding: clamp(72px, 6.6vw, 116px) 0; }

/* Волосяная линия на стыке секций — по ширине контейнера, не во весь экран:
   так стык виден, но страница не превращается в таблицу. */
.section + .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 64px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,18,14,.10) 12%, rgba(20,18,14,.10) 88%, transparent);
}
/* Витрина размечена своим классом, поэтому стык с ней описываем отдельно */
#pricing + .section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1160px, calc(100% - 64px)); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,18,14,.10) 12%, rgba(20,18,14,.10) 88%, transparent);
}

/* Промежуточный призыв — связка между главами, ритм у него компактнее */
.section.midcta-sec { padding-top: clamp(48px, 6vw, 78px); padding-bottom: clamp(40px, 4.5vw, 58px); }

/* Единый формат шапки секции */
.section-header { text-align: left; max-width: 760px; margin: 0 0 clamp(40px, 4.4vw, 62px); }
.sec-kicker { display: inline-block; margin-bottom: 12px; font-family: var(--font-text, Manrope, sans-serif);
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--tx); }
.section-header h2 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.14; letter-spacing: -.04em; }
.section-header p { margin-top: 16px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: var(--tx-3); }

/* Витрина: заголовок отделён от карточек тем же ритмом, что и в других секциях */
#pricing .section-header { margin-top: clamp(20px, 3vw, 44px); }
.pricing-cat { margin-top: clamp(30px, 4vw, 52px); }
.pricing-cat:first-of-type { margin-top: 0; }

/* Прежние точечные правки ритма больше не нужны — ритм один на все секции */
#how-it-works { padding-bottom: clamp(84px, 10vw, 148px); }

@media (max-width: 760px) {
  .section { padding: clamp(48px, 9vw, 64px) 0; }
  .section + .section::before { width: calc(100% - 32px); }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: 26px; line-height: 1.15; }
}

/* Шапка: вошедший клиент вместо обезличенного «Кабинет» */
.hdr-lk.is-in { color: var(--tx); }
.hdr-lk.is-in .icn { color: var(--tx); }
.hdr-lk-pts { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-left: 6px; border-radius: 999px; background: rgba(255,198,30,.22); color: var(--tx);
  font-size: 12px; font-weight: 700; }
@media (max-width: 900px) { .hdr-lk-pts { display: none; } }

/* Автозаполнение браузера не должно белить поля на тёмном фоне.
   Chrome игнорирует background у автозаполненных полей — перекрываем тенью внутрь. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--tx, #14120E);
  -webkit-box-shadow: none;
  box-shadow: none;
  caret-color: var(--tx, #14120E);
  transition: background-color 9999s ease-out 0s;
}

/* ── Мобильное меню: панель, а не выпадающая полка ── */
.nav-mobile { padding: 6px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--paper, #FAF7F0);
  border-bottom: 0; box-shadow: none; max-height: calc(100dvh - 60px); overflow-y: auto; }
.nav-mobile a:not(.btn):not(.nav-mobile-tg) { min-height: 54px; padding: 14px 8px 14px 2px; font-size: 17px;
  font-weight: 500; color: var(--tx); border-bottom: 1px solid var(--line); }
.nav-mobile a:not(.btn):not(.nav-mobile-tg):last-of-type { border-bottom: 0; }
/* Стрелка — только у ссылок, которые действительно уводят на другую страницу.
   У якорей внутри страницы она обещала переход, которого не происходит. */
.nav-mobile a:not(.btn)::after { display: none; }
.nav-mobile a.is-page::after { display: block; opacity: .45; }
.nav-mobile-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line); }
.nav-mobile-tg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  font-size: 15px; color: var(--tx-2); text-decoration: none; }
.nav-mobile-tg .icn { width: 17px; height: 17px; }
.nav-mobile-tg:active { color: var(--tx); }

/* Кольцо фокуса: аккуратный контур вместо жирной белой рамки браузера */
.nav-burger:focus-visible, .nav-mobile a:focus-visible, .hdr-lk:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 12px; }
.nav-burger:focus:not(:focus-visible) { outline: none; }

/* ── Цифры опыта: крупно, без плашек ── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; max-width: 100%;
  margin: 0 0 clamp(34px, 4vw, 52px); padding: 0; list-style: none; text-align: left; }
.facts li { display: flex; flex-direction: column; gap: 4px; }
.facts b { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.035em; color: var(--tx); }
.facts span { font-size: 13.5px; line-height: 19px; color: var(--tx-3); }
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 22px 14px; margin-bottom: 34px; }
  .facts b { font-size: 26px; }
  .facts span { font-size: 12.5px; }
}

/* ── Отзывы: горизонтальная лента ── */
.reviews-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 8px; margin: 0 -20px; padding-inline: 20px;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.reviews-rail::-webkit-scrollbar { display: none; }
.review-card { flex: 0 0 clamp(268px, 30vw, 352px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; border-radius: 18px;
  margin: 0; padding: 24px; border-radius: 18px; background: var(--card, #FFFFFF);
  box-shadow: inset 0 0 0 1.5px var(--hairline, rgba(20,18,14,.10)); }
.review-stars { display: flex; gap: 3px; }
.review-stars svg { width: 14px; height: 14px; fill: var(--star); stroke: none; }
.review-text { flex: 1; margin: 0; font-size: 15px; line-height: 23px; color: var(--tx-2); text-wrap: pretty; }
.review-author { display: flex; align-items: center; gap: 10px; margin: 0; }
.review-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--tx); background: rgba(20,18,14,.05); }
.review-ava--gpt { background: rgba(255,198,30,.22); color: var(--tx); }
.review-ava--claude { background: rgba(20,18,14,.05); color: #e59a7c; }
.review-ava--gemini { background: rgba(142,124,255,.18); color: #9f8dff; }
.review-who { display: flex; flex-direction: column; gap: 1px; }
.review-who b { font-size: 14.5px; line-height: 19px; }
.review-who span { font-size: 12px; line-height: 16px; color: var(--tx-3); }
.reviews-nav { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.rv-arrow { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20,18,14,.05); border: 0; color: var(--tx-2); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.rv-arrow:hover { background: rgba(20,18,14,.10); color: var(--tx); }
.rv-arrow .icn { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .reviews-rail { gap: 12px; margin: 0 -16px; padding-inline: 16px; }
  .review-card { flex-basis: 82vw; padding: 20px; }
  .reviews-nav { display: none; }          /* на телефоне листают пальцем */
}

/* ── Курсы: счётчики и подпись под кнопкой ── */
.acad-facts { display: flex; justify-content: flex-start; gap: clamp(28px, 5vw, 64px); margin: 0 0 clamp(34px, 3.6vw, 48px);
  padding: 0; list-style: none; }
.acad-facts li { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.acad-facts b { font-size: clamp(24px, 3vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
.acad-facts span { font-size: 13px; line-height: 18px; color: var(--tx-3); }
.acad-foot { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.acad-note { font-size: 12.5px; line-height: 17px; color: var(--tx-3); }
@media (max-width: 760px) { .acad-facts { gap: 22px; margin-bottom: 28px; } .acad-facts b { font-size: 22px; } }

/* ── Окно подбора: шаги, варианты, предложение ── */
.qz-steps { display: flex; gap: 5px; margin: 0 0 22px; }
.qz-steps i { flex: 1; height: 3px; border-radius: 99px; background: var(--line); transition: background var(--dur-2) var(--ease-out); }
.qz-steps i.on { background: var(--acc); }
.qz-head { margin-bottom: 20px; }
.qz-head h3 { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.15; letter-spacing: -.025em; }
.qz-head p { margin-top: 7px; font-size: 14.5px; line-height: 20px; color: var(--tx-3); }
.qz-opt { flex-direction: row; align-items: center; gap: 14px; padding: 15px 16px; }
.qz-opt-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: rgba(20,18,14,.05); color: var(--tx-2); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.qz-opt-ic svg { width: 20px; height: 20px; }
.qz-opt:hover .qz-opt-ic, .qz-opt.is-on .qz-opt-ic { background: rgba(255,198,30,.22); color: var(--tx); }
.qz-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Результат — предложение */
.qz-results { display: block; }
.qz-res { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,198,30,.22), rgba(255,198,30,.22)); border: 1px solid rgba(255,198,30,.22); }
.qz-res--claude { background: #FFFFFF; border-color: rgba(20,18,14,.10); }
.qz-res--gemini { background: #FFFFFF; border-color: rgba(20,18,14,.10); }
.qz-res-cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.qz-res h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.1; letter-spacing: -.03em; }
.qz-res-why { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--tx-2); }
.qz-res-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.qz-res-price b { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.03em; }
.qz-res-price span { font-size: 13.5px; color: var(--tx-3); }
.qz-res-has { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.qz-res-has li { position: relative; padding-left: 24px; font-size: 14px; line-height: 20px; color: var(--tx-2); }
.qz-res-has li::before { content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23147D5E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E") center/15px no-repeat; }
.qz-res .btn { margin-top: 10px; }
.qz-res-note { font-size: 12.5px; line-height: 17px; color: var(--tx-3); text-align: center; }

/* Запасной вариант — строка сравнения */
.qz-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  margin-top: 12px; padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); color: var(--tx); font: inherit; text-align: left;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
.qz-alt:hover { border-color: var(--line-2); background: rgba(20,18,14,.05); }
.qz-alt-l { display: flex; flex-direction: column; gap: 1px; }
.qz-alt-l b { font-size: 15px; line-height: 20px; }
.qz-alt-l span { font-size: 12.5px; color: var(--tx-3); }
.qz-alt-r { font-size: 16px; font-weight: 600; }

@media (max-width: 700px) {
  .qz-opt { padding: 13px 14px; gap: 12px; }
  .qz-opt-ic { width: 36px; height: 36px; border-radius: 11px; }
  .qz-res { padding: 20px; }
}

/* Футер: лок мельче шапки, но маскот остаётся выше минимальных 22 px. */
.ftr .logo { font-size: 17px; }

/* ── Мобильный первый экран: тариф должен быть виден без прокрутки ──────────
   Правила минималистичного слоя идут без медиазапроса и перебивают мобильные,
   объявленные выше. Возвращаем компактный ритм телефона явно и последним. */
@media (max-width: 768px) {
  .hero { padding-top: 22px; padding-bottom: 22px; }
  .hero h1 { font-size: 34px; line-height: 1.1; }
  .hero-sub { margin-top: 12px; font-size: 15px; line-height: 21px; }
  .hero-cta { margin-top: 20px; }
  .hero-note { margin-top: 14px; font-size: 12.5px; }
  #pricing .section-header { margin-top: 10px; margin-bottom: 20px; }
    #pricing .section-header p { display: none; }   /* на телефоне вся строка — лишний экран */
  .pricing-cat { margin-top: 18px; }
}

/* Витрина обязана «выглядывать» из-под первого экрана: это единственный
   указатель, что ниже есть товар. Замер до правки: карточка начиналась
   на 961px при высоте окна 900. */
@media (min-width: 769px) {
  .hero { padding-top: clamp(40px, 4.2vw, 68px); padding-bottom: clamp(26px, 2.6vw, 40px); }
    .hero-sub { margin-top: 22px; }
  .hero-cta { margin-top: 34px; }
  .hero-note { margin-top: 18px; }
  #pricing .section-header { margin-top: 8px; margin-bottom: clamp(34px, 3.4vw, 50px); }
    #pricing .section-header p { margin-top: 16px; font-size: 17px; }
}

@media (max-width: 768px) {
  /* Пока внизу висит полоса покупки, кнопка чата не нужна: два плавающих
     элемента на 390 пикселей перекрывают контент и спорят друг с другом. */
  body.has-buybar .chat-toggle,
  body.has-buybar .chat-choice { display: none; }
  /* Цифры академии: подписи в одну строку, иначе колонки разъезжаются */
  .acad-facts { gap: 16px; justify-content: space-between; width: 100%; }
  .acad-facts li { flex: 1 1 0; min-width: 0; }
  .acad-facts b { font-size: 21px; }
  .acad-facts span { font-size: 11.5px; line-height: 15px; text-align: center; }
}

/* ── Первый экран на широком экране: витрина должна выглядывать ──────────────
   Замер на 1440×900: до первой цены было 900 px — ровно граница окна, и цена
   оказывалась за кадром. Ужимаем воздух и убираем повтор про разовый платёж
   (он уже сказан в сноске героя двумя строками выше), чтобы верх карточек
   попадал в поле зрения без прокрутки. На телефоне всё иначе: там цена видна
   на 555 px, поэтому правило только для десктопа. */
@media (min-width: 992px) {
  /* Раньше здесь первый экран ужимался до предела, чтобы карточки попадали в
     поле зрения без прокрутки: подзаголовок витрины скрывался, у героя почти
     не оставалось полей. Читалось тесно — вернули воздух и подпись. */
  .pricing { padding-top: clamp(34px, 3vw, 52px); }
  .hero { padding-top: clamp(44px, 4.4vw, 72px); padding-bottom: clamp(28px, 2.8vw, 44px); }
  .hero-note { margin-top: 18px; }
  .pricing .section-header { margin-bottom: clamp(28px, 2.8vw, 40px); }
}

/* Монограммы в отзывах: буква всегда чернильная, плашка — светлая. Раньше цвет
   брался из бренда сервиса и на песочном фоне сливался. */
.review-avatar, .review-ava { color: var(--tx) !important; background: var(--acc-soft) !important;
  border: 1px solid var(--line) !important; }

/* Итог перед кнопкой оплаты: сумма стоит строкой, а не только в кнопке. */
.em-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline, rgba(20,18,14,.10));
  font-size: 14px; color: var(--tx-2); }
.em-total b { font-family: var(--font-text, Manrope, sans-serif); font-size: 20px; font-weight: 800;
  letter-spacing: -.04em; color: var(--tx); font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 760px) {
  /* Цель нажатия у шеврона — 44 px, как требуют мобильные гайдлайны:
     сам знак остаётся 28 px, расширяем только область касания. */
  .pricing-card .plan-btn::after { content: ""; position: absolute; inset: -8px; }
}

/* Доводы в результате подбора: короткие строки под ценой, каждая снимает
   одно возражение. */
.qz-res-args { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 8px; }
.qz-res-args li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 19px;
  color: var(--tx-2); }
.qz-res-args li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acc); }

/* Подсказка к бейджу: объясняет, что значит метка, не уводя со страницы.
   Системный title появляется через секунду и выглядит чужеродно. */
.has-tip { position: relative; }
.has-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px;
  padding: 10px 12px; border-radius: 12px; background: #14120E; color: #FAF7F0;
  font-family: var(--font-text, Manrope, sans-serif); font-size: 12.5px; line-height: 17px;
  font-weight: 500; letter-spacing: 0; text-transform: none; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 40; }
.has-tip::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px);
  width: 10px; height: 10px; margin-left: -5px; background: #14120E; transform: rotate(45deg) translateY(4px);
  opacity: 0; transition: opacity .16s ease, transform .16s ease; z-index: 40; }
@media (hover: hover) {
  .has-tip:hover::after, .has-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
  .has-tip:hover::before, .has-tip:focus-visible::before { opacity: 1; transform: rotate(45deg) translateY(0); }
}
/* Подсказку обрезала карточка: у неё стоял overflow:hidden ради брендовой
   подсветки, а подсветку давно отключили. Клип снимаем — иначе всплывающий
   текст режется по верхней кромке. */
.pricing-card { overflow: visible; }
/* У правого края экрана подсказка выезжала за поле — прижимаем её к бейджу. */
.pricing-card .has-tip::after { max-width: min(260px, 72vw); }

/* ── Маскот ──────────────────────────────────────────────────────────────────
   Пять сцен на главной, по одной на секцию: указывает в герое, протягивает
   банан у тарифов, думает у FAQ, радуется в «Знаю, что нужно», выглядывает
   из блока «Что будет после оплаты». Всегда absolute — в поток не встаёт
   и раскладку не двигает. */
.mascot { position: absolute; pointer-events: none; user-select: none; z-index: 2; }

/* Герой: маскот висит на лиане, свисающей из-под шапки. Стебель и фигура
   качаются как одно целое — точка вращения на верхнем конце лианы. */
.hero { position: relative; }
#pricing > .container { position: relative; }
.mascot--swing { display: flex; flex-direction: column; align-items: center;
  right: 0; top: -64px; transform-origin: 50% 0;
  animation: mSwing 4.6s ease-in-out infinite; }
/* Пока справа от заголовка есть своя колонка — лиана висит там. Как только
   текст начинает доставать до неё, сцена уезжает ниже строки кнопок. */
@media (max-width: 1179px) {
  .mascot--swing { top: 96px; right: -18px; }
  .swing-vine { height: 78px; }
  .swing-monkey { width: 92px; margin-top: -10px; }
}
/* Мобильная сцена живёт в герое и включается только на узком экране. */
.mascot--swing-m { display: none; }
.swing-vine { height: 108px; width: auto; display: block; }
.swing-monkey { width: 118px; display: block; margin-top: -13px; transform: translateX(3px); }

#faq .container { position: relative; }
.mascot--think { width: 118px; right: 8px; top: -30px; animation: mThink 4s ease-in-out infinite; }

.way--buy { position: relative; overflow: hidden; }
.mascot--cheer { width: 88px; right: -6px; bottom: -10px; opacity: .9;
  animation: mCheer 3s ease-in-out infinite; }

.em-more { position: relative; }
.mascot--peek { width: 56px; right: 6px; top: -46px; animation: mPeek 4.4s ease-in-out infinite; }

@keyframes mIdleR { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mThink { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
@keyframes mCheer { 0%, 100% { transform: translateY(0) rotate(0deg); } 22% { transform: translateY(-13px) rotate(-3deg); }
  44% { transform: translateY(0); } 62% { transform: translateY(-7px) rotate(2deg); } 80% { transform: translateY(0); } }
@keyframes mPeek { 0%, 14% { transform: translateY(56px); } 30%, 74% { transform: translateY(0); }
  92%, 100% { transform: translateY(56px); } }
@keyframes mSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* Витрина: маскот сидит на кромке карточки и перепрыгивает на соседнюю.
   Координаты считает mascot-hop в index.html — здесь только вид и покачивание
   между прыжками (у прыжка свой transform на контейнере, поэтому качаем img). */
#plans { position: relative; }
.mascot--hop { left: 0; top: 0; width: 78px; z-index: 3; opacity: 0;
  transition: opacity .3s ease; will-change: transform; }
.mascot--hop.is-on { opacity: 1; }
/* Тело вращается вокруг кулака — той точки, которой маскот держится за кромку. */
.hop-body { display: block; transform-origin: 47.5% 6.9%; }
.hop-body img { display: block; width: 100%; height: auto; }
.mascot--hop.is-hanging .hop-body { animation: mHang 3.4s ease-in-out infinite; }
@keyframes mHang { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

@media (max-width: 900px) {
  /* Полки для маскота: просвет под линией бренда и под последней карточкой
     группы — там фигура висит, не закрывая строки тарифов. */
  .pricing-cat { margin-top: 52px; margin-bottom: 12px; }
  .pricing-cat + .pricing-card { margin-top: 34px; }
  .mascot--hop { width: 48px; }
}
@media (max-width: 760px) {
  /* Крупный шаг между сценами: одновременно в кадр попадает одна фигура. */
  .mascot--think, .mascot--peek { display: none; }
  .mascot--swing { display: none; }
  /* Спускаем сцену ниже заголовка витрины: справа от кнопки «Помочь выбрать»
     единственное свободное место на первом развороте телефона. */
  /* Сцена с лианой на телефоне: стебель заметно длиннее, фигура крупнее —
     мелкую обезьяну на короткой ниточке владелец просто не замечал. */
  .mascot--swing-m { display: flex; top: 100%; right: 0; margin-top: 84px; }
  .swing-vine { height: 52px; }
  .swing-monkey { width: 68px; margin-top: -8px; }
  .mascot--cheer { width: 66px; right: -4px; bottom: -8px; }
  .mascot--hop { width: 60px; }
}
@media (prefers-reduced-motion: reduce) { .mascot, .mascot img { animation: none !important; } }

/* ── Компаньон ───────────────────────────────────────────────────────────────
   Кнопка чата получает голову маскота: по спеке в правом нижнем углу живёт
   один круг чернил 62 px с дыханием и янтарным пингом непрочитанного. */
.chat-toggle { background: var(--tx) !important; overflow: visible; }
.chat-toggle::after {
  content: ''; position: absolute; inset: 6px;
  background: url('brand/mascot.svg') center / contain no-repeat;
}
.chat-toggle > svg, .chat-toggle > .icn { opacity: 0; }
.chat-toggle { animation: mBreathe 3s ease-in-out infinite; }
@keyframes mBreathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chat-toggle { animation: none; } }

/* ── Шкала: крупнее и просторнее ────────────────────────────────────────────
   Владелец: «слишком всё сжато». Поднимаем кегли героя и карточек, добавляем
   поля внутри карточек и воздух вокруг кнопок. */
.hero h1 { font-size: clamp(40px, 4.7vw, 64px); line-height: 1.05; letter-spacing: -.045em; }
.hero-sub { margin-top: 22px; max-width: 640px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; }
.hero-cta { margin-top: 36px; gap: 14px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }
.sec-quiz { margin-top: 22px; height: 42px; }

@media (min-width: 901px) {
  .pricing-card { padding: 32px; }
  .pricing-card h3 { font-size: 21px; line-height: 28px; }
  .price-amount { font-size: 40px; }
  .plan-features { margin-top: 24px; padding-top: 24px; }
  .plan-features li { font-size: 15.5px; line-height: 23px; }
  .plan-features li + li { margin-top: 12px; }
  .plan-btn { margin-top: 28px; }
}
.step, .safety-item, .way, .review-card, .acad-card { padding: 26px; }
.steps { gap: 18px; }

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(31px, 8.4vw, 38px); }
  .hero-sub { margin-top: 16px; font-size: 16px; }
  .hero-cta { margin-top: 26px; }
  .pricing-cat { margin-top: 26px; }
  .step, .safety-item, .way, .review-card, .acad-card { padding: 20px; }
}