.elementor-1681 .elementor-element.elementor-element-ubdistc1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1681 .elementor-element.elementor-element-ubdistc3{--display:flex;}.elementor-1681 .elementor-element.elementor-element-ubdistc2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ubdistw1 *//* =========================================================
   DISTRIBUTION HERO - MOBILE RESPONSIVE FIX
   Paste this AFTER your existing CSS
   ========================================================= */


/* ---------------------------------------------------------
   BASIC SAFETY
   --------------------------------------------------------- */

section.hero:has(.dcc),
section.hero:has(.dcc) * {
    box-sizing: border-box;
}

section.hero:has(.dcc) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Allow grid/flex children to shrink */
section.hero:has(.dcc) .hero-grid > *,
section.hero:has(.dcc) .dcc,
section.hero:has(.dcc) .dcc-main,
section.hero:has(.dcc) .dcc-metrics > *,
section.hero:has(.dcc) .dcc-channel > * {
    min-width: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* Hero becomes one column */
    section.hero:has(.dcc) .hero-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 55px !important;
    }


    /* Dashboard wrapper */
    section.hero:has(.dcc) .dcc {
        position: relative !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;

        gap: 16px !important;
    }


    /* Main dashboard */
    section.hero:has(.dcc) .dcc-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;
    }


    /* Side cards come back into normal flow */
    section.hero:has(.dcc) .dcc-side,
    section.hero:has(.dcc) .dcc-side.top,
    section.hero:has(.dcc) .dcc-side.bottom {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;

        margin: 0 !important;

        transform: none !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    /* =====================================================
       HERO
       ===================================================== */

    section.hero:has(.dcc) {
        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        padding-top: 35px !important;
        padding-bottom: 55px !important;

        overflow-x: hidden !important;
    }


    section.hero:has(.dcc) .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    section.hero:has(.dcc) .hero-grid {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 45px !important;
    }


    /* =====================================================
       EYEBROW
       ===================================================== */

    section.hero:has(.dcc) .hero-eyebrow {
        display: flex !important;
        align-items: flex-start !important;

        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        font-size: 11px !important;
        line-height: 1.55 !important;
        letter-spacing: 0.12em !important;

        white-space: normal !important;

        overflow: visible !important;
    }


    section.hero:has(.dcc) .hero-eyebrow .dot {
        flex: 0 0 auto;

        margin-top: 5px !important;
    }


    /* =====================================================
       MAIN HEADING
       ===================================================== */

    section.hero:has(.dcc) .h-display {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 28px !important;
        margin-bottom: 25px !important;

        font-size: clamp(40px, 12vw, 58px) !important;
        line-height: 1.01 !important;

        letter-spacing: -0.04em !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    section.hero:has(.dcc) .h-display em {
        display: inline !important;

        white-space: normal !important;
    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    section.hero:has(.dcc) .hero-sub {
        width: 100% !important;
        max-width: 100% !important;

        margin-bottom: 30px !important;

        font-size: 17px !important;
        line-height: 1.7 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* =====================================================
       BUTTONS
       ===================================================== */

    section.hero:has(.dcc) .hero-ctas {
        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 12px !important;
    }


    section.hero:has(.dcc) .hero-ctas .btn {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 54px !important;

        padding: 15px 22px !important;

        text-align: center !important;

        white-space: normal !important;
    }


    section.hero:has(.dcc) .hero-ctas .arrow-svg {
        flex: 0 0 auto !important;
    }


    /* =====================================================
       HERO TAGS
       ===================================================== */

    section.hero:has(.dcc) .hero-tags {
        display: flex !important;

        flex-wrap: wrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 9px !important;

        margin-top: 28px !important;
    }


    section.hero:has(.dcc) .hero-tag {
        flex: 0 1 auto !important;

        max-width: 100% !important;

        padding: 7px 12px !important;

        font-size: 11px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    /* =====================================================
       HERO STATS
       ===================================================== */

    section.hero:has(.dcc) .hero-stats {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 26px 18px !important;

        margin-top: 38px !important;
    }


    section.hero:has(.dcc) .hero-stats > div {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* Put 99.9% on its own row */
    section.hero:has(.dcc) .hero-stats > div:last-child {
        grid-column: 1 / -1 !important;
    }


    section.hero:has(.dcc) .stat-num {
        font-size: 31px !important;
        line-height: 1.1 !important;

        white-space: nowrap !important;
    }


    section.hero:has(.dcc) .stat-label {
        margin-top: 5px !important;

        font-size: 12px !important;
        line-height: 1.45 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       DISTRIBUTION DASHBOARD WRAPPER
       ===================================================== */

    section.hero:has(.dcc) .dcc {
        position: relative !important;

        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;

        gap: 14px !important;

        overflow: visible !important;
    }


    /* =====================================================
       DASHBOARD MAIN CARD
       ===================================================== */

    section.hero:has(.dcc) .dcc-main {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        overflow: hidden !important;
    }


    /* =====================================================
       TOP BAR
       ===================================================== */

    section.hero:has(.dcc) .dcc-bar {
        display: grid !important;

        grid-template-columns:
            auto minmax(0, 1fr) auto !important;

        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 8px !important;

        padding: 12px !important;
    }


    section.hero:has(.dcc) .dcc-bar .dots {
        display: flex !important;

        flex-shrink: 0 !important;
    }


    section.hero:has(.dcc) .dcc-bar .url {
        width: 100% !important;
        min-width: 0 !important;

        font-size: 9px !important;
        line-height: 1.3 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    section.hero:has(.dcc) .dcc-bar .live {
        position: relative !important;

        flex-shrink: 0 !important;

        top: auto !important;
        right: auto !important;

        padding: 5px 8px !important;

        font-size: 8px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       METRICS
       ===================================================== */

    section.hero:has(.dcc) .dcc-metrics {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 8px !important;

        padding: 14px !important;
    }


    /* Active channels on its own line */
    section.hero:has(.dcc) .dcc-metric:last-child {
        grid-column: 1 / -1 !important;
    }


    section.hero:has(.dcc) .dcc-metric {
        width: 100% !important;
        min-width: 0 !important;

        padding: 12px 10px !important;
    }


    section.hero:has(.dcc) .dcc-metric .l {
        font-size: 8px !important;
        line-height: 1.35 !important;

        white-space: normal !important;
    }


    section.hero:has(.dcc) .dcc-metric .v {
        font-size: 22px !important;
        line-height: 1.1 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    section.hero:has(.dcc) .dcc-metric .d {
        margin-top: 4px !important;

        font-size: 8px !important;
        line-height: 1.25 !important;
    }


    /* =====================================================
       MOCK NOTE
       ===================================================== */

    section.hero:has(.dcc) .mock-note {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        font-size: 8px !important;
        line-height: 1.5 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       CHANNEL MIX TITLE
       ===================================================== */

    section.hero:has(.dcc) .dcc-title {
        width: 100% !important;

        padding-left: 14px !important;
        padding-right: 14px !important;

        font-size: 9px !important;
        line-height: 1.4 !important;
    }


    /* =====================================================
       CHANNEL LIST
       ===================================================== */

    section.hero:has(.dcc) .dcc-channels {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 12px 14px !important;
    }


    /* -----------------------------------------------------
       EACH CHANNEL
       ----------------------------------------------------- */

    section.hero:has(.dcc) .dcc-channel {
        display: grid !important;

        grid-template-columns:
            34px minmax(0, 1fr) auto !important;

        grid-template-areas:
            "icon info value"
            "icon bar  bar" !important;

        align-items: center !important;

        column-gap: 9px !important;
        row-gap: 8px !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        padding: 12px 10px !important;

        overflow: hidden !important;
    }


    /* Icon */

    section.hero:has(.dcc) .dcc-channel .icn {
        grid-area: icon !important;

        width: 28px !important;
        height: 28px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-shrink: 0 !important;
    }


    /* Information */

    section.hero:has(.dcc) .dcc-channel .info {
        grid-area: info !important;

        width: 100% !important;
        min-width: 0 !important;
    }


    section.hero:has(.dcc) .dcc-channel .info .n {
        width: 100% !important;

        font-size: 11px !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    section.hero:has(.dcc) .dcc-channel .info .m {
        width: 100% !important;

        margin-top: 2px !important;

        font-size: 8px !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }


    /* Value */

    section.hero:has(.dcc) .dcc-channel .val {
        grid-area: value !important;

        display: flex !important;
        align-items: center !important;

        gap: 3px !important;

        justify-self: end !important;

        font-size: 14px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    section.hero:has(.dcc) .dcc-channel .val em {
        font-size: 8px !important;

        white-space: nowrap !important;
    }


    /* Progress bar */

    section.hero:has(.dcc) .dcc-channel .bar {
        grid-area: bar !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        margin: 0 !important;
    }


    /* =====================================================
       SIDE CARDS
       ===================================================== */

    section.hero:has(.dcc) .dcc-side,
    section.hero:has(.dcc) .dcc-side.top,
    section.hero:has(.dcc) .dcc-side.bottom {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        margin: 0 !important;

        padding: 18px !important;

        transform: none !important;
    }


    section.hero:has(.dcc) .dcc-side .lbl {
        font-size: 10px !important;
    }


    section.hero:has(.dcc) .dcc-side .val {
        font-size: 29px !important;
        line-height: 1.2 !important;
    }


    section.hero:has(.dcc) .dcc-side .sub {
        width: 100% !important;

        font-size: 11px !important;
        line-height: 1.5 !important;

        white-space: normal !important;

        overflow-wrap: break-word !important;
    }


    /* =====================================================
       BACKGROUND DECORATIONS
       ===================================================== */

    section.hero:has(.dcc) .hero-mesh,
    section.hero:has(.dcc) .hero-grid-bg {
        max-width: 100% !important;
    }


    section.hero:has(.dcc) .glow-orb {
        pointer-events: none !important;
    }
}


/* =========================================================
   SMALL MOBILE - 480px AND BELOW
   ========================================================= */

@media screen and (max-width: 480px) {

    section.hero:has(.dcc) .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    /* Heading */
    section.hero:has(.dcc) .h-display {
        font-size: clamp(38px, 12vw, 48px) !important;
        line-height: 1.03 !important;
    }


    section.hero:has(.dcc) .hero-sub {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }


    /* ---------------------------------------------
       Stats become one per row
       --------------------------------------------- */

    section.hero:has(.dcc) .hero-stats {
        grid-template-columns: 1fr !important;

        gap: 20px !important;
    }


    section.hero:has(.dcc) .hero-stats > div:last-child {
        grid-column: auto !important;
    }


    /* ---------------------------------------------
       Tags
       --------------------------------------------- */

    section.hero:has(.dcc) .hero-tags {
        gap: 7px !important;
    }


    section.hero:has(.dcc) .hero-tag {
        padding: 6px 10px !important;

        font-size: 10px !important;
    }


    /* ---------------------------------------------
       Top bar
       --------------------------------------------- */

    section.hero:has(.dcc) .dcc-bar {
        grid-template-columns:
            auto minmax(0, 1fr) !important;
    }


    section.hero:has(.dcc) .dcc-bar .live {
        grid-column: 2 !important;

        justify-self: start !important;
    }


    /* ---------------------------------------------
       Channel item
       --------------------------------------------- */

    section.hero:has(.dcc) .dcc-channel {
        grid-template-columns:
            30px minmax(0, 1fr) !important;

        grid-template-areas:
            "icon info"
            "icon value"
            "icon bar" !important;

        align-items: start !important;

        column-gap: 9px !important;

        padding: 12px 9px !important;
    }


    section.hero:has(.dcc) .dcc-channel .val {
        justify-self: start !important;
    }


    /* ---------------------------------------------
       Dashboard spacing
       --------------------------------------------- */

    section.hero:has(.dcc) .dcc-channels {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }


    section.hero:has(.dcc) .dcc-metrics {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    section.hero:has(.dcc) .mock-note,
    section.hero:has(.dcc) .dcc-title {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* =========================================================
   EXTRA SMALL PHONES - 360px AND BELOW
   ========================================================= */

@media screen and (max-width: 360px) {

    section.hero:has(.dcc) .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    section.hero:has(.dcc) .h-display {
        font-size: 37px !important;
    }


    section.hero:has(.dcc) .hero-eyebrow {
        font-size: 10px !important;

        letter-spacing: 0.1em !important;
    }


    /* Dashboard metrics become one per row */
    section.hero:has(.dcc) .dcc-metrics {
        grid-template-columns: 1fr !important;
    }


    section.hero:has(.dcc) .dcc-metric:last-child {
        grid-column: auto !important;
    }


    section.hero:has(.dcc) .dcc-channel .info .n {
        font-size: 10.5px !important;
    }


    section.hero:has(.dcc) .dcc-channel .val {
        font-size: 13px !important;
    }
}/* End custom CSS */