.flow { padding: 64px 0 64px; border-top: 1px solid #e3edfa; }
.flow-main { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }
.flow-copy h2 { max-width: 640px; margin-top: 16px; }
.flow-copy .lead { max-width: 560px; }
.flow-steps { position: relative; display: grid; gap: 0; margin-top: 28px; }
.flow-steps::before { content: ''; position: absolute; left: 22px; top: 30px; bottom: 40px; width: 2px; background: linear-gradient(var(--blue), #b7d0fa); }
.flow-steps li { position: relative; display: flex; gap: 22px; align-items: flex-start; padding-bottom: 26px; }
.flow-steps li:last-child { padding-bottom: 0; }
.step-no { z-index: 1; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 5px solid #e8f2ff; border-radius: 50%; background: var(--blue); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 3px 14px rgba(7, 86, 233, .25); }
.flow-steps h3 { font-size: 19px; line-height: 1.4; font-weight: 800; margin-bottom: 4px; }
.flow-steps p { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 540px; }
.flow-screen { min-width: 0; padding: 12px; border: 1px solid #d3e3fb; border-radius: 20px; background: #fff; box-shadow: 0 20px 46px rgba(29, 79, 155, .12); }
.flow-screen img { width: 100%; border-radius: 11px; border: 1px solid #e2ecf9; }
.flow-screen figcaption { margin: 10px 6px 2px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }
.flow-end { margin-top: 28px; padding-top: 20px; border-top: 1px solid #dbe8f9; text-align: center; color: #1f4a9e; font-size: 16px; font-weight: 700; }
@media (max-width: 1000px) { .flow-main { grid-template-columns: 1fr; gap: 32px; } .flow-screen { max-width: 600px; } }
@media (max-width: 650px) { .flow { padding: 48px 0 48px; } .flow-steps li { gap: 16px; } .flow-steps h3 { font-size: 17px; } }