/* ---------------------------------------------------------------------------
   Styles we own, on top of the mirrored systeme.io markup.

   The waiting-list form is ours rather than systeme.io's opt-in component, so
   it needs its own styling. The values below reproduce what the original
   component rendered, so the page looks unchanged: a white card with a 2px
   border and 24px radius, a stacked 12px grid, and the brand teal on the
   button.
   --------------------------------------------------------------------------- */

/* Visible to screen readers, not on screen. Used for the real <label>s and for
   the honeypot field. */
.ttl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ttl-waitlist {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  padding: 36px;
  border: 2px solid rgb(226, 226, 227);
  border-radius: 24px;
  background-color: #ffffff;
  font-family: 'Inter', Arial, sans-serif;
}

@media only screen and (max-width: 800px) {
  .ttl-waitlist {
    gap: 9px;
    padding: 10px;
  }
}

.ttl-waitlist-input {
  width: 100%;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  color: rgb(48, 48, 48);
  text-indent: 10px;
  text-align: left;
  appearance: none;
  border: 1px solid rgb(222, 222, 222);
  border-radius: 12px;
  background-color: rgb(247, 247, 247);
  outline: none;
}

.ttl-waitlist-input:focus-visible {
  border-color: rgb(30, 130, 159);
  box-shadow: 0 0 0 3px rgba(30, 130, 159, 0.18);
}

/* The browser flags a bad address on submit; don't shout before then. */
.ttl-waitlist-input[aria-invalid="true"] {
  border-color: #c0392b;
}

.ttl-waitlist-button {
  width: 100%;
  align-self: center;
  padding: 14px 0;
  font-family: 'Inter', Arial, sans-serif;
  font-size: inherit;
  font-weight: 700;
  color: #ffffff;
  background: rgb(30, 130, 159);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, color 0.3s;
}

.ttl-waitlist-button:hover {
  background: rgb(25, 112, 137);
}

.ttl-waitlist-button[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Empty until the script has something to report, so it takes no space. */
.ttl-waitlist-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #5a6a80;
}

.ttl-waitlist-status:empty {
  display: none;
}

.ttl-waitlist-status[data-state="error"] {
  color: #c0392b;
}

.ttl-waitlist-status[data-state="ok"] {
  color: rgb(25, 112, 137);
  font-weight: 600;
}