/* ============================================================
   50 — STATUS STRIP
   Scope: .sups*   ·  a band, not a section: it closes the page
   before the footer's off-white, so it runs dark.
   ============================================================ */

.sups {
  background: var(--surface-dark);
  color: var(--text-invert-body);
}

.sups__inner {
  display: grid;
  gap: var(--s-4) var(--s-6);
  align-items: start;
  padding-block: var(--s-10);
  grid-template-columns: auto minmax(0, 1fr);
}

.sups__ico {
  width: var(--s-6);
  height: var(--s-6);
  color: var(--c-teal);
  /* Optical: aligns the pulse to the title's cap height, not its box. */
  margin-block-start: var(--s-1);
}

.sups__title {
  font-size: var(--fs-h4);
  color: var(--text-invert);
}

.sups__b {
  margin-block-start: var(--s-2);
  max-width: 64ch;
  font-size: var(--fs-sm);
  color: var(--text-invert-body);
}

.sups__link {
  grid-column: 2;
  color: var(--c-teal);
}
.sups__link:hover { color: var(--c-lime); }

@media (min-width: 60em) {
  .sups__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-8);
  }
  .sups__ico { margin-block-start: 0; }
  .sups__link { grid-column: 3; }
}