/* People Hub: brand v2 */
body { background: var(--jj2-cream); }
.hero { background: var(--jj2-cream) !important; color: var(--jj2-forest) !important; padding: 96px 0 64px !important; border-bottom: 1px solid var(--jj2-sage); text-align: left; }
.hero .container { width: min(var(--jj2-container), calc(100% - 80px)); }
.hero h1 { margin-top: 16px !important; color: var(--jj2-green) !important; font-size: var(--jj2-h1) !important; line-height: 1 !important; }
.hero p { max-width: 620px; color: var(--jj2-muted) !important; font-size: var(--jj2-lead) !important; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ph-cta svg { width: 20px; height: 20px; }
.chooser, .finder { background: var(--jj2-cream) !important; }
.chooser .container { width: min(var(--jj2-container), calc(100% - 80px)); }
.chooser h2 { margin-top: 8px; color: var(--jj2-green); font-size: var(--jj2-h2); }
.finder-lede { color: var(--jj2-muted) !important; }
.situation-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 24px !important; }
.situation { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 14px !important; min-height: 0; padding: 24px !important; border: 0 !important; border-radius: var(--jj2-r-lg) !important; background: var(--jj2-card) !important; color: var(--jj2-forest) !important; text-align: left; }
.situation:hover { background: #E5DDCB !important; }
.situation.is-active { background: var(--jj2-card) !important; box-shadow: inset 0 0 0 2px var(--jj2-green); }
.situation[data-situation="serious"] { grid-column: 1 / -1; flex-direction: row; align-items: center !important; box-shadow: inset 4px 0 0 var(--jj2-rust); }
.situation-icon, .recommendation-icon, .path-icon { display: inline-grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: var(--jj2-r-md) !important; background: var(--jj2-green) !important; color: var(--jj2-cream) !important; font: inherit !important; }
.situation-icon svg, .recommendation-icon svg, .path-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.situation strong { color: var(--jj2-green) !important; font-size: var(--jj2-h3) !important; }
.situation small { color: var(--jj2-muted) !important; font-size: 15px !important; }
.recommendation-panel { border: 0 !important; border-radius: var(--jj2-r-lg) !important; background: var(--jj2-card) !important; box-shadow: inset 4px 0 0 var(--jj2-green) !important; }
.recommendation-panel.is-guardrail { box-shadow: inset 4px 0 0 var(--jj2-rust) !important; }
.recommendation-label, .role-label { color: var(--jj2-green) !important; }
.recommendation-panel strong { color: var(--jj2-green) !important; }
.recommendation-panel p { color: var(--jj2-muted) !important; }
.recommendation-panel a, .recommendation-panel button { border-radius: var(--jj2-r-md) !important; font-family: var(--jj2-font-body) !important; text-transform: none !important; }
.recommendation-panel a:first-of-type, .recommendation-actions a:first-child { background: var(--jj2-green) !important; border-color: var(--jj2-green) !important; color: var(--jj2-cream) !important; }
.recommendation-panel a + a, .recommendation-panel button { background: transparent !important; border-color: var(--jj2-green) !important; color: var(--jj2-green) !important; }
.role-browser { border-top-color: var(--jj2-sage) !important; }
.role-browser h3 { color: var(--jj2-green) !important; }
.path { border: 0 !important; border-radius: var(--jj2-r-lg) !important; background: var(--jj2-card) !important; }
.path.is-active { box-shadow: inset 0 0 0 2px var(--jj2-green); }
.path strong { color: var(--jj2-green) !important; }
.path small { color: var(--jj2-muted) !important; }
.path-arrow { color: var(--jj2-green) !important; }
.path-arrow svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .situation-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) {
  .hero { padding: 56px 0 48px !important; }
  .hero .container, .chooser .container { width: calc(100% - 40px); }
  .situation-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .situation { flex-direction: row; align-items: center !important; padding: 16px !important; }
  .situation strong { font-size: 20px !important; }
  .ph-cta .jj-btn { flex: 1 1 100%; }
}