.solution-detail-hero {
    padding: 70px 0 75px;
    background: var(--surface);
}

.solution-detail-container {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}

.solution-detail-hero h1 {
    max-width: 850px;
    margin: 0;
    color: #102342;
    font-size: clamp(44px, 4vw, 64px);
    font-weight: 700;
    line-height: 1.08;
}

.solution-detail-section {
    padding: 56px 0 72px;
}

.solution-detail-featured {
    overflow: hidden;
    border-radius: 16px;
}

.solution-detail-featured img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.solution-detail > h1 {
    max-width: 900px;
    margin: 44px 0 0;
    color: #102342;
    font-size: clamp(32px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.16;
}

.solution-detail-description {
    max-width: 900px;
    margin-top: 22px;
    color: #58677d;
    font-size: 17px;
    line-height: 1.7;
}

.solution-detail-benefits-heading {
    margin: 34px 0 0;
    color: #102342;
    font-size: clamp(26px, 2.4vw, 32px);
}

.solution-detail .solution-benefits {
    margin-top: 20px;
}

.solution-detail .solution-benefits li {
    line-height: 1.5;
}

.solution-detail__action {
    margin-top: 28px;
}

.solution-detail__action .btn {
    min-height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    transition: background-color .2s ease, box-shadow .2s ease;
}

.solution-detail__action .btn:hover {
    background: #0875bf;
}

@media (max-width: 699px) {
    .solution-detail-hero {
        padding: 48px 0 52px;
    }

    .solution-detail-container {
        width: calc(100% - 32px);
    }

    .solution-detail-hero h1 {
        font-size: clamp(38px, 11vw, 44px);
    }

    .solution-detail-section {
        padding: 40px 0 60px;
    }

    .solution-detail > h1 {
        margin-top: 40px;
        font-size: 32px;
    }

    .solution-detail-description {
        font-size: 16px;
    }
}

@media (max-width: 520px) {
    .solution-detail-container {
        width: calc(100% - 28px);
    }

    .solution-detail-hero {
        padding: 42px 0 46px;
    }

    .solution-detail-section {
        padding: 32px 0 52px;
    }

    .solution-detail-featured {
        border-radius: 14px;
    }

    .solution-detail > h1 {
        margin-top: 32px;
        font-size: 30px;
    }

    .solution-detail-description {
        margin-top: 20px;
    }
}