:root{
  --green:#204A30;
  --green-dark:#183823;
  --cream:#F4F0E8;
  --shadow: rgba(0,0,0,0.22);
  --side-pad: clamp(12px, 3vw, 28px);
  --safe-top: max(env(safe-area-inset-top), 20px);
  --safe-bottom: max(env(safe-area-inset-bottom), 24px);
}

*{ box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--green);
  background: var(--cream);
  line-height: 1.5;
}

.page{
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--side-pad) var(--safe-bottom);
}

.content{
  width: min(940px, 96vw);
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2.2vw, 18px);
  text-align: center;
}

/* Centered responsive logo */
.logo{
  width: min(680px, 80vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}

/* Headline + byline */
.top-text{
  margin: 0;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 2px 4px var(--shadow);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
}

.byline{
  margin: 0;
  max-width: 880px;
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  text-shadow: 0 1px 2px var(--shadow);
}

/* CTA button */
.cta-button{
  display: inline-block;
  padding: clamp(10px, 2.4vw, 14px) clamp(18px, 3.2vw, 22px);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  background: var(--green);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .04s ease, background-color .15s ease;
}
.cta-button:hover{ background: var(--green-dark); }
.cta-button:active{ transform: translateY(1px); }

/* Small phones: ensure logo doesn't push content off-screen */
@media (max-width: 420px){
  .logo{ width: 78vw; }
}