/* ============================================================
   EASYWATER — "Coming Soon / Get Notified" popup
   Uses the locked brand tokens from brand.css.
   ============================================================ */
.cs-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12,12,13,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .22s ease;
}
.cs-overlay.open { display: flex; opacity: 1; }

.cs-card {
  position: relative;
  width: 100%; max-width: 460px;
  background: var(--paper); color: var(--ink);
  border-radius: 6px;
  padding: clamp(28px, 5vw, 44px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: translateY(12px) scale(.98);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  text-align: center;
}
.cs-overlay.open .cs-card { transform: translateY(0) scale(1); }

.cs-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: 0; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--steel);
  padding: 6px; transition: color .15s ease;
}
.cs-close:hover { color: var(--ink); }

.cs-mark { display: flex; justify-content: center; color: var(--ink); margin-bottom: 18px; }

.cs-eyebrow {
  font-family: var(--font-body);
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 700; color: var(--steel);
}
.cs-title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem); line-height: 1.02;
  letter-spacing: -.01em; margin: .35em 0 .5em;
}
.cs-sub {
  color: var(--graphite); font-size: .98rem; line-height: 1.55;
  max-width: 38ch; margin: 0 auto 1.6em;
}

.cs-form { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-form input[type="email"] {
  flex: 1; min-width: 0;
  background: var(--white);
  border: 1.5px solid rgba(12,12,13,.22);
  color: var(--ink);
  padding: .9em 1em; border-radius: 2px;
  font-family: inherit; font-size: .98rem;
}
.cs-form input[type="email"]:focus {
  outline: none; border-color: var(--ink);
}
.cs-form input::placeholder { color: var(--steel); }
.cs-form .btn { flex: none; }

.cs-msg { min-height: 1.2em; margin-top: 12px; font-size: .85rem; }
.cs-msg.err { color: var(--alert); }

.cs-fine {
  margin-top: 16px; font-size: .72rem; color: var(--steel); line-height: 1.5;
}

/* success state */
.cs-success { display: none; }
.cs-card.done .cs-form-wrap { display: none; }
.cs-card.done .cs-success { display: block; }
.cs-success .check {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; font-size: 1.5rem;
}
.cs-success h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; margin: 0 0 .4em; }
.cs-success p { color: var(--graphite); font-size: .95rem; line-height: 1.55; margin: 0; }

@media (max-width: 440px) {
  .cs-form .btn { width: 100%; }
}