/* global white background, font */
    body {
      background-color: #ffffff;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e293b;
      line-height: 1.5;
    }

    /* wide container, max-width increased */
    .th-container-fluid {
      max-width: 98%;
      margin-left: auto;
      margin-right: auto;
      padding-left: 16px;
      padding-right: 16px;
    }
    @media (min-width: 1600px) {
      .th-container-fluid { max-width: 1560px; }
    }

    /* title area – purple accents, no icons */
    .title-area {
      margin-bottom: 2.2rem;
    }
    .sub-title {
      display: inline-block;
      font-size: 0.9rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: #4a3a9e;        /* deep purple text */
      background: #f0edff;   /* very light purple */
      padding: 0.4rem 1.5rem;
      border-radius: 40px;
      margin-bottom: 0.8rem;
      border: 1px solid #d2c9ff;
    }
    .sec-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #1e1a3b;        /* dark navy-purple */
      letter-spacing: -0.01em;
      margin-bottom: 0.2rem;
    }

    /* ----- table card: wide, soft shadow, purple harmony ----- */
    .table_component {
      background: white;
      border-radius: 26px;
      box-shadow: 0 15px 30px rgba(90, 73, 248, 0.06), 0 4px 12px rgba(90, 73, 248, 0.03);
      border: 1px solid #e0daff;   /* light purple border */
      overflow: hidden;
    }

    .comparison-table {
      width: 100%;
      margin-bottom: 0;
      background-color: white;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.95rem;
    }

    /* ----- HEADER: main button color #5a49f8, white text ----- */
    .comparison-table thead th {
      background: #5a49f8;        /* exact button color */
      color: white;
      font-weight: 600;
      font-size: 1.08rem;
      padding: 1.3rem 1.2rem;
      border: none;
      border-bottom: 2px solid #3c2cb0;  /* deeper purple for depth */
      vertical-align: middle;
    }
    /* first header cell – slightly deeper for hierarchy */
    .comparison-table thead th:first-child {
      background: #5241e0;
      border-top-left-radius: 24px;
    }
    .comparison-table thead th:last-child {
      border-top-right-radius: 24px;
    }

    /* ----- BODY CELLS ----- */
    .comparison-table tbody td {
      padding: 1.25rem 1.2rem;
      background-color: white;
      border-bottom: 1px solid #e6e1ff;   /* soft purple border */
      vertical-align: top;
      color: #1e293b;
    }

    /* feature column (first column) – light purple background, semi-bold */
    .comparison-table tbody td:first-child {
      font-weight: 620;
      color: #1e1a4b;
      background-color: #fbfaff;   /* very faint purple */
      border-right: 1px solid #dfd8ff;
      width: 20%;
    }

    /* Sidify column – even softer purple tint */
    .comparison-table tbody td:nth-child(2) {
      background-color: #f9f7ff;   /* subtle purple-white */
      border-right: 1px solid #dfd8ff;
    }

    /* Online column – clean white (neutral) */
    .comparison-table tbody td:nth-child(3) {
      background-color: #ffffff;
    }

    /* hover effect – gentle purple */
    .comparison-table tbody tr:hover td {
      background-color: #f5f2ff !important;
    }
    .comparison-table tbody tr:hover td:first-child {
      background-color: #f0ebff !important;
    }

    /* ✓ and ✗ only – pure text symbols, no icon fonts */
    .check-yes {
      color: #1f8a5c;       /* fresh green – harmonious with purple */
      font-weight: 700;
      font-size: 1.3rem;
      line-height: 1;
      display: inline-block;
    }
    .check-no {
      color: #c7454b;       /* soft red */
      font-weight: 700;
      font-size: 1.3rem;
      line-height: 1;
      display: inline-block;
    }

    /* chip tags – lavender background, purple border */
    .chip {
      display: inline-block;
      background: #eeebff;
      color: #3f3790;          /* deep purple-blue for text */
      font-size: 0.82rem;
      padding: 0.22rem 0.9rem;
      border-radius: 40px;
      margin: 0.15rem 0.2rem;
      white-space: nowrap;
      font-weight: 500;
      border: 1px solid #ccc2ff;
    }
    .chip-light {
      background: #f4f1ff;
      color: #4a3d99;
    }
    .hint {
      font-size: 0.78rem;
      color: #6f5f9e;
      margin-left: 6px;
      font-weight: 400;
    }

    /* special quality badge – integrates purple */
    .quality-badge {
      background: #e1d9ff;
      color: #3e2e8c;
      padding: 0.2rem 0.9rem;
      border-radius: 30px;
      font-size: 0.8rem;
      margin-left: 6px;
      font-weight: 600;
      border: 1px solid #b1a3ff;
    }

    /* responsive fine‑tuning */
    .table-responsive {
      border-radius: 24px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .table-responsive::-webkit-scrollbar {
      height: 6px;
      background: #e9e4ff;
    }
    .table-responsive::-webkit-scrollbar-thumb {
      background: #a594f0;
      border-radius: 12px;
    }

    @media (max-width: 768px) {
      .sec-title { font-size: 1.8rem; }
      .comparison-table tbody td { padding: 1rem 0.9rem; }
      .chip { white-space: normal; word-break: break-word; }
    }

    .space-bottom { padding-bottom: 3rem; }
    .overflow-hidden { overflow: hidden; }