/* === Base Styles === */
body, body * {
  color: #52433d !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Montserrat', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

body {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  background-color: #ffffff;
}

/* Fixed background image with pseudo element */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1080px;
  height: 1920px;
  background-image: url('https://f003.backblazeb2.com/file/AstaNowo/Images/Web/AN%20Website%20Background%20-%20July25.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1080px auto;
  z-index: -1;
  pointer-events: none;
}

/* Container */
.page-container {
  max-width: 1080px;
  width: 100%;
  min-width: 320px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  background-color: transparent;
}

/* Content fills container width */
.landing-content,
.optin-form-wrapper,
.confirmation-message {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1.5em;
  padding-right: 1.5em;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Landing content */
.landing-content {
  position: relative;
  z-index: 2;
  color: #fff;
  background: rgba(223, 206, 160, 0.32);
  border-radius: 0.4rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  line-height: 1.5;
  margin: 1.5em auto;
  padding: 1.2em 1em;
  text-align: left;
}

.landing-content h1,
.landing-content h2 {
  text-align: center;
}

.landing-content h1 {
  font-size: 1.4em;
  margin-bottom: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.landing-content h2 {
  font-size: 1.4em;
  margin-bottom: 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.landing-content h3 {
  font-size: 1.2em;
  margin-bottom: 0;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.landing-content h4 {
  font-size: 1.2em;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.landing-content p {
  font-size: 1em;
  margin: 0.5em 0 1.1em 0;
  text-align: left;
}

/* Opt-in form wrapper */
.optin-form-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 2em;
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  background: none;
  box-sizing: border-box;
}

/* Opt-in form */
.optin-form {
  background: rgba(223, 206, 160, 0.32);
  width: 100%;
  padding: 1.2em 1em;
  border-radius: 0.7em;
  box-shadow: 0 2px 16px rgba(126, 119, 109, 0.10);
  box-sizing: border-box;
  color: #222;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 4em auto;
  font-size: 1em;
  max-width: 600px;
}

.optin-form input[type="text"],
.optin-form input[type="email"] {
  width: 100%;
  margin: 0.6em 0;
  padding: 0.7em;
  border-radius: 0.4em;
  border: 0;
  font-size: 1em;
  box-sizing: border-box;
  background: #fff;
  color: #222;
}

.gdpr-checkbox {
  width: 100%;
  margin: 0.7em 0 1.2em 0;
  padding-left: 2px;
  text-align: left;
  font-size: 0.92em;
  box-sizing: border-box;
}

.gdpr-checkbox label {
  color: #2b2b2b;
  font-size: 0.85em;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 0.8em;
  cursor: pointer;
}

.gdpr-checkbox input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transform: translateY(4px);
}

.optin-form button {
  background: #7e756d;
  color: #fff !important;
  border: none;
  padding: 0.7em 1.5em;
  border-radius: 0.4em;
  font-size: 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background 0.2s;
  width: 100%;
  max-width: 180px;
}

.optin-form button:hover,
.optin-form button:focus {
  background: #6d645b;
  outline: none;
}

/* Confirmation message */
.confirmation-message {
  background: rgba(223, 206, 160, 0.32);
  border-radius: 0.4rem;
  padding: 1.5em 1em;
  margin: 2em auto;
  width: 100%;
  font-size: 1.08em;
  color: #222;
  box-shadow: 0 2px 16px rgba(126, 119, 109, 0.10);
  text-align: center;
  box-sizing: border-box;
  max-width: 600px;
}

.confirmation-message h1,
.confirmation-message h2,
.confirmation-message h3,
.confirmation-message h4 {
  color: #222;
  margin-bottom: 0.8em;
}
.confirmation-message h4 {
  font-size: 0.8em;
  text-align: left;
}
.confirmation-message p {
  color: #222;
  margin: 1.1em 0;
  line-height: 1.7;
  text-align: left;
}
.confirmation-message p strong {
  color: #222;
}
.confirmation-message li {
  color: #222;
  font-size: 1em;
  margin-bottom: 0.8em;
  text-align: left;
}

hr {
  border: none;
  height: 2px;
  background-color: #52433d;
}

.confirmation-message form {
  margin-top: 2em;
  text-align: left;
}

.confirmation-message fieldset {
  border: none;
  margin: 1.2em 0;
  padding: 0;
}

.confirmation-message legend {
  font-weight: bold;
  margin-bottom: 0.7em;
}

.confirmation-message button {
  background: #7e756d;
  color: #fff !important;
  border: none;
  padding: 0.7em 1.5em;
  border-radius: 0.4em;
  font-size: 1em;
  cursor: pointer;
  margin-top: 1em;
  transition: background 0.2s;
  width: 100%;
  max-width: 180px;
}

.confirmation-message button:hover,
.confirmation-message button:focus {
  background: #6d645b;
  outline: none;
}

.confirmation-message input[type="checkbox"] {
  margin-right: 8px;
  vertical-align: middle;
}

#survey-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  transform: translateY(1px);
}

#survey-form label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 2em;
  cursor: pointer;
}

#survey-form label input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* Responsive Enhancements */
@media (min-width: 600px) {
  .landing-content {
    max-width: 600px;
    padding: 2em 2em;
    font-size: 1.08em;
  }
  .optin-form {
    max-width: 400px;
    padding: 2em 2em;
    font-size: 1.08em;
  }
  .confirmation-message {
    max-width: 480px;
    padding: 2em 2em;
    font-size: 1.08em;
  }
}

@media (min-width: 900px) {
  .landing-content {
    max-width: 720px;
    padding: 2.5em 3.5em;
    font-size: 1.15em;
  }
  .optin-form {
    max-width: 480px;
    padding: 2.5em 3em;
    font-size: 1.12em;
  }
  .confirmation-message {
    max-width: 720px;
    padding: 2.5em 3em;
    font-size: 1.12em;
  }
}

/* Mobile fixes (no scaling overrides; container shrinks naturally) */
@media (max-width: 599px) {
  .landing-content,
  .optin-form,
  .confirmation-message {
    width: 100vw;
    max-width: 100vw;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .optin-form input[type="text"],
  .optin-form input[type="email"] {
    max-width: 100%;
  }
  .optin-form button,
  .confirmation-message button {
    max-width: 100%;
  }
}