.solution-nav__inner {
    background: #EEF0F4;
}

.solution-nav__title {
    margin: 0;
    padding: 1rem 1rem 0.75rem;

    color: #001E5A;
    font-family: "Swiza", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.solution-nav__intro {
    margin: 0;
    padding: 0 1rem 1rem;

    color: #001E5A;
    font-family: "Swiza", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.solution-nav__list {
    display: flex;
    flex-direction: column;
}

.solution-nav__item {
    display: flex;
    align-items: center;

    min-height: 2.5rem;
    padding: 0.5rem 1rem;

    border-top: 1px solid #FFFFFF;

    text-decoration: none;
}

.solution-nav__prefix {
    color: #FF7D00;
    font-family: "Swiza", sans-serif;
    font-weight: 600;
}

.solution-nav__prefix::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 10px;
    margin: 0 0.15rem 0 0.25rem;
    background-image: url('../images/orange-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.solution-nav__name {
    color: #001E5A;
    font-family: "Swiza", sans-serif;
    font-weight: 600;
}

.solution-nav__item:hover .solution-nav__name,
.solution-nav__item.is-active .solution-nav__name {
    color: #FF7D00;
}
/* Review 21 Sept: the "Want to learn more?" solution list should be in view
   straight away and stay reachable - it sticks below the header while the
   page content scrolls (desktop only; the nav is hidden on small screens). */
@media (min-width: 782px) {
    .solution-content-layout > .solution-nav {
        position: sticky;
        top: calc(var(--header-height-scrolled, 4.5rem) + 1.5rem);
        align-self: start;
    }
}