/* Первый экран (план §7.4): от края до края, ровный светлый тон, рендер по центру, подпись внизу. */
.hero {
  position: relative;
  height: var(--hero-h);
  min-height: 560px;
  background: var(--tone);
  display: flex;
  flex-direction: column;
  padding: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) - 4px) var(--gutter) 24px;
}
.hero__stage { position: relative; flex: 1 1 0; min-height: 0; display: grid; place-items: center; }
.hero__stage .gm { height: 100%; width: 100%; max-width: 80vh; }

.hero__cap {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-top: 14px;
}
.hero__cap h1 { font: 500 var(--fs-l) / var(--lh-l) var(--disp); text-wrap: balance; }
.hero__cap > p { font-size: var(--fs-m); line-height: var(--lh-m); max-width: 44ch; text-wrap: balance; }
.hero__act { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.hero__sw { --bg: var(--tone); margin-top: 2px; justify-content: center; }
.hero__specs { font-size: var(--fs-s); line-height: var(--lh-s); color: var(--mute); text-wrap: balance; }

@media (max-width: 1023px) {
  /* Первый экран закрывает кадр: «Бланки» и чипы начинаются ниже дока, не в его полосе. */
  .hero {
    height: auto;
    min-height: 100svh;
    padding-bottom: var(--dock-space);
    padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 2px);
  }
  /* Сцена отдаёт место подписи. Высота в пикселях: вещь чуть меньше и не растёт,
     когда при скролле увеличивается окно (адресная строка Telegram). */
  .hero__stage {
    flex: none;
    height: 340px;
    max-height: 340px;
    min-height: 0;
  }
  .hero__stage .gm {
    max-width: none;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .hero__cap { gap: 8px; padding-top: 12px; width: 100%; max-width: 100%; }
  .hero__cap > p { font-size: var(--fs-s); line-height: var(--lh-s); }
  .hero__act {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 8px;
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
  }
  /* Ширина по тексту. Не влезают в ряд — второй блок переносится целиком, подпись не режется. */
  .hero__act .btn {
    flex: 0 0 auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
  .hero__specs { display: none; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .hero__cap > p { display: none; }
}