.cmp_cell.classic-col, .cmp_cell.premium-col, .cmp_cell.enterprise-col, .classic-col, .premium-col, .enterprise-col {
    width: 20%;
}
.mobile-nav {
display: none;
}
.label-col {
    width: 40%;
    padding: 15px 15px 15px 60px;
    text-align: left;
    border-left: 0;
    font: 16px / 1.2 var(--zf-primary-regular);
       position: relative;
}
.label-col a{
        color: #000;
    text-decoration: underline;
}
th {
    text-align: center;
    border-top: 0px;
}
th.enterprise-col {
border-right: 0px;
}
th.label-col {
border-left: 0px;
}
.grey-row td {
    background-color: #f3f3f4;
    border: 0px;
}
.grey-row .label-col {
    font: 20px / 1.4 var(--zf-secondary-medium);
}
.cmp_cell {
    vertical-align: middle;
}


@media only screen and (max-width: 992px) {
    .compar-main-table {
        width: auto;
    }
    .plans {
        font: 26px var(--zf-secondary-medium);
    }
.label-col {
    padding: 15px 30px 15px 30px;
}
}

@media only screen and (max-width: 767) {
.tableheading-fixed {
    padding: 0px 0;
}
}


/* ============================================================
   Mobile compare table — sticky label column + prev/next nav
   ============================================================ */

/* Prev / Next navigation bar */
@media only screen and (max-width: 767px) {
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: #fff;
            max-width: 250px;
        margin: 0 auto;
  }
table {
    margin-top: 15px;
}
  .mobile-nav .mob-prev-btn,
  .mobile-nav .mob-next-btn {
    background: none;
    border: none;
    width: 25px;
    height: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-image: url(/sites/zweb/images/crm/images/support-slick-arrow.svg);
  }
.mobile-nav .mob-next-btn {
        transform: rotate(180deg);
} 
  .mobile-nav .mob-prev-btn:disabled,
  .mobile-nav .mob-next-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .mob-plan-label {
    font: 18px var(--zf-secondary-medium);
    text-align: center;
    flex: 1;
  }
}

/* Sticky label column (50 %) + horizontal-scroll plan columns (50 % each, one at a time) */
@media only screen and (max-width: 750px) {
.tableheading-fixed {
    padding: 0px 0;
}
  /* compar-main-table is the horizontal scroll container.
     display:block  — overrides base display:flex + justify-content:center,
                      which centers the wide table so scrollLeft=0 lands on
                      Premium instead of Classic.
     width:100%     — fills .compare-cnt so applyMobileWidths() always reads
                      the real container width; overrides the fixed width:330px
                      in the existing ≤750px block so the layout is fully fluid. */
  .compar-main-table {
    display: block;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE / Edge */
  }
  /* Hide WebKit scrollbar so the table looks clean */
  .compar-main-table::-webkit-scrollbar {
    display: none;
  }
  /* Force fixed column widths so JS scroll targets are exact.
     Without this the browser auto-sizes columns from content,
     making plan positions unpredictable. */
  .compar-main-table table {
    table-layout: fixed !important;
    word-wrap: break-word;
  }
  /* compare-cnt scrolls vertically only */
  .compare-cnt {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
max-width: 450px;
        height: 500px !important;
        padding: 50px 0 10px;
  }
.label-col {
        padding: 15px 20px 15px 20px;
    }
  /* Pin the label column to the left edge while plan columns scroll */
  .compar-main-table td.label-col,
  .compar-main-table th.label-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
  }
  /* Restore grey background for section-header rows in the sticky column */
  .compar-main-table .grey-row td.label-col {
    background-color: #f3f3f4;
  }
}
/* ============================================================
   End of mobile compare table changes
   ============================================================ */