<style>
/* =========================================================
   E5® Product Comparison — Light Theme (transparent) + Not-Too-Wide
   ========================================================= */

/* Container (light & transparent to match page) */
.e5-matrix-wrap {
  /* base spacing */
  margin: 72px auto;
  padding: 48px 56px;

  /* light theme variables */
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7fafc;
  --text:#0b0f14;
  --muted:#5a6b7f;
  --brand:#15d1c1;
  --brand-2:#7a5cff;
  --line:#e5eaf0;
  --radius:16px;

  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--text);
  text-align: center;
  box-sizing: border-box;
}

/* Title */
.e5-matrix-head { text-align:center; margin-bottom:24px; }
.e5-matrix-title{
  font-size:clamp(22px,2.5vw,30px);
  font-weight:700;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text);
}
.e5-matrix-title .dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  box-shadow:0 0 14px rgba(21,209,193,.6);
}

/* Table container */
.product-comparison-matrix{
  border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  overflow:hidden;
  text-align:left;
}

/* Table */
.product-comparison-matrix .table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

/* Head */
.product-comparison-matrix thead th{
  position:sticky; top:0; z-index:3;
  background:linear-gradient(180deg,rgba(21,209,193,.06),rgba(21,209,193,.02));
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding:14px 22px;
  font-weight:700;
  letter-spacing:.3px;
  backdrop-filter: blur(4px);
}

/* Body rows */
.product-comparison-matrix tbody tr{
  background:var(--panel);
  transition:background .18s ease;
}
.product-comparison-matrix tbody tr:nth-child(2n){ background:var(--panel-2); }
.product-comparison-matrix tbody tr:hover{
  background:#f0fbf9;
}

/* Cells */
.product-comparison-matrix td{
  border-bottom:1px solid var(--line);
  padding:18px 22px;
  vertical-align:top;
  color:var(--text);
}

/* Columns + badges */
.col-product{ min-width:240px; }
.product-cell{ display:flex; align-items:flex-start; gap:12px; }
.prod-name{ font-weight:800; font-size:1.05rem; line-height:1.25; color: var(--text); }
.muted{ color:var(--muted); }

.badge{
  font-size:.72rem;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  letter-spacing:.2px;
  white-space:nowrap;
  border:2px solid transparent;
}
.badge--integral{ background:transparent; border-color:#2ea8ff; color:#0369a1; }
.badge--topical { background:#10b981; border-color:#10b981; color:#03140f; }

/* Pills */
.pill{
  display:inline-block;
  border:1px solid #e7edf4;
  border-radius:999px;
  padding:4px 10px;
  margin:4px 6px 0 0;
  font-size:.95rem;
  color:#1f2937;
  background:#ffffff;
}

/* Emphasis */
.key b, .key strong, .product-comparison-matrix strong {
  color:#0b0f14 !important;
  font-weight:800;
}

/* Unify font size for these columns */
.product-comparison-matrix .col-application,
.product-comparison-matrix .col-primary-function {
  font-size: 1rem;
  line-height: 1.5;
}
.product-comparison-matrix .col-application .pill,
.product-comparison-matrix .col-primary-function .pill {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Mobile */
@media (max-width: 900px){
  .e5-matrix-wrap{ max-width: 94%; padding: 24px; }
  .product-comparison-matrix thead{ display:none; }
  .product-comparison-matrix .table,
  .product-comparison-matrix tbody,
  .product-comparison-matrix tr,
  .product-comparison-matrix td{ display:block;width:100%; }
  .product-comparison-matrix tbody tr{
    border:1px solid var(--line);
    border-radius:14px;
    margin:14px 12px;
    padding:8px;
    background:#fff;
  }
  .product-comparison-matrix td{
    border:none;
    border-bottom:1px dashed var(--line);
    padding:12px 14px;
    position:relative;
  }
  .product-comparison-matrix td:last-child{ border-bottom:none; }
  .product-comparison-matrix td::before{
    content:attr(data-label);
    display:block;
    color:#6b7280;
    font-size:.76rem;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .col-product{ min-width:auto; }
}

/* Bottom fade (subtle on light) */
.e5-matrix-fade{
  height:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(0,0,0,.06));
  border-radius:0 0 var(--radius) var(--radius);
}

/* =========================================================
   NOT FULL-BLEED: width + padding guard (place LAST)
   ========================================================= */
.e5-matrix-wrap{
  /* tune these two: roomy but not edge-to-edge */
  --wrap-max: 1200px;      /* ceiling width */
  --wrap-pad: 40px;        /* inner side padding */

  width: min(100%, var(--wrap-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wrap-pad) !important;
  padding-right: var(--wrap-pad) !important;

  box-sizing: border-box;
  max-width: none !important;     /* let --wrap-max govern */
  align-self: center !important;  /* if parent is flex */
  float: none !important;         /* if theme floats modules */
}

/* tighten slightly on very large viewports */
@media (min-width: 1440px){
  .e5-matrix-wrap{ --wrap-max: 1100px; }
}

/* =========================================================
   Rounded corners add-on
   ========================================================= */
.e5-matrix-wrap{
  --radius: 16px;                 /* adjust this for more/less round */
  border-radius: var(--radius) !important;
  overflow: hidden;               /* clip inner content to the curve */
}
.product-comparison-matrix{
  border-radius: calc(var(--radius) - 4px) !important;
  overflow: hidden;
}
</style>
