/* ============================================================================
   Comparison pages (AEO, 2026-08-28). Reusable across any "X vs Y" page.

   Comparison is the highest-citation format in generative search, and the
   table is the reason: it is the one structure an answer engine can lift
   whole and reproduce. So the table is the hero of the page, not a supporting
   exhibit, and it stays readable at every width rather than collapsing into
   an unreadable stack.

   Brand guide applies: DM Sans, hairlines over boxes, radius 12 controls /
   16 cards, one flat red accent phrase per headline, no pills, no italic.
   ============================================================================ */

/* ---- Hero ---------------------------------------------------------------- */
.an-cmp-hero {
  position: relative;
  background: var(--an-dark);
  color: #fff;
  padding: 144px 24px 72px;
  overflow: hidden;
}
.an-cmp-hero__glow {
  position: absolute;
  top: -30%; right: -5%;
  width: 640px; height: 640px;
  border-radius: 999px;
  background: rgba(167,37,44,0.13);
  filter: blur(150px);
  pointer-events: none;
}
.an-cmp-hero__inner { position: relative; max-width: 1300px; margin-inline: auto; }
.an-cmp-hero__h1 {
  font-weight: 800;
  font-size: 44px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 24px;
  max-width: 940px;
}
.an-cmp-hero .an-cmp-hero__sub {
  font-size: 17px;
  color: rgba(255,255,255,0.62);
  line-height: 1.7;
  max-width: 660px;
  margin-bottom: 32px;
}
.an-cmp-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---- Answer body --------------------------------------------------------- */
.an-cmp-body { background: var(--an-paper); padding: 88px 24px; }
.an-cmp-body__inner { max-width: 980px; margin-inline: auto; }
.an-cmp-block + .an-cmp-block {
  margin-top: 56px;
  border-top: 1px solid var(--an-border);
  padding-top: 56px;
}
.an-cmp-body__h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--an-ink);
  margin: 0 0 16px;
}
.an-cmp-body .an-cmp-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--an-gray-1);
  margin: 0 0 18px;
  font-weight: 500;
}
.an-cmp-body .an-cmp-p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--an-gray-3);
  margin: 0 0 14px;
}
.an-cmp-list { margin: 18px 0 0; padding: 0; list-style: none; }
.an-cmp-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--an-gray-3);
  margin-bottom: 10px;
}
.an-cmp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 1px;
  background: var(--an-red);
}

/* ---- The table ----------------------------------------------------------- */
/* Scrolls inside its own container so the page body never scrolls sideways. */
.an-cmp-tablewrap {
  overflow-x: auto;
  margin: 8px 0 0;
  border: 1px solid var(--an-border);
  border-radius: 16px;
  background: var(--an-white);
  -webkit-overflow-scrolling: touch;
}
.an-cmp-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}
.an-cmp-table th,
.an-cmp-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--an-border);
  vertical-align: top;
  line-height: 1.55;
}
.an-cmp-table thead th {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--an-gray-3);
  font-weight: 700;
  background: var(--an-paper);
  white-space: nowrap;
}
.an-cmp-table tbody tr:last-child th,
.an-cmp-table tbody tr:last-child td { border-bottom: 0; }
.an-cmp-table tbody th {
  font-weight: 700;
  color: var(--an-ink);
  white-space: nowrap;
  width: 1%;
}
.an-cmp-table td { color: var(--an-gray-3); }
.an-cmp-scrollnote {
  font-size: 13px;
  color: var(--an-gray-3);
  margin: 10px 0 0;
}
@media (min-width: 900px) { .an-cmp-scrollnote { display: none; } }

/* ---- FAQ ----------------------------------------------------------------- */
.an-cmp-faq { background: var(--an-dark); color: #fff; padding: 88px 24px; }
.an-cmp-faq__inner { max-width: 860px; margin-inline: auto; }
.an-cmp-faq__h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 40px;
}
.an-cmp-faq__item { border-top: 1px solid rgba(255,255,255,0.12); padding: 24px 0; }
.an-cmp-faq__item:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.an-cmp-faq__q {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.4;
}
.an-cmp-faq .an-cmp-faq__a {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* ---- CTA ----------------------------------------------------------------- */
.an-cmp-cta { background: var(--an-paper); padding: 80px 24px; text-align: center; }
.an-cmp-cta__inner { max-width: 680px; margin-inline: auto; }
.an-cmp-cta__h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--an-ink);
  margin: 0 0 16px;
}
.an-cmp-cta .an-cmp-cta__p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--an-gray-3);
  margin: 0 0 28px;
}

@media (max-width: 760px) {
  .an-cmp-hero { padding: 120px 20px 56px; }
  .an-cmp-hero__h1 { font-size: 32px; }
  .an-cmp-body, .an-cmp-faq { padding: 64px 20px; }
  .an-cmp-body__h2, .an-cmp-faq__h2, .an-cmp-cta__h2 { font-size: 25px; }
}