/* DSI comparison table — Elementor widget
   ------------------------------------------------------------------
   Small-screen layout is driven by CONTAINER queries, not viewport
   media queries. The table restyles based on how much room the widget
   actually has, so tablet and mobile share one identical treatment
   with no separate breakpoint tuning.
   ------------------------------------------------------------------ */

   .dsi-cmp{
    /* colour */
    --dsi-accent:#ED6C0C;
    --dsi-accent-soft:#FEF3E9;
    --dsi-ink:#0F1A2A;
    --dsi-muted:#5C6B7F;
    --dsi-line:#E7ECF1;
    --dsi-surface:#FFFFFF;
  
    /* layout — desktop */
    --dsi-radius:16px;
    --dsi-table-min:880px;
    --dsi-label-col:27%;
    --dsi-cell-y:22px;
    --dsi-cell-x:20px;
  
    /* layout — tablet + mobile */
    --dsi-label-col-sm:200px;
    --dsi-cell-y-sm:18px;
    --dsi-cell-x-sm:16px;
  
    container-type:inline-size;
  }
  
  /* --- scroll container --- */
  .dsi-cmp__scroller{
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:var(--dsi-radius);
    background:var(--dsi-surface);
    box-shadow:0 1px 3px rgba(15,26,42,.07),0 8px 28px rgba(15,26,42,.05);
    scrollbar-width:none;
  }
  .dsi-cmp__scroller::-webkit-scrollbar{display:none}
  .dsi-cmp__scroller:focus-visible{outline:2px solid var(--dsi-accent);outline-offset:2px}
  
  /* --- table --- */
  .dsi-cmp__table{
    min-width:var(--dsi-table-min);
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    font-size:16px;
    margin:0;
  }
  .dsi-cmp__table th,
  .dsi-cmp__table td{
    padding:var(--dsi-cell-y) var(--dsi-cell-x);
    text-align:center;
    vertical-align:middle;
    border-bottom:1px solid var(--dsi-line);
    font-weight:400;
    hyphens:manual;
  }
  
  /* header row — never nowrap, or long labels spill past the table edge */
  .dsi-cmp__table thead th{
    background:var(--dsi-ink);
    color:#fff;
    font-weight:700;
    padding-top:calc(var(--dsi-cell-y) + 4px);
    padding-bottom:calc(var(--dsi-cell-y) + 4px);
    border-bottom:0;
    text-wrap:balance;
    line-height:1.3;
  }
  .dsi-cmp__table thead th:first-child{text-align:left}
  .dsi-cmp__table thead th.is-featured{background:var(--dsi-accent)}
  
  /* body */
  .dsi-cmp__table tbody th{
    text-align:left;
    font-weight:500;
    color:var(--dsi-ink);
    background:var(--dsi-surface);
    position:relative;
  }
  .dsi-cmp__table tbody td{color:var(--dsi-muted);line-height:1.45}
  .dsi-cmp__table td.is-featured{
    background:var(--dsi-accent-soft);
    color:var(--dsi-ink);
    font-weight:700;
  }
  .dsi-cmp__table tbody tr:last-child th,
  .dsi-cmp__table tbody tr:last-child td{border-bottom:0}
  
  /* column widths */
  .dsi-cmp__table th:first-child{width:var(--dsi-label-col)}
  
  /* --- optional pinned first column --- */
  .dsi-cmp--pinned .dsi-cmp__table thead th:first-child,
  .dsi-cmp--pinned .dsi-cmp__table tbody th{position:sticky;left:0;z-index:2}
  .dsi-cmp--pinned .dsi-cmp__table thead th:first-child{z-index:3}
  .dsi-cmp--pinned .dsi-cmp__table tbody th::after,
  .dsi-cmp--pinned .dsi-cmp__table thead th:first-child::after{
    content:"";
    position:absolute;
    top:0;bottom:0;right:0;
    width:16px;
    transform:translateX(100%);
    background:linear-gradient(90deg,rgba(15,26,42,.10),rgba(15,26,42,0));
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
  }
  .dsi-cmp--pinned.is-scrolled .dsi-cmp__table tbody th::after,
  .dsi-cmp--pinned.is-scrolled .dsi-cmp__table thead th:first-child::after{opacity:1}
  
  /* --- scroll progress --- */
  .dsi-cmp__progress{
    margin:18px 0 0;
    height:4px;
    border-radius:99px;
    background:var(--dsi-ink);
    overflow:hidden;
  }
  .dsi-cmp__progress[hidden]{display:none}
  .dsi-cmp__thumb{
    display:block;
    height:100%;
    width:40%;
    border-radius:99px;
    background:var(--dsi-accent);
    will-change:margin-left;
  }
  .dsi-cmp__hint{
    margin:10px 0 0;
    font-size:13px;
    color:var(--dsi-muted);
    text-align:center;
  }
  .dsi-cmp__hint[hidden]{display:none}
  
  /* ------------------------------------------------------------------
     Tablet + mobile — one shared treatment, triggered by widget width
     ------------------------------------------------------------------ */
  @container (max-width:1024px){
    .dsi-cmp__table{font-size:15px}
    .dsi-cmp__table th:first-child{width:var(--dsi-label-col-sm)}
    .dsi-cmp__table th,
    .dsi-cmp__table td{padding:var(--dsi-cell-y-sm) var(--dsi-cell-x-sm)}
    .dsi-cmp__table thead th{
      padding-top:calc(var(--dsi-cell-y-sm) + 4px);
      padding-bottom:calc(var(--dsi-cell-y-sm) + 4px);
    }
  }
  
  @media (prefers-reduced-motion:reduce){
    .dsi-cmp--pinned .dsi-cmp__table tbody th::after{transition:none}
  }