:root {
  --jc-blue: #0D59CA;
  --jc-blue-light: #3D7AD5;
  --jc-sky: #56D2FB;
  --jc-white: #FFFFFF;
}
html :is(h1,h2,h3), html :is(.btn,.join,.city-btn) {
  font-family: "Montserrat", system-ui, sans-serif;
}
html :is(.btn,.join,.city-btn) { font-weight:700; }
html .btn,html[data-theme="dark"] .btn {
  color:var(--jc-white);
  background:linear-gradient(var(--jc-blue-light),var(--jc-blue));
  box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 0 #0003,0 1px 2px #0006,0 8px 24px -6px #0D59CA99;
  transition:transform .1s,box-shadow .1s,background .2s;
}
html .btn.btn-primary:hover { background:#2b72d9; }
html[data-theme="dark"] .btn.btn-primary:hover { background:#205fb5; }
html .btn:is(.btn-secondary,.btn-sky,.btn-ghost),
html[data-theme="dark"] .btn:is(.btn-secondary,.btn-sky,.btn-ghost),
html .nat .btn.btn-ghost {
  color:var(--jc-blue);
  background:var(--jc-white);
  /* Inset border preserves the existing button dimensions. */
  border-color:transparent;
  outline:1px solid var(--jc-sky);
  outline-offset:-1px;
  box-shadow:0 1px 2px #0D59CA1f,0 6px 18px -8px #56D2FB99;
}
html .btn:is(.btn-secondary,.btn-sky,.btn-ghost):hover,
html[data-theme="dark"] .btn:is(.btn-secondary,.btn-sky,.btn-ghost):hover,
html .nat .btn.btn-ghost:hover {
  color:var(--jc-blue);background:#f0fbff;
  outline-color:var(--jc-sky);
  box-shadow:0 1px 2px #0D59CA1f,0 6px 20px -6px #56D2FB99;
}
html :is(.join,.city-btn) {
  box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 0 #0003,0 1px 2px #0006,0 8px 24px -6px #0D59CA99;
  transition:transform .1s,box-shadow .1s,background .2s;
}
html :is(.btn,.join,.city-btn):active,
html[data-theme="dark"] :is(.btn,.join,.city-btn):active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px #0004;
}
html :is(.btn,.join,.city-btn):focus-visible,
html[data-theme="dark"] :is(.btn,.join,.city-btn):focus-visible {
  outline:3px solid var(--jc-sky);outline-offset:2px;
}
html :is(.btn,.join,.city-btn):is(:disabled,[aria-disabled="true"]),
html[data-theme="dark"] :is(.btn,.join,.city-btn):is(:disabled,[aria-disabled="true"]) {
  opacity:.55;transform:none;cursor:not-allowed;
  box-shadow:inset 0 1px 0 #ffffff59,inset 0 -2px 0 #0003;
}
@media(prefers-reduced-motion:reduce){html :is(.btn,.join,.city-btn){transition:none}}