/* ============================================================
   Recorder Bot — кастомные правила поверх Webflow-разметки
   (извлечено из inline <style id="recorder-fixes">)
   ============================================================ */

/* --- Hero: убрать анимированный фон, белый фон обёртки --- */
.vttb_wrap .hero-background,
.vttb_wrap .c-visual-wrap.is-glow .hero-background,
.vttb_wrap .hero-background-light { background: transparent !important; animation: none !important; }
.vttb_wrap{background:#fff !important;}

/* --- Список шагов (галочки) --- */
.skb-steps{list-style:none !important;margin:30px 0 38px !important;padding:0 !important;padding-left:0 !important;display:flex !important;flex-direction:column;gap:28px !important;}
.skb-steps li{position:relative;padding-left:36px;font-size:22px;line-height:1.4;color:#231645;list-style:none !important;}
.skb-steps li::marker{content:"";}
.skb-steps li::before{content:"";position:absolute;left:0;top:3px;width:23px;height:23px;background:url("../../cm.svg") center/contain no-repeat;}

/* --- CTA-кнопка --- */
.skb-cta{display:inline-flex;align-items:center;justify-content:center;background:#005EFE;color:#fff !important;font-family:'Google Sans','Poppins',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:19px 48px;border-radius:999px;box-shadow:0 12px 28px rgba(0,94,254,.30),0 4px 10px rgba(0,94,254,.16);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.skb-cta:hover{background:#0052dd;box-shadow:0 18px 38px rgba(0,94,254,.40);transform:translateY(-2px);}
.skb-cta:active{transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.skb-cta{transition:none;}}

/* --- Типографика текстовых блоков --- */
._2col_text_wrap .c-paragraph,
._2col_text_wrap .c-paragraph p{ font-size:20px !important; line-height:1.5 !important; }
.float_text_content .c-paragraph,
.float_text_content .c-paragraph p{ font-size:18px !important; line-height:1.5 !important; }

/* --- Карточки «проблемы» --- */
.skb-problems-cards .tp_text_item{
  background-color:#fffc !important;
  border-color:#86622d0a !important;
  border-radius:.875rem !important;
  box-shadow:0 11px 4px #86622d03,0 6px 4px #86622d05,0 3px 3px #86622d08 !important;
}
.skb-problems-cards .skb-problem-textcol{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;}
.skb-problems-cards .skb-problem-cta{margin-top:30px;}
.skb-problems-cards .skb-problem-textcol .c-paragraph{font-size:20px;line-height:1.6;color:#231645;max-width:36ch;}
.skb-problems-cards .tp_text_text{ font-size:18px !important; line-height:1.5 !important; }

/* --- Визуал Elanor (видео) --- */
.visual_elanor_wrap{ max-width:64rem !important; }
.skb-flush-up{ margin-top:-120px !important; }
.visual_elanor_lottie{ aspect-ratio:16/9 !important; }
.visual_elanor_lottie video{ width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; }

/* --- FAQ-секция: фон и скругления --- */
.faqs_wrap{ background:linear-gradient(rgb(235,242,252), rgb(238,249,251)) !important; border-top-left-radius:56px !important; border-top-right-radius:56px !important; padding-top:80px !important; padding-bottom:80px !important; }

/* --- Прайсинг: скрыть переключатели, добавить «/час» --- */
.esb_wrap .mp_wrap .mp_tabs_hide{ display:none !important; }
.esb_wrap .mp_toggle_wrap{ display:none !important; }
.esb_wrap .mp_wrap .mp_price_duration{ display:none !important; }
.esb_wrap .mp_wrap .mp_price_number:not(.mp_tabs_hide)::after{ content:"/час"; font-size:1.1rem; opacity:.7; margin-left:2px; }
.page_main > .line_divider_wrap{ display:none !important; }
.pricing_card_included_check{ flex:0 0 auto !important; width:20px !important; height:20px !important; }
.pricing_card_included_item{ align-items:flex-start !important; }
.esb_wrap .mp_tabs_subheading{ display:none !important; }

/* --- Футер --- */
.skb-footer{background:#fff;border-top:1px solid #eceef3;padding:40px 24px;}
.skb-footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}
.skb-footer-row1{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.skb-footer-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#231645;font-family:'Google Sans','Poppins',sans-serif;font-weight:800;font-size:1.25rem;}
.skb-footer-logo-img{width:36px;height:36px;}
.skb-footer-link{color:#615e6e;text-decoration:none;font-size:1rem;}
.skb-footer-link:hover{color:#005EFE;}
.skb-footer-row2{color:#9a98a6;font-size:.92rem;border-top:1px solid #f0f0f5;padding-top:16px;}

/* --- Иконки приложений --- */
.app_icon_wrap{width:75px !important;height:75px !important;}
.app_icon_img{border-radius:17px !important;box-shadow:0 10px 26px rgba(37,99,235,.32) !important;width:75px !important;height:75px !important;object-fit:cover !important;}
.u-content-wrapper.is-lp-hero .c-paragraph p{ font-size:18px !important; line-height:1.5 !important; }

/* --- Навигация --- */
.nav_link_list1{ column-gap:20px !important; grid-column-gap:20px !important; }
.nav_dropdown_content, .nav_dropdown_list.w-dropdown-list{ display:none !important; pointer-events:none !important; }
.nav_layout{ column-gap:28px !important; width:auto !important; max-width:none !important; background-color:rgba(255,255,255,0.4) !important; }
.nav_btn_wrap{ width:auto !important; min-width:max-content !important; flex:0 0 auto !important; display:flex; align-items:center; gap:12px; }
.nav_btn_wrap .button_main_wrap{ width:auto !important; min-width:max-content !important; }
.nav_btn_wrap .button_main_text{ white-space:nowrap !important; }

/* --- Кнопки MAX / Telegram в шапке --- */
.skb-nav-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 26px; border-radius:999px; white-space:nowrap; cursor:pointer;
  font-family:'Google Sans','Poppins',sans-serif; font-weight:700; font-size:1rem; line-height:1;
  color:#fff !important; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease; }
.skb-nav-btn__ico{ width:22px; height:22px; flex:0 0 auto; display:block; object-fit:contain !important; }
.skb-nav-btn:active{ transform:translateY(0); }
.skb-nav-btn--max{ background:linear-gradient(90deg,#304DFF 0%,#7F3CE6 100%);
  box-shadow:0 10px 24px rgba(80,64,230,.32); }
.skb-nav-btn--max:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 16px 32px rgba(80,64,230,.42); }
.skb-nav-btn--tg{ background:#0061FF; letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,97,255,.35); }
.skb-nav-btn--tg:hover{ background:#0055e6; transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,97,255,.45); }
@media (prefers-reduced-motion:reduce){ .skb-nav-btn{ transition:none; } }
@media (max-width:767px){ .skb-nav-btn{ padding:10px 14px; font-size:.9rem; } .skb-nav-btn__ico{ width:18px; height:18px; } }
/* Мобильная шапка: без лого, две кнопки равной ширины на всю ширину устройства */
@media (max-width:767px){
  .nav_content{ display:none !important; }
  .nav_layout{ width:calc(100vw - 24px) !important; column-gap:0 !important; margin-left:auto !important; margin-right:auto !important; padding-left:10px !important; padding-right:10px !important; }
  .nav_btn_wrap{ width:100% !important; flex:1 1 auto !important; min-width:0 !important; gap:10px; }
  .nav_btn_wrap .skb-nav-btn{ flex:1 1 0; min-width:0; padding-left:10px; padding-right:10px; }
  /* Отключаем webflow scroll-анимацию навбара (сжатие/сдвиг) на мобиле */
  .nav_contain{ padding-left:0 !important; padding-right:0 !important; }
  .nav_layout{ background-color:rgba(255,255,255,0.4) !important; color:#231645 !important; transition:none !important; }
}
/* Hero-размер тех же кнопок */
.skb-hero-btns{ display:inline-flex; gap:16px; flex-wrap:wrap; align-items:center; }
.skb-nav-btn--hero{ padding:19px 46px; font-size:1.15rem; gap:14px; }
.skb-nav-btn--hero .skb-nav-btn__ico{ width:28px; height:28px; }
@media (max-width:767px){ .skb-nav-btn--hero{ padding:16px 26px; font-size:1rem; } .skb-nav-btn--hero .skb-nav-btn__ico{ width:24px; height:24px; } }
@media (max-width:520px){ .skb-hero-btns{ width:100%; } .skb-hero-btns .skb-nav-btn--hero{ flex:1 1 100%; } }
/* Десктоп: обе hero-кнопки одинаковой ширины (MAX = Telegram) */
@media (min-width:768px){ .skb-hero-btns{ display:inline-grid; grid-template-columns:1fr 1fr; } .skb-hero-btns .skb-nav-btn--hero{ width:100%; } }
/* Лейбл Telegram: десктоп «Telegram», телефон «TG-Бот» */
.skb-lbl-m{ display:none; }
@media (max-width:767px){
  .skb-nav-btn--tg .skb-lbl-d{ display:none; }
  .skb-nav-btn--tg .skb-lbl-m{ display:inline; text-transform:none; }
}

/* --- Принудительно показать body (reveal) --- */
body{opacity:1 !important;}

/* --- Логотип-вордмарк --- */
.nav_logo_text_wrap{width:auto !important;}
.skb-wordmark{font-family:'Google Sans','Poppins',sans-serif;font-weight:500;font-size:1.3rem;line-height:1;color:#231645;letter-spacing:-.01em;white-space:nowrap;margin-left:12px;}
.skb-wordmark strong{font-weight:800;}

/* --- Float-секция: видео вместо статичных визуалов --- */
.float_wrap .float_video{display:none !important;}
.lphero_wrap .lphero_bottom_spacer_wrap{display:none !important;}
.lphero_img_wrap{background:transparent !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;}
.lphero_img_holder{border-radius:0 !important;}
.tp_wrap .tp_card_item{opacity:1 !important;transform:none !important;}
.tp_wrap .connector-square{opacity:1 !important;}
.float_wrap .c-visual-wrap.is-img,
.float_wrap .c-visual-wrap.is-glow,
.float_wrap .icon_icon.is-avatar{display:none !important;}
.float_wrap .float_video{position:relative;z-index:3;width:100%;max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;box-shadow:none !important;}
.float_wrap .float_video_item{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* --- FAQ-аккордеон --- */
.faqs_wrap .u-container{max-width:820px;margin:0 auto;padding-left:24px;padding-right:24px;}
.skb-faq-head{text-align:center;margin-bottom:36px;}
.skb-faq-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:#26114a;background:#fff;border:1px solid #ecedf3;border-radius:999px;padding:7px 16px;box-shadow:0 2px 10px rgba(40,20,90,.05);}
.skb-faq-title{font-family:'Google Sans','Poppins',sans-serif;font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:#26114a;letter-spacing:-.02em;margin:18px 0 0;}
.skb-faq{display:flex;flex-direction:column;gap:14px;}
.skb-faq-item{border:1px solid #ecedf3;border-radius:16px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.skb-faq-item[open]{border-color:#c4dde5;box-shadow:0 8px 26px #b9aad814;}
.skb-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;font-family:'Google Sans','Poppins',sans-serif;font-weight:600;font-size:1.08rem;color:#1a1b25;}
.skb-faq-item summary::-webkit-details-marker{display:none;}
.skb-faq-item summary:focus-visible{outline:2px solid #005EFE;outline-offset:2px;border-radius:12px;}
.skb-faq-ic{flex:none;position:relative;width:22px;height:22px;}
.skb-faq-ic::before,.skb-faq-ic::after{content:"";position:absolute;background:#005EFE;border-radius:2px;}
.skb-faq-ic::before{top:10px;left:3px;width:16px;height:2px;}
.skb-faq-ic::after{top:3px;left:10px;width:2px;height:16px;transition:transform .25s ease;}
.skb-faq-item[open] .skb-faq-ic::after{transform:rotate(90deg);}
.skb-faq-a{padding:0 24px 22px;color:#615e6e;font-size:1.02rem;line-height:1.6;max-width:680px;}
@media (prefers-reduced-motion:reduce){.skb-faq-item,.skb-faq-ic::after{transition:none;}}

/* --- Глобальная типографика (шрифты) --- */
:root, body{
  --_typography---font--primary-family:'Google Sans','Poppins',sans-serif !important;
  --_typography---font--secondary-font:'Google Sans','Poppins',sans-serif !important;
  --_typography---font--secondary-family:'Google Sans','Poppins',sans-serif !important;
  --_text-style---font-family:'Google Sans','Poppins',sans-serif !important;
}
body, h1,h2,h3,h4,h5,h6, p, a, button, input, textarea, select, label, li, blockquote, figcaption,
.c-heading, .c-paragraph, .eyebrow_text, .button_main_text, [class*="u-text-style"]{
  font-family:'Google Sans','Poppins',sans-serif !important;
}

/* --- Hero на десктопе (>=768px) --- */
@media (min-width:768px){
  .lphero_img_wrap{ height:600px !important; align-self:end !important; }
  .lphero_img_wrap .lphero_img_holder{ height:100% !important; }
  .lphero_img_wrap .lphero_img{ height:100% !important; object-fit:cover !important; object-position:50% 0% !important; }
  /* розовый фон hero: высота = верхний отступ + картинка (600px), низ фона = низ картинки.
     было height:100vh — фон зависел от окна и заканчивался выше картинки */
  .c-background.is-hero .c-visual-wrap.is-lp-hero .hero-background{
    height:calc(var(--_spacing---section-space--page-top) + 600px) !important;
  }
}

/* --- Скрыть бургер-меню (мобильная версия) --- */
.nav_hb_wrap{ display:none !important; }

/* === Мобильные правки лендинга === */
@media (max-width: 767px) {
  /* D — крупнее текст в карточках «как работает» (+4px) */
  .float_simple_text { font-size: 20px !important; line-height: 1.3 !important; }
  /* I — CTA-кнопки на всю ширину */
  .skb-cta { width: 100% !important; }
  /* B — шаги hero по центру + без галочек (только мобайл; на десктопе галочки остаются) */
  .skb-steps { align-items: center !important; gap: 40px !important; }
  .skb-steps li { text-align: center !important; padding-left: 0 !important; font-size: 24px !important; line-height: 1.18 !important; }
  .skb-steps li::before { content: none !important; }
  /* G — карточки «Наш бот поможет» шире */
  .skb-problems-cards .tp_contain,
  .skb-problems-cards .u-container { padding-left: 12px !important; padding-right: 12px !important; }
  /* H — видео ниже и на всю ширину */
  .skb-flush-up { margin-top: 0 !important; }
  .visual_elanor_wrap { max-width: 100% !important; }
  /* J — меньше отступ перед FAQ (÷3) + карточки FAQ шире */
  .faqs_wrap { padding-top: 27px !important; }
  .faqs_wrap .u-container { padding-left: 12px !important; padding-right: 12px !important; }
  /* K — верхний отступ секции прайсинга в 2 раза меньше */
  #sec-pricing > .u-section-spacer:first-child { height: 57px !important; }
}

/* --- Cookie-баннер (тёмная узкая плашка снизу, во всю ширину) --- */
.skb-cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:flex;align-items:center;gap:16px;background:#1c1c1e;color:#c7c7cc;padding:9px 20px;font-size:13px;line-height:1.25;}
.skb-cookie[hidden]{display:none;}
.skb-cookie-text{margin:0;line-height:1.25;}
.skb-cookie-text a{color:#3b9bff;text-decoration:none;}
.skb-cookie-text a:hover{text-decoration:underline;}
.skb-cookie-btn{margin-left:auto;flex:0 0 auto;background:#0a84ff;color:#fff;border:none;border-radius:9px;padding:8px 26px;font-weight:600;font-size:15px;line-height:1.25;cursor:pointer;white-space:nowrap;}
.skb-cookie-btn:hover{background:#0a74e0;}
@media(max-width:560px){.skb-cookie{padding:7px 12px;gap:10px;font-size:12px;}.skb-cookie-btn{padding:7px 18px;font-size:13px;}.skb-cookie-extra{display:none;}}

/* Заголовок героя: на мобилке ограничиваем ширину контейнера до 280px,
   чтобы текст «MAX бот для записи zoom конференций» переносился на 3 строки. */
@media(max-width:560px){.is-lp-hero .c-heading{max-width:310px;margin-left:auto;margin-right:auto;}}

/* Верхний бар (логотип + «Перейти в MAX-бот»): на мобилке опускаем на 30px вниз. */
@media(max-width:560px){.nav_component{top:30px;}}

/* Секция цен: на мобилке увеличиваем все шрифты примерно на +4px. */
@media(max-width:560px){
  .pricing_wrap .u-text-style-small{font-size:16px !important;}      /* eyebrow, табы, описания, кнопки, «Что входит», пункты: 12→16 */
  .pricing_wrap .c-paragraph p{font-size:18px !important;}           /* подзаголовок «Пополняете счёт…»: 14→18 */
  .pricing_wrap h1{font-size:45px !important;}                       /* «Абонплата — 0 руб.»: 41→45 */
  .pricing_wrap .pricing_card_title{font-size:24px !important;}      /* «Только аудио» / «Видеозапись Zoom»: 20→24 */
  .pricing_wrap .pricing_card_price_text{font-size:27px !important;} /* «65 ₽/час» / «85 ₽/час»: 23→27 */
  .pricing_wrap .pricing_tag_text{font-size:14px !important;}        /* «Пакеты»: 10→14 */
  .pricing_wrap .pricing_card_price_desc{font-size:14px !important;} /* «15 минут на тест…»: 10→14 */
}

/* Картинка с аватарами («Уже пользуются ботом»): на мобилке уменьшаем на 20%. */
@media(max-width:560px){.bento_c_img{max-width:80% !important;}}

/* Two-CTA pair (Telegram + MAX) with brand logos — replaces the single «Перейти в бот». */
.skb-cta-pair{display:inline-flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center}
.skb-cta .skb-cta-ico{width:24px;height:24px;margin-right:10px;display:inline-block;vertical-align:middle;flex:0 0 auto}
.skb-cta.is-max{background:#7B5CFF}
.skb-cta.is-max:hover{background:#6a48f0}

/* Variant 8 — logo in white circle badge, equal width + height (Telegram / MAX). */
.skb-cta-pair{display:flex;gap:16px;width:100%;max-width:640px;flex-wrap:nowrap;align-items:stretch}
.skb-cta-pair .skb-cta{flex:1 1 0;min-width:0;min-height:64px;padding:10px 24px 10px 10px;gap:12px;
  border-radius:999px;text-transform:none;letter-spacing:0;font-size:1.05rem}
.skb-cta-pair .skb-badge{width:44px;height:44px;border-radius:50%;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.skb-cta-pair .skb-badge .skb-cta-ico{width:26px;height:26px;margin:0}
.skb-cta-pair a[href*="t.me/"]{background:#229ED9;box-shadow:0 12px 26px rgba(34,158,217,.32)}
.skb-cta-pair a[href*="t.me/"]:hover{background:#1c8dc4}
.skb-cta-pair a[href*="max.ru"]{background:#7B3FE4;box-shadow:0 12px 26px rgba(123,63,228,.32)}
.skb-cta-pair a[href*="max.ru"]:hover{background:#6a34cf}
@media(max-width:520px){.skb-cta-pair{max-width:100%}}

/* Кнопки из шапки в блоке «Наш бот поможет Вам»: одна под другой */
.skb-problem-navbtns{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px;margin-top:40px}
.skb-problem-navbtns .skb-nav-btn{width:100%;min-width:0}

/* Подзаголовок блока «Попробовать наш бот бесплатно»: +4px к шрифту */
.c-paragraph:has(+ .skb-trycta-wrap),
.c-paragraph:has(+ .skb-trycta-wrap) p{font-size:calc(1em + 4px) !important}

/* Кнопки из шапки в блоке «Попробовать наш бот бесплатно» */
.skb-trycta-navbtns{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:640px}
.skb-trycta-navbtns .skb-nav-btn{width:100%;min-width:0}
@media(max-width:520px){.skb-trycta-navbtns{grid-template-columns:1fr}}

/* Карточка «Бесплатно для тестов»: бейдж 15 минут + кнопки в стиле hero */
.skb-bento-cta{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin-top:16px; }
.skb-bento-cta .skb-nav-btn{ width:100%; padding:12px 8px; font-size:.9rem; gap:7px; letter-spacing:.02em; }
.skb-bento-cta .skb-nav-btn__ico{ width:18px; height:18px; }
@media(max-width:1279px){ .skb-bento-cta{ grid-template-columns:1fr; } .skb-bento-cta .skb-nav-btn{ font-size:1rem; padding:12px 14px; } }


/* Карточка «15 минут бесплатно для тестов»: подарок В ПОТОКЕ текста.
   Раньше он был позиционирован абсолютно, а заголовку задавался
   `text-indent:55px`, чтобы первая строка его обтекала. Но text-indent сдвигает
   ТОЛЬКО первую строку: как только заголовок переносился на вторую, та шла от
   левого края прямо под подарком. На планшете (ширина ≤991px, карточка встаёт
   во вторую колонку) заголовок ложится в две строки, и «бесплатно для тестов»
   наезжало на эмодзи — найдено 17.08.2026 на ширине 900px, вторая строка
   пересекала подарок по вертикали на 18px.
   Inline-block решает это на любой ширине: подарок занимает место в первой
   строке, остальные строки просто идут под ним. */
.bento_free{ margin-top:30px; }
.bento_free .bento_gift{
  display:inline-block; vertical-align:-5px;
  margin:0 12px 0 0; font-size:38px; line-height:1;
}


/* Карточка «А» (телефон): не растягиваем её ради картинки — иначе пустота
   переезжает в карточки второго ряда. Поэтому `min-height:0`: высоту карточке
   задаёт соседний столбец, а не собственный контент.

   Но раньше здесь стояло ещё и `height:220px` на медиа-зоне, и это давало
   дыру (найдено 17.08.2026). Картинка 1188×719 — это 1.65:1, а полоса была
   628×220, то есть 2.85:1. При `object-fit:contain` она вписывается по
   МЕНЬШЕЙ стороне, то есть по высоте: 364px из 628 по ширине. Оставшиеся
   264px справа и были пустотой, плюс полоса под медиа-зоной.

   Растить картинку можно только вверх-вниз — по ширине `contain` её всё равно
   ограничит высотой. Поэтому медиа-зона теперь забирает весь остаток карточки
   (`flex:1 1 auto`), уходит под её боковые и нижний отступы отрицательными
   полями и начинается выше. Картинка вырастает примерно на треть, дыра
   становится симметричными полями, а высота карточки и соседи не меняются. */
@media(min-width:1280px){
  .bento_card--a{ min-height:0 !important; }
  .bento_card--a .bento_media{
    /* Именно `1 1 0`, а не `1 1 auto`: при `auto` за базу берётся собственная
       высота картинки (421px), карточка вырастает до 644 и пустота переезжает
       в карточки второго ряда — ровно то, ради чего высоту когда-то и
       прибили. С нулевой базой медиа-зона получает РОВНО остаток карточки. */
    flex:1 1 0 !important; height:auto !important; min-height:0 !important;
    margin:8px -34px -32px !important;
  }
  .bento_card--a .bento_media_img{ object-position:center bottom !important; }
}

/* Сокращаем отступ между bento-карточками и секцией прайсинга (в 3 раза: 152→51px) */
.pricing_wrap .u-section-spacer.w-variant-e359d2da-de19-6775-b122-3e06f925f39e{ height:51px !important; }

/* --- Карточки пакетов минут — макет «Pricing Card Variants» (Claude Design) ---
   Шрифт НЕ меняем на Manrope из макета: страница живёт на своём self-hosted
   наборе, а второе семейство ради одного блока — лишний внешний запрос и
   разнобой с соседними секциями. Всё остальное (палитра, размеры, радиусы,
   тень, подсветка «популярного») взято из макета как есть. */
.pk-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .pk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* ЧИСЛО КОЛОНОК = ЧИСЛУ КАРТОЧЕК, его надо править вместе с прайсом на витрине.
   Сейчас 4: бесплатные 15 минут + три пакета (17.08.2026). Снимут карточку —
   здесь должно стать 3, иначе ряд не заполнит ширину.

   `auto-fit` тут НЕ работает, проверено на живой странице: сетка лежит внутри
   flex-обёртки Webflow, своей ширины у неё нет, и auto-fit схлопнул ряд в одну
   колонку 317px. Явное число колонок задаёт ширину само — потому и оставлено. */
@media (min-width:1200px){ .pk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; } }

.pk-card{ position:relative; display:grid; grid-template-rows:auto auto auto 1fr; row-gap:22px;
  background:#FDFCFE; border-radius:28px; padding:36px 32px 34px;
  box-shadow:0 24px 60px -34px rgba(0,60,140,.28); }

/* Строки ВСЕХ карточек ходят вместе — надпись, цена, кнопка и «Этого хватит на:»
   стоят на одной горизонтали независимо от того, сколько строк занял текст.
   Раньше карточки были самостоятельными flex-колонками, и ряд разъезжался
   дважды: у «1 140 ₽» содержимое поднималось на 36px (у неё нет надписи над
   ценой — «Платите меньше» вынесено в плавающую пилюлю), а у «5 400 ₽»
   разделитель уходил вверх на 24px, потому что «60 часов записи видео»
   не влезало в строку и переносилось.

   Работает только там, где карточки стоят в ряд — в одну колонку выравнивать
   нечего. Браузер без subgrid просто оставит карточку обычной сеткой: ряд не
   выровняется, но и не сломается. */
@supports (grid-template-rows: subgrid){
  @media (min-width:1200px){
    .pk-grid{ grid-template-rows:repeat(4, auto); }
    .pk-card{ grid-row:span 4; grid-template-rows:subgrid; }
  }
}
/* Популярный пакет: рамка съедает 2px внутри, поэтому padding уменьшен на те же
   2px — иначе карточка стала бы выше соседей и сетка «поехала». */
.pk-card.is-popular{ border:2px solid #0064FF; padding:38px 30px 32px; }
.pk-badge{ position:absolute; top:-14px; left:32px; background:#0064FF; color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.12em; padding:7px 14px; border-radius:999px;
  text-transform:uppercase; }
.pk-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.12em; color:#0064FF;
  text-transform:uppercase; }
/* Место под надпись у популярной карточки: сама надпись у неё вынесена в
   плавающую пилюлю над рамкой (так в макете), но строку в сетке занимать
   обязана — иначе цена и всё под ней встают выше соседних карточек.
   Именно visibility, а не display:none: скрытый элемент должен сохранить
   свою высоту, и она обязана считаться из тех же стилей, что у соседей. */
.pk-eyebrow.is-ghost{ visibility:hidden; }
.pk-price-wrap{ display:flex; flex-direction:column; gap:8px; }
.pk-price{ font-size:52px; font-weight:800; color:#00214F; letter-spacing:-.035em; line-height:1; }
.pk-period{ font-size:19px; font-weight:700; color:#0064FF; }
.pk-note{ font-size:15px; color:#7C8598; }
.pk-cta{ display:block; text-align:center; padding:16px; border-radius:14px;
  background:#0064FF; font-weight:700; font-size:16px; color:#fff; text-decoration:none;
  transition:background .15s ease; }
.pk-cta:hover{ background:#0050CC; color:#fff; }
/* Нижний блок начинается с ВЕРХА своей строки, а не прижимается к низу карточки.
   Пока карточки были самостоятельными колонками, прижатие книзу было
   единственным способом свести разделители — и оно же их и разводило, стоило
   тексту занять две строки вместо одной («60 часов записи видео»). Теперь
   строку задаёт общая сетка, и прижимать нечего. */
.pk-incl{ display:flex; flex-direction:column; gap:12px; padding-top:6px; border-top:1px solid #E1E8F5;
  align-self:start; }
.pk-incl-title{ font-size:15px; color:#7C8598; padding-top:12px; }
.pk-incl-item{ display:flex; gap:12px; align-items:flex-start; font-size:17px; font-weight:600;
  color:#00214F; line-height:1.45; }
.pk-check{ color:#0064FF; font-size:17px; flex:0 0 auto; }