:root {
    --bg: #05070b;
    --text: #f5f1e8;
    --muted: rgba(245, 241, 232, .70);
    --soft: rgba(245, 241, 232, .46);
    --line: rgba(245, 241, 232, .20);
    --line-strong: rgba(245, 241, 232, .42);
    --accent: #d6af68;
    --accent-light: #ffe1a1;
    --danger: #ff766f;
    --ok: #bfe9c5;
    --shadow: 0 30px 90px rgba(0, 0, 0, .42);
    --ease: cubic-bezier(.2, .82, .22, 1);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
button, input { font: inherit; }
button { color: inherit; }

.quiz-root {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg);
}

.film {
    position: fixed;
    inset: 0;
    z-index: -5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: saturate(1.08) contrast(1.08) brightness(.88);
    transform: scale(1.015);
}

.film-tone {
    position: fixed;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 7, 11, .74) 0%, rgba(5, 7, 11, .54) 34%, rgba(5, 7, 11, .22) 70%, rgba(5, 7, 11, .38) 100%),
        linear-gradient(180deg, rgba(5, 7, 11, .42), rgba(5, 7, 11, .18) 44%, rgba(5, 7, 11, .62));
}

.film-vignette {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 36%, rgba(214, 175, 104, .18), transparent 25%),
        radial-gradient(circle at 15% 85%, rgba(255, 255, 255, .08), transparent 24%),
        radial-gradient(circle at center, transparent 32%, rgba(0, 0, 0, .42) 100%);
}

.film-lines {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: .24;
    mix-blend-mode: screen;
    background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 100% 6px;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(22px, env(safe-area-inset-top)) clamp(18px, 4vw, 56px) 18px;
    pointer-events: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
    letter-spacing: .03em;
    pointer-events: auto;
}

.brand-sign {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(245, 241, 232, .34);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(8px);
}

.brand-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 500;
}

.topbar-note {
    font-size: 12px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
}

.stage {
    width: min(1240px, calc(100vw - clamp(32px, 8vw, 96px)));
    min-height: 100svh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: clamp(38px, 7vw, 96px);
    padding: 104px 0 50px;
}

.intent {
    align-self: center;
    padding-bottom: 18px;
    text-shadow: 0 20px 60px rgba(0,0,0,.70);
}

.intent-index,
.question-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-light);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 500;
}

.intent-index::before,
.question-mark::before {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
}

.intent h1 {
    margin: 22px 0 22px;
    max-width: 560px;
    font-size: clamp(38px, 4.7vw, 72px);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 430;
}

.intent p {
    margin: 0;
    max-width: 530px;
    color: var(--muted);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    font-weight: 360;
}

.trust-line {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    max-width: 560px;
}

.trust-line span {
    position: relative;
    padding-left: 18px;
    color: rgba(245, 241, 232, .76);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .02em;
}

.trust-line span::before {
    content: "";
    position: absolute;
    left: 0;
    top: .46em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(214, 175, 104, .8);
}

.flow {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    color: var(--text);
    text-shadow: 0 12px 38px rgba(0, 0, 0, .62);
}

.flow-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(24px, 5vh, 46px);
}

.counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 48px;
    font-size: 15px;
    letter-spacing: .08em;
    color: var(--accent-light);
}

.counter span:first-child {
    font-size: 26px;
    font-weight: 380;
    letter-spacing: -.03em;
}

.meter {
    height: 1px;
    background: rgba(245, 241, 232, .20);
    overflow: hidden;
}

.meter span {
    display: block;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent-light), var(--accent));
    box-shadow: 0 0 18px rgba(214, 175, 104, .72);
    transform-origin: left center;
    transition: width .54s var(--ease);
}

.ghost-back {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 0 8px 16px;
    color: rgba(245, 241, 232, .76);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .22s var(--ease), transform .22s var(--ease), color .22s var(--ease);
}

.ghost-back:not(:disabled):hover { color: var(--text); transform: translateX(-2px); }
.ghost-back:disabled { opacity: .25; cursor: default; }

.steps {
    position: relative;
    min-height: 540px;
}

.step {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(24px, 0, 0) scale(.992);
    filter: blur(10px);
    transition:
        opacity .42s var(--ease),
        transform .42s var(--ease),
        filter .42s var(--ease),
        visibility .42s step-end;
}

.step.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    transition:
        opacity .48s var(--ease),
        transform .48s var(--ease),
        filter .48s var(--ease),
        visibility 0s step-start;
}

.step.leaving-back { transform: translate3d(-24px, 0, 0) scale(.992); }

.step h2 {
    margin: 18px 0 12px;
    max-width: 620px;
    font-size: clamp(36px, 4.2vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 420;
}

.microcopy {
    margin: 0 0 clamp(28px, 5vh, 44px);
    max-width: 560px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.55;
    font-weight: 350;
}

.big-input-label {
    display: block;
    margin-bottom: 10px;
    color: var(--soft);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.big-input-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 12px;
    transition: border-color .25s var(--ease);
}

.big-input-wrap:focus-within { border-color: var(--accent-light); }
.big-input-wrap.compact { max-width: 440px; margin-top: 22px; }

.big-input-wrap input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.16;
    letter-spacing: -.04em;
    font-weight: 360;
    padding: 0;
    caret-color: var(--accent-light);
}

.big-input-wrap input::placeholder { color: rgba(245, 241, 232, .40); }

.next-arrow {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(245, 241, 232, .40);
    border-radius: 50%;
    background: rgba(245, 241, 232, .08);
    backdrop-filter: blur(10px);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: transform .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease);
}

.next-arrow:hover { transform: translateX(3px); border-color: var(--accent-light); background: rgba(214, 175, 104, .16); }

.auto-note {
    min-height: 20px;
    margin-top: 12px;
    color: rgba(245, 241, 232, .55);
    font-size: 13px;
}

.auto-note.ready { color: var(--accent-light); }

.examples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.examples button {
    appearance: none;
    border: 1px solid rgba(245, 241, 232, .22);
    background: rgba(0, 0, 0, .10);
    color: rgba(245, 241, 232, .76);
    border-radius: 999px;
    padding: 9px 13px;
    cursor: pointer;
    font-size: 13px;
    backdrop-filter: blur(8px);
    transition: transform .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.examples button:hover,
.examples button.selected {
    color: var(--text);
    border-color: rgba(255, 225, 161, .64);
    background: rgba(214, 175, 104, .13);
    transform: translateY(-1px);
}

.line-options {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.line-options button {
    position: relative;
    appearance: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(245, 241, 232, .00), rgba(245, 241, 232, .00));
    display: grid;
    grid-template-columns: minmax(150px, auto) 1fr auto;
    align-items: baseline;
    gap: 18px;
    width: 100%;
    text-align: left;
    padding: 21px 0;
    cursor: pointer;
    overflow: hidden;
    transition: padding .24s var(--ease), border-color .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
}

.line-options button::after {
    content: "→";
    color: rgba(245, 241, 232, .40);
    font-size: 23px;
    transform: translateX(-8px);
    opacity: 0;
    transition: opacity .24s var(--ease), transform .24s var(--ease), color .24s var(--ease);
}

.line-options span {
    font-size: clamp(25px, 3.2vw, 38px);
    line-height: 1;
    letter-spacing: -.045em;
    font-weight: 360;
}

.line-options em {
    color: rgba(245, 241, 232, .56);
    font-style: normal;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 350;
}

.line-options button:hover,
.line-options button.selected {
    padding-left: 18px;
    padding-right: 12px;
    border-color: rgba(255, 225, 161, .48);
    background: linear-gradient(90deg, rgba(214, 175, 104, .14), rgba(214, 175, 104, .02), transparent);
}

.line-options button:hover::after,
.line-options button.selected::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent-light);
}

.budget-lines button { padding-top: 17px; padding-bottom: 17px; }
.budget-lines span { font-size: clamp(23px, 2.65vw, 32px); }

.custom-budget {
    animation: reveal .34s var(--ease) both;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(12px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.contact-fields {
    display: grid;
    gap: 24px;
    margin-top: 4px;
}

.contact-line {
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 12px;
    transition: border-color .24s var(--ease);
}

.contact-line:focus-within { border-color: var(--accent-light); }

.contact-line label {
    display: block;
    color: var(--soft);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.contact-line input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.16;
    letter-spacing: -.04em;
    font-weight: 360;
    padding: 0;
    caret-color: var(--accent-light);
}

.contact-line input::placeholder { color: rgba(245, 241, 232, .38); }

.submit-btn {
    appearance: none;
    margin-top: 34px;
    border: 1px solid rgba(255, 225, 161, .58);
    background: rgba(214, 175, 104, .12);
    color: var(--text);
    min-height: 64px;
    width: 100%;
    border-radius: 999px;
    padding: 0 22px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.submit-btn span {
    font-size: clamp(17px, 1.55vw, 21px);
    letter-spacing: -.02em;
    font-weight: 420;
}

.submit-btn i {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 225, 161, .17);
    font-style: normal;
    font-size: 22px;
    transition: transform .25s var(--ease);
}

.submit-btn:hover { transform: translateY(-2px); background: rgba(214, 175, 104, .18); border-color: rgba(255, 225, 161, .82); }
.submit-btn:hover i { transform: translateX(3px); }
.submit-btn:disabled { opacity: .58; cursor: wait; transform: none; }
.submit-btn.loading i { animation: spin .9s linear infinite; }
.submit-btn.loading i::before { content: ""; }
.submit-btn.secondary { margin-top: 28px; background: rgba(245, 241, 232, .08); }

@keyframes spin { to { transform: rotate(360deg); } }

.privacy {
    margin-top: 14px;
    color: rgba(245, 241, 232, .46);
    font-size: 12px;
    line-height: 1.45;
}

.error-line {
    min-height: 22px;
    margin-top: 22px;
    color: var(--danger);
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 8px 28px rgba(0,0,0,.8);
}

.summary {
    display: grid;
    gap: 10px;
    margin-top: 26px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 18px 0;
}

.summary div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    color: rgba(245, 241, 232, .76);
    font-size: 15px;
    line-height: 1.35;
}

.summary b {
    color: rgba(245, 241, 232, .48);
    font-weight: 400;
}

.hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-height: 760px) and (min-width: 861px) {
    .stage { padding-top: 84px; padding-bottom: 26px; }
    .intent h1 { font-size: clamp(34px, 4vw, 56px); margin: 18px 0; }
    .intent p { font-size: 15px; line-height: 1.42; }
    .trust-line { margin-top: 22px; }
    .flow-head { margin-bottom: 20px; }
    .steps { min-height: 452px; }
    .step h2 { font-size: clamp(32px, 3.5vw, 46px); margin-top: 14px; }
    .microcopy { margin-bottom: 24px; font-size: 15px; line-height: 1.42; }
    .line-options button { padding-top: 14px; padding-bottom: 14px; }
    .budget-lines button { padding-top: 12px; padding-bottom: 12px; }
    .submit-btn { margin-top: 24px; min-height: 58px; }
}

@media (max-width: 980px) {
    .topbar { padding-left: 20px; padding-right: 20px; }
    .topbar-note { display: none; }
    .stage {
        width: min(100vw - 34px, 720px);
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 26px;
        padding: 88px 0 24px;
    }
    .film { filter: saturate(1.06) contrast(1.05) brightness(.82); }
    .film-tone {
        background:
            linear-gradient(180deg, rgba(5, 7, 11, .72), rgba(5, 7, 11, .42) 34%, rgba(5, 7, 11, .74)),
            radial-gradient(circle at 50% 10%, rgba(214, 175, 104, .13), transparent 42%);
    }
    .intent { padding-bottom: 0; }
    .intent-index { font-size: 11px; }
    .intent h1 {
        max-width: 680px;
        margin: 14px 0 12px;
        font-size: clamp(31px, 9vw, 48px);
        line-height: 1;
        letter-spacing: -.055em;
    }
    .intent p {
        max-width: 670px;
        font-size: 15px;
        line-height: 1.45;
    }
    .trust-line { display: none; }
    .flow { max-width: none; margin-left: 0; }
    .flow-head { margin-bottom: 22px; gap: 13px; }
    .steps { min-height: min(58svh, 530px); }
    .step h2 {
        font-size: clamp(30px, 8.5vw, 44px);
        line-height: 1;
    }
    .microcopy {
        font-size: 15px;
        line-height: 1.45;
        margin-bottom: 24px;
    }
    .line-options button {
        grid-template-columns: 1fr auto;
        gap: 8px 16px;
        padding: 17px 0;
    }
    .line-options button em {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    .line-options button::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .line-options span { font-size: clamp(24px, 7vw, 32px); }
    .budget-lines button { padding-top: 13px; padding-bottom: 13px; }
    .budget-lines span { font-size: clamp(22px, 6vw, 29px); }
    .big-input-wrap input,
    .contact-line input { font-size: clamp(23px, 7vw, 34px); }
    .examples { gap: 8px; margin-top: 18px; }
    .examples button { padding: 8px 11px; font-size: 12px; }
}

@media (max-width: 520px) {
    .quiz-root { overflow-y: auto; overflow-x: hidden; }
    .topbar { position: absolute; }
    .brand-sign { width: 31px; height: 31px; }
    .brand-text { font-size: 12px; letter-spacing: .12em; }
    .stage {
        width: calc(100vw - 28px);
        min-height: 100svh;
        justify-content: flex-start;
        padding: 78px 0 24px;
        gap: 24px;
    }
    .intent h1 { font-size: clamp(30px, 10vw, 38px); }
    .intent p { font-size: 14px; }
    .flow-head { margin-bottom: 18px; }
    .counter span:first-child { font-size: 22px; }
    .ghost-back { font-size: 12px; padding-left: 8px; }
    .steps { min-height: 540px; }
    .step h2 { font-size: clamp(30px, 9.4vw, 40px); }
    .question-mark { font-size: 11px; }
    .question-mark::before, .intent-index::before { width: 26px; }
    .big-input-wrap { gap: 10px; }
    .next-arrow { width: 42px; height: 42px; font-size: 22px; }
    .line-options button:hover,
    .line-options button.selected { padding-left: 10px; padding-right: 6px; }
    .submit-btn { min-height: 60px; padding-left: 20px; padding-right: 14px; }
    .submit-btn i { width: 38px; height: 38px; }
    .summary div { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
}

/* v2.1 — точечные правки под новый оффер, бюджетный шаг и мобильную стабилизацию */
.intent h1 {
    max-width: 610px;
    margin: 18px 0 14px;
    font-size: clamp(36px, 4.15vw, 64px);
    line-height: .97;
}

.intent .lead-offer {
    margin: 0 0 10px;
    color: var(--text);
    font-size: clamp(18px, 1.65vw, 23px);
    line-height: 1.28;
    letter-spacing: -.025em;
    font-weight: 390;
}

.intent .lead-route {
    margin: 0;
    max-width: 560px;
    color: rgba(245, 241, 232, .78);
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.45;
    font-weight: 350;
}

.proof-list {
    margin-top: clamp(18px, 3vh, 28px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 18px;
    max-width: 600px;
}

.proof-list span {
    position: relative;
    padding-left: 21px;
    color: rgba(245, 241, 232, .82);
    font-size: clamp(12px, 1.08vw, 14px);
    line-height: 1.28;
    letter-spacing: .01em;
}

.proof-list span::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: -.08em;
    color: var(--accent-light);
    text-shadow: 0 0 18px rgba(214, 175, 104, .85);
}

.step[data-step="3"] .microcopy {
    margin-bottom: clamp(16px, 3vh, 28px);
}

.budget-lines button {
    padding-top: 12px;
    padding-bottom: 12px;
}

.budget-lines span {
    font-size: clamp(21px, 2.25vw, 29px);
}

.budget-lines em {
    font-size: 12.5px;
}

.custom-budget {
    margin-top: 14px;
}

.big-input-wrap.compact {
    margin-top: 0;
}

@media (min-width: 981px) {
    body { overflow: hidden; }
    .stage { padding-top: 96px; padding-bottom: 34px; }
    .steps { min-height: 500px; }
}

@media (max-height: 760px) and (min-width: 981px) {
    .intent h1 { font-size: clamp(32px, 3.65vw, 52px); margin: 14px 0 10px; }
    .intent .lead-offer { font-size: clamp(16px, 1.35vw, 20px); }
    .intent .lead-route { font-size: 14.5px; line-height: 1.36; }
    .proof-list { margin-top: 16px; gap: 8px 16px; }
    .proof-list span { font-size: 12px; line-height: 1.2; }
    .steps { min-height: 440px; }
    .budget-lines button { padding-top: 9px; padding-bottom: 9px; }
    .budget-lines span { font-size: clamp(19px, 2vw, 25px); }
    .budget-lines em { font-size: 12px; }
}

@media (max-width: 980px) {
    .stage {
        justify-content: flex-start;
        padding-top: 76px;
        padding-bottom: 18px;
        gap: 20px;
    }
    .intent h1 {
        margin: 10px 0 8px;
        font-size: clamp(27px, 7.5vw, 42px);
        line-height: 1.02;
        letter-spacing: -.052em;
    }
    .intent .lead-offer {
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.26;
        margin-bottom: 7px;
    }
    .intent .lead-route {
        font-size: 13.5px;
        line-height: 1.36;
        max-width: 640px;
    }
    .proof-list {
        margin-top: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
        max-width: 680px;
    }
    .proof-list span {
        padding-left: 17px;
        font-size: 11.5px;
        line-height: 1.18;
    }
    .flow-head {
        margin-bottom: 15px;
    }
    .steps {
        min-height: min(61svh, 520px);
    }
    .step h2 {
        margin-top: 12px;
        margin-bottom: 9px;
    }
    .microcopy {
        margin-bottom: 18px;
    }
    .step[data-step="3"] .microcopy {
        margin-bottom: 12px;
    }
    .budget-lines button {
        padding-top: 9px;
        padding-bottom: 9px;
    }
    .budget-lines span {
        font-size: clamp(19px, 5.1vw, 25px);
    }
    .budget-lines em {
        font-size: 11.5px;
        line-height: 1.15;
    }
    .step.custom-mode .budget-lines button:not(.selected) {
        display: none;
    }
    .step.custom-mode .budget-lines button.selected {
        padding-left: 10px;
        padding-right: 6px;
        background: linear-gradient(90deg, rgba(214, 175, 104, .14), rgba(214, 175, 104, .02), transparent);
    }
    .step.custom-mode .custom-budget {
        margin-top: 16px;
    }
}

@media (max-width: 520px) {
    .stage {
        padding-top: 70px;
        gap: 18px;
    }
    .intent-index,
    .question-mark {
        font-size: 10px;
    }
    .intent h1 {
        font-size: clamp(25px, 8.2vw, 34px);
        line-height: 1.02;
    }
    .intent .lead-offer {
        font-size: 14.5px;
    }
    .intent .lead-route {
        font-size: 12.5px;
    }
    .proof-list {
        grid-template-columns: 1fr 1fr;
        gap: 6px 9px;
        margin-top: 10px;
    }
    .proof-list span {
        font-size: 10.8px;
        padding-left: 15px;
    }
    .flow-head {
        margin-bottom: 12px;
    }
    .steps {
        min-height: 500px;
    }
    .step h2 {
        font-size: clamp(27px, 8.3vw, 36px);
    }
    .microcopy {
        font-size: 13.5px;
        line-height: 1.34;
        margin-bottom: 14px;
    }
    .line-options button {
        padding-top: 11px;
        padding-bottom: 11px;
    }
    .budget-lines button {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .budget-lines span {
        font-size: clamp(18px, 5.2vw, 23px);
    }
    .budget-lines em {
        font-size: 10.8px;
    }
    .custom-budget .big-input-wrap input {
        font-size: clamp(22px, 6.6vw, 30px);
    }
}

@media (max-width: 380px), (max-height: 700px) and (max-width: 520px) {
    .stage { padding-top: 64px; gap: 14px; }
    .brand-text { font-size: 11px; }
    .brand-sign { width: 29px; height: 29px; }
    .intent h1 { font-size: clamp(23px, 7.4vw, 30px); }
    .intent .lead-offer { font-size: 13.5px; }
    .intent .lead-route { font-size: 12px; }
    .proof-list span { font-size: 10px; line-height: 1.12; }
    .flow-head { margin-bottom: 10px; }
    .step h2 { font-size: clamp(25px, 7.6vw, 32px); }
    .microcopy { font-size: 12.5px; margin-bottom: 10px; }
    .budget-lines button { padding-top: 6px; padding-bottom: 6px; }
    .budget-lines span { font-size: clamp(17px, 4.9vw, 21px); }
    .budget-lines em { font-size: 10px; }
    .steps { min-height: 455px; }
}

/* Fix: desktop custom budget mode must fit into one viewport, like mobile */
@media (min-width: 981px) {
    .step.custom-mode .budget-lines button:not(.selected) {
        display: none;
    }

    .step.custom-mode .budget-lines button.selected {
        padding-top: 12px;
        padding-bottom: 12px;
        padding-left: 18px;
        padding-right: 12px;
        background: linear-gradient(90deg, rgba(214, 175, 104, .14), rgba(214, 175, 104, .02), transparent);
    }

    .step.custom-mode .custom-budget {
        margin-top: clamp(16px, 2.2vh, 22px);
    }
}