/* ═══════════════════════════════════════════════════════════════════
   НАСТРОЙ — общий стиль всех страниц сайта.

   Облик «Прибор», палитра «Лёд на просвет». Решение владельца, контраст
   замерен, поиск красоты закрыт — здесь система не переоткрывается, а
   раздаётся на пять страниц.

   Почему отдельным файлом. До 22 августа сайт был одностраничным и стиль
   жил внутри страницы. Со страницами продуктов копия стиля в каждой из них
   разъехалась бы за неделю: правишь отступ в одном месте, забываешь в
   четырёх. Политика безопасности это уже разрешает — style-src 'self'.

   Что лежит здесь, а что в самой странице: здесь общее — сетка, шапка,
   секции, цена, шаги, подвал. В странице — только её собственный прибор:
   переписка на странице ассистента, лента прогона на присмотре, разбор
   отзывов, карта процесса. Каждый показывает свою работу и больше нигде
   не встречается.

   Засечка (Georgia) появляется только на измеренных величинах: цена и
   время. Так они читаются как показания, а не как элемент интерфейса.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --night:#0C1B21; --night-2:#14282F; --night-3:#1B343C;
  --dawn:#DDE7E3; --paper:#F0F5F3;
  --ink:#0B1A1D; --ink-2:#3E5654;
  --on-night:#DDE7E3; --dim-night:#8FA8A6;
  --teal:#16545C; --live:#4FA88E;
  --line-n:#26454C; --line-d:#BFCFCB;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--dawn); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:2px solid var(--live); outline-offset:3px; }

.wrap { max-width:62rem; margin:0 auto; padding:0 24px; }
h2 { font-size:clamp(25px,3.7vw,36px); line-height:1.12; letter-spacing:-.03em; margin:0 0 14px; max-width:17em; }
h3 { font-size:19px; margin:0 0 6px; letter-spacing:-.012em; }
p { max-width:35em; }
.lead { font-size:clamp(17px,2vw,19px); color:var(--ink-2); max-width:36em; margin:0 0 30px; }
.src { font-size:14.5px; color:var(--dim-night); max-width:38em; }
.sec .src { color:var(--ink-2); }
.sec { padding:62px 0 8px; }
.sec.tint { background:var(--paper); padding-bottom:62px; }
.sec.dark { background:var(--night); color:var(--on-night); padding-bottom:62px; }
.sec.dark h2 { color:var(--on-night); }
.sec.dark .lead { color:var(--dim-night); }
.nb { position:absolute; opacity:0; pointer-events:none; }

/* ── ШАПКА ───────────────────────────────────────────────────────────
   Появилась 22 августа: до линейки сайт был одностраничным и переходить
   было некуда. Живёт на ночном поле, потому что первый экран каждой
   страницы ночной — так шапка не отрывается от страницы полосой. */
.top { background:var(--night); color:var(--dim-night); }
.top .wrap { display:flex; align-items:baseline; justify-content:space-between;
  gap:10px 26px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px; }
.top .mark { font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-night); text-decoration:none; }
.top nav { display:flex; flex-wrap:wrap; gap:6px 22px; }
.top nav a { font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  color:var(--dim-night); text-decoration:none; padding-bottom:3px;
  border-bottom:1px solid transparent; }
.top nav a:hover { color:var(--on-night); border-bottom-color:var(--line-n); }
/* Текущая страница подчёркнута, но лампой не помечена: лампа на этом сайте
   значит «продукт работает», и второе значение её бы обесценило. */
.top nav a.on { color:var(--on-night); border-bottom-color:var(--live); }

/* ── ПЕРВЫЙ ЭКРАН ────────────────────────────────────────────────── */
.hero { background:var(--night); color:var(--on-night); padding:34px 0 52px; }
.hero h1 { font-size:clamp(32px,5.8vw,56px); line-height:1.05; letter-spacing:-.035em;
  margin:0 0 20px; font-weight:700; max-width:13em; }
.hero .pitch { font-size:clamp(17px,2.2vw,20px); color:var(--dim-night); max-width:34em; margin:0 0 14px; }
.hero .pitch b { color:var(--on-night); font-weight:600; }
.hero .cut { font-size:clamp(18px,2.4vw,23px); color:var(--live); max-width:33em;
  margin:0 0 38px; font-weight:600; }

/* ── ВЫГОДЫ И ДОВЕРИЕ — сетка в хайрлайн ─────────────────────────── */
.gains { display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1px;
  background:var(--line-d); border:1px solid var(--line-d); }
.gains > div { background:var(--paper); padding:24px; }
.sec.tint .gains > div { background:var(--dawn); }
.gains h3 { color:var(--teal); font-size:20px; margin-bottom:8px; }
.gains p { margin:0; color:var(--ink-2); font-size:16px; }

.trust { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px;
  background:var(--line-d); border:1px solid var(--line-d); }
.trust > div { background:var(--paper); padding:20px 22px; }
.sec.tint .trust > div { background:var(--dawn); }
.trust b { display:block; margin-bottom:4px; font-size:16.5px; }
.trust span { color:var(--ink-2); font-size:15.5px; }

/* ── ЦЕНА ────────────────────────────────────────────────────────── */
.price { border:1px solid var(--line-d); background:var(--paper); max-width:46rem; margin:0 0 14px; }
.sec.tint .price { background:var(--dawn); }
.price .row { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px;
  padding:24px; border-bottom:1px solid var(--line-d); }
.price .row:last-child { border-bottom:0; }
.price .amt { font-family:var(--serif); font-size:clamp(31px,5vw,44px); letter-spacing:-.02em;
  color:var(--teal); line-height:1; }
.price .what b { display:block; font-size:17.5px; }
.price .what span { color:var(--ink-2); font-size:15.5px; }
.addon { font-size:15.5px; color:var(--ink-2); max-width:46rem; margin:0 0 24px; }

.inout { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-d);
  border:1px solid var(--line-d); max-width:46rem; }
.inout > div { background:var(--paper); padding:22px 24px; }
.sec.tint .inout > div { background:var(--dawn); }
.inout h3 { font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:var(--ink-2); margin-bottom:12px; }
.inout ul { margin:0; padding:0; list-style:none; }
.inout li { padding:5px 0 5px 18px; position:relative; font-size:15.5px; }
.inout li::before { content:""; position:absolute; left:0; top:13px; width:9px; height:1px; background:var(--teal); }
.inout .no li { color:var(--ink-2); }
.inout .no li::before { background:var(--line-d); }

/* ── ШАГИ ────────────────────────────────────────────────────────── */
.steps { border-top:1px solid var(--line-d); max-width:46rem; }
.step { display:grid; grid-template-columns:6.5rem 1fr; gap:22px; padding:22px 0;
  border-bottom:1px solid var(--line-d); align-items:start; }
.step .w { font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; color:var(--teal);
  text-transform:uppercase; padding-top:4px; }
.step p { margin:5px 0 0; color:var(--ink-2); font-size:16px; }
.step .you { color:var(--ink); font-weight:600; }

/* ── СВЯЗАТЬСЯ ───────────────────────────────────────────────────── */
.ways { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1px;
  background:var(--line-n); border:1px solid var(--line-n); max-width:46rem; margin:0 0 20px; }
.ways a { background:var(--night-2); padding:22px 24px; text-decoration:none; color:var(--on-night); display:block; }
.ways a:hover { background:var(--live); color:var(--night); }
.ways a:hover .k { color:var(--night); }
.ways .k { font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim-night); display:block; margin-bottom:7px; }
.ways .v { font-size:19px; letter-spacing:-.01em; }
.free { font-size:16px; color:var(--dim-night); max-width:35em; }

/* ── СРОК ЗАПУСКА ────────────────────────────────────────────────────
   Три продукта из четырёх ещё не построены, и это написано прямо. Полоса
   даёт две вещи сразу: когда откроем и что можно получить уже сегодня —
   без второго «скоро» читается как пустой сайт. */
.soon { border:1px solid var(--line-d); background:var(--paper); max-width:46rem;
  padding:24px; margin:0 0 22px; }
.sec.tint .soon { background:var(--dawn); }
.soon .when { font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); display:block; margin-bottom:10px; }
.soon h3 { font-size:21px; margin-bottom:8px; }
.soon p { margin:0 0 10px; color:var(--ink-2); font-size:16px; max-width:38em; }
.soon p:last-child { margin-bottom:0; }
.soon b { color:var(--ink); }

/* ── СПИСОК В ДВА СТОЛБЦА ────────────────────────────────────────── */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-n);
  border:1px solid var(--line-n); }
.cols > div { background:var(--night-2); padding:22px 24px; }
.cols h3 { font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:400; color:var(--dim-night); margin-bottom:12px; }
.cols ul { margin:0; padding:0; list-style:none; }
.cols li { padding:5px 0 5px 18px; position:relative; font-size:15.5px; color:var(--on-night); }
.cols li::before { content:""; position:absolute; left:0; top:13px; width:9px; height:1px; background:var(--live); }

/* ── ПАКЕТЫ УСТРАНЕНИЯ ───────────────────────────────────────────── */
.packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px;
  background:var(--line-d); border:1px solid var(--line-d); max-width:46rem; margin:0 0 16px; }
.packs > div { background:var(--paper); padding:22px 24px; }
.sec.tint .packs > div { background:var(--dawn); }
.packs .sum { font-family:var(--serif); font-size:29px; color:var(--teal); display:block;
  line-height:1; margin-bottom:9px; }
.packs b { display:block; font-size:16.5px; margin-bottom:4px; }
.packs span.d { color:var(--ink-2); font-size:15.5px; }

footer { background:var(--night); color:var(--dim-night); padding:30px 0 40px;
  font-size:14.5px; border-top:1px solid var(--line-n); }
footer .wrap { display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between; }
footer a { color:var(--dim-night); }

@media (max-width:44rem) {
  body { font-size:16px; }
  .inout, .cols { grid-template-columns:1fr; }
  .step { grid-template-columns:1fr; gap:2px; }
  .sec { padding-top:46px; }
  .sec.tint, .sec.dark { padding-bottom:46px; }
  .hero { padding-top:26px; }
  .top .wrap { padding-top:18px; padding-bottom:18px; }
}