/* Comparison pages (/compare/*). Loads AFTER brand.css and landing.css and reuses
   their scaffolding (.wrap/.sec/.sec--tint/.sec__head/.eyebrow/.h2/.lead/.btn) —
   this file only adds what those don't already cover.

   px, not rem, for the same reason brand.css and use-case.css document: these
   pages render inside layout/header_index, which loads Skeleton
   (html{font-size:62.5%}), so rem values would come out ~62% smaller here than
   on the landing page.

   Colors come from brand.css variables ONLY. --color-bg and --color-text do not
   exist; the real names are --color-background, --color-surface,
   --color-text-strong and --color-text-muted. Inventing one yields a light panel
   with invisible text in dark mode, which is how this was found the hard way. */

.compare h1,
.compare h2,
.compare h3 { text-wrap: balance; }

/* ---- page header ---- */
.compare-hero { padding-bottom: clamp(28px, 4vw, 40px); }
.compare-hero__title {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0;
}
/* The thesis line is the page's argument — sized so it reads as a statement
   rather than as the first paragraph of body copy. */
.compare-thesis {
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.45;
  color: var(--color-text-strong);
  max-width: 62ch;
  margin: 18px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--color-primary);
}
.compare-thesis em { font-style: italic; }
.compare-hero__para {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 62ch;
  margin: 14px 0 0;
}

/* ---- side-by-side "two different jobs" ---- */
.compare-fit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 34px;
  align-items: start;
}
.compare-fit__col {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 24px;
}
/* Our column is the one the reader should land on; a tinted top rule is enough
   to say so without turning the other one into a strawman. */
.compare-fit__col--ours { border-top: 3px solid var(--color-primary); }
.compare-fit__title {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-text-strong);
}
.compare-fit__col p {
  font-size: 15.5px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.compare-fit__col p:last-child { margin-bottom: 0; }
.compare-fit__lead {
  font-size: 16.5px;
  color: var(--color-text-strong);
}

/* ---- what you get ---- */
.compare-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.compare-points article {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.compare-points h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-strong);
}
.compare-points p {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- the concessions block ----
   Deliberately NOT styled down. It carries the page's credibility, so it gets
   the same visual weight as everything else; a reader who can tell it was
   buried stops believing the sections around it. */
.compare-right { scroll-margin-top: 80px; }
.compare-right__list {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.compare-right__list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.compare-right__list h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-strong);
}
.compare-right__list p {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- cost ---- */
.compare-cost {
  max-width: 72ch;
  margin-top: 28px;
}
.compare-cost p {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}
.compare-cost strong { color: var(--color-text-strong); font-weight: 650; }
/* The source-and-date stamp. Small, but it is the thing that makes every figure
   above it quotable — see DESIGN.md rule 5. */
.compare-cost__stamp {
  font-size: 13.5px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
}

/* ---- run both ---- */
.compare-both {
  max-width: 72ch;
  margin-top: 28px;
}
.compare-both p {
  font-size: 16px;
  color: var(--color-text-muted);
  margin: 0 0 16px;
}

/* ---- closing CTA ---- */
.compare-cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 42px);
  text-align: center;
}
.compare-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

@media (max-width: 760px) {
  .compare-fit,
  .compare-points,
  .compare-right__list { grid-template-columns: 1fr; }
  .compare-thesis { padding-left: 12px; }
}