/* Component: fit-list (WB-2026-10-26-05). Semantic --nt- tokens only; lint: scripts/lint-css-values.py --components. */
@layer components {
.nt-fit { display: grid; gap: var(--nt-space-m); }
/* Tyler, 11/1: the head sat too close to its first line and the bare glyphs looked untidy.
   The head gets a full step of air; each glyph sits in a small tinted disc on a fixed
   1.25rem column, aligned to the first line, so wrapped lines hang cleanly. */
.nt-fit .nt-fit__head { margin: 0 0 var(--nt-space-s); font: 600 var(--nt-step--1) / 1.3 var(--nt-font-ui); color: var(--nt-color-ink); }
.nt-fit ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--nt-space-xs); font: 400 var(--nt-step--1) / 1.45 var(--nt-font-ui); color: var(--nt-color-ink); }
.nt-fit li { display: grid; grid-template-columns: 1.25rem 1fr; column-gap: var(--nt-space-s); align-items: start; }
.nt-fit li::before { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.0625rem; border-radius: 50%; font-size: 0.6875em; font-weight: 700; line-height: 1; }
.nt-fit__group--yes li::before { content: "\2713"; color: var(--nt-color-pro); background: color-mix(in srgb, var(--nt-color-pro) 14%, transparent); }
.nt-fit__group--no li::before { content: "\2715"; color: var(--nt-color-con); background: color-mix(in srgb, var(--nt-color-con) 12%, transparent); }
/* .nt-fit__cta layout: .nt-cta-stack in buy-button.css. */
.nt-fit__cta { margin-block: var(--nt-space-2xs); }
}