/* GENERATED by design/build-custom-page.py. Edit that script, not this file.

   The numbered-step component the how-it-works page uses (.hiw-panel /
   .hiw-step-num) is defined inline in that page rather than in site.css, so it
   cannot be reused from here. This is the smallest equivalent, plus the
   four-card grid. Everything else on the page comes from site.css. */

.kind-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
  margin-top:var(--sp-6);
}
@media (max-width:820px){ .kind-grid{ grid-template-columns:1fr; } }

.kind-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--sp-6);
}
.kind-card h3{ margin:0 0 var(--sp-3); }
.kind-card p{ color:var(--text-muted); margin:0 0 var(--sp-4); }
.kind-points{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.kind-points li{
  font-size:.82rem;
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.25rem .7rem;
}

/* Steps: a number rail down the left, so the sequence reads as a sequence. */
.steps{ margin-top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-5); }
.step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-5);
  align-items:start;
  padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--border);
}
.step:last-child{ border-bottom:none; padding-bottom:0; }
.step-num{
  font-family:var(--mono);
  font-size:.9rem;
  font-weight:600;
  color:var(--accent-hover);
  background:var(--surface-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:.45rem .7rem;
  line-height:1;
}
.step h3{ margin:0 0 var(--sp-3); }
.step p{ color:var(--text-muted); margin:0 0 var(--sp-3); max-width:44rem; }
.step .step-get{
  margin:0;
  font-size:.92rem;
  color:var(--text);
  border-left:2px solid var(--accent);
  padding-left:var(--sp-3);
}
@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:var(--sp-3); }
}