* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg, #0c133a 0%, #0a1030 35%, #080b22 70%, #05070f 100%);
  color: #ffffff;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 40px; }

/* ---------- Top banner ---------- */
.top-banner { width: 100%; text-align: center; padding: 12px 0; }
.top-banner img { max-width: 380px; width: 100%; height: auto; display: inline-block; }

/* ---------- Get access CTA (inline link, no sticky header) ---------- */
.nav-cta {
  display: inline-block;
  background: #58d9cd;
  color: #0a0f2c;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 4px;
}

/* ---------- Overview ---------- */
.section-label { color: #58d9cd; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }

.video-thumb-link {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
.video-thumb-img { width: 100%; display: block; transition: transform 0.2s ease, filter 0.2s ease; }
.video-thumb-link:hover .video-thumb-img { transform: scale(1.02); filter: brightness(1.05); }

/* Centered video + watch link block in Overview */
.video-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 520px;
  margin: 0 auto 50px;
}
.video-intro .video-thumb-link { width: 100%; }
.watch-link {
  color: #58d9cd;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #58d9cd;
  padding: 10px 22px;
  border-radius: 30px;
}
.watch-link:hover { background: rgba(88,217,205,0.1); }

.section-divider {
  width: 100%;
  max-width: 760px;
  height: 4px;
  background: #58d9cd;
  margin: 50px auto 60px;
  display: block;
  border-radius: 2px;
}

/* ---------- Section headers ---------- */
.section-block { padding: 90px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-header .section-label { text-align: center; }
.section-header h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 24px; text-transform: uppercase; }
.section-header p { font-size: 15px; color: #cfd5f5; line-height: 1.6; margin-bottom: 28px; }
.accent { color: #58d9cd; }

/* ---------- Feature rows (alternating) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 80px;
}
.feature-row:last-child { margin-bottom: 0; }
.feature-row.reverse { grid-template-columns: 1fr 1.35fr; }
.feature-row.reverse .img-col { order: 2; }
.feature-row.reverse .text-col { order: 1; }
.feature-row img { width: 100%; border-radius: 14px; display: block; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.35); }

/* Phone screenshots are tall/portrait — cap their width so they don't dominate the row */
.feature-row .img-col.phone-shot { display: flex; justify-content: center; }
.feature-row .img-col.phone-shot img { max-width: 260px; width: 100%; }

/* Instant insights report image is denser/taller — cap its width so it doesn't dominate the row */
.feature-row .img-col.small-shot { display: flex; justify-content: center; }
.feature-row .img-col.small-shot img { max-width: 340px; width: 100%; }
.feature-row .eyebrow { color: #58d9cd; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.feature-row h3 { font-size: 26px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; }
.feature-row p { font-size: 15px; color: #cfd5f5; line-height: 1.7; }

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 60px 40px;
  margin-top: 20px;
}
.cta .section-label { text-align: center; }
.cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 24px; }
.cta a.button { display: inline-block; background: #58d9cd; color: #0a0f2c; font-weight: 700; font-size: 14px; padding: 14px 32px; border-radius: 30px; text-decoration: none; }
.cta .or { color: #9aa3d4; font-size: 13px; margin-top: 18px; }
.cta .or a { color: #58d9cd; text-decoration: none; }

/* ---------- Comparison (clean, flat, equal columns, no containers) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Flat table: equal-width columns, no card backgrounds, thin row rules only */
table.compare-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 20px; }
table.compare-table th,
table.compare-table td { width: 33.333%; }

table.compare-table thead th {
  text-align: center; font-size: 14px; font-weight: 700; color: #ffffff;
  padding: 0 14px 18px; letter-spacing: 0.3px;
  border-bottom: 2px solid rgba(255,255,255,0.18);
}
table.compare-table thead th.row-label { text-align: left; font-weight: 600; color: #9aa3d4; }
table.compare-table thead th.hero-col { color: #58d9cd; border-bottom-color: #58d9cd; }

table.compare-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.08); }
table.compare-table tbody tr:last-child { border-bottom: none; }
table.compare-table .row-name { font-size: 14px; font-weight: 600; color: #e4e8ff; padding: 16px 14px; vertical-align: top; text-align: left; }
table.compare-table td.cell { padding: 16px 14px; font-size: 13px; line-height: 1.55; color: #cfd5f5; vertical-align: top; text-align: center; }
table.compare-table td.cell .icon { display: block; margin: 0 auto 6px; font-size: 15px; }
table.compare-table .icon.yes { color: #33d17a; }
table.compare-table .icon.no { color: #ff5c5c; }
table.compare-table .icon.soon { color: #f5b942; }
table.compare-table td.cell.hero-col { color: #ffffff; }

footer.page-footer { text-align: center; padding: 40px 24px 60px; font-size: 12px; color: #7c85b8; border-top: 1px solid rgba(255,255,255,0.08); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 30px; }
  .feature-row.reverse .img-col, .feature-row.reverse .text-col { order: unset; }
  .section-header h2 { font-size: 26px; }
  .container { padding: 0 20px; }
  table.compare-table { min-width: 640px; }
}