/* ==========================================================================
   Comparison pages (AppFolio alternative, DoorLoop alternative).

   Loaded after styles.css. Reuses the site's tokens and component classes
   (.section, .container, .section-head, .btn, .final, .footer, .reveal) and
   adds only what the homepage does not already have: a page intro header,
   readable prose blocks, and the comparison table.
   ========================================================================== */

/* Page intro (the H1 header). Sits under the fixed nav, so it carries the top
   padding the hero would normally provide. */
.cmp-intro {
  padding: 9.5rem 0 3.75rem;
  text-align: center;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.cmp-intro__inner { max-width: 840px; margin: 0 auto; }

/* Groups a prose block with the table or cards that continue its thought,
   so the two sections read as one flow instead of two big gaps. */
.section--flush-top { padding-top: 0; }

.cmp-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.cmp-intro h1 {
  margin-top: 0.9rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.cmp-intro__lede {
  max-width: 660px;
  margin: 1.3rem auto 0;
  font-size: 1.15rem;
  color: var(--muted);
  text-wrap: pretty;
}

.cmp-intro__cta {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.1rem;
  flex-wrap: wrap;
}

.cmp-intro__facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin-top: 2rem;
}
.cmp-intro__facts li {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0 1.15rem;
  border-left: 1px solid var(--line);
}
.cmp-intro__facts li:first-child { border-left: 0; }

/* Prose blocks: the long-form, indexable body copy. */
.cmp-prose { max-width: 760px; margin: 0 auto; }
.cmp-prose h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  letter-spacing: -0.02em;
}
.cmp-prose h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-top: 2.1rem;
}
.cmp-prose p {
  margin-top: 1.05rem;
  color: var(--body);
  text-wrap: pretty;
}
.cmp-prose ul {
  margin-top: 1.05rem;
  padding-left: 1.15rem;
  color: var(--body);
}
.cmp-prose li { padding: 0.2rem 0; text-wrap: pretty; }
.cmp-prose a { color: var(--gold); font-weight: 500; }
.cmp-prose strong { color: var(--espresso); font-weight: 700; }
.cmp-prose .cmp-prose__lead {
  font-size: 1.15rem;
  color: var(--muted);
}

/* A pair of honest "who it is for" cards, reusing the portfolio block look. */
.cmp-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.cmp-audience .portfolio__block { background: #fff; }

/* Comparison table. Scrolls inside its own container on narrow screens so the
   page body never scrolls sideways. */
.cmp-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
table.cmp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.96rem;
}
table.cmp caption {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
table.cmp th,
table.cmp td {
  text-align: left;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td { border-bottom: 0; }

table.cmp thead th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-soft);
  border-bottom: 2px solid var(--line);
}
table.cmp thead th.cmp-col-us { color: var(--gold); }

table.cmp tbody th {
  font-weight: 600;
  color: var(--espresso);
  width: 38%;
}
table.cmp tbody td { color: var(--body); }

/* The Sahab Key column is tinted so the eye lands on it. */
table.cmp .cmp-col-us {
  background: var(--cream);
  color: var(--espresso);
  font-weight: 600;
}

.cmp-table-note {
  max-width: 900px;
  margin: 1.1rem auto 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .cmp-intro { padding-top: 7.5rem; }
  .cmp-audience { grid-template-columns: 1fr; max-width: 560px; }
}