:root {
  --ivory: #F3EFE6;
  --ivory-light: #FBF8F1;
  --sage: #596B56;
  --sage-deep: #344433;
  --copper: #B8734A;
  --ink: #2f3b2e;
}

/* This version intentionally uses the approved mockup as the visual layer,
   then places a real working form exactly over the mockup form. */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at center top, rgba(255,255,255,0.55), rgba(243,239,230,0.2) 42%, rgba(243,239,230,1) 100%),
    var(--ivory);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

.site {
  min-height: 100svh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* The background image is 1024 x 1536, so the ratio is 2:3. */
.artboard {
  position: relative;
  width: min(100vw, 1024px);
  aspect-ratio: 2 / 3;
  min-height: 720px;
  background-image: url("assets/saha-holding-page-background.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  box-shadow: 0 18px 70px rgba(52, 68, 51, 0.08);
}

/* Keep form locked to exact mockup coordinates:
   x 267px, y 961px, width 477px, height 68px on a 1024x1536 design. */
.signup-form {
  position: absolute;
  left: 26.0742%;
  top: 62.5651%;
  width: 46.5820%;
  height: 4.4271%;

  display: grid;
  grid-template-columns: 67% 33%;
  border: 1.4px solid rgba(52, 68, 51, 0.72);
  border-radius: clamp(3px, 0.45vw, 6px);
  overflow: hidden;
  background: rgba(251, 248, 241, 0.92);
  box-shadow: 0 8px 24px rgba(52, 68, 51, 0.045);
}

.signup-form:focus-within {
  border-color: var(--sage-deep);
  box-shadow: 0 0 0 4px rgba(89,107,86,0.16), 0 8px 24px rgba(52, 68, 51, 0.045);
}

.email-field {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 16% 1fr;
  align-items: center;
  background: rgba(251, 248, 241, 0.94);
}

.email-icon {
  width: min(45%, 25px);
  justify-self: center;
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signup-form input[type="email"] {
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 0 0.6rem 0 0.1rem;
  background: transparent;
  color: var(--ink);
  font-size: clamp(12px, 1.65vw, 17px);
}

.signup-form input::placeholder {
  color: rgba(47, 59, 46, 0.73);
}

.signup-form button {
  height: 100%;
  border: 0;
  padding: 0 0.4rem;
  background: var(--sage);
  color: var(--ivory-light);
  cursor: pointer;
  font-size: clamp(10px, 1.45vw, 15px);
  font-weight: 500;
  letter-spacing: clamp(0.08rem, 0.35vw, 0.2rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.signup-form button:hover {
  background: var(--sage-deep);
}

.signup-form button:disabled {
  opacity: 0.72;
  cursor: wait;
}

.form-status {
  position: absolute;
  left: 26.0742%;
  top: 67.8%;
  width: 46.5820%;
  margin: 0;
  color: var(--sage-deep);
  text-align: center;
  font-size: clamp(10px, 1.25vw, 14px);
  line-height: 1.35;
  min-height: 1.4em;
  pointer-events: none;
}

/* Accessibility-only content. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile tuning: the mockup remains proportional, while form remains usable. */
@media (max-width: 560px) {
  body {
    background: var(--ivory);
  }

  .artboard {
    width: 100vw;
    min-height: auto;
    box-shadow: none;
  }

  .signup-form {
    border-width: 1px;
  }

  .email-field {
    grid-template-columns: 17% 1fr;
  }

  .email-icon {
    width: 44%;
  }

  .signup-form input[type="email"] {
    font-size: clamp(10px, 3.3vw, 14px);
    padding-right: 0.25rem;
  }

  .signup-form button {
    font-size: clamp(8px, 2.65vw, 12px);
    letter-spacing: 0.09rem;
  }

  .form-status {
    font-size: clamp(8px, 2.7vw, 12px);
  }
}

/* Very small phones: make the live form slightly taller than the image area for tap comfort,
   while keeping it visually aligned. */
@media (max-width: 380px) {
  .signup-form {
    height: 4.75%;
    top: 62.45%;
  }
}