/* ============================================================================
   2026-08-23 — слой главной из локального концепта (redesign-clean38.css).
   Перенесён целиком: заголовок, лента курьеров, вордмарк, карточки под формой,
   снятие тени под формой, слои маршрута. Подключается ПОСЛЕДНИМ — иначе боевые
   hero-premium.css / refresh.css / homepage-fixes.css перебивают кегль и цвет.
   Ниже, после переноса, добавлена секция 22 — начертание половин заголовка.
   Откат: убрать <link> на этот файл и вставки rd-* в home.twig.
   ========================================================================== */

/* ============================================================================
   Presco Delivery — концепт главной. Чистый слой.

   ПРИНЦИП: не перестраиваем раскладку сайта. Родные flex/grid, ширины,
   позиционирование и высоты остаются как есть — прошлая версия пыталась их
   переломить через 233 !important и в итоге развалила десктоп.
   Здесь только: стиль заголовка, оформление трёх вставленных блоков
   (лента курьеров, вордмарк, карточки) и снятие тени под формой.
   ========================================================================== */

:root{
  --rd-red:#F01A26;
  --rd-red-tint:#FDE9EA;
  --rd-ink:#12161C;
  --rd-ink-2:#3A424E;
  --rd-muted:#8A93A2;
  --rd-line-soft:#EDF0F5;
}

/* ---------- 1. Заголовок ---------- */
/* размеры и ширину не трогаем — они родные и рассчитаны под раскладку;
   меняем только начертание и цвет второй половины */
.saving-text{
  font-family:Poppins,'Segoe UI',system-ui,sans-serif;
  font-style:italic;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--rd-ink);
}
.saving-text .saving-text-main{color:inherit}
.saving-text .presco-texts{color:var(--rd-red);text-decoration:none}

/* ---------- 2. Лента курьеров ---------- */
.rd-eyebrow{
  margin:0 0 10px;text-align:center;
  font-family:Poppins,system-ui,sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--rd-ink-2);
}
/* две одинаковые копии набора едут влево на 50%: в момент стыка кадр
   совпадает, поэтому шва не видно */
.rd-marquee{
  position:relative;overflow:hidden;width:100%;margin:0 0 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.rd-marquee-track{
  display:flex;width:max-content;
  animation:rd-scroll 26s linear infinite;
  will-change:transform;
}
.rd-marquee:hover .rd-marquee-track{animation-play-state:paused}
@keyframes rd-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.rd-marquee-set{display:flex;align-items:center;margin:0;padding:0;list-style:none}
/* пропорции логотипов разные (DHL 105x15, FedEx 105x33) — одинаковый бокс
   и object-fit выравнивают ряд */
.rd-marquee-set li{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:96px;height:32px;margin-inline:16px;
}
.rd-marquee-set img,.rd-marquee-set svg{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}

/* ---------- 3. Вордмарк ---------- */
/* у исходного SVG холст был 1600x723 при контенте 1515x177 — 34% пустоты
   сверху и 41% снизу; viewBox обрезан по содержимому, здесь только размер */
.rd-wordmark{display:block;width:min(300px,80%);height:auto;margin:0 auto 22px}

/* ---------- 4. Карточки под формой ---------- */
.rd-perks{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:20px auto 30px;padding:0 16px;list-style:none;
  max-width:900px;width:100%;box-sizing:border-box;
}
/* minmax(0,1fr) обязателен: иначе колонка не сжимается уже слова «paperwork»
   и сетка вылезает за экран */
.rd-perk{
  min-width:0;background:#fff;border-radius:18px;
  padding:24px 14px 20px;text-align:center;
  box-shadow:0 1px 2px rgba(18,22,28,.05), 0 6px 20px -8px rgba(18,22,28,.10);
  transition:transform .26s cubic-bezier(.34,1.2,.64,1),box-shadow .26s;
}
.rd-perk:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(18,22,28,.05), 0 16px 34px -12px rgba(240,26,38,.22);
}
.rd-perk .rd-badge{
  width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%, #FFF1F2 0%, #FDE4E6 100%);
  box-shadow:inset 0 0 0 1px rgba(240,26,38,.08);
  display:grid;place-items:center;color:var(--rd-red);
}
.rd-perk .rd-badge svg{width:27px;height:27px;stroke-width:1.7}
.rd-perk h3{
  margin:0 0 6px;font-family:Poppins,system-ui,sans-serif;
  font-size:15.5px;font-weight:700;letter-spacing:-.015em;line-height:1.25;
  color:var(--rd-ink);text-wrap:balance;
}
.rd-perk p{margin:0;font-size:13px;line-height:1.5;color:var(--rd-muted);text-wrap:pretty}

/* ---------- 5. Тень под формой ---------- */
/* Тень карточке ставят сразу несколько мест: refresh.css (два правила плюс
   :hover), form.css и инлайн-блок psr-white-bg-override в самом HTML.
   Одноклассового селектора не хватает — берём с запасом по специфичности
   и гасим все состояния вместе с псевдоэлементами.                        */
html body .new-form-wrapper,
html body .new-form-wrapper:hover,
html body .new-form-wrapper:focus-within,
html body .new-form-wrapper::before,
html body .new-form-wrapper::after,
html body .get-quote-form-wrapper{
  box-shadow:none !important;
  filter:none !important;
}
html body .new-form-wrapper,
html body .new-form-wrapper:hover{transform:none !important}

/* Вторая половина той же задачи: hero-секция белая, а у body фон #f4f5f7.
   Секция кончается сразу под формой — стык белого с серым читается как
   тень. Продлеваем белый на блок карточек.                                */
html body{background:#fff}
.rd-perks{background:#fff}

/* ---------- 6. Шапка ---------- */
.psr-mobile-quote-cta{
  background:#1160CC;border-radius:14px;
  box-shadow:0 4px 14px rgba(17,96,204,.26);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1),background .2s;
}
.psr-mobile-quote-cta:hover{background:#0D4EA6;transform:translateY(-1px)}
.psr-mobile-quote-cta:active{transform:translateY(1px) scale(.99)}

/* ---------- 7. Десктоп: только размеры вставленных блоков ---------- */
/* раскладку сайта не трогаем — ни display, ни position, ни min-height */
@media (min-width:992px){
  .rd-marquee-set li{width:118px;height:38px;margin-inline:22px}
  .rd-marquee-track{animation-duration:34s}
  .rd-wordmark{width:360px;margin-bottom:26px}
  .rd-perks{gap:22px;margin-bottom:40px}
  .rd-perk{padding:28px 20px 24px}
  .rd-perk h3{font-size:16.5px}
  .rd-perk p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .rd-perk{transition:none}
  .rd-marquee-track{animation-duration:52s}
}

/* ---------- 8. Заголовок как в мобильном макете ----------
   На сайте половины заголовка оформлены по-разному: первая — мелкая
   надстрочная (15px, uppercase, разрядка .26em, серая), вторая — крупная
   с градиентной заливкой через background-clip:text. В макете обе части
   одного кегля: чёрная и красная. Приводим к нему.
   Здесь !important неизбежен — родные правила заданы с ним же.            */
.saving-text{
  /* В hero-premium.css и refresh.css заголовок сделан flex-контейнером
     с gap:14px — из-за этого половины расходились, а слова внутри строки
     получали неестественно широкие промежутки. Возвращаем обычный поток
     текста: тогда работают нормальные пробелы и переносы. */
  display:block !important;
  gap:0 !important;
  font-size:clamp(36px,4.8vw,62px) !important;
  line-height:1.06 !important;
  font-style:italic !important;
  font-weight:800 !important;
  letter-spacing:-.022em !important;
  word-spacing:normal !important;
  text-align:center;
  text-wrap:balance;
}
/* первая половина: тот же кегль, без капса и разрядки */
.saving-text .saving-text-main{
  font-size:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  /* здесь тоже было inline-flex с gap:14px — он разгонял слова */
  display:inline !important;
  gap:0 !important;
  word-spacing:normal !important;
  max-width:none !important;
  color:var(--rd-ink) !important;
  -webkit-text-fill-color:var(--rd-ink) !important;
}
/* декоративные чёрточки по бокам мелкой надстрочной надписи — при крупном
   кегле они только добавляют пустоты */
.saving-text .saving-text-main::before,
.saving-text .saving-text-main::after{display:none !important}

/* Разбивка на строки: «ALL Top Couriers in One» целиком сверху, «Smart
   Platform» — снизу. Обе половины делаем блочными, каждая занимает свою
   строку; внутри переносов нет, поэтому «One» не отрывается вниз.
   Кегль подобран так, чтобы длинная строка помещалась по ширине.        */
.saving-text .saving-text-main,
.saving-text .presco-texts{
  display:block !important;
  white-space:nowrap !important;
  width:100%;
  text-align:inherit;
  /* В жирном курсиве Poppins и пробел, и межбуквенные просветы шире
     обычного. Сжимаем оба: при кегле 39px пробел теряет около 7px и
     остаётся примерно 3px, буквы сходятся плотнее на 4%. */
  /* Пробел складывается из двух величин: letter-spacing применяется и к
     самому знаку пробела, поэтому итог = 0.26em (базовый пробел Poppins)
     + letter-spacing + word-spacing.
       -0.05 и -0.18  ->  0.03em, слова слипались в «ALLTop»
       -0.05 и +0.05  ->  0.26em, промежутки читались как провалы
       -0.05 и -0.045 ->  0.165em, ещё широковато
       -0.05 и -0.09  ->  0.12em — нормально
       0 и -0.14      ->  0.12em, буквы в норме, пробел узкий.
     Усиливая letter-spacing, всегда ослабляем word-spacing на ту же
     величину — иначе пробелы схлопываются вслед за буквами. */
  letter-spacing:0 !important;
  word-spacing:-.14em !important;
}
.saving-text{
  font-size:clamp(22px,7.4vw,52px) !important;
  line-height:1.14 !important;
}

/* На телефоне первой части перенос разрешаем — заголовок ложится в три
   строки («ALL Top» / «Couriers in One» / «Smart Platform»). Строки короче,
   поэтому кегль можно взять заметно крупнее, чем при неразрывной строке. */
@media (max-width:1199px){
  .saving-text .saving-text-main{white-space:normal !important}
  .saving-text{
    font-size:clamp(28px,10.5vw,54px) !important;
    line-height:1.1 !important;
  }
}
/* вторая половина: тот же кегль, плоский красный вместо градиента */
.saving-text .presco-texts,
.saving-text .presco-texts .letter{
  font-size:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
  letter-spacing:inherit !important;
  display:inline !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
  color:var(--rd-red) !important;
  -webkit-text-fill-color:var(--rd-red) !important;
}
/* декоративные слои под градиент больше не нужны (content:"") */
.saving-text .presco-texts::before,
.saving-text .presco-texts::after{display:none !important}


/* ---------- 9. Лента партнёров ----------
   В разметке блок стоит сразу после заголовка — так на телефоне получается
   нужный порядок: заголовок → лента → вордмарк → форма.

   На широких экранах родной .psr-hero-partners висел в правом верхнем углу
   (position:absolute; top:50px; right:clamp(30px,calc(8vw-30px),…)).
   Повторяем это, но есть тонкость: якорем для absolute должна быть СЕКЦИЯ,
   а у .main-section стоит position:relative — внутри неё отсчёт шёл бы от
   колонки с формой, и блок уезжал к середине экрана. Поэтому на десктопе
   снимаем relative с .main-section: единственный её absolute-потомок —
   псевдоэлемент формы в режиме модалки, и он привязан к самой форме.      */
/* Телефон и планшет: лента в потоке между заголовком и вордмарком. */
.rd-partners{
  position:relative;
  z-index:6;
  width:100%;
  max-width:640px;
  margin:0 auto 14px;
}

/* Копия для десктопа — .rd-partners-top. Лежит прямым ребёнком секции,
   поэтому якорем для absolute гарантированно служит сама секция
   (у неё класс .position-relative из bootstrap). Попытки позиционировать
   блок изнутри колонки не работали: отсчёт шёл от .container, и лента
   ложилась на заголовок.
   Две копии вместо одной — потому что порядок «заголовок → лента →
   вордмарк» на телефоне задаётся потоком внутри колонки, а туда
   десктопный блок поставить нельзя.                                     */
.rd-partners-top{display:none}

@media (min-width:1200px){
  .rd-partners{display:none}          /* внутреннюю копию прячем */
  .rd-partners-top{
    display:block;
    position:absolute;
    top:64px;
    right:clamp(110px, 12vw, 280px);
    width:clamp(420px, 34vw, 520px);
    margin:0;
    padding:0;
    z-index:7;
  }
  .rd-partners-top .rd-eyebrow{text-align:center;margin-bottom:10px}
  .rd-partners-top .rd-marquee{margin-bottom:0}
  .rd-marquee-set li{width:104px;height:34px;margin-inline:18px}
}

/* ---------- 11. Дублирующий анимированный вордмарк ----------
   .psr-van-3d.psr-wordmark-stage — родной вордмарк сайта, набранный по буквам,
   с декоративными «флоатерами». В концепте его роль выполняет статичный
   .rd-wordmark, поэтому дубль убираем. В самом сайте он местами уже скрыт,
   но правило .psr-van-3d.psr-wordmark-stage{display:flex !important} это
   перебивает — отсюда та же специфичность из двух классов.               */
/* ВАЖНО: .psr-van-3d скрывать нельзя — внутри него лежит карточка трекинга
   (.psr-van-3d .psr-track-card). Прячем только сам вордмарк и его флоатеры. */
.psr-van-3d .psr-wordmark,
.psr-wordmark,
.psr-floater{display:none !important}

/* ---------- 12. Декоративный маршрут: пунктир и шаги ----------
   Слой .psr-journey растянут на всю секцию (position:absolute; inset:0)
   с z-index:4 — то есть лежит ПОВЕРХ контента. Пока заголовок был мелким
   и по центру, пунктир проходил мимо; теперь заголовок крупный и прижат
   влево, и линия шла прямо по буквам.
   Сам маршрут оставляем — уводим его ПОД контент по слоям, а тексту и
   карточкам поднимаем z-index. Пунктир по-прежнему виден в промежутках,
   но больше не перечёркивает заголовок.                                  */
.psr-journey{z-index:1 !important}
.psr-journey-waypoint{z-index:1 !important}

/* контент — над маршрутом.
   ВНИМАНИЕ: .rd-partners здесь намеренно НЕТ. Это правило идёт ниже блока 9
   и не обёрнуто в @media, поэтому при равной специфичности перебивало бы
   position:absolute из медиазапроса — решает порядок в файле, а не медиа. */
.saving-text,
.rd-wordmark,
.new-form-wrapper,
.psr-track-card{position:relative;z-index:6}

/* подписи-шаги — выше линий, но НИЖЕ контента: их координаты рассчитаны
   под исходную раскладку, и там, где бейдж наезжает на карточку или форму,
   он должен уходить под них, а не ложиться сверху */
/* ВНИМАНИЕ: только z-index. position здесь задавать нельзя — бейджи
   позиционируются абсолютно, и relative сбивал бы им отсчёт координат
   на смещение от места в потоке вместо привязки к контейнеру. */
.psr-step,
.psr-step-1,.psr-step-2,.psr-step-3,.psr-step-4{z-index:5}

/* ---------- 13. Маршрут ----------
   Координаты бейджей задаёт js/rd-steps.js: шаги лежат в разных контейнерах
   (.psr-journey — на всю секцию, .psr-step-3 — в .psr-van-3d), поэтому
   одинаковые проценты в CSS давали разные точки отсчёта. Скрипт считает
   позиции от секции в пикселях и шлёт resize, по которому штатный скрипт
   сайта перерисовывает пунктир.                                          */

/* ---------- 14. Заголовок: по ширине формы ----------
   Слоган центрируется по той же оси, что и карточка формы, и не шире её —
   так они читаются одним блоком.                                        */
@media (min-width:1200px){
  .saving-text{
    align-self:center !important;
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    max-width:none !important;
    font-size:clamp(28px,2.7vw,44px) !important;
    line-height:1.1 !important;
  }
}

/* ---------- 15. Карточка трекинга ниже ----------
   Опускаем её в hero. Бейджи маршрута привязаны к карточке скриптом
   rd-steps.js, поэтому 3-й и 4-й сместятся следом, а пунктир перерисуется. */
@media (min-width:1200px){
  .get-quote-section .psr-track-card{
    margin-top:110px !important;
  }
}

/* ---------- 16. Карточки в первом экране ----------
   От 1367px hero-секции задан min-height:calc(100vh - 80px), поэтому она
   занимала весь экран, а карточки-перки шли следом и всегда оказывались
   ниже сгиба. Отпускаем высоту по контенту и поджимаем нижние отступы —
   карточки поднимаются в видимую часть.                                  */
@media (min-width:1200px){
  .get-quote-section{
    min-height:0 !important;
    height:auto !important;
    padding-bottom:0 !important;
  }
  .get-quote-section .main-section{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  .rd-perks{
    margin-top:6px !important;
    margin-bottom:28px !important;
  }
  .rd-perk{padding:22px 20px 20px}
}

/* ---------- 17. Карточки: видно описание ----------
   Подписи под заголовками обрезались нижним краем экрана. Делаем карточки
   компактнее по вертикали, чтобы блок целиком попадал в первый экран.    */
@media (min-width:1200px){
  .rd-perk{padding:18px 20px 16px !important}
  .rd-perk .rd-badge{width:50px !important;height:50px !important;margin-bottom:10px !important}
  .rd-perk .rd-badge svg{width:23px !important;height:23px !important}
  .rd-perk h3{font-size:15.5px !important;margin-bottom:4px !important}
  .rd-perk p{font-size:13px !important;line-height:1.45 !important}
  .rd-perks{margin-top:2px !important;margin-bottom:18px !important;gap:18px !important}
}

/* ---------- 18. Подсказка «SCROLL» ----------
   В hero-premium.css она привязана к низу секции:
   bottom:clamp(80px, 11vh, 170px). Пока секция занимала весь экран, такой
   отступ держал её внизу; после того как высота отпущена по контенту, тот же
   отступ поднял подсказку к форме. Прижимаем к нижнему краю секции.       */
@media (min-width:1200px){
  .get-quote-section .psr-scroll-hint{
    display:inline-flex !important;
    top:auto !important;
    bottom:6px !important;
  }
}

/* ---------- 19. Отступ между формой и карточками (мобильный) ----------
   Складывался из нескольких: padding-bottom:14px у .main-section
   (hero-premium.css, до 768px), нижний отступ секции и margin-top:20px
   у самих карточек. Поджимаем всю цепочку.                              */
@media (max-width:1199px){
  .get-quote-section .main-section{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  .get-quote-section{padding-bottom:0 !important}
  .rd-perks{margin-top:-6px !important}
}

/* ---------- 20. Кернинг пары «ALL | Top» ----------
   «L» кончается горизонтальным штрихом внизу, «T» начинается таким же
   вверху — в курсиве между ними открывается белый клин, и обычный пробел
   там выглядел заметно шире остальных. Ни word-spacing, ни узкий пробел
   U+2009 клин не убирали. Поэтому пробела между ними нет вовсе: зазор
   задаётся явно и им можно управлять одним числом.                      */
/* Обёртке нужно явное наследование: в стилях сайта есть правила для
   вложенных span внутри .saving-text (остатки побуквенной анимации), и
   новый span подхватывал их — «ALL» уезжало в мелкий кегль. */
.saving-text .rd-kern-all{
  display:inline !important;
  margin-right:.055em;
  font:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  text-transform:none !important;
  vertical-align:baseline !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  background:none !important;
  opacity:1 !important;
}

/* ---------- 21. Планшет: кегль первой половины ----------
   В диапазоне 481–1199px первую половину заголовка придавливают два
   правила с высокой специфичностью:
     homepage-fixes.css  (min-width:481px)…  спец 6 классов + 3 элемента → 15px
     refresh.css         (min-width:768px)…  спец 2 класса + 1 элемент  → 14px
   Обычного .saving-text .saving-text-main (2 класса) не хватает, поэтому
   селектор ниже намеренно раздут дублированием классов — это законный
   приём, набор элементов он не меняет, только вес правила.             */
html body main .saving-text.saving-text.saving-text
      .saving-text-main.saving-text-main.saving-text-main.saving-text-main{
  font-size:inherit !important;
  font-weight:inherit !important;
  font-style:inherit !important;
  line-height:inherit !important;
  letter-spacing:0 !important;
  word-spacing:-.14em !important;
  text-transform:none !important;
  color:var(--rd-ink) !important;
  -webkit-text-fill-color:var(--rd-ink) !important;
  display:block !important;
  max-width:none !important;
  opacity:1 !important;
}


/* ---------- 22. Начертание половин заголовка (правка при переносе) ----------
   В концепте font-family:Poppins стоит только на .saving-text, а половины его не
   наследуют: глобальное «*{font-family:"Nunito Sans",Inter,sans-serif}» из
   mainPage.css бьёт наследование. В локальной копии концепта Nunito Sans не
   подгружался, поэтому половины откатывались на Inter и рисовались наклонными —
   именно так выглядит макет. На сервере Nunito Sans есть, и курсив пропадал;
   Poppins ExtraBold, которым чинили сначала, оказался жирнее макета.
   Задаём половинам ровно то, чем рисуется макет, — Inter.                    */
.saving-text .saving-text-main,
.saving-text .presco-texts,
.saving-text .presco-texts .letter,
.saving-text .rd-kern-all{
  font-family:Inter,'Segoe UI',system-ui,sans-serif !important;
}

/* ---------- 23. Пробелы в заголовке заметнее (правка по просьбе заказчика) ----
   В концепте пробелы сильно поджаты: word-spacing:-.14em у обеих половин
   (секции 8 и 21) плюс зазор пары «ALL|Top» задан отдельно margin-right:.055em
   у .rd-kern-all — при Poppins это выглядело плотно, но нормально. Мы рисуем
   половины шрифтом Inter (см. секцию 22), у него пробел уже, и слова начинали
   слипаться. Ослабляем сжатие: -.14em → -.02em, зазор «ALL|Top» .055em → .11em
   (он заменяет собой пробел, поэтому его увеличиваем соразмерно).          */
.saving-text .saving-text-main,
.saving-text .presco-texts,
html body main .saving-text.saving-text.saving-text
      .saving-text-main.saving-text-main.saving-text-main.saving-text-main{
  word-spacing:-.02em !important;
}
.saving-text .rd-kern-all{
  margin-right:.11em !important;
}

/* ---------- 24. Полоса 1200–1366px: не десктоп и не планшет (фикс) ----------
   Родные стили refresh.css скрывают карточку трекинга и маршрут (.psr-van-3d /
   .psr-journey) вплоть до 1366px. А концепт включает десктоп-раскладку hero уже
   с 1200px: лента партнёров уходит в правый верхний угол (секция 9/10),
   заголовок центрируется по колонке (секция 14), подсказка SCROLL прижимается к
   низу секции (секция 18). В итоге в полосе 1200–1366px справа пусто (карточки
   нет), лента налезает на «Smart Platform», а SCROLL падает на кнопку.
   Этот дефект есть и в самом концепте. Чиним: в этой полосе держим hero как на
   планшете — лента в потоке под формой, SCROLL скрыт (карточки-цели для него
   всё равно нет). Выше 1366px карточка появляется и десктоп-раскладка корректна. */
@media (min-width:1200px) and (max-width:1366px){
  /* лента в естественном потоке колонки — между заголовком и вордмарком,
     как на планшете/телефоне (порядок разметки: заголовок → лента → вордмарк). */
  .rd-partners-top{display:none !important}
  .rd-partners{
    display:block !important;
    position:relative !important;
    margin:0 auto 14px !important;
  }
  /* карточки-цели для подсказки SCROLL в этой полосе скрыты (карточка трекинга
     появляется только с 1367px), поэтому саму подсказку тоже прячем. */
  .get-quote-section .psr-scroll-hint{display:none !important}
}

/* ---------- 24. Телефон: чуть мельче заголовок, чтобы форма и перки влезли ----------
   На iPhone крупный clamp(28px, 10.5vw) + вордмарк 300px + лента занимают
   слишком много высоты: иконки One account / Zero paperwork обрезаются
   нижним краем экрана. Поджимаем только ≤767px, десктоп не трогаем. */
@media (max-width:767px){
  main .saving-text,
  .saving-text{
    font-size:clamp(20px,7.4vw,30px) !important;
    line-height:1.08 !important;
    margin-bottom:4px !important;
    padding-left:12px !important;
    padding-right:12px !important;
    box-sizing:border-box;
  }
  main .saving-text .saving-text-main,
  body main .saving-text-main,
  .saving-text .saving-text-main{
    letter-spacing:0 !important;
  }
  .rd-partners{margin:0 auto}

  /* 2026-09-03 — hero-блок на телефоне компактнее по ВЫСОТЕ. Только вертикальные
     отступы; размеры (кегль, логотипы, ширина вордмарка) не трогаем.
     Было: eyebrow 0 0 10px, marquee 0 0 16px, partners 14px, wordmark 22px. */
  .rd-eyebrow{margin-bottom:4px !important}
  .rd-marquee{margin-bottom:6px !important}
  .rd-partners{margin:0 auto 6px !important}
  .rd-wordmark{margin-bottom:8px !important}
}