/* Component: versus-ledger (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-versus { margin-block: var(--nt-space-xl); padding: var(--nt-space-l) var(--nt-space-m); }
.nt-versus__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nt-space-xs); margin-block-end: var(--nt-space-l); }
.nt-versus__h { margin: 0; font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink-2); }
.nt-versus__decision { margin: 0 0 var(--nt-space-l); max-inline-size: var(--nt-measure); font: 600 var(--nt-step-1) / var(--nt-leading-snug) var(--nt-font-display); color: var(--nt-color-ink); text-wrap: balance; }
.nt-versus__sides { display: grid; gap: var(--nt-space-xl); }
/* Desktop (Tyler, 11/1: "the alignments are off, the spacing is terrible"): the two
   sides share one set of rows through subgrid, so the label, name, price, verdict
   line, "Pick this if", the buttons and "Skip if" sit on the same line in both
   columns whatever their lengths. Rows a side does not use stay empty (row-gap 0;
   spacing is each row's own padding). Without subgrid support each side keeps the
   same order, unaligned. Phones keep the stacked layout above. */
@media (min-width: 720px) {
  .nt-versus { padding: var(--nt-space-xl) var(--nt-space-l); }
  .nt-versus__sides { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); column-gap: var(--nt-space-xl); row-gap: 0; }
  .nt-versus__side { grid-row: 1 / span 7; grid-template-rows: subgrid; row-gap: 0; padding-block-start: var(--nt-space-l); }
  .nt-versus__meta { grid-row: 1; padding-block-end: var(--nt-space-xs); }
  .nt-versus__name { grid-row: 2; padding-block-end: var(--nt-space-xs); }
  .nt-versus__price { grid-row: 3; padding-block-end: var(--nt-space-xs); }
  .nt-versus__why { grid-row: 4; padding-block-end: var(--nt-space-l); }
  .nt-versus__side .nt-fit { display: contents; }
  .nt-versus__side .nt-fit__group--yes { grid-row: 5; padding-block-end: var(--nt-space-l); }
  .nt-versus__side .nt-fit__cta { grid-row: 6; margin: 0; padding-block-end: var(--nt-space-l); }
  .nt-versus__side .nt-fit__group--no { grid-row: 7; padding-block-start: var(--nt-space-m); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule); }
  /* buttons the same width in both columns, review link and score on one line under them */
  .nt-versus__side .nt-cta-stack { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--nt-space-m); row-gap: var(--nt-space-s); }
  .nt-versus__side .nt-cta-stack > .c-btn { flex: 1 0 100%; inline-size: 100%; }
}
.nt-versus__side { display: grid; gap: var(--nt-space-s); align-content: start; padding-block-start: var(--nt-space-m); border-block-start: var(--nt-rule-hair) solid var(--nt-color-rule-strong); scroll-margin-block-start: var(--nt-space-xl); }
.nt-versus__side.is-pick { border-block-start: var(--nt-rule-mark) solid var(--nt-color-structure); }
.nt-versus__side p { margin: 0; }
.nt-versus__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nt-space-xs); font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); }
.nt-versus__mark { color: var(--nt-color-structure); }
.nt-versus__name { font: 600 var(--nt-step-1) / var(--nt-leading-tight) var(--nt-font-display); color: var(--nt-color-ink); }
.nt-versus__price { font: 500 var(--nt-step--1) / 1 var(--nt-font-ui); font-variant-numeric: tabular-nums lining-nums; color: var(--nt-color-ink-2); }
.nt-versus__why { font: 400 var(--nt-step--1) / var(--nt-leading-body) var(--nt-font-ui); color: var(--nt-color-ink-2); }
}