/* ============================================================================
   The homepage hero's waitlist form.

   The product homepage puts a single "Start Free Trial" link here. This site
   captures the email in the hero itself, so the field and the button sit as one
   joined control where that button was. The button half is styled to match
   .btn-hero-primary exactly (flat black fill, 14px radius, weight 500, no
   shadow) so the composition still reads as the source's.

   Every other CTA on the page — the nav, the demo, the closing card — is a
   plain link to /waitlist/, which is where the same form lives full-size.

   Scoped to body.homepage-black-white.hp-brand so it can use the --hb-* tokens
   homepage-brand.css declares there, and so it cannot reach the footer's
   waitlist form or any other page's.
============================================================================ */

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1.5px solid var(--hb-g-300);
  border-radius: var(--hb-r-lg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form:focus-within {
  border-color: var(--hb-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 14px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--hb-ink);
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form input[type="email"]:focus {
  outline: none;
  box-shadow: none;
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form input[type="email"]::placeholder {
  color: var(--hb-g-500);
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form button {
  flex: 0 0 auto;
  border: none;
  cursor: pointer;
  padding: 15px 26px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #ffffff;
  background: var(--hb-ink);
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .25s ease;
}

body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form button:hover {
  background: var(--hb-g-900);
}

/* Below 600px the hero row wraps anyway, so stack the field over the button
   and let both run the full column width. */
@media (max-width: 600px) {
  body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form {
    flex-direction: column;
    max-width: 380px;
    background: transparent;
    border: none;
    overflow: visible;
    gap: .6rem;
  }

  body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form input[type="email"] {
    background: #ffffff;
    border: 1.5px solid var(--hb-g-300);
    border-radius: var(--hb-r-lg);
  }

  body.homepage-black-white.hp-brand .hp-hero-cta .waitlist-form button {
    width: 100%;
    border-radius: var(--hb-r-lg);
  }
}