/* ============================================================
   One-field work-email form, shared by the homepage (hero + closing CTA) and
   /book-a-demo/. Ported from the design mirror. Markup:
   partials/get-started-form.njk; behaviour: src/get-started-form.js.
   Tokens (--line-strong, --brand-tint-2, ...) come from styles.css, which
   both pages load first.
   ============================================================ */
.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; }
.hp-email-form {
  position: relative;
  display: flex; align-items: stretch;
  /* A definite width, not 100%: .hp-closing-actions sizes to its content, so a
     percentage width there collapses the input to nothing. */
  width: 620px; max-width: 100%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 5px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hp-email-form:focus-within { border-color: var(--brand-strong); box-shadow: 0 0 0 4px var(--brand-tint-2); }
.hp-email-form input {
  flex: 1; width: 0; min-width: 0; /* width:0 drops the input's ~20ch intrinsic size, which pushed the closing CTA past a 375px viewport */
  border: 0; outline: 0; background: transparent;
  font: 500 15px var(--font-body); color: var(--ink);
  padding: 0 12px;
}
.hp-email-form input::placeholder { color: var(--ink-3); }
.hp-email-form .btn { box-shadow: none; padding: 12px 20px; }
.hp-email-form .btn:hover { transform: none; box-shadow: none; }
.hp-email-form .btn:disabled { cursor: progress; }
.hp-email-form.is-invalid { border-color: #C0392B; }
.hp-email-thanks {
  position: absolute; left: 2px; top: calc(100% + 8px);
  margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.hp-email-form.is-invalid .hp-email-thanks { color: #C0392B; }
.hp-email-form--closing { border-color: transparent; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.hp-email-form--closing:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255,255,255,.45); }
.hp-email-form--closing .hp-email-thanks,
.hp-email-form--closing.is-invalid .hp-email-thanks { color: var(--brand-fg); }
.hp-closing-actions { align-items: center; }
/* Where .hp-closing-grid stacks (its own 880px query), let the actions span the
   column so max-width:100% has a real width to resolve against on phones. */
@media (max-width: 880px) { .hp-closing-actions { align-self: stretch; } }
/* Phones: "Get a personalized demo" leaves no room for the address beside it,
   so the button drops under the input and both run full width. */
@media (max-width: 560px) {
  .hp-email-form { width: 100%; flex-wrap: wrap; gap: 5px; }
  .hp-email-form input { flex-basis: 100%; height: 46px; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .hp-hero-actions .hp-email-form .btn,
  .hp-email-form .btn { width: 100%; justify-content: center; padding: 12px 14px; }
}

/* Stacked variant: button under the input at every width. Used in narrow
   containers (the /book-a-demo/ card) where "Get a personalized demo" would
   leave no room for the address beside it. Same treatment phones get above. */
.hp-email-form--stacked { width: 100%; flex-wrap: wrap; gap: 5px; }
.hp-email-form--stacked input { flex-basis: 100%; height: 46px; }
.hp-email-form--stacked .btn { width: 100%; justify-content: center; }