:root {
    --forest: #0b4d37;
    --deep-forest: #073d2d;
    --lime: #8bb630;
    --cream: #f7f1e5;
    --ink: #182a23;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    color: var(--ink);
    font-family: "DM Sans", sans-serif;
    background: var(--cream);
}

.launch-page {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/microgreens-hero.png") center center / cover no-repeat;
}

.background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(252,248,239,.92) 0%, rgba(251,247,238,.83) 31%, rgba(250,247,238,.2) 53%, rgba(8,31,20,.05) 100%);
}

.container-xl { min-height: 100svh; padding: 34px 42px 28px; }

.topbar { min-height: 128px; }

.brand { display: inline-flex; flex-direction: column; align-items: center; }
.brand-logo {
    display: block;
    width: 205px;
    height: auto;
    object-fit: contain;
}

.tagline {
    padding: 10px 14px 11px 18px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 12px;
    color: var(--deep-forest);
    background: rgba(250,247,237,.68);
    box-shadow: 0 8px 24px rgba(20,45,32,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: .42em;
    text-align: right;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
    text-transform: uppercase;
}

.tagline::after { content: ""; display: block; width: 70px; height: 1px; margin: 13px 0 0 auto; background: #778942; }

.hero-copy { width: min(460px, 44vw); margin-top: 8px; }

.eyebrow, .intro, .launch-pill, .footer-note, .benefit span { text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .32em; }
.eyebrow span { width: 28px; height: 1px; background: var(--forest); }

h1 {
    margin: 0;
    color: var(--forest);
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(72px, 7.4vw, 112px);
    font-weight: 600;
    line-height: .69;
    letter-spacing: -.055em;
}

.intro { margin: 28px 0 17px; font-size: 13px; line-height: 1.7; letter-spacing: .27em; }

.launch-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    max-width: 100%;
    padding: 12px 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(100deg, #86a72c, #729817);
    box-shadow: 0 12px 24px rgba(76,105,21,.18);
    font-size: 14px;
    letter-spacing: .25em;
}

.launch-pill span:last-child { font-size: 24px; line-height: .6; }
.form-label-copy { margin: 9px 0 8px 15px; font-size: 12px; }

.notify-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 500px;
    max-width: 100%;
    min-height: 52px;
    padding: 4px 5px 4px 52px;
    border: 1px solid rgba(11,77,55,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 9px 28px rgba(32,50,40,.11);
}

.mail-icon { position: absolute; left: 19px; width: 22px; color: #273e34; }
.mail-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.notify-form input { flex: 1; min-width: 0; padding: 0 10px 0 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
.notify-form input::placeholder { color: #868b87; }
.notify-form button { min-width: 145px; padding: 10px 18px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(100deg, #82a526, #638813); font-size: 13px; text-transform: capitalize; transition: transform .2s, box-shadow .2s; }
.notify-form button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(58,89,14,.25); }
.notify-form button:focus-visible, .notify-form input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.form-message { min-height: 22px; margin: 7px 0 0 15px; font-size: 12px; font-weight: 600; }
.form-message.success { color: #37680c; }
.form-message.error { color: #a33a2f; }

.benefits {
    position: absolute;
    left: 42px;
    bottom: 31px;
    display: flex;
    width: min(560px, 51vw);
    padding: 8px 0;
    border-radius: 20px;
    background: rgba(250,247,237,.9);
    box-shadow: 0 8px 26px rgba(20,45,32,.07);
}

.benefit { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 0 15px; text-align: center; }
.benefit + .benefit { border-left: 1px solid rgba(11,77,55,.24); }
.benefit svg { width: 34px; height: 34px; margin-bottom: 5px; fill: none; stroke: var(--deep-forest); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefit span {
    color: var(--deep-forest);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .025em;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.footer-note {
    position: absolute;
    right: 42px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 10px;
    color: var(--deep-forest);
    background: rgba(250,247,237,.72);
    box-shadow: 0 7px 20px rgba(20,45,32,.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .34em;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.footer-note span { width: 28px; height: 1px; background: var(--forest); }

.ambient-leaf { display: none; }

@media (max-height: 760px) and (min-width: 769px) {
    .container-xl { padding-top: 22px; }
    .topbar { min-height: 96px; }
    .brand-logo { width: 180px; }
    .hero-copy { margin-top: 0; }
    h1 { font-size: clamp(66px, 9.5vh, 90px); }
    .intro { margin: 20px 0 12px; }
}

@media (max-width: 768px) {
    .launch-page { min-height: 100svh; padding-bottom: 0; background: #f8f2e6; }
    .background { inset: auto 0 0; height: 52vh; background-position: 66% center; }
    .background::after { background: linear-gradient(180deg, #f8f2e6 0%, rgba(248,242,230,.75) 15%, rgba(248,242,230,.05) 55%); }
    .container-xl { min-height: 100svh; padding: 23px 22px 30px; }
    .topbar { min-height: 110px; }
    .brand-logo { width: 160px; }
    .tagline { max-width: 145px; padding: 7px 9px 8px 11px; font-size: 8px; letter-spacing: .25em; }
    .tagline::after { width: 42px; margin-top: 8px; }
    .hero-copy { width: 100%; margin-top: 3px; }
    .eyebrow { font-size: 9px; }
    h1 { font-size: clamp(58px, 18vw, 82px); line-height: .73; }
    .intro { margin: 22px 0 14px; font-size: 10px; }
    .launch-pill { width: 310px; padding: 10px 19px; font-size: 12px; }
    .form-label-copy { font-size: 11px; }
    .notify-form { width: 100%; }
    .notify-form button { min-width: 112px; }
    .benefits { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 35vh; padding: 10px 5px; background: rgba(248,242,230,.8); }
    .benefit { padding: 0 5px; }
    .benefit svg { width: 28px; height: 28px; }
    .benefit span { font-size: 9px; line-height: 1.3; }
    .footer-note { display: none; }
}

@media (max-width: 400px) {
    .notify-form { padding-left: 42px; }
    .mail-icon { left: 15px; width: 19px; }
    .notify-form input { font-size: 12px; }
    .notify-form button { min-width: 98px; padding-inline: 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
    .brand, .hero-copy > *, .benefits { animation: rise-in .65s both; }
    .hero-copy > *:nth-child(2) { animation-delay: .08s; }
    .hero-copy > *:nth-child(3) { animation-delay: .14s; }
    .hero-copy > *:nth-child(n+4) { animation-delay: .2s; }
    .benefits { animation-delay: .3s; }
    @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
}