/* How It Works: the four-step rail, the engagement feature list. Shared patterns in site.css. */

/* ---------- Step rail ---------- */
.rail { position: relative; padding-top: 44px; }
.rail__line { position: absolute; top: 15px; left: 0; right: 0; height: 1px; background: #DDE0DC; transform-origin: left; }
.rail__node {
  position: absolute; top: 10px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 999px;
  border: 1.5px solid var(--charcoal-900); background: var(--light-gray);
}
.js [data-route]:not(.is-drawing) .rail__line,
.js [data-route]:not(.is-drawing) .rail__node { opacity: 0; }
@keyframes fastener-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.step { padding: 0 28px; text-align: center; }
.step__label { display: block; font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-tertiary); }
.step__title {
  margin: 10px 0 0; font: var(--weight-semibold) var(--text-h3) / var(--leading-snug) var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.step__text { margin: 8px 0 0; font: var(--type-body-sm); color: var(--text-secondary); text-wrap: pretty; }

/* ---------- Engagement features ---------- */
.features { display: flex; flex-direction: column; }
.feature { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid var(--border-subtle); }
.feature:first-child { padding-top: 0; border-top: 0; }
.feature:last-child { padding-bottom: 0; }
.feature__node { width: 8px; height: 8px; border-radius: 999px; background: var(--green-500); flex: none; margin-top: 7px; }
.feature__title { font: var(--weight-semibold) var(--text-body) / 1.4 var(--font-display); }
.feature__text { margin: 4px 0 0; font: var(--type-body-sm); color: var(--text-secondary); }

@media (max-width: 820px) {
  .rail { padding-top: 0; }
  .rail__line, .rail__node, .rail__traveler { display: none; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step { padding: 0; }
}