.db-process { background: var(--sand); }
.db-process .db-process__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-process__title { font-size: clamp(1.5rem, 7vw, 5rem); text-align: center; line-height: 1.1; } .db-process { --db-step-gap: 48px; } .db-process .db-process__steps {
display: flex;
flex-direction: row;
gap: var(--db-step-gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
align-items: flex-start;
}
.db-process .db-process__steps::-webkit-scrollbar { display: none; }
.db-process__step {
position: relative;
flex: 0 0 320px;
scroll-snap-align: start;
display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
} .db-process__step:not(:first-child)::before {
content: "";
position: absolute;
top: 30px;
left: calc(-50% - var(--db-step-gap) + 70px);
width: calc(100% + var(--db-step-gap) - 140px);
border-top: 1px solid var(--line);
}  .db-process .db-process__num {
width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%;
border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 300; font-size: 10px; line-height: 20px;
color: var(--muted); background: transparent; z-index: 1;
} .db-process__step h3 { font-size: 1.5rem; line-height: 1.3333; }
.db-process__step p { font-size: 16px; line-height: 1.75; color: var(--muted); }
@media (min-width: 861px) {
.db-process .db-process__inner { padding-block: 60px 120px; gap: 60px; }
.db-process__title { font-size: 5rem; } .db-process { --db-step-gap: 72px; }
.db-process .db-process__steps { overflow-x: visible; }
.db-process__step { flex: 1 1 0; padding-inline: 0; }
}