/* ============================================================================
 * mobile-fix.css — устранение обрезаний и тяжести на мобиле
 *
 * Подключается ПОСЛЕ всех модулей — перекрывает min-width на таблицах,
 * убирает inline-padding эффекты, режет тяжёлые декоры.
 *
 * Цель: на 320–400px viewport ничего не выпирает, скролл плавный.
 * ============================================================================ */

/* ── Section padding — responsive (вместо inline padding:80px 0) ────── */
#honest {
  padding: var(--sp-2xl, 80px) 0;
}
@media (max-width: 768px) {
  #honest { padding: 48px 0; }
}
@media (max-width: 480px) {
  #honest { padding: 32px 0; }
}

/* ── ROI table — карточный стек на мобиле (как comparison) ─────────── */
@media (max-width: 600px) {
  .roi-table-wrap {
    overflow: visible !important;
    margin: var(--sp-md) 0 0 !important;
    padding: 0 !important;
  }

  .roi-table,
  .roi-table thead,
  .roi-table tbody,
  .roi-table tfoot,
  .roi-table tr,
  .roi-table th,
  .roi-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
    border: 0 !important;
  }

  /* Заголовок таблицы не нужен — название механики и так понятно */
  .roi-table thead { display: none !important; }

  /* Каждая строка — карточка с механикой */
  .roi-table tbody tr {
    margin-bottom: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name gain"
      "desc desc";
    gap: 4px 12px;
    align-items: baseline;
  }
  .roi-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

  /* 1-я ячейка — название механики */
  .roi-table tbody td:nth-child(1) {
    grid-area: name;
    color: var(--text-0) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    white-space: normal !important;
    padding: 0 !important;
  }

  /* 2-я ячейка — описание */
  .roi-table tbody td:nth-child(2) {
    grid-area: desc;
    color: var(--text-2) !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
  }

  /* 3-я — прибавка справа сверху */
  .roi-table tbody td:nth-child(3) {
    grid-area: gain;
    text-align: right !important;
    font-size: 14px !important;
    color: var(--accent-mint) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }

  /* Итог (tfoot) — выделенная карточка */
  .roi-table tfoot tr {
    margin-top: 6px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(34, 211, 160, 0.14), rgba(46, 166, 255, 0.06)) !important;
    border: 1px solid rgba(34, 211, 160, 0.30) !important;
    border-radius: 12px;
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 12px;
  }
  .roi-table tfoot td:nth-child(1) {
    color: var(--text-0) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
  }
  .roi-table tfoot td:nth-child(1) b { color: var(--accent-mint); }
  .roi-table tfoot td:nth-child(2) {
    text-align: right !important;
    color: var(--accent-mint) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* ROI grid — выровнять padding-блока */
  .roi { padding: 16px !important; }
  .roi-head h3 { font-size: 17px !important; line-height: 1.3; }
  .roi-head .emoji { font-size: 26px !important; }

  /* Формула под таблицей — читаемее */
  .roi-formula {
    font-size: 12px !important;
    line-height: 1.6;
    text-wrap: balance;
  }
}

/* ── Compare wrap — на узких экранах убираем горизонтальный скролл ────── */
@media (max-width: 599.98px) {
  .compare-wrap {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }
  .compare { min-width: 0 !important; }
}

/* ── Inline padding:24px на .glow-card → урезать на мобиле ──────────── */
@media (max-width: 480px) {
  .glow-card[style*="padding:24px"],
  article.glow-card { padding: 16px !important; }
}

/* ── Reveal stagger grid — на мобиле растяжка во всю ширину ─────────── */
@media (max-width: 600px) {
  .reveal-stagger[style*="minmax(280px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── BG orbs — урезать на мобиле (тяжёлые декоративные blur) ────────── */
@media (max-width: 768px) {
  .bg-orbs .orb {
    filter: blur(60px) !important;
    opacity: 0.5 !important;
  }
  .bg-orbs .orb.o1, .bg-orbs .orb.o2 {
    width: 220px !important; height: 220px !important;
  }
  .bg-orbs .orb.o3, .bg-orbs .orb.o4 {
    width: 180px !important; height: 180px !important;
  }
}

/* ── Typography — мелкий fix перетягивания заголовков ───────────────── */
@media (max-width: 480px) {
  h1, .s-title { word-break: break-word; hyphens: auto; }
  .stat-value { font-size: clamp(22px, 6vw, 32px) !important; }
}

/* ── Body — гарантированно нет горизонтального скролла ──────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: clip;
    max-width: 100vw;
  }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100vw;
    box-sizing: border-box;
  }
  /* Любой section/main блок не должен выпирать за viewport */
  main, section, article, .container > * {
    max-width: 100%;
  }
}

/* ── Tg-mockup — на мобиле прижимаем к ширине viewport ──────────────── */
@media (max-width: 480px) {
  .tg-mockup { max-width: calc(100vw - 32px) !important; }
}

/* ── Sticky CTA — не закрывать содержимое снизу ─────────────────────── */
@media (max-width: 480px) {
  body { padding-bottom: 80px; }
}

/* ── Trust-line под hero CTA — компактно на узких ───────────────────── */
.trust-line { flex-wrap: wrap; }
@media (max-width: 480px) {
  .trust-line {
    font-size: 12px;
    line-height: 1.35;
    text-wrap: balance;
  }
}

/* ── Demo accent roles — wrap чтобы не выпирали ─────────────────────── */
@media (max-width: 480px) {
  .demo-accent-roles {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .demo-role { font-size: 12px !important; padding: 6px 10px !important; }
}

/* ── Comparison таблица — карточный стек на мобиле (НЕ horizontal-scroll) ─ */
@media (max-width: 599.98px) {
  /* Wrapper — никакого скролла, без своих фонов и блюра */
  .compare-wrap, .table-wrap {
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Сбрасываем все табличные display и ширины */
  .compare,
  .compare thead,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    color: var(--text-1) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Шапка таблицы — её роль теперь у data-label у каждой ячейки */
  .compare thead { display: none !important; }

  /* Каждая строка — отдельная карточка одинакового вида */
  .compare tbody tr {
    margin-bottom: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    background: var(--bg-card) !important;
    padding: 14px !important;
    overflow: visible !important; /* было hidden — клипало scale при тапе */
  }

  /* td — flex column: label сверху, value снизу, всё по центру */
  .compare tbody td {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--border) !important;
    min-height: 56px;
  }
  .compare tbody td:last-child { border-bottom: 0 !important; }

  /* Подпись (data-label) — сверху, по центру */
  .compare tbody td::before {
    content: attr(data-label);
    color: var(--text-3);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    width: auto;
  }

  /* Первая ячейка (название фичи) — на всю ширину сверху, по центру, без ::before */
  .compare tbody td:first-child {
    display: block !important;
    color: var(--text-0) !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    padding: 0 0 10px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--border-bright) !important;
    text-align: center !important;
  }
  .compare tbody td:first-child::before { display: none; }

  /* Master Бот — лёгкий мятный фон + рамка снизу (никаких border-left,
     чтобы не ломать центрирование) */
  .compare tbody td[data-label="Мастер Бот"] {
    background: linear-gradient(180deg, rgba(34,211,160,0.12), rgba(34,211,160,0.04)) !important;
    border-top: 1px solid rgba(34,211,160,0.30) !important;
    border-bottom: 1px solid rgba(34,211,160,0.30) !important;
    font-weight: 700 !important;
    color: var(--text-0) !important;
  }
  .compare tbody td[data-label="Мастер Бот"]::before {
    color: var(--accent-mint);
  }

  /* yes/no/partial — чисто иконка + цвет, без анимаций */
  .compare tbody td.yes  { color: var(--accent-mint) !important; font-weight: 700; }
  .compare tbody td.no   { color: var(--text-3) !important; }
  .compare tbody td.partial { color: var(--accent-warn) !important; font-weight: 600; }

  /* Снимаем все hover/active/focus эффекты — на тач они «залипают» после tap */
  .compare tbody tr,
  .compare tbody tr:hover,
  .compare tbody tr:active,
  .compare tbody tr:focus-within,
  .compare tbody td,
  .compare tbody td:hover,
  .compare tbody td:active,
  .compare tbody td:focus,
  .compare tbody td.yes,
  .compare tbody td.yes:hover,
  .compare tbody td.yes:active,
  .compare tbody td.us,
  .compare tbody td.us:hover {
    transform: none !important;
    transition: none !important;
    scale: none !important;
  }
}

/* ── На тач-устройствах в принципе никаких scale на comparison ───────── */
@media (hover: none) and (pointer: coarse) {
  .compare td, .compare tr, .compare tbody td.yes {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
  }
  .compare tr:hover td,
  .compare tbody tr:hover td.yes,
  .compare tbody tr:hover td.us {
    transform: none !important;
    background: inherit !important;
  }
}

/* ── FAQ accordion — на мобиле без grid-rows trick (часто обрезается в Safari/Chrome) */
@media (max-width: 599.98px) {
  .faq-item { overflow: visible !important; }
  .faq-body {
    display: block !important;
    grid-template-rows: none !important;
    height: auto !important;
    transition: none !important;
  }
  .faq-item:not([open]) .faq-body { display: none !important; }
  .faq-item[open] .faq-body { display: block !important; }
  .faq-body-inner {
    overflow: visible !important;
    padding: 0 16px 16px !important;
  }
  .faq-item[open] .faq-body-inner { padding: 0 16px 16px !important; }
}

/* ── Pricing — tariff-badge не должен выпирать справа ───────────────── */
@media (max-width: 480px) {
  .tariff-badge { right: 12px !important; font-size: 10px !important; padding: 5px 10px !important; }
}

/* ── tg-mockup wrap — гарантированно не шире viewport ───────────────── */
@media (max-width: 768px) {
  .tg-mockup, .tg-mockup-wrap, .hero-mockup-col {
    max-width: 100% !important;
    overflow: hidden;
  }
}

/* ── Все картинки/SVG не выпирают ───────────────────────────────────── */
img, svg, video, iframe { max-width: 100%; height: auto; }
img.emoji { height: 1em !important; width: 1em !important; }

/* ── Hero grid — на mobile текст сверху, мокап снизу (P0 из аудита) ─── */
@media (max-width: 899.98px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-md);
  }
  .hero-text { order: 1; }
  .hero-mockup-col { order: 2; }
}