:root {
  --yellow: #f4b51f;
  --ink: #111;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #1d1710; font-family: Arial, Helvetica, sans-serif; }
body { overflow-x: hidden; }
.hero {
  position: relative;
  width: 100vw;
  max-width: 1536px;
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  background: #1d1710;
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.notify-form {
  position: absolute;
  left: 28.0%;
  top: 68.3%;
  width: 40.2%;
  z-index: 3;
}
.input-wrap {
  height: clamp(38px, 5.1vw, 78px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  overflow: hidden;
}
.mail-icon { font-size: clamp(15px, 1.55vw, 27px); margin-left: clamp(13px, 1.6vw, 28px); color: #111; transform: translateY(-1px); }
.notify-form input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 clamp(9px, 1vw, 16px);
  font-size: clamp(10px, 1.25vw, 20px);
  color: #555;
}
.notify-form button {
  align-self: stretch;
  min-width: 32%;
  padding: 0 clamp(14px, 2.2vw, 34px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg,#f8c73d,#edae17);
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(10px, 1.35vw, 20px);
  cursor: pointer;
}
.notify-form button:hover { filter: brightness(1.04); }
.notify-form button:disabled { opacity: .7; cursor: wait; }
.form-message { margin: .45rem 0 0; text-align: center; font-size: clamp(10px, 1vw, 14px); color: #fff; text-shadow: 0 1px 4px #000; min-height: 1.1em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mobile-signup { display: none; }

@media (max-width: 720px) {
  .hero { width: 100%; aspect-ratio: 3 / 2; }
  .notify-form { display: none; }
  .mobile-signup {
    display: block;
    padding: 26px 20px 34px;
    background: #1d1710;
    color: #fff;
    text-align: center;
  }
  .mobile-signup h1 { margin: 0 0 8px; font-size: 24px; }
  .mobile-signup p { margin: 0 0 18px; color: #e5e5e5; }
  .mobile-form label { display: block; text-align: left; max-width: 520px; margin: 0 auto 7px; font-size: 14px; }
  .mobile-row { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
  .mobile-row input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 14px 16px; font-size: 16px; }
  .mobile-row button { border: 0; border-radius: 999px; padding: 12px 18px; background: var(--yellow); font-weight: 800; }
}