/* /how-it-works (owner-approved #15, 7 Oct 2026). Shares from.css (steps, programs, limits); tokens from vizwalk.css. */

/* Four steps: two by two on tablets, four in a row on wide screens. */
@media (min-width:768px) and (max-width:1199px){.how-steps.steps-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.how-steps.steps-row{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* The programs on the dark chapter; the footer's "Which programs work?" lands here below the fixed header. */
#programs{scroll-margin-top:var(--head-h)}
.fs-programs .from-programs{margin-top:0;padding-top:0;border-top:0}
.fs-programs .from-programs li{border-color:var(--line-2);color:var(--ink)}
.fs-programs .from-programs p,.fs-programs .from-limits,.fs-programs .from-links{color:var(--ink-2)}
.fs-programs .from-limits{border-top-color:var(--line)}
.fs-programs .from-links a{color:var(--accent-link)}

/* #13: the comparison table on desktop only (never on phones). */
.how-compare{display:none}
@media (min-width:900px){.how-compare{display:block}.how-compare .compare{font-size:1rem}}
@media (min-width:900px){.how-compare .compare thead th{font-size:1rem;letter-spacing:.02em;text-transform:none}}