.site-banner {
  width: 100%;
  font-size: .9375rem;
  line-height: 1.4;
}
.site-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1rem;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: .75rem;
}
.site-banner__text { margin: 0; }
.site-banner--accent {
  background: var(--accent);
  color: var(--on-accent);
}
.site-banner--subtle {
  background: var(--base-raised);
  color: var(--paper);
  border-left: 3px solid var(--accent-bright);
}
.site-banner--dark {
  background: var(--base);
  color: var(--paper);
}
.site-banner__cta {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  transition: opacity .2s ease;
}
.site-banner__cta:hover { opacity: .8; }