/* A fifth benefit in the shared top banner, using the site's theme colors. */
.utility-inner { gap:12px; }
.utility-inner>span { gap:8px; padding-right:14px; }
.utility-tolerate small { text-transform:none; }
@media(min-width:651px) and (max-width:1200px) {
  .utility-story { display:none; }
  .utility-inner { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding-inline:16px; }
  .utility-inner>span { min-width:0; padding-right:8px; gap:6px; }
  .utility .icon { width:22px; height:22px; }
  .utility strong { font-size:11px; letter-spacing:.3px; }
  .utility small { font-size:9px; letter-spacing:0; }
}
@media(max-width:650px) {
  .utility-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 12px; padding:6px 12px; }
  .utility-inner>span { justify-content:center; padding-right:0; gap:7px; }
  .utility .utility-inner>.utility-tolerate { display:flex; grid-column:1/-1; border:0; padding-top:4px; border-top:1px solid var(--line); }
  .utility-tolerate strong { font-size:12px; }
  .utility-tolerate small { font-size:10px; margin-top:1px; }
}

/* Center every message and its icon inside its own divided slot. */
.utility .utility-inner>span { justify-content:center; padding-inline:10px; }
.utility .utility-inner>span>span { text-align:center; }
.utility .utility-story { justify-content:center; text-align:center; padding-inline:12px; }
@media(min-width:1201px) {
  .utility .utility-inner { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr) minmax(0,1.45fr) auto; gap:0; }
  .utility .utility-inner>span { align-self:stretch; }
}