pro upgrade page layout — key entry always visible, tighter hero and features

@@ -5219,16 +5219,16 @@52195219   display: flex;52205220   flex-direction: column;52215221   align-items: stretch;5222-  gap: 14px;5223-  padding: 4px 4px 12px;5222+  gap: 10px;5223+  padding: 0 4px 8px;52245224 }52255225 52265226 .peach-pro-upgrade-hero {52275227   display: flex;52285228   flex-direction: column;52295229   align-items: center;5230-  gap: 6px;5231-  padding: 16px 0 8px;5230+  gap: 4px;5231+  padding: 10px 0 6px;52325232 }52335233 52345234 .peach-pro-upgrade-mark-wrap {@@ -5239,16 +5239,16 @@52395239 }52405240 52415241 .peach-pro-upgrade-mark {5242-  width: 48px;5243-  height: 48px;5242+  width: 38px;5243+  height: 38px;52445244   filter:5245-    drop-shadow(0 0 8px color-mix(in srgb, var(--peach-accent) 45%, transparent))5246-    drop-shadow(0 0 22px color-mix(in srgb, var(--peach-accent) 18%, transparent));5245+    drop-shadow(0 0 7px color-mix(in srgb, var(--peach-accent) 45%, transparent))5246+    drop-shadow(0 0 18px color-mix(in srgb, var(--peach-accent) 18%, transparent));52475247 }52485248 52495249 .peach-pro-upgrade-title {52505250   font-family: var(--font-display, var(--font-ui));5251-  font-size: 24px;5251+  font-size: 22px;52525252   margin: 0;52535253   color: var(--peach-t0);52545254   letter-spacing: 0.01em;@@ -5258,46 +5258,46 @@52585258   margin: 0;52595259   font-style: italic;52605260   color: var(--peach-t2);5261-  font-size: 12px;5261+  font-size: 11px;52625262 }52635263 52645264 .peach-pro-features {52655265   display: flex;52665266   flex-direction: column;5267-  gap: 10px;5267+  gap: 8px;52685268   border-top: 1px solid var(--peach-border);52695269   border-bottom: 1px solid var(--peach-border);5270-  padding: 14px 4px;5270+  padding: 10px 4px;52715271 }52725272 52735273 .peach-pro-feature {52745274   display: flex;5275-  gap: 10px;5276-  align-items: flex-start;5275+  gap: 9px;5276+  align-items: baseline;52775277 }52785278 52795279 .peach-pro-feature-mark {52805280   color: var(--peach-accent);5281-  font-size: 14px;5282-  line-height: 1.2;5281+  font-size: 11px;52835282   flex-shrink: 0;52845283   display: inline-block;52855284   transform-origin: center;5285+  opacity: 0.8;52865286 }52875287 52885288 .peach-pro-feature-text {52895289   display: flex;52905290   flex-direction: column;5291-  gap: 2px;5291+  gap: 1px;52925292 }52935293 52945294 .peach-pro-feature-name {5295-  font-size: 13px;5295+  font-size: 12px;52965296   color: var(--peach-t0);52975297 }52985298 52995299 .peach-pro-feature-desc {5300-  font-size: 11px;5300+  font-size: 10px;53015301   color: var(--peach-t2);53025302 }53035303 @@ -5310,35 +5310,65 @@53105310   100% { opacity: 0.7; transform: scale(1); }53115311 }53125312 5313+.peach-pro-upgrade-actions {5314+  display: flex;5315+  flex-direction: column;5316+  align-items: center;5317+  gap: 8px;5318+  padding-top: 2px;5319+}5320+53135321 .peach-pro-pricing {53145322   margin: 0;53155323   text-align: center;5316-  font-size: 12px;5324+  font-size: 11px;53175325   color: var(--peach-t2);53185326   letter-spacing: 0.04em;53195327 }53205328 53215329 .peach-pro-upgrade-cta {5322-  width: 100%;5330+  align-self: stretch;53235331   text-align: center;53245332   text-decoration: none;53255333   display: block;5326-  padding: 10px 20px;5334+  padding: 9px 20px;53275335   font-size: 13px;53285336   box-sizing: border-box;53295337 }53305338 5339+.peach-pro-key-divider {5340+  display: flex;5341+  align-items: center;5342+  gap: 8px;5343+  width: 100%;5344+  color: var(--peach-t3);5345+  font-size: 10px;5346+  letter-spacing: 0.08em;5347+}5348+5349+.peach-pro-key-divider::before,5350+.peach-pro-key-divider::after {5351+  content: "";5352+  flex: 1;5353+  height: 1px;5354+  background: var(--peach-border);5355+}5356+53315357 .peach-pro-key-link {53325358   background: transparent;5333-  border: 0;5334-  color: var(--peach-t2);5335-  font-size: 11px;5359+  border: 1px solid var(--peach-border);5360+  border-radius: 8px;5361+  color: var(--peach-t1);5362+  font-size: 12px;53365363   cursor: pointer;5337-  align-self: center;5338-  padding: 4px 8px;5364+  align-self: stretch;5365+  padding: 8px 12px;5366+  text-align: center;5367+  transition: border-color 0.2s, color 0.2s;53395368 }53405369 53415370 .peach-pro-key-link:hover {5371+  border-color: var(--peach-accent);53425372   color: var(--peach-accent);53435373 }53445374 

@@ -1446,20 +1446,21 @@14461446                     </For>14471447                   </div>14481448 1449-                  <p class="peach-pro-pricing">$39 · once · yours forever</p>1450-1451-                  <a1452-                    href="https://peachpasswords.com/#pricing"1453-                    target="_blank"1454-                    rel="noopener noreferrer"1455-                    class="peach-btn peach-btn--accent peach-pro-upgrade-cta"1456-                  >1457-                    Get Peach Pro1458-                  </a>1459-1460-                  <button class="peach-pro-key-link" onClick={() => setShowKeyEntry(true)}>1461-                    Already have a key? Enter it →1462-                  </button>1449+                  <div class="peach-pro-upgrade-actions">1450+                    <p class="peach-pro-pricing">$39 · once · yours forever</p>1451+                    <a1452+                      href="https://peachpasswords.com/#pricing"1453+                      target="_blank"1454+                      rel="noopener noreferrer"1455+                      class="peach-btn peach-btn--accent peach-pro-upgrade-cta"1456+                    >1457+                      Get Peach Pro1458+                    </a>1459+                    <div class="peach-pro-key-divider"><span>or</span></div>1460+                    <button class="peach-pro-key-link" onClick={() => setShowKeyEntry(true)}>1461+                      Activate a license key1462+                    </button>1463+                  </div>14631464                 </div>14641465               }14651466             >