@media screen and (max-width: 968px) {
    .custom-btn {
        font-size: 14px;
        padding: 13px 20px;
    }
    
.recording-finish .split{
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}
.recording-finish .split .video{
    width: 100%;
}
.recording-finish .split .video video{
    width: 100%;
    max-height: 80vh;
}
.recording-finish .split .video.audio-only{
    padding: 20px;
}

.recording-finish .options{
    padding: 5px 14px;
    width: 100%;
}
}
/* Keep 5 columns on typical PC widths and never drop below 2 columns */
@media screen and (max-width: 1100px) {
    .feature-cards {
        grid-template-columns: repeat(4, minmax(160px, 1fr));
        gap: 14px;
        margin: 33px 0;
    }
    .usecases-grid{
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .feature-cards {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
        gap: 12px;
        margin: 28px 0;
    }
    .how-grid{
        grid-template-columns: 1fr;
    }
    .how-ill{
        height: 140px;
    }
    .highlights-grid{
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media screen and (max-width: 700px) {
    .feature-cards {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
        gap: 10px;
        width: 100%;
        margin: 20px 0;
    }
    .highlights-grid{
        grid-template-columns: 1fr;
    }
    .usecases-grid{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .hero .title {
        font-size: 2.4rem;
    }
    .feature-cards {
        width: 100%;
        margin: 33px 0;
    }
    .features{
        flex-direction: column;
        gap: 18px;
    }

    .band-split{
        flex-direction: column;
        align-items: stretch;
    }
    .band-visual{
        flex: initial;
    }


    .more-features{
        background-color: var(--primary-color);
        margin: 2rem 1rem;
        padding: 2rem 1rem;
        border-radius: 16px;
    }
    .more-features .split{
        flex-direction: column;
        gap: 20px;
    }
    .more-features .split .image, .more-features .split .content{
        width: 100%;
    }


    
.functionality .split{
    flex-direction: column;
}
.functionality .split .custom-card{
    width: 100%;
}
.functionality .split .custom-card .image{
    height: 240px;
}

.faq-section{
    padding: 3rem 1rem;
}

.faq-shell{
    grid-template-columns: 1fr;
}

.faq-aside{
    position: relative;
    top: auto;
    min-height: auto;
}

.faq-q{
    padding: 18px;
    font-size: 15px;
}

.faq-q span{
    align-items: flex-start;
    gap: 12px;
}

.faq-q small{
    width: 32px;
    height: 32px;
}

.faq-a{
    padding: 0 18px 20px 62px;
}

    .recording-progress, .recording-finish{
        padding: 1rem 1rem;
    }

    .recording-progress .main{
        flex-direction: column;
        margin-top: 30%;
    }
    .recording-progress .main .image{
        width: 100%;
    }
    .recording-progress .main .image img{
        width: 90%;
    }
    .recording-progress .main .content{
        text-align: center;
    }



    

}