/* Seren Spirits v4.0.35 beta: homepage hero fit and content separation */

/* Give the database panel a deliberate pause after the fixed-height hero. */
.page-home .home-content {
    margin-top: 22px;
}

@media (min-width: 1051px) {
    /* Balance the home title naturally inside the shared hero frame. */
    .page-home .hero-copy h1 {
        max-width: 15ch;
        margin: .32rem 0 .45rem;
        font-size: clamp(2.75rem, 3.25vw, 3.45rem);
        line-height: .92;
    }

    .page-home .hero-copy p {
        max-width: 610px;
        font-size: .84rem;
        line-height: 1.44;
    }

    .page-home .hero-copy .hero-actions {
        margin-top: .65rem;
    }

    /* Keep all six metrics completely inside the shared 310px hero. */
    .page-home .hero-metrics {
        align-self: start;
        height: 232px;
        margin-top: 35px;
        grid-template-rows: repeat(3, 72px);
    }

    .page-home .hero-metrics .metric-card {
        height: 72px;
        min-height: 72px;
        padding: .5rem .68rem;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: .5rem;
    }

    .page-home .hero-metrics .metric-icon {
        width: 34px;
        height: 34px;
    }

    .page-home .hero-metrics .metric-icon .icon {
        width: 28px;
        height: 28px;
    }

    .page-home .hero-metrics .metric-card > div > span,
    .page-home .hero-metrics .metric-card small {
        font-size: .59rem;
        line-height: 1.15;
    }

    .page-home .hero-metrics .metric-card strong {
        font-size: clamp(1.28rem, 1.5vw, 1.62rem);
        line-height: 1;
    }
}

@media (max-width: 1050px) {
    .page-home .hero-metrics {
        margin-top: 1.15rem;
    }
}

@media (max-width: 760px) {
    .page-home .home-content {
        margin-top: 14px;
    }
}

/* Seren Spirits v4.0.41 beta: live presence completes the 2 × 3 hero metric grid. */
@media (min-width: 1051px) {
    .page-home .hero-metrics .market-value-card {
        grid-column: auto;
        min-height: 72px;
    }

    .page-home .hero-metrics .active-users-card strong {
        color: var(--cyan);
    }
}

.page-home .hero-metrics .market-value-card {
    grid-column: auto;
}
.page-home .hero-metrics .active-users-card strong {
    color: var(--cyan);
}