/* ============================================================
   home.css — те, що є лише на головній сторінці
   ============================================================

   Порядок підключення:
       /assets/ui.css      — токени й дрібні компоненти (.ui-*)
       /assets/blocks.css  — секції, галерея, переваги, FAQ, hero
       /assets/home.css    — цей файл

   Тут навмисно мало. Головна зібрана з тих самих блоків, що й
   сторінки послуг: секції — .sec, картки послуг — .subcards,
   матеріали — .advantage-card, умови — .order-terms, перший екран —
   .hero. Власного CSS потребують рівно чотири речі, яких на сторінках
   послуг немає:

     1. РОЗВИЛКА «поштучно чи рулон» — головний блок сторінки.
     2. ПЕРЕВІРКА МАКЕТА — єдиний інструмент головної.
     3. КРОКИ «як це працює».
     4. СМУГА «ще друкуємо» внизу.

   Коли такий самий блок знадобиться другій сторінці — переносимо його
   в blocks.css, а не копіюємо. Саме так сюди потрапив .hero.
   ============================================================ */


/* ============================================================
   1. РОЗВИЛКА: НАКЛЕЙКИ НА АРКУШАХ ЧИ ЕТИКЕТКИ В РУЛОНІ
   ============================================================

   Найважливіший блок головної. Це не «переваги» й не каталог, а
   відповідь на питання, з яким людина найчастіше пише в чат: у неї є
   потреба (наліпити щось на банку), і вона не знає, яка з двох послуг
   їй потрібна. Дві колонки поруч дають порівняти за секунди — список
   послуг цього не дає в принципі.

   Тому картки навмисно великі, з кнопкою в кожній, і стоять одразу
   під першим екраном. Обидві кнопки червоні: тут немає «правильного»
   й «другорядного» вибору, є два різні виробництва.
   ============================================================ */

.route {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.route__card {
    /* Падінг у змінній, бо фото має виходити за нього на всю ширину
       картки — від'ємні поля рахуються саме з цього значення. */
    --route-pad: clamp(22px, 2.6vw, 30px);
    display: flex;
    flex-direction: column;
    padding: var(--route-pad);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.route__card:hover {
    border-color: var(--c-brand-line);
    box-shadow: var(--sh-md);
}

/* Фото послуги на всю ширину картки.
   «Наклейки поштучно» й «етикетки в рулоні» — різниця, яку словами
   пояснювати довго, а одним кадром видно одразу: там окремі кружечки
   на аркуші, тут стрічка, що йде з рулону.

   Кадрування фіксоване (16:10, object-fit: cover), тож будь-яке фото
   стає на місце без правок CSS, а дві картки лишаються однакової
   висоти незалежно від пропорцій знімків. */
.route__media {
    margin: calc(var(--route-pad) * -1) calc(var(--route-pad) * -1) var(--sp-4);
    /* Радіус на 1px менший за картку — інакше кут картинки визирає
       з-під її рамки тонкою світлою рискою. */
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
    overflow: hidden;
    background: var(--g-100);
}

.route__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .4s ease;
}
/* Ледь помітне наближення на наведенні — картка вже реагує рамкою й
   тінню, фото просто підтримує цей рух. */
.route__card:hover .route__media img { transform: scale(1.03); }

.route__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.route__title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--c-navy);
}

/* Тираж — перше, за чим відсіюють варіант. Тому він винесений із
   списку характеристик у заголовок: «від 300 шт» одразу відповідає
   тому, кому потрібно 50. */
.route__badge {
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    background: var(--c-brand-soft);
    border: 1px solid var(--c-brand-line);
    color: var(--c-brand);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.route__lead {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
}

/* Характеристики списком означень: ліворуч — про що йдеться,
   праворуч — значення. Пари в обох картках однакові й стоять у тому
   самому порядку, інакше порівняння перетворюється на пошук. */
.route__specs {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-4);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--g-200);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.route__specs dt {
    color: var(--g-600);
    white-space: nowrap;
}

.route__specs dd {
    margin: 0;
    color: var(--g-850);
}
.route__specs dd strong { color: var(--c-navy); font-weight: var(--fw-semi); }

/* Кнопка притискається до низу: картки різної висоти, і два CTA на
   різних рівнях читаються як різна важливість. */
.route__foot { margin-top: auto; }

.route__who {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}
.route__who strong { color: var(--g-800); font-weight: var(--fw-semi); }


/* Каталог самоклейки: рівно вісім карток, тож розкладаємо їх 4+4.
   Спільна сітка в blocks.css — auto-fit, minmax(190px, 1fr) — на
   1280px дає пʼять колонок, і другий ряд лишається обірваним із трьох
   карток. Тут потрібен саме симетричний блок. */
@media (min-width: 900px) {
    .subcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Другий каталог у тій самій світлій смузі. Окремою секцією він
   зламав би чергування фонів по всій сторінці нижче, а так це один
   блок із двома частинами — і відступ між ними більший за звичайний,
   щоб вони не злиплися в один список. */
.catalog-next { margin-top: clamp(44px, 5vw, 72px); }


/* ============================================================
   2. ПЕРЕВІРКА МАКЕТА
   ============================================================

   Ліворуч — навіщо це, праворуч — сам інструмент. Текст і дію не
   змішуємо в одну колонку навмисно: рамка для файлу має бути видима
   як рамка з першого погляду, інакше її читають як черговий банер.

   Поведінка — /assets/design-check.js.
   ============================================================ */

.dcheck {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
}

.dcheck__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 var(--sp-3);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--c-ok-bg);
    border: 1px solid var(--c-ok-line);
    color: var(--c-ok);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}
.dcheck__eyebrow i { display: block; line-height: 1; }

.dcheck__lead {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--g-700);
}
.dcheck__lead strong { color: var(--c-navy); font-weight: var(--fw-semi); }

/* Обіцянка приватності стоїть у тексті, а не дрібним шрифтом під
   рамкою: для багатьох це вирішальний аргумент кинути сюди файл. */
.dcheck__privacy {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: var(--sp-4) 0 0;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--g-700);
}
.dcheck__privacy i {
    flex-shrink: 0;
    position: relative;
    top: 2px;
    color: var(--c-ok);
}

/* --- Панель --- */
.dcheck__panel {
    padding: clamp(16px, 2vw, 22px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-md);
}

/* --- Перемикач «друк / порізка» ---
   Стоїть НАД рамкою, а не під результатом: питання «що ви з цим
   робитимете» треба поставити до того, як людина кине файл, інакше
   вона отримає відповідь не на своє питання й піде. */
.dcheck__modes { margin-bottom: var(--sp-3); }

.dcheck-seg {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--sp-2);
    padding: 4px;
    border-radius: var(--r-btn);
    background: var(--g-100);
}

/* Повзунок. Рівно половина доріжки з поправкою на внутрішні 4px, їде
   трансформом — це єдина властивість, яку браузер анімує без перерахунку
   розкладки. Стан бере з data-mode на самій доріжці, тож JS лишається
   один рядок і жодних вимірювань. */
.dcheck-seg__glider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: var(--r-btn);
    background: var(--c-navy);
    box-shadow: 0 4px 12px -4px rgba(30, 58, 95, .55);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.dcheck-seg[data-mode="cut"] .dcheck-seg__glider { transform: translateX(100%); }

.dcheck-seg__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: none;
    border-radius: var(--r-btn);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    line-height: 1.2;
    color: var(--g-700);
    cursor: pointer;
    transition: color var(--transition);
}
.dcheck-seg__btn:hover { color: var(--c-navy); }
.dcheck-seg__btn.is-active { color: var(--g-0); }
.dcheck-seg__btn.is-active:hover { color: var(--g-0); }

.dcheck-seg__btn i,
.dcheck-seg__btn svg {
    flex-shrink: 0;
    display: block;
    line-height: 1;
    font-size: 1.05em;
}

/* На телефоні підпис із іконкою лягає у два рядки й доріжка виростає
   до 60px. Іконка тут декоративна — прибираємо її, і підпис стає в
   один рядок. */
@media (max-width: 620px) {
    .dcheck-seg__btn {
        padding: 10px 8px;
        font-size: var(--fs-xs);
    }
    .dcheck-seg__btn i,
    .dcheck-seg__btn svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dcheck-seg__glider { transition: none; }
}

.dcheck__mode-note {
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}

/* --- Зона файлу --- */
.dcheck__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 260px;
    padding: var(--sp-5) var(--sp-4);
    border: 2px dashed var(--g-300);
    border-radius: var(--r-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.dcheck__drop:hover,
.dcheck__drop.is-over {
    border-color: var(--c-brand-line);
    background: var(--c-brand-soft);
}
/* Фокус із клавіатури приходить на прихований input — підсвічуємо
   рамку, інакше з клавіатури не видно, де ти. */
.dcheck__drop:focus-within {
    border-color: var(--c-accent);
    box-shadow: var(--sh-focus);
}

/* Прибираємо input з очей, але лишаємо у фокусному порядку */
.dcheck__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dcheck__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: var(--sp-2);
    border-radius: var(--r-round);
    background: var(--c-navy);
    color: var(--g-0);
    font-size: 1.6rem;
}
.dcheck__icon i { display: block; line-height: 1; }

.dcheck__cta {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}
.dcheck__or      { font-size: var(--fs-sm); color: var(--g-600); }
.dcheck__formats {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--g-500);
}

/* Стан обробки: тягнути вже нема куди */
.dcheck__drop.is-busy {
    cursor: progress;
    pointer-events: none;
    border-color: var(--g-200);
}
.dcheck__drop.is-busy .dcheck__icon { animation: dcheckPulse 1.1s ease-in-out infinite; }

@keyframes dcheckPulse {
    0%, 100% { opacity: .35; transform: scale(.94); }
    50%      { opacity: 1;   transform: scale(1.04); }
}

/* Рамка ховається під час показу результату. Правило потрібне явно:
   у .dcheck__drop заданий display:flex, а він перебиває display:none
   з атрибута hidden — рамка лишалася на екрані поверх відповіді. */
.dcheck__drop[hidden] { display: none; }

/* --- Результат --- */
.dcheck__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--g-200);
}

/* Сцена превʼю. Розміром і підкладкою повторює превʼю конфігуратора
   етикеток: макет треба РОЗДИВИТИСЬ, а не впізнати.

   Підкладка темніша за панель — той самий висновок, що й там: біле тіло
   макета на майже білому фоні не читалося, і людина не бачила, що поля
   порожні. Тут ще й шахівниця, бо на головній макет показуємо як є, без
   намальованої етикетки під ним: клітинки одразу відрізняють прозорий
   фон від білої заливки.

   Висота фіксована в діапазоні: панель не має стрибати між файлами
   різних пропорцій, а сама рамка для файлу — рівно 260px. */
.dcheck__preview {
    position: relative;   /* якір для .change-file-btn */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    max-height: 380px;
    margin-bottom: var(--sp-3);
    padding: clamp(12px, 1.6vw, 18px);
    border-radius: var(--r-lg);
    background-color: #bcc5d1;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, .35) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, .35) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .35) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .35) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    overflow: hidden;
}

/* Тіло сцени — те, що перемальовує JS. Кнопка «Змінити файл» лежить
   поруч, а не всередині: інакше її зносив би кожен новий innerHTML. */
.dcheck__preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 344px;
}

.dcheck__preview img {
    max-width: 100%;
    max-height: 344px;
    object-fit: contain;
    border-radius: var(--r-xs);
    /* Тінь відділяє макет від підкладки навіть тоді, коли по краю в
       нього світла заливка */
    box-shadow: 0 12px 28px -14px rgba(16, 24, 40, .75);
}

/* Превʼю немає (AI, EPS, CDR) — показуємо розширення, а не порожній
   прямокутник: порожнеча читається як помилка завантаження. */
.dcheck__preview.is-empty {
    background-image: none;
    background: var(--g-50);
    border: 1px dashed var(--g-300);
}

.dcheck__thumb-ext {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    color: var(--g-400);
}

.dcheck__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.dcheck__file {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}

.dcheck__weight {
    font-size: var(--fs-xs);
    color: var(--g-500);
}


/* Вердикт одним рядком. Ліва межа кольором стану — той самий прийом,
   що в порадах нижче, тож блок читається як їхній підсумок. */
.dcheck__verdict {
    margin: 0 0 var(--sp-3);
    padding: 11px 14px;
    border-radius: var(--r-md);
    border-left: 3px solid var(--g-300);
    background: var(--g-50);
    font-size: var(--fs-base);
    line-height: 1.45;
    color: var(--g-850);
}
.dcheck__verdict strong { display: block; color: var(--c-navy); }
.dcheck__verdict--ok   { background: var(--c-ok-bg);     border-left-color: var(--c-ok); }
.dcheck__verdict--warn { background: var(--c-warn-bg);   border-left-color: var(--c-warn-strong); }
.dcheck__verdict--bad  { background: var(--c-danger-bg); border-left-color: var(--c-danger); }

/* Дисклеймер дрібним: обіцяти «схвалено» ми не можемо й не хочемо */
.dcheck__verdict-note {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    color: var(--g-600);
}

.dcheck-rows { margin: 0; }

.dcheck-row {
    display: grid;
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    gap: var(--sp-3);
    padding: 9px 0;
    border-bottom: 1px solid var(--g-100);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.dcheck-row:last-child { border-bottom: none; }
.dcheck-row dt { color: var(--g-600); }
.dcheck-row dd { margin: 0; color: var(--g-850); }
.dcheck-row strong { color: var(--c-navy); }

.dcheck__dim { font-size: var(--fs-xs); color: var(--g-500); }

.dcheck-badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}
.dcheck-badge--ok   { background: var(--c-ok-bg);     border: 1px solid var(--c-ok-line);     color: var(--c-ok); }
.dcheck-badge--warn { background: var(--c-warn-bg);   border: 1px solid var(--c-warn-line);   color: var(--c-warn); }
.dcheck-badge--bad  { background: var(--c-danger-bg); border: 1px solid var(--c-danger-line); color: var(--c-danger); }

/* --- Зворотне питання «а на 50×50 вистачить?» --- */
.dcheck__ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-size: var(--fs-sm);
    color: var(--g-800);
}

.dcheck__num {
    width: 72px;
    padding: 7px 10px;
    text-align: center;
}

/* Пояснення до підставлених чисел — окремим рядком під питанням, щоб
   не розривати саму фразу «А на ⬚ × ⬚ мм вистачить?» */
.dcheck__ask-note {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--g-600);
}
.dcheck__x { color: var(--g-500); }

/* Відповідь складається з кількох незалежних тверджень (роздільність,
   тонкі лінії, відступ від краю, кегль, пропорція). Розділяємо їх
   повітрям, а не переносом рядка: суцільним блоком це читалося як
   один довгий абзац, у якому не видно, скільки саме зауважень. */
.dcheck__gap { display: block; height: 7px; }

.dcheck__answer:empty { display: none; }
.dcheck__answer {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-850);
}

/* --- Поради --- */
.dcheck-notes {
    list-style: none;
    margin: var(--sp-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.dcheck-notes:empty { display: none; }

.dcheck-note {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--g-300);
    background: var(--g-50);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--g-800);
}
.dcheck-note--info { border-left-color: var(--c-accent); }
.dcheck-note--warn { border-left-color: var(--c-warn-strong); background: var(--c-warn-bg); }
.dcheck-note--bad  { border-left-color: var(--c-danger);      background: var(--c-danger-bg); }

.dcheck__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.dcheck__actions-note {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
}

/* Поки файл їде в сховище, кнопка має показати, що клік почуто */
.dcheck__actions .ui-btn.is-loading {
    opacity: .7;
    pointer-events: none;
}

@media (max-width: 860px) {
    .dcheck { grid-template-columns: minmax(0, 1fr); }
    .dcheck__drop { min-height: 210px; }
}

@media (max-width: 620px) {
    .dcheck-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .dcheck__actions .ui-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .dcheck__drop.is-busy .dcheck__icon { animation: none; }
    .route__card:hover .route__media img { transform: none; }
}


/* ============================================================
   2б. СХЕМА «ЩО РОБИТИ З МАКЕТОМ»
   ============================================================

   Три стани файлу — один фініш. Схема тримає ту саму думку, що й
   список поруч, але показує головне, чого список не показує: шляхи
   різні за довжиною, а кінець у всіх один.

   Кольори тут, а не в атрибутах SVG: var() у presentation-атрибуті
   (fill="var(--c-brand)") працює не в кожному браузері, і там, де не
   працює, значення вважається невалідним — заливка падає в чорну
   типову. Та сама причина описана в maket-requirements.css.
   ============================================================ */

.mflow {
    padding: clamp(16px, 2vw, 24px);
    background: var(--g-0);
    border: 1px solid var(--g-200);
    border-radius: var(--r-lg);
}

.mflow svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Картки станів --- */
.mflow__card {
    fill: var(--g-0);
    stroke-width: 2;
}
/* Колір рамки — це стан, а не декор: зелена «все гаразд», золота
   «треба глянути», сіро-синя «поки нічого немає». */
.mflow__card--ok   { stroke: var(--c-ok-line);   fill: var(--c-ok-bg); }
.mflow__card--warn { stroke: var(--c-warn-line); fill: var(--c-warn-bg); }
.mflow__card--none { stroke: var(--g-300);       fill: var(--g-50); }

.mflow__title {
    font-family: var(--font);
    font-size: 14px;
    font-weight: var(--fw-bold);
    fill: var(--c-navy);
}

.mflow__sub {
    font-family: var(--font);
    font-size: 11px;
    fill: var(--g-600);
}

/* --- Шлях --- */
.mflow__line {
    fill: none;
    stroke: var(--g-300);
    stroke-width: 2;
    stroke-linecap: round;
}
.mflow__arrow { fill: var(--g-400); }

/* Проміжна зупинка. Біла заливка обовʼязкова: плашка стоїть просто на
   лінії й має її перекрити, інакше лінія просвічує крізь текст. */
.mflow__pill {
    fill: var(--g-0);
    stroke: var(--g-300);
    stroke-width: 1.5;
}

.mflow__pill-text {
    font-family: var(--font);
    font-size: 11px;
    font-weight: var(--fw-semi);
    fill: var(--g-700);
}

/* --- Фініш --- */
.mflow__target { fill: var(--c-brand); }

.mflow__target-text {
    font-family: var(--font);
    font-size: 17px;
    font-weight: var(--fw-bold);
    fill: var(--g-0);
}

.mflow__caption {
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4) 0 0;
    border-top: 1px solid var(--g-200);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--g-700);
}


/* ============================================================
   3. КРОКИ «ЯК ЦЕ ПРАЦЮЄ»
   ============================================================

   Чотири кроки, а не сім. Довгий перелік описує наш процес, а людині
   треба знати лише те, що робить вона сама: порахувати, надіслати
   файл, оплатити, отримати. Решта — наша робота, і в списку кроків
   вона лише подовжує дорогу.

   Нумерація через counter, а не цифрами в розмітці: переставили
   пункт — нумерація зійшлася сама.
   ============================================================ */

.steps {
    /* Проміжок у змінній: із нього ж рахується довжина зʼєднувальної
       лінії між кроками, тож два числа мають бути одним. */
    --steps-gap: clamp(18px, 2.2vw, 28px);
    --mark-size: 64px;

    counter-reset: raz-step;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--steps-gap);
    margin: 0;
    padding: 0;
}

.step {
    counter-increment: raz-step;
    position: relative;
    text-align: center;
}

/* Лінія до наступного кроку. Малюємо не одну довгу під усім блоком, а
   по відрізку від кола до кола: так вона сама зникає там, де ряд
   обривається, і не треба рахувати геометрію всього блоку.

   Права межа заходить у сусідню колонку: -50% ширини кроку, мінус
   проміжок, плюс радіус кола — саме там починається наступне коло. */
.step::after {
    content: "";
    position: absolute;
    top: calc(var(--mark-size) / 2);
    left: calc(50% + var(--mark-size) / 2 + 8px);
    right: calc(-50% - var(--steps-gap) + var(--mark-size) / 2 + 8px);
    height: 2px;
    background: var(--g-200);
}
.step:last-child::after { content: none; }

/* Коло з іконкою. Контурне, а не залите: чотири суцільні темні кола
   поспіль читалися б як панель кнопок, а це маршрут. */
.step__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mark-size);
    height: var(--mark-size);
    margin-bottom: var(--sp-3);
    border-radius: var(--r-round);
    background: var(--g-0);
    border: 2px solid var(--c-navy);
    color: var(--c-navy);
    font-size: 1.55rem;
}
.step__mark i { display: block; line-height: 1; }

/* Номер сидить на самому колі, а не окремим рядком: так він не забирає
   висоту, але порядок кроків видно з першого погляду. Обідок кольору
   секції відрізає його від лінії, яка проходить поруч. */
.step__mark::after {
    content: counter(raz-step);
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-round);
    background: var(--c-brand);
    box-shadow: 0 0 0 3px var(--g-50);
    color: var(--g-0);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.step__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--c-navy);
}

.step__desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--g-700);
}

/* Планшет: два ряди по два. Лінія після кожного другого кроку вела б
   у порожнечу з краю ряду — прибираємо. */
@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step:nth-child(even)::after { content: none; }
}


/* ============================================================
   4. СМУГА «ЩЕ ДРУКУЄМО»
   ============================================================

   Плакати, дипломи й креслення нікуди не поділися — але друкарня
   тепер про наклейки та етикетки, і на головній ці послуги не мають
   виглядати рівними з нею. Звідси формат: один рядок тексту з
   посиланнями, без карток, без картинок, без кнопки.

   Прибрати їх зовсім було б дорожче, ніж здається: за цими запитами
   до нас ходять 21 рік, і людина, яка не знайде звичного пункту,
   вирішить, що друкарня закрилася, а не що вона змінила профіль.
   ============================================================ */

.morep {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--g-700);
}

.morep__label {
    font-weight: var(--fw-semi);
    color: var(--c-navy);
}

.morep__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-4);
    margin: 0;
    padding: 0;
}


/* ============================================================
   5. АДАПТИВ
   ============================================================ */

@media (max-width: 860px) {
    /* Дві картки розвилки поруч на планшеті вже не порівнюються —
       текст у кожній стискається до трьох слів у рядок. */
    .route { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    /* Кроки стають вертикальною стрічкою: коло ліворуч, текст праворуч,
       лінія тягнеться згори вниз. Чотири центровані блоки стосом
       розсипалися б на непов'язані картки — а це маршрут. */
    .steps { grid-template-columns: minmax(0, 1fr); }

    .step {
        display: grid;
        grid-template-columns: var(--mark-size) minmax(0, 1fr);
        gap: 4px var(--sp-3);
        text-align: left;
    }
    .step__mark  { grid-row: 1 / 3; margin-bottom: 0; }
    .step__title { align-self: center; margin-bottom: 0; }

    /* Повертаємо лінію парним крокам (у стосі вони вже не з краю ряду),
       але не останньому — після нього вести нікуди. */
    .step:nth-child(even):not(:last-child)::after { content: ""; }
    .step::after {
        top: calc(var(--mark-size) + 8px);
        bottom: calc(var(--steps-gap) * -1 + 8px);
        left: calc(var(--mark-size) / 2 - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }

    .route__head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
    }

    /* Списку означень у два стовпці на телефоні бракує ширини:
       значення переносяться по одному слову. Ставимо парами. */
    .route__specs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .route__specs dt { margin-top: var(--sp-2); }
    .route__specs dt:first-child { margin-top: 0; }
}