/* ==========================================================================
   UPVs Bar (Value Propositions)
   Figma: 1920 × 114.406px, full bleed (no container)
   Content starts at left ~98px (5.09% of 1920)
   Bottom line at 116.69px
   Annotation: slides up on scroll past hero, all links to /learnmore
   ========================================================================== */
.upvs-bar {
    height: 114.406px;
    background-color: #f2f2f2;
    border-bottom: 0.854px solid #707070;
}

/* Full-bleed grid — Figma items from ~98px to ~1740px */
.upvs-bar__grid {
    padding: 0 5.09%;
}

.upvs-bar__item {
    flex: 1;
    padding: 0 15px;
    gap: 8px;
}

/* Figma: 21.254px, Medium (500), #2f2f2f */
.upvs-bar__title {
    font-size: 21.254px;
    color: #2f2f2f;
}

/* Figma: 17.003px, Light (300), #707070, underline */
.upvs-bar__link {
    font-size: 17.003px;
    color: #707070;
}

/* Figma: vertical line, height 73.113px, 0.854px wide, #707070 */
.upvs-bar__divider {
    width: 0.854px;
    height: 73.113px;
    background-color: #707070;
    flex-shrink: 0;
}

#upvs-bar {
    transition: opacity 0.3s ease;
}

#upvs-bar.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1439px) {
    .upvs-bar__title {
        font-size: 18px;
    }
    .upvs-bar__link {
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .upvs-bar {
        height: auto;
        padding: 20px 0;
    }
    .upvs-bar__grid {
        padding: 0 25px;
    }
    .upvs-bar__title {
        font-size: 16px;
    }
    .upvs-bar__link {
        font-size: 13px;
    }
    .upvs-bar__divider {
        height: 55px;
    }
}

@media (max-width: 991px) {
    .upvs-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .upvs-bar__grid {
        min-width: 900px;
        padding: 0 20px;
    }
    .upvs-bar__title {
        font-size: 15px;
    }
    .upvs-bar__link {
        font-size: 12px;
    }
    .upvs-bar__divider {
        height: 45px;
    }
}

@media (max-width: 767px) {
    .upvs-bar {
        height: 68px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .upvs-bar__grid {
        min-width: 750px;
        padding: 0 15px;
    }
    .upvs-bar__title {
        font-size: 13px;
    }
    .upvs-bar__link {
        font-size: 11px;
    }
    .upvs-bar__divider {
        height: 40px;
    }
}