/* Page-specific timer; the existing hero typography and colours stay in site.css. */
.mutual [data-funds-hero] .funds-hero-tabs {
    flex: 1;
    min-width: 0;
    gap: 24px;
}

.mutual [data-funds-hero] .fundsTabList {
    gap: 24px;
    position: relative;
}

.mutual [data-funds-hero] .tab {
    position: relative;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    width: auto;
    margin-right: 0;
}

.mutual [data-funds-hero] .fundsTabList::before,
.mutual [data-funds-hero] .fundsTabList::after {
    content: "";
    position: absolute;
    inset: auto 0 -22px;
    height: 3px;
    pointer-events: none;
}

.mutual [data-funds-hero] .fundsTabList::before {
    background: rgb(255 255 255 / 20%);
}

.mutual [data-funds-hero] .fundsTabList::after {
    background: #FFA800;
    transform: scaleX(var(--fund-progress, 0));
    transform-origin: left;
}

.mutual [data-funds-hero] .funds-hero-panels {
    display: grid;
}

.mutual [data-funds-hero] .selectedTab {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
    pointer-events: none;
}

.mutual [data-funds-hero] .selectedTab.active {
    visibility: visible;
    pointer-events: auto;
}

.mutual [data-funds-hero] .funds-hero-controls {
    flex-shrink: 0;
}

.mutual [data-funds-hero] button:focus-visible {
    outline: 2px solid #FFA800 !important;
    outline-offset: 4px;
}

/* Keep all five selectors and the existing arrows usable on tablets. */
@media (min-width: 481px) and (max-width: 991px) {
    .mutual [data-funds-hero] .fundsTabList {
        gap: 20px;
        flex-wrap: wrap;
    }

    .mutual [data-funds-hero] .funds-hero-tabs {
        flex-basis: 100%;
        gap: 8px;
    }

    .mutual [data-funds-hero] .tab {
        padding-inline: 8px;
    }

    .mutual [data-funds-hero] .funds-hero-controls {
        margin-left: auto;
    }
}
