.mobile-sticky-cta:focus-visible { outline: 3px solid #c3bbff; outline-offset: 3px; }

.mobile-sticky-cta { display: none; }
.form-state-error { margin: 10px 0 0; color: #a12f45; font-size: 13px; line-height: 1.4; }
form[data-submitting="true"] button[type="submit"] { cursor: wait; opacity: .72; }
form[data-submitting="true"] [data-form-label],
form:not([data-submitting="true"]) [data-form-loading] { display: none; }

.status-page {
    position: relative;
    box-sizing: border-box;
    height: 100svh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(28px, 8svh, 80px) 24px;
    color: #f4f3f7;
    background: #08090c;
    text-align: center;
}
.status-page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#08090c66, #08090ce6), url('/assets/optical-daybreak.webp') center/cover; opacity: .6; }
.status-body { height: 100svh; margin: 0; overflow: hidden; background: #08090c; }
.status-card { position: relative; width: min(700px, 100%); }
.status-brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(38px, 7svh, 64px); color: #f4f3f7; font: 650 26px/1 system-ui, sans-serif; text-decoration: none; }
.status-brand img { width: 48px; height: 48px; border-radius: 12px; }
.status-code { display: flex; width: fit-content; min-height: 42px; align-items: center; margin: 0 auto; padding: 9px 16px; border: 1px solid #ffffff2e; border-radius: 999px; color: #f4f3f7; background: #ffffff12; font: 750 20px/1 system-ui, sans-serif; letter-spacing: .16em; }
.status-card h1 { margin: 18px 0 clamp(30px, 5svh, 44px); font: 650 clamp(44px, 8vw, 86px)/.96 system-ui, sans-serif; letter-spacing: -.065em; text-wrap: balance; }
.status-card p { margin: 0 auto 28px; max-width: 520px; color: #aaa9b4; font-size: 18px; line-height: 1.55; }
.status-card > img { margin: 0 auto; border-radius: 22px; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.status-actions a { box-sizing: border-box; display: inline-flex; min-width: 132px; min-height: 54px; align-items: center; justify-content: center; padding: 14px 22px; border: 1px solid #ffffff2b; border-radius: 999px; background: #ffffff10; color: #f4f3f7; font: 650 16px/1 system-ui, sans-serif; text-decoration: none; backdrop-filter: blur(14px); }
.status-actions a:first-child { color: #08090c; background: #f4f3f7; }
.site-loading { min-height: 100svh; display: grid; place-items: center; color: #a4a5b1; font: 600 14px/1 system-ui, sans-serif; }
.footer > div a { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
    body:not(.status-body) { padding-bottom: 78px; }
    .status-card h1 { font-size: clamp(42px, 12vw, 58px); }
    .mobile-sticky-cta {
        position: fixed;
        z-index: 450;
        right: 14px;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 14px;
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        padding: 12px 20px;
        border-radius: 999px;
        color: #fff;
        background: #5b5fd6;
        box-shadow: 0 14px 38px rgba(26, 22, 54, .32);
        font: 700 15px/1 system-ui, sans-serif;
        text-decoration: none;
    }
    body.threshold .mobile-sticky-cta,
    body.chroma .mobile-sticky-cta,
    body.lumen .mobile-sticky-cta,
    body.supernova .mobile-sticky-cta,
    body.desert .mobile-sticky-cta,
    body.oasis .mobile-sticky-cta { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-sticky-cta { scroll-behavior: auto; }
}