/* ============================================================
   BIZVO MARKETING SITE — COMPARISON PAGE TEMPLATE
   Used by all 3 pages under /compare/*. Shared chrome (nav/
   footer/buttons/cards/FAQ/compare table/.prose) lives in
   components.css — load that first, then this file.
   Per COMPARISON_PAGES.md: treat this as ONE template, instantiate
   3 times with different data (see /compare/invoice2go.html for
   the reference build).
   ============================================================ */

.compare-hero { padding: 64px 0 56px; text-align: center; }
.compare-hero .eyebrow { }
.compare-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.015em;
  max-width: 18ch; margin: 0 auto 16px;
}
.compare-hero .subhead { font-size: 17px; color: #574f43; max-width: 52ch; margin: 0 auto; }

/* The honest math — a plain callout, not a card; this is prose
   with emphasis, not a decorative surface */
.honest-math {
  max-width: 720px; margin: 0 auto;
  padding: 26px 28px;
  background: var(--paper-card);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--workshop-teal);
}
.honest-math p { margin: 0; font-size: 16px; color: #4d463c; }
.honest-math strong { color: var(--workshop-teal); font-family: var(--font-display); }

.compare-cta { text-align: center; padding: 20px 0 8px; }
.last-verified { text-align: center; margin-top: 8px; }