/* ============================================================
   Comparison table — vs-website-builders
   Replaces the plain striped WP table with a brand-consistent,
   readable table that survives 6 columns on desktop and
   degrades to a stacked card layout on mobile.
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--line);
  box-shadow: var(--hard);
  background: #fff;
  margin: 2rem 0 1.5rem;
}

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 860px;          /* force horizontal scroll rather than crushing columns */
}

/* --- header row --- */
.cmp-table thead th {
  background: var(--ink);
  color: var(--paper, #f6f0e3);
  text-align: left;
  vertical-align: bottom;
  padding: 1rem 0.85rem;
  border-bottom: var(--line);
  border-right: 1px solid rgba(246, 240, 227, 0.18);
  font-weight: 800;
  line-height: 1.25;
}
.cmp-table thead th:last-child { border-right: 0; }
.cmp-table thead th small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(246, 240, 227, 0.66);
}

/* the SiteONTHEGO column is the hero of the table */
.cmp-table th.is-us,
.cmp-table td.is-us {
  background: #fff8fb;
  border-left: 3px solid var(--pink);
  border-right: 3px solid var(--pink);
  font-weight: 700;
}
.cmp-table thead th.is-us {
  background: var(--pink);
  color: #fff;
}
.cmp-table thead th.is-us small { color: rgba(255, 255, 255, 0.78); }

/* --- body --- */
.cmp-table td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid rgba(17, 18, 22, 0.12);
  border-right: 1px solid rgba(17, 18, 22, 0.07);
  vertical-align: top;
  line-height: 1.45;
  color: var(--ink);
}
.cmp-table td:last-child { border-right: 0; }

.cmp-table tbody tr:nth-child(odd) td { background: #fbfaf6; }
.cmp-table tbody tr:nth-child(odd) td.is-us { background: #fff3f8; }
.cmp-table tbody tr:nth-child(even) td.is-us { background: #fff8fb; }

/* feature-name column */
.cmp-table td:first-child {
  font-weight: 700;
  width: 22%;
  min-width: 190px;
  color: var(--ink);
}

/* row group headings (Cost, Platform, Ownership…) */
.cmp-table tr.cmp-group th {
  background: var(--indigo);
  color: #fff;
  text-align: left;
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  border-right: 0;
}

/* yes / no / partial markers */
.cmp-yes, .cmp-no, .cmp-part {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}
.cmp-yes::before  { content: "✓"; color: var(--indigo); font-weight: 900; }
.cmp-no::before   { content: "✗"; color: #b3213c; font-weight: 900; }
.cmp-part::before { content: "~"; color: #a1690b; font-weight: 900; font-size: 1.05em; }

.cmp-src {
  font-size: 0.62rem;
  vertical-align: super;
  color: var(--pink);
  font-weight: 800;
  text-decoration: none;
}

/* footnotes */
.cmp-notes {
  font-size: 0.78rem;
  line-height: 1.6;
  color: #4b4f5e;
  max-width: 78ch;
}
.cmp-notes strong { color: var(--ink); }

/* scroll hint on small screens */
.table-wrap { position: relative; }
@media (max-width: 900px) {
  .table-wrap::after {
    content: "scroll →";
    position: sticky;
    right: 0;
    bottom: 0;
    display: block;
    padding: 0.4rem 0.7rem;
    background: rgba(17, 18, 22, 0.82);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: right;
  }
}

/* --- hero slideshow --- */
.hero-slides {
  position: relative;
  border: var(--line);
  box-shadow: 12px 12px 0 var(--indigo);
  transform: rotate(-1.2deg);
  background: #fff;
  overflow: hidden;
  aspect-ratio: 1120 / 760;
  margin: 0;
}
.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 700ms ease;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.hero-slides img.is-active { opacity: 1; }

.hero-slides .slide-dots {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  background: linear-gradient(to top, rgba(10, 11, 15, 0.62), transparent);
}
.hero-slides .slide-dots button {
  flex: 1;
  height: 3px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hero-slides .slide-dots button > i {
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.hero-slides .slide-dots button.is-active > i {
  animation: sotg-slide-progress var(--slide-ms, 5000ms) linear forwards;
}
@keyframes sotg-slide-progress { to { transform: scaleX(1); } }

.hero-slides figcaption {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  background: var(--ink);
  color: var(--paper, #f6f0e3);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
}

@media (max-width: 900px) {
  .hero-slides { transform: none; box-shadow: 7px 7px 0 var(--indigo); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slides img { transition: none; }
  .hero-slides .slide-dots button.is-active > i { animation: none; transform: scaleX(1); }
}

/* --- specificity overrides vs brutal.css !important --- */

.cmp-table thead th {
  background: var(--ink) !important;
  color: var(--paper, #f6f0e3) !important;
  border: 0 !important;
  border-bottom: var(--line) !important;
  border-right: 1px solid rgba(246, 240, 227, 0.18) !important;
}
.cmp-table thead th:last-child { border-right: 0 !important; }
.cmp-table thead th.is-us {
  background: var(--pink) !important;
  color: #fff !important;
  border-left: 3px solid var(--pink) !important;
  border-right: 3px solid var(--pink) !important;
}
.cmp-table tbody td { border: 0 !important; border-bottom: 1px solid rgba(17,18,22,.12) !important; border-right: 1px solid rgba(17,18,22,.07) !important; }
.cmp-table tbody td:last-child { border-right: 0 !important; }
.cmp-table tr.cmp-group th {
  background: var(--indigo) !important;
  color: #fff !important;
  border: 0 !important;
}


/* legend under the comparison table */
.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0.9rem 0 1.4rem;
  font-size: 0.82rem;
  color: #4b4f5e;
  font-weight: 600;
}
.cmp-legend .cmp-yes, .cmp-legend .cmp-no, .cmp-legend .cmp-part { font-weight: 700; }