.home { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.home-navigator { margin: 0 0 2rem; }
.home-hero { text-align: center; padding: 1.5rem 1rem; border-top: 1px solid var(--sapTile_BorderColor, #e5e5e5); }
.home-hero h2 { font-size: 1.75rem; margin: 0 0 0.75rem; }
.home-hero .lede { font-size: 1.05rem; color: var(--sapTextColor, #333); margin: 0 auto 1.5rem; max-width: 800px; }
.home-hero__ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home article > section { margin: 2.5rem 0; }
.home article > section h2 { font-size: 1.5rem; margin: 0 0 1.5rem; }
.mission-grid, .tutorial-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.mission-grid li, .tutorial-grid li { background: var(--sapTile_Background, #fff); border: 1px solid var(--sapTile_BorderColor, #e5e5e5); border-radius: 0.5rem; padding: 1rem; }
.mission-grid a, .tutorial-grid a { text-decoration: none; color: inherit; display: block; }
.mission-grid h3, .tutorial-grid h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.tutorial-grid .nav-card__title {
  /* Mirror the navigator card-title typography so the cross-document
     view-transition (data-vt-card="navigator" → hero-title) starts and
     ends at visually equivalent text styling. Source of truth:
     hugo-apps/src/navigator/TutorialNavigator.vue .nav-card__title. */
  font-size: 1rem;
  font-weight: 700;
  color: var(--sapTextColor, #32363a);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.mission-grid p, .tutorial-grid p { margin: 0 0 0.5rem; color: var(--sapTextColor, #555); font-size: 0.9rem; }
.tutorial-grid .meta { color: var(--sapNeutralTextColor, #666); font-size: 0.8rem; }
.topic-grid { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic-grid li a { padding: 0.4rem 0.8rem; background: var(--sapButton_Background, #f0f0f0); border-radius: 1rem; text-decoration: none; color: inherit; }
.topic-grid__more { margin: 1rem 0 0; }
.topic-grid__more a { color: var(--sapLink_Color, #0070f3); text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* /browse/ A/B trial pill (issue #174 PR 2). Subtle, easy to remove post-A/B. */
.browse-pill-wrapper { text-align: center; padding: 0.5rem 0; }
.browse-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: var(--sapButton_Lite_Background, #f0f4f7);
  color: var(--sapLink_Color, #0070f0);
  border: 1px solid var(--sapButton_BorderColor, #cdd6e0);
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 150ms ease, border-color 150ms ease;
}
.browse-pill:hover {
  background: var(--sapButton_Hover_Background, #e2eaf0);
  border-color: var(--sapButton_Hover_BorderColor, #a0afc0);
}
.browse-pill__icon { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .browse-pill { transition: none; }
}