/* ══════════════════════════════════════════════════════════════════════════
   BananPay — фирменный слой. Подключается ПЕРВЫМ на каждой странице, до
   остальных стилей: здесь живут шрифты, палитра и размерности бренда, а
   темы страниц (home.css, funnel.css, offer.css, academy.css, CRM) читают
   их через свои переменные.

   SellChatGPT — суббренд BananPay: палитра, маскот, сетка и компоненты общие,
   своего акцентного цвета у суббренда нет. Отличие одно: кусается буква C,
   а не B, и слово набирается Unbounded 600 вместо 800.

   Шрифты держим локально, а не ссылкой на fonts.googleapis.com: это два
   лишних домена в критическом пути, а покупатели у нас в России. Кириллица и
   латиница — отдельными файлами с unicode-range, браузер возьмёт нужное.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Шрифты ──────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-cyrillic.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-cyrillic.woff2') format('woff2');
  font-weight: 600 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-latin.woff2') format('woff2');
  font-weight: 600 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Токены бренда ───────────────────────────────────────────────────────── */
:root {
  /* Цвет. Пропорции на экране: Sand ≈58%, Paper ≈24%, Ink ≈12%, Banana ≈5%, Signal ≈1%. */
  --bp-banana:       #FFC61E;   /* единственный акцент бренда */
  --bp-banana-hover: #F0B60A;
  --bp-banana-press: #F0B60A;
  --bp-banana-active: #E0A800;   /* только :active */
  --bp-banana-tint:  #FFF3D0;   /* мякоть в укусе, подложки цифр */
  --bp-ink:          #14120E;   /* текст, силуэт, тёмные сцены */
  --bp-paper:        #FAF7F0;
  --bp-sand:         #F3F0E9;   /* фон страницы */
  --bp-signal:       #F0B60A;   /* метки и ссылки, не больше 5% площади */
  --bp-success:      #147D5E;   --bp-success-tint: #E3F2EC;
  --bp-error:        #C7402B;   --bp-error-tint:   #FBE9E5;
  --bp-dark-bg:      #14120E;   --bp-dark-card: #1E1B16;  --bp-dark-nested: #272319;
  --bp-dark-signal:  #FFD34D;

  /* Набор спеки сайта (SITE-SPEC.md) — имена как в документе. */
  --paper: #FAF7F0;  --sand: #F3F0E9;  --card: #FFFFFF;  --card-hi: #FFFCF2;
  --ink: #14120E;
  --ink-80: rgba(20,18,14,.80); --ink-74: rgba(20,18,14,.74); --ink-68: rgba(20,18,14,.68);
  --ink-56: rgba(20,18,14,.56); --ink-50: rgba(20,18,14,.50);
  --hairline: rgba(20,18,14,.10); --field: rgba(20,18,14,.18);
  --banana: #FFC61E; --banana-press: #F0B60A; --ring: rgba(240,180,10,.70);
  --ok: #147D5E; --error: #C7402B;
  --r-sm-spec: 12px; --r-md-spec: 16px; --r-lg-spec: 18px;
  --pad-desktop: 72px; --pad-mobile: 20px;
  --lh-text: 1.55; --lh-small: 1.5;

  /* Прозрачности чернил: второй уровень, подписи, иконки, границы, плашки. */
  --bp-ink-72: rgba(20, 18, 14, .72);
  --bp-ink-55: rgba(20, 18, 14, .55);
  --bp-ink-28: rgba(20, 18, 14, .28);
  --bp-ink-18: rgba(20, 18, 14, .18);
  --bp-ink-10: rgba(20, 18, 14, .10);
  --bp-ink-06: rgba(20, 18, 14, .06);

  /* Гарнитуры. Unbounded — только логотип и крупные заголовки, Manrope — весь
     интерфейс, JetBrains Mono — техника: номера карт, ID платежей, реквизиты. */
  --bp-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --bp-text:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bp-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Размерности */
  --bp-r-badge: 6px;  --bp-r-field: 12px; --bp-r-button: 12px;
  --bp-r-block: 16px; --bp-r-card: 18px;  --bp-r-pill: 99px;
  --bp-border: 1px solid var(--bp-ink-10);
  --bp-shadow: none;   /* теней в системе нет: поверхности делит обводка */

  /* Движение: вход 160, выход 120, знак — цикл 7 с. */
  --bp-ease: cubic-bezier(.3, 0, .25, 1);
  --bp-in:   160ms;
  --bp-out:  120ms;
}

/* ── Знак ────────────────────────────────────────────────────────────────────
   Буква C — знак суббренда: две банановые дуги с укусом в разрыве и черенок.
   Ниже 22 px укус не читается, поэтому в мелком кегле показываем цельную C
   (класс bp-c--solid). Жёлтый берётся из --y, чтобы на жёлтом фоне можно было
   подставить цвет фона и получить контурную версию.                          */
.bp-c { --y: var(--bp-banana); display: inline-block; vertical-align: middle; flex: none; }
.bp-c path { vector-effect: non-scaling-stroke; }

/* Знак внутри слова: заменяет букву C в «SellChatGPT». */
.bp-c--inline { height: .76em; width: .78em; margin: .05em -.012em 0; }

/* ── Логотип суббренда ──────────────────────────────────────────────────────
   Слово Unbounded 600 (у мастер-бренда 800) — так суббренд читается как часть
   системы, а не как второй бренд. Имя не появляется без указания на мастера:
   рядом всегда «часть BananPay».                                             */
.bp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bp-logo-word { font-family: var(--bp-display); font-weight: 600; letter-spacing: -.035em;
  line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
.bp-logo-endorse { font-family: var(--bp-text); font-weight: 600; font-size: 10px; line-height: 1.4;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62; white-space: nowrap; }

/* ── Типографика бренда ─────────────────────────────────────────────────────
   Кегли и трекинги из брендбука. Классы применяем точечно — переписывать всю
   вёрстку под них не нужно, темы страниц наследуют гарнитуры через переменные. */
.bp-h1 { font: 800 clamp(34px, 5.2vw, 54px) / 1.04 var(--bp-display); letter-spacing: -.045em; }
.bp-h2 { font: 800 clamp(26px, 3.6vw, 36px) / 1.1 var(--bp-display); letter-spacing: -.04em; }
.bp-h3 { font: 800 24px / 1.2 var(--bp-text); letter-spacing: -.03em; }
.bp-lead { font: 500 20px / 1.45 var(--bp-text); }
.bp-label { font: 600 10px / 1.4 var(--bp-text); letter-spacing: .16em; text-transform: uppercase; }
.bp-num { font: 800 38px / 1 var(--bp-text); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bp-mono { font: 500 13px / 1.5 var(--bp-mono); }

/* ── Кнопка оплаты ──────────────────────────────────────────────────────────
   Наведение — только смена цвета фона: ни подъёма, ни тени. Жёлтым текст не
   набираем (контраст 1.4:1), поэтому на банановом фоне буквы всегда чернильные. */
.bp-btn { font: 700 16px / 1 var(--bp-text); letter-spacing: -.01em; border-radius: var(--bp-r-button);
  border: 0; cursor: pointer; padding: 15px 24px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--bp-banana); color: var(--bp-ink);
  transition: background var(--bp-in) var(--bp-ease), transform var(--bp-out) var(--bp-ease); }
.bp-btn:hover { background: var(--bp-banana-hover); }
.bp-btn:active { background: var(--bp-banana-press); transform: scale(.98); }
.bp-btn[disabled] { background: var(--bp-ink-06); color: rgba(20, 18, 14, .34); cursor: not-allowed; }
.bp-btn--ghost { background: transparent; color: var(--bp-ink); box-shadow: none; }
.bp-btn--ghost:hover { background: var(--bp-ink-06); }

/* Фокус виден всегда — 2 px Signal с отступом 2 px. */
.bp-btn:focus-visible, .bp-logo:focus-visible, a:focus-visible, button:focus-visible,
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--bp-banana, #FFC61E);
  box-shadow: inset 0 0 0 1px var(--bp-banana, #FFC61E); }

/* ── Фактуры ────────────────────────────────────────────────────────────────
   Три штуки, по одной на носитель: «зубы», «знак», «мякоть». На светлом не
   плотнее 16%, на тёмном — 8%. Под длинным текстом фактуры не бывает.        */
.bp-tex-teeth {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 14 A 7 7 0 0 0 14 14 A 7 7 0 0 0 28 14' fill='none' stroke='rgba(20,18,14,0.16)' stroke-width='2.6'/%3E%3C/svg%3E");
  background-size: 28px 28px; }
.bp-tex-flesh {
  background-color: var(--bp-banana-tint);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='2.6' fill='rgba(20,18,14,0.15)'/%3E%3C/svg%3E");
  background-size: 22px 22px; }

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

/* ── Лок в шапке страниц ─────────────────────────────────────────────────────
   Знак + слово Unbounded 600 + подпись про мастер-бренд. Правила общие для всех
   страниц: темы отличаются палитрой, а лок у суббренда один.                  */
/* ── Закон кнопок ────────────────────────────────────────────────────────────
   Спека сайта: янтарная — фон banana, текст чернила, радиус 12, паддинг 15/24,
   Manrope 700 15; hover — banana-press, active — scale(.98). Контурная —
   прозрачная с обводкой 1.5 px чернил 18%. Третьего вида нет, как и второго
   акцентного цвета. В поле зрения — одна янтарная кнопка. */
.btn-primary, .plan-btn.btn-primary, .bp-btn {
  background: var(--bp-banana) !important; color: var(--bp-ink) !important;
  border: 0 !important; box-shadow: none !important;
}
.btn-primary:hover, .plan-btn.btn-primary:hover, .bp-btn:hover { background: var(--bp-banana-press, #F0B60A) !important; }
.btn-primary:active, .plan-btn.btn-primary:active, .bp-btn:active { transform: scale(.98); }

.btn-secondary, .plan-btn.btn-secondary, .bp-btn--ghost {
  background: transparent !important; color: var(--bp-ink) !important;
  border: 0 !important; box-shadow: inset 0 0 0 1.5px rgba(20,18,14,.18) !important;
}
.btn-secondary:hover, .plan-btn.btn-secondary:hover, .bp-btn--ghost:hover {
  background: rgba(20,18,14,.04) !important;
}

/* ── Поля ввода ──────────────────────────────────────────────────────────────
   Paper с внутренней обводкой; на фокусе — 2 px Signal. Фокус-обводку не
   убираем никогда: это единственный способ понять, где курсор. */
input:not([type=checkbox]):not([type=radio]), textarea, select {
  background: #FFFFFF; color: var(--bp-ink, #14120E); border: 1.5px solid rgba(20,18,14,.18);
  border-radius: 12px; padding: 15px 16px; }
input::placeholder, textarea::placeholder { color: rgba(20,18,14,.45); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--bp-banana, #FFC61E);
  box-shadow: inset 0 0 0 1px var(--bp-banana, #FFC61E); }

/* ── Лок суббренда ───────────────────────────────────────────────────────────
   Спека сайта: имя набирается банановой S (assets/letter-s.svg) высотой .86em,
   подпись «часть BananPay» — строкой ниже, Manrope 500 11 px, чернила 50%.
   Маскот в шапке не участвует: по спеке он живёт в футере и в чате поддержки. */
.logo { display: inline-flex; flex-direction: column; gap: 3px; align-items: flex-start;
  color: var(--bp-ink, #14120E); text-decoration: none; }


/* Слово: строка, внутри которой первая буква — знак. Выравнивание по базовой
   линии, иначе знак центрируется по высоте строки и всплывает над словом. */
.logo-text { display: inline-flex; align-items: baseline; line-height: 1;
  font-family: var(--bp-text, 'Manrope', sans-serif); font-weight: 800;
  font-size: 1em; letter-spacing: -.035em; color: inherit; }

/* Низ знака совпадает с базовой линией, высота — в прописную (0.79em)
   плюс оптическая добавка: круглая форма кажется мельче прямых. */
/* Банан-глиф: размеры из спеки — .9em, зазор .14em, приподнят на .03em. */
.logo-mark { height: .9em; width: auto; align-self: baseline; flex: 0 0 auto;
  margin: 0 .14em 0 0; position: relative; top: .03em; }

.logo-endorse {
  font-family: var(--bp-text, 'Manrope', sans-serif);
  font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(20,18,14,.48); white-space: nowrap;
}

/* Эндорсмент — для документов, писем и футера: маскот с закрытой пастью,
   линейка, затем имя и подпись. Здесь маскот обязателен. */
.logo--endorse { flex-direction: row; align-items: center; gap: .54em; }
.logo-mascot { height: 1.63em; width: auto; flex: 0 0 auto; }
.logo-rule { width: 1px; height: 1.78em; background: rgba(20,18,14,.2); flex: 0 0 auto; }
.logo-stack { display: flex; flex-direction: column; gap: 2px; }

/* Ниже 22 px банановую S не ставим — остаётся один маскот (правило архитектуры). */
.logo--mascot-only .logo-mark { display: none; }

/* Правовые строки футера: реквизиты и дисклеймер о торговых марках —
   по спеке они стоят на каждой странице. */
.ftr-legal { margin: 6px 0 0; font-family: var(--bp-text, Manrope, sans-serif);
  font-size: 11.5px; line-height: 1.5; color: rgba(20,18,14,.5); }