.practice-board { color: #111a2d; background: #f2f4f7; border: 1px solid #c4c5d9; padding: clamp(18px, 3vw, 30px); }
.practice-board__top, .practice-board__bottom { display: flex; justify-content: space-between; gap: 20px; font: 700 11px/1.5 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.practice-board__top { padding-bottom: 20px; border-bottom: 1px solid #c4c5d9; color: #234cc8; }
.practice-board__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.practice-board__step { min-height: 145px; padding: 16px; border: 1px solid #cbd2e3; background: #fff; box-shadow: 4px 4px 0 #dce3f5; }
.practice-board__step:nth-child(2) { background: #e8edff; }
.practice-board__step:nth-child(3) { background: #e3f3f1; }
.practice-board__step:nth-child(4) { background: #112a61; color: #fff; border-color: #112a61; box-shadow: 4px 4px 0 #83a7f1; }
.practice-board__step span { display: block; margin-bottom: 10px; color: #214bc7; font: 700 10px/1.4 ui-monospace, monospace; letter-spacing: .1em; }
.practice-board__step:nth-child(4) span { color: #b8c8ff; }
.practice-board__step strong { display: block; font: 700 clamp(15px, 1.5vw, 19px)/1.24 ui-sans-serif, sans-serif; }
.practice-board__step p { margin: 9px 0 0; font: 400 12px/1.5 ui-sans-serif, sans-serif; opacity: .83; }
.practice-board__bottom { padding-top: 14px; border-top: 1px solid #c4c5d9; color: #515d75; letter-spacing: 0; text-transform: none; }
@media (max-width: 650px) { .practice-board__grid { grid-template-columns: 1fr; } .practice-board__step { min-height: 0; } .practice-board__top, .practice-board__bottom { flex-wrap: wrap; gap: 5px; } }