/* Секции лендинга dg2026. Только переменные из tokens.css. */

/* --- карточки: общие правила ---
 * В макете у светлых карточек нет обводки: на светло-зелёном фоне они белые,
 * на белом — светло-зелёные, на тёмном петроле — белый с прозрачностью и тонкая
 * линия. Секция задаёт фон, карточка подстраивается. */

.dg-card {
    background: var(--dg-bg-surface);
    border: 1px solid transparent;
    border-radius: var(--dg-radius-card);
    padding: var(--dg-card-pad);
}
.dg-card--sm { padding: var(--dg-card-pad-sm); }
.dg-section--surface .dg-card { background: var(--dg-bg-base); }
.dg-section--dark .dg-card { background: var(--dg-overlay-soft); border-color: var(--dg-overlay-line); }
.dg-card--dark { background: var(--dg-bg-header); color: var(--dg-text-on-accent); }
.dg-section--surface .dg-card--dark { background: var(--dg-bg-header); }

/* --- слот под фото ---
 * Пока снимков нет — пунктирная рамка с подписью «ФОТО» по центру (как в макете).
 * Слот заполняет контейнер целиком, размер задаёт контейнер через aspect-ratio. */

.dg-photo-slot {
    width: 100%; height: 100%; min-height: 100%;
    border: 2px dashed var(--dg-border-default);
    border-radius: inherit;
    background: var(--dg-bg-muted);
    display: grid; place-items: center;
    color: var(--dg-text-muted); font-size: var(--dg-fs-small);
    letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase;
}
.dg-hero .dg-photo-slot,
.dg-section--dark .dg-photo-slot {
    background: var(--dg-overlay-soft); border-color: var(--dg-overlay-line);
    color: var(--dg-text-on-accent); opacity: .7;
}

/* --- 01 Hero (140:4 / 147:2) --- */

.dg-hero { background: var(--dg-bg-header); color: var(--dg-text-on-accent); position: relative; overflow: hidden; }
/* --- «Аврора» в герої ---
 * Два шари м'яких радіальних плям, кожен їде своїм ритмом. Анімується ЛИШЕ
 * transform — це робота композитора, без перемальовування: жодних бібліотек
 * (granim ~10 КБ, whatamesh ~30 КБ + WebGL, Vanta тягне three.js ~600 КБ)
 * у перший екран, де рахується LCP. Blur навмисно не використовуємо —
 * градієнти й так м'які, а фільтр по площі екрана дорогий на телефоні.
 * Розкладку не чіпає: шари absolute, тож CLS лишається нулем. */
.dg-hero::before, .dg-hero::after {
    content: ''; position: absolute; inset: -30%; z-index: 0;
    pointer-events: none; will-change: transform;
}
.dg-hero::before {
    background:
        radial-gradient(38% 46% at 22% 32%, var(--dg-aurora-teal), transparent 70%),
        radial-gradient(30% 38% at 78% 18%, var(--dg-aurora-warm), transparent 72%),
        radial-gradient(24% 30% at 52% 8%, var(--dg-aurora-teal), transparent 74%);
    animation: dg-aurora-a 19s ease-in-out infinite alternate;
}
.dg-hero::after {
    background:
        radial-gradient(42% 50% at 68% 82%, var(--dg-aurora-deep), transparent 72%),
        radial-gradient(26% 34% at 12% 76%, var(--dg-aurora-warm), transparent 70%);
    animation: dg-aurora-b 25s ease-in-out infinite alternate;
}
/* Контент героя — над плямами */
.dg-hero__inner { position: relative; z-index: 1; }
@keyframes dg-aurora-a {
    from { transform: translate3d(-6%, -3%, 0) scale(1); }
    to   { transform: translate3d(7%, 4%, 0) scale(1.16); }
}
@keyframes dg-aurora-b {
    from { transform: translate3d(5%, 3%, 0) scale(1.12); }
    to   { transform: translate3d(-7%, -4%, 0) scale(1); }
}
/* Хто просив не рухати — тому не рухаємо */
@media (prefers-reduced-motion: reduce) {
    .dg-hero::before, .dg-hero::after { animation: none; will-change: auto; }
}
.dg-hero__inner { display: grid; gap: calc(var(--dg-gap) * 1.2); padding-block: calc(var(--dg-gap) * 1.2) calc(var(--dg-gap) * 2); }
.dg-hero__copy { display: grid; gap: var(--dg-gap); align-content: start; }
.dg-hero__eyebrow {
    display: inline-block; justify-self: start;
    background: var(--dg-overlay-strong);
    border-radius: var(--dg-radius-pill);
    padding: calc(var(--dg-gap) / 2.5) calc(var(--dg-gap) * 0.8);
    font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase;
    font-weight: 500;
}
.dg-hero__title { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h1); line-height: var(--dg-lh-h1); margin: 0; }
.dg-hero__lead { font-size: var(--dg-fs-lead); opacity: .85; margin: 0; max-width: 48ch; }
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: var(--dg-gap); }
.dg-hero__cta .dg-btn--ghost { display: none; }
.dg-hero__cta .dg-btn--primary { flex: 1 1 auto; }
.dg-hero__note { font-size: var(--dg-fs-small); opacity: .75; margin: 0; }
/* Сторінки послуг: крихти над надзаголовком і факти з галочками (230:49, 230:64) */
.dg-hero__crumbs { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 2.5); font-size: var(--dg-fs-small); font-weight: 500; opacity: .6; }
.dg-hero__crumbs a { color: inherit; text-decoration: none; }
.dg-hero__crumbs a:hover { text-decoration: underline; }
.dg-hero__crumbs [aria-current] { opacity: 1; }
.dg-hero__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--dg-gap) * 0.4); font-size: var(--dg-fs-small); font-weight: 500; opacity: .85; }
.dg-hero__facts li { display: flex; align-items: center; gap: calc(var(--dg-gap) * 0.4); }
.dg-hero__facts .dg-check { margin-top: 0; }
/* На сторінках послуг H1 менший: 48 px на 1440 замість 60 (230:57) */
.dg-hero--sub .dg-hero__title { font-size: var(--dg-fs-h1-sub); }
.dg-hero__media { border-radius: var(--dg-radius-card); overflow: hidden; }
.dg-hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 1024px) {
    /* Текстовая колонка 700 px, фото 420 px, между ними 80 px (README §7) */
    .dg-hero__inner {
        grid-template-columns: minmax(0, 1fr) var(--dg-hero-media-w);
        align-items: start; gap: calc(var(--dg-gap) * 4);
        padding-block: calc(var(--dg-gap) * 2) var(--dg-section-y);
    }
    .dg-hero__copy { gap: calc(var(--dg-gap) * 1.4); }
    .dg-hero__cta .dg-btn--ghost { display: inline-flex; }
    .dg-hero__facts { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) * 1.4); }
    .dg-hero__cta .dg-btn--primary { flex: 0 0 auto; }
    .dg-hero__media { aspect-ratio: 420 / 520; margin-top: calc(var(--dg-gap) * 1.2); }
}
@media (max-width: 1023.98px) {
    .dg-hero__media { aspect-ratio: 350 / 200; }
}

/* --- 02 Trust (142:2) ---
 * Десктоп: четыре колонки текста без подложек. Мобилка: сетка 2×2 из
 * светлых карточек с малым радиусом. */

.dg-trust__grid { display: grid; gap: calc(var(--dg-gap) / 2); grid-template-columns: repeat(2, 1fr); }
.dg-trust__item { background: var(--dg-bg-base); border-radius: var(--dg-radius-card-xs); padding: var(--dg-card-pad-sm); }
.dg-trust__title { font-weight: 700; margin: 0 0 calc(var(--dg-gap) / 4); }
.dg-trust__text { margin: 0; color: var(--dg-text-muted); font-size: var(--dg-fs-small); }
@media (min-width: 1024px) {
    .dg-trust__grid { grid-template-columns: repeat(4, 1fr); gap: var(--dg-gap); }
    .dg-trust__item { background: transparent; padding: 0; border-radius: 0; }
    .dg-trust__title { font-size: var(--dg-fs-lead); }
    .dg-trust__text { font-size: var(--dg-fs-body); }
}

/* --- 03 Пакеты (178:2) --- */

.dg-pack__grid { display: grid; gap: var(--dg-gap); }
.dg-pack__head { display: flex; align-items: flex-start; gap: var(--dg-gap); justify-content: space-between; }
.dg-pack__name { font-size: var(--dg-fs-card-title); font-weight: 700; margin: 0; }
.dg-pack__sub { color: var(--dg-text-muted); font-size: var(--dg-fs-small); margin: calc(var(--dg-gap) / 4) 0 0; }
.dg-badge {
    background: var(--dg-bg-accent); color: var(--dg-text-on-accent);
    border-radius: var(--dg-radius-pill); padding: calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 1.6);
    font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); font-weight: 700;
    text-transform: uppercase; white-space: nowrap;
}
.dg-rooms { display: grid; gap: var(--dg-gap); grid-template-columns: repeat(2, 1fr); margin-top: calc(var(--dg-gap) / 2); }
.dg-rooms__label { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--dg-text-muted); margin: calc(var(--dg-gap) * 1.2) 0 0; }
.dg-rooms__item span { display: block; font-size: var(--dg-fs-eyebrow); color: var(--dg-text-secondary); margin-bottom: calc(var(--dg-gap) / 5); }
.dg-rooms__item b { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-card-title); color: var(--dg-text-primary); white-space: nowrap; }
.dg-rooms__item:first-child b { color: var(--dg-text-accent); }   /* в макете акцентом выделена первая цена */
/* margin-inline: 0 обовʼязково. У UA-стилях <hr> має margin-inline: auto, а авто-маржі
   по поперечній осі скасовують stretch — у flex-колонці лінія схлопується в нуль.
   У блоковому потоці auto і так резолвиться в 0, тож правило нічого не змінює. */
.dg-divider { border: 0; border-top: 1px solid var(--dg-border-default);
    margin-block: calc(var(--dg-gap) * 1.2); margin-inline: 0; }
.dg-section--dark .dg-divider,
.dg-card--dark .dg-divider,
.dg-calc__result .dg-divider { border-top-color: var(--dg-overlay-line); }
.dg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--dg-gap) / 1.6); }
.dg-list li { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--dg-gap) / 1.6); align-items: start; }
.dg-check { width: 14px; height: 14px; margin-top: calc(var(--dg-gap) / 4); color: var(--dg-text-accent); flex: none; }
/* Оранжевая галочка на тёмном петроле даёт контраст 2.22 при пороге 3.0 —
   на тёмных подложках берём цвет текста (белый, 9.66). */
.dg-section--dark .dg-check,
.dg-calc__result .dg-check,
.dg-wp__price-card .dg-check,
.dg-fmt__card--dark .dg-check,
.dg-special .dg-check { color: currentColor; }
/* У герої галочки декоративні й стоять поруч із текстом — лишаємо оранжевими, як у 230:64 */
.dg-hero .dg-check { color: var(--dg-bg-accent); }
.dg-pack__aside { display: grid; gap: var(--dg-gap); align-content: start; }
.dg-svc__top { display: flex; justify-content: space-between; gap: var(--dg-gap); align-items: baseline; }
.dg-svc__title { font-weight: 700; font-size: var(--dg-fs-lead); margin: 0; }
/* Цена малой карточки — Unbounded оранжевым, как в 178:66 / мобильном 147:2 */
.dg-svc__price { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display);
    font-size: var(--dg-fs-card-title); color: var(--dg-text-accent); white-space: nowrap; }
.dg-svc__desc { color: var(--dg-text-muted); font-size: var(--dg-fs-small); margin: calc(var(--dg-gap) / 2) 0 0; }
.dg-svc__link { display: inline-block; margin-top: calc(var(--dg-gap) / 1.6); font-size: var(--dg-fs-small); font-weight: 600; text-decoration: none; }
.dg-svc__link:hover { color: var(--dg-text-accent-sm); }
.dg-special { background: var(--dg-bg-header); color: var(--dg-text-on-accent); border-radius: var(--dg-radius-card); padding: var(--dg-card-pad-sm); }
.dg-special__title { margin: calc(var(--dg-gap) / 1.6) 0 calc(var(--dg-gap) / 4); font-weight: 700; font-size: var(--dg-fs-lead); }
.dg-special__old { opacity: .6; font-size: var(--dg-fs-small); margin-left: calc(var(--dg-gap) / 2); }
.dg-special .dg-price { color: var(--dg-text-on-accent); }

@media (min-width: 1024px) {
    /* У макеті обидві колонки рівно 452 px і стоять урівень (178:8 і 178:61).
       Тому stretch. Зайву висоту розподіляє space-between по всіх чотирьох
       внутрішніх просвітах — у макеті ритм рівний (~26 px між усіма блоками),
       і одна велика дірка над кнопкою читалася б гірше. */
    .dg-pack__grid { grid-template-columns: 700fr 476fr; align-items: stretch; gap: calc(var(--dg-gap) * 1.2); }
    .dg-pack__grid > .dg-card { display: flex; flex-direction: column; justify-content: space-between; }
    .dg-rooms { grid-template-columns: repeat(4, 1fr); }
    /* columns не действует на grid-контейнер, поэтому на десктопе список
       переключается в block — иначе две колонки просто не появлялись */
    .dg-pack__includes { display: block; columns: 2; column-gap: calc(var(--dg-gap) * 1.6); }
    .dg-pack__includes li { break-inside: avoid; margin-bottom: calc(var(--dg-gap) / 1.6); }
}

/* --- 03b Калькулятор (176:2) ---
 * Десктоп: один скруглённый контейнер, слева светлая панель с шагами, справа
 * тёмная панель с суммой. Мобилка: шаги без подложки, тёмная карточка ниже. */

.dg-calc { display: grid; gap: var(--dg-gap); }
/* На мобилке итог лежит под длинным списком услуг — выбираешь вслепую.
   Полоса липнет под схлопнутой шапкой на всё время, пока листаешь секцию. */
.dg-calc__bar { display: none; }
@media (max-width: 1023.98px) {
    .dg-calc__bar { display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--dg-gap); position: sticky; z-index: 40;
        top: calc(var(--dg-header-h, var(--dg-sticky-h-mob)) + var(--dg-gap) / 2);
        margin-bottom: var(--dg-gap);
        background: var(--dg-bg-header); color: var(--dg-text-on-accent);
        border-radius: var(--dg-radius-pill);
        padding: calc(var(--dg-gap) / 1.6) var(--dg-card-pad-sm); }
    .dg-calc__bar-label { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow);
        text-transform: uppercase; opacity: .6; }
    .dg-calc__bar-sum { font-size: var(--dg-fs-small); opacity: .7; white-space: nowrap; }
    .dg-calc__bar-sum b { font-family: var(--dg-font-display); font-weight: 800;
        letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-lead);
        color: var(--dg-text-on-accent); opacity: 1; }
}
.dg-calc__form { display: grid; gap: calc(var(--dg-gap) * 1.4); }
.dg-calc__label { font-size: var(--dg-fs-eyebrow); font-weight: 600; color: var(--dg-text-muted); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; margin: 0 0 calc(var(--dg-gap) / 1.6); }
.dg-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--dg-gap) / 2); }
.dg-seg__opt { position: relative; }
.dg-seg__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dg-seg__opt span {
    display: grid; gap: calc(var(--dg-gap) / 6); text-align: center;
    background: var(--dg-bg-base);
    border-radius: var(--dg-radius-card-xs);
    padding: calc(var(--dg-gap) / 1.4); cursor: pointer;
    transition: background-color var(--dg-anim) ease, color var(--dg-anim) ease;
}
.dg-seg__opt b { font-weight: 700; }
.dg-seg__opt small { color: var(--dg-text-muted); font-size: var(--dg-fs-eyebrow); }
.dg-seg__opt input:checked + span { background: var(--dg-bg-accent); color: var(--dg-text-on-accent); }
.dg-seg__opt input:checked + span small { color: currentColor; opacity: .85; }
.dg-seg__opt input:focus-visible + span { outline: 2px solid var(--dg-text-accent); outline-offset: 2px; }

.dg-opt { display: grid; grid-template-columns: auto 1fr auto; gap: var(--dg-gap); align-items: center;
    min-height: var(--dg-opt-min-h);
    background: var(--dg-bg-surface);
    border: 1px solid var(--dg-border-default); border-radius: var(--dg-radius-field);
    padding: calc(var(--dg-gap) * 0.8) var(--dg-gap); cursor: pointer;
    transition: border-color var(--dg-anim) ease; }
/* Список услуг — грид: расстояние между строками даёт gap. Строки без описания
   («Гриль», «Пральна машина») сами по себе на 20-30 px ниже остальных, поэтому
   у .dg-opt стоит min-height — иначе список рябит разной высотой карточек. */
.dg-calc__opts { display: grid; gap: calc(var(--dg-gap) / 1.6); align-content: start; }
.dg-opt input { width: 22px; height: 22px; margin: 0; accent-color: var(--dg-bg-accent); }
.dg-opt__title { font-weight: 600; }
.dg-opt__desc { color: var(--dg-text-muted); font-size: var(--dg-fs-small); }
.dg-opt__price { font-weight: 700; white-space: nowrap; color: var(--dg-text-accent-sm); }
/* Строка со счётчиком: слева описание, справа цена за единицу и сам счётчик.
   Своя сетка, потому что у .dg-opt первая колонка — под галочку, а тут её нет. */
.dg-opt--qty { grid-template-columns: 1fr auto; cursor: default; }
.dg-opt__right { display: grid; justify-items: end; gap: calc(var(--dg-gap) / 3); }
.dg-qty { display: inline-flex; align-items: center; gap: calc(var(--dg-gap) / 4); }
.dg-qty__btn { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
    background: var(--dg-bg-base); border: 1px solid var(--dg-border-default);
    border-radius: var(--dg-radius-pill); color: var(--dg-text-secondary);
    font-size: var(--dg-fs-body); line-height: 1; cursor: pointer;
    transition: border-color var(--dg-anim) ease, color var(--dg-anim) ease; }
.dg-qty__btn:hover { border-color: var(--dg-bg-accent); color: var(--dg-text-accent-sm); }
.dg-qty__val { width: 40px; text-align: center; font-weight: 700; font-size: var(--dg-fs-body);
    color: var(--dg-text-primary); background: transparent; border: 0; padding: 0;
    -moz-appearance: textfield; }
.dg-qty__val::-webkit-outer-spin-button,
.dg-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dg-opt__more { width: 100%; background: none; border: 1px dashed var(--dg-border-default);
    border-radius: var(--dg-radius-field); padding: calc(var(--dg-gap) / 1.6);
    margin-top: calc(var(--dg-gap) / 1.6); cursor: pointer; font-weight: 600;
    color: var(--dg-text-accent-sm); }
.dg-opt__more:hover { border-color: var(--dg-bg-accent); }
/* Свёрнутый список: видно ровно три ряда. Считаем не услуги, а ряды сетки,
   поэтому предел разный — на мобилке колонка одна (3 услуги), на десктопе две,
   и первым рядом идёт базовая услуга во всю ширину (1 + 2 + 2 = 5 услуг).
   Прячем своим классом, а не [hidden]: у .dg-opt задан display, и атрибут
   проигрывает ему по специфичности. */
.dg-calc__opts.is-collapsed > .dg-opt:nth-child(n+4) { display: none; }
/* Выбранная строка со счётчиком подсвечивается так же, как отмеченная галочка */
.dg-opt--qty.is-on { border-color: var(--dg-bg-accent); }
/* Включённый пакет и выбранные опции — оранжевая обводка (176:2) */
.dg-opt--fixed, .dg-opt:has(input:checked) { border-color: var(--dg-bg-accent); }
.dg-opt--fixed .dg-opt__price { color: var(--dg-text-secondary); font-weight: 500; }
/* Включённый пакет: в макете залитый оранжевый чекбокс с белой галочкой.
   Нативный disabled+checked браузер рисует серым и accent-color игнорирует,
   поэтому рисуем сами. */
.dg-opt--fixed input { appearance: none; -webkit-appearance: none; position: relative;
    background: var(--dg-bg-accent); border: 0; border-radius: calc(var(--dg-radius-field) / 2); cursor: default; }
.dg-opt--fixed input::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px;
    border: solid var(--dg-text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dg-calc__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: calc(var(--dg-gap) / 2); }
.dg-calc__top .dg-eyebrow { margin: 0; }

.dg-calc__result { background: var(--dg-bg-header); color: var(--dg-text-on-accent); border-radius: var(--dg-radius-card); padding: var(--dg-card-pad); align-self: start; }
.dg-calc__result .dg-price { color: var(--dg-text-on-accent); font-size: var(--dg-fs-h2); }
.dg-calc__sum { display: flex; align-items: baseline; gap: calc(var(--dg-gap) / 2); margin: 0; }
.dg-calc__sum > span:first-child { font-size: var(--dg-fs-card-title); opacity: .85; }
.dg-calc__note { font-size: var(--dg-fs-small); opacity: .75; margin: var(--dg-gap) 0 0; text-align: center; }
.dg-calc__result .dg-list li { color: currentColor; }
.dg-calc__result .dg-btn { margin-top: calc(var(--dg-gap) * 1.6); }

/* Мобилка (147:2): подпись и сумма в одну строку, «ЩО ВХОДИТЬ» опущено */
@media (max-width: 1023.98px) {
    .dg-calc__inc-label { display: none; }
    .dg-calc__top .dg-eyebrow { flex: 1 1 auto; }
    .dg-calc__sum { flex: 0 0 auto; }
    .dg-calc__sum > span:first-child { font-size: var(--dg-fs-body); }
    .dg-calc__result .dg-price { font-size: var(--dg-fs-price); }
}
@media (min-width: 1024px) {
    .dg-calc__top { display: block; }
    .dg-calc__top .dg-eyebrow { margin-bottom: calc(var(--dg-gap) / 2); }
    /* Без overflow: hidden — иначе .dg-calc становится скролл-контейнером
       и position: sticky внутри перестаёт работать. Скругление переносим
       на сами колонки. */
    .dg-calc { grid-template-columns: 780fr 420fr; gap: 0; }
    .dg-calc__form { border-radius: var(--dg-radius-card) 0 0 var(--dg-radius-card); }
    .dg-calc__form { background: var(--dg-bg-base); padding: var(--dg-card-pad) calc(var(--dg-card-pad) * 1.2); align-content: start; }
    .dg-seg { grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--dg-bg-surface); border-radius: var(--dg-radius-pill); padding: calc(var(--dg-gap) / 4); }
    .dg-seg__opt span { background: transparent; border-radius: var(--dg-radius-pill); }
    /* Панель тягнеться по висоті форми; спейсер 176:80 з макета — margin-top: auto
       на кнопці, замітка їде за нею. Саме flex, а не grid — див. .dg-wp__price-card. */
    .dg-calc__result { border-radius: 0 var(--dg-radius-card) var(--dg-radius-card) 0;
        align-self: stretch; padding: var(--dg-card-pad); }
    /* Список услуг длинный — сумма едет за скроллом, иначе выбираешь вслепую.
       Тёмная колонка при этом остаётся во всю высоту карточки. */
    .dg-calc__sticky { position: sticky; top: calc(var(--dg-sticky-h) + var(--dg-gap));
        display: flex; flex-direction: column; }
    .dg-calc__sticky .dg-btn { margin-top: var(--dg-gap); }
    .dg-calc__result .dg-list { margin-top: var(--dg-gap); }
    .dg-calc__opts { grid-template-columns: 1fr 1fr; }
    /* Базовая услуга — во всю ширину: в колонке 335 px её название и описание
       ломаются на пять строк, а оставшиеся 20 услуг как раз дают ровные
       десять пар. */
    .dg-calc__opts .dg-opt--fixed { grid-column: 1 / -1; }
    .dg-calc__opts.is-collapsed > .dg-opt:nth-child(n+4) { display: grid; }
    .dg-calc__opts.is-collapsed > .dg-opt:nth-child(n+6) { display: none; }
}


/* --- Відгуки з Google --- */

/* Карточка оценки и список отзывов. Без отзывов (`--solo`) карточка занимает
   всю ширину: пустая колонка рядом выглядела бы как недогруженный блок. */
.dg-rev { display: grid; gap: var(--dg-gap); }
.dg-rev__score { background: var(--dg-bg-header); color: var(--dg-text-on-accent);
    border-radius: var(--dg-radius-card); padding: var(--dg-card-pad);
    display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--dg-gap) / 3); }
.dg-rev__source { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow);
    text-transform: uppercase; opacity: .75; margin: 0; }
.dg-rev__value { font-family: var(--dg-font-display); font-weight: 800; font-size: var(--dg-fs-h1-sub);
    line-height: 1; margin: 0; }
.dg-rev__value span { font-size: var(--dg-fs-card-title); font-weight: 700; opacity: .6; }
.dg-rev__stars { display: inline-flex; gap: calc(var(--dg-gap) / 6); margin: 0; color: var(--dg-bg-accent); }
.dg-star { width: 20px; height: 20px; flex: none; }
.dg-rev__stars--sm .dg-star { width: 15px; height: 15px; }
.dg-rev__note { margin: 0; font-size: var(--dg-fs-body); opacity: .9; }
.dg-rev__count { margin: 0; font-size: var(--dg-fs-small); opacity: .7; }
/* Кнопка на тёмной карточке: своя обводка, иначе ghost-вариант сливается с фоном */
.dg-rev__link { margin-top: auto; border-color: var(--dg-overlay-line); color: var(--dg-text-on-accent); }
.dg-rev__link:hover { border-color: var(--dg-bg-accent); }
.dg-rev__list { display: grid; gap: var(--dg-gap); list-style: none; margin: 0; padding: 0; }
.dg-rev__card { background: var(--dg-bg-surface); border: 1px solid var(--dg-border-default);
    border-radius: var(--dg-radius-card-sm); padding: var(--dg-card-pad-sm);
    display: grid; gap: calc(var(--dg-gap) / 3); align-content: start; }
.dg-rev__head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--dg-gap) / 2); }
.dg-rev__author { font-weight: 700; }
.dg-rev__date { font-size: var(--dg-fs-small); color: var(--dg-text-muted); white-space: nowrap; }
.dg-rev__text { margin: 0; color: var(--dg-text-secondary); }

@media (min-width: 768px) {
    .dg-rev__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .dg-rev { grid-template-columns: 380fr 820fr; gap: calc(var(--dg-gap) * 1.2); align-items: start; }
    .dg-rev--solo { grid-template-columns: 1fr; }
    .dg-rev--solo .dg-rev__score { flex-direction: row; align-items: center; flex-wrap: wrap;
        gap: var(--dg-gap) calc(var(--dg-gap) * 1.5); }
    .dg-rev--solo .dg-rev__link { margin: 0 0 0 auto; }
}

/* --- 04 Шаги (144:2) --- */

.dg-steps { display: grid; gap: calc(var(--dg-gap) * 1.2); list-style: none; margin: 0; padding: 0; }
.dg-step { display: grid; grid-template-columns: auto 1fr; gap: var(--dg-gap); align-items: start; }
.dg-step__num { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h2); color: var(--dg-text-accent); line-height: 1; min-width: 2.2ch; }
.dg-step__title { font-weight: 700; font-size: var(--dg-fs-lead); margin: 0 0 calc(var(--dg-gap) / 4); }
.dg-step__text { margin: 0; color: var(--dg-text-muted); font-size: var(--dg-fs-body); }
@media (min-width: 1024px) {
    .dg-steps { grid-template-columns: repeat(5, 1fr); gap: var(--dg-gap); }
    .dg-step { grid-template-columns: 1fr; gap: calc(var(--dg-gap) * 0.8); }
}

/* --- 05 До/после (144:27) --- */

.dg-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dg-gap); }
.dg-ba__pair figure, .dg-ba__thumb { margin: 0; }
.dg-ba__chip { display: inline-block; background: var(--dg-bg-muted); color: var(--dg-text-secondary);
    border-radius: var(--dg-radius-pill); padding: calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 1.6);
    font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); font-weight: 700; text-transform: uppercase; margin-bottom: calc(var(--dg-gap) / 1.6); }
.dg-ba__chip--after { background: var(--dg-bg-accent); color: var(--dg-text-on-accent); }
.dg-ba__img { border-radius: var(--dg-radius-card-sm); overflow: hidden; aspect-ratio: 1 / 1; }
.dg-ba__img img { width: 100%; height: 100%; object-fit: cover; }
.dg-ba__caption { margin: var(--dg-gap) 0 0; color: var(--dg-text-secondary); font-size: var(--dg-fs-lead); }
.dg-ba__thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; gap: var(--dg-gap);
    overflow-x: auto; scroll-snap-type: x mandatory; margin-top: calc(var(--dg-gap) * 1.4);
    padding-bottom: calc(var(--dg-gap) / 2); }
.dg-ba__thumb { scroll-snap-align: start; }
.dg-ba__thumb figcaption { margin-top: calc(var(--dg-gap) / 2); font-size: var(--dg-fs-small); }
.dg-ba__thumb .dg-ba__img { aspect-ratio: 227 / 140; }
@media (min-width: 1024px) {
    .dg-ba__img { aspect-ratio: 588 / 400; }
    .dg-ba__thumbs { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-top: calc(var(--dg-gap) * 2); }
}

/* --- 06 Бренды (145:2) --- */

.dg-brands { display: grid; gap: var(--dg-gap); }
.dg-brand__eyebrow { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; margin: 0; opacity: .7; }
.dg-brand__name { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-price); margin: calc(var(--dg-gap) / 2) 0; text-transform: uppercase; }
.dg-brand__sub { font-size: var(--dg-fs-small); opacity: .7; margin: 0; }
.dg-brand__desc { opacity: .85; margin: 0 0 var(--dg-gap); }
.dg-dot { width: 7px; height: 7px; border-radius: var(--dg-radius-pill); background: var(--dg-bg-accent); margin-top: calc(var(--dg-gap) / 2.5); flex: none; }
.dg-brands__note { display: grid; grid-template-columns: auto 1fr; gap: var(--dg-gap); align-items: center;
    border: 1px dashed var(--dg-overlay-line); border-radius: var(--dg-radius-card-sm);
    padding: var(--dg-gap) var(--dg-card-pad-sm); margin-top: calc(var(--dg-gap) / 2); }
.dg-brands__note b { font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow); text-transform: uppercase; color: var(--dg-text-accent-sm); white-space: nowrap; }
.dg-brands__mob-names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dg-gap); margin-bottom: var(--dg-gap); }
.dg-brands__mob-names .dg-brand__name { margin-top: 0; }
@media (min-width: 1024px) { .dg-brands { grid-template-columns: 1fr 1fr; } .dg-brands__note { grid-column: 1 / -1; } }

/* --- 07 Прайс-лист (145:44) --- */

/* Вкладки-фильтры. Липнут под шапкой: список длинный, и без этого, дойдя до
   середины, уже не переключишь раздел — надо мотать вверх. Опираемся на
   измеренную высоту шапки (--dg-header-h), токен только запасной вариант. */
.dg-pl__tabs { position: sticky; z-index: 30;
    top: calc(var(--dg-header-h, var(--dg-sticky-h-mob)) + var(--dg-gap) / 2);
    display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 3);
    margin-bottom: var(--dg-gap); padding: calc(var(--dg-gap) / 3);
    background: var(--dg-bg-surface); border-radius: var(--dg-radius-pill);
    box-shadow: 0 2px 12px rgba(7, 47, 51, .06); }
.dg-pl__tab { border: 0; background: transparent; cursor: pointer;
    border-radius: var(--dg-radius-pill); white-space: nowrap;
    padding: calc(var(--dg-gap) / 2) var(--dg-gap);
    font-weight: 600; font-size: var(--dg-fs-small); color: var(--dg-text-secondary);
    transition: background-color var(--dg-anim) ease, color var(--dg-anim) ease; }
.dg-pl__tab:hover { color: var(--dg-text-accent-sm); }
.dg-pl__tab.is-on { background: var(--dg-bg-accent); color: var(--dg-text-on-accent); }
/* Метка раздела в строке — чтобы во вкладке «усі» было видно, что к чему */
.dg-pl__tag { display: inline-block; margin-right: calc(var(--dg-gap) / 2.5);
    font-size: var(--dg-fs-eyebrow); letter-spacing: var(--dg-ls-eyebrow);
    text-transform: uppercase; font-weight: 700; color: var(--dg-text-muted);
    border: 1px solid var(--dg-border-default); border-radius: var(--dg-radius-pill);
    padding: 1px calc(var(--dg-gap) / 2.5); }

.dg-pl { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card); overflow: hidden; padding-inline: var(--dg-card-pad-sm); }
.dg-pl__row { display: grid; gap: calc(var(--dg-gap) / 4); padding-block: var(--dg-gap); border-bottom: 1px solid var(--dg-border-default); }
.dg-pl__row:last-of-type { border-bottom: 0; }
.dg-pl__line { display: flex; justify-content: space-between; gap: var(--dg-gap); align-items: baseline; }
.dg-pl__title { font-weight: 600; font-size: var(--dg-fs-lead); }
.dg-pl__price { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-card-title); color: var(--dg-text-accent); white-space: nowrap; }
.dg-pl__sub { color: var(--dg-text-muted); font-size: var(--dg-fs-small); }
/* Ограничение услуги — тихая строка с оранжевой чертой слева. Не рамка
   (.dg-note-dashed) — она тяжеловата для строки прайса, и не просто серый
   текст — иначе не отличить от уточнения. */
.dg-pl__limit, .dg-pack__limits li { display: block; font-size: var(--dg-fs-small);
    color: var(--dg-text-secondary); border-left: 2px solid var(--dg-bg-accent);
    padding-left: calc(var(--dg-gap) / 2.5); margin-top: calc(var(--dg-gap) / 4); }
.dg-pack__limits { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--dg-gap) / 3); }
/* «/год» под ценой, а не в строку: инлайном цена съедает половину мобильной
   строки и название ломается на три. Отступление от макета (145:53 — одна строка). */
.dg-pl__unit { display: block; font-family: var(--dg-font-text); font-weight: 600;
    font-size: var(--dg-fs-small); letter-spacing: normal; color: var(--dg-text-muted); text-align: right; }
.dg-pl__row[hidden] { display: none; }
/* Фильтр вкладок — своим классом, а не атрибутом hidden: ниже, на десктопе,
   [hidden] намеренно перебивается (мобильное сворачивание там не нужно),
   и фильтр через тот же атрибут просто не сработал бы. */
.dg-pl__row.is-off { display: none !important; }
.dg-pl__note { margin: var(--dg-gap) 0 0; padding-inline: var(--dg-card-pad);
    font-size: var(--dg-fs-small); color: var(--dg-text-muted); }
.dg-pl__more { width: 100%; background: none; border: 0; border-top: 1px solid var(--dg-border-default);
    padding: var(--dg-gap); cursor: pointer; font-weight: 600; color: var(--dg-text-accent-sm); }
@media (min-width: 1024px) {
    .dg-pl { padding-inline: var(--dg-card-pad); }
    .dg-pl__row { grid-template-columns: 1fr auto; align-items: center; padding-block: calc(var(--dg-gap) * 1.2); }
    .dg-pl__line { display: contents; }
    .dg-pl__sub { grid-column: 1; }
    /* Цена занимает обе строки левой колонки: иначе «/год» растит первый ряд
       и строки с единицей выше остальных на 21 px. Заодно это точнее макета —
       в 145:53 цена центрирована по всему блоку «название + уточнение». */
    .dg-pl__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .dg-pl__more { display: none; }
    .dg-pl__row[hidden] { display: grid; }
}

/* --- 07b Химчистка (156:59) --- */

.dg-uph { display: grid; gap: var(--dg-gap); }
.dg-uph__title { font-weight: 700; font-size: var(--dg-fs-card-title); margin: 0 0 calc(var(--dg-gap) / 2); }
.dg-uph__desc { color: var(--dg-text-muted); font-size: var(--dg-fs-small); margin: 0 0 var(--dg-gap); }
.dg-uph__row { display: flex; justify-content: space-between; gap: var(--dg-gap); align-items: baseline; padding-block: calc(var(--dg-gap) / 1.6); border-bottom: 1px solid var(--dg-border-default); }
.dg-uph__row:last-child { border-bottom: 0; }
.dg-uph__row b { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-lead); color: var(--dg-text-accent); white-space: nowrap; }
.dg-uph__photo { display: grid; gap: var(--dg-gap); align-items: center;
    background: var(--dg-bg-header); color: var(--dg-text-on-accent);
    border-radius: var(--dg-radius-card); padding: var(--dg-card-pad-sm); margin-top: var(--dg-gap); }
.dg-uph__photo-title { font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-lead); margin: 0 0 calc(var(--dg-gap) / 2); }
.dg-uph__photo-text { margin: 0; opacity: .8; font-size: var(--dg-fs-small); }
.dg-uph__photo .dg-btn { justify-self: start; }
@media (min-width: 1024px) {
    .dg-uph { grid-template-columns: repeat(3, 1fr); }
    .dg-uph__photo { grid-template-columns: 1fr auto; padding: var(--dg-card-pad); gap: calc(var(--dg-gap) * 2); }
    .dg-uph__photo-title { font-size: var(--dg-fs-price); }
    .dg-uph__photo-text { font-size: var(--dg-fs-body); }
}
/* Мобилка: одна плоская таблица (147:2) */
.dg-uph__flat .dg-uph__row { padding-block: calc(var(--dg-gap) / 1.6); }
@media (max-width: 1023.98px) {
    .dg-uph__photo { grid-template-columns: 1fr auto; }
    .dg-uph__photo-title { font-family: var(--dg-font-text); font-size: var(--dg-fs-body); margin: 0; }
    .dg-uph__photo-text { display: none; }
}

/* --- 08 FAQ (146:2) --- */

.dg-faq { display: grid; gap: 0; }
.dg-faq__item { border-bottom: 1px solid var(--dg-border-default); }
.dg-faq__q { display: flex; justify-content: space-between; gap: var(--dg-gap); align-items: center;
    width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
    padding: var(--dg-gap) 0; font-weight: 700; font-size: var(--dg-fs-lead); color: inherit; }
.dg-faq__sign { color: var(--dg-text-accent); font-size: var(--dg-fs-card-title); line-height: 1; }
.dg-faq__a { margin: 0; padding-bottom: var(--dg-gap); color: var(--dg-text-muted); }
.dg-faq__a[hidden] { display: none; }
@media (min-width: 1024px) {
    /* В макете вопросы читаются сверху вниз по колонке, а grid раскладывает
       построчно. Многоколоночная вёрстка даёт нужный порядок и не зависит
       от количества вопросов. */
    .dg-faq { display: block; columns: 2; column-gap: calc(var(--dg-gap) * 3); }
    .dg-faq__item { break-inside: avoid; padding-block: calc(var(--dg-gap) / 2); }
    .dg-faq__q { cursor: default; pointer-events: none; padding-bottom: calc(var(--dg-gap) / 2); }
    .dg-faq__sign { display: none; }
    .dg-faq__a[hidden] { display: block; }   /* на десктопе раскрыто всё */
    .dg-faq__a { padding-bottom: calc(var(--dg-gap) * 1.2); }
}

/* --- 09 CTA (146:33) --- */

.dg-cta { text-align: center; display: grid; gap: var(--dg-gap); justify-items: center; }
.dg-cta__buttons { display: grid; gap: var(--dg-gap); width: 100%; }
.dg-cta .dg-h2 { max-width: 20ch; }
.dg-cta .dg-lead { max-width: 50ch; }
.dg-cta__note { font-size: var(--dg-fs-small); margin: 0; }
@media (min-width: 768px) { .dg-cta__buttons { display: flex; justify-content: center; width: auto; } }

/* --- Текстовые страницы (T4) --- */

.dg-text__inner { max-width: var(--dg-text-w); display: grid; gap: calc(var(--dg-gap) * 2); }

/* --- Вікна · 02 ціна за стулку (230:79 / 234:51) --- */

.dg-wp { display: grid; gap: var(--dg-gap); }
/* Колонки однакової висоти — по найвищій картці (у макеті Columns 230:84 має фіксовану
   висоту 595 px = натуральна висота білої картки). Тому не align-items: start. */
.dg-wp__price-card { background: var(--dg-bg-header); color: var(--dg-text-on-accent); border-radius: var(--dg-radius-card);
    padding: var(--dg-card-pad); display: flex; flex-direction: column; gap: var(--dg-gap); }
/* Спейсер 238:2 з макета: кнопка притиснута до низу картки. Саме flex, а не grid:
   у grid із align-content: start вільне місце лишається поза треками і margin-top: auto
   його не бачить. */
.dg-wp__price-card .dg-btn { margin-top: auto; }
.dg-wp__price-card .dg-eyebrow { color: currentColor; opacity: .5; }
.dg-wp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--dg-gap) / 2); margin: 0; }
.dg-wp__price .dg-price { color: var(--dg-text-on-accent); font-size: var(--dg-fs-h1); }
.dg-wp__prefix { font-size: var(--dg-fs-card-title); font-weight: 500; opacity: .6; }
.dg-wp__unit { font-size: var(--dg-fs-body); opacity: .7; }
.dg-wp__sub { margin: 0; opacity: .7; }
.dg-wp__price-card .dg-divider { border-top-color: var(--dg-overlay-line); margin: 0; }
.dg-wp__price-card .dg-list li { color: currentColor; opacity: .9; }
.dg-wp__stulka { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card); padding: var(--dg-card-pad);
    display: grid; gap: calc(var(--dg-gap) * 1.1); align-content: start; }
.dg-wp__stulka-title { margin: 0; font-weight: 700; font-size: var(--dg-fs-card-title); line-height: 1.25; }
.dg-diagram { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--dg-gap) * 0.4);
    background: var(--dg-bg-muted); border-radius: var(--dg-radius-field); padding: calc(var(--dg-gap) * 0.4); }
.dg-diagram__pane { background: var(--dg-bg-surface); border: 2px solid var(--dg-border-default); border-radius: calc(var(--dg-radius-field) / 1.5);
    display: grid; place-items: center; min-height: calc(var(--dg-gap) * 5.5);
    font-weight: 700; font-size: var(--dg-fs-body); color: var(--dg-text-secondary); }
.dg-diagram__caption { margin: 0; text-align: center; font-size: var(--dg-fs-small); font-weight: 500; color: var(--dg-text-muted); }
.dg-wp__rows { display: grid; }
.dg-wp__row { display: flex; justify-content: space-between; align-items: center; gap: var(--dg-gap);
    padding: calc(var(--dg-gap) * 0.6) 0; font-weight: 500; }
.dg-wp__row + .dg-wp__row { border-top: 1px solid var(--dg-border-default); }
.dg-wp__row b { font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display);
    color: var(--dg-text-accent); font-size: var(--dg-fs-body); white-space: nowrap; }
.dg-note-dashed { margin: 0; border: 2px dashed var(--dg-bg-accent); border-radius: var(--dg-radius-card-xs);
    padding: calc(var(--dg-gap) * 0.7) var(--dg-gap); font-weight: 700; color: var(--dg-text-secondary); }
@media (min-width: 1024px) {
    .dg-wp { grid-template-columns: 480fr 696fr; gap: calc(var(--dg-gap) * 1.2); align-items: stretch; }
    .dg-diagram__pane { min-height: calc(var(--dg-gap) * 7.5); }
}

/* --- Вікна · 02b два формати (233:2 / 234:94) --- */

.dg-fmt { display: grid; gap: var(--dg-gap); }
.dg-fmt__card { background: var(--dg-bg-base); border-radius: var(--dg-radius-card); padding: var(--dg-card-pad);
    display: flex; flex-direction: column; gap: var(--dg-gap); }
.dg-fmt__card--dark { background: var(--dg-bg-header); color: var(--dg-text-on-accent); }
.dg-fmt__card--dark .dg-eyebrow { color: currentColor; opacity: .5; }
.dg-fmt__title { margin: 0; font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h3); line-height: 1.2; }
.dg-fmt__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--dg-gap) / 2); margin: 0; }
.dg-fmt__price .dg-price { font-size: var(--dg-fs-card-title); }   /* 24 px на мобілці (234:103) */
.dg-fmt__unit { font-size: var(--dg-fs-small); color: var(--dg-text-muted); }
.dg-fmt__card--dark .dg-fmt__unit { color: currentColor; opacity: .6; }
.dg-fmt__desc { margin: 0; color: var(--dg-text-secondary); }
.dg-fmt__card--dark .dg-fmt__desc { color: currentColor; opacity: .7; }
.dg-fmt__card .dg-divider { margin: 0; }
.dg-fmt__card--dark .dg-divider { border-top-color: var(--dg-overlay-line); }
.dg-fmt__card--dark .dg-list li { color: currentColor; opacity: .9; }
/* Спейсер 233:33 / 233:61 з макета: кнопка притиснута до низу картки (див. .dg-wp__price-card). */
.dg-fmt__card .dg-btn { margin-top: auto; }
.dg-fmt__note { margin-top: calc(var(--dg-gap) * 1.2); }
@media (min-width: 1024px) {
    .dg-fmt { grid-template-columns: 1fr 1fr; gap: calc(var(--dg-gap) * 1.2); align-items: stretch; }
    .dg-fmt__note { margin-top: calc(var(--dg-gap) * 2.4); }
    .dg-fmt__price .dg-price { font-size: var(--dg-fs-price); }
}

/* --- Вікна · 03 / 06 картки (230:132, 231:50 / 234:143, 234:214) --- */

.dg-cards { display: grid; gap: calc(var(--dg-gap) / 2); }
.dg-cards--plain { grid-template-columns: 1fr 1fr; }
.dg-cards__item { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card-sm); padding: var(--dg-card-pad-sm);
    display: grid; gap: calc(var(--dg-gap) * 0.3); align-content: start; }
.dg-section--surface .dg-cards__item { background: var(--dg-bg-base); }
.dg-cards__num { font-family: var(--dg-font-display); font-weight: 800; letter-spacing: var(--dg-ls-display);
    font-size: var(--dg-fs-price); color: var(--dg-text-accent); line-height: 1; }
.dg-cards__title { margin: 0; font-weight: 700; font-size: var(--dg-fs-lead); line-height: 1.3; }
.dg-cards__text { margin: 0; font-size: var(--dg-fs-small); color: var(--dg-text-muted); }
/* На мобілці нумеровані картки — рядок «номер + текст», номер на два рядки */
.dg-cards--numbered .dg-cards__item { grid-template-columns: auto 1fr; column-gap: var(--dg-gap); align-items: center; }
.dg-cards--numbered .dg-cards__num { grid-row: 1 / span 2; font-size: var(--dg-fs-card-title); }
.dg-cards__panel { background: var(--dg-bg-header); color: var(--dg-text-on-accent); border-radius: var(--dg-radius-card);
    padding: var(--dg-card-pad-sm) var(--dg-gap); display: grid; gap: var(--dg-gap); margin-top: var(--dg-gap); }
.dg-cards__panel-title { margin: 0; font-family: var(--dg-font-display); font-weight: 700; letter-spacing: var(--dg-ls-display); font-size: var(--dg-fs-h3); line-height: 1.2; }
.dg-cards__panel-text { margin: calc(var(--dg-gap) * 0.4) 0 0; opacity: .75; }
.dg-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 2); }
.dg-tag { background: var(--dg-overlay-soft); border: 1px solid var(--dg-overlay-line); border-radius: var(--dg-radius-pill);
    padding: calc(var(--dg-gap) * 0.55) calc(var(--dg-gap) * 0.8); font-size: var(--dg-fs-small); font-weight: 600; white-space: nowrap; }
@media (min-width: 1024px) {
    .dg-cards, .dg-cards--plain { grid-template-columns: repeat(4, 1fr); gap: calc(var(--dg-gap) * 1.2); }
    .dg-cards--numbered .dg-cards__item { grid-template-columns: 1fr; align-items: start; }
    .dg-cards--numbered .dg-cards__num { grid-row: auto; font-size: var(--dg-fs-price); margin-bottom: calc(var(--dg-gap) * 0.3); }
    .dg-cards__panel { grid-template-columns: 420fr 740fr; align-items: center;
        padding: calc(var(--dg-gap) * 1.6) calc(var(--dg-gap) * 2); gap: calc(var(--dg-gap) * 2); margin-top: calc(var(--dg-gap) * 2.4); }
}

/* --- T4 · юридичні сторінки (164:2 / 164:155 / 165:2) --- */

.dg-legal { padding-block: calc(var(--dg-gap) * 1.6) var(--dg-section-y); }
.dg-crumbs { display: flex; flex-wrap: wrap; gap: calc(var(--dg-gap) / 2.5); margin: 0 0 calc(var(--dg-gap) * 1.2);
    font-size: var(--dg-fs-small); font-weight: 500; color: var(--dg-text-muted); }
.dg-crumbs a { color: inherit; text-decoration: none; }
.dg-crumbs a:hover { color: var(--dg-text-accent-sm); }
.dg-crumbs [aria-current] { color: var(--dg-text-secondary); }
.dg-legal__head { display: grid; gap: calc(var(--dg-gap) * 0.7); margin: 0 0 calc(var(--dg-gap) * 1.8); }
.dg-legal__head .dg-h2 { max-width: var(--dg-legal-title-w); }
.dg-legal__meta { margin: 0; color: var(--dg-text-muted); font-size: var(--dg-fs-body); }
.dg-legal__cols { display: grid; gap: calc(var(--dg-gap) * 1.2); align-items: start; }

/* Зміст: на мобілці — згортається (<details>), на десктопі — липка картка */
.dg-toc { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card-sm);
    padding: calc(var(--dg-gap) * 0.7) calc(var(--dg-gap) * 0.9); }
.dg-toc__summary { list-style: none; display: flex; justify-content: space-between; align-items: center;
    gap: var(--dg-gap); cursor: pointer; font-weight: 600; color: var(--dg-text-primary); }
.dg-toc__summary::-webkit-details-marker { display: none; }
.dg-toc__chev { width: 8px; height: 8px; margin: 0 calc(var(--dg-gap) / 4) calc(var(--dg-gap) / 4) 0;
    border: solid var(--dg-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg);
    transition: transform var(--dg-anim) ease; }
.dg-toc[open] .dg-toc__chev { transform: rotate(225deg); margin-bottom: 0; }
.dg-toc__label { display: none; }
.dg-toc__list { list-style: none; margin: calc(var(--dg-gap) / 2) 0 0; padding: 0; }
.dg-toc__list a { display: flex; gap: calc(var(--dg-gap) / 2); padding: calc(var(--dg-gap) * 0.4) 0;
    text-decoration: none; font-size: var(--dg-fs-small); font-weight: 500; line-height: 1.5; color: var(--dg-text-secondary); }
.dg-toc__list b { flex: none; color: var(--dg-text-muted); }
.dg-toc__list a:hover, .dg-toc__list a.is-active { color: var(--dg-text-primary); }
.dg-toc__list a.is-active b { color: var(--dg-text-accent-sm); }

.dg-article { display: grid; gap: calc(var(--dg-gap) * 1.2); min-width: 0; }
.dg-article__section { display: grid; gap: calc(var(--dg-gap) * 0.7); scroll-margin-top: calc(var(--dg-sticky-h) + var(--dg-gap)); }
.dg-article__title { margin: 0; font-size: var(--dg-fs-card-title); font-weight: 700; line-height: 1.3; color: var(--dg-text-primary); }
.dg-article__body { color: var(--dg-text-secondary); font-size: var(--dg-fs-body); line-height: 1.6; overflow-wrap: anywhere; }
.dg-article__body p, .dg-article__body ul, .dg-article__body ol { margin: 0 0 calc(var(--dg-gap) * 0.7); }
.dg-article__body > :last-child { margin-bottom: 0; }
.dg-article__body ul { list-style: none; padding: 0 0 0 calc(var(--dg-gap) / 5); display: grid; gap: calc(var(--dg-gap) * 0.4); }
.dg-article__body li { position: relative; padding-left: calc(var(--dg-gap) * 0.9); }
.dg-article__body li::before { content: ''; position: absolute; left: 0; top: calc(var(--dg-gap) / 2);
    width: 6px; height: 6px; border-radius: var(--dg-radius-pill); background: var(--dg-bg-accent); }
.dg-article__body a { color: var(--dg-text-accent-sm); }
.dg-requisites { background: var(--dg-bg-surface); border-radius: var(--dg-radius-card-sm);
    padding: var(--dg-card-pad-sm); display: grid; gap: calc(var(--dg-gap) * 0.3); }
.dg-requisites .dg-eyebrow { margin: 0 0 calc(var(--dg-gap) * 0.3); }
.dg-requisites p { margin: 0; font-weight: 500; line-height: 1.5; color: var(--dg-text-primary); overflow-wrap: anywhere; }

@media (min-width: 1024px) {
    .dg-legal { padding-block: calc(var(--dg-gap) * 3.2) var(--dg-section-y); }
    .dg-legal__cols { grid-template-columns: var(--dg-toc-w) var(--dg-article-w); gap: var(--dg-legal-gap); }
    .dg-legal__cols--single { grid-template-columns: minmax(0, var(--dg-container-text)); }
    .dg-toc { position: sticky; top: calc(var(--dg-sticky-h) + var(--dg-gap));
        padding: calc(var(--dg-gap) * 1.1) calc(var(--dg-gap) * 1.2); }
    .dg-toc__summary { display: none; }
    .dg-toc__label { display: block; margin: 0 0 calc(var(--dg-gap) * 0.4); }
    .dg-toc__list { margin-top: 0; }
    .dg-article { gap: calc(var(--dg-gap) * 2); }
    .dg-requisites { padding: calc(var(--dg-gap) * 1.4) calc(var(--dg-gap) * 1.6); }
}

/* --- утилиты --- */
.dg-mt { margin-top: var(--dg-gap); }