.jp-connect, .jp-connect * { box-sizing: border-box; }
.jp-connect {
  font: 16px/1.45 system-ui, sans-serif;
  color: #1c1917;
  background: #fff;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  padding: 1.25rem;
  max-width: 40rem;
}
.jp-connect h2 { font-size: 1.25rem; margin: 0 0 .5rem; }
.jp-connect p { margin: 0 0 .75rem; }
.jp-connect-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.jp-connect-actions a, .jp-connect-actions button {
  appearance: none;
  border: 1px solid #1c1917;
  background: #fff;
  color: #1c1917;
  border-radius: 999px;
  padding: .45rem .8rem;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}
.jp-connect-actions a:hover, .jp-connect-actions button:hover { background: #1c1917; color: #fff; }
.jp-connect [hidden] { display: none !important; }
.jp-connect-dev { margin-top: .5rem; }
@media (max-width: 640px) {
  .jp-connect { padding: 1rem; }
  .jp-connect-actions a, .jp-connect-actions button { flex: 1 1 calc(50% - .5rem); text-align: center; }
}