.elementor-15853 .elementor-element.elementor-element-fc5041b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15853 .elementor-element.elementor-element-fc5041b.e-con{--flex-grow:0;--flex-shrink:0;}body.elementor-page-15853:not(.elementor-motion-effects-element-type-background), body.elementor-page-15853 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E7ECFE;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-15853 .elementor-element.elementor-element-fc5041b{--width:97%;}}/* Start custom CSS *//* Load Poppins for title + Roboto for body/table */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;500;700&display=swap');

/* ============ Container & Header ============ */
.table-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  overflow: visible; /* never clip */
}

.header-section {
  background: #1e3a8a;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.header-section h1 {
  font: 700 28px 'Poppins', sans-serif;
  margin: 0 0 8px 0;
}
.header-section p {
  font: 400 16px 'Roboto', sans-serif;
  opacity: .9;
  margin: 0;
}

/* ============ Scroll Wrapper (for mobile swipe) ============ */
.comparison-scroll {
  /* desktop: nothing special; on mobile we enable horizontal scroll */
}

/* ============ Table Base ============ */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  table-layout: fixed; /* keep columns predictable */
}

.comparison-table th {
  background: #f8fafc;
  padding: 12px 8px;
  text-align: center;
  font-weight: 700;
  border-bottom: 2px solid #e2e8f0;
  font-size: 11px;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
}
.comparison-table th:first-child {
  text-align: left;
  background: #1e3a8a;
  color: #fff;
  font-size: 12px;
}

.comparison-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
  vertical-align: middle;
  font-size: 11px;
  white-space: normal;
  word-break: break-word;
}
.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  background: #f8fafc;
  border-right: 2px solid #e2e8f0;
  padding: 12px 15px;
  font-size: 12px;
}

/* ============ UGRU Header Cell & Winner Banner ============ */
.comparison-table th.ugru-header {
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding-top: 32px;          /* space for the banner */
  background: #fbbf24;
  color: #1f2937;
  font-size: 12px;
  font-weight: 800;
}

/* full-width red banner across the top, centered text */
.comparison-table th.ugru-header .winner-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;                   /* full width bar */
  display: block;
  padding: 4px 8px;
  background: #dc2626;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ============ Emphasis Styles ============ */
.ugru-column { background: #fef3c7 !important; font-weight: 600; }
.advantage-row td { background: #d1fae5 !important; }
.advantage-row .ugru-column { background: #a7f3d0 !important; }
.protection-row .ugru-column { background: #fef3c7 !important; color: #059669; font-weight: 700; }
.protection-cell { font-weight: 600; }
.protection-green { color: #059669; }
.protection-red { color: #dc2626; }
.protection-yellow { color: #d97706; }
.performance-highlight { font-weight: 700; color: #1f2937; }
.no-published { color: #dc2626; font-style: italic; }
.best-for-row .ugru-column { background: #fef3c7 !important; font-weight: 700; color: #1f2937; }

/* ============ Mobile: keep all competitors, swipe table only ============ */
@media (max-width: 768px) {
  /* ensure no ancestor blocks the horizontal scroll */
  .table-container,
  .elementor-section,
  .elementor-container,
  .elementor-column,
  .elementor-widget-container { overflow: visible !important; }

  /* the horizontal scroller lives on the wrapper, not the header */
  .comparison-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .comparison-scroll::-webkit-scrollbar { display: none; }

  /* make the table wider than the viewport so swipe is possible */
  .comparison-table {
    width: max-content;   /* natural width of all columns */
    table-layout: auto;   /* allow natural column size */
    min-width: 1100px;    /* safety floor; bump to 1300/1400 if needed */
  }

  /* keep columns on one line when swiping */
  .comparison-table th,
  .comparison-table td {
    white-space: nowrap;
    word-break: normal;
    hyphens: none;
  }
}
/* Make the title white */
.header-section h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  color: #ffffff !important;
}
/* MOBILE: allow BOTH vertical page scroll and horizontal table swipe */
@media (max-width: 768px) {
  .comparison-scroll {
    /* was: touch-action: pan-x; */
    touch-action: auto !important;           /* let the browser decide both axes */
    overscroll-behavior: auto !important;    /* allow scroll to bubble to page */
    overflow-x: auto;
    overflow-y: visible;                     /* don't trap vertical scroll */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .comparison-scroll::-webkit-scrollbar { display: none; }
}
/* Hide swipe hint on desktop, show styled version on mobile */
.swipe-hint {
  display: none;
  font-size: 14px;
  font-style: italic;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .swipe-hint {
    display: block;
    color: #DAA520;   /* gold accent */
    font-weight: 500;
  }
}
/* Swipe hint styling */
.swipe-hint {
  display: none;                        /* hidden by default */
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  color: #2AC4F4;                       /* light blue accent */
  margin-top: 6px;                      /* small spacing below subheadline */
}
/* Show only on mobile */
@media (max-width: 768px) {
  .swipe-hint {
    display: block !important;
    text-align: center;                 /* keep it centered under the subheadline */
  }
}
/* Match table headline line-height to site standard */
.header-section h1 {
  line-height: 32px !important;  /* force consistency */
}/* End custom CSS */