* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #f5f0e8;
  color: #273026;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  justify-content: center;
}

.landing {
  width: 100%;
}

.design {
  position: relative;
  width: min(100%, 829px);
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(62, 54, 42, 0.12);
}

.design__image {
  display: block;
  width: 100%;
  height: auto;
}

/*
  Os valores abaixo seguem proporções da arte original (829 × 1757).
  Isso mantém o formulário alinhado mesmo quando a página é redimensionada.
*/
.capture-form {
  position: absolute;
  left: 10.9%;
  top: 53.25%;
  width: 78.4%;
  height: 23.5%;
  display: grid;
  grid-template-rows: 17.2% 17.2% 17.2% 19.2% auto;
  row-gap: 3.4%;
  line-height: 1.2;
}

.capture-form input,
.capture-form button {
  width: 100%;
  border-radius: clamp(10px, 1.8vw, 18px);
  font-size: clamp(14px, 2.45vw, 22px);
  font-family: inherit;
}

.capture-form input {
  padding: 0 7%;
  border: 1px solid rgba(104, 111, 96, 0.32);
  color: #314632;
  background: rgba(255, 252, 248, 0.93);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.capture-form input:focus {
  border-color: #60775c;
  box-shadow: 0 0 0 3px rgba(96, 119, 92, 0.18);
}

.capture-form input::placeholder {
  color: #9a9ea0;
}

.capture-form button {
  border: 0;
  padding: 0 4%;
  color: #fff;
  background: linear-gradient(135deg, #65795f, #50664d);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(64, 85, 59, 0.18);
  transition: transform .18s ease, filter .18s ease;
}

.capture-form button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.capture-form button:active {
  transform: translateY(0);
}

.capture-form button:disabled {
  cursor: wait;
  opacity: .72;
}

.form-status {
  margin: 0;
  min-height: 1.3em;
  text-align: center;
  color: #435a40;
  font-size: clamp(12px, 1.8vw, 16px);
  line-height: 1.25;
}

.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;
}

@media (max-width: 520px) {
  .design {
    box-shadow: none;
  }

  .capture-form input {
    padding-left: 6%;
  }

  .capture-form button {
    font-size: clamp(13px, 4vw, 19px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capture-form button {
    transition: none;
  }
}