/* COOBEH V62.23 — Brand Health typography/layout hotfix.
   Scoped only to #page-brand-health. Keeps the existing palette and module logic unchanged. */
#page-brand-health .bh-hero-v6221{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:14px;
  padding:8px 2px 22px;
}
#page-brand-health .bh-hero-v6221>div:first-child{
  width:100%;
  min-width:0;
}
#page-brand-health .bh-hero-v6221 h2{
  display:block;
  width:100%;
  max-width:100%;
  margin:7px 0 8px;
  font-size:clamp(31px,8.2vw,40px);
  line-height:1.22;
  letter-spacing:-.02em;
  word-break:normal;
  overflow-wrap:normal;
  white-space:normal;
  text-wrap:balance;
}
#page-brand-health .bh-hero-v6221 p{
  width:100%;
  max-width:38ch;
  font-size:12px;
  line-height:1.95;
  word-break:normal;
  overflow-wrap:break-word;
}
#page-brand-health .bh-hero-v6221>div:first-child>small{
  display:block;
  width:100%;
  max-width:100%;
  font:700 8px/1.7 Arial,sans-serif;
  letter-spacing:1.2px;
  word-break:normal;
  overflow-wrap:normal;
}
#page-brand-health .bh-sync-v6221{
  justify-self:start;
  align-self:start;
  max-width:100%;
  white-space:normal;
}
#page-brand-health .bh-sync-v6221 b{
  word-break:normal;
  overflow-wrap:normal;
}
/* The app shell is intentionally phone-width even on desktop, so viewport based
   media queries alone are not enough for this hero. Keep it single-column at all times. */
@media (max-width:390px){
  #page-brand-health .bh-hero-v6221 h2{font-size:30px;line-height:1.25}
  #page-brand-health .bh-hero-v6221 p{font-size:11.5px}
}