@charset "UTF-8";
/* DIFFERENTIATOR SLIDER — portable fgB module (Figma 5202:1971). Token-fallback CSS. */

.diffSlider,
.widget.widget-diff-slider {
    background-color: var(--black, var(--dkBlue, #12233F));
    /* DB QA #103527602 (Ali): trimmed top padding to close the gap above the bar
       (band sits flush under the hero); bottom keeps its breathing room. */
    padding: clamp(48px, 5vw, 96px) 0 clamp(80px, 9.375vw, 180px);
    clear: both;   /* clear any preceding float (e.g. .half-content is float:left on the
                      Full Width Flexible template) — without this the slider content is
                      pushed past the float and the ::after clearfix balloons the band,
                      swallowing the visible top padding. */
}

.diffSlideShow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 2.9vw, 56px);
    width: 100%;            /* definite width REQUIRED: as a column flex w/ align-items:center,
                               the splide track + width:100% slides have no definite-width ancestor
                               to resolve against when this renders full-width (e.g. the widget in
                               #main on full-width-flexible) → track collapses to 0 + slides stack.
                               max-width below still caps it; margin auto centers it. */
    max-width: 1088px;
    margin: 0 auto;
}

.diffSlideNav {
    display: flex;
    justify-content: center;
    gap: clamp(24px, 2.9vw, 56px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.diffSlideTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 40px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.diffSlideTab .num {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: var(--h4, var(--h4-font-size, clamp(20px, 1.15vw, 22px)));
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--white, #fff);
}
.diffSlideTab .track {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--primary, var(--primary-color, #32468B));
}
.diffSlideTab .fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--accent, var(--ltBlue, #87B7D5));
}
.diffSlideTab.is-active .fill {
    width: 100%;
    transition: width var(--ds-interval, 5000ms) linear;
}

.diffSlideCopy {
    font-family: var(--body-font);
    font-weight: 400;
    font-size: clamp(20px, 1.354vw, 26px); /* DB QA #103527602 (Ali): diff bar text 26px (was --h3 ~32) */
    line-height: 1.25;
    text-align: center;
    color: var(--white, #fff);
    /* DB QA #103527602 (Ali): narrower copy measure (was full 1088px track width) */
    max-width: 760px;
    margin-inline: auto;
}
.diffSlideCopy p { margin: 0 0 .5em; }
.diffSlideCopy p:last-child { margin-bottom: 0; }

/* Splide structural (theme bundles only the JS — keep module self-contained) */
.diffSlideShow .splide__track { overflow: hidden; width: 100%; }
.diffSlideShow .splide__list { display: flex; }
.diffSlideShow .splide__slide { flex-shrink: 0; width: 100%; box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    .diffSlideTab.is-active .fill { transition: none; }
}

@media (max-width: 1024px) {
    .diffSlider, .widget.widget-diff-slider { padding: clamp(60px, 12vw, 100px) 0; }
    .diffSlideNav { gap: 32px; }
}
@media (max-width: 567px) {
    .widget ul.diffSlideNav {gap: 24px;padding-left: 0;}
    .diffSlideCopy { font-size: var(--h3, var(--h3-font-size, 24px)); padding: 0 16px; }
}