/*
 * How It Works — S1 step bands.
 *
 * Four full-width alternating bands: oversized amber step number,
 * title, body, tag row, plus a step visual. Page-specific; nav, hero,
 * and footer reuse chrome.css. Ported to vanilla from the design
 * handoff (HowItWorks.jsx). See docs/plans/how-it-works-page-spec.md.
 */

/* ---- Hero jump-nav (lives in the chrome .b-page-hero-kicker slot) ---- */
.hiw-jump-link { color: var(--gray-2); transition: color 0.15s; }
.hiw-jump-link:hover { color: var(--amber); }
.hiw-jump-sep { color: var(--ink-3); }

/* ---- Step bands ---- */
.hiw-steps { border-bottom: 1px solid var(--ink-3); }
.hiw-step {
  padding: 96px 48px;
  border-bottom: 1px solid var(--ink-3);
}
.hiw-step:last-child { border-bottom: none; }
.hiw-step--alt { background: var(--ink-1); }
.hiw-step-inner {
  display: flex;
  gap: 80px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.hiw-step--alt .hiw-step-inner { flex-direction: row-reverse; }

.hiw-step-copy { flex: 1 1 460px; min-width: 0; }
.hiw-step-kind-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
}
.hiw-step-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 88px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--amber);
}
.hiw-step-kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-2);
}
.hiw-step-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin-bottom: 20px;
  text-wrap: balance;
}
.hiw-step-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--gray-3);
  max-width: 520px;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.hiw-step-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hiw-step-tag {
  padding: 6px 12px;
  border: 1px solid var(--ink-3);
  background: rgba(10, 12, 16, 0.4);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gray-3);
}

.hiw-step-visual-wrap { flex: 1 1 480px; min-width: 0; }
.hiw-step-caption {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  font-size: 12px;
  color: var(--gray-2);
}
.hiw-caption-mono {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-2);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hiw-step { padding: 64px 32px; }
  .hiw-step-inner,
  .hiw-step--alt .hiw-step-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
  .hiw-step-num { font-size: 64px; }
  .hiw-step-title { font-size: 36px; }
}
@media (max-width: 600px) {
  .hiw-step { padding: 48px 20px; }
  .hiw-step-num { font-size: 52px; }
  .hiw-step-title { font-size: 28px; }
  .hiw-step-body { font-size: 15px; }
}