/* =========================
   STATUS PAGE
========================= */

.status-page{

    max-width:600px;
    margin:auto;
    padding:clamp(70px, 12vw, 140px) var(--pad) clamp(90px, 14vw, 160px);
    text-align:center;

}

.status-eyebrow{

    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--blue);
    background:var(--sand);
    padding:8px 16px;
    border-radius:999px;
    margin-bottom:26px;

}


/* =========================
   ANIMATED ICON
   Three dots that bounce in sequence. Color shifts slightly per status
   via the class status.js adds, so it reads a little differently for
   "in development" vs "coming soon" vs "redesign".
========================= */

.status-icon{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    height:26px;
    margin-bottom:28px;

}

.status-icon span{

    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--ink);
    animation:status-bounce 1.1s ease-in-out infinite;

}

.status-icon span:nth-child(1){ animation-delay:0s; }
.status-icon span:nth-child(2){ animation-delay:.15s; }
.status-icon span:nth-child(3){ animation-delay:.3s; }

.status-icon.icon-print span{ background:var(--blue); }
.status-icon.icon-build span{ background:#c9a24b; }
.status-icon.icon-redesign span{ background:#8a1f2d; }

@keyframes status-bounce{

    0%, 60%, 100%{
        transform:translateY(0);
        opacity:.5;
    }

    30%{
        transform:translateY(-10px);
        opacity:1;
    }

}

@media (prefers-reduced-motion: reduce){

    .status-icon span{
        animation:none;
        opacity:.8;
    }

}


/* =========================
   COPY
========================= */

.status-page h1{

    font-size:clamp(28px, 4vw, 40px);
    letter-spacing:-1.5px;
    line-height:1.15;
    margin-bottom:16px;

}

.status-page > p{

    font-size:16px;
    line-height:1.7;
    color:#6a6a6a;
    max-width:460px;
    margin:0 auto 34px;

}


/* =========================
   NOTIFY FORM
========================= */

.notify-form{

    display:flex;
    gap:10px;
    max-width:420px;
    margin:0 auto;

}

.notify-form input{

    flex:1;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:999px;
    padding:13px 20px;
    transition:border-color .2s ease, box-shadow .2s ease;

}

.notify-form input:focus{

    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(56, 103, 255, .15);

}

.notify-form input.field-invalid{

    border-color:#c2402e;

}

.notify-form button{

    font-weight:700;
    font-size:15px;
    padding:13px 26px;
    border-radius:999px;
    background:var(--ink);
    color:var(--paper);
    white-space:nowrap;
    transition:transform .2s ease, opacity .2s ease;

}

.notify-form button:hover{

    transform:translateY(-2px);

}

.notify-error{

    display:block;
    font-size:13px;
    color:#c2402e;
    margin-top:10px;
    min-height:16px;

}

.notify-success{

    max-width:420px;
    margin:0 auto;
    font-size:15px;
    font-weight:600;
    color:#1f8a4c;
    background:rgba(31,138,76,.08);
    border-radius:var(--radius-sm);
    padding:16px 18px;

}


/* =========================
   SECONDARY ACTIONS
========================= */

.status-actions{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 20px;
    font-size:14px;
    color:#8a8a8a;
    margin-top:38px;
    padding-top:26px;
    border-top:1px solid var(--line);

}

.status-actions a{

    font-weight:600;
    color:var(--blue);

}

.status-actions a:hover{

    text-decoration:underline;
    text-underline-offset:3px;

}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:480px){

    .notify-form{

        flex-direction:column;

    }

}