/* Lead / demo / question dialog and its form controls (handoff doc 4.1). Ported from the artifact's inline "Lead / demo dialog" styles,
   scoped under .gx so it works on every page (the dialog sits inside the footer's .gx wrapper). The same .fld controls style the
   newsletter field. rem converted to px for legacy pages. Plain CSS on purpose. */
@keyframes ldlg-in {
  from {
    opacity: 0;
    transform: translateY(var(--space-4));
  }
}
@keyframes ldlg-spin {
  to {
    transform: rotate(360deg);
  }
}
.gx .ldlg {
  width:min(100% - var(--space-8),544px);
  max-width:none;
  max-height:calc(100dvh - var(--space-8));
  margin:auto;
  padding:0;
  border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius-xl);
  background:var(--color-bg-raised);
  color:var(--color-text);
  box-shadow:var(--shadow-lg);
  overflow:auto;
  overscroll-behavior:contain;
}
.gx .ldlg::backdrop {
  background:var(--overlay-dark);
  backdrop-filter:blur(var(--blur-sm));
  -webkit-backdrop-filter:blur(var(--blur-sm));
}
.gx .ldlg[open] {
  animation:ldlg-in var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion:reduce) {
  .gx .ldlg[open] {
    animation:none;
  }
}
.gx .ldlg__body {
  position:relative;
  padding:var(--space-8) var(--space-6) var(--space-6);
}
@media (min-width:768px) {
  .gx .ldlg__body {
    padding:var(--space-10) var(--space-10) var(--space-8);
  }
}
.gx .ldlg__close {
  position:absolute;
  top:var(--space-3);
  right:var(--space-3);
  display:grid;
  place-items:center;
  width:var(--control-h);
  height:var(--control-h);
  border:0;
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--color-text-muted);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.gx .ldlg__close:hover {
  background:var(--color-bg-sunken);
  color:var(--color-text);
}
.gx .ldlg__close:active {
  background:var(--cream-200);
}
.gx .ldlg__close:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .ldlg__close svg {
  width:var(--space-4);
  height:var(--space-4);
}
.gx .ldlg__eyebrow {
  font-family:var(--font-mono);
  font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--color-accent-active);
}
.gx .ldlg__title {
  margin-top:var(--space-3);
  font-size:var(--text-2xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-snug);
}
.gx .ldlg__lead {
  margin-top:var(--space-3);
  color:var(--color-text-subtle);
}
.gx .ldlg__form {
  display:grid;
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.gx .ldlg__grid {
  display:grid;
  gap:var(--space-4);
}
@media (min-width:768px) {
  .gx .ldlg__grid {
    grid-template-columns:1fr 1fr;
  }
}
.gx .fld {
  display:grid;
  gap:var(--space-2);
}
.gx .fld__label {
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
}
.gx .fld__label small {
  font-weight:var(--weight-regular);
  color:var(--color-text-muted);
}
.gx .fld__input {
  width:100%;
  min-height:var(--control-h);
  padding-inline:var(--space-3);
  border:var(--border-hair) solid var(--color-border-strong);
  border-radius:var(--radius-md);
  background:var(--color-bg-raised);
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-md);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.gx .fld__input::placeholder {
  color:var(--color-text-muted);
}
.gx .fld__input:hover {
  border-color:var(--color-text-muted);
}
.gx .fld__input:focus-visible {
  outline:none;
  border-color:var(--color-focus);
  box-shadow:0 0 0 var(--border-hair) var(--color-focus);
}
.gx .fld__input:disabled {
  background:var(--color-bg-sunken);
  color:var(--color-text-muted);
  cursor:not-allowed;
}
.gx .fld__input[aria-invalid=true] {
  border-color:var(--color-error);
  box-shadow:0 0 0 var(--border-hair) var(--color-error);
}
.gx .fld__error {
  min-height:0;
  font-size:var(--text-xs);
  color:var(--color-error);
}
.gx .fld__error:empty {
  display:none;
}
.gx .chips {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:0;
  padding:0;
  border:0;
}
.gx .chips legend {
  margin-bottom:var(--space-2);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
}
.gx .chip {
  position:relative;
}
.gx .chip input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.gx .chip span {
  display:inline-flex;
  align-items:center;
  min-height:var(--space-10);
  padding-inline:var(--space-4);
  border:var(--border-hair) solid var(--color-border-strong);
  border-radius:var(--radius-full);
  font-size:var(--text-sm);
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.gx .chip:hover span {
  background:var(--color-bg-sunken);
}
.gx .chip input:checked + span {
  border-color:var(--color-inverse-bg);
  background:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .chip input:focus-visible + span {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .chip input:disabled + span {
  opacity:.5;
  cursor:not-allowed;
}
.gx .chips[aria-invalid=true] .chip span {
  border-color:var(--color-error);
}
.gx .ldlg__alert {
  display:flex;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:var(--border-hair) solid var(--color-error);
  border-radius:var(--radius-md);
  background:color-mix(in srgb,var(--color-error) 8%,var(--color-bg-raised));
  color:var(--color-text);
  font-size:var(--text-sm);
}
.gx .ldlg__alert[hidden] {
  display:none;
}
.gx .ldlg__alert svg {
  flex-shrink:0;
  width:var(--space-5);
  height:var(--space-5);
  color:var(--color-error);
}
.gx .ldlg__alert a {
  color:inherit;
  font-weight:var(--weight-medium);
  text-decoration:underline;
}
.gx .ldlg__submit {
  width:100%;
}
.gx .ldlg__fine {
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  text-align:center;
}
.gx .ldlg__fine a {
  color:inherit;
  text-decoration:underline;
}
.gx .ldlg__trust {
  display:flex;
  justify-content:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  color:var(--color-text-subtle);
}
.gx .ldlg__trust svg {
  width:var(--space-4);
  height:var(--space-4);
  color:var(--color-success);
}
.gx .ldlg__done {
  display:grid;
  justify-items:center;
  gap:var(--space-3);
  padding-block:var(--space-6) var(--space-2);
  text-align:center;
}
.gx .ldlg__done[hidden] {
  display:none;
}
.gx .ldlg__done-icon {
  display:grid;
  place-items:center;
  width:var(--space-16);
  height:var(--space-16);
  border-radius:var(--radius-full);
  background:var(--color-success-bg);
  color:var(--color-success);
}
.gx .ldlg__done-icon svg {
  width:var(--space-8);
  height:var(--space-8);
}
.gx .ldlg__done .ldlg__title {
  margin-top:var(--space-2);
}
.gx .ldlg__done-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-2);
  margin-top:var(--space-4);
}
.gx button.btn {
  cursor:pointer;
}
.gx .header.header:has(.mobile-menu:not([hidden])) {
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--color-bg);
}
.gx main section[id] {
  scroll-margin-top:var(--header-h);
}
.gx .fld__input--area {
  min-height:calc(var(--control-h) * 2);
  padding-block:var(--space-2);
  resize:vertical;
}
.gx .ldlg [hidden] {
  display:none;
}
.gx :where(button[data-open]) {
  appearance:none;
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:inherit;
  text-align:inherit;
  cursor:pointer;
}
.gx .btn__label {
  transition:opacity var(--dur-fast) var(--ease-out);
}
.gx .btn__spinner {
  position:absolute;
  inset:0;
  margin:auto;
  width:var(--space-4);
  height:var(--space-4);
  border:var(--border-focus) solid currentColor;
  border-inline-end-color:transparent;
  border-radius:var(--radius-full);
  opacity:0;
  animation:ldlg-spin .7s linear infinite;
}
.gx .btn[aria-busy=true] .btn__label {
  opacity:0;
}
.gx .btn[aria-busy=true] .btn__spinner {
  opacity:1;
}
/* keep "(optional)" inline with its label, as in the artifact (a global small { display: block } rule would push it down) */
.gx .fld__label small {
  display:inline;
  margin-top:0;
  font-size:inherit;
}