/* ============================================
   Веб-тест «Фінансовий рівень» (/test/)
   Корпоративний стиль: токени tmpl/brand.css,
   референси - /course/undebt/ і /course/finlevel/.
   Mobile-first.
   ============================================ */

/* Картка тягнеться на висоту екрана, а КАДР гумовий: забирає лишок і
   стискається, коли контенту багато. Це однаково потрібно і телефону, і
   невисокому ноутбуку - на 1024x768 та 1280x800 крок «подушка безпеки»
   інакше не вміщався (заміряно: перебір 91 і 59 px). */
.ft {
    position: relative; /* система координат для хедера, що лежить поверх картки */
    max-width: 460px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-12);
    min-height: 100vh;
    min-height: 100dvh;
    /* ⚠️ І СТЕЛЯ теж: без неї на низькому вікні (1024x768, 1280x800, 320x568)
       картка переростала екран і під згин ішли бейджі сторів на інтро та
       кнопка в бота на результаті. Уся колонка нижче - flex з min-height: 0,
       тож зайве забирають кадри: інтро має object-fit: contain і нічого не
       ріже, квадрат рівня меншає цілком. Ландшафт цю стелю знімає: там
       скрол свідомий, бо інакше текст стає нечитабельним. */
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.ft-screen { flex: 1 1 auto; min-height: 0; display: flex; }
.ft-screen[hidden] { display: none; }
.ft-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* min-height: 0 обовʼязково: без нього aspect-ratio не дає кадру стиснутись */
.ft-quiz .ft-media { flex: 1 1 0; aspect-ratio: auto; min-height: 58px; }
.ft-intro .ft-media,
.ft-media--level { flex: 0 1 auto; min-height: 0; }
.ft-intro .ft-media { background: #fff; }
.ft-intro .ft-media video { object-fit: contain; }
/* Висота хедера. Під неї відступають екрани БЕЗ медіа: хедер на них лежить
   поверх картки так само, як на питаннях, тож вміст мусить починатись нижче. */
/* Фірмовий тіал на ДРІБНОМУ тексті не читається: #00BFA5 дає 2.15 на мʼятній
   картці вставки, --color-primary-dark - 3.02, обидва нижче норми 4.5.
   Тут глибший відтінок того самого кольору: 4.85 на мʼяті, 5.27 на білому.
   ⚠️ Лише для дрібного тексту на світлому тлі. Плашки, кнопки й сегменти
   прогресу лишаються фірмовими --color-primary. */
.ft { --ft-bar-h: 79px; --ft-teal-text: #007a68; }
.ft-body { flex: 0 0 auto; }
.ft-body--pause,
.ft-body--block,
.ft-body--calc { padding-top: var(--ft-bar-h); }
/* ⚠️ flex-shrink: 0 - критично. З `1 1 auto` + min-height: 0 текст можна було
   стиснути НИЖЧЕ його власного вмісту, і картка (overflow: hidden) просто
   зрізала нижній рядок: на вікні 1280x600 так зникав лінк «Пройти ще раз».
   Стискатись має КАДР, він для цього й гумовий. Текст - ніколи. */
.ft-intro .ft-body,
.ft-body--calc,
.ft-body--pause,
.ft-body--block,
.ft-body--result {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Картка екрана ── */
.ft-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card, #eef1f3);
    border-radius: var(--radius-2xl, 24px);
    box-shadow: var(--shadow-card);
    /* ⚠️ Не `hidden`: коли вміст усе ж не влазить (дуже низьке вікно, системний
       великий шрифт), hidden мовчки ЗНИЩУЄ нижній рядок. auto в тому ж
       безвихідному випадку дає прокрутити картку. У нормі смуги немає. */
    overflow-x: hidden;
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Хедер тесту: лого в колі + назва + лічильник + Stories-прогрес.
   Замінює логотип сайту: під час тесту людині потрібен не перехід на
   головну, а відчуття «скільки ще лишилось». Липкий, бо на довгих
   питаннях смуга має лишатись перед очима.
   ═══════════════════════════════════════════════════════════════════════ */
.ft-bar { z-index: 5; }
.ft-bar[hidden] { display: none; }
.ft-bar__inner { padding: 12px 16px 11px; }

/* Хедер ЗАВЖДИ лежить по верхньому краю картки - і на питаннях поверх медіа,
   і на екранах без медіа. Інакше картка на них починалась би нижче, ніж на
   питаннях, і вся композиція стрибала б при кожному переході.
   --over = на темному кадрі (світлий текст + затемнення),
   --soft = на світлій картці (звичайні кольори, нічого затемнювати не треба). */
.ft-bar--over,
.ft-bar--soft {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    padding-bottom: 16px;
    border-radius: var(--radius-2xl, 24px) var(--radius-2xl, 24px) 0 0;
}
/* Затемнення згори - щоб білий текст читався і на світлому кадрі, і на темному;
   донизу воно розчиняється в нуль. */
.ft-bar--over {
    background: linear-gradient(180deg, rgba(12, 26, 31, 0.66) 0%, rgba(12, 26, 31, 0.34) 58%, rgba(12, 26, 31, 0) 100%);
    color: #fff;
    /* Кадри різні: заміряно контраст тіалової цифри на затемненні по всіх
       дев'яти відео - 6.2-8.4 на темних, але 2.43 на світлому q-easy.
       Тінь на темних кадрах не видно взагалі, а світлий рятує. */
    text-shadow: 0 1px 5px rgba(8, 18, 22, 0.55);
}
.ft-bar--over .ft-bar__back { color: #fff; }
.ft-bar--over .ft-bar__logo { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.ft-bar--over .ft-bar__name { color: #fff; }
/* Поточний крок - фірмовим тіалом, як і на світлому хедері: так цифра
   чіпляє око, а загальна кількість лишається приглушеною. */
.ft-bar--over .ft-bar__count { color: rgba(255, 255, 255, 0.72); }
.ft-bar--over .ft-bar__count b { color: var(--color-primary); }
.ft-bar--over .ft-bar__segi { background: rgba(255, 255, 255, 0.32); }
.ft-bar--over .ft-bar__segi.is-done { background: #fff; }
.ft-bar--over .ft-bar__segi.is-now {
    background: linear-gradient(90deg, #fff 0%, #fff 50%, rgba(255, 255, 255, 0.32) 50%);
}

.ft-bar__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: 9px;
}
.ft-bar__back {
    flex: none;
    width: 34px;
    height: 34px;
    margin-left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full, 999px);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.ft-bar__back svg { width: 19px; height: 19px; }
/* Кружечок лишається 34px, але палець має цілити у 44x44 - розширюємо саму
   зону дотику невидимим псевдоелементом, не чіпаючи вигляд і розкладку. */
.ft-bar__back { position: relative; }
.ft-bar__back::after { content: ''; position: absolute; inset: -5px; }

.ft-bar__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ft-bar__logo {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 999px);
    object-fit: cover;
    background: var(--color-bg-mint);
}
.ft-bar__name {
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}
/* ⚠️ Кольори тут - для СВІТЛОГО хедера (вставка, розрахунок). Заміряно:
   --color-text-muted давав 3.28, фірмовий тіал на цифрі - 2.16 при 15px,
   обидва нижче норми 4.5. На темному медіа питань свої кольори нижче. */
.ft-bar__count {
    margin-left: auto;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
.ft-bar__count b { color: var(--ft-teal-text); font-weight: var(--font-weight-bold); }

/* Режим «пройдено» (результат): замість лічильника - галочка, стрілки назад
   немає - повертатись у пройдений тест нема куди. */
.ft-bar__done { display: none; }
.ft-bar--done .ft-bar__count { display: none; }
.ft-bar--done .ft-bar__back { display: none; }
.ft-bar--done .ft-bar__done {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full, 999px);
    background: var(--color-primary);
    color: #fff;
}
.ft-bar--done .ft-bar__done svg { width: 15px; height: 15px; }
/* без стрілки хедер починається з лого - лишаємо йому той самий відступ */
.ft-bar--done .ft-bar__brand { margin-left: 2px; }

/* Сегменти Stories: пройдені залиті, поточний - наполовину */
.ft-bar__seg { display: flex; gap: 3px; }
.ft-bar__segi {
    flex: 1 1 0;
    height: 3px;
    border-radius: 3px;
    background: var(--color-bg-muted, #eef1f3);
    transition: background var(--transition-base);
}
.ft-bar__segi.is-done { background: linear-gradient(90deg, #0CBD66 0%, #00BFA5 100%); }
.ft-bar__segi.is-now {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 50%, var(--color-bg-muted, #eef1f3) 50%);
}

/* ── Медіа (анімація питання) ── */
.ft-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-mint);
}
/* На питаннях кадр вищий, бо верхню його третину перекриває хедер.
   Інтро лишається 16/9: там у кадрі інфографіка сходинок, її не можна різати. */
.ft-quiz .ft-media { aspect-ratio: 4 / 3; }
/* Анімації рівнів зняті квадратом, і композиція в них крайова (куля на ланцюгу
   внизу, вудка вгорі) - будь-яке кадрування зрізало б суть, тож 1:1 як є. */
/* align-self: center знімає розтягування по ширині, і тоді квадрат меншає
   ЦІЛКОМ (висота тягне за собою ширину через aspect-ratio), а не зрізається
   згори й знизу. Композиція кліпів крайова - кадрувати її не можна. */
.ft-media--level {
    align-self: center;
    max-width: 100%;
    /* Підлога: на дуже низькому вікні кадр має меншати, але не зникати */
    min-height: 120px;
    aspect-ratio: 1 / 1;
    background: var(--color-dark);
}
.ft-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ft-media video[hidden] { display: none; }

.ft-body { padding: var(--space-5) var(--space-5) var(--space-6); }

/* ── Інтро ── */
.ft-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-align: center;
}
/* Підвідня до першого питання (стать) */
.ft-ask {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}
/* ── Репліка Кіра: рецепт .hero__author з resources/css/course.css ────────
   Скопійовано дослівно (той стайлшит на цій сторінці не підключений), крім
   розмірів: тут картка вужча за лендінг, тож фото й хмарка дрібніші. */
.hero__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    text-align: left;
}
.hero__photo { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.hero__photo img {
    /* block, бо інлайнова картинка тягне за собою місце під базову лінію -
       через нього фото було на 3.8px нижче за центр хмарки */
    display: block;
    width: 84px;
    height: 84px;
    border: 2px solid #fff;
    border-radius: var(--radius-full, 999px);
    object-fit: cover;
    background: var(--gradient-brand);
    padding: 4px;
    box-sizing: content-box;
}
.hero__author-name {
    margin-top: 6px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-align: center;
}
.hero__message {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-card, #eef1f3);
    border-radius: var(--radius-lg);
    /* Тінь помітно глибша за --shadow-card: хмарка біла на білій картці, і
       з фірмовою «ледь-ледь» тінню вона зливалася з тлом. */
    box-shadow: 0 6px 20px rgba(16, 42, 67, 0.13);
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text);
}
/* Хвостик цілить у ФОТО, а не в центр колонки: підпис під фото тягне
   спільний центр донизу приблизно на половину своєї висоти, тож піднімаємо
   хвостик рівно на стільки ж. */
.hero__message::before {
    content: '';
    position: absolute;
    top: calc(50% - 11px);
    left: -6px;
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-bg-card);
    border-left: 1px solid var(--color-border-card, #eef1f3);
    border-bottom: 1px solid var(--color-border-card, #eef1f3);
    box-shadow: -3px 3px 6px rgba(16, 42, 67, 0.06);
}
.hero__message p { margin: 0; }

/* Соцдоказ: бейдж App Store - оцінка - бейдж Google Play.
   Колір зірок #f5a623 - той самий, що в .lv-proof на лендінгу лекції
   і в блоці «Додаток» на головній. */
.ft-proof {
    margin-top: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.ft-proof__store { flex: none; display: block; }
.ft-proof__store img { display: block; height: 26px; width: auto; }
.ft-proof__rate { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ft-proof__stars { color: #f5a623; letter-spacing: 1px; font-size: 13px; }
.ft-proof__rate b {
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}
/* Дуже вузькі екрани: бейджі трохи менші, щоб ряд не ломився */
@media (max-width: 380px) {
    .ft-proof { gap: 9px; }
    .ft-proof__store img { height: 22px; }
}

/* ── Головна CTA (бренд-кнопка як btn-telegram, але primary-теал) ── */
.ft-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin-top: var(--space-5);
    padding: 14px 24px;
    background: var(--color-dark);
    color: #fff;
    font-family: var(--font-family);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-button);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-base);
}
.ft-cta--buy { background: var(--color-primary); box-shadow: 0 4px 15px var(--color-primary-glow); }
/* Стрілка праворуч від підпису: показує, що кнопка веде далі, а не підтверджує
   вибір. Та сама сімʼя, що й стрілка «назад» у хедері. gap ні на що не впливає
   в кнопках з одним написом. */
.ft-cta { gap: 10px; }
.ft-cta__go { flex: none; width: 20px; height: 20px; }

/* ── Питання ── */
.ft-q {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ft-desc {
    margin-top: var(--space-3);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--color-text);
    white-space: pre-line;
}

/* ── Варіанти відповідей ── */
.ft-opts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.ft-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: var(--color-bg-card);
    border: 1.5px solid #d8e0e5;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(16, 42, 67, 0.07);
    font-family: var(--font-family);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* Емодзі у власному кружечку: однаковий розмір для всіх варіантів, тож
   ряд не «стрибає» від ширших гліфів */
.ft-opt__e {
    flex: none;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    background: var(--color-bg-mint);
    font-size: 18px;
    line-height: 1;
    /* Гліф емодзі малюється ВИЩЕ базової лінії, а flex центрує лінбокс, не
       малюнок - тому емодзі сиділо на 2px вище центра кола (та сама пастка,
       що з цифрами в PDF-досьє). Падінг зверху опускає лінбокс на ПОЛОВИНУ
       свого значення, тож потрібне P = line-height - 2*ascent - 2*cy, де cy -
       центр чорнила відносно базової лінії. Заміряно скануванням гліфів на
       кеглі 240px по всіх 31 емодзі тесту: ascent 0.775em, cy у середньому
       -0.3694em → P = 0.189em. Висота кола у формулу не входить, тож те саме
       значення вірне і для 34px/18px, і для 38px/21px у сітці.
       Лишкова похибка до 1.1px - самі емодзі намальовані несиметрично
       (🎯 -0.306em проти 🌿 -0.381em), і CSS тут уже безсилий. */
    padding-top: 0.189em;
    transition: background var(--transition-fast);
}
.ft-opt__t { min-width: 0; }
.ft-opt__go { flex: none; width: 17px; height: 17px; margin-left: auto; color: var(--color-text-muted, #9aa4ad); }

.ft-opt:active { background: #d9efe9; border-color: var(--color-primary); }
/* Фокус з клавіатури: браузерний контур на світлій картці майже не видно,
   тому даємо свій - бірюзовий, з відступом, щоб не зливався з рамкою. */
.ft-opt:focus-visible,
.ft-cta:focus-visible,
.btn-telegram:focus-visible,
.ft-bar__back:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
/* Сітки відповідей: короткі варіанти стають картками, емодзі над текстом */
.ft-opts--c2, .ft-opts--c3 { display: grid; gap: var(--space-2); }
.ft-opts--c2 { grid-template-columns: 1fr 1fr; }
.ft-opts--c3 { grid-template-columns: repeat(3, 1fr); }
.ft-opts--c2 .ft-opt, .ft-opts--c3 .ft-opt {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 14px 10px;
    min-height: 94px;
}
.ft-opts--c2 .ft-opt__e, .ft-opts--c3 .ft-opt__e { width: 38px; height: 38px; font-size: 21px; }
.ft-opts--c3 .ft-opt { font-size: var(--text-sm); }
/* непарний останній у 2-колонковій сітці розтягується на весь ряд (кейс подушки: 5 варіантів) */
.ft-opts--c2 .ft-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* довгі лейбли з colsM:1 на вузьких екранах повертаються в стек-рядки */
@media (max-width: 560px) {
    .ft-opts--m1 { grid-template-columns: 1fr; }
    .ft-opts--m1 .ft-opt {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        min-height: 0;
        padding: 11px 14px;
        gap: 12px;
        font-size: var(--text-base);
    }
    .ft-opts--m1 .ft-opt__e { width: 34px; height: 34px; font-size: 18px; }
}

/* ── Сума: повзунок ──────────────────────────────────────────────────────
   Заливка доріжки рахується від --p (0..1, ставить JS) з поправкою на
   ширину кружечка: інакше на краях шкали кольорова частина «тікала» б
   з-під нього на півтора десятки пікселів. */
.ft-inputwrap { margin-top: var(--space-6); }

.ft-amount__val {
    display: block;
    text-align: center;
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.ft-amount__range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin: var(--space-4) 0 0;
    padding: 0;
    height: 34px; /* зона дотику, а не товщина доріжки */
    background: transparent;
    cursor: pointer;
}
.ft-amount__range:focus { outline: none; }

/* WebKit / Blink */
.ft-amount__range::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--color-primary) 0 calc(var(--p, 0.5) * (100% - 30px) + 15px),
        var(--color-bg-muted, #eef1f3) calc(var(--p, 0.5) * (100% - 30px) + 15px) 100%);
}
.ft-amount__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    margin-top: -11px; /* (8 - 30) / 2, щоб кружечок сів на доріжку */
    border-radius: var(--radius-full, 999px);
    background: #fff;
    border: 3px solid var(--color-primary);
    box-shadow: 0 2px 10px rgba(16, 42, 67, 0.22);
}
.ft-amount__range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--color-primary-glow);
}
.ft-amount__range:active::-webkit-slider-thumb { background: var(--color-bg-mint); }

/* Firefox */
.ft-amount__range::-moz-range-track {
    height: 8px;
    border-radius: 6px;
    background: var(--color-bg-muted, #eef1f3);
}
.ft-amount__range::-moz-range-progress {
    height: 8px;
    border-radius: 6px;
    background: var(--color-primary);
}
.ft-amount__range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full, 999px);
    background: #fff;
    border: 3px solid var(--color-primary);
    box-shadow: 0 2px 10px rgba(16, 42, 67, 0.22);
}
.ft-amount__range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--color-primary-glow);
}

.ft-amount__ends {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: var(--text-sm);
    /* secondary, не muted: muted дає контраст 3.54 проти норми 4.5 (WCAG AA) */
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ═══ Екран розрахунку ═══════════════════════════════════════════════════
   Свідома пауза 4-7 с: миттєвий результат читається як «нічого не рахували».
   ═══════════════════════════════════════════════════════════════════════ */
.ft-body--calc { text-align: center; padding-top: var(--space-7, 32px); }
.ft-calc__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ft-ring {
    position: relative;
    width: 146px;
    height: 146px;
    margin: var(--space-6) auto var(--space-6);
}
.ft-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ft-ring circle { fill: none; stroke-width: 9; }
.ft-ring__bg { stroke: var(--color-bg-muted, #eef1f3); }
.ft-ring__fill {
    stroke: var(--color-primary);
    stroke-linecap: round;
    /* Дуга оновлюється щокадру, тож перехід тут не анімує рух, а згладжує
       саме РИВКИ: під час затримки значення не змінюється і перехід не йде. */
    transition: stroke-dashoffset 70ms linear;
}
.ft-ring__num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.ft-ring__num i { font-style: normal; font-size: 17px; color: var(--color-text-secondary); margin-left: 2px; }

.ft-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); text-align: left; }
.ft-step {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.ft-step__t { min-width: 0; }
.ft-step__ico { margin-left: auto; font-size: 17px; opacity: 0.45; transition: opacity var(--transition-base); }
/* Маркер: коло, що стає спінером на активному кроці і галочкою на завершеному */
.ft-step__mark {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-bg-muted, #e3e8ec);
    border-radius: var(--radius-full, 999px);
    font-size: 11px;
    color: #fff;
}
.ft-step.is-now {
    background: var(--color-bg-mint);
    border-color: rgba(0, 191, 165, 0.25);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}
.ft-step.is-now .ft-step__ico { opacity: 1; }
.ft-step.is-now .ft-step__mark {
    border-color: rgba(0, 191, 165, 0.3);
    border-top-color: var(--color-primary);
    animation: ft-spin 0.7s linear infinite;
}
.ft-step.is-done { color: var(--color-text); }
.ft-step.is-done .ft-step__ico { opacity: 1; }
.ft-step.is-done .ft-step__mark {
    background: var(--color-primary);
    border-color: var(--color-primary);
    animation: none;
}
.ft-step.is-done .ft-step__mark::after { content: '✓'; }
@keyframes ft-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ft-step.is-now .ft-step__mark { animation: none; }
}
.ft-calc__note {
    margin: var(--space-5) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: center;
}

/* ── Проміжна вставка ──────────────────────────────────────────────────────
   Екран без медіа: контраст із питаннями тут і є сигналом «це пауза, а не
   ще одне питання». Усе зібрано з наявних рецептів - блок автора з лендінгу
   лекції, кнопка .ft-cta з самого тесту.

   На екрані свідомо НІЧОГО, крім репліки і кнопки: заголовок з пігулкою
   власник зняв як порожній шум (20.09.2026). Увага має бути на цитаті. */
.ft-body--pause { text-align: center; }
/* М'ятна картка - головний сигнал «це не питання, це пауза»: людина розуміє
   зміну екрана ще до того, як прочитала текст. Колір той самий, яким на
   сайті залиті «мʼякі» блоки (--color-bg-mint), хмарка на ньому лишається
   білою і виходить на передній план. */
.ft-pause .ft-card { background: var(--color-bg-mint); }
/* Репліка забирає всю вільну висоту і центрується в ній, кнопка лишається
   ПРИБИТОЮ ДО НИЗУ картки: великий палець дотягується до неї не рухаючи
   телефон, і вона завжди на тому самому місці, на якому б екрані не був. */
.ft-pause .hero__author { flex: 1 1 auto; min-height: 0; margin-top: 0; }
/* Перенос рядка в тексті репліки має лишатись переносом - так само, як в
   описах питань (.ft-desc). Це дає автору розбити думку на два абзаци,
   не чіпаючи код. */
.ft-pause .hero__message { white-space: pre-line; }
/* Цитата тут більша, ніж на інтро: вона єдиний зміст екрана */
.ft-pause .hero__photo img {
    width: clamp(72px, 12vh, 96px);
    height: clamp(72px, 12vh, 96px);
}
.ft-pause .hero__message { font-size: clamp(13px, 2.2vh, 15.5px); }
.ft-pause .ft-cta { flex: none; margin-top: var(--space-5); }

/* ── Екран «щось блокує збереження» ────────────────────────────────────────
   Навмисно НЕ мʼятний, як вставка: мʼята у нас означає «все добре, це пауза».
   Тут звичайна біла картка і жовтий акцент - помітно, але без паніки. */
.ft-body--block { text-align: center; }
.ft-block__icon { font-size: 42px; line-height: 1; }
.ft-block__title {
    margin: var(--space-3) 0 0;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ft-block__text {
    margin: var(--space-3) auto 0;
    max-width: 380px;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.ft-block__steps {
    margin: var(--space-4) 0 0;
    padding: 0 0 0 20px;
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text);
}
.ft-block__steps li { margin-top: 8px; }
.ft-block .ft-cta { margin-top: var(--space-5); }
.ft-block .ft-again { margin-top: var(--space-3); }

/* ── Результат ── */
.ft-body--result { text-align: center; }
.ft-count {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}
.ft-level {
    margin-top: var(--space-2);
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.ft-level-desc {
    margin: var(--space-5) auto 0;
    max-width: 440px;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
}
/* Кнопка в бота - дослівний рецепт .btn-telegram з resources/css/course.css
   (той стайлшит на цій сторінці не підключений). Єдина відмінність: ширина
   тягнеться по картці замість жорстких 343px, інакше на мобільному вилазить. */
.ft-result__cta { margin-top: var(--space-6); }
/* Лінк «ще раз» - навмисно тихий: дрібний, вторинним кольором, без рамки.
   Власник колись прибрав тут кнопку як зайвий шум, тож повертаємо саме
   текстовим лінком, який не відтягує увагу від кнопки в бота. */
.ft-again {
    display: block;
    margin: var(--space-4) auto 0;
    padding: 6px 10px;
    background: none;
    border: none;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--transition-base);
}
.ft-again:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 8px; }
.btn-telegram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 343px;
    min-height: 56px;
    padding: 16px 24px;
    background: var(--color-dark);
    box-shadow: var(--shadow-button);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-base);
}
.btn-telegram span {
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-md);
    line-height: 19px;
    color: #fff;
}
.btn-telegram img { width: 24px; height: 24px; }

.ft-noscript {
    margin-top: var(--space-8);
    text-align: center;
    color: var(--color-text-secondary);
}

/* ── Планшет і вище ── */
@media (min-width: 744px) {
    .ft { max-width: 520px; padding-top: var(--space-6); }
    /* Стеля кадру: на високому вікні гумове медіа інакше витягується у вузьку
       смугу й зрізає композицію з боків. 16:10 - те, що було тут раніше. */
    .ft-quiz .ft-media { max-height: calc(520px * 10 / 16); }
    /* На десктопі місця вдосталь - бейджі сторів більші й читабельніші */
    .ft-proof { gap: 18px; }
    .ft-proof__store img { height: 36px; }
    .ft-proof__stars { font-size: 15px; }
    .ft-proof__rate b { font-size: 19px; }
    /* Коли кадр упирається в стелю, а екран ще високий, лишок віддаємо тексту
       й центруємо - інакше внизу картки зяяла б порожня смуга. */
    .ft-quiz .ft-body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* хедер тримається верхнього краю картки, а він поїхав разом з padding-top */
    .ft-bar--over, .ft-bar--soft { top: var(--space-6); }
    .ft-bar__inner { padding-top: 13px; padding-bottom: 12px; }
    .ft { --ft-bar-h: 81px; }
    .ft-bar__logo { width: 32px; height: 32px; }
    .ft-quiz .ft-media { aspect-ratio: 16 / 10; }
    .ft-body { padding: var(--space-6) 28px 28px; }
    .ft-title { font-size: 34px; }
    .ft-q { font-size: 21px; }
    .ft-calc__title { font-size: 22px; }
    .ft-ring { width: 160px; height: 160px; }
}

/* Емодзі-заглушка для питань без відео: та сама висота, що й медіа */
.ft-media--ph { background: linear-gradient(140deg, #263238 0%, #1d4a4a 58%, #0f6b60 100%); }
.ft-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    line-height: 1;
    text-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.ft-ph::after {
    content: attr(data-emoji);
    position: relative;
    z-index: 1;
}
.ft-ph[hidden] { display: none; }
.ft-ph::before {
    content: '';
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 26px rgba(0, 150, 136, 0.12);
    z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   МОБІЛЬНИЙ: один крок = один екран, без прокрутки
   ═══════════════════════════════════════════════════════════════════════
   Заміряно на 375x667: 8 з 15 кроків не вміщались (найгірший - подушка
   безпеки, перебір 171px). Причина структурна: у медіа жорстка пропорція,
   тож воно не віддавало місце тексту, а текст ніде було взяти.

   Рішення - картка на всю висоту екрана, де МЕДІА гумове: воно забирає
   лишок і стискається, коли контенту багато. Побічний ефект саме той, що
   в референсі: кадр зверху, а питання з варіантами притиснуті донизу.
   Плюс шрифти й кнопки міряються у vh, тож на маленькому телефоні все
   дрібнішає рівно настільки, наскільки треба.

   Прокрутку НЕ вимикаю: якщо на якомусь пристрої контент усе ж не влізе
   (системний великий шрифт), хай краще зʼявиться скрол, ніж зріже текст.
   ═══════════════════════════════════════════════════════════════════════ */
/* Умова не лише по ширині: великий телефон у ландшафті (844x390) широкий,
   але низький - і з десктопними кеглями та картками 94px не вміщався геть
   нічого (заміряно: перебір до 200px). Тому компактні стилі вмикає АБО
   вузький екран, АБО низький. Блок стоїть ПІСЛЯ десктопного - виграє він. */
@media (max-width: 743.98px), (max-height: 520px) {
    /* Картка займає ВЕСЬ екран: ні полів сторінки, ні заокруглень, ні тіні -
       як у референсі. Тому глушимо і відступи спільного .wrapper (там 0 80px),
       і власні поля .ft. Тло body робимо білим: якщо адресний рядок браузера
       згортається і dvh на мить розходиться з vh, унизу не блимне сіра смужка. */
    body.ft-page { background: var(--color-bg-card); }
    .ft-page .wrapper { padding: 0; min-height: 0; max-width: none; overflow: visible; }
    /* Структура (гумовий кадр, картка на висоту екрана) тепер базова - тут
       лишається тільки те, що властиве саме телефону. */
    .ft { max-width: none; padding: 0; }
    .ft-card { border: none; border-radius: 0; box-shadow: none; }
    .ft-body { padding-left: clamp(16px, 4.5vw, 22px); padding-right: clamp(16px, 4.5vw, 22px); }

    /* Хедер лежить по краях картки, а вона тепер від краю до краю екрана */
    .ft-bar--over, .ft-bar--soft { top: 0; left: 0; right: 0; border-radius: 0; }
}

/* ══ МАСШТАБ: усе міряється у ВИСОТІ екрана ═══════════════════════════════
   Умова ширша за блок розкладки вище, і це навмисно.

   ⚠️ Системне масштабування Windows (125/150/175/200%, на ноутбуках Lenovo
   це часто 150% з коробки) не робить вікно вужчим - воно робить його
   НИЗЬКИМ: 150% на 1920x1080 дає приблизно 1280x600 у CSS-пікселях. Ширина
   при цьому «доросла», тож десктопна гілка вважала такий екран повноцінним
   і давала кеглі та відступи, розраховані на 900 пікселів висоти.

   Тут ті самі vh-клампи, що рятують телефони, вмикаються за однією лише
   низькою висотою. Тоді 150% виглядає як 100%, просто дрібніше - а не як
   зламана розкладка. 780px - межа, нижче якої висоти вже бракує: звичайний
   ноутбук на 100% дає ~790 і сюди не потрапляє. */
@media (max-width: 743.98px), (max-height: 780px) {
    .ft-body {
        padding-top: clamp(12px, 2.1vh, 18px);
        padding-bottom: clamp(16px, 2.6vh, 24px);
    }

    .ft-q { font-size: clamp(16.5px, 2.85vh, 21px); }
    .ft-desc {
        margin-top: clamp(6px, 1.1vh, 12px);
        font-size: clamp(12px, 2vh, 14.5px);
    }
    .ft-opts { margin-top: clamp(10px, 1.8vh, 20px); gap: clamp(6px, 1.1vh, 10px); }
    .ft-opt {
        padding: clamp(8px, 1.35vh, 12px) 14px;
        gap: clamp(9px, 1.6vh, 12px);
        font-size: clamp(13.5px, 2.25vh, 16px);
    }
    .ft-opt__e {
        width: clamp(27px, 4.7vh, 34px);
        height: clamp(27px, 4.7vh, 34px);
        font-size: clamp(14px, 2.5vh, 18px);
    }
    .ft-opts--c2 .ft-opt, .ft-opts--c3 .ft-opt {
        min-height: clamp(62px, 11vh, 94px);
        padding: clamp(9px, 1.5vh, 14px) 8px;
        gap: clamp(4px, 0.9vh, 8px);
    }
    .ft-opts--c2 .ft-opt__e, .ft-opts--c3 .ft-opt__e {
        width: clamp(30px, 5.3vh, 38px);
        height: clamp(30px, 5.3vh, 38px);
        font-size: clamp(16px, 2.9vh, 21px);
    }

    /* ── Інтро ── */
    .ft-title { font-size: clamp(22px, 4vh, 30px); }
    .hero__author { margin-top: clamp(8px, 1.6vh, 18px); gap: clamp(9px, 1.6vh, 14px); }
    .hero__photo img {
        width: clamp(62px, 10.5vh, 84px);
        height: clamp(62px, 10.5vh, 84px);
    }
    .hero__author-name { margin-top: 6px; font-size: clamp(11.5px, 1.9vh, 13px); }
    .hero__message {
        padding: clamp(9px, 1.5vh, 12px) clamp(11px, 1.8vh, 14px);
        font-size: clamp(11.5px, 1.95vh, 13px);
    }
    .ft-ask { margin-top: clamp(10px, 2vh, 24px); font-size: clamp(13px, 2.15vh, 16px); }
    .ft-proof { margin-top: clamp(10px, 1.9vh, 20px); }
    .ft-proof__store img { height: clamp(18px, 3.1vh, 26px); }

    /* ── Проміжна вставка ── */
    .ft-pause .hero__author { margin-top: 0; }
    .ft-pause .ft-cta { margin-top: clamp(12px, 2.2vh, 22px); }

    /* ── Сума: повзунок ── */
    .ft-inputwrap { margin-top: clamp(12px, 2.2vh, 24px); }
    .ft-amount__val { font-size: clamp(24px, 4.2vh, 32px); }
    .ft-amount__range { margin-top: clamp(10px, 1.9vh, 18px); }
    .ft-cta { min-height: clamp(44px, 7.4vh, 52px); margin-top: clamp(10px, 1.9vh, 20px); }

    /* ── Розрахунок: медіа немає, тож вміст просто центруємо по висоті картки,
       інакше все тулиться вгорі, а півекрана лишається порожнім ── */
    /* ⚠️ Тільки відступ. Розкладку (flex: 1 0 auto - росте, але НЕ стискається
       нижче свого тексту) задає базове правило, і передоголошувати її тут не
       можна: саме так сюди колись повернулось би обрізання нижнього рядка. */
    .ft-body--calc { padding-top: clamp(16px, 3vh, 32px); }
    .ft-calc__title { font-size: clamp(17px, 2.9vh, 20px); }
    .ft-ring {
        width: clamp(104px, 19vh, 146px);
        height: clamp(104px, 19vh, 146px);
        margin: clamp(14px, 2.6vh, 24px) auto;
    }
    .ft-ring__num { font-size: clamp(23px, 4.2vh, 32px); }
    .ft-step { padding: clamp(8px, 1.5vh, 12px) 14px; font-size: clamp(12.5px, 2.1vh, 15px); }
    .ft-steps { gap: clamp(5px, 1vh, 8px); }
    .ft-calc__note { margin-top: clamp(10px, 2vh, 20px); }

    /* ── Результат: квадрат кадру лишаємо (рости йому не даємо - cover зрізав би
       боки композиції), а вільну висоту віддаємо тексту, центруючи його ── */
    .ft-media--level { flex: 0 1 auto; aspect-ratio: 1 / 1; }
    .ft-level { font-size: clamp(22px, 4vh, 30px); }
    .ft-level-desc {
        margin-top: clamp(10px, 1.9vh, 20px);
        font-size: clamp(12.5px, 2.05vh, 15px);
    }
    .ft-result__cta { margin-top: clamp(12px, 2.3vh, 24px); }
    .btn-telegram { min-height: clamp(46px, 7.8vh, 56px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Наведення - ТІЛЬКИ для справжнього курсора
   ═══════════════════════════════════════════════════════════════════════
   На тачскрині браузер лишає :hover на елементі під пальцем після тапу.
   Наступне питання малює свій варіант рівно на тому ж місці - і людина
   бачить «уже вибраний» пункт із бірюзовою рамкою, нічого не натиснувши.
   Гейт (hover: hover) and (pointer: fine) - той самий, яким у бренд-гайді
   відсікаються прев'ю-відео на картках: миша так, палець ні.

   Саме наведення міняє ЛИШЕ колір. Підйом (translateY) і зростання тіні
   прибрано: brand-guide.html, розділ Motion - «Cards do not lift on hover
   any more (owner call, Aug 2026). Do not reintroduce a hover lift».
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
    .ft-again:hover { color: var(--color-text); }
    .ft-bar__back:hover { background: var(--color-bg-mint); color: var(--color-primary); }
    .ft-bar--over .ft-bar__back:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
    .ft-cta:hover { background: var(--color-dark-hover); }
    .ft-cta--buy:hover { background: var(--color-primary-hover); }
    .btn-telegram:hover { background: var(--color-dark-hover); }
    .ft-opt:hover {
        border-color: var(--color-primary);
        background: var(--color-bg-mint);
    }
    .ft-opt:hover .ft-opt__e { background: #fff; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Телефон у ландшафті
   ═══════════════════════════════════════════════════════════════════════
   При висоті 375px «один крок = один екран» недосяжний чесно: щоб усе
   влізло, текст довелось би зменшити до нечитабельного. Тому тут свідомо
   ІНША домовленість - сторінка гортається, але кадр обмежений, щоб
   питання й варіанти були видні одразу, без прокрутки наосліп.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 520px) {
    .ft { min-height: 0; max-height: none; }
    .ft-screen { flex: 0 0 auto; }
    /* ⚠️ .ft-screen - це ФЛЕКС-РЯДОК, тож flex на картці керує її ШИРИНОЮ.
       З `flex: 0 0 auto` картка бралась по max-content: на екрані без медіа це
       вся репліка в один рядок - 1049px при екрані 844 і горизонтальний скрол.
       Ширину тримаємо повну, а рости вгору картці тут і так нема куди. */
    .ft-card { flex: 1 1 auto; max-width: 100%; }
    .ft-media { flex: 0 0 auto; aspect-ratio: 16 / 9; max-height: 38vh; }
    .ft-intro .ft-media { aspect-ratio: 16 / 9; max-height: 34vh; }
    .ft-intro .ft-body,
    .ft-body--calc,
    .ft-body--result { flex: 0 0 auto; display: block; }
    .ft-bar--over, .ft-bar--soft { position: absolute; }
    /* Розрахунку медіа не тримає, тож стискаємо сам блок: кільце менше,
       кроки щільніші - інакше він єдиний тут вимагав прокрутки. */
    .ft-body--calc,
    .ft-body--pause { padding-top: calc(var(--ft-bar-h) + 4px); }
    .ft-calc__title { font-size: 16px; }
    .ft-ring { width: 82px; height: 82px; margin: 10px auto; }
    .ft-ring__num { font-size: 20px; }
    .ft-ring__num i { font-size: 12px; }
    .ft-step { padding: 6px 12px; font-size: 12.5px; }
    .ft-steps { gap: 4px; }
    .ft-calc__note { margin-top: 8px; }
    /* Інтро: у ландшафті кожен піксель на рахунку */
    .hero__author { margin-top: 6px; }
    .hero__photo img { width: 56px; height: 56px; }
    .hero__message { padding: 8px 10px; font-size: 11.5px; }
    .ft-ask { margin-top: 8px; }
    .ft-proof { margin-top: 8px; }
    .ft-proof__store img { height: 18px; }
}