/* ==========================================================================
   BUCKLER · «Гарантия сделки» — мобильная адаптация (20260726)

   Подключается последним в <head>, поэтому при равной специфичности
   перекрывает инлайновые <style> страницы. Ни одно существующее
   правило не удалено — только переопределения внутри медиазапросов,
   так что на десктопе страница не меняется вообще.

   Все селекторы начинаются с .guarantee-page / .g-* — другие
   страницы сайта файл не затрагивает.
   ========================================================================== */

/* ==========================================================================
   ПЛАНШЕТ И ТЕЛЕФОН (<= 680px)
   ========================================================================== */
@media (max-width: 680px){

  /* --- Больше полезной ширины: боковые поля 48px -> 28px --- */
  .guarantee-page .g-shell{width:min(calc(100% - 28px), 1320px);gap:18px}
  .guarantee-page .g-section,
  .guarantee-page .g-hero{padding:20px;border-radius:20px}

  /* --- Бирюзовое свечение: на телефоне оно только мешает ---
     Три источника подсвечивали hero цветом rgba(14,165,198,...).
     На широком макете это читалось как аккуратный акцент, но на
     узком экране круг 380px ложился мутным пятном прямо на
     заголовок, а тень кнопки во всю ширину превращалась
     в синий смаз под текстом. */

  /* 1. Декоративный круг в hero: был шире самого блока (380 против 312) */
  .guarantee-page .g-hero{overflow:hidden}
  .guarantee-page .g-hero::before{display:none}

  /* 2. Тень кнопки: бирюзовая заменена на нейтральную в тон самой кнопки */
  .guarantee-page .g-btn{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(13,42,63,.16);
  }
  .guarantee-page .g-btn:hover,
  .guarantee-page .g-btn:active{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(13,42,63,.20);
  }
  .guarantee-page .g-btn--ghost,
  .guarantee-page .g-btn--ghost:hover{box-shadow:none}
  .guarantee-page .g-btn--light,
  .guarantee-page .g-btn--light:hover{box-shadow:0 10px 22px rgba(2,8,23,.20)}

  /* 3. Радиальная подсветка внутри кнопки */
  .guarantee-page .g-btn::before{display:none}

  /* --- Типографика: минимумы clamp были рассчитаны на десктоп --- */
  .guarantee-page .g-hero-title{font-size:clamp(28px, 7.4vw, 38px);letter-spacing:-.035em}
  .guarantee-page .g-hero-sub{font-size:15.5px;line-height:1.65;margin-top:14px}
  .guarantee-page .g-h2{font-size:clamp(22px, 5.6vw, 28px)}
  .guarantee-page .g-lead{font-size:15px;line-height:1.65;margin-top:12px}
  .guarantee-page .g-eyebrow{font-size:13px;letter-spacing:.05em;padding:7px 12px}

  /* --- Кнопки: nowrap + overflow:hidden обрезали длинные подписи --- */
  .guarantee-page .g-btn{
    white-space:normal;      /* было nowrap — «Задать вопрос в поддержку» срезалось */
    text-align:center;
    padding:14px 18px;
    min-height:52px;
    font-size:15px;
    line-height:1.3;
  }
  .guarantee-page .g-btn svg{flex:0 0 auto}
  .guarantee-page .g-btn-row{gap:10px}
  .guarantee-page .g-hero-actions .g-btn,
  .guarantee-page .g-final-actions .g-btn,
  .guarantee-page .g-btn-row .g-btn{width:100%}

  /* --- Слайд 1: hero --- */
  .guarantee-page .g-hero-grid{gap:22px}
  .guarantee-page .g-hero-adv{gap:11px;margin-top:20px}
  .guarantee-page .g-hero-adv li{font-size:14.5px;line-height:1.45;gap:10px;grid-template-columns:22px minmax(0,1fr)}
  .guarantee-page .g-hero-adv-ico,
  .guarantee-page .g-hero-adv-ico svg{width:22px;height:22px}
  .guarantee-page .g-hero-actions{margin-top:20px}

  /* --- Слайд 2: преимущества --- */
  .guarantee-page .g-adv{padding:18px;border-radius:18px}
  .guarantee-page .g-adv-ico{width:44px;height:44px;border-radius:14px;margin-bottom:12px}
  .guarantee-page .g-adv-ico svg{width:22px;height:22px}
  .guarantee-page .g-adv h3{font-size:17px}
  .guarantee-page .g-adv p{font-size:14px;margin-top:8px}
  .guarantee-page .g-adv-grid{gap:12px;margin-top:20px}

  /* --- Слайд 3: шаги --- */
  /* Плашка номера была 54px в колонке 44px и наезжала на текст */
  .guarantee-page .g-step-num{width:44px;height:44px;border-radius:13px;font-size:17px}
  .guarantee-page .g-step{padding:15px 16px;gap:13px;border-radius:16px}
  .guarantee-page .g-step h3{font-size:15.5px}
  .guarantee-page .g-step p{font-size:13.5px}
  .guarantee-page .g-steps{gap:11px}
  .guarantee-page .g-work-grid{gap:18px;margin-top:20px}

  /* --- Слайд 3: тариф. Внутренние отступы не уменьшались, из-за
         чего под сумму и текст оставалось около 180px --- */
  .guarantee-page .g-price{padding:18px;border-radius:20px}
  .guarantee-page .g-price h3{font-size:20px;margin-top:14px}
  .guarantee-page .g-price-row{
    /* сумма над пояснением: в строку они не помещались */
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
    padding:13px 14px;
    border-radius:14px;
  }
  .guarantee-page .g-price-row .amt{font-size:20px}
  .guarantee-page .g-price-row .txt{font-size:14px;line-height:1.5}
  .guarantee-page .g-price-example{padding:14px;border-radius:15px;margin-top:14px}
  .guarantee-page .g-price-example .calc{font-size:14px;margin-top:8px}
  .guarantee-page .g-price-example .total{gap:6px;margin-top:10px;padding-top:10px}
  .guarantee-page .g-price-example .total b{font-size:25px}
  .guarantee-page .g-price-note{font-size:13.5px;margin-top:13px}

  /* --- Слайд 4: слайдер и «почему безопаснее» --- */
  .guarantee-page .g-slider{margin-top:20px}
  .guarantee-page .g-slide-cap{margin-top:14px}
  .guarantee-page .g-slide-cap b{font-size:15.5px}
  .guarantee-page .g-slide-cap span{font-size:13.5px;margin-top:4px}
  .guarantee-page .g-slider-nav{margin-top:16px;gap:14px}
  .guarantee-page .g-safe{padding:15px 16px;gap:12px;border-radius:16px}
  .guarantee-page .g-safe-ico{width:40px;height:40px;border-radius:12px}
  .guarantee-page .g-safe{grid-template-columns:40px minmax(0,1fr)}
  .guarantee-page .g-safe h3{font-size:15px}
  .guarantee-page .g-safe p{font-size:14px}
  .guarantee-page .g-safe-grid{gap:12px;margin-top:18px}

  /* --- Слайд 4: польза сторон --- */
  .guarantee-page .g-benefit{padding:20px;border-radius:20px}
  .guarantee-page .g-benefit-grid{gap:14px;margin-top:20px}
  .guarantee-page .g-benefit-head{gap:12px;margin-bottom:14px}
  .guarantee-page .g-benefit-ico{width:44px;height:44px;border-radius:13px}
  .guarantee-page .g-benefit-ico svg{width:22px;height:22px}
  .guarantee-page .g-benefit-head h3{font-size:18.5px;line-height:1.2}
  .guarantee-page .g-benefit-list{gap:10px}
  .guarantee-page .g-benefit-list li{font-size:14px;line-height:1.5;gap:10px;grid-template-columns:18px minmax(0,1fr)}
  .guarantee-page .g-benefit-list li::before{width:18px;height:18px;box-shadow:inset 0 0 0 5px rgba(14,165,198,.9)}
  .guarantee-page .g-benefit--master .g-benefit-list li::before{box-shadow:inset 0 0 0 5px rgba(189,239,255,.85)}

  /* --- Слайд 5: финальный CTA --- */
  .guarantee-page .g-final{border-radius:24px}
  .guarantee-page .g-final-copy{padding:26px 20px 8px}
  .guarantee-page .g-final h2{font-size:clamp(23px, 5.8vw, 30px)}
  .guarantee-page .g-final p{font-size:15px;line-height:1.62;margin-top:12px}
  .guarantee-page .g-final-actions{margin-top:20px;gap:10px}
  .guarantee-page .g-final-shield{padding:6px 20px 24px}
  .guarantee-page .g-final-shield img{width:132px}
  .guarantee-page .g-final-foot{padding:15px 20px;font-size:13.5px;gap:8px}

  /* --- Модалка выбора подрядчика --- */
  .guarantee-page .g-modal,
  .g-modal-overlay .g-modal{padding:20px;border-radius:18px}
  .g-modal-overlay .g-modal h3{font-size:20px}
  .g-modal-overlay .g-modal p.sub{font-size:13.5px}
  /* иконка 48px стояла в колонке 44px */
  .g-modal-overlay .g-choice-ico{width:44px;height:44px;border-radius:13px}
  .g-modal-overlay .g-choice-ico svg{width:22px;height:22px}
  .g-modal-overlay .g-choice{padding:15px 16px;gap:12px;border-radius:15px}
  .g-modal-overlay .g-choice .c-body b{font-size:15.5px}
  .g-modal-overlay .g-choice .c-body span{font-size:13.5px}
  .g-modal-overlay .g-choice-grid{gap:11px;margin-top:18px}
  .g-modal-overlay .g-step-card{padding:14px 15px;gap:12px}
  .g-modal-overlay .g-steps-modal{gap:10px;margin-top:18px}
}

/* ==========================================================================
   УЗКИЕ ЭКРАНЫ (<= 430px) — iPhone SE/mini, Android 360-412
   ========================================================================== */
@media (max-width: 430px){

  .guarantee-page .g-shell{width:min(calc(100% - 22px), 1320px);gap:14px}
  .guarantee-page .g-section,
  .guarantee-page .g-hero{padding:16px;border-radius:18px}

  .guarantee-page .g-hero-title{font-size:clamp(25px, 7.6vw, 30px)}
  .guarantee-page .g-hero-sub{font-size:15px}
  .guarantee-page .g-h2{font-size:clamp(20px, 6vw, 24px)}
  .guarantee-page .g-lead{font-size:14.5px}
  .guarantee-page .g-eyebrow{font-size:12px;letter-spacing:.04em;padding:6px 11px}

  .guarantee-page .g-btn{padding:13px 14px;min-height:50px;font-size:14.5px}

  .guarantee-page .g-adv{padding:16px}
  .guarantee-page .g-adv h3{font-size:16px}
  .guarantee-page .g-step{padding:14px}
  .guarantee-page .g-safe{padding:14px}
  .guarantee-page .g-benefit{padding:17px}
  .guarantee-page .g-benefit-head h3{font-size:17px}

  .guarantee-page .g-price{padding:16px}
  .guarantee-page .g-price h3{font-size:18.5px}
  .guarantee-page .g-price-row .amt{font-size:19px}
  .guarantee-page .g-price-example .total b{font-size:23px}

  .guarantee-page .g-final-copy{padding:22px 16px 8px}
  .guarantee-page .g-final-shield{padding:6px 16px 20px}
  .guarantee-page .g-final-foot{padding:14px 16px;font-size:13.5px}

  .g-modal-overlay{padding:10px}
  .g-modal-overlay .g-modal{padding:17px}
  .g-modal-overlay .g-modal h3{font-size:18.5px}
}

/* ==========================================================================
   ЗАЩИТА ОТ ВЫЕЗДА ЗА ПОЛЯ
   Длинные слова и числа переносятся вместо того, чтобы распирать блок.
   Действует на всех ширинах — на десктопе просто ни разу не срабатывает.
   ========================================================================== */
.guarantee-page .g-hero-title,
.guarantee-page .g-h2,
.guarantee-page .g-hero-sub,
.guarantee-page .g-lead,
.guarantee-page .g-adv h3,
.guarantee-page .g-adv p,
.guarantee-page .g-step h3,
.guarantee-page .g-step p,
.guarantee-page .g-safe h3,
.guarantee-page .g-safe p,
.guarantee-page .g-benefit-head h3,
.guarantee-page .g-benefit-list li,
.guarantee-page .g-slide-cap b,
.guarantee-page .g-slide-cap span,
.guarantee-page .g-price h3,
.guarantee-page .g-price-row .txt,
.guarantee-page .g-price-example .calc,
.guarantee-page .g-final h2,
.guarantee-page .g-final p,
.guarantee-page .g-final-foot,
.g-modal-overlay .g-modal h3,
.g-modal-overlay .g-choice .c-body b,
.g-modal-overlay .g-choice .c-body span{
  overflow-wrap:anywhere;
  hyphens:auto;
}

/* Сетки не должны распираться содержимым шире колонки */
.guarantee-page .g-step > *,
.guarantee-page .g-safe > *,
.guarantee-page .g-hero-adv li > *,
.guarantee-page .g-benefit-list li,
.g-modal-overlay .g-choice > *,
.g-modal-overlay .g-step-card > *{min-width:0}
