.console-footer__trust {
  display: flex;
  height: 2rem;
  width: fit-content;
  align-items: center;
  gap: .5rem;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.console-footer__powered {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

.console-footer__separator {
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.console-footer__logo {
  display: block;
  height: auto;
  flex-shrink: 0;
  opacity: .9;
}

.console-footer__logo--google {
  width: 92px;
}

/* Both marks are horizontal lockups - Google Cloud at 123x20, Cloudflare at 156.6x21.8 - so they
   are sized to the same rendered height and the flex row centres them on one line. The stacked
   Cloudflare mark that used to sit here stood the cloud above its own wordmark, which read as a
   misalignment against the single-line Google lockup beside it. */
.console-footer__logo--cloudflare {
  width: 108px;
}

/* The strip is one nowrap row, so its marks set the narrowest width every footer must fit. At
   the sizes above it measures 309px, which clears its column at 360px and overflows it at 320.
   Both marks step down together here so the row keeps the height parity the rule above buys. */
@media (max-width: 380px) {
  .console-footer__logo--google {
    width: 78px;
  }

  .console-footer__logo--cloudflare {
    width: 92px;
  }
}

html[data-theme="dark"] .console-footer__logo {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .08));
}

html[data-theme="dark"] .console-footer__logo--google {
  content: url("/assets/brand-google-cloud-dark.svg");
}

html[data-theme="dark"] .console-footer__logo--cloudflare {
  content: url("/assets/brand-cloudflare-dark.svg?v=20260914-horizontal-lockup");
}