/* Shared marketing dark CTA.
   Visual source: About “Explore Neural Fabric” (.outline-button).
   Computed rest: 1px solid #4385ad, color #e1eef5, transparent fill, box-shadow none.
   Computed hover: 1px solid #64bccf, color #fff, no extra glow or filter.
   Computed transition-duration: 0s. Do not thicken the border or add a shadow. */

:root {
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #4385ad;
  --btn-secondary-text: #e1eef5;
  --btn-secondary-border-hover: #64bccf;
  --btn-secondary-text-hover: #fff;
}

.outline-button,
.about-page .outline-button,
.btn-secondary,
#qh-restored .actions .btn-secondary,
.pp-hero-secondary {
  background: transparent;
  background-image: none;
  border: 1px solid #4385ad;
  color: #e1eef5;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: none;
}

.outline-button:hover,
.about-page .outline-button:hover,
.btn-secondary:hover,
#qh-restored .actions .btn-secondary:hover,
.pp-hero-secondary:hover {
  background: transparent;
  background-image: none;
  border: 1px solid #64bccf;
  color: #fff;
  box-shadow: none;
  filter: none;
  transform: none;
}

.outline-button:focus-visible,
.about-page .outline-button:focus-visible,
.btn-secondary:focus-visible,
#qh-restored .actions .btn-secondary:focus-visible,
.pp-hero-secondary:focus-visible {
  outline: 2px solid #4a9eff;
  outline-offset: 3px;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.dd-actions .btn-group {
  justify-content: flex-start;
}

@media (max-width: 600px) {
  .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}