:root {
  --navy: #14355C;
  --navy2: #14355C;
  --pink: #D6156E;
  --blue: #227CB5;
  --ink: #22262E;
  --bg: #EAF2F9;
  --green: #1B7A2E;
}

.topbar {
  border-bottom: 3px solid #D6156E;
}

.brand {
  min-width: 360px;
  gap: 16px;
}

.brand img {
  display: block;
  width: 285px;
  max-width: 42vw;
  height: 66px;
  object-fit: contain;
  object-position: left center;
}

.portal-name {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .38);
  color: #EAF2F9;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.btn:focus-visible,
.topbar a:focus-visible,
.link:focus-visible {
  outline: 3px solid #EAF2F9;
  outline-offset: 3px;
}

.success-icon {
  background: rgba(27, 122, 46, .12);
}

@media (max-width: 1050px) {
  .brand { min-width: 260px; }
  .brand img { width: 225px; }
  .portal-name { display: none; }
}

@media (max-width: 600px) {
  .brand { min-width: 0; }
  .brand img {
    width: 205px;
    max-width: 70vw;
    height: 55px;
  }
}