/* Блок «Как это работает»: три карточки-шага с мини-мокапами интерфейса */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}

.how-card{background:#fff;border-radius:22px;border:1px solid rgba(20,20,28,.06);box-shadow:0 1px 2px rgba(20,20,28,.04);overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1)}
.how-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,28,.06),0 18px 40px rgba(20,20,28,.12)}
.how-card:hover .mk{transform:translateY(-2px)}

/* Зона иллюстрации: мягкий градиент, уникальный на карточку */
.how-art{position:relative;height:200px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#faf9f6}
.how-art-1{background:radial-gradient(120% 90% at 20% 15%,rgba(124,92,255,.22),transparent 60%),radial-gradient(120% 90% at 85% 80%,rgba(124,92,255,.12),transparent 55%),#faf9f6}
.how-art-2{background:radial-gradient(120% 90% at 20% 15%,rgba(59,130,246,.22),transparent 60%),radial-gradient(120% 90% at 85% 80%,rgba(59,130,246,.12),transparent 55%),#faf9f6}
.how-art-3{background:radial-gradient(120% 90% at 20% 15%,rgba(236,72,153,.20),transparent 60%),radial-gradient(120% 90% at 85% 80%,rgba(236,72,153,.12),transparent 55%),#faf9f6}

.how-body{padding:20px 22px 26px}
.how-num{display:block;font-family:'Press Start 2P',monospace;font-size:11px;line-height:1;color:#7c5cff;margin-bottom:12px;letter-spacing:.04em}
.how-body h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.how-body p{margin:0;color:#5c5e72;line-height:1.55;font-size:15px}

/* Мини-мокап интерфейса внутри .how-art */
.mk{position:relative;transition:transform .25s cubic-bezier(.16,1,.3,1)}

.mk-key{width:200px;background:#fff;border:1px solid rgba(20,20,28,.08);border-radius:14px;padding:14px;box-shadow:0 8px 22px rgba(20,20,28,.08)}
.mk-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mk-lock{font-size:14px}
.mk-label{font-size:12px;color:#5c5e72}
.mk-input{background:#f6f5f2;border:1px solid rgba(20,20,28,.08);border-radius:9px;padding:9px 11px}
.mk-dots{font-family:monospace;font-size:13px;letter-spacing:.06em;color:#3b3d52}
.mk-input-sm{height:30px;margin-top:8px;padding:0}
.mk-caret{display:block;width:1px;height:14px;background:#7c5cff;margin:8px 0 0 10px}
.mk-pill{display:inline-block;font-size:11px;padding:4px 9px;border-radius:999px;margin-top:10px}
.mk-ok{color:#0f7a44;background:rgba(34,197,94,.14)}

.mk-table{width:210px;background:#fff;border:1px solid rgba(20,20,28,.08);border-radius:14px;padding:12px;box-shadow:0 8px 22px rgba(20,20,28,.08)}
.mk-tr{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:8px 6px;border-radius:8px;color:#3b3d52}
.mk-tr+.mk-tr{margin-top:4px}
.mk-tr .mk-ok{background:none;padding:0;margin:0}
.mk-warn{background:rgba(245,158,11,.16);color:#8a5a00}
.mk-warn span:last-child{font-weight:600;color:#b45309}

.mk-pub{width:210px;background:#fff;border:1px solid rgba(20,20,28,.08);border-radius:14px;padding:16px;box-shadow:0 8px 22px rgba(20,20,28,.08);text-align:center}
.mk-tok{background:rgba(124,92,255,.12);color:#5b3fd6}
.mk-btn{display:block;width:100%;margin-top:12px;border:0;border-radius:10px;background:#111;color:#fff;font:inherit;font-weight:600;font-size:14px;padding:11px 0;cursor:default}
.mk-cursor{position:absolute;right:56px;bottom:30px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid #111;transform:rotate(-35deg)}

/* Одна колонка на узких экранах */
@media (max-width:900px){.how-grid{grid-template-columns:1fr}}

/* Уважение к prefers-reduced-motion: без смещений и переходов */
@media (prefers-reduced-motion:reduce){
  .how-card,.how-card:hover,.how-card:hover .mk,.mk{transition:none;transform:none}
}

/* Надпись кнопки в мини-макете не обрезается */
.how-art .mk-btn { white-space: nowrap; overflow: visible; text-overflow: clip; width: auto; min-width: 176px; padding: 0 22px; }