/*
  The Get a demo popup. Its look is the partner application popup's (PartnerApplyDialog.astro):
  the same card, rounded inputs, pill choices and blue button, with the same colors as the site's
  tokens in global.css. It is plain CSS, with no Tailwind classes, because the same popup also sits
  on the comparison pages, which are plain HTML and do not load Tailwind.
*/

/* Buttons marked data-lead-open replace what used to be links, so they must look like them. This is
   in the base layer so that any class on the button, from Tailwind or from a page, still wins. */
@layer base {
  button[data-lead-open] {
    cursor: pointer;
    font: inherit;
    text-align: inherit;
  }
}

.lead-dialog {
  --lead-ink: #2f2c2c;
  --lead-charcoal: #142127;
  --lead-slate: #505050;
  --lead-gray: #6f6f6f;
  --lead-mist: #f4f5ed;
  --lead-brand: #007bc4;
  --lead-line: #8a8d83;
  --lead-error: #b3261e;

  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--lead-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: 0 24px 80px rgba(20, 33, 39, 0.35);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The last screen holds SQOR's Calendly booking page, so the popup widens there to show the days
   and the times side by side where the screen allows. */
.lead-dialog[data-lead-showing='done'] {
  width: min(1040px, calc(100vw - 32px));
}

/* Calendly's page scrolls inside this box, which stays within the screen under the heading. */
.lead-calendar {
  height: min(700px, calc(100dvh - 230px));
  min-height: 420px;
  margin-top: 16px;
}

.lead-dialog::backdrop {
  background: rgba(20, 33, 39, 0.55);
}

.lead-dialog *,
.lead-dialog *::before,
.lead-dialog *::after {
  box-sizing: border-box;
}

.lead-dialog [hidden] {
  display: none !important;
}

.lead-card {
  position: relative;
  padding: 32px;
}

/* The close button sits in its own white bar across the top of the card. The bar stays in view while
   a long form scrolls, and the form scrolls underneath it, so no question ever runs under the
   button. */
.lead-topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: -32px -32px 0;
  padding: 12px 14px 4px;
  background: #fff;
}

@media (max-width: 520px) {
  .lead-card {
    padding: 24px 20px;
  }

  .lead-topbar {
    margin: -24px -20px 0;
    padding: 10px 10px 2px;
  }
}

.lead-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--lead-mist);
  border-radius: 9999px;
  background: #fff;
  color: var(--lead-ink);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* A step is focused when it appears, so a screen reader starts reading it. It is not a control, so it
   shows no focus ring. */
.lead-dialog [data-lead-step]:focus {
  outline: none;
}

.lead-title {
  margin: 0 0 8px;
  color: var(--lead-ink);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.lead-text {
  margin: 0;
  color: var(--lead-slate);
  line-height: 1.6;
}

.lead-form {
  margin: 18px 0 0;
}

.lead-field {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.lead-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 12px;
}

@media (min-width: 480px) {
  .lead-row {
    grid-template-columns: 1fr 1fr;
  }
}

.lead-label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--lead-ink);
  font-weight: 700;
}

.lead-input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--lead-line);
  border-radius: 10px;
  background: #fff;
  color: var(--lead-ink);
  font: inherit;
  /* 16 pixels or more, so a phone does not zoom the page when the field is focused. */
  font-size: 1rem;
  line-height: 1.4;
}

select.lead-input {
  appearance: auto;
}

textarea.lead-input {
  resize: vertical;
}

.lead-input[aria-invalid='true'] {
  border-color: var(--lead-error);
}

.lead-input:focus-visible,
.lead-button:focus-visible,
.lead-close:focus-visible,
.lead-note a:focus-visible,
.lead-chip input:focus-visible + span {
  outline: 3px solid var(--lead-brand);
  outline-offset: 2px;
}

.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-chip {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

/* The real radio button or checkbox stays in the page, for keyboards and screen readers, and the
   pill beside it shows the state. */
.lead-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lead-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px;
  border: 1px solid var(--lead-line);
  border-radius: 9999px;
  background: #fff;
  color: var(--lead-ink);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lead-chip input:checked + span {
  border-color: var(--lead-brand);
  background: var(--lead-brand);
  color: #fff;
}

.lead-error {
  margin: 6px 0 0;
  color: var(--lead-error);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.lead-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 14px 26px;
  border: 0;
  border-radius: 9999px;
  background: var(--lead-brand);
  color: #fff;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.lead-button:hover {
  background: var(--lead-charcoal);
}

.lead-button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.lead-button-quiet {
  border: 1px solid var(--lead-line);
  background: #fff;
  color: var(--lead-ink);
}

.lead-button-quiet:hover {
  background: var(--lead-mist);
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.lead-actions .lead-button {
  margin-top: 0;
}

.lead-note {
  margin: 14px 0 0;
  color: var(--lead-slate);
  font-size: 0.85rem;
  line-height: 1.5;
}

.lead-note a {
  color: var(--lead-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}