.us-soft-banner {
  display: none;
  /* Baseline, not center: keeps the message text and the button labels
     sitting on the same text baseline instead of centered on their boxes
     (which differ in height once the buttons' padding is factored in). */
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.25rem;
  background: #f4f4f4;
  border-bottom: 1px solid #dcdcdc;
  font-size: 1.25rem; /* 1rem + 25% */
  text-align: center;
}

.us-soft-banner.us-soft-banner--visible {
  display: flex;
}

.us-soft-banner__message {
  margin: 0;
  /* No flex-grow: the message should only take the width its text needs,
     so the actions sit right next to it and the whole group is centered
     together - not stretched apart with the buttons pinned to the far
     edge. flex-shrink + min-width: 0 still let it shrink and wrap onto
     multiple lines to make room for the actions on the same row, rather
     than claiming its full single-line width and pushing them onto the
     next flex line (flex items default to min-width: auto, which
     otherwise blocks that shrinking). */
  flex: 0 1 auto;
  min-width: 0;
}

.us-soft-banner__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.us-soft-banner__button {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border-radius: 3px;
  border: 1px solid transparent;
  font-size: 1.171875rem; /* 0.9375rem + 25% */
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}

.us-soft-banner__button--primary {
  background: #111;
  color: #fff;
  text-decoration: none;
}

.us-soft-banner__button--primary:hover,
.us-soft-banner__button--primary:focus {
  background: #333;
  color: #fff;
}

.us-soft-banner__button--secondary {
  background: transparent;
  color: #333;
  border-color: #bbb;
}

.us-soft-banner__button--secondary:hover,
.us-soft-banner__button--secondary:focus {
  background: #e9e9e9;
}