.main-stage {
  min-height: calc(100vh - 72px);
  background: linear-gradient(180deg, var(--brand-lavender-50) 0%, var(--surface-card) 60%);
}
.hero { text-align: center; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px; border: 1px solid rgba(91, 70, 223, .22); border-radius: 999px;
  background: rgba(255, 255, 255, .78); color: var(--purple-dark); font-size: 12px; font-weight: 760;
}
.hero-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-purple-500); }
h1 { margin: 12px auto 6px; font-size: clamp(32px, 4.3vw, 46px); line-height: 1.08; letter-spacing: -1.45px; }
.hero-copy { margin: 0 auto 18px; max-width: 760px; color: var(--muted); font-size: 16px; }

.help-entry { max-width: 920px; margin: 0 auto; }
.help-search-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.help-search-row .context-select { min-width: 160px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.help-search-row .help-search { flex: 1; min-width: 260px; }
.help-entry .help-search { max-width: none; }
.help-entry .answer-panel { max-width: none; text-align: left; }
.popular { margin: 11px 0 0; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.popular strong { color: var(--ink); }
.popular button { border: 1px solid rgba(91, 70, 223, .18); background: rgba(255, 255, 255, .72); color: var(--purple-dark); border-radius: 999px; padding: 5px 9px; cursor: pointer; }
.popular button:hover { background: white; border-color: rgba(91, 70, 223, .4); }

.browse {
  margin-top: 24px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(204, 214, 229, .92);
  border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.browse-head { padding: 20px 24px 0; background: transparent; border-bottom: 0; }
.tabs {
  display: inline-flex; width: auto; max-width: 340px; background: var(--surface-muted);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px;
}
.tab {
  flex: 1; min-width: 0; border: 0; border-radius: 9px; background: transparent;
  color: var(--muted); padding: 10px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.tab:hover { color: var(--purple-dark); }
.tab[aria-selected="true"] { color: var(--text-inverse); background: var(--purple-dark); }
.tab:focus-visible { outline: 2px solid var(--purple-dark); outline-offset: 2px; }
.browse-content { padding: 20px 24px 26px; }
@media (max-width: 800px) { .browse-grid { grid-template-columns: 1fr; } }