/* How it works page only. Adds the cards, comparison table, callout and fit lists; taylor.css is untouched. */
.h-hero { padding: 96px 0 64px; }
.h-title { max-width: 16ch; }
.h-lead { max-width: 60ch; margin: 26px 0 0; }

.h-band { padding: 88px 0; background: var(--bg-surface); border-top: var(--hair); border-bottom: var(--hair); }
.h-plain { padding: 88px 0; }
.h-narrow { max-width: var(--maxw); }
.h-narrow .h-table-wrap, .h-narrow .h-callout { max-width: 960px; }
.h-head { max-width: 24ch; margin-bottom: 40px; }

.h-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.h-card { background: var(--bg-app); border: var(--hair); border-radius: var(--radius-lg); padding: 24px; min-width: 0; }
.h-card h3 { margin: 18px 0 8px; font: var(--weight-bold) 18px/1.3 var(--font-sans); color: var(--fg); }
.h-card p { margin: 0; font: var(--weight-regular) 15px/1.6 var(--font-sans); color: var(--fg-secondary); }
.h-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font: var(--weight-semibold) 13px/1 var(--font-sans); box-shadow: var(--shadow-green); }

.h-table-wrap { overflow-x: auto; background: var(--bg-surface); border: var(--hair); border-radius: var(--radius-lg); }
.h-table { width: 100%; border-collapse: collapse; min-width: 560px; font: var(--weight-regular) 15px/1.5 var(--font-sans); }
.h-table th, .h-table td { text-align: left; vertical-align: top; padding: 15px 18px; border-bottom: 1px solid var(--border-frame); }
.h-table tbody tr:last-child th, .h-table tbody tr:last-child td { border-bottom: 0; }
.h-table thead th { font: 600 12px/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); background: var(--bg-raised); }
.h-table tbody th { font-weight: var(--weight-semibold); color: var(--fg); width: 30%; }
.h-table td { color: var(--fg-secondary); }
.h-table td.h-us { color: var(--fg); font-weight: var(--weight-medium); background: var(--blue-soft); }
.h-table thead th.h-us { color: var(--blue-soft-fg); background: var(--blue-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.h-callout { margin-top: 28px; border-radius: var(--radius-lg); background: var(--solid); color: #fff; padding: 28px 30px; }
.h-callout h3 { margin: 0 0 10px; font: var(--weight-bold) 20px/1.3 var(--font-sans); }
.h-callout p { margin: 0; font: var(--weight-regular) 16.5px/1.65 var(--font-sans); color: rgba(255,255,255,.86); max-width: 70ch; }

.h-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.h-fit-col { background: var(--bg-app); border: var(--hair); border-radius: var(--radius-lg); padding: 26px; min-width: 0; }
.h-fit-col h3 { margin: 0 0 6px; font: var(--weight-bold) 19px/1.3 var(--font-sans); color: var(--fg); }
.h-list { list-style: none; margin: 0; padding: 0; }
.h-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border-frame);
  font: var(--weight-regular) 15.5px/1.55 var(--font-sans); color: var(--fg); }
.h-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.h-mark { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.h-mark svg { width: 13px; height: 13px; }
.h-mark.yes { background: var(--blue-soft); color: var(--blue-soft-fg); }
.h-mark.no { background: var(--bg-muted); color: var(--fg-muted); }

.h-cta { text-align: left; }
.h-cta .lead { margin: 18px 0 28px; max-width: 56ch; }
.h-cta .lead a { color: var(--accent); }

.foot-bottom a[aria-current="page"] { color: var(--fg); }

@media (max-width: 1020px) {
  .h-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .h-hero { padding: 64px 0 40px; }
  .h-band, .h-plain { padding: 64px 0; }
  .h-cards, .h-fit { grid-template-columns: 1fr; }
  .h-callout { padding: 22px 20px; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  .nav-cta .btn { padding: 0 12px; }
}