feat: Pro benefits promo on Account screen — Cormorant italic headline, mono tagline, three accent-icon benefit bullets (Sync, Passkeys, future features), accent CTA with glow, radial gradient backdrop, divider before activate-key flow (v2.2.2)

@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.2.1",4+  "version": "2.2.2",55   "description": "Zero-knowledge password manager",66   "browser_specific_settings": {77     "gecko": {

@@ -1,7 +1,7 @@11 {22   "manifest_version": 3,33   "name": "Peach",4-  "version": "2.2.1",4+  "version": "2.2.2",55   "description": "Zero-knowledge password manager",66   "action": {77     "default_popup": "src/popup/index.html",

@@ -1,6 +1,6 @@11 {22   "name": "peach",3-  "version": "2.2.1",3+  "version": "2.2.2",44   "description": "Zero-knowledge password manager",55   "type": "module",66   "scripts": {

@@ -3763,6 +3763,117 @@37633763   color: var(--peach-accent);37643764 }37653765 3766+/* ── Pro promo on Account screen ────────────────────────────── */3767+.peach-pro-promo {3768+  position: relative;3769+  border-radius: 14px;3770+  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3771+  background:3772+    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),3773+    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),3774+    var(--surface-card);3775+  overflow: hidden;3776+  margin-bottom: 14px;3777+}3778+.peach-pro-promo-glow {3779+  position: absolute;3780+  inset: -40% -20% auto auto;3781+  width: 220px; height: 220px;3782+  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);3783+  pointer-events: none;3784+  filter: blur(8px);3785+}3786+.peach-pro-promo-inner {3787+  position: relative;3788+  padding: 18px 18px 16px;3789+}3790+.peach-pro-promo-title {3791+  font-family: var(--font-display);3792+  font-style: italic;3793+  font-weight: 400;3794+  font-size: 28px;3795+  line-height: 1;3796+  letter-spacing: -0.005em;3797+  color: var(--peach-t0);3798+  margin: 0 0 4px;3799+}3800+.peach-pro-promo-tagline {3801+  font-family: var(--font-mono);3802+  font-size: 10px;3803+  letter-spacing: 0.06em;3804+  color: var(--peach-t2);3805+  margin: 0 0 14px;3806+}3807+.peach-pro-promo-list {3808+  list-style: none;3809+  margin: 0 0 16px;3810+  padding: 0;3811+  display: grid;3812+  gap: 9px;3813+}3814+.peach-pro-promo-list li {3815+  display: flex;3816+  align-items: flex-start;3817+  gap: 9px;3818+  font-size: 12px;3819+  color: var(--peach-t1);3820+  line-height: 1.4;3821+}3822+.peach-pro-promo-list svg {3823+  width: 14px;3824+  height: 14px;3825+  flex-shrink: 0;3826+  color: var(--peach-accent);3827+  margin-top: 2px;3828+}3829+.peach-pro-promo-list span {3830+  color: var(--peach-t0);3831+}3832+.peach-pro-promo-cta {3833+  width: 100%;3834+  background: var(--peach-accent);3835+  color: #fff;3836+  border: none;3837+  padding: 9px 12px;3838+  border-radius: 9px;3839+  font-size: 12px;3840+  font-weight: 500;3841+  font-family: var(--font-ui);3842+  letter-spacing: 0.02em;3843+  text-decoration: none;3844+  display: inline-flex;3845+  align-items: center;3846+  justify-content: center;3847+  cursor: pointer;3848+  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;3849+  box-shadow: 0 2px 16px var(--peach-glow);3850+}3851+.peach-pro-promo-cta:hover {3852+  filter: brightness(1.07);3853+  box-shadow: 0 4px 24px var(--peach-glow);3854+  transform: translateY(-1px);3855+}3856+.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }3857+3858+.peach-pro-or-divider {3859+  display: flex;3860+  align-items: center;3861+  gap: 10px;3862+  margin: 4px 0 12px;3863+  font-family: var(--font-mono);3864+  font-size: 10px;3865+  letter-spacing: 0.06em;3866+  color: var(--peach-t2);3867+  text-transform: uppercase;3868+}3869+.peach-pro-or-divider::before,3870+.peach-pro-or-divider::after {3871+  content: "";3872+  flex: 1;3873+  height: 1px;3874+  background: var(--peach-t3);3875+}3876+37663877 .peach-loading {37673878   position: absolute;37683879   inset: 0;

@@ -1079,6 +1079,48 @@10791079             when={licenseInfo()?.valid && licenseInfo()?.plan === "pro"}10801080             fallback={10811081               <>1082+                <div class="peach-pro-promo">1083+                  <div class="peach-pro-promo-glow" aria-hidden="true"></div>1084+                  <div class="peach-pro-promo-inner">1085+                    <h3 class="peach-pro-promo-title">Peach Pro</h3>1086+                    <p class="peach-pro-promo-tagline">One-time purchase. Yours forever.</p>1087+                    <ul class="peach-pro-promo-list">1088+                      <li>1089+                        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">1090+                          <path d="M3 8a5 5 0 0 1 9-3" />1091+                          <path d="M13 8a5 5 0 0 1-9 3" />1092+                          <path d="M12 2v3h-3" />1093+                          <path d="M4 14v-3h3" />1094+                        </svg>1095+                        <span>Sync across every device, end-to-end encrypted</span>1096+                      </li>1097+                      <li>1098+                        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">1099+                          <circle cx="6" cy="9" r="3" />1100+                          <path d="M9 9h5" />1101+                          <path d="M12 9v2.5" />1102+                          <path d="M14 9v2" />1103+                        </svg>1104+                        <span>Create and store passkeys directly in Peach</span>1105+                      </li>1106+                      <li>1107+                        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">1108+                          <path d="M8 2.5l1.6 3.4 3.7.4-2.8 2.5.8 3.7L8 10.7l-3.3 1.8.8-3.7L2.7 6.3l3.7-.4z" />1109+                        </svg>1110+                        <span>Every future Pro feature, no extra cost</span>1111+                      </li>1112+                    </ul>1113+                    <a1114+                      href="https://peachpasswords.com/#pricing"1115+                      target="_blank"1116+                      rel="noopener noreferrer"1117+                      class="peach-btn peach-pro-promo-cta"1118+                    >1119+                      Upgrade to Pro →1120+                    </a>1121+                  </div>1122+                </div>1123+                <p class="peach-pro-or-divider"><span>or activate a key</span></p>10821124                 <div class="peach-settings-row" style="flex-direction:column;align-items:stretch;gap:8px">10831125                   <input10841126                     class="peach-underline-input"@@ -1106,17 +1148,6 @@11061148                     <span class="peach-settings-value" style="color:#5e5">{licenseSuccess()}</span>11071149                   </div>11081150                 </Show>1109-                <div class="peach-settings-row peach-settings-row--meta">1110-                  <a1111-                    href="https://peachpasswords.com/#pricing"1112-                    target="_blank"1113-                    rel="noopener noreferrer"1114-                    class="peach-link"1115-                    style="color:var(--peach-accent)"1116-                  >1117-                    Purchase →1118-                  </a>1119-                </div>11201151               </>11211152             }11221153           >