/* =========================================================
   V7.1 — реальные исправления по тестам MacBook / iPhone
   ========================================================= */

/* Левая колонка: заголовок гарантированно помещается. */
.intro-panel__content {
  min-width: 0;
}

.intro-panel h1 {
  width: 100%;
  max-width: 100%;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: .98;
  letter-spacing: -.048em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.intro-panel__content > p,
.benefit p,
.intro-panel__footer span {
  overflow-wrap: anywhere;
}

/* Поле числа: единица измерения всегда остается видимой. */
.number-field {
  width: min(100%, 560px);
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.number-field input {
  width: 100%;
  min-width: 0;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.1;
  text-overflow: ellipsis;
}

.number-field__unit {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Safari Responsive Design Mode и touch-устройства:
   документ должен прокручиваться, а не блокироваться desktop-правилами. */
@media (max-width: 1180px), (hover: none), (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .page,
  .calculator,
  .container {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
  }

  .calculator {
    display: block;
    place-items: unset;
  }

  .app-shell {
    height: auto !important;
    min-height: 100dvh;
    max-height: none !important;
    overflow: visible !important;
  }

  .wizard-panel,
  .summary-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto;
  }
}

/* Невысокие ноутбуки: дополнительно уменьшаем маркетинговый заголовок. */
@media (min-width: 981px) and (max-height: 900px) {
  .intro-panel h1 {
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1;
  }
}

/* Телефон */
@media (max-width: 760px) {
  html,
  body {
    min-height: 100dvh;
    touch-action: pan-y;
  }

  .wizard-panel {
    min-height: 100dvh;
  }

  .number-component {
    width: 100%;
  }

  .number-field {
    width: 100%;
    min-height: 92px;
    padding: 18px 18px;
    border-radius: 20px;
    gap: 8px;
  }

  .number-field input {
    font-size: clamp(24px, 7vw, 30px);
    letter-spacing: -.035em;
  }

  .number-field input::placeholder {
    font-size: clamp(22px, 6.4vw, 28px);
  }

  .number-field__unit {
    font-size: 14px;
  }

  /* Контент не прячется за fixed-навигацией. */
  .wizard-panel {
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  .summary-panel {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .controls {
    transform: translateZ(0);
  }
}

/* Очень узкие телефоны */
@media (max-width: 390px) {
  .number-field {
    min-height: 84px;
    padding-inline: 15px;
  }

  .number-field input {
    font-size: 24px;
  }

  .number-field input::placeholder {
    font-size: 22px;
  }
}


/* =========================================================
   Website CMS sections — desktop document scrolling
   The calculator remains a full-screen application, while
   reviews and FAQ stay reachable below it.
   ========================================================= */
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  html,
  body {
    height: auto !important;
    min-height: 100%;
  }

  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .page,
  .container {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
  }

  .calculator {
    height: auto !important;
    min-height: 100dvh;
  }

  .calculator > .container {
    display: block;
  }

  .app-shell {
    height: calc(100dvh - 24px);
    min-height: 680px;
    max-height: calc(100dvh - 24px);
  }

  .website-trust-sections {
    position: relative;
    z-index: 2;
    display: grid;
    visibility: visible;
  }
}