/* СТРОЙГОСТ — страница бытовок и хозблоков. Стили в скоупе .sg-b-page,
   без ресетов и правил на голые теги. Шрифты берутся из main.css
   (@font-face "SG Montserrat" / "SG Caveat"). Все классы с префиксом sg-b-,
   коллизий с main.css (sg-) и project.css (sg-p-) нет. */

.sg-b-page{margin:0;font-family:"SG Montserrat",Arial,sans-serif;color:#2b2b29;background:#f3f2ee;-webkit-font-smoothing:antialiased;line-height:1.5;

  /* Локальные токены. Используются и в CSS, и в инлайновых SVG схемы:
     SVG лежит внутри .sg-b-page, поэтому переменные наследуются. */
  --b-green:#2f7d3e;
  --b-green-dark:#22602f;
  --b-lime:#7cba3f;
  --b-ink:#2b2b29;
  --b-muted:#6c6c66;
  --b-line:#e4e4de;
  --b-bg:#f3f2ee;
  --b-card:#fff;
  --b-tint:#eef6e3;
  --b-wood:#d9bb90;
  --b-wood-dark:#b9975f;
}
.sg-b-page :where(*){box-sizing:border-box}
.sg-b-page :where(img){display:block;max-width:100%}
.sg-b-page :where(a){text-decoration:none;color:#2f7d3e}
.sg-b-page :where(a:hover){color:#22602f}
.sg-b-page :where(h1,h2,h3,p){margin:0}
/* Броня от шаблона Aspro — та же схема, что в project.css.
   :not(.sg-page *) исключает блоки, перенесённые с главной: они уже
   защищены main.css, и без исключения эта броня ломала бы их цвета. */
.sg-b-page h1:not(.sg-page *),.sg-b-page h2:not(.sg-page *),.sg-b-page h3:not(.sg-page *),
.sg-b-page h4:not(.sg-page *),.sg-b-page h5:not(.sg-page *),.sg-b-page h6:not(.sg-page *){color:inherit;font-family:inherit}
.sg-b-page p:not(.sg-page *),.sg-b-page li:not(.sg-page *),.sg-b-page b:not(.sg-page *),
.sg-b-page strong:not(.sg-page *),.sg-b-page span:not(.sg-page *){color:inherit}
.sg-b-page :where(button,input,textarea,select){font-family:inherit}
.sg-b-page :where(button,a,input,select,summary):focus-visible{outline:2px solid #2f7d3e;outline-offset:2px}

  .sg-b-wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px;}
  .sg-b-script{font-family:"SG Caveat",cursive;font-weight:700;}
  .sg-b-btn{display:inline-block;background:#2f7d3e;color:#fff;font-weight:800;border:none;border-radius:12px;cursor:pointer;box-shadow:0 10px 22px rgba(47,125,62,.32);}
  .sg-b-btn:hover{background:#22602f;color:#fff;}
  .sg-b-btn--ghost{background:#fff;color:#2b2b29;border:2px solid #e4e4de;box-shadow:none;font-weight:700;}
  .sg-b-btn--ghost:hover{background:#fff;border-color:#bcd0b3;color:#22602f;}
  .sg-b-eyebrow{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:#8a9a82;}
  .sg-b-h2{font-size:clamp(28px,3.8vw,44px);font-weight:900;line-height:1.06;letter-spacing:-.8px;color:#22602f;}

  /* HERO — большое фото со сменой кадров, как в шапке главной.
     Слайдер свой, а не из main.js: тот берёт корнем ПЕРВЫЙ .sg-page
     в документе (SG.init), и если завернуть шапку в .sg-page выше
     блока отзывов, лента отзывов и агрегат рейтинга останутся
     без инициализации. Разметка и вуаль повторяют .sg-hero из main.css. */
  .sg-b-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(520px,72vh,720px);background:#33402f;}
  .sg-b-hero-slides{position:absolute;inset:0;overflow:hidden;}
  /* Кадр 1800 × 1344 (4:3) в широкой шапке обрезается сверху и снизу.
     По центру срезало крыши — на всех четырёх фото постройка стоит
     в верхней половине кадра. Сдвигаем окно просмотра вверх: сверху
     остаётся почти всё, лишнее уходит снизу, где земля и передний
     план и где и так лежит тёмная вуаль с текстом. */
  .sg-b-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;opacity:0;transition:opacity 1.1s ease;}
  .sg-b-slide.sg-b-on{opacity:1;}
  /* Вуаль: вертикальная как на главной плюс боковая слева — текст здесь
     прижат к левому краю и ложится на светлое дерево, одной вертикальной
     не хватало. Справа фото остаётся чистым. */
  .sg-b-veil{position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(12,24,14,.58) 0%,rgba(12,24,14,.34) 42%,rgba(12,24,14,0) 78%),
               linear-gradient(180deg,rgba(12,24,14,.62) 0%,rgba(12,24,14,.2) 34%,rgba(12,24,14,.42) 66%,rgba(12,24,14,.88) 100%);}
  .sg-b-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:9px;}
  .sg-b-dot{width:34px;height:22px;padding:0;border:0;background:none;cursor:pointer;position:relative;}
  .sg-b-dot::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:999px;background:rgba(255,255,255,.42);transition:background-color .2s;}
  .sg-b-dot:hover::after{background:rgba(255,255,255,.7);}
  .sg-b-dot.sg-b-on::after{background:#fff;}
  .sg-b-hero-in{position:relative;z-index:1;width:100%;padding-top:clamp(48px,7vw,80px);padding-bottom:clamp(46px,5vw,68px);}
  .sg-b-hero-col{max-width:760px;color:#fff;}
  .sg-b-hero h1{font-size:clamp(34px,5.2vw,62px);font-weight:900;line-height:1.03;letter-spacing:-1.2px;color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.45);margin:0;}
  .sg-b-hero .sg-b-eyebrow{color:#cfe3c2;text-shadow:0 1px 10px rgba(0,0,0,.5);}
  .sg-b-hero-sub{font-family:"SG Caveat",cursive;font-weight:700;font-size:clamp(26px,3.6vw,42px);line-height:1.05;color:#d6e8a6;margin-top:12px;text-shadow:0 2px 16px rgba(0,0,0,.4);}
  .sg-b-pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;}
  .sg-b-pill{display:inline-flex;align-items:center;min-height:38px;padding:8px 15px;border-radius:10px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:700;color:#fff;backdrop-filter:blur(3px);}
  .sg-b-hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
  .sg-b-hero-btns .sg-b-btn{font-size:16px;padding:15px 26px;}
  .sg-b-btn--on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);box-shadow:none;font-weight:700;}
  .sg-b-btn--on-dark:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;}
  .sg-b-rating{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13.5px;font-weight:600;color:#e3eeda;text-decoration:none;}
  .sg-b-rating:hover{color:#fff;}
  .sg-b-star{color:#f5a623;font-size:15px;}

  /* «Как это работает» — четыре шага над конфигуратором */
  .sg-b-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 34px;}
  .sg-b-how div{border-top:2px solid #7cba3f;padding-top:12px;}
  .sg-b-how b{display:block;font-size:11px;font-weight:800;letter-spacing:1px;color:#7cba3f;}
  .sg-b-how span{display:block;font-size:14px;line-height:1.45;color:#52524c;margin-top:6px;}
  .sg-b-how span i{font-style:normal;font-weight:700;color:#2b2b29;}

  /* КОНФИГУРАТОР */
  .sg-b-cfg{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:clamp(24px,3vw,44px);align-items:start;}
  /* Колонка со схемой короче колонки с опциями — без прилипания под планом
     оставалась пустая простыня. Отступ сверху берём из --sg-offset-top:
     main.js кладёт туда высоту фиксированной шапки шаблона. */
  .sg-b-stage-col{position:sticky;top:calc(var(--sg-offset-top, 0px) + 16px);align-self:start;}
  .sg-b-stage{background:#fff;border:1px solid #e4e4de;border-radius:20px;padding:10px;box-shadow:0 14px 36px rgba(20,30,22,.08);}
  /* только сам план: без > правило било и по иконке в подсказке */
  .sg-b-stage > svg{display:block;width:100%;height:auto;max-width:100%;touch-action:none;}
  /* Проёмы нарисованы по-чертёжному — белое в тёмной рамке. Зелёная
     на схеме только ручка длины, поэтому подсказка, что проём тоже
     двигается, даётся подсветкой по наведению. */
  .sg-b-stage [data-open]:hover .sg-b-open-mark{stroke:#2f7d3e;stroke-width:2.2;}
  .sg-b-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;color:#8a9a82;padding:8px 6px 4px;text-align:center;}
  .sg-b-hint svg{flex:none;width:16px;height:16px;}
  .sg-b-read{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
  .sg-b-chip{flex:1 1 120px;background:#fff;border:1px solid #e4e4de;border-radius:14px;padding:11px 14px;}
  .sg-b-chip i{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8a9a82;}
  .sg-b-chip b{display:block;font-size:21px;font-weight:900;line-height:1.2;color:#22602f;}

  .sg-b-panel{display:flex;flex-direction:column;gap:22px;}
  .sg-b-ctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;}
  .sg-b-ctl-head span:first-child{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#8a9a82;}
  .sg-b-ctl-head span:last-child{font-size:14px;font-weight:800;color:#2f7d3e;}
  .sg-b-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;padding:0;border:none;}
  .sg-b-range::-webkit-slider-runnable-track{height:4px;background:#e0e0d9;border-radius:3px;}
  .sg-b-range::-moz-range-track{height:4px;background:#e0e0d9;border-radius:3px;}
  .sg-b-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:#2f7d3e;border:4px solid #fff;box-shadow:0 2px 8px rgba(47,125,62,.45);}
  .sg-b-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#2f7d3e;border:4px solid #fff;box-shadow:0 2px 8px rgba(47,125,62,.45);}
  .sg-b-ticks{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#a5a5a0;margin-top:-2px;}

  /* Ширина не выбирается — объясняем это прямо под ползунком длины,
     иначе «а почему только одна ручка» становится вопросом к странице. */
  .sg-b-fixed{margin-top:12px;background:#eaf4dc;border:1px solid #cbe2ae;border-left:4px solid #7cba3f;
    border-radius:12px;padding:13px 16px 13px 44px;font-size:13.5px;line-height:1.5;color:#41513c;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d3e' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 7.5v.01'/></svg>");
    background-repeat:no-repeat;background-position:17px 13px;background-size:17px;}
  .sg-b-fixed b{color:#1c5730;font-weight:800;}

  .sg-b-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .sg-b-tier{cursor:pointer;text-align:left;background:#fff;border:2px solid #e4e4de;border-radius:14px;padding:14px 15px;transition:border-color .15s,box-shadow .15s;}
  .sg-b-tier:hover{border-color:#bcd0b3;}
  .sg-b-tier[aria-pressed="true"]{border-color:#2f7d3e;box-shadow:0 8px 20px rgba(47,125,62,.14);background:#f7fbf2;}
  .sg-b-tier b{display:block;font-size:15px;font-weight:800;line-height:1.25;color:#2b2b29;}
  .sg-b-tier i{display:block;font-style:normal;font-size:12.5px;line-height:1.35;color:#6c6c66;margin-top:5px;}
  .sg-b-tier u{display:block;text-decoration:none;font-size:13px;font-weight:800;color:#2f7d3e;margin-top:9px;}

  /* Отделка — выбор одного из вариантов, поэтому чипы, а не галочки */
  .sg-b-choice{display:flex;flex-wrap:wrap;gap:8px;}
  .sg-b-ch{cursor:pointer;text-align:left;background:#fff;border:2px solid #e4e4de;border-radius:12px;padding:10px 14px;transition:border-color .15s,box-shadow .15s;}
  .sg-b-ch:hover{border-color:#bcd0b3;}
  .sg-b-ch[aria-pressed="true"]{border-color:#2f7d3e;background:#f7fbf2;box-shadow:0 8px 20px rgba(47,125,62,.14);}
  .sg-b-ch b{display:block;font-size:14px;font-weight:700;color:#2b2b29;}
  .sg-b-ch u{display:block;text-decoration:none;font-size:13px;font-weight:800;color:#2f7d3e;margin-top:4px;}
  /* У «без отделки» и «без окна» ценника нет — пустая строка не должна
     держать высоту, иначе кнопка выглядит обрезанной. */
  .sg-b-ch u:empty{display:none;}
  .sg-b-choice{align-items:stretch;}
  .sg-b-ch[aria-pressed="true"] u{color:#22602f;}

  .sg-b-note{margin-top:10px;font-size:12.5px;line-height:1.45;color:#8a9a82;font-weight:600;}

  .sg-b-group + .sg-b-group{margin-top:18px;}
  .sg-b-group-t{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8a9a82;margin-bottom:10px;}
  .sg-b-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
  .sg-b-opt{cursor:pointer;width:100%;background:#fff;border:2px solid #e4e4de;border-radius:14px;padding:14px 16px;transition:border-color .15s,box-shadow .15s;text-align:left;}
  /* Второе окно без первого: кнопка гаснет, но остаётся на месте — видно, что опция есть и чего ей не хватает. */
  .sg-b-opt.sg-b-off{opacity:.45;cursor:not-allowed;}
  .sg-b-opt.sg-b-off:hover{border-color:#e4e4de;box-shadow:none;}
  .sg-b-opt:hover{border-color:#bcd0b3;}
  .sg-b-opt.sg-b-on{border-color:#2f7d3e;box-shadow:0 8px 20px rgba(47,125,62,.14);}
  .sg-b-opt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .sg-b-opt-name{font-size:14px;font-weight:700;line-height:1.3;}
  .sg-b-opt-box{flex:none;width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#fff;background:transparent;border:2px solid #cfcfc8;}
  .sg-b-opt.sg-b-on .sg-b-opt-box{background:#2f7d3e;border-color:#2f7d3e;}
  .sg-b-opt-price{font-size:14px;font-weight:800;color:#2f7d3e;margin-top:9px;}

  /* Доставка одна на все бытовки — не селект, а строка */
  .sg-b-flat{background:#fff;border:1px solid #e4e4de;border-radius:12px;padding:13px 15px;font-size:14px;line-height:1.5;color:#52524c;}
  .sg-b-flat b{color:#22602f;font-weight:800;}
  /* Галочка «привезти на участок»: доставка нужна не всем, поэтому
     её можно снять целиком вместе с ползунком расстояния. */
  .sg-b-check{display:flex;align-items:center;gap:9px;cursor:pointer;margin-bottom:12px;
font-size:14px;font-weight:700;color:#2b2b29;user-select:none;}
  .sg-b-check input{width:18px;height:18px;accent-color:#2f7d3e;cursor:pointer;margin:0;}
  #sg-b-found-note{margin-top:10px;}
  /* Сумма доставки — отдельной строкой под пояснением: она меняется
     ползунком, и её не должно приходиться выискивать в абзаце. */
  #sg-b-deliv-sum{display:block;margin-top:7px;padding-top:7px;border-top:1px solid #eeeee9;font-size:15px;font-weight:800;color:#22602f;}

  .sg-b-sel{width:100%;background:#fff;border:2px solid #e4e4de;border-radius:12px;padding:13px 14px;font-size:14px;font-weight:600;color:#2b2b29;cursor:pointer;}
  .sg-b-sel:hover{border-color:#bcd0b3;}

  /* Итоговая полоса — та же механика, что в калькуляторе проекта.
     Слагаемые слева, итог и кнопка справа: раньше строка «₽ за м²»
     раздувала блок сумм на всю ширину, кнопка переносилась под него,
     и правая половина полосы пустовала. */
  /* Полоса с расчётом. Липнет к низу экрана, пока посетитель внутри
     конфигуратора. Появляется не раньше, чем схема дошла до экрана:
     класс sg-b-bar--off ставит скрипт, иначе sticky показывал бы её
     уже на блоке комплектации, до всякого расчёта. Держим плоской и
     тесной — это подпись к экрану, а не самостоятельный блок. */
  .sg-b-bar{position:sticky;bottom:14px;z-index:5;background:#22602f;color:#fff;border-radius:16px;padding:10px clamp(14px,1.6vw,20px);box-shadow:0 14px 34px rgba(34,96,47,.26);display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:20px;transition:opacity .22s ease,transform .22s ease;}
  .sg-b-bar--off{opacity:0;transform:translateY(10px);pointer-events:none;}
  /* Слагаемые и итог разложены по всей ширине: иначе между ними и
     кнопкой зияет пустая зелёная зона. */
  .sg-b-sums{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;flex:1 1 auto;min-width:0;}
  .sg-b-final{min-width:0;}
  .sg-b-sums small{display:block;font-size:11px;font-weight:600;color:#bcd6ac;line-height:1.25;}
  .sg-b-sums em{font-style:normal;display:block;font-size:16px;font-weight:700;line-height:1.2;}
  .sg-b-op{font-size:16px;font-weight:700;color:#9bc47e;line-height:1;align-self:center;}
  .sg-b-result{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;}
  .sg-b-total-cap{font-size:11px;font-weight:600;color:#d6e8a6;line-height:1.25;}
  /* Итог и цена метра — одной строкой по общей базовой линии: так блок
     занимает две строки вместо трёх и полоса заметно ниже. */
  .sg-b-total-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
  .sg-b-total{font-size:clamp(23px,2.4vw,28px);font-weight:900;line-height:1.1;}
  .sg-b-permeter{font-size:11px;font-weight:600;color:#a9c79a;}
  .sg-b-result .sg-b-btn{background:#7cba3f;color:#11340f;font-size:14px;padding:10px 22px;white-space:nowrap;box-shadow:none;}
  .sg-b-result .sg-b-btn:hover{background:#6ba734;color:#11340f;}
  .sg-b-bar-fine{font-size:10.5px;color:#a9c79a;line-height:1.3;margin-top:4px;text-align:center;}

  /* ЧТО ВХОДИТ */
  /* Пять пунктов в один ряд: карточка узкая, в ней строка названия
     и строка уточнения — блок стоит над конфигуратором и не должен
     отодвигать его за первый экран. */
  .sg-b-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px;}
  .sg-b-kit-i{background:#fff;border:1px solid #e4e4de;border-radius:14px;padding:14px 15px;}
  .sg-b-kit-i b{display:block;font-size:15px;font-weight:800;color:#22602f;margin:7px 0 4px;line-height:1.3;}
  .sg-b-kit-i span{font-size:13.5px;line-height:1.45;color:#52524c;}
  .sg-b-kit-n{font-size:10.5px;font-weight:800;letter-spacing:1px;color:#7cba3f;}

  /* ПОЯВЛЕНИЕ БЛОКОВ
     Те же параметры, что у .sg-reveal на главной: сдвиг 14px, .55s,
     та же кривая, ступенька 70 мс внутри одного ряда. Свои классы,
     а не общие с main.css: страница должна одинаково выглядеть и в
     превью, где main.css не подключён. Скрывать что-либо начинаем
     только после того, как скрипт поставил .sg-b-anim, — без JS
     контент виден всегда. */
  .sg-b-anim .sg-b-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
  .sg-b-anim .sg-b-reveal.sg-b-in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){
    .sg-b-anim .sg-b-reveal{opacity:1;transform:none;transition:none;}
  }

  /* КАТАЛОГ РАБОТ */
  .sg-b-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
  .sg-b-work{background:#fff;border:1px solid #e4e4de;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;}
  .sg-b-work-pic{position:relative;background:#f0f1ec;aspect-ratio:4/3;overflow:hidden;}
  .sg-b-work-pic img{width:100%;height:100%;object-fit:cover;}
/* Второй ракурс: лежит поверх основного кадра и проявляется
   при наведении. Если второго снимка нет, ничего не меняется. */
.sg-b-work-pic__alt{position:absolute;inset:0;opacity:0;transition:opacity .28s ease;}
.sg-b-work:hover .sg-b-work-pic__alt{opacity:1;}
  .sg-b-work-pic svg{width:100%;height:100%;}
  .sg-b-work-tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.94);border-radius:999px;padding:5px 11px;color:#22602f;}
  .sg-b-work-body{padding:18px 19px 20px;display:flex;flex-direction:column;gap:12px;flex:1;}
  .sg-b-work-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .sg-b-work-top b{font-size:18px;font-weight:800;line-height:1.25;color:#2b2b29;}
  .sg-b-work-top span{font-size:13px;font-weight:800;color:#8a9a82;white-space:nowrap;}
  .sg-b-work-desc{font-size:14px;line-height:1.55;color:#52524c;}
  .sg-b-work-opts{display:flex;flex-wrap:wrap;gap:6px;}
  .sg-b-work-opts span{font-size:11.5px;font-weight:700;background:#f0f4ec;border-radius:999px;padding:4px 10px;color:#52524c;}
  .sg-b-work-money{display:flex;gap:22px;border-top:1px dashed #e4e4de;padding-top:13px;margin-top:auto;}
  .sg-b-work-money small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#a5a5a0;}
  .sg-b-work-money em{font-style:normal;display:block;font-size:19px;font-weight:900;color:#6c6c66;}
  .sg-b-work-money .sg-b-sold em{color:#2f7d3e;}
  .sg-b-work-take{width:100%;text-align:center;padding:11px 14px;font-size:14px;}

  /* FAQ */
  .sg-b-faq{background:#fff;border:1px solid #e4e4de;border-radius:14px;padding:18px 22px;}
  .sg-b-faq summary{cursor:pointer;font-size:16px;font-weight:800;color:#22602f;list-style:none;}
  .sg-b-faq summary::-webkit-details-marker{display:none}
  .sg-b-faq summary::after{content:"+";float:right;font-size:22px;font-weight:700;color:#7cba3f;line-height:1;}
  .sg-b-faq[open] summary::after{content:"–";}
  .sg-b-faq-a{font-size:15px;line-height:1.6;color:#52524c;margin-top:12px;}

  @media (max-width:980px){
    /* в одну колонку прилипание только мешает */
    .sg-b-stage-col{position:static;}
    .sg-b-how{grid-template-columns:repeat(2,minmax(0,1fr));}
    .sg-b-cfg{grid-template-columns:1fr;}
    .sg-b-tiers{grid-template-columns:1fr;}
    .sg-b-bar{gap:16px;}
    /* в одну колонку правый блок разворачиваем влево и растягиваем */
    .sg-b-result{flex:1 1 100%;align-items:stretch;text-align:left;}
    .sg-b-result .sg-b-btn{width:100%;text-align:center;}
    .sg-b-bar-fine{max-width:none;text-align:center;}
  }
  /* Мобильная полоса итога. Она липкая, поэтому каждый лишний пиксель
     высоты — это отъеденный кусок экрана: слагаемые встают в два
     столбца, знаки + и = убираем (структура и так читается по
     подписям), кегли уменьшаем. */
  @media (max-width:620px){
    /* На телефоне пять карточек в столбик отодвигали бы конфигуратор
       на пол-экрана — ставим в два ряда, пятая занимает всю ширину. */
    .sg-b-kit{grid-template-columns:1fr 1fr;gap:8px;}
    .sg-b-kit-i{padding:12px 13px;}
    .sg-b-kit-i:nth-child(5){grid-column:1/-1;}
    .sg-b-bar{padding:11px 14px;gap:8px 14px;bottom:10px;}
    .sg-b-op{display:none;}
    .sg-b-sums{gap:10px 14px;}
    .sg-b-sums > div{flex:1 1 44%;}
    .sg-b-final{flex:1 1 100%;}
    .sg-b-sums small{font-size:11px;}
    .sg-b-sums em{font-size:15px;}
    .sg-b-total{font-size:26px;}
    .sg-b-permeter{font-size:11.5px;}
    .sg-b-bar-fine{font-size:10.5px;margin-top:6px;}
  }

  @media (max-width:560px){
    .sg-b-wrap{padding-left:16px;padding-right:16px;}
    .sg-b-promo{font-size:12px!important;padding:8px 14px!important;}
    .sg-b-works{grid-template-columns:1fr;}
    .sg-b-hero{min-height:0;}
    .sg-b-how{grid-template-columns:1fr;gap:10px;}
    .sg-b-hero-btns .sg-b-btn{width:100%;text-align:center;}
  }