/* Sitewide "ask us a question" popup (bottom right). Everything is scoped under
   .hl-ask- so it stays clear of the exported Webflow styles. Brand palette only:
   black, white, red #BF202F, heading face Cooperhewitt. */

.hl-ask-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  /* A labelled pill, not a bare icon: a naked bubble reads as "chat with a bot"
     and gets ignored. Height stays 58px so it clears the 44px tap floor. */
  min-height: 58px;
  padding: 0 1.15rem 0 1rem;
  border: 0;
  border-radius: 999px;
  background: #bf202f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, background 0.18s ease;
}
.hl-ask-launcher-label {
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hl-ask-launcher:hover {
  background: #a51b28;
  transform: translateY(-2px);
}
.hl-ask-launcher svg {
  width: 26px;
  height: 26px;
  display: block;
}
.hl-ask-launcher.hl-ask-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.8);
}

.hl-ask-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483001;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  font-family: "Rubik Variablefont Wght", Rubik, sans-serif;
  color: #333;
}
.hl-ask-panel.hl-ask-hidden {
  opacity: 0;
  /* visibility (not just pointer-events) so the closed panel can never sit on
     top of the launcher button in hit testing. */
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.hl-ask-head {
  background: #111;
  color: #fff;
  padding: 1.05rem 2.6rem 1rem 1.15rem;
  border-bottom: 4px solid #bf202f;
  position: relative;
}
.hl-ask-head h2 {
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: #fff;
}
.hl-ask-head p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: #d9d9d9;
}
.hl-ask-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.75;
}
.hl-ask-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.hl-ask-body {
  padding: 1.05rem 1.15rem 1.2rem;
}
.hl-ask-body .w-form {
  margin: 0;
}
.hl-ask-field {
  display: block;
  margin-bottom: 0.65rem;
}
.hl-ask-field input,
.hl-ask-field textarea {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-radius: 9px;
  padding: 0.68rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}
.hl-ask-field textarea {
  min-height: 74px;
  resize: vertical;
}
.hl-ask-field input:focus,
.hl-ask-field textarea:focus {
  outline: none;
  border-color: #bf202f;
}
.hl-ask-submit {
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: #bf202f;
  color: #fff;
  font-family: Cooperhewitt, "Rubik Variablefont Wght", Rubik, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.78rem 1rem;
  cursor: pointer;
  transition: background 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.hl-ask-submit:hover {
  background: #a51b28;
}
.hl-ask-submit:disabled {
  opacity: 0.7;
  cursor: default;
}
.hl-ask-note {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8a8a8a;
}
.hl-ask-body .w-form-done,
.hl-ask-body .w-form-fail {
  display: none;
  margin-top: 0;
  padding: 0.9rem 1rem;
  border-radius: 9px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.hl-ask-body .w-form-done {
  background: #f3f3f3;
  color: #333;
}
.hl-ask-body .w-form-fail {
  background: #fdeced;
  color: #8f1420;
}

@media (max-width: 479px) {
  .hl-ask-launcher {
    right: 14px;
    bottom: 14px;
    min-height: 52px;
    padding: 0 1rem 0 0.85rem;
  }
  .hl-ask-launcher svg {
    width: 22px;
    height: 22px;
  }
  .hl-ask-launcher-label {
    font-size: 0.95rem;
  }
  .hl-ask-panel {
    right: 14px;
    bottom: 14px;
  }
}

/* The sticky Register bar (landing.css .lp-sticky) is fixed to the bottom of
   the screen, and this bubble sat right on top of its Register button. When
   the bar is showing, the bubble lifts above it. The body class is set by
   PageEffects; the :has() rule covers the hand-built pages' own inline
   toggle before hydration. */
body.hl-sticky-on .hl-ask-launcher,
body:has(.lp-sticky.is-on) .hl-ask-launcher {
  bottom: calc(20px + 4.75rem);
}
body.hl-sticky-on .hl-ask-panel,
body:has(.lp-sticky.is-on) .hl-ask-panel {
  bottom: calc(20px + 4.75rem);
}