.portal-button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem !important;
  border-radius: 999px;
  background: var(--ink);
  color: #fff !important;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(20, 62, 59, .16);
  transition: transform .2s ease, background .2s ease;
}

.portal-button:hover,
.portal-button:focus-visible {
  background: var(--aqua-deep);
  color: #fff !important;
  transform: translateY(-1px);
}

.mobile-panel .portal-button {
  min-height: 44px;
  justify-self: start;
  margin-top: .55rem;
  padding-inline: 1.15rem !important;
}

.header-portal {
  display: none;
  flex: 0 0 auto;
  margin-left: .25rem;
}

@media (min-width: 800px) {
  .header-portal { display: inline-flex; }
}

@media (min-width: 800px) and (max-width: 1059px) {
  .desktop-nav { display: none !important; }
  .menu-toggle { display: grid !important; }
  .mobile-panel { display: none !important; }
  .mobile-panel.open { display: grid !important; }
}

@media (prefers-color-scheme: dark) {
  .portal-button {
    background: var(--aqua);
    color: #10332f !important;
  }

  .portal-button:hover,
  .portal-button:focus-visible {
    background: #83edcf;
    color: #10332f !important;
  }
}