.test-audience-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 400px);
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(196, 178, 235, .28);
  border-radius: 999px;
  background: rgba(172, 148, 220, .09);
}

.test-audience-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: #c7c0d3;
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
}

.test-audience-nav a[aria-current="page"] {
  color: #272036;
  background: linear-gradient(110deg, #ddd3f4, #b4a2dc);
  box-shadow: 0 4px 18px rgba(184, 160, 231, .16), inset 0 1px 0 #ffffff66;
}

.test-audience-nav a:focus-visible { outline: 2px solid #e6dafa; outline-offset: 3px; }
/* Keep the existing header glow inside the page on tablet widths. */
.test-landing-page .topbar::before { inset-inline: 0; }
#choose-test { scroll-margin-top: 110px; }
.solo-test-hero h1 { max-width: 22ch; font-size: clamp(1.8rem, 2.8vw, 2.7rem); line-height: 1.12; }
.solo-test-hero .test-hero__visual { min-height: 340px; }
.solo-test-hero .test-hero__copy { padding: clamp(26px, 3.5vw, 48px); }

@media (max-width: 980px) {
  .solo-test-hero { grid-template-columns: 1fr; }
  .solo-test-hero .test-hero__visual { display: none; }
}

@media (max-width: 680px) {
  .test-audience-nav { width: 100%; }
  .test-audience-nav a { padding-inline: 10px; }
  .solo-test-hero .test-hero__copy { padding: 24px 20px; }
  .solo-test-hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
}