  /* =========================================
   *  PACKAGE COMPARISON MATRIX
   *  DarkStar Neon Control Panel
   * ========================================= */

  .ds-package-compare {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 54px auto 0;
    text-align: left;
  }

  /* subtle ambient glow behind the panel */
  .ds-package-compare::before {
    content: '';
    position: absolute;
    width: 55%;
    height: 100%;
    left: 22%;
    top: 0;
    background: radial-gradient(
      ellipse,
      rgba(255,20,147,.10),
                                transparent 68%
    );
    filter: blur(24px);
    pointer-events: none;
  }

  /* section label */
  .ds-package-compare-title {
    position: relative;
    margin: 0 0 18px;
    text-align: center;
    color: var(--ds-gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255,210,138,.35);
  }

  /* outer panel */
  .ds-compare-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    border: 1px solid rgba(255,20,147,.42);
    border-radius: 8px;

    background:
    linear-gradient(
      180deg,
      rgba(255,20,147,.045),
                    rgba(0,0,0,.58)
    ),
    rgba(3,1,3,.94);

    box-shadow:
    0 0 26px rgba(255,20,147,.12),
    inset 0 0 35px rgba(255,20,147,.035);
  }

  /* neon top edge */
  .ds-compare-scroll::before {
    content: '';
    display: block;
    height: 2px;
    background:
    linear-gradient(
      90deg,
      transparent,
      var(--ds-hot-pink) 18%,
                    var(--ds-gold) 50%,
                    var(--ds-hot-pink) 82%,
                    transparent
    );
    box-shadow:
    0 0 12px rgba(255,20,147,.65),
    0 0 22px rgba(255,20,147,.25);
  }

  /* table */
  .ds-compare-table {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  /* all cells */
  .ds-compare-table th,
.ds-compare-table td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,20,147,.16);
  text-align: center;
  vertical-align: middle;
}

/* header */
.ds-compare-table thead th {
  padding: 23px 16px 20px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ds-compare-table thead th:first-child {
  width: 28%;
  text-align: left;
}

/* package name */
.ds-compare-name {
  display: block;
  color: var(--ds-hot-pink);
  font-size: 21px;
  letter-spacing: .08em;
  text-shadow:
  0 0 8px rgba(255,20,147,.8),
  0 0 18px rgba(255,20,147,.35);
}

/* package type */
.ds-compare-type {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.42);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
}

/* feature names */
.ds-compare-table tbody th {
  background: rgba(255,255,255,.012);
  color: rgba(255,255,255,.62);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: left;
}

/* values */
.ds-compare-table tbody td {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 600;
}

/* =========================================
 *  DARKSTAR FEATURED COLUMN
 * ========================================= */

.ds-compare-featured {
  position: relative;
  background:
  linear-gradient(
    180deg,
    rgba(255,20,147,.075),
                  rgba(255,20,147,.025)
  );
}

/* vertical neon rails around DarkStar */
.ds-compare-table thead .ds-compare-featured {
  border-left: 1px solid rgba(255,20,147,.45);
  border-right: 1px solid rgba(255,20,147,.45);
  border-top: 2px solid var(--ds-hot-pink);

  box-shadow:
  inset 0 8px 20px rgba(255,20,147,.07);
}

.ds-compare-table tbody td.ds-compare-featured {
  border-left: 1px solid rgba(255,20,147,.25);
  border-right: 1px solid rgba(255,20,147,.25);
}

/* =========================================
 *  NEON STAR CHECKMARKS
 * ========================================= */

.ds-compare-check {
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  color: var(--ds-hot-pink);
  font-size: 18px;
  line-height: 1;
  font-weight: 900;

  text-shadow:
  0 0 5px rgba(255,20,147,.95),
  0 0 12px rgba(255,20,147,.65);

  filter: drop-shadow(
    0 0 4px rgba(255,20,147,.55)
  );
}

/* unavailable */
.ds-compare-dash {
  color: rgba(255,255,255,.18);
  font-size: 14px;
}

/* upgraded features */
.ds-compare-highlight {
  color: var(--ds-gold);
  font-weight: 900;
  text-shadow:
  0 0 7px rgba(255,210,138,.35);
}

/* bottom note */
.ds-compare-note {
  margin: 15px 0 0;
  text-align: center;
  color: rgba(255,255,255,.36);
  font-size: 11px;
  line-height: 1.5;
}

/* bottom edge */
.ds-compare-table tbody tr:last-child th,
.ds-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

/* =========================================
 *  MOBILE
 * ========================================= */

@media (max-width: 700px) {

  .ds-package-compare {
    margin-top: 40px;
  }

  .ds-compare-scroll {
    border-radius: 7px;
  }

  .ds-compare-table {
    min-width: 650px;
  }

  .ds-compare-table th,
  .ds-compare-table td {
    padding: 14px 13px;
  }

  .ds-compare-name {
    font-size: 18px;
  }

  .ds-compare-type {
    font-size: 8px;
  }
}

/* =========================================
 * FORCE DARKSTAR TABLE STYLING
 * Prevent WordPress/theme table styles
 * from bleeding into comparison matrix
 * ========================================= */

.darkstar-home .ds-compare-table,
.darkstar-home .ds-compare-table thead,
.darkstar-home .ds-compare-table tbody,
.darkstar-home .ds-compare-table tr,
.darkstar-home .ds-compare-table th,
.darkstar-home .ds-compare-table td {
  background-color: transparent !important;
  background-image: none !important;
  border-color: rgba(255,20,147,.16) !important;
  box-shadow: none;
}

/* Header row */
.darkstar-home .ds-compare-table thead,
.darkstar-home .ds-compare-table thead tr,
.darkstar-home .ds-compare-table thead th {
  background: rgba(3,1,3,.96) !important;
  color: inherit;
}

/* Feature-name column */
.darkstar-home .ds-compare-table tbody th {
  background: rgba(255,20,147,.018) !important;
}

/* DarkStar highlighted column */
.darkstar-home .ds-compare-table .ds-compare-featured {
  background:
    linear-gradient(
      180deg,
      rgba(255,20,147,.085),
      rgba(255,20,147,.028)
    ) !important;
}

/* Kill theme hover effects */
.darkstar-home .ds-compare-table tbody tr:hover,
.darkstar-home .ds-compare-table tbody tr:hover th,
.darkstar-home .ds-compare-table tbody tr:hover td,
.darkstar-home .ds-compare-table tr:hover,
.darkstar-home .ds-compare-table th:hover,
.darkstar-home .ds-compare-table td:hover {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

/* Preserve featured column even during hover */
.darkstar-home .ds-compare-table tbody tr:hover td.ds-compare-featured {
  background:
    linear-gradient(
      180deg,
      rgba(255,20,147,.085),
      rgba(255,20,147,.028)
    ) !important;
}

/* Remove any white/outside theme borders */
.darkstar-home .ds-compare-table,
.darkstar-home .ds-compare-table th,
.darkstar-home .ds-compare-table td {
  border-left-color: rgba(255,20,147,.16) !important;
  border-right-color: rgba(255,20,147,.16) !important;
  border-top-color: rgba(255,20,147,.16) !important;
  border-bottom-color: rgba(255,20,147,.16) !important;
}

/* Keep the special DarkStar column rails */
.darkstar-home .ds-compare-table thead th.ds-compare-featured {
  border-top: 2px solid var(--ds-hot-pink) !important;
  border-left: 1px solid rgba(255,20,147,.42) !important;
  border-right: 1px solid rgba(255,20,147,.42) !important;
}

.darkstar-home .ds-compare-table tbody td.ds-compare-featured {
  border-left: 1px solid rgba(255,20,147,.24) !important;
  border-right: 1px solid rgba(255,20,147,.24) !important;
}

.darkstar-home .ds-compare-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed;
  background: transparent !important;
}

/* GALLERY STARTS HERE */
