/* "You're always in control." was a navy tile with white text. She asked for pale
   sage — so the INK has to flip too, or white text lands on a pale panel.
   The tile lives inside the HU Friends React island, whose Tailwind is built with
   `important:true` prefixed to #huFriendsRoot, so every rule here needs id weight
   plus `!important` to win. */
#page-community-hub .bg-\[\#654753\]{
  background-color:#EDF3E9 !important;
  background-image:none !important;
  border:1px solid #D7E3D2 !important;
}
/* headings and body: white → navy family, all measured on the sage */
#page-community-hub .bg-\[\#654753\],
#page-community-hub .bg-\[\#654753\] *{
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#page-community-hub .bg-\[\#654753\] p{
  color:#4A5462 !important; -webkit-text-fill-color:#4A5462 !important;
}
/* the "DEFAULT SHARING" label was white at 65% — as a quiet label it takes the
   same sage-ink treatment used elsewhere */
#page-community-hub .bg-\[\#654753\] .mb-2{
  color:#4E5A49 !important; -webkit-text-fill-color:#4E5A49 !important;
}
/* the sharing select was white-at-10%, which is invisible on a pale panel */
#page-community-hub .bg-\[\#654753\] select{
  background-color:#ffffff !important;
  border:1px solid #CFE0C8 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
/* Manage privacy: it was a white pill on navy, which now disappears — give it the
   sage primary treatment the rest of the site uses */
#page-community-hub .bg-\[\#654753\] button,
#page-community-hub .bg-\[\#654753\] a[role="button"]{
  background-color:#4E6640 !important;
  background-image:none !important;
  border:1px solid #4E6640 !important;
  color:#ffffff !important; -webkit-text-fill-color:#ffffff !important;
  /* it measured 22px — under the 44px tap target, and it is a real control */
  min-height:44px !important;
  padding:11px 18px !important;
  border-radius:999px !important;
}