/* =================================================================== AC25 REVEALS section css =================================================================== */
.ac25-reveals {
    padding-block: var(--sectionGap);
    background: var(--surface-1);

    & .ac25-reveals__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        align-items: start;
        gap: var(--sp80);
    }

    & .ac25-reveals__sticky {
        position: sticky;
        top: 150px;
        & .section-title-wrap { margin-bottom: var(--sp40); }
    }

    & .ac25-reveals__compare {
        display: grid;
        gap: var(--sp15);
        padding: var(--sp30);
        background: var(--surface-1);
        border-radius: var(--r-md);
    }

    & .ac25-reveals__bar {
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        gap: var(--sp15);
    }

    & .ac25-reveals__bar-year { font-size: var(--f14); font-weight: 600; color: var(--muted); }

    & .ac25-reveals__bar-track {
        display: block;
        height: 14px;
        background: var(--white);
        border-radius: var(--r-full);
        overflow: hidden;
    }

    & .ac25-reveals__bar-fill {
        display: block;
        height: 100%;
        background: var(--blue-100);
        border-radius: var(--r-full);
    }
    & .ac25-reveals__bar-fill--74 { width: 74%; }
    & .ac25-reveals__bar-fill--47 { width: 47%; background: var(--gradient-warm); }

    & .ac25-reveals__bar-val { font-size: var(--f16); font-weight: 600; text-align: right; color: var(--ink); }

    & .ac25-reveals__bar--now .ac25-reveals__bar-year,
    & .ac25-reveals__bar--now .ac25-reveals__bar-val { color: var(--accent); }

    & .ac25-reveals__caption { margin-top: var(--sp4); font-size: var(--f14); }

    & .ac25-reveals__list { display: grid; }

    & .ac25-reveals__item {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: var(--sp25);
        padding-block: var(--sp30);
        border-bottom: 1px solid var(--line);
        transition: var(--transition);

        &:first-child { padding-top: 0; }
        & p { font-size: var(--f18); }
        & strong { color: var(--ink); }
        &:hover .ac25-reveals__index { background: var(--primary); color: var(--white); }
    }

    & .ac25-reveals__index {
        display: grid; place-items: center;
        width: 56px; height: 56px;
        background: var(--blue-50);
        border-radius: var(--r-full);
        font-size: var(--f16);
        font-weight: 600;
        color: var(--primary);
        transition: var(--transition);
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .ac25-reveals {
        & .ac25-reveals__grid { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .ac25-reveals {
        & .ac25-reveals__grid { grid-template-columns: 1fr; }
        & .ac25-reveals__sticky { position: static; }
    }
}

@media (max-width: 575.98px) {
    .ac25-reveals {
        & .ac25-reveals__item { grid-template-columns: 44px 1fr; gap: var(--sp15); }
        & .ac25-reveals__index { width: 44px; height: 44px; font-size: var(--f14); }
        & .ac25-reveals__compare { padding: var(--sp20); }
    }
}