.hm-flow { margin: 0 0 28px; }
.hm-flow-hint { margin: 0 0 10px; font-size: 13px; font-style: italic; color: #5b6b82; }
.hm-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hm-flow li { position: relative; }
.hm-flow li + li::before { content: "→"; position: absolute; inset-inline-start: -11px; top: 50%; transform: translate(-50%, -50%); color: #8aa0bd; font-size: 14px; }
[dir="rtl"] .hm-flow li + li::before { content: "←"; transform: translate(50%, -50%); }
.hm-flow a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #d6e2f2; border-radius: 999px; background: #fff; color: #0f2a4d; text-decoration: none; font-size: 15px; font-weight: 500; transition: transform .2s, background-color .2s, border-color .2s; }
.hm-flow a:hover, .hm-flow a:focus-visible { background: #eef5ff; border-color: #1f6fe5; transform: translateY(-3px); }
.hm-flow b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1f6fe5; color: #fff; font-size: 12px; font-weight: 600; flex: none; }
.hm-step-target { scroll-margin-top: 96px; transition: box-shadow .3s; }
.hm-step-target:target { box-shadow: 0 0 0 2px #1f6fe5; }
@media (max-width: 640px) { .hm-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-flow li + li::before { display: none; } }