/* Features page layout and deliberate variants. Common UI comes from frontend-ui.css. */
.qp-features {
    background: #f8fafc;
}

.qp-features .qp-features-hero {
    background:
        radial-gradient(ellipse at top left, var(--qp-ui-success-soft), transparent 60%),
        radial-gradient(ellipse at bottom right, var(--qp-ui-primary-soft), transparent 60%),
        #fff;
}

.qp-features-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    line-height: 1.16;
}

.qp-features-intro {
    --qp-ui-font-body: 1rem;
    max-width: 760px;
    margin-inline: auto;
}

.qp-feature-overview h2 {
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    font-weight: 650;
    line-height: 1.3;
}

.qp-feature-glance {
    background: var(--qp-ui-tint);
}

.qp-feature-workflow {
    --qp-ui-surface: var(--qp-ui-tint);
}

.qp-features .accordion-header {
    letter-spacing: normal;
}

.qp-features .tab-pane:focus-visible {
    outline: 3px solid var(--qp-ui-accent);
    outline-offset: 5px;
    border-radius: 18px;
}

@media (max-width: 575.98px) {
    .qp-features {
        padding-block: 2rem !important;
    }

    .qp-features-title {
        font-size: 1.75rem;
    }

    .qp-features .qp-feature-glance > .card-body {
        padding: 16px !important;
    }

    .qp-features .qp-feature-glance .qp-ui-card {
        padding: 12px !important;
    }
}