/* Uses the same tokens as your ribbon theme */
:root {
    --feature-accent: var(--feature-accent, #0ea5e9);
    --feature-text: var(--feature-text, #1f2937);
    --feature-muted: var(--feature-muted, #6b7280);
    --chrome-h: 170px; /* approximate header+tabs+ribbon height in SMELayout */
}

/* Full-screen center (accounts for your fixed ribbon/nav) */
.coming-screen {
    min-height: calc(100vh - var(--chrome-h));
    display: grid;
    place-items: center;
    padding: 32px 16px;
    background: linear-gradient(#f5f5f7,#ebebee);
    border-top: 1px solid #cfcfd4; /* matches ribbon edge */
}

/* Cardless centered block like your screenshot */
.coming-card {
    text-align: center;
    max-width: 780px;
    width: 100%;
    color: var(--feature-text);
}

.coming-icon {
    font-size: 2.25rem;
    margin-bottom: 8px;
}

.coming-card h1 {
    margin: 0 0 10px 0;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a; /* slightly darker for strong headline */
    letter-spacing: .2px;
}

.coming-sub {
    margin: 0 auto 24px auto;
    max-width: 720px;
    font-size: clamp(.95rem, 1.6vw, 1.05rem);
    color: var(--feature-muted);
}

/* Ribbon-style thin progress underline */
.coming-progress {
    height: 2px;
    width: min(560px, 92vw);
    margin: 0 auto 28px auto;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

    .coming-progress .bar {
        position: absolute;
        inset: 0 0 0 0;
        width: 0%;
        background: var(--feature-accent);
        animation: coming-line 2.2s ease-in-out infinite;
    }

@keyframes coming-line {
    0% {
        width: 0%;
        transform: translateX(0%);
    }

    50% {
        width: 55%;
        transform: translateX(20%);
    }

    100% {
        width: 100%;
        transform: translateX(0%);
    }
}

/* Button */
.btn-primary {
    appearance: none;
    border: 0;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--feature-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        background: color-mix(in srgb, var(--feature-accent) 85%, #00724f);
    }

    .btn-primary:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--feature-accent) 65%, white 35%);
        outline-offset: 2px;
    }

/* If you render this page without SMELayout, uncomment:
.coming-screen{ min-height: 100vh; } */