:root { --olive: #888562; --white: #fff; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--olive); color: var(--white); font-family: Archivo, Arial, sans-serif; }
.landing { min-width: 320px; }
.hero { position: relative; min-height: 800px; overflow: hidden; }
.hero__background { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40,39,38,.6), rgba(40,39,38,.6)), radial-gradient(ellipse 75% 42% at 50% 48%, rgba(40,39,38,0), rgba(40,39,38,.6)), url("./assets/hero.png") center/cover no-repeat; }
.header { position: absolute; z-index: 1; top: 65px; left: 50%; display: flex; align-items: center; gap: 24px; height: 59px; transform: translateX(-50%); }
.header a { display: flex; align-items: center; gap: 24px; }
.header__mark { width: 46px; height: 55px; }
.header__wordmark { width: 211px; height: 59px; }
.rule { position: absolute; z-index: 1; top: 174px; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.86); }
.hero__content { position: absolute; z-index: 1; top: 319px; left: 50%; width: min(945px, calc(100% - 32px)); transform: translateX(-50%); text-align: center; }
h1 { display: inline-block; margin: 0; font-family: Archivo, Arial, sans-serif; font-size: 73.482px; font-weight: 700; font-stretch: expanded; line-height: 68.414px; letter-spacing: 0; text-shadow: 0 5.068px 5.068px rgba(30,48,35,.25); transform: scaleX(1.085); }
.hero__content > p { margin: 17px 0 23px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.25; }
.signup { display: flex; width: 384px; height: 53px; margin: 0 auto; overflow: hidden; border: 1px solid white; border-radius: 8px; background: rgba(255,255,255,.2); }
.signup input { width: 237px; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 20px; color: white; font: 16px Archivo, sans-serif; }
.signup input::placeholder { color: white; opacity: 1; }
.signup button { width: 147px; border: 0; border-radius: 7px; background: white; color: #6b6948; cursor: pointer; font-family: Archivo, Arial, sans-serif; font-size: 18px; font-weight: 700; font-stretch: expanded; line-height: 28px; letter-spacing: .01em; }
.signup button:disabled { cursor: wait; }
.signup__success { margin-top: 15px !important; font-size: 16px !important; }
.signup__error { margin: 10px 0 0; color: #fff; font-size: 13px; font-weight: 700; }
.wild { position: absolute; z-index: 1; top: 706px; left: 50%; width: calc(100% - 32px); margin: 0; transform: translateX(-50%); text-align: center; font-size: 18px; line-height: 22px; }
.footer { display: flex; height: 109px; align-items: center; justify-content: space-between; padding: 0 max(8.33%, 40px); background: #6f6d4a; }
.footer img { width: 176px; height: 48px; }
.footer p { margin: 0; font-size: 18px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 680px) { .hero { min-height: 750px; } .header { top: 36px; width: 250px; transform: translateX(-50%) scale(.78); } .rule { top: 135px; } .hero__content { top: 250px; } h1 { display: block; width: 100%; font-size: clamp(42px, 13vw, 51px); line-height: .936; letter-spacing: -.035em; transform: none; } .hero__content > p { max-width: 310px; margin-inline: auto; margin-top: 18px; margin-bottom: 22px; } .signup { width: 100%; } .signup input { flex: 1 1 auto; width: auto; } .signup button { flex: 0 0 125px; width: 125px; font-size: 16px; } .wild { top: auto; bottom: 42px; font-size: 15px; line-height: 19px; } .footer { height: auto; min-height: 172px; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 24px; text-align: center; } .footer img { width: 148px; height: auto; } .footer p { width: auto; font-size: 14px; text-align: center; } }