.ladder {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 26px 22px;
align-items: stretch;
}
.ladder-step {
position: relative;
display: flex;
flex-direction: column;
gap: 7px;
padding: 14px 14px 15px;
border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
border-radius: 14px;
background: #fff;
border-top: 4px solid var(--ladder-tone, #94a3b8);
}
.ladder-step::after {
content: "→";
position: absolute;
top: 50%;
right: -17px;
transform: translateY(-50%);
font-size: 15px;
font-weight: 700;
color: #9aa3b0;
pointer-events: none;
}
.ladder-step:last-child::after { content: none; }
.ladder { overflow-x: clip; }
.ladder-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--ladder-tone, #94a3b8);
color: #fff;
font-size: 12px;
font-weight: 800;
line-height: 1;
flex: 0 0 auto;
}
.ladder-step__title.ladder-step__title {
margin: 0;
font-size: 17px;
font-weight: 800;
color: var(--text, #111111);
line-height: 1.3;
}
.ladder-step__title .cav-term {
color: var(--text, #111111);
font-weight: 800;
background: none;
border: 0;
padding: 0;
text-decoration: none;
border-bottom: 2px dotted rgba(17, 17, 17, 0.5);
}
.ladder-step__sub.ladder-step__sub {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: #5b6b86;
font-weight: 600;
}
.ladder-step__drugs {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 2px;
padding-top: 8px;
border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.ladder-step__drugs-label {
flex: 0 0 100%;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #8a93a0;
margin-bottom: 3px;
}
.ladder-step__note.ladder-step__note {
margin: 2px 0 0;
font-size: 12.5px;
line-height: 1.5;
color: #111111;
}
.ladder-step--t1 { --ladder-tone: #3f9d6d; }
.ladder-step--t2 { --ladder-tone: #d9a13b; }
.ladder-step--t3 { --ladder-tone: #dd7a3a; }
.ladder-step--t4 { --ladder-tone: #c94b4b; }
@media (max-width: 720px) {
.ladder { gap: 22px 0; }
.ladder-step::after {
top: auto;
right: 50%;
bottom: -18px;
transform: translateX(50%) rotate(90deg);
}
}