[Jetpack App Migration] Design Updates to App Banners (#67607)

Previous feedback indicated that the banners didn't match the designs exactly, so these changes make some necessary tweaks to various styles, such as padding, font sizes, etc.

client/blocks/app-banner/style.scss

@@ -35,6 +35,7 @@ body.app-banner-is-visible {
 		color: var(--color-neutral-100);
 		padding: 30px 24px;
 		text-align: center;
+		font-family: "SF Pro Text", $sans;
 	}
 }
 
@@ -80,7 +81,7 @@ body.app-banner-is-visible {
 
 	&.jetpack {
 		letter-spacing: -0.4px;
-		margin: 30px auto 0;
+		margin: 36px auto 0;
 	}
 }
 
@@ -91,10 +92,14 @@ body.app-banner-is-visible {
 
 	&.jetpack {
 		font-size: rem(28px); //typography-exception
-		font-weight: bold;
+		font-weight: 500;
 		max-width: 18em;
 		margin-left: auto;
 		margin-right: auto;
+		-webkit-font-smoothing: auto;
+		-moz-osx-font-smoothing: initial;
+		text-rendering: auto;
+		@extend .wp-brand-font;
 	}
 }
 
@@ -108,12 +113,13 @@ body.app-banner-is-visible {
 		max-width: 18em;
 		margin-left: auto;
 		margin-right: auto;
+		margin-top: 18px;
 	}
 }
 
 .app-banner__buttons {
 	width: 100%;
-	margin-top: 20px;
+	margin-top: 36px;
 }
 
 .button.app-banner__open-button {
@@ -124,6 +130,7 @@ body.app-banner-is-visible {
 
 	&.jetpack {
 		background-color: var(--color-jetpack);
+		margin-bottom: 12px;
 	}
 }
 
@@ -139,7 +146,10 @@ body.app-banner-is-visible {
 
 .button.jetpack {
 	width: 100%;
+	min-width: 110px;
 	max-width: 366px;
 	margin: auto;
 	display: block;
+	padding: 15px 18px;
+	font-size: rem(18px); //typography-exception;
 }