/* ============================================================================ */
/* REFRESH — hero c photo-card справа, форма слева. Чисто и симпатично.       */
/* ============================================================================ */

:root {
  --psr-red: #F01A26;
  --psr-red-deep: #c90814;
  --psr-red-soft: rgba(240, 26, 38, 0.12);
  --psr-ease: cubic-bezier(.2, .7, .3, 1);
}

html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =================== HERO — светлый фон + анимированные блобы сверху =================== */
.get-quote-section {
  background: linear-gradient(180deg, #fbfcfe 0%, #f2f4f8 100%) !important;
  position: relative !important;
  overflow: hidden;
  border-bottom: 1px solid #e7e9ee;
  padding: 0 !important;
}
.psr-bg-blobs {
  position: absolute !important;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  filter: blur(40px) saturate(1.1);
  opacity: 0.95;
}

/* ============ Минимальный декор: маршрут + пин назначения ============ */
.psr-hero-accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.psr-accent-route {
  position: absolute;
  top: 22%;
  left: 8%;
  width: 84%;
  height: 55%;
  filter: drop-shadow(0 4px 8px rgba(240, 26, 38, 0.18));
}
.psr-accent-path {
  animation: psrAccDash 14s linear infinite;
}
@keyframes psrAccDash {
  to { stroke-dashoffset: -280; }
}

/* ============ 3-step journey ============ */
.psr-journey {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.psr-journey-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(240, 26, 38, 0.18));
}
/* Бегущие точки вдоль пути — dashoffset анимируется, создавая движение */
.psr-journey-path {
  animation: psrPathFlow 2.4s linear infinite;
}
@keyframes psrPathFlow {
  to { stroke-dashoffset: -22; }
}

/* Все 4 пунктирных пути (A, B, C, D) теперь рисуются SVG-путями с координатами,
   которые пересчитывает JS по реальным DOM rect'ам. Смотри <script> в home.twig. */

/* Бейдж-шаг */
.psr-step {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(240, 26, 38, 0.18);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 17, 21, 0.04),
    0 12px 28px -8px rgba(15, 17, 21, 0.14),
    0 4px 10px rgba(240, 26, 38, 0.08);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  white-space: nowrap;
  animation: psrStepFloat 4s ease-in-out infinite;
}
.psr-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff4652 0%, #E30613 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(227, 6, 19, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.psr-step-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.psr-step-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f1115;
  letter-spacing: -0.005em;
}
.psr-step-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--psr-red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}
@keyframes psrStepFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Шаг 1: слева, вне формы. Стрелка ВПРАВО на адресные поля формы.
   От step 1 идёт отдельная пунктирная линия path-a к адресу. */
.psr-step-1 {
  top: 26%;
  left: 1.5%;
  animation-delay: 0s;
}
.psr-step-1::after {
  content: "";
  position: absolute;
  right: -6px; top: 50%;
  width: 12px; height: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(240, 26, 38, 0.18);
  border-right: 1px solid rgba(240, 26, 38, 0.18);
  transform: translateY(-50%) rotate(45deg);
}
/* На узком десктопе (992–1549) слева от формы нет места — прячем step 1
   (условие: W/2 − 588 > 1.5%W + 160 ⇒ W > ~1543, округляем до 1550) */
@media (min-width: 992px) and (max-width: 1549px) {
  .psr-step-1 { display: none !important; }
}

/* Шаг 2: правее формы, над зоной перед фургоном */
.psr-step-2 {
  top: 10%;
  left: 50%;
  animation-delay: 0.8s;
}
.psr-step-2::before {
  content: "";
  position: absolute;
  left: 24px; bottom: -6px;
  width: 12px; height: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-right: 1px solid rgba(240, 26, 38, 0.18);
  border-bottom: 1px solid rgba(240, 26, 38, 0.18);
  transform: rotate(45deg);
}

/* Шаг 3: на фургоне. Совпадает по высоте со step 4. */
.psr-step-3 {
  position: absolute;
  top: 34%;
  left: 54%;
  animation-delay: 1.6s;
  z-index: 4;
}
.psr-step-3::before {
  content: "";
  position: absolute;
  top: -6px; left: 24px;
  width: 12px; height: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid rgba(240, 26, 38, 0.18);
  border-left: 1px solid rgba(240, 26, 38, 0.18);
  transform: rotate(45deg);
}

/* Шаг 4: снизу-справа, под фургоном. Пин над ним — пункт назначения. */
.psr-step-4 {
  top: 72%;
  right: 2%;
  left: auto;
  animation-delay: 2.4s;
}
/* Пин над бейджем step 4 — пункт назначения, куда доставили */
.psr-step-4 .psr-van-pin {
  top: auto;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 36px;
  z-index: 6;
  animation: psrPinFloat 3s ease-in-out infinite;
}
@keyframes psrPinFloat4 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}
.psr-step-4 .psr-van-pin {
  animation: psrPinFloat4 3s ease-in-out infinite;
}
.psr-step-4::after {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  width: 12px; height: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(240, 26, 38, 0.18);
  border-left: 1px solid rgba(240, 26, 38, 0.18);
  transform: translateY(-50%) rotate(45deg);
}

/* Старые стрелочки-хвостики ::after/::before на бейджах убираем —
   их визуально заменяют красные dot-коннекторы */
.psr-step-1::after,
.psr-step-2::before,
.psr-step-3::before,
.psr-step-4::after {
  display: none !important;
}

/* =============== КРАСНЫЕ ТОЧКИ-КОННЕКТОРЫ на лейблах =============== */
/* К каждому step-бейджу привязана пульсирующая красная точка — это
   визуальный якорь, в который приходит пунктирная линия. */
.psr-step-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E30613;
  box-shadow:
    0 0 0 4px rgba(227, 6, 19, 0.22),
    0 0 14px rgba(227, 6, 19, 0.45),
    inset 0 0 3px rgba(255, 255, 255, 0.5);
  animation: psrStepDotPulse 1.8s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes psrStepDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.22), 0 0 14px rgba(227, 6, 19, 0.45), inset 0 0 3px rgba(255, 255, 255, 0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(227, 6, 19, 0.10), 0 0 18px rgba(227, 6, 19, 0.35), inset 0 0 3px rgba(255, 255, 255, 0.5); transform: scale(1.15); }
}
.psr-step-dot-right {
  right: -5px; top: 50%; transform: translateY(-50%);
}
.psr-step-dot-left {
  left: -5px; top: 50%; transform: translateY(-50%);
}
.psr-step-dot-bottom {
  bottom: -5px; left: 50%; transform: translateX(-50%);
}
.psr-step-dot-top {
  top: -5px; left: 50%; transform: translateX(-50%);
}
/* Точки-коннекторы — поверх ::after/::before стрелки.
   Но в базовом шаге у нас animation на самом бейдже двигает translateY —
   чтобы dot оставался в центре, фиксируем его transform-origin относительно бейджа. */

/* Waypoint — пульсирующая точка на пути */
.psr-journey-waypoint {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E30613;
  box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.18), 0 4px 10px rgba(227, 6, 19, 0.35);
  animation: psrWaypointPulse 2s ease-in-out infinite;
  z-index: 3;
}
/* Waypoint 1 — на пути между шагом 2 и шагом 3 (на подъёме дуги) */
.psr-journey-waypoint-1 {
  top: 28%;
  left: 63%;
  width: 8px; height: 8px;
  animation-delay: 0.6s;
}
/* Waypoint 2 — на пути между шагом 3 и шагом 4 (спуск к концу) */
.psr-journey-waypoint-2 {
  top: 72%;
  left: 78%;
}
@keyframes psrWaypointPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(227, 6, 19, 0.18), 0 4px 10px rgba(227, 6, 19, 0.35);
    transform: scale(1);
  }
  50%      {
    box-shadow: 0 0 0 8px rgba(227, 6, 19, 0.08), 0 4px 10px rgba(227, 6, 19, 0.35);
    transform: scale(1.15);
  }
}

/* На мобилке/планшете весь путеводитель прячем (и 3D-фургон тоже) —
   маленькому экрану не хватает места, раскладка ломается */
@media (max-width: 991px) {
  .psr-journey,
  .psr-step,
  .psr-step-3,
  .psr-journey-waypoint,
  .psr-accent-start-badge {
    display: none !important;
  }
}

/* Пин прямо НА фургоне (над крышей) */
.psr-van-pin {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 30px; height: 38px;
  z-index: 3;
  filter: drop-shadow(0 6px 12px rgba(227, 6, 19, 0.40));
  animation: psrPinFloat 3.5s ease-in-out infinite;
}
.psr-van-pin-pulse { /* аура вокруг круга пина */
  position: absolute;
  left: 50%; top: 36%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #E30613;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: psrPinPulse 2.4s ease-out infinite;
}
/* Точка-цель прямо под остриём пина (куда упирается пунктир маршрута) */
.psr-van-pin-target {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #E30613;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 5px rgba(227, 6, 19, 0.18),
    0 4px 10px rgba(227, 6, 19, 0.45);
  animation: psrTargetBeat 1.8s ease-in-out infinite;
}
@keyframes psrTargetBeat {
  0%, 100% { box-shadow: 0 0 0 5px rgba(227, 6, 19, 0.18), 0 4px 10px rgba(227, 6, 19, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(227, 6, 19, 0.10), 0 4px 10px rgba(227, 6, 19, 0.45); }
}
.psr-van-pin svg { width: 100%; height: 100%; display: block; }
.psr-van-pin-pulse {
  position: absolute;
  left: 50%; top: 36%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #E30613;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: psrPinPulse 2.4s ease-out infinite;
}
@keyframes psrPinFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes psrPinPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(3.6); opacity: 0; }
}


@media (max-width: 991px) {
  .psr-hero-accent { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .psr-accent-path, .psr-accent-pin, .psr-accent-pulse,
  .psr-accent-parcel, .psr-accent-badge, .psr-accent-mark { animation: none !important; }
}

/* ============ Callout со стрелкой к форме (italic, gradient arrow) ============ */
.psr-callout {
  position: absolute;
  top: 6%;
  left: -40px;
  width: 190px;
  pointer-events: none;
  z-index: 5;
  animation: psrCalloutFloat 5s ease-in-out infinite;
  text-align: right;
}
.psr-callout-text {
  display: block;
  font-family: 'Nunito Sans', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  color: #0f1115;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 6px 2px 0;
}
.psr-callout-arrow {
  display: block;
  width: 170px;
  height: 100px;
  margin: 0;
  filter: drop-shadow(0 2px 4px rgba(227, 6, 19, 0.18));
}
.psr-callout-sub {
  display: block;
  font-family: 'Nunito Sans', 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  font-style: italic;
  color: var(--psr-red);
  letter-spacing: 0.01em;
  text-align: left;
  margin: -8px 0 0 8px;
}
@keyframes psrCalloutFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (max-width: 991px) {
  .psr-callout { display: none; }
}

/* ============ «Спотлайт» под фургоном — мягко вписывает его в сцену ============ */
.psr-van-3d {
  position: relative;
}
.psr-van-3d::before,
.psr-van-3d::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.psr-van-3d::before {
  /* Мягкий белый ореол вокруг фургона — создаёт впечатление «световой сцены» */
  inset: 0;
  background: radial-gradient(ellipse 75% 55% at 55% 58%, rgba(255, 255, 255, 0.55) 0%, transparent 60%);
  z-index: 1;
}
.psr-van-3d::after {
  /* Тёплый бренд-отсвет снизу слева — связка с тоном формы */
  left: 5%; right: 5%;
  bottom: 10%; height: 40%;
  background: radial-gradient(ellipse at 25% 100%, rgba(227, 6, 19, 0.10) 0%, transparent 55%);
  z-index: 1;
}

/* Убираем старый декор */
.get-quote-section::before,
.get-quote-section::after,
.get-quote-section .main-section::before,
.get-quote-section .container::before,
.get-quote-section .container::after {
  content: none !important;
  display: none !important;
}

/* СЛАЙДШОУ — на мобилке узкая полоска перед формой */
.get-quote-section .bg-slick {
  display: block !important;
  position: relative !important;
  width: calc(100% - 24px) !important;
  height: 200px !important;
  margin: 0 12px 20px !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(15, 17, 21, 0.04),
    0 20px 40px -12px rgba(15, 17, 21, 0.16);
  border: 1px solid #eceef2;
  order: 2;
  z-index: 2;
}

/* Лёгкий бренд-тинт поверх фото */
.get-quote-section .bg-slick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240, 26, 38, 0.08) 0%, rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

.get-quote-section .main-section {
  padding-top: clamp(32px, 4vh, 64px) !important;
  padding-bottom: clamp(24px, 5vh, 56px) !important;
  position: relative; z-index: 1;
  order: 1;
}
.get-quote-section .container { position: relative; z-index: 2; }

/* === ДЕСКТОП (≥992px): секция full-width с фоном, форма выше === */
@media (min-width: 992px) {
  .get-quote-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "form photo";
    align-items: start;
    gap: 56px;
    max-width: none;
    margin: 0;
    padding: clamp(32px, 4vh, 56px) max(32px, calc((100vw - 1280px) / 2 + 32px)) clamp(40px, 6vh, 72px) !important;
    min-height: 640px;
  }
  .get-quote-section .main-section {
    grid-area: form;
    padding: 0 !important;
    background: transparent;
    order: unset;
    position: relative;
    z-index: 2;
    justify-self: end;
    max-width: 560px;
    width: 100%;
  }
  /* 3D-сцена справа, ближе к центру */
  .psr-van-3d {
    grid-area: photo;
    width: 100% !important;
    max-width: 640px;
    height: 100% !important;
    min-height: 520px;
    position: relative;
    align-self: stretch !important;
    z-index: 2;
    justify-self: start;
  }
  .psr-van-3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  /* Никаких декоративных колец и подушек — минимализм */
  .psr-van-3d::before,
  .psr-van-3d::after {
    content: none !important;
    display: none !important;
  }

  /* Контент формы — центрируем в своей колонке */
  .get-quote-section .container-inner {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .saving-text {
    text-align: left !important;
    margin-left: 0 !important;
    width: 100%;
    align-self: stretch;
  }
  .three-buttons-section {
    justify-content: flex-start !important;
    width: 100%;
    align-self: stretch;
  }
}

/* Обеспечиваем display: flex для container-inner (уже есть от d-flex, но безопасно) */
.get-quote-section .container-inner { display: flex; flex-direction: column; }

/* Делаем чтобы на мобилке main-section был выше слайдшоу */
@media (max-width: 991px) {
  .get-quote-section {
    display: flex;
    flex-direction: column;
  }
  .get-quote-section .main-section { order: 1; }
  /* На мобилке/планшете 3D-фургон прячем — слишком тяжёлый и ломает раскладку */
  .psr-van-3d { display: none !important; }
}

/* СЛАЙДЫ: убираем тёмный overlay, позиционируем фото нормально */
.bg-slide-show,
.bg-slide-show-van-riga,
.bg-slide-show-loading-van,
.bg-slide-show-accepted {
  background-size: cover !important;
  background-position: center center !important;
}

/* =================== ЗАГОЛОВОК — ДВЕ ЧАСТИ РЯДОМ НА ОДНОЙ ЛИНИИ =================== */
.saving-text {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 14px !important;
  color: #0f1115 !important;
  text-shadow: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  margin-bottom: 1.3rem !important;
}
.saving-text .saving-text-main,
.saving-text .presco-texts {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Левая часть — мелкая, две строчки допустимы при узком экране */
.saving-text .saving-text-main {
  font-size: clamp(14px, 1.2vw, 18px) !important;
  font-weight: 600 !important;
  color: #4a4f5a !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  max-width: 140px;
  white-space: normal;
  align-self: center !important;
}
/* Правая часть — огромный красный */
.saving-text .presco-texts {
  font-size: clamp(40px, 5vw, 72px) !important;
  font-weight: 900 !important;
  color: var(--psr-red) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none;
  text-shadow: none;
  white-space: nowrap;
}
/* Отключаем анимацию-карусель букв — выглядит сломанно */
.saving-text .presco-texts .letter,
.saving-text .presco-texts .letter.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  display: inline !important;
}

/* ====== ФОРМА: ГЛАВНЫЙ ГЕРОЙ — парит над фоном, приковывает взгляд ====== */
.new-form-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid rgba(231, 234, 240, 0.9) !important;
  border-radius: 24px !important;
  padding: 32px 34px 34px !important;
  box-shadow:
    /* чёткий ближний слой */
    0 2px 4px rgba(15, 17, 21, 0.04),
    0 8px 18px -4px rgba(15, 17, 21, 0.08),
    /* средний тени — глубина */
    0 24px 48px -12px rgba(15, 17, 21, 0.14),
    /* дальний брендовый блик снизу */
    0 48px 100px -28px rgba(240, 26, 38, 0.25),
    /* очень дальний ореол — форма как парит */
    0 80px 160px -40px rgba(15, 17, 21, 0.18),
    /* внутренний светлый контур для 3D-эффекта */
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 !important;
  align-self: stretch !important;
  position: relative;
  z-index: 4;
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.new-form-wrapper:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow:
    0 4px 8px rgba(15, 17, 21, 0.06),
    0 14px 30px -6px rgba(15, 17, 21, 0.12),
    0 32px 64px -14px rgba(15, 17, 21, 0.18),
    0 58px 120px -32px rgba(240, 26, 38, 0.32),
    0 90px 180px -44px rgba(15, 17, 21, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}
/* Тонкий красный акцент слева, как на карточках выгод — связь с брендом */
.new-form-wrapper::before {
  content: "";
  position: absolute;
  left: -1px; top: 28px; bottom: 28px;
  width: 3px;
  background: linear-gradient(180deg, #ff3b41, var(--psr-red) 50%, transparent 100%);
  border-radius: 2px;
  pointer-events: none;
}
@media (max-width: 560px) {
  .new-form-wrapper {
    padding: 20px 18px 22px !important;
    border-radius: 14px !important;
    max-width: 100% !important;
  }
  .new-form-wrapper::before { top: 20px; bottom: 20px; }
}

/* ====== ЛЕЙБЛЫ: компактные, uppercase, с тонкой акцентной полоской ====== */
#mainForm .section-labels .label-text,
#mainForm .parcel-type-section > .label-text,
#mainForm .dimensions-section > .label-text {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 11px !important;
  color: #3a3f4a !important;
  font-weight: 800 !important;
  padding-left: 10px !important;
  position: relative;
  margin-bottom: 6px !important;
}
#mainForm .section-labels .label-text:not(.label-postal)::before,
#mainForm .parcel-type-section > .label-text::before,
#mainForm .dimensions-section > .label-text::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 12px;
  background: var(--psr-red);
  border-radius: 2px;
  transform: translateY(-50%);
}
#mainForm .label-postal {
  text-align: right !important;
  padding-left: 0 !important;
}
#mainForm .label-postal::before { display: none !important; }

/* ====== Гасим autofill Chrome (сине-жёлтый хак) ====== */
#mainForm input:-webkit-autofill,
#mainForm input:-webkit-autofill:hover,
#mainForm input:-webkit-autofill:focus,
#mainForm input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1a1d24 !important;
  caret-color: #1a1d24 !important;
  transition: background-color 9999s ease-in-out 0s !important;
  border-color: inherit !important;
}
#mainForm input { background-color: #ffffff !important; }

/* ====== ИНПУТЫ: чище, фокус с красным glow ====== */
#mainForm {
  --input-height: 48px !important;
}
#mainForm .merged-input-group,
#mainForm .standard-input,
#mainForm .custom-select-wrapper.full-width .custom-select-trigger {
  border-radius: 10px !important;
  border: 1.5px solid #e3e6ec !important;
  background: #fff !important;
  height: 48px !important;
  font-size: 15px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#mainForm .merged-input-group:focus-within,
#mainForm .standard-input:focus,
#mainForm .custom-select-wrapper.full-width.open .custom-select-trigger {
  border-color: var(--psr-red) !important;
  box-shadow: 0 0 0 3px var(--psr-red-soft) !important;
}

#mainForm .vertical-divider {
  background: #e3e6ec !important;
  width: 1px !important;
  height: 60% !important;
}
#mainForm .country-wrapper { border: none !important; }
#mainForm .flag-trigger {
  background: #fafbfc !important;
  border-right: 1px solid #e3e6ec;
}

/* ====== DIMENSIONS: читаемая сетка 4 полей ====== */
#mainForm .dimensions-section { margin-top: 8px !important; }
#mainForm .dimensions-section > .label-text { margin-bottom: 8px !important; }

#mainForm #parcel-items-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
#mainForm .parcel-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
#mainForm .parcel-card .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px !important;
}
#mainForm .parcel-card .item-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 24px;
  font-size: 12px; font-weight: 800;
  color: var(--psr-red) !important;
  background: var(--psr-red-soft);
  border-radius: 6px;
  padding: 0 8px;
}
#mainForm .grid-4 { gap: 8px !important; }

/* Каждое измерение: лейбл сверху, инпут + unit внизу (flex column-reverse) */
#mainForm .dim-input-wrapper {
  display: flex !important;
  flex-direction: column-reverse !important;
  justify-content: flex-end !important;
  background: #ffffff;
  border: 1.5px solid #e3e6ec;
  border-radius: 10px;
  position: relative;
  padding: 10px 12px 12px !important;
  height: 66px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#mainForm .dim-input-wrapper:focus-within {
  border-color: var(--psr-red) !important;
  box-shadow: 0 0 0 3px var(--psr-red-soft);
}
#mainForm .dim-input-wrapper input {
  border: none !important;
  background: transparent !important;
  height: 24px !important;
  padding: 0 26px 0 0 !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f1115 !important;
  width: 100%;
  line-height: 1 !important;
}
#mainForm .dim-input-wrapper input::placeholder {
  color: #c6ccd4;
  font-weight: 500;
}
#mainForm .dim-input-wrapper .dim-label {
  position: static !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: #6d7280 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  pointer-events: none;
  white-space: nowrap;
  overflow: visible;
}
#mainForm .dim-input-wrapper .dim-unit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  color: #9aa0a6;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
#mainForm .dim-input-wrapper:focus-within .dim-label {
  color: var(--psr-red) !important;
}

/* Дефолтный плейсхолдер в инпутах с " " — заменяем на "0" для наглядности через CSS content на ::before? Нет, это не работает. Используем :placeholder-shown с attr(placeholder). Проще: покажем пунктирный "–" как индикатор */
#mainForm .dim-input-wrapper input:placeholder-shown::after { content: ""; }

/* ====== КНОПКИ: чисто, без шиммера, без градиентов ====== */
#mainForm .buttons-area {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px !important;
}
#mainForm .buttons-area #addItemButton {
  flex: 0 0 auto;
  min-width: 130px;
  height: 50px;
  /* Красная обводка */
  border: 1.5px solid var(--psr-red, #E30613) !important;
  background: #fff !important;
  color: var(--psr-red, #E30613) !important;
  border-radius: 10px !important;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
#mainForm .buttons-area #addItemButton .plus-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--psr-red-soft);
  color: var(--psr-red);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
#mainForm .buttons-area #addItemButton:hover {
  border-color: var(--psr-red) !important;
  color: var(--psr-red) !important;
  background: #fff5f6 !important;
  box-shadow: 0 4px 14px -2px rgba(240, 26, 38, 0.20);
}
#mainForm .buttons-area button[type="submit"].btn-primary {
  flex: 1 1 auto;
  height: 50px;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--psr-red) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(240, 26, 38, 0.22);
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
#mainForm .buttons-area button[type="submit"].btn-primary:hover {
  background: var(--psr-red-deep) !important;
  box-shadow: 0 10px 22px rgba(240, 26, 38, 0.3);
  transform: translateY(-1px);
}
#mainForm .buttons-area button[type="submit"].btn-primary:active { transform: translateY(0); }
#mainForm .buttons-area button[type="submit"].btn-primary img.search-icon {
  width: 16px !important;
  filter: brightness(0) invert(1);
}

@media (max-width: 520px) {
  /* Add item сверху, GET A QUOTE снизу (нормальный flex column) */
  #mainForm .buttons-area { flex-direction: column !important; }
  #mainForm .buttons-area #addItemButton,
  #mainForm .buttons-area button[type="submit"].btn-primary { width: 100%; min-width: 0; }
}

/* Postal поля */
/* Лейблы используют ту же flex-раскладку что и .row-container */
#mainForm .section-labels {
  gap: 12px !important;
  justify-content: flex-start !important;
}
#mainForm .section-labels > .label-text:first-child {
  flex: 1 !important;
  min-width: 0 !important;
}
#mainForm .postal-container { width: 88px !important; }
#mainForm .label-postal {
  width: 88px !important;
  text-align: center !important;
  right: 15px !important;          /* сдвинут на 15px влево */
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
#mainForm .standard-input {
  text-align: center !important;
  padding: 0 8px !important;
  font-size: 14px !important;
}
@media (max-width: 480px) {
  #mainForm .postal-container { width: 75px !important; }
  #mainForm .label-postal { width: 75px !important; }
  #mainForm .standard-input { font-size: 13px !important; padding: 0 6px !important; }
}

/* ====== 3 ПИЛЮЛИ ПОД ФОРМОЙ — теперь на светлом фоне ====== */
.three-buttons-section {
  margin-top: 18px !important;
  gap: 10px !important;
}
.three-buttons {
  background: #ffffff !important;
  border: 1px solid #e3e6ec !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #1a1d24 !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
  transition: border-color .15s ease, transform .15s var(--psr-ease), box-shadow .15s ease;
}
.three-buttons:hover {
  border-color: var(--psr-red) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240, 26, 38, 0.10);
}
.three-buttons span {
  color: #1a1d24 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.three-buttons img {
  filter: none;
  width: 18px; height: 18px;
  padding: 3px;
  background: var(--psr-red);
  border-radius: 50%;
}

/* ====== ЗАГОЛОВОК над формой — лёгкая полировка ====== */
.saving-text {
  letter-spacing: -0.015em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
  line-height: 1.2 !important;
}

/* ============================================================================ */
/* ПАРТНЁРЫ (верхняя горизонтальная лента)                                    */
/* ============================================================================ */
.our-partners-horizontal-slider {
  background: #ffffff !important;
  padding: 48px 0 52px !important;
  border-bottom: 1px solid #eceef2;
}
.our-partners-horizontal-slider .container { max-width: 1280px; }
.our-partners-horizontal-slider h1 {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #6d7280 !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  position: relative;
  display: block;
}
.our-partners-horizontal-slider h1::before,
.our-partners-horizontal-slider h1::after {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: #d5d8e0;
  vertical-align: middle;
  margin: 0 16px;
}
/* Слайдер партнёров — работает через Slick Carousel (ourPartnersCarousel.js).
   Минимум override'ов: только снимаем старый max-width:700px и причесываем размер логотипов. */
.our-partners-horizontal-slider .horizontal-slider {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
.our-partners-horizontal-slider .horizontal-slider-picture-holder img {
  max-height: 44px !important;
  max-width: 130px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  opacity: 0.85;
  transition: opacity .3s ease, transform .3s var(--psr-ease);
}
.our-partners-horizontal-slider .horizontal-slider-picture-holder:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* ============================================================================ */
/* EXCLUSIVE BENEFITS — модернизированный                                     */
/* ============================================================================ */
.exclusive-benefits {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%) !important;
  padding: 80px 0 !important;
  position: relative;
}
.exclusive-benefits .container { max-width: 1200px; }
.exclusive-benefits-header { text-align: center !important; }
.exclusive-benefits-h1 {
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #0f1115 !important;
  max-width: 720px;
  margin: 0 auto 24px !important;
}
.exclusive-benefits-h1 a.text-primary {
  color: var(--psr-red) !important;
  font-weight: 900 !important;
}
.exclusive-benefits .btn.button-header {
  background: var(--psr-red) !important;
  border: none !important;
  padding: 14px 36px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(240, 26, 38, 0.22);
  transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.exclusive-benefits .btn.button-header:hover {
  background: var(--psr-red-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(240, 26, 38, 0.30);
}

/* Карточки преимуществ */
.exclusive-benefits-block { gap: 20px !important; padding-top: 20px; }
.exclusive-benefits-holder {
  background: #ffffff;
  border: 1px solid #eceef2;
  border-radius: 16px;
  padding: 22px 24px !important;
  gap: 20px !important;
  box-shadow: 0 1px 2px rgba(15, 17, 21, 0.03), 0 6px 16px rgba(15, 17, 21, 0.04);
  transition: transform .2s var(--psr-ease), box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.exclusive-benefits-holder::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #ff3b41, var(--psr-red));
  border-radius: 4px 0 0 4px;
}
.exclusive-benefits-holder:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 26, 38, 0.18);
  box-shadow: 0 2px 4px rgba(15, 17, 21, 0.04), 0 14px 28px rgba(15, 17, 21, 0.08);
}

/* Прячем старые хитрые стрелки (они ломают современный вид) */
.exclusive-benefits-arrow {
  display: none !important;
}

/* animation-arrows.js триггерит opacity:1 на .block-exlusive через .exclusive-benefits-arrow animationend.
   Так как я скрыл стрелку — animationend не срабатывает. Форсим opacity:1 напрямую. */
.block-exlusive,
.exclusive-benefits-holder > div {
  opacity: 1 !important;
}

.block-exlusive { gap: 10px !important; }
.block-exlusive > div:first-child span {
  display: inline-block;
  letter-spacing: 0.01em !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.transparency-color { background: var(--psr-red) !important; }
.rates-color { background: #1a1d24 !important; }
.shipment-color { background: #ff7a00 !important; }
.exclusive-benefits-inscription {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #4a4f5a !important;
  font-weight: 400 !important;
}

.exclusive-benefits-hand-picture {
  position: relative;
}
.exclusive-benefits-hand-picture img {
  filter: drop-shadow(0 20px 40px rgba(15, 17, 21, 0.12));
  animation: psrHandFloat 5s ease-in-out infinite;
}
@keyframes psrHandFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .exclusive-benefits-hand-picture img { animation: none; }
}

/* ============================================================================ */
/* PARTNERS (красная секция)                                                  */
/* ============================================================================ */
.partners {
  background:
    radial-gradient(800px 500px at 100% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(135deg, #d00c18 0%, #F01A26 50%, #a50810 100%) !important;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}
.partners::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  pointer-events: none;
}
.partners .container { position: relative; z-index: 1; max-width: 1200px; }
.partners .inner-partners .middle-text {
  font-size: 40px !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  margin-bottom: 18px !important;
}
.partners .inner-partners .main-partner-text {
  font-size: 16px !important;
  opacity: 0.88;
  max-width: 640px;
  line-height: 1.55 !important;
  margin-bottom: 44px !important;
}
.partners-images {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px !important;
}
@media (max-width: 768px) {
  .partners-images { grid-template-columns: repeat(2, 1fr); }
}
.partners .block-pictures {
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 14px;
  padding: 24px 20px !important;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.12);
  transition: transform .2s var(--psr-ease), box-shadow .2s ease;
}
.partners .block-pictures:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.10), 0 18px 36px rgba(0, 0, 0, 0.18);
}
.partners .block-pictures img {
  max-height: 44px !important;
  max-width: 80% !important;
  width: auto !important;
  transition: none !important;
  transform: none !important;
}

/* ============================================================================ */
/* APPLICATION (телефон-приложение)                                           */
/* ============================================================================ */
.application {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%) !important;
  padding: 80px 0 !important;
}
.application .container { max-width: 1200px; }
.application .tablet-mobile-heading h1,
.application .text-holder-in-application h1 {
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #0f1115 !important;
}
.application .text-holder-in-application a.w-85 {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: #4a4f5a !important;
  max-width: 560px;
}
.application .tablet-mobile-bottom h3 {
  letter-spacing: -0.005em !important;
  font-weight: 800 !important;
}
.application .circle-puncts {
  box-shadow: 0 6px 14px rgba(240, 26, 38, 0.26) !important;
  font-weight: 800 !important;
  border: 3px solid #fff;
  outline: 1px solid rgba(240, 26, 38, 0.18);
}
.application .puncts-inscription {
  font-weight: 600 !important;
  color: #1a1d24 !important;
  font-size: 15.5px !important;
}
.application .mobile-application-picture {
  transition: transform .2s var(--psr-ease);
}
.application .mobile-application-transition img {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.08));
  transition: transform .2s var(--psr-ease), filter .2s ease;
  border-radius: 10px;
}
.application .mobile-application-transition:hover img {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14));
}

/* ============================================================================ */
/* Reduced motion overrides                                                   */
/* ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .three-buttons,
  .horizontal-slider-picture-holder img,
  .exclusive-benefits-holder,
  .partners .block-pictures,
  .application .mobile-application-transition img,
  #mainForm .buttons-area button[type="submit"].btn-primary,
  #mainForm .buttons-area #addItemButton,
  .exclusive-benefits .btn.button-header {
    transition: none !important;
  }
}

/* ============================================================================ */
/* WhatsApp + reCAPTCHA — стек справа-снизу.                                     */
/* Капча свёрнута до иконки, разворачивается при hover. WhatsApp плотно над ней. */
/* ============================================================================ */
.grecaptcha-badge {
  bottom: 4px !important;
  right: 4px !important;
  left: auto !important;
  width: 70px !important;          /* свёрнута — только иконка */
  overflow: hidden !important;
  transition: width .35s cubic-bezier(.2,.7,.3,1) !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: 999 !important;
  box-shadow: 0 0 6px rgba(0,0,0,.18) !important;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within {
  width: 256px !important;          /* разворачивается на наведение */
}
/* WhatsApp плотно над капчей: 4 (низ капчи) + 60 (высота капчи) + 8 (зазор) = 72px */
.whatsapp-float,
.whatsapp-float.right,
.whatsapp-float.left {
  bottom: 72px !important;
  right: 9px !important;
  left: auto !important;
}
@media (max-width: 768px) {
  .grecaptcha-badge {
    bottom: 4px !important;
    right: 4px !important;
    left: auto !important;
    width: 60px !important;
    transform: none !important;
  }
  .grecaptcha-badge:hover,
  .grecaptcha-badge:focus-within {
    width: 230px !important;
  }
  .whatsapp-float,
  .whatsapp-float.right,
  .whatsapp-float.left {
    bottom: 68px !important;
    right: 7px !important;
    left: auto !important;
  }
}

/* ============================================================================ */
/* TABLET (768–1366px) — все iPad portrait и landscape                         */
/* Покрывает: iPad mini, iPad, iPad Air, iPad Pro 11", iPad Pro 12.9"          */
/* (включая 1366×1024 ландшафт самого большого iPad Pro)                       */
/* ============================================================================ */
@media (min-width: 768px) and (max-width: 1366px) {

  /* === ОБЩЕЕ: одна колонка, никаких desktop grid/absolute декораций === */
  .get-quote-section {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 16px 24px 32px !important;       /* было 40 24 48 — ужал hero сверху и снизу */
    min-height: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  /* Все desktop-only декорации hero — прячем (3D, маршрут, tracking-карточка, степпер) */
  /* Селектор через .get-quote-section — поднимает специфичность, чтобы перебить inline <style> в home.html */
  .get-quote-section .psr-van-3d,
  .get-quote-section .psr-van-3d.psr-wordmark-stage,
  .get-quote-section .psr-journey,
  .get-quote-section .psr-scroll-hint,
  .get-quote-section .psr-track-card,
  .get-quote-section .psr-eyebrow,
  .get-quote-section .psr-rotator,
  .get-quote-section .psr-coverage,
  .get-quote-section .psr-stat,
  .get-quote-section .psr-step,
  .get-quote-section .psr-van-pin,
  .get-quote-section .psr-wordmark,
  .get-quote-section .psr-wordmark-stage {
    display: none !important;
  }
  /* Нижний дубль слайдера партнёров — лишний, hero-partners уже сверху */
  .our-partners-horizontal-slider {
    display: none !important;
  }

  .get-quote-section .container-inner {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;                  /* было 20 — плотнее между блоками */
    grid-area: unset !important;
    justify-self: center !important;
  }
  /* main-section: убираем justify-self: end и desktop-сдвиг */
  .get-quote-section .main-section {
    grid-area: unset !important;
    justify-self: center !important;
    max-width: 720px !important;
    width: 100% !important;
    transform: none !important;
    background: transparent !important;
  }

  /* === Заголовок: центрируем, разумный размер. Ужато для iPad Pro и laptops. === */
  .saving-text {
    justify-content: center !important;
    text-align: center !important;
    margin: 2px auto 10px !important;       /* было 4 / 22 — плотнее */
    max-width: 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body .saving-text .saving-text-main {
    font-size: 14px !important;             /* было 16 */
    text-align: center !important;
    color: #4a4f5a !important;
    margin: 0 auto !important;
    max-width: none !important;
  }
  /* body-prefix чтобы перебить hero-premium.css clamp(42,5.4vw,78) который загружается позже */
  body .saving-text .presco-texts {
    font-size: clamp(34px, 4vw, 48px) !important;    /* было clamp(44,6vw,64) — теперь max 48px */
    margin: 0 auto !important;
    align-self: center !important;
    line-height: 1 !important;
  }

  /* === PARTNERS PANEL — компактнее на iPad Pro / laptop range === */
  .psr-hero-partners {
    position: relative !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto 10px !important;         /* было 4 / 18 */
    padding: 10px 14px 12px !important;     /* было 14 / 16 */
    align-self: center !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }
  .psr-hero-partners-head {
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 6px;
    column-gap: 12px;
    padding-left: 0 !important;
  }
  .psr-hero-partners-label {
    font-size: 11px !important;
    flex: 1 1 auto !important;
    max-width: 100%;
    text-align: center;
    white-space: normal !important;
  }
  .psr-hero-partners-label::before {
    display: none !important;
  }
  .psr-hero-partners::after {
    display: none !important;
  }
  .psr-hero-marquee {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%) !important;
  }
  .psr-hero-marquee-track {
    width: max-content !important;
    animation-duration: 28s !important;
    gap: 10px !important;
  }
  .psr-hero-logo {
    width: 96px !important;
    height: 48px !important;
    padding: 6px 8px !important;
  }
  .psr-hero-logo img {
    max-height: 28px !important;
  }

  /* iPad Pro / laptops: carrier-карточки — 4 колонки (8 carriers = 4×2 ровные строки,
     без дырки в последнем ряду). Раньше 3 колонки оставляли пустое место в row 3. */
  body .partners .partners-images {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    max-width: 1000px !important;
  }
  body .partners .block-pictures {
    height: 150px !important;
    padding: 22px 18px !important;
  }

  /* Exclusive Benefits cards (Get Full Transparency / Compare Rates / All Your Shipments)
     — все 3 одинаково left-aligned, прижаты к левому краю карточки */
  body .exclusive-benefits .exclusive-benefits-holder {
    padding-left: 8px !important;          /* было 18-22 — pill ближе к левому краю */
    gap: 0 !important;                     /* убираем gap-5 (40px) от арроу к контенту */
  }
  body .exclusive-benefits .exclusive-benefits-holder .block-exlusive {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  body .exclusive-benefits .exclusive-benefits-holder .block-exlusive > div {
    width: 100% !important;
    text-align: left !important;
    display: block !important;            /* убираем flex чтобы pill не плыл вправо */
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Pill (Compare Rates Even Quicker / Get Full Transparency / All Your Shipments)
     — стандартный inline-flex, сидит слева у самого края */
  body .exclusive-benefits .exclusive-benefits-holder .block-exlusive [class*="-color"] {
    display: inline-flex !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }
  /* Текст inscription тоже flush-left */
  body .exclusive-benefits .exclusive-benefits-holder .exclusive-benefits-inscription {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  body .exclusive-benefits .exclusive-benefits-holder .exclusive-benefits-inscription {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* === ФОРМА: центрируем и даём комфортный размер === */
  .new-form-wrapper {
    max-width: 600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    align-self: center !important;
    padding: 28px 30px 30px !important;
    border-radius: 22px !important;
  }

  /* === THREE BUTTONS (Easy Ordering / Trusted / Secure) === */
  .three-buttons-section {
    max-width: 640px !important;
    margin: 12px auto 0 !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    align-self: center !important;
    padding: 0 4px;
  }

  /* === HOW IT WORKS — больше padding === */
  .how-it-works {
    padding: 60px 32px !important;
    max-width: 760px;
    margin: 0 auto;
  }
  .how-it-works .d-flex.outer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* === EXCLUSIVE BENEFITS === */
  .exclusive-benefits {
    padding: 30px 0 !important;
  }
  .exclusive-benefits .container {
    padding: 40px 32px !important;
    max-width: 900px !important;
  }
  .exclusive-benefits-block {
    max-width: 760px;
    margin: 0 auto;
    gap: 28px !important;
  }
  .exclusive-benefits-h1 {
    font-size: 36px !important;
    text-align: center !important;
  }

  /* === PARTNERS GRID === */
  .partners .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
    max-width: 900px !important;
  }

  /* === DOWNLOAD APPLICATION === */
  .application,
  .inner-application {
    padding: 50px 24px !important;
  }

  /* === Страховка от горизонтального скролла === */
  html, body {
    overflow-x: hidden !important;
  }
}


/* ============================================================================ */
/* HOW IT WORKS — премиум refresh без изменения концепта                       */
/* Сохраняем: зигзаг (left/right), центральный таймлайн с кругами, fade-in JS  */
/* Усиливаем: фон, заголовок, цифры, glow таймлайна, hover'ы, движения         */
/* ============================================================================ */

/* === СЕКЦИЯ: без своего фона, без декораций — наследует body (без границ) === */
.how-it-works {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: transparent !important;
}

/* === ЗАГОЛОВОК — крупный, с эйброу, dot-разделителями и подчёркиванием === */
.how-it-works .how-it-works-heading {
  font-size: clamp(40px, 4.6vw, 64px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 auto 72px !important;
  padding-top: 32px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #0f1115 0%, #2c3138 45%, #0f1115 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  position: relative;
  text-shadow: none !important;
}
/* Eyebrow с точками-разделителями */
.how-it-works .how-it-works-heading::before {
  content: "•  5 simple steps  •";
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--psr-red);
  -webkit-text-fill-color: var(--psr-red);
  background: none;
  margin-bottom: 18px;
  font-family: 'Nunito Sans', sans-serif;
  filter: drop-shadow(0 2px 8px rgba(240,26,38,0.25));
}
/* Анимированная подчёркивающая линия */
.how-it-works .how-it-works-heading::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 22px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 0%, #ff3b41 20%, #E30613 50%, #ff3b41 80%, transparent 100%);
  box-shadow: 0 4px 18px rgba(240,26,38,0.45);
  animation: hiwHeadingLine 3.5s ease-in-out infinite;
}
@keyframes hiwHeadingLine {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50%      { transform: scaleX(1.4); opacity: 0.7; }
}

/* === ЦИФРЫ ШАГОВ (01-05) — градиент + halo glow + tilt при hover === */
.how-it-works .d-flex.inner h3,
.how-it-works .d-flex.inner.mobile h3 {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  padding: 12px 16px !important;
  margin: auto 0 !important;
  background: linear-gradient(135deg, #ff5158 0%, #E30613 55%, #b80612 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(240,26,38,0.30));
  transition: filter .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  position: relative;
  z-index: 1;
  overflow: visible !important;
  display: inline-block;
}
/* Halo glow за цифрой */
.how-it-works .d-flex.inner h3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 110% 80% at center, rgba(240,26,38,0.16) 0%, transparent 65%);
  filter: blur(18px);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}
/* Чтобы тень/halo не обрезались — родителям inner и outer ставим overflow visible */
.how-it-works .d-flex.inner,
.how-it-works .d-flex.outer {
  overflow: visible !important;
}
.how-it-works .d-flex.outer:hover .d-flex.inner h3 {
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 10px 32px rgba(240,26,38,0.45));
}

/* === ТЕКСТ ШАГА — крупнее, чище === */
.how-it-works .d-flex.inner h2 {
  font-weight: 800 !important;
  letter-spacing: -0.012em !important;
  color: #0f1115 !important;
  line-height: 1.2 !important;
}
.how-it-works .left-text > div,
.how-it-works .right-text > div {
  color: #5b6068 !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* === ВЕРТИКАЛЬНАЯ ЛИНИЯ возле цифры (между h3 и текстом) === */
.how-it-works .d-flex.inner > .vertical-line {
  border: none !important;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, #ff3b41 15%, #E30613 50%, #ff3b41 85%, transparent 100%);
  border-radius: 3px;
  align-self: stretch;
  box-shadow: 0 0 12px rgba(240,26,38,0.30);
}

/* === Subtle stage за каждым outer (мягкий blur-фон, виден только при hover) === */
.how-it-works .d-flex.outer {
  position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
  z-index: 1;
}
.how-it-works .d-flex.outer:hover {
  transform: translateY(-2px);
}

/* === ЦЕНТРАЛЬНЫЙ ТАЙМЛАЙН: круги с glass-эффектом + glow === */
.how-it-works .round-circle-steps {
  border-width: 3px !important;
  border-color: rgba(240, 26, 38, 0.30) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0.7) 100%) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 5px rgba(240,26,38,0.05),
    0 6px 18px -2px rgba(240,26,38,0.15),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: all .6s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
/* Когда круг активирован — заливается, увеличивается, добавляется pulse-кольцо */
.how-it-works .round-circle-steps.bg-primary,
.how-it-works .round-circle-steps.show-fade-in.bg-primary {
  border-color: #E30613 !important;
  background: radial-gradient(circle at 30% 30%, #ff5158 0%, #E30613 60%, #b80612 100%) !important;
  box-shadow:
    0 0 0 8px rgba(240,26,38,0.12),
    0 0 0 14px rgba(240,26,38,0.06),
    0 0 30px rgba(240,26,38,0.55),
    0 8px 24px -2px rgba(240,26,38,0.45),
    inset 0 2px 4px rgba(255,255,255,0.20),
    inset 0 -2px 4px rgba(0,0,0,0.10);
  transform: scale(1.12);
}
/* Pulse-волна вокруг активного круга */
.how-it-works .round-circle-steps.bg-primary::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(240,26,38,0.5);
  animation: hiwCirclePulse 2.5s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
}
@keyframes hiwCirclePulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0;   }
  100% { transform: scale(1.55); opacity: 0;   }
}
/* Финальный круг с галочкой */
.how-it-works .round-circle-steps.bg-primary img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}

/* === Линии между кружочками: красный градиент с shimmer-эффектом === */
.how-it-works .steps-line {
  border: none !important;
  width: 3px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
    linear-gradient(180deg, #ff3b41 0%, #E30613 100%);
  background-size: 100% 30%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 -30%, 0 0;
  border-radius: 3px;
  height: 0;
  box-shadow: 0 0 10px rgba(240,26,38,0.40), 0 0 20px rgba(240,26,38,0.20);
  transition: height 0.9s cubic-bezier(.2,.7,.3,1);
}
.how-it-works .steps-line.line-fade-in {
  height: 100%;
  animation: hiwLineShimmer 3s linear infinite 0.9s;
}
@keyframes hiwLineShimmer {
  0%   { background-position: 0 -50%, 0 0; }
  100% { background-position: 0 150%,  0 0; }
}

/* === SEND TO КАПСУЛЫ НА КАРТЕ: glass + hover-pulse === */
.how-it-works .send-to-span {
  background: linear-gradient(135deg, rgba(15,17,21,0.94), rgba(44,49,56,0.94)) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 28px -6px rgba(15,17,21,0.40), 0 1px 0 rgba(255,255,255,0.12) inset;
  border-radius: 10px !important;
  transition: transform .3s var(--psr-ease), box-shadow .3s var(--psr-ease);
  position: relative;
}
.how-it-works .send-to-span::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(240,26,38,0) 0%, rgba(240,26,38,0.4) 50%, rgba(240,26,38,0) 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity .3s ease;
  filter: blur(4px);
}
.how-it-works .send-to-span:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 40px -8px rgba(15,17,21,0.50), 0 0 24px rgba(240,26,38,0.30), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.how-it-works .send-to-span:hover::before {
  opacity: 1;
}

/* === ИКОНКИ ТИПА ДОСТАВКИ (Step 02): мягкий 3D с hover === */
.how-it-works .bg-type-background {
  background:
    radial-gradient(circle at 30% 25%, #ffffff 0%, #f4f6fa 70%, #eef0f5 100%) !important;
  border: 1px solid rgba(231, 234, 240, 0.95);
  box-shadow:
    0 2px 6px rgba(15,17,21,0.06),
    0 6px 16px -4px rgba(15,17,21,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 4px rgba(15,17,21,0.04);
  transition: transform .3s var(--psr-ease), box-shadow .3s var(--psr-ease), border-color .3s ease;
}
.how-it-works .bg-type-background:hover {
  transform: translateY(-4px) scale(1.08) rotate(-3deg);
  border-color: rgba(240, 26, 38, 0.40);
  box-shadow:
    0 12px 26px -4px rgba(240,26,38,0.22),
    0 0 24px rgba(240,26,38,0.18),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

/* === ПОДПИСИ TIME/MONEY/EFFICIENCY (Step 03) — без переноса === */
.how-it-works .efficiency-text {
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: #5b6068 !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  transition: color .3s ease;
}
/* Контейнер с тремя подписями — больше места между колонками */
.how-it-works .holder-saving-euro {
  gap: 6px !important;
}
.how-it-works .holder-saving-euro > div:hover .efficiency-text {
  color: var(--psr-red) !important;
}
.how-it-works .vertical-line-hwt,
.how-it-works .horizontal-line-hwt {
  border-color: rgba(240,26,38,0.45) !important;
  filter: drop-shadow(0 0 4px rgba(240,26,38,0.20));
}
/* Иконки часы/евро/молния — лёгкий float */
.how-it-works .quality-and-service-images1,
.how-it-works .quality-and-service-images2,
.how-it-works .quality-and-service-images3 {
  transition: transform .35s cubic-bezier(.2,.7,.3,1), filter .35s ease;
  filter: drop-shadow(0 4px 14px rgba(240,26,38,0.18));
}
.how-it-works .quality-and-service-images1:hover,
.how-it-works .quality-and-service-images2:hover,
.how-it-works .quality-and-service-images3:hover {
  transform: translateY(-6px) scale(1.08);
  filter: drop-shadow(0 12px 24px rgba(240,26,38,0.40));
}

/* === Dashed-circle (Step 04) === */
.how-it-works .dashed-circle {
  filter: drop-shadow(0 8px 24px rgba(240,26,38,0.18));
}
.how-it-works .bank-card-circle {
  transition: transform .3s var(--psr-ease), filter .3s ease;
}
.how-it-works .bank-card-circle:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 6px 14px rgba(240,26,38,0.30));
}

/* === Magnifying glass (Step 03) — лёгкий float === */
.how-it-works .magnifying-glass {
  filter: drop-shadow(0 8px 18px rgba(240,26,38,0.20));
  transition: transform .35s var(--psr-ease);
}
.how-it-works .d-flex.outer:hover .magnifying-glass {
  transform: rotate(-8deg) scale(1.05);
}

/* === Tick (Step 03) — финальная галочка === */
.how-it-works .tick-finish {
  filter: drop-shadow(0 6px 16px rgba(240,26,38,0.30));
  animation: hiwTickPulse 3s ease-in-out infinite;
}
@keyframes hiwTickPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* === parcel-delivering (Step 05) — soft frame === */
.how-it-works .parcel-delivering img {
  filter: drop-shadow(0 12px 28px rgba(15,17,21,0.18));
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.how-it-works .d-flex.outer:hover .parcel-delivering img {
  transform: translateY(-4px) scale(1.02);
}

/* === КНОПКА "Start Delivering Right Now" — премиум с shimmer === */
.how-it-works-bottom .button-header,
.how-it-works-bottom .btn {
  background: linear-gradient(135deg, #ff4652 0%, #E30613 50%, #c90814 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 18px 40px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  box-shadow:
    0 10px 30px -8px rgba(240,26,38,0.50),
    0 4px 8px rgba(15,17,21,0.10),
    inset 0 1px 0 rgba(255,255,255,0.20);
  transition: transform .35s var(--psr-ease), box-shadow .35s var(--psr-ease), background-position .8s ease, filter .3s ease;
  position: relative;
  overflow: hidden;
}
.how-it-works-bottom .button-header::before,
.how-it-works-bottom .btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  transition: left .7s cubic-bezier(.2,.7,.3,1);
}
.how-it-works-bottom .button-header:hover,
.how-it-works-bottom .btn:hover {
  transform: translateY(-4px) scale(1.04) !important;
  background-position: 100% 50% !important;
  box-shadow:
    0 18px 40px -8px rgba(240,26,38,0.65),
    0 6px 14px rgba(15,17,21,0.14),
    inset 0 1px 0 rgba(255,255,255,0.25);
  filter: brightness(1.06);
}
.how-it-works-bottom .button-header:hover::before,
.how-it-works-bottom .btn:hover::before {
  left: 150%;
}

/* === FADE-IN: только на DESKTOP (≥1367) где работает JS observer на таймлайне.
   2026-05-20: breakpoint расширен с 992 на 1367 — на planshet'ах (992-1366)
   intersection-observer ломался (timeline-круги скрыты), карточки оставались
   с opacity 0 / transform. Теперь fade-in только desktop. === */
@media (min-width: 1367px) {
  .how-it-works-steps-data {
    transition:
      opacity .9s cubic-bezier(.2,.7,.3,1),
      transform .9s cubic-bezier(.2,.7,.3,1) !important;
    transform: translateY(40px) scale(0.97);
  }
  .how-it-works-steps-data.show-fade-in {
    transform: translateY(0) scale(1);
  }
  /* Зигзаг slide: чётные слева, нечётные справа */
  .how-it-works-steps-data:nth-child(odd) {
    transform: translate(-30px, 30px) scale(0.97);
  }
  .how-it-works-steps-data:nth-child(even) {
    transform: translate(30px, 30px) scale(0.97);
  }
  .how-it-works-steps-data:nth-child(odd).show-fade-in,
  .how-it-works-steps-data:nth-child(even).show-fade-in {
    transform: translate(0, 0) scale(1);
  }
}

/* На планшете/мобиле (≤1366) — карточки видны сразу (JS-observer не работает,
   потому что .round-circle-steps скрыт через display:none на этих размерах).
   2026-05-20: breakpoint расширен с 991 до 1366 — на planshet'ах теперь
   карточки сразу показываются с opacity 1, без зависимости от scroll-observer. */
@media (max-width: 1366px) {
  .how-it-works-steps-data {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* === 2026-05-20: PLANSHET (866-1366) — отключаем zigzag-layout, делаем
   mobile-style 1-column как на ≤865px. До правки на planshet'е срабатывал
   desktop layout (text + vertical-line + number в 2-3 колонках) — степы
   наезжали друг на друга, картинки overlap'или цифры. Теперь — каждый
   степ полной ширины в столбец: number+text сверху, image снизу. === */
@media (min-width: 866px) and (max-width: 1366px) {
  /* Скрыть desktop-layout inner блоки, показать mobile-layout */
  .how-it-works .d-flex.inner { display: none !important; }
  .how-it-works .d-flex.inner.mobile { display: flex !important; }

  /* Степ-card — column layout с увеличенным vertical-spacing */
  .how-it-works .d-flex.outer.how-it-works-steps-data {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 24px 24px 48px !important;       /* большой bottom-padding между степами */
    max-width: 640px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Картинки/иконки — центрировано, full-width до 480px */
  .how-it-works .d-flex.outer.how-it-works-steps-data > .d-flex.flex-column {
    width: 100% !important;
    max-width: 480px !important;
    align-items: center !important;
    margin: 0 auto !important;
  }

  /* Заголовки и тексты — центрированно */
  .how-it-works .d-flex.inner.mobile h2 {
    font-size: 24px !important;
    text-align: center !important;
  }
  .how-it-works .d-flex.inner.mobile h3 {
    font-size: 56px !important;
  }
  .how-it-works .d-flex.inner.mobile .text-center {
    font-size: 15px !important;
    max-width: 520px;
    margin: 0 auto;
    color: #5b5f66;
    line-height: 1.5;
  }

  /* Центральная timeline (вертикальная красная линия + кружки) — скрываем на planshet,
     так как layout column и timeline теряет смысл без zigzag */
  .how-it-works .round-circle-steps,
  .how-it-works .steps-line,
  .how-it-works .how-it-works-steps {
    display: none !important;
  }

  /* How It Works wrapper — больше padding по бокам */
  .how-it-works {
    padding: 48px 24px 64px !important;
    max-width: 760px;
    margin: 0 auto;
  }
  .how-it-works .how-it-works-heading {
    text-align: center !important;
    margin-bottom: 8px !important;
  }
}


/* ============================================================================ */
/* ФОРМА ЗАКАЗА — темнее линии + усиленные тени                                 */
/* ============================================================================ */

/* === БОРДЕРЫ инпутов — серые, чуть более видимые чем дефолтные === */
/* Используем те же селекторы, что и в верхнем блоке refresh.css (строка 763-777), */
/* чтобы перебить их по cascade order. Включаем все 4 типа инпутов. */
#mainForm .merged-input-group,
#mainForm .standard-input,
#mainForm .custom-select-wrapper.full-width .custom-select-trigger,
#mainForm .type-trigger,
#mainForm .dim-input-wrapper {
  border-color: #9aa0a8 !important;
  border-width: 1.5px !important;
  box-shadow:
    inset 0 1px 2px rgba(15, 17, 21, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.6);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* На hover — чуть темнее серого */
#mainForm .merged-input-group:hover,
#mainForm .standard-input:hover,
#mainForm .custom-select-wrapper.full-width:hover .custom-select-trigger,
#mainForm .type-trigger:hover,
#mainForm .dim-input-wrapper:hover {
  border-color: #6b7280 !important;
  box-shadow:
    inset 0 1px 3px rgba(15, 17, 21, 0.07),
    0 2px 6px -1px rgba(15, 17, 21, 0.08);
}

/* Focus — только тут оставляем брендовый красный + glow (UX-сигнал, что поле активно) */
#mainForm .merged-input-group:focus-within,
#mainForm .standard-input:focus,
#mainForm .custom-select-wrapper.full-width.open .custom-select-trigger,
#mainForm .custom-select-wrapper.open .type-trigger,
#mainForm .dim-input-wrapper:focus-within {
  border-color: var(--primary-red, #F01A26) !important;
  box-shadow:
    inset 0 1px 3px rgba(15, 17, 21, 0.06),
    0 0 0 3px rgba(240, 26, 38, 0.15),
    0 4px 12px -2px rgba(240, 26, 38, 0.20) !important;
}

/* === Вертикальный разделитель (между флагом и инпутом) — серый === */
#mainForm .vertical-divider {
  background-color: #9aa0a8 !important;
  opacity: 0.6;
}

/* === Флаг внутри merged-input-group: радиус совпадает с контейнером (10px) === */
/* Иначе углы flag-trigger (6px) обрезаются внутри контейнера (10px) — видно зазор */
#mainForm .flag-trigger {
  border-radius: 9px 0 0 9px !important;
}

/* === Address segment: чуть уже чем 100% чтобы не упираться в правый бордер === */
#mainForm .address-segment {
  flex: 0.98 !important;
  height: 100% !important;
  min-width: 0 !important;
}
/* Контейнер обрезает дочерние элементы по своему радиусу — но без потери box-shadow */
#mainForm .merged-input-group {
  position: relative;
}
#mainForm .merged-input-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

/* Стрелки/иконки внутри инпутов оставляем красными (бренд-акценты) */

/* === ФОРМА: усиленные тени (нейтральный тон, без красного отблеска) === */
.new-form-wrapper {
  border-color: rgba(180, 184, 192, 0.6) !important;
  box-shadow:
    /* ближний слой — чёткие края */
    0 2px 6px rgba(15, 17, 21, 0.06),
    0 6px 14px -2px rgba(15, 17, 21, 0.10),
    /* средний — глубина */
    0 16px 36px -8px rgba(15, 17, 21, 0.16),
    0 32px 64px -16px rgba(15, 17, 21, 0.20),
    /* дальний нейтральный shadow */
    0 60px 120px -30px rgba(15, 17, 21, 0.22),
    /* очень дальний ореол */
    0 100px 180px -50px rgba(15, 17, 21, 0.18),
    /* внутренние блики для 3D-эффекта */
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

.new-form-wrapper:hover {
  box-shadow:
    0 4px 10px rgba(15, 17, 21, 0.08),
    0 12px 26px -4px rgba(15, 17, 21, 0.16),
    0 24px 52px -10px rgba(15, 17, 21, 0.22),
    0 44px 88px -20px rgba(15, 17, 21, 0.26),
    0 70px 140px -34px rgba(15, 17, 21, 0.28),
    0 110px 200px -54px rgba(15, 17, 21, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/* Бордер кнопки-флага тоже серый */
#mainForm .flag-trigger {
  border-color: #9aa0a8 !important;
}

/* === Кнопка GET A QUOTE — чуть глубже тень (брендовый красный остаётся) === */
#mainForm .btn-quote,
#mainForm .submit-btn,
#mainForm button[type="submit"] {
  box-shadow:
    0 4px 12px -2px rgba(240, 26, 38, 0.40),
    0 8px 22px -6px rgba(240, 26, 38, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  transition: transform .25s var(--psr-ease), box-shadow .25s var(--psr-ease) !important;
}
#mainForm .btn-quote:hover,
#mainForm .submit-btn:hover,
#mainForm button[type="submit"]:hover {
  box-shadow:
    0 8px 22px -2px rgba(240, 26, 38, 0.55),
    0 14px 36px -8px rgba(240, 26, 38, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}


/* ============================================================================ */
/* SMALL PHONES (≤ 380px) — iPhone SE, Galaxy S5/S8 mini и т.п.                */
/* Форма ближе к заголовку + сама форма чуть уже                                */
/* ============================================================================ */
@media (max-width: 380px) {
  /* Hero — минимальный padding сверху, форма максимально вверху */
  .get-quote-section {
    padding: 4px 0 20px !important;
  }
  /* Заголовок поджимается — gap до формы минимальный */
  /* Усиленная специфичность через .get-quote-section, чтобы перебить hero-premium.css */
  .get-quote-section .saving-text,
  .main-section .saving-text {
    margin: 0 auto 0 !important;
    gap: 2px !important;
  }
  .get-quote-section .saving-text .saving-text-main,
  .main-section .saving-text .saving-text-main {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
  .get-quote-section .saving-text .presco-texts,
  .main-section .saving-text .presco-texts {
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 1 !important;
  }

  /* Форма — узче по бокам (10px gutter), компактный padding, плотно к заголовку */
  .get-quote-section .new-form-wrapper,
  .main-section .new-form-wrapper {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 auto 0 !important;
    padding: 14px 14px 18px !important;
    border-radius: 14px !important;
  }
  .new-form-wrapper::before { top: 16px; bottom: 16px; }

  /* Уменьшаем gap внутри контейнера hero */
  .get-quote-section .container-inner,
  .main-section .container-inner {
    gap: 6px !important;
  }

  /* Поля чуть компактнее — высота и шрифт */
  #mainForm {
    --input-height: 44px !important;
  }
  #mainForm .merged-input-group,
  #mainForm .standard-input,
  #mainForm .custom-select-wrapper.full-width .custom-select-trigger,
  #mainForm .type-trigger {
    height: 44px !important;
    font-size: 14px !important;
  }
  /* Dimensions поля (WEIGHT/WIDTH/LENGHT/HEIGHT) — 2x2 сетка, компактные */
  #mainForm .grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  #mainForm .dim-input-wrapper {
    height: 46px !important;
    font-size: 13px !important;
    padding: 5px 8px !important;
  }
  #mainForm .dim-input-wrapper input {
    font-size: 13px !important;
    height: 18px !important;
    padding: 0 18px 0 0 !important;
  }
  #mainForm .dim-input-wrapper .dim-label {
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 1px 0 !important;
  }
  #mainForm .dim-input-wrapper .dim-unit {
    right: 8px !important;
    bottom: 6px !important;
    font-size: 10px !important;
  }
  #mainForm .label-text {
    font-size: 11px !important;
  }
  #mainForm .row-container {
    gap: 8px !important;
  }
  /* POSTAL CODE label — фитим текст, отодвигаем от правого края формы */
  /* Высокая специфичность: .section-labels .label-text.label-postal перебивает .section-labels .label-text { font-size: 11px } */
  #mainForm .section-labels .label-text.label-postal,
  #mainForm .label-postal {
    width: 60px !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    right: 10px !important;
    padding-right: 4px !important;
  }
  /* postal-container внутри row-container — отодвигаем от правого края на 2px */
  #mainForm .row-container .postal-container {
    margin-right: 2px !important;
  }
  #mainForm .postal-container {
    width: 50px !important;
  }
  #mainForm .standard-input {
    text-align: center !important;
    padding: 0 4px !important;
  }
  #mainForm .country-wrapper {
    width: 64px !important;
    min-width: 64px !important;
  }
  #mainForm .grid-4 {
    gap: 8px !important;
  }
  #mainForm .dim-input-wrapper input {
    font-size: 12px !important;
  }

  /* Кнопка GET A QUOTE — компактнее */
  #mainForm .btn-quote,
  #mainForm .submit-btn,
  #mainForm button[type="submit"] {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Three-buttons (Easy Ordering / Trusted / Secure) — узкие */
  .three-buttons-section {
    padding: 0 10px !important;
    margin-top: 8px !important;
  }
}

/* ============================================================================
   Exclusive Benefits cards — flush-left на ВСЕХ ширинах (2026-05-19)
   Юзер: "ещё левее выровняй" — pill и текст должны быть у самого левого края
   ============================================================================ */
body .exclusive-benefits .exclusive-benefits-holder {
  padding-left: 8px !important;
  gap: 0 !important;
}
body .exclusive-benefits .exclusive-benefits-holder .block-exlusive,
body .exclusive-benefits .exclusive-benefits-holder .block-exlusive > div,
body .exclusive-benefits .exclusive-benefits-holder .exclusive-benefits-inscription {
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}
body .exclusive-benefits .exclusive-benefits-holder .block-exlusive > div {
  display: block !important;
  width: 100% !important;
}
body .exclusive-benefits .exclusive-benefits-holder .block-exlusive [class*="-color"] {
  display: inline-flex !important;
  margin: 0 !important;
  align-self: flex-start !important;
}