/* =====================
  Tokens in Design System
  (following https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)
===================== */
/* ==========[ TOKENS ]========== */
/* 1. Texts */
/* 2. Button */
/* 3. Brand */
/* 4. Background */
/* 5. Font */
/* 6. Border */
/* ==========[ DECISION ]========== */
/** VAR OLDS **/
/*-- Colors --*/
/*-- Text & Font --*/
/*-- Border, Shadow --*/
/*-- Main colors --*/
table.table-compare {
  margin-top: 50px;
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 1000px;
  margin: auto;
  width: 100%;
  border: 1px solid #e6eff4;
  table-layout: fixed;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px; }
  table.table-compare thead {
    color: white;
    border: 1px solid #009f6f; }
    table.table-compare thead tr th:first-child {
      width: 60%;
      min-width: 200px;
      word-break: break-all; }
    table.table-compare thead th {
      border-bottom: none; }
  table.table-compare tbody tr:nth-of-type(odd) {
    background: #F8FAFC; }
  table.table-compare td {
    border-top: none; }
  table.table-compare .fa-check {
    color: #009f6f; }
  table.table-compare .fa-close {
    color: red; }

table.table-tableau thead tr th:first-of-type {
  width: auto; }

table.table-tableau thead tr th.col-feature {
  max-width: 30%; }

table.table-tableau td {
  font-size: 14px; }
  table.table-tableau td:first-child {
    font-weight: 600; }

table.table-patools {
  width: 120%;
  position: relative;
  left: calc(-60% + 50%); }
  table.table-patools tr td:first-child {
    font-weight: bold; }

table.table-looker tbody tr:nth-of-type(odd) {
  background: #F8FAFC; }

table.table-looker thead {
  color: white; }
  table.table-looker thead tr th:first-child {
    width: 25%;
    min-width: 200px;
    word-break: break-all; }
  table.table-looker thead tr th:nth-child(2) {
    width: 45%;
    min-width: 200px;
    word-break: break-all; }

table.table-chartio thead tr th:first-child, table.table-metabase thead tr th:first-child {
  width: 30%; }

table.table-chartio tbody tr td:first-child, table.table-metabase tbody tr td:first-child {
  font-weight: bold; }

table.table-how_it_works thead tr th:first-child {
  width: 50%; }

table.table-how_it_works thead tr th {
  text-align: center;
  font-size: 20px; }

/* ============================================================
   Generic 3-column comparison card (.hl-comparison-*)
   Usage: wrap in .hl-comparison-card (equal cols)
   For narrow label col: add .hl-comparison-card--compact-label
   ============================================================ */
.hl-comparison-wrapper {
  max-width: 1200px;
  margin: 0 auto; }

.hl-comparison-card {
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(5, 38, 76, 0.06), 0 4px 8px rgba(5, 38, 76, 0.06), 0 8px 24px rgba(5, 38, 76, 0.08));
  overflow: hidden;
  border: 1px solid #E3E7ED; }

.hl-comparison-header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: linear-gradient(135deg, #05264C 0%, #146DCD 100%); }
  .hl-comparison-header .header-feature {
    background: transparent;
    padding: 20px 24px;
    font-size: 0.6875rem;
    font-weight: 540;
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.12em; }
  .hl-comparison-header .header-competitor {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    padding: 24px 28px;
    font-size: 1rem;
    font-weight: 540;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .hl-comparison-header .header-holistics {
    background: linear-gradient(135deg, #259B6C 0%, #34C38F 100%);
    color: white;
    padding: 24px 28px;
    font-size: 1rem;
    font-weight: 580;
    display: flex;
    align-items: center; }

.hl-comparison-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-top: none; }
  .hl-comparison-body .cell-title {
    font-size: 0.9375rem;
    font-weight: 540;
    color: #05264C;
    margin: 0;
    line-height: 1.4; }
  .hl-comparison-body .cell-content {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0; }

.hl-comparison-row {
  display: contents; }
  .hl-comparison-row .cell-feature {
    background-color: #fff;
    padding: 24px 24px;
    border-right: 1px solid #E3E7ED;
    border-bottom: 1px solid #E3E7ED;
    display: flex;
    align-items: center; }
  .hl-comparison-row .cell-competitor {
    background: #FAFBFC;
    padding: 24px 28px;
    border-bottom: 1px solid #E3E7ED;
    display: flex;
    align-items: center; }
    .hl-comparison-row .cell-competitor .cell-content {
      color: #6B7280; }
  .hl-comparison-row .cell-holistics {
    background-color: #EAF8F2;
    padding: 24px 28px;
    border-bottom: 1px solid #C8E8D8;
    border-left: 3px solid #259B6C;
    display: flex;
    align-items: center; }
    .hl-comparison-row .cell-holistics .cell-content {
      color: #05264C;
      font-weight: 510; }
  .hl-comparison-row:last-child .cell-feature, .hl-comparison-row:last-child .cell-holistics, .hl-comparison-row:last-child .cell-competitor {
    border-bottom: none; }

.hl-comparison-card--compact-label .hl-comparison-header,
.hl-comparison-card--compact-label .hl-comparison-body {
  grid-template-columns: 0.7fr 1fr 1fr; }

@media (max-width: 992px) {
  .hl-comparison-header,
  .hl-comparison-body {
    grid-template-columns: 1fr; }
  .hl-comparison-header .header-feature {
    display: none; }
  .hl-comparison-header .header-competitor,
  .hl-comparison-header .header-holistics {
    border-left: none; }
  .hl-comparison-row .cell-feature {
    grid-column: 1 / -1;
    border-right: none;
    text-align: center;
    justify-content: center;
    background-color: #F0F4F8;
    border-bottom: 1px solid #E3E7ED; }
  .hl-comparison-row .cell-competitor {
    border-right: none; }
  .hl-comparison-row .cell-holistics {
    border-right: none;
    border-left: none;
    border-top: 3px solid #259B6C;
    border-bottom: 1px solid #C8E8D8; }
  .hl-comparison-header .header-holistics,
  .hl-comparison-header .header-competitor,
  .hl-comparison-row .cell-feature,
  .hl-comparison-row .cell-holistics,
  .hl-comparison-row .cell-competitor {
    padding: 20px 24px; } }

.holistics-column {
  background-color: #f8f9fa !important;
  border-left: 3px solid #009f6f !important;
  position: relative; }
  .holistics-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 159, 111, 0.05) 0%, rgba(0, 159, 111, 0.02) 100%);
    pointer-events: none; }
  .holistics-column th {
    background-color: #e8f5e8 !important;
    font-weight: bold !important;
    color: #2d5a3d !important; }
  .holistics-column td {
    background-color: #f8f9fa !important;
    border-left: 3px solid #009f6f !important; }