/* Explain: Responsive layout helpers for the SaaS landing page */
.dashboard-bars span {
    display: block;
    height: 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 18%, transparent);
}

.dashboard-bars span:nth-child(2) {
    width: 76%;
}

.dashboard-bars span:nth-child(3) {
    width: 58%;
}

.dashboard-bars span:nth-child(4) {
    width: 86%;
}

@media (max-width: 640px) {
    .hero-heading {
        text-wrap: balance;
    }
}