/* framework-module: styles | version: 427fdc502e22 | copied: 2026-10-22 | источник framework/shared/styles — правки здесь остаются в проекте */
/* ===================================================
   shared/styles/components.css — каталог компонентов сайта
   Только var(--…) из tokens.css. Фича берёт вид отсюда и не объявляет эти
   классы заново (arch_check: css_component_redefine). Нужен новый компонент —
   его добавляет designer по секции «### Design Changes» плана.
   Перечень с назначением — CLAUDE.md модуля, живой вид — showcase.html.
   Вёрстка от телефона (360) вверх: 768 — планшет, 1280 — десктоп.
   =================================================== */

/* ===================================================
   Кнопки: .btn + модификатор вида и размера
   =================================================== */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    height:          var(--control-h);
    padding:         0 var(--space-5);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-semibold);
    line-height:     var(--lh-snug);
    white-space:     nowrap;
    text-decoration: none;
    color:           var(--color-text);
    background:      var(--color-bg);
    border:          1px solid var(--color-border-strong);
    border-radius:   var(--radius-md);
    transition:      background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover    { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; pointer-events: none; }
/* Главное действие — единственное место акцента */
.btn--primary {
    background:   var(--color-accent);
    border-color: var(--color-accent);
    color:        var(--color-on-accent);
}
.btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-on-accent); }
/* Вторая кнопка рядом с главной: прозрачная, тонкая тёмная рамка */
.btn--ghost {
    background:   transparent;
    border-color: var(--color-text);
    color:        var(--color-text);
}
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--danger {
    background:   var(--color-bg);
    border-color: var(--color-danger);
    color:        var(--color-danger);
}
.btn--danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.btn--sm   { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--sm.btn--icon { width: var(--control-h-sm); }

/* ===================================================
   Hero: первый экран страницы с единственным <h1>
   =================================================== */
.hero { padding: var(--space-8) 0; }
.hero__title {
    max-width:      var(--title-max);
    font-size:      var(--fs-xl);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color:          var(--color-text);
}
.hero__subtitle {
    max-width:  var(--text-max);
    margin-top: var(--space-5);
    font-size:  var(--fs-md);
    color:      var(--color-text-muted);
}
.hero__actions {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    margin-top:     var(--space-7);
}
/* Бейджи над заголовком (страница кейса): отрасль, область */
.hero__badges {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-4);
}

/* ===================================================
   Секция блока: тонкая линия сверху, h2, лёгкое появление
   =================================================== */
.site-section {
    padding:    var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    animation:  reveal var(--reveal-duration) ease-out both;
}
.site-section__title {
    max-width:      var(--title-max);
    margin-bottom:  var(--space-6);
    font-size:      var(--fs-lg);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

/* ===================================================
   Сетка карточек: «What we automate». Вся карточка — ссылка
   через заголовок (растянутая ссылка).
   360 — 1 колонка, 768 — 2, 1280 — 3+2
   =================================================== */
.card-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
    list-style:            none;
}
.card-grid__item {
    position:      relative;
    display:       flex;
    flex-direction: column;
    padding:       var(--space-6);
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition:    border-color var(--transition), background var(--transition);
}
/* Тёмная рамка — только у карточки со ссылкой: карточка без ссылки не притворяется кликабельной */
.card-grid__item:has(.card-grid__title a):hover { border-color: var(--color-text); }
.card-grid__item:focus-within { border-color: var(--color-text); }
.card-grid__title {
    font-size:   var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.card-grid__title a { color: var(--color-text); text-decoration: none; }
.card-grid__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.card-grid__title a:focus-visible { outline: none; }
.card-grid__title a:focus-visible::after { outline: var(--border-thick) solid var(--color-focus); outline-offset: var(--space-05); }
.card-grid__item:hover .card-grid__title a {
    text-decoration:       underline;
    text-decoration-color: var(--color-accent);
}
.card-grid__text {
    margin-top: var(--space-3);
    font-size:  var(--fs-sm);
    color:      var(--color-text-muted);
}
/* Цена («$300»): прижата к низу — в ряду, где цена только у одной карточки, низ строк ровный.
   Обычный цвет текста: акцент текстом не красим — он только у главной кнопки */
.card-grid__price {
    margin-top:  auto;
    padding-top: var(--space-4);
    font-size:   var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    color:       var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ===================================================
   Карточки кейсов: бейджи, заголовок, summary, «Read the case →».
   Вся карточка — ссылка через растянутую a.case-grid__link внизу.
   360 — 1 колонка, 768 — 2, 1280 — 3 в ряд (главная); ровно 4 — 2×2 (/cases)
   =================================================== */
.case-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
    list-style:            none;
}
.case-grid__item {
    position:       relative;
    display:        flex;
    flex-direction: column;
    padding:        var(--space-6);
    background:     var(--color-bg);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius-md);
    transition:     border-color var(--transition);
}
.case-grid__item:hover,
.case-grid__item:focus-within { border-color: var(--color-text); }
.case-grid__badges {
    display:       flex;
    flex-wrap:     wrap;
    gap:           var(--space-2);
    margin-bottom: var(--space-4);
}
.case-grid__title {
    font-size:   var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.case-grid__text {
    margin-top:    var(--space-3);
    margin-bottom: var(--space-5);
    font-size:     var(--fs-sm);
    color:         var(--color-text-muted);
}
.case-grid__link {
    align-self:      flex-start;
    margin-top:      auto;
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-semibold);
    line-height:     var(--lh-snug);
    color:           var(--color-text);
    text-decoration: none;
}
.case-grid__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.case-grid__link:focus-visible { outline: none; }
.case-grid__link:focus-visible::after { outline: var(--border-thick) solid var(--color-focus); outline-offset: var(--space-05); }
.case-grid__item:hover .case-grid__link {
    text-decoration:       underline;
    text-decoration-color: var(--color-accent);
}

/* ===================================================
   Страница кейса: раздел, факты, теги стека, callout, скриншоты
   =================================================== */
/* Раздел: линия как у .site-section, поля меньше — разделов девять подряд */
.case-section {
    padding:    var(--space-7) 0;
    border-top: 1px solid var(--color-border);
    animation:  reveal var(--reveal-duration) ease-out both;
}
.case-section__title {
    max-width:      var(--title-max);
    margin-bottom:  var(--space-4);
    font-size:      var(--fs-lg);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

/* Плашки фактов: вид бейджа, но длинный текст переносится.
   Телефон — столбик, от 768 — в ряд с переносом */
.fact-list {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-2);
    list-style:     none;
}
.fact-list__item {
    max-width:     100%;
    padding:       var(--space-2) var(--space-3);
    font-family:   var(--font-mono);
    font-size:     var(--fs-xs);
    font-weight:   var(--fw-medium);
    line-height:   var(--lh-snug);
    color:         var(--color-text);
    background:    var(--color-surface-2);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}

/* Теги стека: ряд .badge без маркеров */
.tag-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-2);
    list-style: none;
}

/* Callout: главная мысль кейса — светлая подложка и тёмная линия слева,
   цвет текста обычный */
.callout {
    max-width:     var(--text-max);
    padding:       var(--space-5);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-left:   var(--border-thick) solid var(--color-text);
    border-radius: var(--radius-md);
}
.callout__title {
    font-size:   var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.callout__text {
    margin-top:  var(--space-2);
    font-size:   var(--fs-md);
    line-height: var(--lh-base);
}

/* Скриншоты: столбиком, тонкая рамка, не шире контейнера, без увеличения */
.case-shots {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}
.case-shots__item img {
    width:         auto;
    max-width:     100%;
    height:        auto;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* ===================================================
   Дисклеймер: мелкий приглушённый текст под сеткой кейсов и внизу кейса
   =================================================== */
.disclaimer { padding: var(--space-6) 0; }
.disclaimer__text {
    max-width:   var(--text-max);
    font-size:   var(--fs-xs);
    line-height: var(--lh-base);
    color:       var(--color-text-muted);
}

/* ===================================================
   Шаги: «How we work» — номер моноширинным, тонкая тёмная линия сверху
   =================================================== */
.steps {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-7);
    list-style:            none;
}
.steps__item { padding-top: var(--space-4); border-top: 1px solid var(--color-text); }
.steps__num {
    display:     block;
    font-family: var(--font-mono);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-medium);
    color:       var(--color-text-muted);
}
.steps__title {
    margin-top:  var(--space-3);
    font-size:   var(--fs-lg);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.steps__text {
    margin-top: var(--space-2);
    font-size:  var(--fs-sm);
    color:      var(--color-text-muted);
}

/* ===================================================
   Принципы: плашки на светлой подложке; три — в ряд, четыре — 2×2
   =================================================== */
.principles {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-4);
    list-style:            none;
}
.principles__item {
    padding:       var(--space-6);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.principles__title {
    font-size:   var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}
.principles__text {
    margin-top: var(--space-2);
    font-size:  var(--fs-sm);
    color:      var(--color-text-muted);
}

/* ===================================================
   Финальный CTA: тёмная полоса во всю ширину
   =================================================== */
.cta-band {
    padding:    var(--space-8) 0;
    color:      var(--color-on-dark);
    background: var(--color-surface-dark);
    animation:  reveal var(--reveal-duration) ease-out both;
}
.cta-band__title {
    max-width:      var(--title-max);
    font-size:      var(--fs-lg);
    font-weight:    var(--fw-semibold);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color:          var(--color-on-dark);
}
.cta-band__text {
    max-width:  var(--text-max);
    margin-top: var(--space-4);
    font-size:  var(--fs-md);
    color:      var(--color-on-dark-muted);
}
.cta-band__actions {
    display:    flex;
    flex-wrap:  wrap;
    gap:        var(--space-3);
    margin-top: var(--space-7);
}
.cta-band :focus-visible { outline-color: var(--color-on-dark); }

/* ===================================================
   Текст: абзацы и список (404, thank-you, позже Privacy и Terms)
   =================================================== */
.prose {
    max-width:     var(--text-max);
    font-size:     var(--fs-md);
    line-height:   var(--lh-base);
    overflow-wrap: anywhere;
}
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-8); font-size: var(--fs-lg); }
.prose h3 { margin-top: var(--space-6); }
.prose ul,
.prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-text-muted); }
.prose strong { font-weight: var(--fw-semibold); }

/* ===================================================
   Реквизиты компании: четыре строки обычным текстом страницы, email — ссылка.
   Размер и цвет как у абзаца .prose: банк читает их, а не ищет мелкий шрифт
   =================================================== */
.company-details {
    font-size:     var(--fs-md);
    font-style:    normal;
    line-height:   var(--lh-base);
    color:         var(--color-text);
    overflow-wrap: anywhere;
}
.company-details__line + .company-details__line { margin-top: var(--space-1); }
.company-details__line:first-child { font-weight: var(--fw-semibold); color: var(--color-text); }

/* ===================================================
   Фото + текст: портрет узкой колонкой слева, текст справа (/about).
   Телефон — фото над текстом, не во всю ширину. Фото нет (figure не выведен) —
   текст во всю ширину, пустой колонки нет: колонки только при :has(фото)
   =================================================== */
.media-text {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    gap:                   var(--space-6);
}
.media-text__photo {
    width:     60%;
    max-width: var(--portrait-max);
}
.media-text__photo img {
    width:         100%;
    height:        auto;
    background:    var(--color-surface);
    border-radius: var(--radius-md);
}
.media-text__body { min-width: 0; }

/* ===================================================
   Бейдж: метка, тег стека — моноширинным
   =================================================== */
.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    padding:       var(--space-05) var(--space-2);
    font-family:   var(--font-mono);
    font-size:     var(--fs-xs);
    font-weight:   var(--fw-medium);
    line-height:   var(--lh-base);
    white-space:   nowrap;
    color:         var(--color-text);
    background:    var(--color-surface-2);
    border-radius: var(--radius-sm);
}
.badge--accent  { color: var(--color-text);    background: var(--color-accent-soft); }
.badge--success { color: var(--color-success); background: var(--color-success-bg); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-bg); }
.badge--danger  { color: var(--color-danger);  background: var(--color-danger-bg); }

/* ===================================================
   Карточка: подложка формы и отдельного блока
   =================================================== */
.card {
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-5);
    border-bottom:   1px solid var(--color-border);
}
.card__title  { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.card__body   { padding: var(--space-5); }
.card__footer {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-5);
    border-top:      1px solid var(--color-border);
}

/* ===================================================
   Таблица данных
   =================================================== */
.table-scroll {
    overflow-x:    auto;
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--fs-sm);
}
.data-table th {
    padding:        var(--space-2) var(--space-4);
    font-family:    var(--font-mono);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-medium);
    text-align:     left;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    white-space:    nowrap;
    color:          var(--color-text-muted);
    background:     var(--color-surface);
    border-bottom:  1px solid var(--color-border);
}
.data-table td {
    padding:        var(--space-3) var(--space-4);
    vertical-align: top;
    border-bottom:  1px solid var(--color-border);
}
.data-table tr:last-child td  { border-bottom: none; }
.data-table tr.is-selected td { background: var(--color-accent-soft); }
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===================================================
   Таблица сравнения: «критерий × 2–3 варианта», слова без чисел (/technology).
   Секция продолжает предыдущую: без линии и верхнего поля.
   Телефон — каждая строка плашкой, шапка скрыта, подпись колонки из data-label;
   от 768 — обычная таблица в рамке. Прокрутки вбок нет нигде
   =================================================== */
.compare-section {
    padding:   0 0 var(--space-8);
    animation: reveal var(--reveal-duration) ease-out both;
}
.compare-table {
    display:     block;
    width:       100%;
    font-size:   var(--fs-sm);
    line-height: var(--lh-base);
}
/* Шапка колонок на телефоне скрыта от глаз, но остаётся для чтения с экрана */
.compare-table thead {
    position:    absolute;
    width:       1px;
    height:      1px;
    overflow:    hidden;
    clip:        rect(0 0 0 0);
    white-space: nowrap;
}
.compare-table tbody {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}
.compare-table__row {
    display:       block;
    padding:       var(--space-4);
    background:    var(--color-bg);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.compare-table__label {
    display:     block;
    font-size:   var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    text-align:  left;
    color:       var(--color-text);
}
.compare-table__cell {
    display:       block;
    margin-top:    var(--space-3);
    color:         var(--color-text);
    overflow-wrap: anywhere;
}
/* Подпись колонки над значением: мелкая, моноширинная, приглушённая */
.compare-table__cell::before {
    content:        attr(data-label);
    display:        block;
    margin-bottom:  var(--space-05);
    font-family:    var(--font-mono);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-medium);
    line-height:    var(--lh-snug);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color:          var(--color-text-muted);
}

/* ===================================================
   Формы: поле с подписью, ввод
   =================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--field-min), 100%), 1fr));
    gap:                   var(--space-5);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text); }
.field__hint  { font-size: var(--fs-xs); color: var(--color-text-muted); }
.field__error { font-size: var(--fs-xs); color: var(--color-danger); }

.input {
    width:         100%;
    height:        var(--control-h);
    padding:       0 var(--space-3);
    font-size:     var(--fs-md);
    color:         var(--color-text);
    background:    var(--color-bg);
    border:        1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline:       none;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
textarea.input { height: auto; min-height: var(--textarea-h); padding: var(--space-3); resize: vertical; line-height: var(--lh-base); }
.input:hover    { border-color: var(--color-text-muted); }
.input:focus    { border-color: var(--color-accent); box-shadow: 0 0 0 var(--space-1) var(--color-focus); }
.input--error,
.input--error:hover { border-color: var(--color-danger); }
.input:disabled { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border); }
.input--sm { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--fs-sm); }

/* Галочка с подписью (согласие на /contact): квадратик слева, выровнен по первой
   строке подписи; подпись переносится. Нажимается и подпись (label for): вместе с
   полями сверху и снизу ряд не ниже пальца. Ошибка — строкой на всю ширину */
.field--check {
    display:               grid;
    grid-template-columns: var(--icon-size) minmax(0, 1fr);
    gap:                   0;
    align-items:           start;
}
.field--check .field__label {
    padding:     var(--space-2) 0 var(--space-2) var(--space-3);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    cursor:      pointer;
}
.field--check .field__error { grid-column: 1 / -1; }
.checkbox {
    appearance:    none;
    width:         var(--icon-size);
    height:        var(--icon-size);
    /* центр квадратика — на середине первой строки подписи */
    margin:        calc(var(--space-2) + (var(--fs-sm) * var(--lh-base) - var(--icon-size)) / 2) 0 0;
    background:    var(--color-bg) center / 100% no-repeat;
    border:        1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor:        pointer;
    transition:    background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
/* Наведение — и на квадратик, и на подпись */
.field--check:hover .checkbox:enabled { border-color: var(--color-text-muted); }
.checkbox:checked {
    background-color: var(--color-accent);
    background-image: var(--icon-check);
    border-color:     var(--color-accent);
}
.field--check:hover .checkbox:checked:enabled { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.checkbox--error:not(:checked),
.field--check:hover .checkbox--error:not(:checked) { border-color: var(--color-danger); }
.checkbox:focus-visible,
.field--check:hover .checkbox:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 var(--space-1) var(--color-focus); }
.checkbox:disabled { opacity: var(--opacity-disabled); cursor: default; }
.checkbox:disabled + .field__label { color: var(--color-text-muted); cursor: default; }

/* ===================================================
   Модальное окно: .modal[hidden] скрыто
   =================================================== */
.modal {
    position:        fixed;
    inset:           0;
    z-index:         var(--z-modal);
    display:         flex;
    align-items:     flex-end;
    justify-content: center;
    background:      var(--color-overlay);
}
.modal__dialog {
    display:        flex;
    flex-direction: column;
    width:          100%;
    max-height:     var(--sheet-max-h);
    background:     var(--color-bg);
    border-radius:  var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow:     var(--shadow-lg);
}
.modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-5);
    border-bottom:   1px solid var(--color-border);
}
.modal__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
/* Крестик в шапке — тихий: без рамки, чтобы не спорить с кнопками подвала */
.modal__header .btn--icon {
    font-size:    var(--fs-lg);
    font-weight:  var(--fw-regular);
    color:        var(--color-text-muted);
    background:   transparent;
    border-color: transparent;
}
.modal__header .btn--icon:hover { color: var(--color-text); background: var(--color-surface-hover); }
.modal__body  { padding: var(--space-5); overflow-y: auto; }
.modal__footer {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: flex-end;
    gap:             var(--space-3);
    padding:         var(--space-4) var(--space-5);
    border-top:      1px solid var(--color-border);
}

/* ===================================================
   Сообщения: пустое состояние, плашка
   =================================================== */
.empty-state {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-3);
    padding:        var(--space-8) var(--space-4);
    text-align:     center;
    color:          var(--color-text-muted);
}
.empty-state__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.empty-state__text  { max-width: var(--text-max); font-size: var(--fs-sm); }

.alert {
    padding:       var(--space-3) var(--space-4);
    font-size:     var(--fs-sm);
    color:         var(--color-text);
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-left:   var(--border-thick) solid var(--color-text-muted);
    border-radius: var(--radius-md);
}
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-bg); border-left-color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-bg); border-left-color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-bg);  border-left-color: var(--color-danger); }

/* ===================================================
   Планшет
   =================================================== */
@media (min-width: 768px) {
    .hero { padding: var(--space-10) 0 var(--space-9); }
    .hero__title { font-size: var(--fs-2xl); }
    .hero__subtitle { font-size: var(--fs-lg); line-height: var(--lh-snug); }
    .hero__actions { flex-direction: row; flex-wrap: wrap; }

    .site-section { padding: var(--space-9) 0; }
    .site-section__title { margin-bottom: var(--space-7); font-size: var(--fs-xl); }

    .card-grid { grid-template-columns: repeat(2, 1fr); }
    .case-grid { grid-template-columns: repeat(2, 1fr); }
    .case-section { padding: var(--space-8) 0; }
    .case-section__title { margin-bottom: var(--space-5); }
    .fact-list { flex-direction: row; flex-wrap: wrap; }
    .callout { padding: var(--space-6); }
    .disclaimer { padding: var(--space-7) 0; }
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
    .principles { grid-template-columns: repeat(3, 1fr); }
    /* Ровно четыре принципа (/about) — по два в ряд, как сетка кейсов */
    .principles:has(> .principles__item:first-child:nth-last-child(4)) { grid-template-columns: repeat(2, 1fr); }

    /* Фото + текст: фото — треть, но не шире портрета; текст справа по верху */
    .media-text:has(> .media-text__photo) {
        grid-template-columns: min(33%, var(--portrait-max)) minmax(0, 1fr);
        align-items:           start;
        gap:                   var(--space-8);
    }
    .media-text__photo { width: 100%; max-width: none; }

    /* Таблица сравнения: обычная таблица в тонкой рамке, критерий — четверть ширины */
    .compare-section { padding-bottom: var(--space-9); }
    .compare-table {
        display:         table;
        table-layout:    fixed;
        border-collapse: separate;
        border-spacing:  0;
        overflow:        hidden;
        background:      var(--color-bg);
        border:          1px solid var(--color-border);
        border-radius:   var(--radius-md);
    }
    .compare-table thead {
        display:     table-header-group;
        position:    static;
        width:       auto;
        height:      auto;
        overflow:    visible;
        clip:        auto;
        white-space: normal;
    }
    .compare-table tbody { display: table-row-group; }
    .compare-table__row { display: table-row; padding: 0; border: 0; border-radius: 0; }
    .compare-table__corner,
    .compare-table__col {
        padding:        var(--space-3) var(--space-5);
        font-size:      var(--fs-sm);
        font-weight:    var(--fw-semibold);
        line-height:    var(--lh-snug);
        text-align:     left;
        vertical-align: bottom;
        color:          var(--color-text);
        background:     var(--color-surface);
        border-bottom:  1px solid var(--color-border);
    }
    .compare-table__corner { width: 25%; }
    .compare-table__label,
    .compare-table__cell {
        display:        table-cell;
        margin-top:     0;
        padding:        var(--space-4) var(--space-5);
        font-size:      var(--fs-sm);
        vertical-align: top;
    }
    .compare-table__row + .compare-table__row > * { border-top: 1px solid var(--color-border); }
    .compare-table__cell::before { content: none; }

    .cta-band__title { font-size: var(--fs-xl); }

    .modal { align-items: center; padding: var(--space-4); }
    .modal__dialog { max-width: var(--modal-max); max-height: calc(100vh - 2 * var(--space-6)); border-radius: var(--radius-lg); }
    .modal__dialog--wide { max-width: var(--modal-wide-max); }
}

/* ===================================================
   Десктоп: карточки 3+2 — последние две строки делят ряд пополам
   =================================================== */
@media (min-width: 1280px) {
    .site-section { padding: var(--space-10) 0; }

    .card-grid { grid-template-columns: repeat(6, 1fr); }
    .card-grid__item { grid-column: span 2; }
    .card-grid__item:nth-child(3n+1):nth-last-child(2),
    .card-grid__item:nth-child(3n+2):nth-last-child(1) { grid-column: span 3; }

    /* Кейсы: три в ряд; ровно четыре (или две) — по две в ряд, 2×2 */
    .case-grid { grid-template-columns: repeat(6, 1fr); }
    .case-grid__item { grid-column: span 2; }
    .case-grid__item:first-child:nth-last-child(4),
    .case-grid__item:first-child:nth-last-child(4) ~ .case-grid__item,
    .case-grid__item:first-child:nth-last-child(2),
    .case-grid__item:first-child:nth-last-child(2) ~ .case-grid__item { grid-column: span 3; }

    .steps { gap: var(--space-8); }
    .compare-section { padding-bottom: var(--space-10); }
    .cta-band { padding: var(--space-10) 0; }
}