/* /alternatives/<slug> comparison pages (marketing/alternatives.html). */

.alt-page {
  width: min(1120px, 100%);
  padding: 3rem 1.25rem 4rem;
}

.alt-header .marketing-body,
.alt-section .marketing-body {
  margin-top: 0.75rem;
  line-height: 1.6;
}

.alt-section {
  margin-top: 3rem;
}

.alt-page section > .marketing-section {
  margin-top: 3rem;
}

/* Comparison table — semantic <table>, horizontal scroll on small screens. */
.alt-table-wrap {
  overflow-x: auto;
  margin-top: 1.25rem;
  border: 1px solid hsl(28 10% 88%);
  border-radius: 12px;
}

.alt-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 0.875rem; /* 14px — keep >= 12px for mobile readability */
  text-align: left;
}

.alt-table th,
.alt-table td {
  padding: 0.75rem 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid hsl(28 10% 92%);
}

.alt-table thead th {
  background: hsl(28 20% 97%);
  font-weight: 600;
  white-space: nowrap;
}

.alt-table tbody th[scope="row"] {
  font-weight: 600;
  white-space: nowrap;
}

.alt-table tbody tr:last-child th,
.alt-table tbody tr:last-child td {
  border-bottom: none;
}

.alt-row-canonical {
  background: var(--mkt-sage-soft, hsl(155 35% 46% / 0.08));
}

.alt-table-note {
  margin-top: 0.6rem;
  color: var(--mkt-body-color);
}

.alt-example {
  border-left: 3px solid hsl(155 35% 46% / 0.4);
  padding-left: 0.9rem;
}

.alt-benchmark {
  margin-top: 1.5rem;
}

.alt-faq-q {
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}

/* CTA row — primary mirrors the homepage hero primary; secondary is a
   light-theme variant (home's .hero-secondary-cta is styled for the dark
   hero video overlay and is only loaded on home.css). */
.alt-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3rem;
}

.alt-cta-primary {
  background: var(--foreground);
  color: var(--card);
}

.alt-cta-secondary {
  border: 1px solid hsl(28 10% 80%);
  background: transparent;
  color: var(--foreground);
}

.alt-cta-secondary:hover,
.alt-cta-secondary:focus-visible {
  background: hsl(28 20% 96%);
}

@media (max-width: 640px) {
  .alt-page {
    padding: 2rem 1rem 3rem;
  }
}