:root { font-family: Georgia, serif; background: #0f2419; color: #f4f0e6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
a { color: #b7e0c4; }
.wrap { width: min(40rem, calc(100% - 2rem)); margin: 2rem auto 3rem; }
.card { background: #163325; padding: 2rem; border-radius: 8px; }
.eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; color: #9cbfa8; margin: 0; }
h1 { margin: .25rem 0 1rem; font-size: 1.85rem; }
h2 { margin: 1.6rem 0 .5rem; font-size: 1.15rem; }
.lead, p, li { line-height: 1.5; color: #d5e4da; }
.price { font-size: 1.7rem; color: #fff; margin: 1rem 0 .25rem; }
.price span { font-size: 1rem; color: #9cbfa8; }
.fine { font-size: .9rem; opacity: .9; }
code { font-size: .85em; color: #fff; }
#test-banner { color: #f3c6b8; margin: 0 0 1rem; }

.carousel { overflow: hidden; margin: 1.2rem 0 1.4rem; border: 1px solid #1b5e20; border-radius: 6px; background: #0f2419; }
.track { display: flex; width: 400%; animation: pan 28s infinite; }
.carousel:hover .track { animation-play-state: paused; }
.slide { width: 25%; padding: 1.1rem 1.2rem; }
.slide strong { display: block; color: #9cbfa8; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
@keyframes pan {
  0%, 18% { transform: translateX(0); }
  25%, 43% { transform: translateX(-25%); }
  50%, 68% { transform: translateX(-50%); }
  75%, 93% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

.need { display: grid; gap: .75rem; margin: .75rem 0 0; }
.need div { background: #0f2419; padding: .85rem 1rem; border-radius: 4px; }
.need h3 { margin: 0 0 .3rem; font-size: 1rem; color: #fff; }

form { display: grid; gap: .6rem; margin-top: 1rem; }
label { font-size: .9rem; color: #9cbfa8; }
input[type=email] {
  width: 100%; padding: .75rem .8rem; font: inherit; border: 1px solid #2a4a38;
  background: #0f2419; color: #f4f0e6; border-radius: 4px;
}
button, .cta {
  display: inline-block; width: 100%; padding: .9rem 1rem; border: 0; border-radius: 4px;
  background: #1b5e20; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  text-align: center; text-decoration: none;
}
button:hover, .cta:hover { filter: brightness(1.08); }
button:disabled { opacity: .6; cursor: wait; }
.status { min-height: 1.4rem; margin: .4rem 0 0; }
.err { color: #f3c6b8; }
.ok { color: #b7e0c4; }