/* ==========================================================================
   СТРОЙМЕРА — общая таблица стилей проекта
   Один файл на все 13 страниц. Подключается как /css/stroymera.css
   (путь от корня, а не относительный — страницы лежат на разной глубине).

   Язык оформления выбран так, чтобы не повторять приёмы соседнего проекта:

   • фон тёплый нейтральный, карточки — белая бумага. Объём дают тень
     и полоса цвета ржавчины, а не свечение и не рамки;
   • два цвета, разные роли. Графит — структурный: заливка кнопок,
     плотных панелей, шапки/подвала/мобильной панели. Ржавчина — акцент
     только на цифрах и деталях: метки, номера, цены, счётчики списков,
     бейджи. Ржавчина никогда не заливает большую область;
   • роль иконки играет крупный моноширинный номер цвета ржавчины;
   • у ключевых блоков жирная полоса сверху — она же фирменный знак,
     а не мягкое свечение;
   • шрифты лежат на своём сервере, обращений к чужим доменам нет;
   • кнопка плоская, без градиента и цветного ореола;
   • числа моноширинным с tabular-nums — смысловая часть бренда «мера».
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Шрифты — лежат на своём сервере, а не грузятся с Google Fonts.

   Файлы в /fonts/, пути относительные (../fonts/…), поэтому работают
   и с сервера, и при открытии эталонной страницы двойным щелчком.

   Гарнитуры переменные: один файл держит все начертания от 400 до 800,
   отдельных файлов на каждую жирность не нужно. Подмножества разделены
   по unicode-range — браузер скачает только те, чьи символы реально
   встретились на странице. Греческий и вьетнамский не скачивались вовсе.
   -------------------------------------------------------------------------- */

/* Golos Text · cyrillic-ext */
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/golos-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Golos Text · cyrillic */
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/golos-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Golos Text · latin-ext */
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/golos-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Golos Text · latin */
@font-face{
  font-family:'Golos Text';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url(../fonts/golos-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Mono · cyrillic-ext */
@font-face{
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/roboto-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Roboto Mono · cyrillic */
@font-face{
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/roboto-mono-cyrillic.woff2) format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Roboto Mono · latin-ext */
@font-face{
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/roboto-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Roboto Mono · latin */
@font-face{
  font-family:'Roboto Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/roboto-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Токены
   -------------------------------------------------------------------------- */
:root{
  /* Поверхности — тёплый нейтральный, не холодный серый */
  --sm-ground:#f6f4f1;       /* тёплый почти белый — фон страницы */
  --sm-tint:#efece6;         /* подложка секции, шапка таблицы */
  --sm-paper:#ffffff;        /* карточки, таблицы, формы */

  /* Текст */
  --sm-ink:#211d19;          /* заголовки и подвал — больше нигде */
  --sm-body:#433d38;         /* основной текст */
  --sm-mute:#726a62;         /* подписи, второстепенное */

  /* Линии */
  --sm-line:#e6e0d8;         /* волосяная линия */
  --sm-line-2:#cec7bb;       /* границы полей, обводки */

  /* Структурный цвет — графит. Заливки кнопок, панелей, постоянные
     элементы шапки/подвала/мобильной панели. */
  --sm-brand:#2b2b2b;
  --sm-brand-dk:#1a1a1a;

  /* Акцент — ржавчина. Только на цифрах и деталях: метки, номера,
     цены, счётчики списков, бейджи. Не заливка. */
  --sm-accent:#c1502e;
  --sm-accent-dk:#a03f22;

  /* Служебные. Ошибка формы намеренно ярче и чище остальной палитры. */
  --sm-alert:#b3231b;
  --sm-alert-bg:#fdedeb;

  /* Форма блоков */
  --sm-max:1140px;
  --sm-r:12px;               /* карточки и панели */
  --sm-r-b:10px;             /* кнопки */
  --sm-r-s:8px;              /* поля ввода, метки */
  --sm-bar:4px;              /* толщина акцентной полосы у блока */

  --sm-shadow:0 6px 18px rgba(33,29,25,.08);
  --sm-shadow-lg:0 16px 40px rgba(33,29,25,.16);

  --sm-font:"Golos Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --sm-mono:"Roboto Mono","Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
}

/* --------------------------------------------------------------------------
   2. База
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--sm-ground);
  color:var(--sm-body);
  font:16.5px/1.65 var(--sm-font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
b,strong{font-weight:700;color:var(--sm-ink)}

/* Числа. Класс sm-num вешается на любую ячейку или span с цифрами. */
.sm-num{font-family:var(--sm-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.sm-shell{max-width:var(--sm-max);margin:0 auto;padding:0 20px}

/* --------------------------------------------------------------------------
   3. Секции и заголовки

   Разделителя-полосы с насечками в проекте нет: секции отделяются друг
   от друга сменой фона (цемент — бумага — плотный цемент) и волосяной
   линией там, где два соседних блока лежат на одном фоне.
   -------------------------------------------------------------------------- */
.sm-sec{padding:74px 0}
.sm-sec--paper{background:var(--sm-paper)}
.sm-sec--tint{background:var(--sm-tint)}
.sm-sec--flush{padding-top:64px}

/* Рубрика: жирная красная черта и подпись под ней. Заменяет собой
   иконки — опознавательный знак секции здесь типографический. */
.sm-kicker{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sm-accent);margin-bottom:14px;
  padding-top:14px;border-top:var(--sm-bar) solid var(--sm-accent);
  width:fit-content;min-width:56px;
}
.sm-h2{
  font-size:clamp(27px,3.5vw,42px);line-height:1.08;font-weight:800;
  letter-spacing:-.032em;color:var(--sm-ink);margin-bottom:14px;
}
.sm-h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--sm-ink)}
.sm-lede{font-size:17px;color:var(--sm-mute);max-width:720px;margin-bottom:36px}
.sm-note{font-size:13.5px;line-height:1.62;color:var(--sm-mute);margin-top:18px}

/* --------------------------------------------------------------------------
   4. Кнопки — плоские, без градиента и ореола
   -------------------------------------------------------------------------- */
.sm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--sm-brand);color:#fff;font:800 15.5px/1.2 var(--sm-font);
  letter-spacing:.01em;
  padding:16px 28px;border:0;border-radius:var(--sm-r-b);
  cursor:pointer;white-space:nowrap;text-align:center;
  transition:background .15s,color .15s,box-shadow .15s,border-color .15s;
}
.sm-btn:hover{background:var(--sm-brand-dk)}
.sm-btn:active{background:var(--sm-brand-dk)}
.sm-btn:disabled{opacity:.55;cursor:default}
.sm-btn--ghost{
  background:transparent;color:var(--sm-ink);
  box-shadow:inset 0 0 0 2px var(--sm-ink);
}
.sm-btn--ghost:hover{background:var(--sm-ink);color:#fff}
.sm-btn--light{background:#fff;color:var(--sm-ink)}
.sm-btn--light:hover{background:var(--sm-brand);color:#fff}
.sm-btn--wide{width:100%}
.sm-btn--sm{padding:11px 18px;font-size:13.5px;border-radius:var(--sm-r-s)}

/* --------------------------------------------------------------------------
   5. Шапка
   -------------------------------------------------------------------------- */
.sm-topbar{
  position:sticky;top:0;z-index:60;background:var(--sm-paper);
  border-bottom:var(--sm-bar) solid var(--sm-brand);
}
.sm-topbar__in{display:flex;align-items:center;gap:22px;height:70px}
.sm-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18.5px;
  letter-spacing:-.02em;color:var(--sm-ink);white-space:nowrap}
.sm-brand__mark{width:34px;height:34px;flex:0 0 34px}
.sm-brand em{font-style:normal;color:var(--sm-accent)}
.sm-menu{display:flex;gap:20px;margin-left:auto;font-size:14.5px;color:var(--sm-mute);white-space:nowrap}
.sm-menu a:hover{color:var(--sm-accent)}
.sm-phone{display:flex;flex-direction:column;line-height:1.25}
.sm-phone b{font-size:18px;font-weight:800;color:var(--sm-ink);white-space:nowrap}
.sm-phone span{font-size:12px;color:var(--sm-mute)}
/* В подвале логотип лежит на тёмном — там подписи светлые */
.sm-foot .sm-brand{color:#fff}
.sm-foot .sm-brand em{color:#e2825c}

/* --------------------------------------------------------------------------
   6. Первый экран
   -------------------------------------------------------------------------- */
/* Первый экран и следующая за ним секция лежат на одном цементе,
   поэтому граница между ними — волосяная линия. */
.sm-lead{background:var(--sm-ground);padding:58px 0 64px;border-bottom:1px solid var(--sm-line)}
.sm-lead__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:start}
.sm-lead h1{
  font-size:clamp(32px,4.7vw,54px);line-height:1.04;font-weight:800;
  letter-spacing:-.035em;color:var(--sm-ink);margin-bottom:20px;
}
.sm-lead h1 em{font-style:normal;color:var(--sm-accent)}
.sm-lead__text{font-size:18px;color:var(--sm-body);max-width:580px;margin-bottom:26px}
.sm-flag{
  display:inline-block;background:var(--sm-accent);color:#fff;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 15px;border-radius:var(--sm-r-s);margin-bottom:20px;
  border-left:var(--sm-bar) solid rgba(255,255,255,.5);
}
.sm-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}

/* Полоса фактов — одна белая плашка с красной полосой сверху,
   разделённая на три части, а не три отдельные карточки */
.sm-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--sm-paper);border-radius:var(--sm-r);overflow:hidden;
  box-shadow:var(--sm-shadow);border-top:var(--sm-bar) solid var(--sm-accent);
}
.sm-facts div{padding:20px 22px}
.sm-facts div+div{box-shadow:inset 1px 0 0 var(--sm-line)}
.sm-facts b{display:block;font-size:24px;font-weight:800;color:var(--sm-accent);line-height:1.2}
.sm-facts span{font-size:13px;color:var(--sm-mute)}

/* --------------------------------------------------------------------------
   7. Панели
   -------------------------------------------------------------------------- */
.sm-panel{
  background:var(--sm-paper);border-radius:var(--sm-r);padding:28px;
  box-shadow:var(--sm-shadow);
  transition:transform .18s,box-shadow .18s;
}
.sm-panel:hover{transform:translateY(-3px);box-shadow:var(--sm-shadow-lg)}
.sm-panel--pad{padding:32px}
.sm-panel--flat:hover{transform:none;box-shadow:var(--sm-shadow)}
.sm-panel h4{font-size:18px;font-weight:800;color:var(--sm-ink);margin-bottom:9px;letter-spacing:-.015em}
.sm-panel p{font-size:14.5px;color:var(--sm-mute)}

/* Полоса ржавчины сверху — опознавательный знак ключевого блока */
.sm-panel--bar{border-top:var(--sm-bar) solid var(--sm-accent)}

/* Плотная заливка вместо иконок: задаёт ритм в сетке карточек.
   Заливка ровно одна — графитовая. Чёрных панелей в содержимом нет
   в смысле «ещё один цвет»: тёмным остаётся только подвал плюс этот блок. */
.sm-panel--brand{background:var(--sm-brand);color:rgba(255,255,255,.86)}
.sm-panel--brand h4{color:#fff}
.sm-panel--brand p{color:rgba(255,255,255,.8)}
.sm-panel--brand .sm-mark{color:var(--sm-accent)}
.sm-panel--brand .sm-list li{color:#f1e9e2}
.sm-panel--brand .sm-list li:before{background:var(--sm-accent)}
.sm-panel--brand .sm-list b{color:#fff}

/* Крупный номер вместо иконки. Роль опознавательного знака в карточке
   играет типографика, а не картинка в цветном квадрате. Номер — деталь,
   поэтому он цвета ржавчины, а не структурного графита. */
.sm-mark{
  display:block;font:800 44px/1 var(--sm-mono);letter-spacing:-.05em;
  color:var(--sm-accent);margin-bottom:16px;
}

/* Показания расчёта внутри панели: подпись слева, число справа */
.sm-readout{
  border-top:1px solid var(--sm-line);padding-top:16px;margin-top:6px;
  display:grid;gap:9px;font-size:14px;color:var(--sm-mute);
}
.sm-readout div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sm-readout b{font-family:var(--sm-mono);font-variant-numeric:tabular-nums;
  font-weight:800;color:var(--sm-accent);white-space:nowrap}

.sm-cols{display:grid;gap:18px}
.sm-cols--2{grid-template-columns:repeat(2,1fr)}
.sm-cols--3{grid-template-columns:repeat(3,1fr)}
.sm-cols--4{grid-template-columns:repeat(4,1fr)}

/* Списки: короткое жирное тире цвета ржавчины вместо галочки */
.sm-list{list-style:none;display:grid;gap:11px}
.sm-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--sm-body)}
.sm-list li:before{content:"";flex:0 0 14px;height:3px;margin-top:11px;background:var(--sm-accent)}
.sm-list--num{counter-reset:sml}
.sm-list--num li:before{
  counter-increment:sml;content:counter(sml,decimal-leading-zero);
  flex:0 0 24px;height:auto;margin-top:0;background:none;
  font:800 14px/1.6 var(--sm-mono);color:var(--sm-accent);
}

/* --------------------------------------------------------------------------
   8. Таблица прайса
   -------------------------------------------------------------------------- */
.sm-tablebox{
  background:var(--sm-paper);border-radius:var(--sm-r);overflow-x:auto;overflow-y:hidden;
  box-shadow:var(--sm-shadow);border-top:var(--sm-bar) solid var(--sm-accent);
  /* На узких экранах таблица шире контейнера — не обрезаем, а даём
     прокрутить вбок внутри рамки. Тело страницы при этом не едет
     вбок: горизонтальный скролл живёт только тут. */
  -webkit-overflow-scrolling:touch;
}
.sm-table{width:100%;min-width:520px;border-collapse:collapse}
.sm-table th{
  background:var(--sm-tint);text-align:left;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sm-mute);padding:15px 20px;
  white-space:nowrap;border-bottom:1px solid var(--sm-line-2);
}
.sm-table td{padding:18px 20px;border-top:1px solid var(--sm-line);vertical-align:middle}
.sm-table tbody tr:first-child td{border-top:0}
.sm-table tbody tr:hover td{background:#faf9f7}
.sm-table__grade{font-weight:800;font-size:18px;color:var(--sm-ink);white-space:nowrap}
.sm-table__grade small{display:block;font-weight:500;font-size:12px;color:var(--sm-mute);
  font-family:var(--sm-mono);margin-top:4px;letter-spacing:.02em}
.sm-table__use{font-size:14.5px;color:var(--sm-mute)}
.sm-table__price{font-size:21px;font-weight:700;color:var(--sm-accent);white-space:nowrap;text-align:right}
.sm-table__price small{display:block;font-size:12px;font-weight:500;color:var(--sm-mute);
  font-family:var(--sm-font);letter-spacing:0}
.sm-pick{display:inline-block;background:var(--sm-accent);color:#fff;
  font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:var(--sm-r-s);margin-left:8px;
  vertical-align:middle;letter-spacing:.06em;text-transform:uppercase}

/* --------------------------------------------------------------------------
   9. Калькулятор
   -------------------------------------------------------------------------- */
.sm-calc{display:grid;grid-template-columns:1fr 350px;gap:24px;align-items:start}
.sm-calc__form{
  background:var(--sm-paper);border-radius:var(--sm-r);padding:30px;
  box-shadow:var(--sm-shadow);border-top:var(--sm-bar) solid var(--sm-line-2);
}

.sm-tags{display:flex;flex-wrap:wrap;gap:8px}
.sm-tag{
  border:0;box-shadow:inset 0 0 0 2px var(--sm-line-2);
  background:transparent;color:var(--sm-body);
  border-radius:var(--sm-r-s);padding:11px 15px;font:800 14px/1 var(--sm-mono);cursor:pointer;
  transition:.15s;
}
.sm-tag:hover{box-shadow:inset 0 0 0 2px var(--sm-ink);color:var(--sm-ink)}
.sm-tag[aria-pressed="true"]{background:var(--sm-brand);box-shadow:none;color:#fff}

.sm-slider{display:block;width:100%;height:6px;padding:0;border:0;border-radius:0;
  background:var(--sm-line-2);accent-color:var(--sm-brand);cursor:pointer}
.sm-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sm-mute);margin-top:8px}
.sm-val{float:right;font-family:var(--sm-mono);font-weight:800;color:var(--sm-accent)}

/* Итог — «из чего сложилась цена». Единственная плотная заливка на странице,
   и она графитовая, а не цветная. Обязательно показывает слагаемые, а не сумму. */
.sm-meter{
  background:var(--sm-brand);color:rgba(255,255,255,.86);border-radius:var(--sm-r);padding:28px;
  position:sticky;top:88px;box-shadow:var(--sm-shadow-lg);
}
.sm-meter__lbl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72);font-weight:800}
.sm-meter__sum{font-family:var(--sm-mono);font-variant-numeric:tabular-nums;font-size:36px;
  font-weight:800;color:#fff;line-height:1.1;margin:10px 0 4px;letter-spacing:-.04em}
.sm-meter__hint{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:20px}
.sm-meter__rows{display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.28);
  padding-top:18px;font-size:13.5px}
.sm-meter__rows div{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.82)}
.sm-meter__rows b{color:#fff;font-weight:700;font-family:var(--sm-mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sm-meter .sm-btn{margin-top:22px;background:#fff;color:var(--sm-accent)}
.sm-meter .sm-btn:hover{background:var(--sm-accent);color:#fff}

/* --------------------------------------------------------------------------
   10. Формы
   -------------------------------------------------------------------------- */
.sm-form{
  background:var(--sm-paper);border-radius:var(--sm-r);padding:30px;
  box-shadow:var(--sm-shadow-lg);border-top:var(--sm-bar) solid var(--sm-accent);
}
.sm-form h3{font-size:22px;font-weight:800;color:var(--sm-ink);margin-bottom:6px;letter-spacing:-.025em}
.sm-form__sub{font-size:14px;color:var(--sm-mute);margin-bottom:22px}
.sm-field{margin-bottom:14px}
.sm-label{display:block;font-size:12px;font-weight:800;color:var(--sm-mute);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.sm-input,.sm-select,.sm-area{
  width:100%;background:#f4f5f6;border:0;box-shadow:inset 0 0 0 1px var(--sm-line-2);
  color:var(--sm-ink);padding:14px 15px;border-radius:var(--sm-r-s);
  font:15px/1.4 var(--sm-font);outline:none;transition:box-shadow .15s,background .15s;
}
.sm-input::placeholder,.sm-area::placeholder{color:#9a9691}
.sm-input:focus,.sm-select:focus,.sm-area:focus{
  background:#fff;box-shadow:inset 0 0 0 2px var(--sm-brand);
}
.sm-input[inputmode=decimal],.sm-input[inputmode=numeric],.sm-input[inputmode=tel]{
  font-family:var(--sm-mono);font-variant-numeric:tabular-nums}
.sm-select{appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23646b72' stroke-width='2' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center}
.sm-area{resize:vertical;min-height:84px}
.sm-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sm-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* Согласие. Внимание: у этой галочки НЕТ атрибута required — в соседнем
   проекте required на чекбоксе, скрытом за мобильной панелью, молча
   блокировал отправку. Проверка сделана в JS с видимым сообщением. */
.sm-check{display:block;position:relative;padding-left:26px;font-size:12.5px;
  color:var(--sm-mute);margin-top:16px;line-height:1.5}
.sm-check input{position:absolute;left:0;top:2px;width:17px;height:17px;accent-color:var(--sm-brand)}
.sm-check a{color:var(--sm-accent-dk);text-decoration:underline}

/* Сообщение об ошибке — ВСЕГДА над кнопкой отправки, не под ней.
   Отличается от кнопки формой: светлая плашка с жирной полосой слева, и красный в ней ярче бренда. */
.sm-alert{
  margin:0 0 14px;padding:13px 15px;font-size:13.5px;line-height:1.55;
  background:var(--sm-alert-bg);border-left:var(--sm-bar) solid var(--sm-alert);
  border-radius:0 var(--sm-r-s) var(--sm-r-s) 0;color:var(--sm-alert);font-weight:600;
}
.sm-alert a{color:var(--sm-alert);font-weight:800;text-decoration:underline;white-space:nowrap}
.sm-input--bad,.sm-select--bad{box-shadow:inset 0 0 0 2px var(--sm-alert);background:#fdf5f4}

/* Экран благодарности */
.sm-thanks{text-align:center;padding:16px 0}
.sm-thanks__ok{width:56px;height:56px;margin:0 auto 18px;border-radius:var(--sm-r-b);
  background:var(--sm-brand);color:#fff;display:grid;place-items:center;
  font-size:26px;font-weight:800}
.sm-thanks h3{margin-bottom:8px}
.sm-thanks p{font-size:15px;color:var(--sm-mute);margin-bottom:20px}

/* --------------------------------------------------------------------------
   11. Шаги, вопросы, отзывы
   -------------------------------------------------------------------------- */
.sm-steps{counter-reset:smst;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sm-step{
  background:var(--sm-paper);border-radius:var(--sm-r);padding:26px;
  box-shadow:var(--sm-shadow);border-top:var(--sm-bar) solid var(--sm-accent);
  transition:transform .18s,box-shadow .18s;
}
.sm-step:hover{transform:translateY(-3px);box-shadow:var(--sm-shadow-lg)}
.sm-step:before{
  counter-increment:smst;content:counter(smst,decimal-leading-zero);display:block;
  font:800 40px/1 var(--sm-mono);color:var(--sm-accent);letter-spacing:-.05em;margin-bottom:14px;
}
.sm-step h4{font-size:17px;font-weight:800;color:var(--sm-ink);margin-bottom:8px}
.sm-step p{font-size:14.5px;color:var(--sm-mute)}

.sm-qa{display:grid;gap:10px;max-width:920px}
.sm-qa__item{
  background:var(--sm-paper);border-radius:var(--sm-r-s);overflow:hidden;
  box-shadow:var(--sm-shadow);border-left:var(--sm-bar) solid transparent;
  transition:border-color .18s;
}
.sm-qa__item.is-open{border-left-color:var(--sm-accent)}
.sm-qa__item>button{
  width:100%;background:none;border:0;text-align:left;cursor:pointer;
  padding:20px 54px 20px 22px;position:relative;color:var(--sm-ink);
  font:800 16.5px/1.4 var(--sm-font);letter-spacing:-.01em;
}
.sm-qa__item>button:after{
  content:"";position:absolute;right:22px;top:50%;width:14px;height:3px;
  margin-top:-1px;background:var(--sm-accent);
}
.sm-qa__item>button:before{
  content:"";position:absolute;right:27.5px;top:50%;width:3px;height:14px;
  margin-top:-7px;background:var(--sm-accent);transition:transform .2s;
}
.sm-qa__item.is-open>button:before{transform:scaleY(0)}
.sm-qa__a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.sm-qa__a p{padding:0 22px 20px;font-size:15.5px;color:var(--sm-mute)}

.sm-quote{
  background:var(--sm-paper);border-radius:var(--sm-r);padding:28px;
  display:flex;flex-direction:column;margin:0;box-shadow:var(--sm-shadow);
  transition:transform .18s,box-shadow .18s;
}
.sm-quote:hover{transform:translateY(-3px);box-shadow:var(--sm-shadow-lg)}
.sm-quote__stars{font:800 13px/1 var(--sm-mono);letter-spacing:.14em;
  color:var(--sm-accent);margin-bottom:14px;text-transform:uppercase}
.sm-quote blockquote{margin:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--sm-body);flex:1}
.sm-quote figcaption{border-top:1px solid var(--sm-line);padding-top:15px}
.sm-quote figcaption b{display:block;font-size:15px;margin-bottom:3px}
.sm-quote figcaption span{font-size:12.5px;color:var(--sm-mute);font-family:var(--sm-mono)}

/* --------------------------------------------------------------------------
   12. Почта для юрлиц
   -------------------------------------------------------------------------- */
.sm-mail{display:block;font-size:clamp(18px,3vw,26px);font-weight:700;letter-spacing:-.03em;
  color:var(--sm-accent);margin:12px 0 20px;word-break:break-all;font-family:var(--sm-mono)}
.sm-mail:hover{text-decoration:underline}
.sm-mailbtns{display:flex;gap:10px;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   13. Финальный призыв, подвал, модалка, мобильная панель
   -------------------------------------------------------------------------- */
.sm-final{display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:start}
.sm-final h2{margin-bottom:14px}

.sm-foot{background:var(--sm-ink);color:#98a2ab;padding:54px 0 26px;font-size:14.5px;
  border-top:var(--sm-bar) solid var(--sm-brand)}
.sm-foot a{color:#c6cdd4}
.sm-foot a:hover{color:#fff}
.sm-foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-bottom:32px}
.sm-foot h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  margin-bottom:16px;font-weight:800}
.sm-foot ul{list-style:none;display:grid;gap:9px}
.sm-foot .sm-brand{margin-bottom:16px}
.sm-foot__bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#7d868f}

.sm-modal{position:fixed;inset:0;background:rgba(23,25,29,.68);z-index:100;
  display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.sm-modal.is-on{display:flex}
.sm-modal .sm-form{width:100%;max-width:480px;position:relative;margin:auto}
.sm-modal__x{position:absolute;right:16px;top:14px;background:none;border:0;cursor:pointer;
  font-size:26px;line-height:1;color:var(--sm-mute)}
.sm-modal__x:hover{color:var(--sm-ink)}

.sm-dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;gap:10px;padding:10px 14px;
  background:var(--sm-paper);border-top:var(--sm-bar) solid var(--sm-brand)}
.sm-dock .sm-btn{flex:1;padding:13px 10px;font-size:15px}

/* --------------------------------------------------------------------------
   14. Адаптив
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .sm-menu{gap:13px;font-size:13.5px}
  .sm-topbar__in{gap:14px}
  .sm-topbar .sm-btn{padding:13px 16px;font-size:14px}
  .sm-phone b{font-size:16px}
}
@media(max-width:960px){
  .sm-menu,.sm-topbar .sm-btn{display:none}
  .sm-phone{margin-left:auto}
  .sm-lead__grid{grid-template-columns:1fr;gap:34px}
  .sm-calc{grid-template-columns:1fr}
  .sm-meter{position:static}
  .sm-final{grid-template-columns:1fr}
  .sm-cols--3,.sm-cols--4{grid-template-columns:1fr 1fr}
  .sm-steps{grid-template-columns:1fr 1fr}
  .sm-foot__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  body{padding-bottom:72px}       /* место под мобильную панель */
  .sm-dock{display:flex}
  .sm-sec{padding:48px 0}
  .sm-lead{padding:34px 0 44px}
  .sm-cols--2,.sm-cols--3,.sm-cols--4{grid-template-columns:1fr}
  .sm-steps{grid-template-columns:1fr}
  .sm-facts{grid-template-columns:1fr}
  .sm-facts div+div{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
  .sm-row3{grid-template-columns:1fr}
  .sm-foot__grid{grid-template-columns:1fr;gap:26px}
  .sm-table th:nth-child(2),.sm-table td:nth-child(2){display:none}
  .sm-table th,.sm-table td{padding:14px}
  .sm-panel,.sm-form,.sm-calc__form,.sm-panel--pad{padding:22px}
  .sm-meter{padding:22px}
  .sm-mark{font-size:36px}
  .sm-qa__item>button{padding:18px 48px 18px 18px;font-size:16px}
  .sm-qa__a p{padding:0 18px 18px}
}
@media(max-width:420px){
  .sm-phone span{display:none}
  .sm-brand{font-size:16px}
}

/* Уважаем системную настройку «меньше движения» */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sm-panel,.sm-step,.sm-quote{transition:none}
  .sm-panel:hover,.sm-step:hover,.sm-quote:hover{transform:none}
}

/* Печать */
@media print{
  .sm-topbar,.sm-dock,.sm-modal,.sm-calc__form,.sm-btn{display:none!important}
  body{background:#fff;padding-bottom:0}
  .sm-panel,.sm-tablebox,.sm-step,.sm-quote{box-shadow:none}
}