/* 09 — Real Proof vs Demo (Figma desktop 712:9081 @1920 / mobile 353:2613) */
.comparison {
  background: var(--surface-subtle);
  font-family: var(--font);
}
.comparison__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--section-pad) var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* header */
.comparison__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.comparison__title {
  margin: 0;
  text-align: center;
  font: 500 54px/58px var(--font);
  letter-spacing: -2.16px;
  color: var(--brand-primary);
}
.comparison__lead {
  margin: 0;
  max-width: 720px;
  text-align: center;
  text-wrap: balance; /* even lines, no orphan word */
  font: 400 28px/32px var(--font);
  letter-spacing: -1.12px;
  color: var(--text-muted);
}

/* table — desktop: 3 columns 340 / 460 / 440, rows 76px */
.comparison__table {
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 340fr) minmax(0, 460fr) minmax(0, 440fr);
  grid-template-rows: 80px repeat(8, 76px) 48px;
  align-items: stretch;
}
.comparison__row { display: contents; }
/* hover: the whole row lights up across all three columns (hover on a cell bubbles to the display:contents row) */
.comparison__cell { transition: background-color .3s ease, color .3s ease; }
.comparison__cell img { transition: transform .3s ease; }
.comparison__row:not(.comparison__row--head):not(.comparison__row--foot):hover .comparison__cell--feature { background: var(--surface-subtle); }
.comparison__row:not(.comparison__row--head):not(.comparison__row--foot):hover .comparison__cell--proof { background: #0f3d29; }
.comparison__row:not(.comparison__row--head):not(.comparison__row--foot):hover .comparison__cell--demo { background: var(--surface-subtle); color: var(--text-ink); }
.comparison__row:not(.comparison__row--head):not(.comparison__row--foot):hover .comparison__cell img { transform: scale(1.12); }

.comparison__cell {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}
.comparison__cell img {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.comparison__cell p { margin: 0; flex: 1 0 0; min-width: 0; word-break: break-word; }
.comparison__short { display: none; }

/* features column (surface/card, starts 80px down) */
.comparison__cell--feature {
  background: var(--surface-card);
  padding: 0 16px 0 24px;
  border-bottom: 1px solid var(--border-divider);
  font: 600 16px/20px var(--font);
  letter-spacing: -0.64px;
  color: var(--text-ink);
  white-space: nowrap;
}
.comparison__row--head .comparison__cell--feature,
.comparison__row--foot .comparison__cell--feature {
  background: transparent;
  border-bottom: 0;
}
.comparison__row--head + .comparison__row .comparison__cell--feature { border-top-left-radius: var(--radius-16); }
.comparison__row:nth-last-child(2) .comparison__cell--feature {
  border-bottom-left-radius: var(--radius-16);
  border-bottom: 0;
}

/* proof column (brand/primary, full height, rounded 16; lime header) */
.comparison__cell--proof {
  background: var(--brand-primary);
  padding: 0 24px;
  border-bottom: 1px solid var(--border-divider);
  font: 400 16px/20px var(--font);
  letter-spacing: -0.64px;
  color: var(--text-inverse);
}
.comparison__row--head .comparison__cell--proof {
  justify-content: center;
  border-bottom: 0;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  background: var(--brand-accent);
  color: var(--text-ink);
  font: 500 20px/24px var(--font);
  letter-spacing: -0.4px;
  white-space: nowrap;
}
.comparison__row:nth-last-child(2) .comparison__cell--proof { border-bottom: 0; }
.comparison__row--foot .comparison__cell--proof {
  border-bottom: 0;
  border-radius: 0 0 var(--radius-16) var(--radius-16);
}

/* demo column (surface/section, starts 16px down, ends 16px early) */
.comparison__cell--demo {
  background: var(--surface-section);
  padding: 0 24px;
  border-bottom: 1px solid var(--border-divider);
  font: 400 14px/18px var(--font);
  letter-spacing: -0.56px;
  color: var(--text-muted);
}
.comparison__row--head .comparison__cell--demo {
  margin-top: 16px;
  justify-content: center;
  border-bottom: 0;
  border-top-right-radius: var(--radius-16);
  font: 500 20px/24px var(--font);
  letter-spacing: -0.4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.comparison__row:nth-last-child(2) .comparison__cell--demo { border-bottom: 0; }
.comparison__row--foot .comparison__cell--demo {
  height: 32px;
  align-self: start;
  border-bottom: 0;
  border-bottom-right-radius: var(--radius-16);
}

/* CTA (Figma button: 12px 24px) */
.comparison__cta, .comparison__contact { padding: 11px 23px; } /* 12/24 in Figma; .btn adds a 1px border → 48px tall */

@media (max-width: 767px) {
  .comparison__lead { font: 400 18px/24px var(--font); letter-spacing: -0.54px; }
  .comparison__inner {
    padding: 64px 16px;
    gap: 32px;
  }
  .comparison__head { width: 100%; gap: 12px; }
    .comparison__title {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.96px;
  }

  /* V3 split rows — full-bleed 375 */
  .comparison__table {
    display: flex;
    flex-direction: column;
    width: calc(100% + 32px);
    max-width: none;
    margin: 0 -16px;
    overflow: hidden;
  }
  .comparison__row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }
  .comparison__row--foot { display: none; }
  /* the full label stays on mobile too */
  .comparison__long { display: inline; }
  .comparison__short { display: none; }

  .comparison__cell { border: 0 !important; border-radius: 0 !important; margin: 0 !important; height: auto !important; }
  .comparison__cell img { width: 20px; height: 20px; }

  .comparison__cell--feature {
    width: 100%;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface-card) !important;
    text-align: center;
  }
  .comparison__cell--feature img { width: 24px; height: 24px; }
  .comparison__row--head .comparison__cell--feature { display: none; }

  .comparison__cell--proof,
  .comparison__cell--demo {
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px;
    font: 400 14px/18px var(--font);
    letter-spacing: -0.56px;
  }
  .comparison__cell--proof p,
  .comparison__cell--demo p { flex: none; width: 100%; }

  .comparison__row--head .comparison__cell--proof,
  .comparison__row--head .comparison__cell--demo {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    font: 600 16px/20px var(--font);
    letter-spacing: -0.64px;
    white-space: nowrap;
  }
  .comparison__row--head .comparison__cell--proof { background: var(--brand-accent); color: var(--text-ink); }
  .comparison__row--head .comparison__cell--demo { align-items: center; color: var(--text-muted); }
  .comparison__row--head { background: var(--surface-card); }

  .comparison__cta, .comparison__contact { width: 100%; box-sizing: border-box; }
}