/* SMH Lending LLC — Coming Soon
   Palette + rules per smh-lending-brand-guide-draft-v0.2 (delta on VIP Brand Guide v2.3):
   - navy #003449 is the workhorse: all text sits in navy on light grounds (12.3:1 on Paper)
   - gold #E9AA22 is 2.0:1 on white — NEVER text/icons/hairlines on light grounds;
     here it appears only on/against navy (6.5:1 home) and as pure ornament
   - fine print in navy, not #566472, per brand-seat ruling 2026-08-10 (Q-01 open)
   - components bind to the --smh-* tokens; hex canon may still shift */

:root {
    --smh-navy: #003449;
    --smh-gold: #E9AA22;
    --vip-paper: #F6F7F9;

    --font-display: 'Inter', Arial, Helvetica, sans-serif;
    --font-body: 'Mukta', Arial, Helvetica, sans-serif;
    --font-label: 'Roboto Condensed', Arial, Helvetica, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--vip-paper);
    color: var(--smh-navy);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ---- Stage: centered column above the roofline ---- */

.stage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(2rem, 6vh, 4rem) 1.5rem clamp(1rem, 3vh, 2rem);
}

.lockup {
    width: min(82vw, 520px);
    height: auto;
}

.chip {
    margin-top: clamp(2rem, 5vh, 3.25rem);
    background: var(--smh-navy);
    color: var(--smh-gold); /* gold on navy: 6.5:1 */
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem 0.45rem 1.32rem; /* left compensates letter-spacing tail */
    border-radius: 999px;
}

h1 {
    margin-top: clamp(1.25rem, 3.5vh, 2rem);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 4.6vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    max-width: 24ch;
    text-wrap: balance;
}

.lede {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.8vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.55;
    max-width: 42ch;
}

/* ---- Interim compliance footer (Paul ruling 2026-08-10): navy fine print on the
   light ground per brand-seat ruling — not #566472 (Q-01 open). ---- */

#compliance-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0 1.5rem clamp(1.25rem, 3vh, 2rem);
    font-size: 0.8125rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ---- Roofline: ornamental navy band, gold trim along the pitch ----
   Same clip-path on both layers; the navy layer sits 5px lower, so a
   gold edge shows along the roof pitch — gold against navy, not light. */

.roofline {
    position: relative;
    flex: 0 0 auto;
    height: clamp(72px, 14vh, 130px);
    pointer-events: none;
}

.roofline__gold,
.roofline__navy {
    position: absolute;
    inset: 0;
    clip-path: polygon(0 46%, 63% 0, 100% 30%, 100% 100%, 0 100%);
}

.roofline__gold {
    background: var(--smh-gold);
}

.roofline__navy {
    background: var(--smh-navy);
    top: 5px;
}

/* ---- Load sequence: runs only once fonts are ready (html.is-ready via js)
   and only when the visitor allows motion. Without JS the page is simply static. ---- */

@media (prefers-reduced-motion: no-preference) {
    .is-ready .lockup,
    .is-ready .chip,
    .is-ready h1,
    .is-ready .lede {
        animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .is-ready .chip  { animation-delay: 0.12s; }
    .is-ready h1     { animation-delay: 0.2s; }
    .is-ready .lede  { animation-delay: 0.28s; }

    .is-ready .roofline {
        animation: settle 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
    }

    @keyframes rise {
        from {
            opacity: 0;
            transform: translateY(14px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes settle {
        from {
            opacity: 0;
            transform: translateY(30%);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}