@media (min-width: 768px) {

    /* Ensure the active tab can anchor the pseudo elements */
    .hero-tab.w--current {
        position: relative !important;
        /* Ensure the tab has the same solid match color */
        background-color: #15282D !important;
    }

    /* Base styles for both flares */
    .hero-tab.w--current::before,
    .hero-tab.w--current::after {
        content: '' !important;
        position: absolute !important;
        /* Move down exactly 1px to seamlessly overlap and hide the pane's top border */
        bottom: -1px !important;
        /* Make the svg 17x17 so we have an exact 1px solid mask overlapping the tab's straight borders! */
        width: 18px !important;
        height: 17px !important;
        z-index: 2 !important;
        /* Sit cleanly above straight overlapping borders */
        pointer-events: none !important;
        background-repeat: no-repeat !important;

        /* FORCE RESET of your old buggy code that is still active somewhere else! */
        border: none !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Left Flare Corner (Inline SVG) */
    .hero-tab.w--current::before {
        left: -16.5px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M18 0 L16 0 A 16 16 0 0 1 0 16 L0 17 L18 17 Z' fill='%2315282D'/%3E%3Cpath d='M16 0 A 16 16 0 0 1 0 16' stroke='%23465257' stroke-width='1'/%3E%3C/svg%3E") !important;
    }

    /* Right Flare Corner (Inline SVG) */
    .hero-tab.w--current::after {
        right: -16.5px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M0 0 L2 0 A 16 16 0 0 0 18 16 L18 17 L0 17 Z' fill='%2315282D'/%3E%3Cpath d='M2 0 A 16 16 0 0 0 18 16' stroke='%23465257' stroke-width='1'/%3E%3C/svg%3E") !important;
    }
}

@media (max-width: 767px) {

    /* Mobile Scroll Hint Gradient */
    .w-tab-menu {
        position: relative;
    }

    .w-tab-menu::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        /* Mapped directly to the global Webflow dark swatch */
        background: linear-gradient(to left, var(--swatches--bg-dark) 0%, transparent 100%);
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.3s ease;
    }

    /* Hide gradient when JS detects scroll hits the far right edge */
    .w-tab-menu.is-scroll-end::after {
        opacity: 0;
    }
}