/* Steward & Main — landing page
   Palette carried from the brand work: forest green, antique gold, warm cream. */

:root {
    --forest:       #1E3629;
    --forest-light: #2C4C3B;
    --gold:         #C5A059;  /* on dark backgrounds */
    --gold-dark:    #9E7D35;  /* on light backgrounds */
    --cream:        #F9F7F1;
    --ink:          #2C2C2C;
    --card:         #FFFFFF;
}

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

body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    /* Sticky footer: main grows, and the green waitlist section absorbs any
       leftover height on tall viewports so no cream gap shows above the footer. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.waitlist { flex: 1 0 auto; }

h1, h2, .wm-name {
    font-family: 'Playfair Display', Georgia, serif;
}

a { color: var(--gold-dark); }

/* Masthead */
.masthead {
    background: var(--forest);
    padding: 2.75rem 1.5rem 2.5rem;
    text-align: center;
}
.wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: .6rem; }
.wm-name {
    color: var(--cream);
    font-size: clamp(1.9rem, 5.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.wm-name .amp { color: var(--gold); }
.wm-rule { width: 72px; height: 2px; background: var(--gold); }
.wm-sub {
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Hero */
.hero {
    max-width: 720px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 3.5rem;
    text-align: center;
}
.hero h1 {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
    line-height: 1.25;
    color: var(--forest);
    margin-bottom: 1.25rem;
}
.lede { font-size: 1.1rem; margin-bottom: 2rem; }

.btn {
    display: inline-block;
    background: var(--gold-dark);
    color: #fff;
    text-decoration: none;
    border: 0;
    font: 600 .85rem 'Inter', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .95rem 2.2rem;
    cursor: pointer;
    transition: background .15s;
}
.btn:hover { background: var(--forest-light); }

/* Offer cards */
.offers {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.card {
    background: var(--card);
    border-top: 4px solid var(--gold);
    padding: 2rem 1.75rem;
    box-shadow: 0 10px 30px rgba(30, 54, 41, .08);
}
.card h2 { color: var(--forest); font-size: 1.35rem; margin-bottom: .85rem; }
.card p + p { margin-top: .85rem; }

/* Founder strip */
.founder {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem 3.5rem;
    text-align: center;
    font-size: 1.02rem;
}

/* Waitlist */
.waitlist {
    background: var(--forest);
    color: var(--cream);
    padding: 3.5rem 1.5rem 4rem;
}
.waitlist h2 {
    text-align: center;
    font-size: 1.7rem;
    color: var(--cream);
    margin-bottom: 1.75rem;
}
.waitlist form, .flash {
    max-width: 480px;
    margin: 0 auto;
}
.field { display: block; margin-bottom: 1.15rem; }
.field span {
    display: block;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .4rem;
}
.field em { text-transform: none; letter-spacing: normal; font-style: normal; opacity: .75; }
.field input {
    width: 100%;
    padding: .8rem .9rem;
    border: 1px solid rgba(249, 247, 241, .25);
    background: rgba(249, 247, 241, .06);
    color: var(--cream);
    font: 400 1rem 'Inter', sans-serif;
}
.field input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.field input::placeholder { color: rgba(249, 247, 241, .4); }
.waitlist .btn { width: 100%; background: var(--gold); color: var(--forest); }
.waitlist .btn:hover { background: var(--cream); }
.fineprint {
    margin-top: 1rem;
    font-size: .82rem;
    text-align: center;
    color: rgba(249, 247, 241, .65);
}
.flash { text-align: center; font-size: 1.05rem; }
.flash-ok { color: var(--cream); }
.flash-err { color: #E8B4A8; margin-bottom: 1.25rem; }

/* Honeypot — visually gone, present for bots */
.hp { position: absolute; left: -9999px; top: -9999px; }

/* Footer */
footer {
    background: #16281E;
    color: rgba(249, 247, 241, .55);
    text-align: center;
    font-size: .85rem;
    padding: 1.5rem;
}

@media (max-width: 680px) {
    .offers { grid-template-columns: 1fr; }
    .hero { padding-top: 3rem; }
}