.product-phases {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(300px, 1.35fr);
    align-items: center;
    gap: 16px;
    margin-top: 18px;
}

.product-phase {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #303744;
    border-radius: 12px;
    background: #171b23;
    color: #aeb6c5;
    text-align: left;
}

.product-phase b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #252b36;
    color: #f1f3f7;
    font-size: .72rem;
}

.product-phase span {
    display: grid;
    gap: 5px;
}

.product-phase strong { color: #f5f7fb; font-size: .88rem; }
.product-phase small { color: #858fa1; font-size: .67rem; }
.product-phase em { color: #8690a1; font-size: .65rem; font-style: normal; }
.product-phase.done b { background: #17362c; color: #33c98b; }
.product-phase.done em { color: #33c98b; }
.product-phase.current { border-color: #6b3927; background: linear-gradient(100deg, #241a18, #17191f); }
.product-phase.current b { background: #ff6a2a; color: white; }
.product-phase.current em { color: #ff8c5b; }
.phase-arrow { color: #596274; }

@media (max-width: 800px) {
    .product-phases { grid-template-columns: 1fr; gap: 8px; }
    .phase-arrow { transform: rotate(90deg); justify-self: center; }
}