/* ============================================
   MWW STUDIO — COMPARISON TABLE
   comparison-table.css

   TOKEN MAPPING STRATEGY
   ─────────────────────────────────────────────
   Local variables below point to your design
   tokens first (tokens.css), with raw HSL
   fallbacks for var.css compatibility.

   When you fully switch to tokens.css, the
   fallbacks will simply never fire — no
   changes needed in this file.

   tokens.css  →  var.css equivalent
   --clr-700   →  --clr-prm-700 / --neon-purple
   --clr-100   →  --primary-orange
   --clr-500   →  --primary-blue
   --clr-300   →  --primary-green
   --clr-050   →  --primary-red
   ============================================ */

.comparison-section {

  /* ── Purple (MWW Studio column) ─────────── */
  --ct-purple:        var(--clr-700,        hsl(270, 80%, 35%));
  --ct-purple-light:                        hsl(266, 47%, 93%);  /* tint — no token exists */
  --ct-purple-dark:   var(--clr-brand-purple, hsl(268, 46%, 30%));

  /* ── Orange (accent / badge) ────────────── */
  --ct-orange:        var(--clr-100,        hsl(38, 100%, 50%));
  --ct-orange-light:                        hsl(29,  93%, 94%);  /* tint — no token exists */
 
  /*--ct-green -------------------------- ------*/
  --ct-green:    var(--clr-300,      hsl(145, 63%, 42%));  
 
/* ── Blue (hover states) ─────────────────── */
  --ct-blue:          var(--clr-500,        hsl(204, 64%, 52%));
  --ct-blue-light:                          hsl(214, 74%, 94%);  /* tint — no token exists */

  /* ── Check green ────────────────────────── */
  --ct-check-green:   var(--clr-300,        hsl(145, 63%, 42%));
  --ct-check-green-bg:                      hsl(149, 61%, 90%);  /* tint — no token exists */

  /* ── Check red ──────────────────────────── */
  --ct-check-red:     var(--clr-050,        hsl(6,  78%, 57%));
  --ct-check-red-bg:                        hsl(0,  89%, 93%);   /* tint — no token exists */

  /* ── Text ───────────────────────────────── */
  --ct-text-dark:     var(--clr-text-900,   hsl(240, 28%, 14%));
  --ct-text-mid:      var(--clr-text-700,   hsl(240, 18%, 35%));

  /* ── Surfaces ───────────────────────────── */
  --ct-white:         var(--clr-neutral-050, hsl(0, 0%, 100%));
  --ct-row-alt:       var(--clr-bg-surface,  hsl(252, 45%, 98%));
  --ct-bg:            var(--clr-bg-hero,     hsl(225, 43%, 93%));

  /* ── Borders ────────────────────────────── */
  --ct-border:        var(--clr-border,      hsl(240, 32%, 91%));
  --ct-border-sticky: var(--clr-border-strong, hsl(240, 28%, 83%));

  /* ── Table header dark bg ───────────────── */
  --ct-header-bg:     hsl(0, 0%, 96%);

  /* ── Even-row MWW column tints ──────────── */
  --ct-purple-light:          hsl(266, 47%, 93%);  /* tint — no token exists */
  --ct-purple-even:                         hsl(262, 76%, 95%);
  --ct-purple-hover:                        hsl(256, 62%, 90%);

  /* ── Typography ─────────────────────────── */
  --ct-font-body:     var(--font-family,    system-ui, -apple-system, sans-serif);
  --ct-font-display:  var(--font-family,    system-ui, -apple-system, sans-serif);

  /* ── Radii ───────────────────────────────── */
  --ct-radius-sm:     6px;
  --ct-radius-md:     12px;
  --ct-radius-lg:     20px;
}

/* ============================================
   SECTION WRAPPER
   ============================================ */

.comparison-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  /* background-color: var(--ct-bg); */
}

/* ============================================
   SECTION HEADER
   ============================================ */

.comparison-section .section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.comparison-section .section-eyebrow {
  font-family: var(--ct-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ct-orange);
  margin-bottom: 0.6rem;
}

.comparison-section .section-title {
  font-family: var(--ct-font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--ct-text-dark);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.comparison-section .section-subtitle {
  font-size: 1rem;
  color: var(--ct-text-mid);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================
   TABLE WRAPPER
   ============================================ */

.comparison-section .table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--ct-radius-lg);
  box-shadow: 0 8px 40px var(--clr-shadow-md, hsla(270, 43%, 44%, 0.10));
  background: var(--ct-white);
}

/* ============================================
   TABLE
   ============================================ */

.comparison-section .comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  table-layout: fixed;
}

/* ============================================
   COLUMN WIDTHS
   ============================================ */

.comparison-section .comparison-table .feature-col {
  width: 32%;
}

.comparison-section .comparison-table th:not(.feature-col) {
  width: 13.6%;
}

/* ============================================
   HEADER ROW
   ============================================ */

.comparison-section .comparison-table thead tr {
  /* background: hsla(225, 43%, 93%, 1); */
  background-color: var(--ct-header-bg);
  border: .4px solid black;
  border-top: 5px solid navy;
   color: var(--clr-text-black-always, hsl(240, 28%, 14%));
}

.comparison-section .comparison-table thead th {
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-family: var(--ct-font-body);
  font-weight: 500;
  font-size: 0.78rem;
  color: black;
  vertical-align: bottom;
  border-bottom: none;
}
.comparison-section .comparison-table thead th.feature-col {
  font-size: 1.1rem;
  color: hsl(0, 0%, 100%);
  text-align: left;
  padding-left: 1.5rem;
}
#third-section .comparison-section .comparison-table thead th {
  color: hsl(0, 0%, 0%);
}
#third-section .comparison-section .comparison-table thead th:not(.mww-col) .col-name {
  color: hsl(0, 0%, 0%);
}

/* ============================================
   MWW STUDIO COLUMN — highlighted
   ============================================ */

.comparison-section .comparison-table thead th.mww-col {
  background: var(--ct-green);
  position: relative;
}

.comparison-section .comparison-table thead th.mww-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ct-purple);
}

.comparison-section .comparison-table tbody td.mww-col {
  background: var(--ct-purple-light);
  border-left: 2px solid var(--ct-purple);
  border-right: 2px solid var(--ct-purple);
}

.comparison-section .comparison-table tbody tr:last-child td.mww-col {
  border-bottom: 3px solid var(--ct-purple);
  border-radius: 0 0 var(--ct-radius-sm) var(--ct-radius-sm);
}

/* ============================================
   COLUMN HEADER CONTENT
   ============================================ */

.comparison-section .col-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

/* .comparison-section .col-badge {
  display: inline-block;
  background: var(--ct-purple);
  color: var(--ct-white);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
} */

.comparison-section .col-name {
  font-family: var(--ct-font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--clr-text-white-always, hsl(0, 0%, 100%));
  line-height: 1.2;
}

/* ============================================
   BODY ROWS
   ============================================ */

.comparison-section .comparison-table tbody tr {
  border-bottom: 1px solid var(--ct-border);
  transition: background 0.15s ease;
}

.comparison-section .comparison-table tbody tr:nth-child(even) {
  background: var(--ct-row-alt);
}

.comparison-section .comparison-table tbody tr:nth-child(even) td.mww-col {
  background: var(--ct-purple-even);
}

.comparison-section .comparison-table tbody tr:last-child {
  border-bottom: none;
}

.comparison-section .comparison-table tbody tr:hover {
  background: var(--ct-blue-light);
}

.comparison-section .comparison-table tbody tr:hover td.mww-col {
  background: var(--ct-purple-hover);
}

/* ============================================
   FEATURE LABEL CELL
   ============================================ */

.comparison-section .feature-label {
  padding: 1rem 1rem 1rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ct-text-white-always), hsl(240, 28%, 83%);
  text-align: left;
  line-height: 1.4;
}

/* ============================================
   DATA CELLS
   ============================================ */

.comparison-section .comparison-table tbody td {
  padding: 1rem 0.75rem;
  text-align: center;
  vertical-align: middle;
}

/* ============================================
   CHECKMARK / X BADGES
   — width/height in rem (base 16px)
   — 2rem = 32px  |  1.625rem = 26px
   ============================================ */

.comparison-section .check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.comparison-section .check.yes {
  background: var(--ct-check-green-bg);
  color: var(--ct-check-green);
}

.comparison-section .check.no {
  background: var(--ct-check-red-bg);
  color: var(--ct-check-red);
}

/* ============================================
   BREAKPOINT 1 — 1024px
   Tablets landscape & small laptops
   Tighten fonts and padding
   ============================================ */

@media (max-width: 1024px) {
  .comparison-section {
    padding: 2.5rem 1.25rem;
  }

  .comparison-section .comparison-table thead th {
    font-size: 0.72rem;
    padding: 1rem 0.5rem;
  }

  .comparison-section .col-name {
    font-size: 0.85rem;
  }

  .comparison-section .col-badge {
    font-size: 0.6rem;
  }

  .comparison-section .feature-label {
    font-size: 0.85rem;
    padding: 0.875rem 0.75rem 0.875rem 1.25rem;
  }

  .comparison-section .comparison-table tbody td {
    padding: 0.875rem 0.5rem;
  }

  .comparison-section .check {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.9rem;
  }
}

/* ============================================
   BREAKPOINT 2 — 768px
   Tablets portrait & large phones
   Sticky first column + horizontal scroll
   ============================================ */

@media (max-width: 768px) {
  .comparison-section {
    padding: 2rem 1rem;
  }

  .comparison-section .section-title {
    font-size: 1.6rem;
  }

  .comparison-section .section-subtitle {
    font-size: 0.9rem;
  }

  .comparison-section .table-wrapper {
    border-radius: var(--ct-radius-md);
  }

  /* — Sticky feature label column — */
  .comparison-section .comparison-table thead th.feature-col,
  .comparison-section .comparison-table tbody td.feature-label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--ct-white);
    border-right: 1.5px solid var(--ct-border-sticky);
  }

  /* Keep dark header bg on sticky header cell */
  .comparison-section .comparison-table thead th.feature-col {
    background: var(--ct-header-bg);
    /* border-right: 1.5px solid hsla(0, 0%, 100%, 0.12); */
  }

  /* Keep alternating row bg on sticky cell */
  .comparison-section .comparison-table tbody tr:nth-child(even) td.feature-label {
    background: var(--ct-row-alt);
  }

  /* Keep hover bg on sticky cell */
  .comparison-section .comparison-table tbody tr:hover td.feature-label {
    background: var(--ct-blue-light);
  }

  .comparison-section .feature-label {
    font-size: 0.8rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    min-width: 9rem;
  }

  .comparison-section .col-name {
    font-size: 0.75rem;
  }

  .comparison-section .col-badge {
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
  }

  .comparison-section .comparison-table thead th {
    padding: 0.875rem 0.4rem;
    font-size: 0.68rem;
  }

  .comparison-section .comparison-table tbody td {
    padding: 0.75rem 0.4rem;
  }

  .comparison-section .check {
    width: 1.625rem;
    height: 1.625rem;
    font-size: 0.8rem;
  }
}

/* ============================================
   BREAKPOINT 3 — 480px
   iPhone SE (375px) & older SE (320px)
   Fine-tune for smallest screens
   ============================================ */

@media (max-width: 480px) {
  .comparison-section {
    padding: 1.5rem 0.75rem;
  }

  .comparison-section .section-header {
    margin-bottom: 1.5rem;
  }

  .comparison-section .section-eyebrow {
    font-size: 0.7rem;
  }

  .comparison-section .section-title {
    font-size: 1.35rem;
  }

  .comparison-section .section-subtitle {
    font-size: 0.8rem;
  }

  .comparison-section .feature-label {
    font-size: 0.7rem;
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    min-width: 7.5rem;
  }

  .comparison-section .col-name {
    font-size: 0.65rem;
  }

  /* Hide badge at 320px — too cramped */
  .comparison-section .col-badge {
    display: none;
  }

  .comparison-section .comparison-table thead th {
    padding: 0.75rem 0.3rem;
    font-size: 0.6rem;
  }

  .comparison-section .comparison-table tbody td {
    padding: 0.625rem 0.3rem;
  }

  .comparison-section .check {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.7rem;
  }

  .comparison-section .comparison-table {
    min-width: 560px;
  }
}