@media (max-width: 680px) {
    .sn-roi__inputs { grid-template-columns: 1fr; }
    .sn-roi__metrics { grid-template-columns: 1fr; }
    .sn-roi__metric { border-right: none; border-bottom: 1px solid var(--c-border); }
    .sn-roi__metric:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
    .sn-roi { padding: var(--s-6) 0; }

    .sn-roi__head {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding-inline: var(--s-5);
        padding-bottom: var(--s-5) !important;
        margin-bottom: var(--s-5) !important;
    }

    .sn-roi__title {
        font-size: 28px !important;
        line-height: 1.06 !important;
        letter-spacing: -0.02em !important;
    }
    .sn-roi__title br { display: none; }

    .sn-roi__lead {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .sn-roi__verdict,
    .sn-roi__vs,
    .sn-roi__chart-wrap { display: none !important; }

    .sn-roi__inputs > .sn-roi__input:nth-child(3) { display: none !important; }

    .sn-roi__calc {
        margin-inline: var(--s-5);
        padding: 0 !important;
        border-radius: var(--r-md);
        background: var(--c-white);
        border: 1.5px solid var(--c-border);
        overflow: hidden;
        gap: 0 !important;
    }

    .sn-roi__inputs {
        display: flex !important;
        flex-direction: column;
        gap: 14px !important;
        padding: 16px 14px 14px !important;
    }

    .sn-roi__input {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .sn-roi__input-top {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 0 !important;
    }

    .sn-roi__input-label {
        font-size: 12.5px !important;
        font-weight: var(--w-bold) !important;
        color: var(--c-black) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .sn-roi__input-badge {
        padding: 3px 10px;
        background: var(--c-accent);
        color: var(--c-black);
        border-radius: 999px;
        font-size: 11.5px !important;
        font-weight: var(--w-black) !important;
        line-height: 1.3;
    }

    .sn-roi__range { height: 22px; }

    .sn-roi__input:has(.sn-roi__segs) { gap: 8px; }

    .sn-roi__segs {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        gap: 6px !important;
    }

    .sn-roi__seg {
        padding: 8px 4px !important;
        font-size: 12.5px !important;
        font-weight: var(--w-bold) !important;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: 999px;
        color: var(--c-black);
        cursor: pointer;
        line-height: 1.2;
        flex: none !important;
    }

    .sn-roi__seg--active {
        background: var(--c-black) !important;
        border-color: var(--c-black) !important;
        color: var(--c-white) !important;
    }

    .sn-roi__metrics {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important;
        background: var(--c-border);
        border-top: 1.5px solid var(--c-border);
        border-bottom: 1.5px solid var(--c-border);
        margin: 0 !important;
        padding: 0 !important;
    }

    .sn-roi__metric {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 14px 8px !important;
        background: var(--c-white) !important;
        text-align: center;
        gap: 2px;
        border: none !important;
    }

    .sn-roi__metric--hero {
        grid-column: 1 / -1 !important;
        padding: 18px 12px !important;
        background: rgba(29, 158, 117, 0.07) !important;
    }

    .sn-roi__metric-val {
        font-size: 16px !important;
        font-weight: var(--w-black) !important;
        color: var(--c-black) !important;
        letter-spacing: -0.02em;
        line-height: 1 !important;
    }

    .sn-roi__metric--hero .sn-roi__metric-val {
        font-size: 36px !important;
        color: #1D9E75 !important;
        letter-spacing: -0.04em !important;
    }

    .sn-roi__metric-label {
        font-size: 10px !important;
        font-weight: var(--w-bold) !important;
        color: var(--c-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.10em !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
    }

    .sn-roi__metric--hero .sn-roi__metric-label {
        margin-top: 4px !important;
        font-size: 11px !important;
    }

    .sn-roi__cta {
        padding: 14px !important;
        margin-top: 0 !important;
    }

    .sn-roi__cta .btn {
        width: 100%;
        padding: 14px !important;
        font-size: 14px !important;
        font-weight: var(--w-black) !important;
        justify-content: center;
    }
}