/* ── Полосы текста ─────────────────────────────────────────────────── */
.band {
  padding-top: clamp(56px, 9vh, 104px);
  padding-bottom: clamp(56px, 9vh, 104px);
  border-top: 1px solid var(--line);
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  max-width: 1000px;
}
.cols p { margin: 0; color: var(--ink2); }

/* Спецификация. Латунная выноска слева, определение справа — как в
   чертёжной таблице, где термин и его расчёт стоят в одной строке. */
.band-spec .spec { margin: 0; max-width: 1000px; }
.spec-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: clamp(16px, 4vw, 48px);
  padding: 20px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.spec-row:last-child { border-bottom: 1px solid var(--line); }
.spec-row dt {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brass);
  padding-top: 4px;
}
.spec-row dd { margin: 0; color: var(--ink2); max-width: 62ch; }

/* Три шага. Нумерация здесь не украшение: порядок правда есть, и второй
   шаг без первого не имеет смысла. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(24px, 3.5vw, 44px);
  max-width: 1100px;
  counter-reset: none;
}
.steps li { position: relative; padding-top: 22px; border-top: 2px solid var(--brass-dim); }
.step-no {
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 600;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--brass);
}
.steps h3 {
  font-family: var(--disp);
  font-variation-settings: 'wdth' 112, 'wght' 720;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 10px 0 8px;
}
.steps p { margin: 0; color: var(--ink2); font-size: 15.5px; }

/* ── Приглашение ───────────────────────────────────────────────────── */
.band-end { text-align: center; }
/* Шире, чем остальные заголовки: при 20ch последнее слово падало на
   отдельную строку и висело в центре одиноким огрызком. */
.h2-end { margin-left: auto; margin-right: auto; max-width: 26ch; }
.end-say {
  max-width: 56ch;
  margin: 0 auto 30px;
  color: var(--ink2);
}
.end-mail {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-variation-settings: 'wdth' 87.5, 'wght' 400;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.end-mail a { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line); }
.end-mail a:hover { color: var(--brass); border-bottom-color: var(--brass-dim); }

/* ── Подвал ────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding: 24px var(--pad) 40px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-variation-settings: 'wdth' 75, 'wght' 300;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--mute);
}
.foot nav { margin-left: auto; display: flex; gap: 18px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }

/* Проявления секций при прокрутке здесь НЕТ, и это решение.

   Оно было — и я его убрал. Во-первых, это самый узнаваемый приём
   машинного лендинга: блоки, всплывающие один за другим, стоят на любой
   второй странице. Во-вторых, он хрупкий: содержимое до срабатывания
   наблюдателя невидимо, и стоит браузеру придержать обратные вызовы —
   человек смотрит в пустой экран. Смелость потрачена в одном месте,
   в приборе; остальная страница просто стоит на месте и читается. */

/* ── Узко ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .gauge { order: 2; }
  .spec-row { grid-template-columns: 1fr; gap: 6px; }
  .spec-row dt { padding-top: 0; }
  .reads { width: 54%; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .top-note { display: none; }
  /* Метка спрятана — а вместе с ней ушёл её auto-отступ, и кнопка
     прилипала к знаку. Отодвигаем кнопку сами. */
  .top .btn { margin-left: auto; }

  /* Окна показаний съезжают ПОД плиту. Внутри узкого экрана они
     закрывали саму марку — то есть прятали то, ради чего человек сюда
     смотрит. Стекло остаётся стеклом, просто просвечивает фон страницы,
     а не воду. */
  /* Окна показаний уезжают ПОД плиту, поэтому место под них
     освобождает сама плита: шкала должна идти после них, а не под ними. */
  .plate { aspect-ratio: 5 / 4; overflow: visible; margin-bottom: 96px; }
  .plate canvas, .marks { border-radius: 4px; }
  .plate canvas { clip-path: inset(0 round 4px); }
  .reads {
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    width: auto;
    flex-direction: row;
    gap: 6px;
  }
  .read { flex: 1; min-width: 0; padding: 9px 10px 10px; }
  .read-num { font-size: 19px; }
  .read-num.bad { color: var(--over-hi); }
  .read-sub { display: none; }

  /* Заголовки и герой не упираются в края. */
  .hero h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .hero-do { gap: 8px; }
  .hero-do .btn { flex: 1 1 auto; }

  /* Плита с прибором: окна под ней ниже стали на три строки — отступ
     под них тоже больше. */
  .plate { margin-bottom: 104px; }

  /* Шаги и колонки не полагаются на minmax(280px): на 320px это уже
     шире экрана. */
  .cols, .steps, .feats, .about-num { grid-template-columns: 1fr; }

  /* Живые демо: таблица скроллится в своей рамке, подсказка об этом
     не нужна — палец сам находит. Главное, что страница стоит. */
  .demo { padding: 12px; }
  .db-row { grid-template-columns: minmax(0, 1.4fr) repeat(3, 64px) 72px; }
  .db-table { min-width: 380px; }

  /* Подвал: ссылки колонкой читаются, в строку — наползают. */
  .foot { padding-bottom: 34px; }
  .foot nav { margin-left: 0; flex-wrap: wrap; gap: 10px 16px; }
}
/* Эта закрывающая скобка ОТСУТСТВОВАЛА, и отсутствовала давно — с тех
   пор, как витрину выложили. Последствия были тихие и ровно такие, какие
   бывают у пропущенной скобки в CSS: всё, что написано ниже, оказалось
   ВНУТРИ «@media (max-width: 560px)». То есть правила «меньше движения»
   работали только на телефоне, а всё, что дописывали в конец файла, на
   рабочем столе не применялось вовсе — и выглядело это как «стиль не
   доехал», а не как ошибка в файле.

   Нашлось замером в браузере: у переключателя периода вместо латуни
   оказался серый фон и Arial. Стиль при этом лежал на сервере и
   загружался — доказать, что он не применён, могла только проверка
   вычисленных значений, а не чтение файла и не скриншот. */

/* ── Меньше движения ───────────────────────────────────────────────
   Прибор сразу в спокойном состоянии: вода под чертой, без волн, без
   вылетов. Смысл страницы от этого не теряется — теряется только показ. */
@media (prefers-reduced-motion: reduce) {
  .plate { transition: none; }
  .reads .read { opacity: 1; transform: none; animation: none !important; }
  .btn:hover { transform: none; }
}