/**
 * Compare pair.
 *
 * Ported from `_mockups/process.html` (`.p-vs`, `.p-vs__foot`), prefixed per
 * inventory §2.2.
 *
 * Almost nothing here, deliberately: the cards are kit `.card`s and the warning
 * is a kit `.callout--warn`. This file only sets the narrow measure and the
 * foot stack – everything else would be re-implementing the design system.
 *
 * The two cards are identical by design. They describe two legitimate routes,
 * and any styling that made one look like the recommendation would undo what
 * the section is for.
 *
 * Breakpoints are literal px because `var()` is invalid inside a media query.
 */

.compare-pair {
  scroll-margin-block-start: var(--sticky-offset);
}

.compare-pair__head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-end: var(--s-5);
}

.compare-pair__grid {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.compare-pair__foot {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-block-start: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

/* The link shrinks to its text; the callout must not. */
.compare-pair__foot .callout { align-self: stretch; }

@media (max-width: 700px) {
  .compare-pair__grid { grid-template-columns: 1fr; }
}