/*  Section header  */
    .eyebrow {
      font-size: 25px;
      font-weight: normal;
      /*letter-spacing: 0.1em;*/
      text-transform: uppercase;
      color: #8800FF;
    }
 
	.section-intro {
  	  font-size: 25px;
   	  color: #6b6b6b;
      max-width: 1285px;
   	  line-height: 1.65;
	}
 
    /* 
       FLAT GRID ARCHITECTURE
       All cells are direct siblings. The browser sets each row's
       height to the tallest sibling in that row — guaranteed
       alignment at every viewport width, zero JS needed.
 
       Desktop: 3 cols  →  [label] [Ardoq] [Traditional]
       Mobile:  2 cols  →  [label spans full width as row header]
                            [Ardoq]  [Traditional]
     */
   .ctable {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* equal thirds */
      gap: 0;
      align-items: stretch;
      max-width: 1285px;
      margin-left: auto;
      margin-right: auto;
     position: relative; /* anchor for ::before shadow element */
    }
  
 /* Single full-height shadow element for the featured Ardoq column.
       Per-cell shadows create gaps at cell boundaries; one element avoids this entirely. */
    .ctable::before {
      content: '';
      display: none; /* mobile: off; desktop: on (see media query) */
      position: absolute;
      top: 0px;    
      bottom: -12px; /* match margin-bottom: -12px on last card lift */
      left: calc((100% + 10px) / 3);
      right: calc((100% + 10px) / 3);
      border-radius: 16px;
      box-shadow: -15px 0 20px rgba(0,0,0,0.10), 15px 0 20px rgba(0,0,0,0.10);
      pointer-events: none;
      z-index: 2; /* above label/traditional cells so shadow bleeds over them */
    } 
  
 
    /* Base cell  */
    .ct-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 16px 14px;
      text-align: center;
      background: #ffffff;
      min-height: 72px;
      position: relative; /* needed for ::after divider line */
       z-index: 1;          /* paint above .ctable::before shadow layer */
    }
 
    /* Inset divider line — pseudo-element so left/right offset is explicit */
    .ct-cell::after {
      content: '';
      position: absolute;
      bottom: 0px;
      left: 60px;
      right: 60px;
      height: 1px;
      background: #e8e6e0;
    }
 
    /* No divider on the Ardoq header (card top border handles it) */
    /* Header ::after shifted 1px up so it sits inside the exact clip boundary */
    .ct-cell.ardoq.header::after {
      bottom: 0px;
    }
  

 
    /*  Label column — desktop  */
    .ct-cell.label {
      align-items: center;
      justify-content: center;
      padding: 16px 14px;
      text-align: center;
      background: #ffffff;
    }
 
    .ct-cell.label span {
      font-size: 20px;
      color: #39333A;
      line-height: 1.4;
      font-weight:bold;
    }
 
    /*  Header row  */
    .ct-cell.header {
      padding: 20px 14px 14px;
       align-items: center;
      z-index: 0 !important;
    }
 
     /*  Border radius — all three columns
       Top corners: header cells of each column
       Bottom corners: last cells of each column
       Borders added so radius is visible against page bg.
     */
 
    /* Label column */
    .ct-cell.label.header { border-radius: 14px 14px 0 0; }
    .ct-cell.label.last   { border-radius: 0 0 14px 14px; }
 
    /* Traditional column (every 3rd cell in the flat grid) */
    .ctable > .ct-cell:nth-child(3n).header { border-radius: 14px 14px 0 0; }
    .ctable > .ct-cell:last-child           { border-radius: 0 0 14px 14px; } 
  
  
    /*  Ardoq column — floating card via per-cell decoration -
       Desktop: left/right borders + top radius on header cell +
       bottom radius on last cell + negative margin to "lift" card.
       Mobile: simplified to a border-left accent (see @media).
     */
    .ct-cell.ardoq {
      background: #ffffff;
      border-left: 1px solid #B1B1B1;
      border-right: 1px solid #B1B1B1;
      z-index: 3; /* above shadow layer so borders/content stay on top */
    }
   
 
    .ct-cell.ardoq.header {
      border-top: 1px solid #B1B1B1;
      border-radius: 16px 16px 0 0; 
      padding-top: 30px;
	  padding-bottom: 30px;
      z-index: 0 !important;
    }
 
    .ct-cell.ardoq.last {
      border-bottom: 1px solid #B1B1B1;
      border-radius: 0 0 14px 14px;
      margin-bottom: -12px;
      padding-bottom: 22px;
    
    }
 
 /*  Highlighted row (AI Capabilities)  */
    .ct-cell.hl-label  { background: rgba(222,250,238,50%); }
    .ct-cell.hl-ardoq  { background: rgba(222,250,238,50%); }
    .ct-cell.hl-trad   { background: rgba(222,250,238,50%); }
 
    /* Ardoq logo lockup  */
    .ardoq-logo {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 2px;
    }
 
   .col-sub {
    font-size: 27px;
    color: #39333A;
    font-weight: bold;
}
  .col-sub-2 {
    font-size: 27px!important;
    color: #39333A;
    font-weight: bold;
    margin-bottom:-35px;
}
 
 
    /*  Check X icons  */
/*    .icon-check { font-size: 18px; color: #1D9E75; line-height: 1; margin-bottom: 4px; }
    .icon-x     { font-size: 18px; color: #E24B4A; line-height: 1; margin-bottom: 4px; } */
  .icon-x img {
    width:25px;
    height:25px;
    margin-bottom:10px;
    margin-top:5px;
  }
  
  .icon-check {
    margin-bottom:10px;
  }
 
    /* Feature text  */
    .feat-text      { font-size: 20px;
      color: #39333A; line-height: 1.35; font-weight:bold; }
    .feat-text-trad { font-size: 20px;
      color: #39333A; line-height: 1.35; font-weight:bold; }
 
    /* Info tooltip  */
    .info-wrap {
      position: relative;
      display: inline-block;
      margin-top: 5px;
    }
 
    .info-btn {
      width: 16px; height: 16px;
      border-radius: 50%;
      border: 1px solid #ccc;
      background: transparent;
      font-size: 9px; color: #888;
      cursor: pointer;
      display: inline-flex;
      align-items: center; justify-content: center;
      padding: 0; line-height: 1;
     /* -webkit-tap-highlight-color: transparent; */
    }
 
   /* .tip {
      display: none;
      position: absolute;
      bottom: 125%; left: 50%;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      padding: 10px 13px;
      font-size: 12px; color: #555;
      width: 200px; line-height: 1.5;
      z-index: 100;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      pointer-events: none;
      text-align: left;
    }
 
    .tip::after {
      content: '';
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #fff;
    } */
 
    /* Desktop: show on hover */
  /*  @media (hover: hover) {
      .info-wrap:hover .tip { display: block; }
    } */
 
    /* Touch: show when .open class is toggled by JS */
   /* .info-wrap.open .tip { display: block; } */
 
 
    /* ═══════════════════════════════════════════════════════════
       MOBILE LAYOUT  ≤ 640px
       ───────────────────────────────────────────────────────────
       Switch to 2-column grid. The label cell gets
       grid-column: 1 / -1  →  spans both columns, becomes a
       full-width row header above each feature pair.
 
       The Ardoq floating card effect is replaced by a cleaner
       border-left accent + white background that reads clearly
       in a narrow 2-column layout.
  
  /* Desktop only: gaps between columns + shadow layer */
    @media (min-width: 641px) {
      .ctable {
        column-gap: 10px;
      }
      .ctable::before {
        display: block; /* enable the full-column shadow on desktop */
      }
    }
   
  /* Desktop only: gaps between columns  */
    @media (min-width: 641px) {
      .ctable {
        column-gap: 10px;
      }
    }
 
    @media (max-width: 640px) {
 
      .ctable {
        grid-template-columns: 1fr 1fr; /* drop label column track */
      }
 
      .ct-cell::after {
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 1px;
        background: #e8e6e0;
    }
 
      /* Label becomes a full-width row header */
      .ct-cell.label {
        grid-column: 1 / -1;           /* span both columns */
        align-items: flex-start;
        justify-content: flex-end;
        text-align: left;
        padding: 14px 12px 6px;
        background: #ffffff;
        box-shadow: none;              /* divider lives on data cells below */
        min-height: unset;
      }
 
       .ct-cell.label.last  {
        border-radius: 0px 0px 0px 0px!important;
    }
      
      .ct-cell.label span {
        font-size: 16px;
        font-weight: 600;
        color: #39333A;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        line-height: 1;
      }
 
      /* First label (above headers) stays hidden — headers are self-labelling */
      .ct-cell.label.header {
        display: none;
      }
 
      /* Data cells — tighter padding on mobile */
      .ct-cell {
        padding: 12px 10px;
        min-height: 60px;
        background: #ffffff;
        border-top:1px solid #d3d3d3;
        border-right:1px solid #d3d3d3;
      }
 
      /* Header row data cells — no extra top padding needed */
      .ct-cell.header {
        padding: 12px 10px 10px;
        border-top: none;
      }
      
       .ct-cell.header:after {
         display:none;
       }
      
     .ct-cell:after {
       display:none;
     }
      
      /* ── Ardoq column — simplified card on mobile ──
         Remove the floating card (margin offsets, full borders,
         border-radius) — replace with a left accent + white bg
         that reads cleanly at narrow widths.
      ── */
      .ct-cell.ardoq {
        background: #ffffff;
         border-left: 1px solid #d3d3d3;
        border-right: 1px solid #d3d3d3; 
     /*   border: 1px solid #d3d3d3; */
        box-shadow: none;
      }
 
      .ct-cell.ardoq.header {
        border: 1px solid #d3d3d3; 
        border-radius: 14px 0px 0px 0px;
        margin-top: 0;
        padding-top: 12px;
        box-shadow: none;
        border-bottom:0px;
        padding-top: 20px !important;
        padding-bottom:10px;
    }

 
      .ct-cell.ardoq.last {
        border-bottom: 1px solid #d3d3d3;
        border-radius: 0px 0px 0px 14px;
        margin-bottom: 0;
        padding-bottom: 12px;
        box-shadow: none;
      }
      
      .ct-cell.ardoq.hl-ardoq {
        background-color: rgba(222, 250, 238, 50%);
        }
 
      
 
      /* Highlighted row label spans full width on mobile too */
      .ct-cell.hl-label {
        border-radius: 0px 0px 0 0;
      }
      
       .ctable > .ct-cell:nth-child(3n).header {
          border-radius: 0px 14px 0px 0px;
          border-top:1px solid #d3d3d3;
       }
      
      .ctable > .ct-cell:last-child {
        border-radius: 0px 0px 14px 0px;
        border-right: 1px solid #d3d3d3;
        border-bottom: 1px solid #d3d3d3;
     }
      
      
      
      
 
      /* Tooltip: always clamp to left edge on narrow screens */
   /*   .tip {
        left: 0;
        transform: none;
        width: 180px;
      }
 
      .tip::after {
        left: 20px;
        transform: none;
      } */
 
      /* Feature text — slightly smaller on mobile */
      .feat-text      { font-size: 16px; color: #7B3FE4;}
      .feat-text-trad { font-size: 16px; }
      .icon-check, .icon-x { font-size: 16px; 
      }  
      
      .col-sub-2 {
        font-size: 27px !important;
        margin-top: auto;
        margin-bottom: auto;
      }       
    }

    /* tooltip popout */

    .info-button {
      background:none;
      border:none;
      padding:0px 0px;
      color:none;
      text-align:left;
    }

    .info-button:hover {
     background:none;
     border:none;
     padding:0px 0px;
     color:none;
     text-align:left;
    }

    .info-button:focus {
     background:none;
     border:none;
     padding:0px 0px;
     color:none;
     text-align:left;
    }

  .info-img {
    width:auto;
    height:auto;
    max-width:50px;

  }
  .popover-body {
    width:180px;
    max-width:100%;

  }

  .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: #F8F4FC!important;
}

  .popover-body {
      padding: .5rem .75rem;
      color: #212529;
      background-color: #F8F4FC;

  }

 .ct-cell.label.last::after,
    .ct-cell.ardoq.last::after,
    .ctable > .ct-cell:last-child::after {
      display: none;
    }