/* ============================================================
   EMAILCAP REFINE — surgical polish on the JOIN THE CLUB section.
   Keeps the cream background, dark Dartee green, pink accents, and
   editorial typography. Tightens the composition, trims dead space,
   and replaces the floating flag with a quiet hairline + flag divider.
   ============================================================ */

/* 1. Subtle divider between deep green closer and cream signup.
   Flag centered between two short, thin horizontal rules. */
.dartee-home .emailcap-break {
  background: #F4F0E6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 20px clamp(6px, 1vw, 12px);
}
.dartee-home .emailcap-break__rule {
  display: block;
  width: clamp(44px, 6vw, 72px);
  height: 1px;
  background: rgba(8, 42, 36, 0.14);
}

/* 2. Trim vertical space above the signup content.
   Reduce from var(--d-band) to a tight editorial gap. */
.dartee-home .section.emailcap.emailcap--refined {
  padding-top: clamp(28px, 3.4vw, 46px) !important;
  padding-bottom: clamp(48px, 5.5vw, 78px) !important;
}

/* 3. Align the two columns as one vertical composition.
   Both copy and form sit on the same baseline. */
.dartee-home .emailcap.emailcap--refined .emailcap__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;        /* single vertical center line */
  gap: clamp(28px, 5vw, 64px);
}

/* 4. Copy typography: keep the existing system, just slightly tighter. */
.dartee-home .emailcap.emailcap--refined .eyebrow {
  margin: 0 0 12px;
  color: #EC4D8B;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.dartee-home .emailcap.emailcap--refined .display {
  margin: 0;
  font-family: "Anton", "Archivo", sans-serif;
  font-weight: 400;
  color: #082A24;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.004em;
}
.dartee-home .emailcap.emailcap--refined .emailcap__copy p {
  margin: 14px 0 0;
  max-width: 34ch;
  color: #5D6A63;
  font-size: 15.5px;
  line-height: 1.55;
}

/* 5. Form: same height input + button, seamless, more tailored width.
   Reduce max-width so it feels premium and intentional. */
.dartee-home .emailcap.emailcap--refined .emailcap__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 440px;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"],
.dartee-home .emailcap.emailcap--refined .emailcap__btn {
  height: 54px;
  min-height: 54px;
}
.dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 18px;
  background: #FCFBF7;
  border: 1px solid rgba(8, 42, 36, 0.22);
  border-right: 0;
  border-radius: 0;
  color: #222421;
  font-family: "Archivo", sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  box-shadow: none;
  outline: none;
  transition: border-color 0.18s ease;
}
.dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"]::placeholder {
  color: #8E958C;
  letter-spacing: 0.08em;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}
.dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"]:focus {
  border-color: #EC4D8B;
  box-shadow: inset 0 -2px 0 #EC4D8B;
}
.dartee-home .emailcap.emailcap--refined .emailcap__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  background: #082A24;
  color: #F4F0E6;
  border: 1px solid #082A24;
  border-radius: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.2s ease;
}
.dartee-home .emailcap.emailcap--refined .emailcap__btn:hover { background: #0B3A31; }
.dartee-home .emailcap.emailcap--refined .emailcap__btn span { color: #EC4D8B; }

/* 6. Disclaimer: darker muted green/gray, readable but secondary.
   Tightened spacing to the form above it. */
.dartee-home .emailcap.emailcap--refined .emailcap__msg {
  margin: 10px 0 0;
  color: #082A24;
  font-size: 14px;
}
.dartee-home .emailcap.emailcap--refined .emailcap__fine {
  margin: 8px 0 0;
  max-width: 46ch;
  color: #6B7870;
  font-size: 11px;
  line-height: 1.5;
}

/* 7. MOBILE: stack gracefully, keep the form compact. */
@media (max-width: 780px) {
  .dartee-home .emailcap-break__rule { width: 38px; }


  .dartee-home .section.emailcap.emailcap--refined {
    padding-top: 24px !important;
    padding-bottom: 44px !important;
  }
  .dartee-home .emailcap.emailcap--refined .emailcap__inner {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }
  .dartee-home .emailcap.emailcap--refined .display {
    font-size: clamp(32px, 9.5vw, 44px);
  }
  .dartee-home .emailcap.emailcap--refined .emailcap__form {
    flex-direction: column;
    max-width: none;
    gap: 10px;
  }
  .dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"],
  .dartee-home .emailcap.emailcap--refined .emailcap__btn {
    height: 52px;
    min-height: 52px;
  }
  .dartee-home .emailcap.emailcap--refined .emailcap__form input[type="email"] {
    border-right: 1px solid rgba(8, 42, 36, 0.22);
  }
  .dartee-home .emailcap.emailcap--refined .emailcap__btn {
    width: 100%;
    justify-content: center;
  }
}