.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.steps div { border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 14px; background: #fff; font-weight: 800; display: flex; gap: 10px; align-items: center; }
.steps div b { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; background: var(--sun); flex: none; }
.steps div.done b { background: var(--mint); } .steps div.now { background: var(--sun); }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.how .box { padding: 20px; }
.how .n { font: 800 40px "Bricolage Grotesque"; line-height: 1; color: var(--blue); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .how { grid-template-columns: 1fr; } }