/* ==========================================================================
   Бриф комплектации
   Режимы: .ksb--inline (в карточке проекта), .ksb--overlay (окно),
   .ksb--page (страница /brif/). Цвета сайта: #0D2B23 / #173D32, золото
   #F4B400, фон #F4F2EC. Заголовки Manrope, текст Onest.
   ========================================================================== */

.ksb,
.ksb-reqstatus {
    --ksb-g: #173d32;
    --ksb-gd: #0d2b23;
    --ksb-y: #f4b400;
    --ksb-yl: #fff6d8;
    --ksb-bg: #f4f2ec;
    --ksb-ink: #171a18;
    --ksb-mut: #66716b;
    --ksb-line: #e4e2da;
    --ksb-ok: #2f7a4f;
    --ksb-okl: #e7f2ea;
    --ksb-w: 980px;
    color: var(--ksb-ink);
    font-family: "Onest", system-ui, sans-serif;
}

.ksb[hidden] { display: none !important; }
.ksb *, .ksb *::before, .ksb *::after { box-sizing: border-box; }

/* --- Контейнеры режимов ---------------------------------------------------- */

.ksb--overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--ksb-bg);
}

html.ksb-open,
html.ksb-open body { overflow: hidden; }

.ksb--page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 140px);
    background: var(--ksb-bg);
}

.ksb--inline {
    --ksb-w: 100%;
    position: relative;
    margin: 22px 0 10px;
    border: 1px solid #e9ebe7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(7, 53, 42, .03);
    scroll-margin-top: 150px;
}

/* --- Шапка окна ------------------------------------------------------------ */

.ksb-top { flex: 0 0 auto; background: var(--ksb-bg); border-bottom: 1px solid var(--ksb-line); }
.ksb--page .ksb-top { position: sticky; top: 0; z-index: 5; }

.ksb-top__row {
    display: flex;
    align-items: center;
    gap: 22px;
    width: min(var(--ksb-w), 100% - 56px);
    min-height: 68px;
    margin: 0 auto;
}

.ksb-top__brand { display: flex; align-items: center; gap: 10px; color: var(--ksb-gd); letter-spacing: .08em; }
.ksb-top__brand img { max-height: 40px; width: auto; }
.ksb-top__brand strong { font: 800 15px Manrope, sans-serif; text-transform: uppercase; }
.ksb-top__mark { width: 12px; height: 12px; background: var(--ksb-y); transform: rotate(45deg); }
.ksb-top__meta { display: grid; margin-left: auto; font-size: 11.5px; line-height: 1.45; color: #56615b; text-align: right; }
.ksb-top__phone { display: flex; align-items: center; gap: 8px; color: var(--ksb-gd); font-weight: 700; font-size: 13px; text-decoration: none; }
.ksb-top__phone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.ksb-top__close {
    width: 40px;
    height: 40px;
    border: 1px solid #d7d4ca;
    border-radius: 50%;
    background: transparent;
    color: var(--ksb-gd);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ksb-top__close:hover { background: #ebe8df; }

.ksb-top__progress { display: flex; align-items: center; gap: 14px; width: min(var(--ksb-w), 100% - 56px); margin: 0 auto; padding: 0 0 14px; }
.ksb-top__label { font-size: 12px; font-weight: 600; color: #56615b; white-space: nowrap; }
.ksb-top__bar { position: relative; flex: 1 1 auto; height: 4px; border-radius: 4px; background: #e2e0d8; overflow: hidden; }
.ksb-top__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: var(--ksb-g); transition: width .35s ease; }
.is-hidden { visibility: hidden; }

/* Встроенный режим: узкая полоса прогресса над экраном */
.ksb-inline-top { display: flex; align-items: center; gap: 14px; padding: 18px 30px 0; }
.ksb-inline-top.is-hidden { display: none; }

/* --- Раскладка -------------------------------------------------------------- */

.ksb-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.ksb-rail { display: none !important; }
.ksb-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.ksb--page .ksb-main,
.ksb--inline .ksb-main { overflow: visible; }

.ksb-screen { flex: 1 0 auto; width: min(var(--ksb-w), 100% - 56px); margin: 0 auto; padding: 34px 0 36px; }
.ksb--inline .ksb-screen { width: auto; margin: 0; padding: 22px 30px 28px; }
.ksb--inline.is-start .ksb-screen { padding: 0; }

/* --- Нижняя навигация -------------------------------------------------------- */

.ksb-nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px max(28px, calc((100% - var(--ksb-w)) / 2));
    background: rgba(244, 242, 236, .96);
    border-top: 1px solid var(--ksb-line);
    backdrop-filter: blur(8px);
}

.ksb--inline .ksb-nav { padding: 14px 30px; border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, .97); }
.ksb-nav[hidden] { display: none; }
.ksb-nav__back { padding: 10px 0; border: 0; background: none; color: var(--ksb-g); font: 700 13px Manrope, sans-serif; white-space: nowrap; cursor: pointer; }
.ksb-nav__back[hidden] { display: block; visibility: hidden; }
.ksb-nav__hint { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ksb-mut); text-align: center; }
.ksb-nav__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ksb-nav__steps i { width: 18px; height: 5px; border-radius: 3px; background: #dfe5e1; }
.ksb-nav__steps i.is-done { background: var(--ksb-ok); }
.ksb-nav__steps i.is-current { width: 28px; background: var(--ksb-y); }
.ksb-nav__next.ks-btn { min-width: 190px; min-height: 48px; background: var(--ksb-g); color: #fff; }
.ksb-nav__next.ks-btn:hover { background: var(--ksb-gd); }
.ksb-nav__next[hidden] { display: none; }

/* --- Общие элементы ------------------------------------------------------------ */

.ksb-icon { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.ksb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ksb-ok);
    font: 800 11px Manrope, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ksb-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--ksb-y); }

.ksb-head { margin-bottom: 24px; }
.ksb-head h2 { margin: 0 0 8px; font: 700 clamp(24px, 2.6vw, 34px)/1.1 Manrope, sans-serif; letter-spacing: -.03em; color: var(--ksb-gd); }
.ksb-head p { margin: 0; max-width: 700px; font-size: 15px; line-height: 1.6; color: var(--ksb-mut); }
.ksb-head--section { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
.ksb-head--section h2 { margin-bottom: 4px; }

.ksb-head__icon,
.ksb-head__img { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; }
.ksb-head__icon { display: grid; place-items: center; background: linear-gradient(145deg, var(--ksb-g), var(--ksb-gd)); color: var(--ksb-y); }
.ksb-head__icon .ksb-icon { width: 28px; height: 28px; }
.ksb-head__img img { width: 100%; height: 100%; object-fit: cover; }

.ksb-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ksb-g);
    font: 600 12.5px "Onest", sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* Круглая галочка (плашки с картинками) */
.ksb-tick {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #cfd7d2;
    background: #fff;
    opacity: 0;
    transition: .15s;
}

.is-selected > .ksb-tick {
    opacity: 1;
    border-color: var(--ksb-g);
    background: var(--ksb-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4B400' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* Квадратная галочка (строки, плитки разделов) */
.ksb-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 1.5px solid #c5cdc8;
    border-radius: 5px;
    background: #fff;
    transition: .15s;
}

.is-selected > .ksb-check {
    border-color: var(--ksb-g);
    background: var(--ksb-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;
}

[role="button"] { cursor: pointer; outline: none; }
[role="button"]:focus-visible { box-shadow: 0 0 0 3px rgba(23, 61, 50, .25); }

/* --- Вводные экраны ---------------------------------------------------------------- */

.ksb-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(13, 43, 35, .06);
}

.ksb-start--inline { min-height: 400px; border-radius: 12px; box-shadow: none; }
.ksb-start__copy { display: flex; flex-direction: column; justify-content: center; padding: 42px 40px; }
.ksb-start__copy .ksb-eyebrow { margin-bottom: 14px; }
.ksb-start__copy h2 { margin: 0 0 14px; font: 700 clamp(26px, 2.8vw, 38px)/1.08 Manrope, sans-serif; letter-spacing: -.03em; color: var(--ksb-gd); }
.ksb-start__copy > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ksb-mut); }
.ksb-start__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.ksb-start__points li { display: grid; gap: 8px; font-size: 12px; line-height: 1.35; color: #45514b; }
.ksb-start__points .ksb-icon { width: 26px; height: 26px; color: var(--ksb-g); }
.ksb-start__time { display: flex; align-items: center; gap: 8px; margin: 24px 0 0 !important; font-size: 13px !important; }
.ksb-start__time .ksb-icon { width: 18px; height: 18px; }
.ksb-start__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }
.ksb-start__actions span { font-size: 12.5px; color: var(--ksb-mut); }
.ksb-btn-main.ks-btn { min-height: 52px; padding: 0 28px; background: var(--ksb-g); color: #fff; }
.ksb-btn-main.ks-btn:hover { background: var(--ksb-gd); }
.ksb-start__img { display: grid; place-items: center; min-height: 260px; background: linear-gradient(145deg, #1e4a3d, var(--ksb-gd)); color: var(--ksb-y); }
.ksb-start__img img { width: 100%; height: 100%; object-fit: cover; }
.ksb-start__img > .ksb-icon { width: 90px; height: 90px; stroke-width: 1; }

.ksb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.ksb-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 170px;
    padding: 22px;
    border: 1.5px solid var(--ksb-line);
    border-radius: 12px;
    background: #fff;
    transition: .18s;
}

.ksb-mode:hover { border-color: #b9c8bf; }
.ksb-mode.is-selected { border-color: var(--ksb-g); box-shadow: 0 0 0 1px var(--ksb-g); }
.ksb-mode__icon { width: 44px; height: 44px; margin-bottom: 6px; padding: 10px; border-radius: 12px; background: var(--ksb-okl); color: var(--ksb-g); }
.ksb-mode.is-selected .ksb-mode__icon { background: var(--ksb-g); color: var(--ksb-y); }
.ksb-mode strong { font: 700 16px/1.25 Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-mode span { font-size: 13px; line-height: 1.5; color: var(--ksb-mut); }

.ksb-project {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--ksb-line);
    border-radius: 12px;
    background: #fff;
}

.ksb-project img,
.ksb-project .ksb-project__ph { width: 92px; height: 66px; border-radius: 8px; object-fit: cover; }
.ksb-project .ksb-project__ph,
.ksb-search__item .ksb-project__ph { display: grid; place-items: center; background: var(--ksb-okl); color: var(--ksb-g); }
.ksb-project strong { display: block; font: 700 16px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-project span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ksb-mut); }
.ksb-project--mode { grid-template-columns: 92px 1fr; }

.ksb-search { display: grid; justify-items: start; gap: 10px; margin-top: 16px; }
.ksb-search input { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--ksb-line); border-radius: 10px; background: #fff; font: 15px "Onest", sans-serif; outline: none; }
.ksb-search input:focus { border-color: var(--ksb-g); }
.ksb-search__results { display: grid; gap: 6px; width: 100%; }
.ksb-search__results:empty { display: none; }
.ksb-search__item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--ksb-line); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.ksb-search__item:hover { border-color: var(--ksb-g); }
.ksb-search__item img,
.ksb-search__item .ksb-project__ph { width: 64px; height: 46px; border-radius: 6px; object-fit: cover; }
.ksb-search__item strong { display: block; font: 700 14px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-search__item small { color: var(--ksb-mut); }
.ksb-search__state { margin: 4px 0; font-size: 13px; color: var(--ksb-mut); }

/* --- Плитки разделов: компактные строки в три колонки --------------------------------- */

.ksb-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.ksb-ov {
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 10px;
    border: 1.5px solid var(--ksb-line);
    border-radius: 10px;
    background: #fff;
    transition: .15s;
}

.ksb-ov:hover { border-color: #b9c8bf; }
.ksb-ov.is-selected { border-color: #c4d8cb; background: #fbfdfb; }

.ksb-ov__pic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--ksb-okl); color: var(--ksb-g); }
.ksb-ov__pic .ksb-icon { width: 22px; height: 22px; }
.ksb-ov__pic.has-img img { width: 100%; height: 100%; object-fit: cover; }
.ksb-ov__body { display: grid; gap: 2px; min-width: 0; }
.ksb-ov__body strong { font: 700 13.5px/1.25 Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-ov__body small { overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--ksb-mut); white-space: nowrap; text-overflow: ellipsis; }

.ksb-ov:not(.is-selected) { background: #f7f7f4; border-style: dashed; }
.ksb-ov:not(.is-selected) .ksb-ov__pic { filter: grayscale(1); opacity: .45; }
.ksb-ov:not(.is-selected) .ksb-ov__body strong { color: #8a948f; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }

.ksb-ov-foot { margin: 14px 0 0; font-size: 13px; color: var(--ksb-mut); }

/* --- Карточка раздела: группы -------------------------------------------------------- */

.ksb-questions { display: grid; gap: 26px; }
.ksb-group__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ksb-group__head h3 { margin: 0; font: 700 16px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-group__head span { font-size: 12px; color: #8a938e; }
.ksb-group__hint { margin: -6px 0 12px; font-size: 13px; color: var(--ksb-mut); }

/* «Выберите вариант» — плашки одинаковой ширины, строки всегда ровные */
.ksb-tiles { display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 12px; }

.ksb-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--ksb-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(13, 43, 35, .04);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ksb-tile:hover { border-color: #b9c8bf; transform: translateY(-1px); }
.ksb-tile.is-selected { border-color: var(--ksb-g); box-shadow: 0 0 0 1px var(--ksb-g); }

.ksb-tile__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px 8px 0 0; background: #ecebe5; }
.ksb-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.ksb-tile__img--none { display: grid; place-items: center; background: linear-gradient(145deg, #f1f0eb, #e6eae6); color: #c3ccc6; }
.ksb-tile__img--none .ksb-icon { width: 32px; height: 32px; stroke-width: 1.2; }
.ksb-tile.is-selected .ksb-tile__img--none { background: linear-gradient(145deg, #e7f0ea, #d9e6dd); color: var(--ksb-g); }
.ksb-tile__img--undecided { display: grid; place-items: center; background: #fbf6e6; color: #a37c00; }
.ksb-tile__img--undecided .ksb-icon { width: 32px; height: 32px; stroke-width: 1.4; }
.ksb-tile__text { display: grid; flex: 1 1 auto; align-content: start; gap: 3px; padding: 10px 10px 12px; text-align: center; }
.ksb-tile__label { font: 600 13px/1.3 "Onest", sans-serif; color: var(--ksb-gd); }
.ksb-tile__text small { font-size: 11px; line-height: 1.3; color: #7c8781; }

.ksb-tile--undecided { border-style: dashed; }
.ksb-tile--undecided.is-selected { border-color: var(--ksb-y); box-shadow: 0 0 0 1px var(--ksb-y); }
.ksb-tile--undecided.is-selected > .ksb-tick { border-color: var(--ksb-y); background-color: var(--ksb-y); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B23' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }

/* «Отметьте, что нужно» — строки с галочкой */
.ksb-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ksb-checks--one { grid-template-columns: 1fr; }

.ksb-chk {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 10px 40px 10px 14px;
    border: 1.5px solid var(--ksb-line);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    line-height: 1.3;
    color: #26322c;
    transition: border-color .15s, background .15s;
}

.ksb-chk:hover { border-color: #b9c8bf; }
.ksb-chk.is-selected { border-color: var(--ksb-g); background: #f6faf7; }
.ksb-chk__text { display: grid; gap: 2px; }
.ksb-chk small { font-size: 11.5px; color: #7c8781; }
.ksb-chk--undecided { border-style: dashed; color: #6b5a1e; }
.ksb-chk--undecided.is-selected { border-color: var(--ksb-y); background: var(--ksb-yl); }
.ksb-chk--undecided.is-selected > .ksb-check { border-color: var(--ksb-y); background-color: var(--ksb-y); }

/* Значок «?» и пояснение */
.ksb-hint {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef2ef;
    color: var(--ksb-g);
    font: 700 12px Manrope, sans-serif;
    cursor: help;
}

.ksb-tile .ksb-hint { top: 8px; left: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.ksb-chk .ksb-hint { top: 50%; right: 12px; transform: translateY(-50%); }
.ksb-hint:hover,
.is-hint .ksb-hint { background: var(--ksb-g); color: #fff; }

.ksb-hint__pop {
    position: absolute;
    z-index: 6;
    display: none;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ksb-gd);
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 24px rgba(13, 43, 35, .25);
}

.ksb-tile .ksb-hint__pop { top: 36px; left: 6px; right: 6px; }
.ksb-chk .ksb-hint__pop { top: calc(100% + 6px); left: 0; right: 0; }
.is-hint .ksb-hint__pop { display: block; }

/* Прочие типы (если заведены в редакторе) */
.ksb-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #f0f3f1; }
.ksb-seg button { min-width: 96px; padding: 9px 14px; border: 0; border-radius: 999px; background: transparent; color: #4d5b54; font: 600 13px "Onest", sans-serif; cursor: pointer; }
.ksb-seg button.is-selected { background: var(--ksb-g); color: #fff; }
.ksb-num { display: flex; align-items: center; gap: 14px; }
.ksb-stepper { display: inline-grid; grid-template-columns: 44px 90px 44px; overflow: hidden; border: 1.5px solid var(--ksb-line); border-radius: 10px; background: #fff; }
.ksb-stepper button { border: 0; background: #f3f5f3; color: var(--ksb-g); font-size: 20px; cursor: pointer; }
.ksb-stepper input { width: 100%; min-height: 46px; border: 0; text-align: center; font: 700 17px Manrope, sans-serif; color: var(--ksb-gd); outline: none; -moz-appearance: textfield; }
.ksb-stepper input::-webkit-outer-spin-button,
.ksb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ksb-num__unit { font-size: 14px; color: var(--ksb-mut); }

.ksb-note { width: 100%; padding: 14px 16px; border: 1.5px solid var(--ksb-line); border-radius: 10px; background: #fff; font: 15px/1.55 "Onest", sans-serif; resize: vertical; outline: none; }
.ksb-note:focus { border-color: var(--ksb-g); }

/* --- «Что ещё для вас важно» ---------------------------------------------------------------- */

.ksb-final { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: start; }
.ksb-final .ksb-chk { min-height: 44px; }
.ksb-final__note { display: block; padding: 16px; border: 1px solid var(--ksb-line); border-radius: 10px; background: #fff; }
.ksb--inline .ksb-final__note { background: #fafaf7; }
.ksb-final__note > span { display: block; margin-bottom: 10px; font: 700 13px Manrope, sans-serif; color: var(--ksb-gd); }

/* --- Итог ----------------------------------------------------------------------------------- */

.ksb.is-summary:not(.ksb--inline) .ksb-screen { width: min(1180px, 100% - 56px); }
.ksb-sum__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ksb-sum__tools .ksb-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.ksb-sum__tools .ksb-icon { width: 18px; height: 18px; }

.ksb-sum { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.ksb-sum__list { display: grid; gap: 10px; }
.ksb-sum__list > .ksb-project { margin-top: 0; }

.ksb-checklist { margin: 0; padding: 6px 18px; border: 1px solid var(--ksb-line); border-radius: 12px; background: #fff; list-style: none; }
.ksb-checklist li { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid #f0efe9; }
.ksb-checklist li:first-child { border-top: 0; }
.ksb-checklist li > i { width: 18px; height: 18px; margin-top: 2px; border-radius: 4px; background: var(--ksb-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.ksb-checklist li.has-consult > i { background-color: var(--ksb-y); }
.ksb-checklist strong { display: block; font: 700 14px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-checklist span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #56615b; }
.ksb-checklist span::first-letter { text-transform: uppercase; }

.ksb-sum__section { padding: 14px 18px; border: 1px solid var(--ksb-line); border-radius: 12px; background: #fff; }
.ksb-sum__section.is-empty { border-style: dashed; background: transparent; }
.ksb-sum__section header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ksb-sum__section h3 { margin: 0; font: 700 14px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-sum__section.is-empty h3 { font-weight: 600; color: #7f8b85; }
.ksb-sum__note { margin: 8px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.ksb-sum__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ksb-sum__chips button { padding: 6px 11px; border: 1px solid var(--ksb-line); border-radius: 999px; background: #fff; color: #46524c; font: 500 12.5px "Onest", sans-serif; cursor: pointer; }
.ksb-sum__chips button:hover { border-color: var(--ksb-g); }
.ksb-sum__chips.is-off button { color: #8a948f; text-decoration: line-through; }

.ksb-sum__side { position: sticky; top: 20px; display: grid; gap: 10px; }
.ksb--inline .ksb-sum__side { top: 160px; }
.ksb-sum__card { padding: 24px; border-radius: 14px; background: var(--ksb-g); color: #fff; box-shadow: 0 18px 40px rgba(13, 43, 35, .18); }
.ksb-sum__card h3 { margin: 0; font: 700 22px Manrope, sans-serif; }
.ksb-sum__card > p { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.ksb-attach-btn.ks-btn { width: 100%; min-height: 50px; }
.ksb-attach-msg { margin: 10px 0 0; font-size: 12.5px; color: var(--ksb-y); }

.ksb-form { grid-template-columns: 1fr 1fr; gap: 12px; }
.ksb-form label > span { color: rgba(255, 255, 255, .7) !important; }
.ksb-form input[type="text"],
.ksb-form input[type="tel"],
.ksb-form input[type="email"] { min-height: 46px; border-color: transparent; border-radius: 8px; }
.ksb-form .ks-consent span { margin: 0 !important; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .75) !important; }
.ksb-form .ks-consent a { color: var(--ksb-y); }
.ksb-form .ks-btn { width: 100%; min-height: 50px; }
.ksb-form .ks-form-error { color: var(--ksb-ink); }
.ksb-form .ksb-copy { display: flex !important; align-items: center; gap: 10px; }
.ksb-form .ksb-copy input { width: 18px !important; min-height: 18px !important; margin: 0; accent-color: var(--ksb-y); }
.ksb-form .ksb-copy span { margin: 0 !important; font-size: 11.5px; color: rgba(255, 255, 255, .75) !important; }

/* --- Успех --------------------------------------------------------------------------------- */

.ksb-success { max-width: 560px; margin: 6vh auto 0; text-align: center; }
.ksb--inline .ksb-success { margin: 20px auto; }
.ksb-success__mark { display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--ksb-g); color: var(--ksb-y); font-size: 38px; }
.ksb-success h2 { margin: 22px 0 10px; font: 700 30px/1.1 Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-success p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ksb-mut); }
.ksb-success__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --- Форма «Рассчитать строительство»: статус брифа и предложение --------------------------- */

.ksb-reqstatus { grid-column: 1 / -1; }
.ksb-reqstatus .ksb-icon { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ksb-reqstatus__hint { margin: 0; padding: 12px 14px; border-radius: 8px; background: #f3f7f4; font-size: 12.5px; line-height: 1.5; color: #3d4d45; }
.ksb-reqstatus__ok { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; background: #e7f2ea; font-size: 13px; color: #173d32; }
.ksb-reqstatus__ok span { flex: 1 1 auto; font-weight: 600; }
.ksb-reqstatus .ksb-link { padding: 0; border: 0; background: none; color: #173d32; font: 600 12.5px "Onest", sans-serif; text-decoration: underline; cursor: pointer; }
.ksb-nudge { padding: 16px 18px; border: 1px solid #f0d98a; border-radius: 10px; background: #fffaeb; }
.ksb-nudge strong { display: block; font: 700 15px Manrope, sans-serif; color: #07352a; }
.ksb-nudge p { margin: 6px 0 12px; font-size: 13px; line-height: 1.5; color: #4c4430; }
.ksb-nudge > div { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ksb-nudge .ks-btn { min-height: 44px; }
.ksb-nudge__plain.ks-btn { background: #fff; }
.ksb-nudging [type="submit"] { display: none !important; }

/* --- Адаптив ---------------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .ksb-sum { grid-template-columns: 1fr; }
    .ksb-sum__side { position: static; }
    .ksb-overview,
    .ksb-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ksb-top__row,
    .ksb-top__progress { width: calc(100% - 28px); }
    .ksb-top__meta,
    .ksb-top__phone span { display: none; }
    .ksb-top__phone { margin-left: auto; }
    .ksb--page .ksb-top { position: relative; }
    .ksb-screen { width: calc(100% - 28px); padding: 22px 0 26px; }
    .ksb--inline { margin-left: -14px; margin-right: -14px; border-radius: 0; border-left: 0; border-right: 0; }
    .ksb--inline .ksb-screen { padding: 18px 16px 22px; }
    .ksb-inline-top { padding: 14px 16px 0; }
    .ksb-start,
    .ksb-modes,
    .ksb-final { grid-template-columns: 1fr; }
    .ksb-start__img { order: -1; min-height: 190px; }
    .ksb-start__copy { padding: 24px 20px; }
    .ksb-start__points { grid-template-columns: 1fr; }
    .ksb-start__points li { grid-template-columns: 26px 1fr; align-items: center; }
    .ksb-start__actions .ks-btn { width: 100%; }
    .ksb-overview,
    .ksb-checks { grid-template-columns: 1fr; }
    .ksb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ksb-nav,
    .ksb--inline .ksb-nav { padding: 10px 14px; gap: 10px; }
    .ksb-nav__hint > span:last-child { display: none; }
    .ksb-nav__steps { flex-wrap: nowrap; gap: 3px; }
    .ksb-nav__steps i { width: 5px; }
    .ksb-nav__steps i.is-current { width: 12px; }
    .ksb-nav__next.ks-btn { flex: 0 0 auto; min-width: 120px; padding: 0 18px; white-space: nowrap; }
    .ksb-form { grid-template-columns: 1fr; }
    .ksb-project { grid-template-columns: 72px 1fr; }
    .ksb-project img,
    .ksb-project .ksb-project__ph { width: 72px; height: 54px; }
    .ksb-sum__top { flex-direction: column; }
}

/* --- Печать: «Лист комплектации» --------------------------------------------------------------- */

.ksb-print,
#ksb-print-host { display: none; }

@media print {
    html.ksb-printing body > *:not(#ksb-print-host) { display: none !important; }
    html.ksb-printing,
    html.ksb-printing body { overflow: visible !important; height: auto !important; background: #fff !important; }
    html.ksb-printing #ksb-print-host { display: block !important; }

    #ksb-print-host .ksb-print__doc { font: 10.5pt/1.45 Arial, sans-serif; color: #000; }
    #ksb-print-host header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #173d32; }
    #ksb-print-host header strong { font-size: 14pt; color: #173d32; }
    #ksb-print-host .obj { margin: 0 0 12px; }
    #ksb-print-host section { margin: 0 0 10px; break-inside: avoid; }
    #ksb-print-host h3 { margin: 10px 0 4px; padding-bottom: 2px; border-bottom: 1px solid #ccc; font-size: 11pt; color: #173d32; }
    #ksb-print-host table { width: 100%; border-collapse: collapse; }
    #ksb-print-host td { padding: 2px 8px 2px 0; vertical-align: top; }
    #ksb-print-host td:first-child { width: 42%; color: #555; }
    #ksb-print-host ul { margin: 2px 0 0 16px; padding: 0; }
    #ksb-print-host .is-consult h3 { color: #8a6500; }
    #ksb-print-host .muted,
    #ksb-print-host .muted h3 { color: #666; }
    #ksb-print-host .note { white-space: pre-line; }
    #ksb-print-host footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #ccc; font-size: 9pt; color: #666; }
    @page { size: A4; margin: 14mm; }
}

/* ==========================================================================
   Ревизия 4: раздел = главная группа фотоплашек + «Дополнительные опции»
   ========================================================================== */

/* Экран брифа одной ширины во всех режимах — разделы выглядят одинаково */
.ksb--inline .ksb-screen { max-width: 1060px; margin: 0 auto; padding: 22px 30px 28px; }
.ksb--inline.is-start .ksb-screen,
.ksb--inline.is-summary .ksb-screen { max-width: none; }
.ksb--inline.is-start .ksb-screen { padding: 0; }

/* Одинаковая высота экранов разделов — кнопки «Назад / Далее» не прыгают */
.ksb-step--section { min-height: 560px; }

.ksb-group--main .ksb-group__head { margin-bottom: 14px; }

/* Плашки: колонки задаются количеством, высота у всех одна */
.ksb-tiles {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: 12px;
}

.ksb-tile { height: 100%; }
.ksb-tile__img { flex: 0 0 auto; height: 148px; aspect-ratio: auto; }
.ksb-tile__text { min-height: 60px; align-content: center; padding: 10px 12px; }
.ksb-tile__label { font-size: 13.5px; }

/* Блок дополнительных опций */
.ksb-extras { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--ksb-line); }
.ksb-extras__title { margin-bottom: 14px; font: 800 11px Manrope, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a938e; }
.ksb-extra + .ksb-extra { margin-top: 16px; }
.ksb-extra h4 { margin: 0 0 10px; font: 700 14px Manrope, sans-serif; color: var(--ksb-gd); }
.ksb-extra--row { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; }
.ksb-extra--row h4 { margin: 0; }

.ksb-extras .ksb-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ksb-extras .ksb-chk { min-height: 42px; padding: 8px 38px 8px 12px; font-size: 13.5px; }

.ksb-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ksb-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--ksb-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13.5px;
    color: #26322c;
    transition: .15s;
}

.ksb-chip:hover { border-color: #b9c8bf; }
.ksb-chip.is-selected { border-color: var(--ksb-g); background: var(--ksb-g); color: #fff; }
.ksb-chip--undecided { border-style: dashed; color: #6b5a1e; }
.ksb-chip--undecided.is-selected { border-style: solid; border-color: var(--ksb-y); background: var(--ksb-yl); color: #5c4600; }
.ksb-chip .ksb-hint { position: static; width: 18px; height: 18px; font-size: 11px; }
.ksb-chip.is-selected .ksb-hint { background: rgba(255, 255, 255, .2); color: #fff; }
.ksb-chip .ksb-hint__pop { top: calc(100% + 6px); left: 0; width: 260px; }

@media (max-width: 1100px) {
    .ksb-extras .ksb-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ksb-extra--row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
    .ksb-step--section { min-height: 0; }
    .ksb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ksb-tile__img { height: 110px; }
    .ksb-tile__text { min-height: 54px; }
    .ksb--inline .ksb-screen { padding: 18px 16px 22px; }
    .ksb-extras .ksb-checks { grid-template-columns: 1fr; }
}
/* В два ряда плашки чуть ниже — экран раздела остаётся той же высоты */
.ksb-tiles[data-rows="2"] .ksb-tile__img { height: 116px; }
.ksb-tiles[data-rows="2"] .ksb-tile__text { min-height: 52px; }
@media (max-width: 760px) { .ksb-tiles[data-rows="2"] .ksb-tile__img { height: 110px; } }
/* Высота самого длинного раздела стартового состава: все экраны одного размера */
.ksb-step--section { min-height: 672px; }
@media (max-width: 760px) { .ksb-step--section { min-height: 0; } }
.ksb--inline .ksb-screen { width: 100%; }

/* ==========================================================================
   Ревизия 5: ровные ряды при любом количестве плашек, иконки, «обсудить»
   ========================================================================== */

.ksb-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ksb-tile {
    flex: 0 0 calc((100% - (var(--cols, 4) - 1) * 12px) / var(--cols, 4));
    max-width: calc((100% - (var(--cols, 4) - 1) * 12px) / var(--cols, 4));
}

/* Иконка плашки — пока нет фото */
.ksb-tile__img--none { color: #8fa398; background: linear-gradient(160deg, #f4f5f1, #e8ede9); }
.ksb-tile__img--none .ksb-icon { width: 42px; height: 42px; stroke-width: 1.3; }
.ksb-tiles[data-rows="2"] .ksb-tile__img--none .ksb-icon,
.ksb-tiles[data-rows="3"] .ksb-tile__img--none .ksb-icon { width: 36px; height: 36px; }
.ksb-tiles[data-rows="3"] .ksb-tile__img { height: 100px; }
.ksb-tiles[data-rows="3"] .ksb-tile__text { min-height: 50px; }

.ksb-sum__consult-block { border-color: #f0d98a; background: #fffaeb; }
.ksb-sum__consult-block h3 { color: #5c4600; }
.ksb-sum__consult-block ul { margin: 8px 0 0; padding: 0; list-style: none; }
.ksb-sum__consult-block li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #f3e6b8; font-size: 13.5px; color: #4c4430; }
.ksb-sum__consult-block li:first-child { border-top: 0; }

@media (max-width: 760px) {
    .ksb-tiles { --cols: 2 !important; gap: 8px; }
    .ksb-tile { flex-basis: calc((100% - 8px) / 2); max-width: calc((100% - 8px) / 2); }
}
.ksb-step--section { min-height: 690px; }
@media (max-width: 760px) { .ksb-step--section { min-height: 0; } }


/* ==========================================================================
   Правки 23.09: вводный экран высотой как карточки разделов, воздух вокруг,
   плитки разделов — ровные ряды с центрированием неполного
   ========================================================================== */

.ksb--inline { margin: 64px 0 64px; }
.ksb--inline.is-start .ksb-start--inline { min-height: 849px; }
.ksb-start--inline .ksb-start__copy { padding: 56px 56px; }

.ksb-overview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.ksb-ov {
    flex: 0 0 calc((100% - (var(--ov-cols, 3) - 1) * 8px) / var(--ov-cols, 3));
    max-width: calc((100% - (var(--ov-cols, 3) - 1) * 8px) / var(--ov-cols, 3));
}

@media (max-width: 1100px) {
    .ksb-overview { --ov-cols: 2 !important; }
}

@media (max-width: 760px) {
    .ksb--inline { margin: 36px -14px; }
    .ksb--inline.is-start .ksb-start--inline { min-height: 0; }
    .ksb-start--inline .ksb-start__copy { padding: 26px 20px; }
    .ksb-overview { --ov-cols: 1 !important; }
}
/* Плитки разделов и «Что ещё важно» — той же высоты, что и карточки разделов */
.ksb-step--overview,
.ksb-step--final { min-height: 690px; }
@media print { #ksb-print-host p { margin: 3px 0; } }
@media (max-width: 760px) { .ksb-step--overview, .ksb-step--final { min-height: 0; } }

/* ==========================================================================
   Правки 23.09 (2): вводный экран с фото на фоне, блок уже полотна сайта,
   сдержанные углы у всех плашек — как у кнопок сайта
   ========================================================================== */

/* Встроенный бриф чуть уже основного полотна, с воздухом сверху и снизу */
.ksb--inline {
    max-width: 1180px;
    margin: 72px auto;
    border-radius: 6px;
}

/* --- Вводный экран --------------------------------------------------------- */

.ksb--inline.is-start { overflow: hidden; }

.ksb-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 849px;
    overflow: hidden;
    background: #e9ece6;
}

.ksb--overlay .ksb-hero,
.ksb--page .ksb-hero { min-height: 520px; border-radius: 6px; box-shadow: 0 10px 30px rgba(13, 43, 35, .06); }

.ksb-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.ksb-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(247, 245, 239, .97) 0%,
        rgba(247, 245, 239, .94) 30%,
        rgba(247, 245, 239, .72) 46%,
        rgba(247, 245, 239, .18) 64%,
        rgba(247, 245, 239, 0) 78%);
}

.ksb-hero--nophoto { background: linear-gradient(120deg, #f7f5ef 0%, #eef1ec 55%, #dfe7e1 100%); }
.ksb-hero--nophoto .ksb-hero__shade { display: none; }

.ksb-hero__copy {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding: 64px 0 64px 72px;
}

.ksb-hero__copy .ksb-eyebrow { margin-bottom: 18px; }

.ksb-hero__copy h2 {
    margin: 0 0 18px;
    font: 700 clamp(30px, 3.2vw, 44px)/1.06 Manrope, sans-serif;
    letter-spacing: -.035em;
    color: var(--ksb-gd);
}

.ksb-hero__copy > p { margin: 0; max-width: 470px; font-size: 16px; line-height: 1.65; color: #4f5a54; }
.ksb-hero .ksb-start__points { margin-top: 30px; max-width: 480px; }
.ksb-hero .ksb-start__points li { color: #34413a; }
.ksb-hero .ksb-start__actions { margin-top: 34px; }
.ksb-hero .ksb-start__actions span { color: #5b665f; }

/* --- Сдержанные углы ----------------------------------------------------------- */

.ksb-tile,
.ksb-chk,
.ksb-chip,
.ksb-ov,
.ksb-mode,
.ksb-project,
.ksb-search input,
.ksb-search__item,
.ksb-sum__section,
.ksb-checklist,
.ksb-final__note,
.ksb-note,
.ksb-stepper,
.ksb-reqstatus__hint,
.ksb-reqstatus__ok,
.ksb-nudge,
.ksb-hint__pop { border-radius: 4px; }

.ksb-tile__img { border-radius: 3px 3px 0 0; }
.ksb-sum__card { border-radius: 6px; }
.ksb-head__icon,
.ksb-head__img,
.ksb-mode__icon,
.ksb-ov__pic { border-radius: 4px; }
.ksb-project img,
.ksb-project .ksb-project__ph,
.ksb-search__item img { border-radius: 3px; }
.ksb-check { border-radius: 3px; }
.ksb-tick { border-radius: 3px; }
.ksb-seg,
.ksb-seg button { border-radius: 4px; }
.ksb-sum__chips button { border-radius: 4px; }
.ksb-nav__steps i { border-radius: 1px; }
.ksb-top__bar,
.ksb-top__bar i { border-radius: 2px; }

@media (max-width: 760px) {
    .ksb--inline { margin: 40px -14px; border-radius: 0; }
    .ksb-hero { display: block; min-height: 0; }
    .ksb-hero__bg { position: relative; height: 240px; }
    .ksb-hero__shade { display: none; }
    .ksb-hero__copy { width: 100%; padding: 24px 20px 28px; background: #f7f5ef; }
    .ksb--overlay .ksb-hero,
    .ksb--page .ksb-hero { min-height: 0; }
}