Polish paywall layout spacing and section structure.

Anchor the close button independently, rebalance vertical spacing, remove extra hero/benefits gaps, and add a trust row so the paywall uses space more intentionally and looks more professional.

Made-with: Cursor

classroom_app/ViewController.swift

@@ -2637,7 +2637,7 @@ private extension ViewController {
         let contentStack = NSStackView()
         contentStack.translatesAutoresizingMaskIntoConstraints = false
         contentStack.orientation = .vertical
-        contentStack.spacing = 10
+        contentStack.spacing = 12
         contentStack.distribution = .fill
         contentStack.alignment = .centerX
         panel.addSubview(contentStack)
@@ -2650,9 +2650,6 @@ private extension ViewController {
         topRow.distribution = .fill
         topRow.spacing = 10
         topRow.addArrangedSubview(textLabel("Classroom Pro", font: NSFont.systemFont(ofSize: 27, weight: .bold), color: palette.textPrimary))
-        let topSpacer = NSView()
-        topSpacer.translatesAutoresizingMaskIntoConstraints = false
-        topRow.addArrangedSubview(topSpacer)
         let closeButton = HoverButton(title: "✕", target: self, action: #selector(closePaywallClicked(_:)))
         closeButton.translatesAutoresizingMaskIntoConstraints = false
         closeButton.isBordered = false
@@ -2674,15 +2671,10 @@ private extension ViewController {
             closeButton.layer?.backgroundColor = (hovering ? hover : base).cgColor
             closeButton.contentTintColor = hovering ? (self.darkModeEnabled ? .white : self.palette.textPrimary) : self.palette.textSecondary
         }
-        topRow.addArrangedSubview(closeButton)
+        panel.addSubview(closeButton)
         contentStack.addArrangedSubview(topRow)
         topRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
-        let heroTopSpacer = NSView()
-        heroTopSpacer.translatesAutoresizingMaskIntoConstraints = false
-        heroTopSpacer.heightAnchor.constraint(equalToConstant: 18).isActive = true
-        contentStack.addArrangedSubview(heroTopSpacer)
-
         let hero = roundedContainer(cornerRadius: 16, color: palette.sectionCard)
         hero.translatesAutoresizingMaskIntoConstraints = false
         styleSurface(hero, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
@@ -2710,11 +2702,6 @@ private extension ViewController {
             heroSubtitle.bottomAnchor.constraint(equalTo: hero.bottomAnchor, constant: -16)
         ])
 
-        let benefitsTopSpacer = NSView()
-        benefitsTopSpacer.translatesAutoresizingMaskIntoConstraints = false
-        benefitsTopSpacer.heightAnchor.constraint(equalToConstant: 40).isActive = true
-        contentStack.addArrangedSubview(benefitsTopSpacer)
-
         let benefitsRow = NSStackView()
         benefitsRow.translatesAutoresizingMaskIntoConstraints = false
         benefitsRow.orientation = .horizontal
@@ -2728,11 +2715,6 @@ private extension ViewController {
         contentStack.addArrangedSubview(benefitsRow)
         benefitsRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
-        let midTopSpacer = NSView()
-        midTopSpacer.translatesAutoresizingMaskIntoConstraints = false
-        midTopSpacer.heightAnchor.constraint(equalToConstant: 6).isActive = true
-        contentStack.addArrangedSubview(midTopSpacer)
-
         let plansRow = NSStackView()
         plansRow.translatesAutoresizingMaskIntoConstraints = false
         plansRow.orientation = .horizontal
@@ -2784,10 +2766,17 @@ private extension ViewController {
         plansRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
         updatePaywallPlanSelection()
 
-        let midBottomSpacer = NSView()
-        midBottomSpacer.translatesAutoresizingMaskIntoConstraints = false
-        midBottomSpacer.heightAnchor.constraint(equalToConstant: 8).isActive = true
-        contentStack.addArrangedSubview(midBottomSpacer)
+        let trustRow = NSStackView()
+        trustRow.translatesAutoresizingMaskIntoConstraints = false
+        trustRow.orientation = .horizontal
+        trustRow.spacing = 8
+        trustRow.distribution = .fillEqually
+        trustRow.alignment = .centerY
+        trustRow.addArrangedSubview(paywallMetaItem(title: "Cancel anytime", subtitle: "No lock-in"))
+        trustRow.addArrangedSubview(paywallMetaItem(title: "Instant access", subtitle: "Unlock all tools"))
+        trustRow.addArrangedSubview(paywallMetaItem(title: "Secure billing", subtitle: "Handled by Apple"))
+        contentStack.addArrangedSubview(trustRow)
+        trustRow.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
         let offer = textLabel(paywallOfferText(for: selectedPremiumPlan), font: NSFont.systemFont(ofSize: 13, weight: .semibold), color: palette.textPrimary)
         offer.alignment = .center
@@ -2843,20 +2832,17 @@ private extension ViewController {
             secure.bottomAnchor.constraint(equalTo: secureWrap.bottomAnchor, constant: -4)
         ])
 
-        let footerTopSpacer = NSView()
-        footerTopSpacer.translatesAutoresizingMaskIntoConstraints = false
-        contentStack.addArrangedSubview(footerTopSpacer)
-        footerTopSpacer.heightAnchor.constraint(equalToConstant: 4).isActive = true
-
         let footer = paywallFooterLinks()
         contentStack.addArrangedSubview(footer)
         footer.widthAnchor.constraint(equalTo: contentStack.widthAnchor).isActive = true
 
         NSLayoutConstraint.activate([
+            closeButton.topAnchor.constraint(equalTo: panel.topAnchor, constant: 18),
+            closeButton.trailingAnchor.constraint(equalTo: panel.trailingAnchor, constant: -18),
             contentStack.centerXAnchor.constraint(equalTo: panel.centerXAnchor),
             contentStack.widthAnchor.constraint(equalToConstant: paywallLayoutWidth),
-            contentStack.topAnchor.constraint(equalTo: panel.topAnchor, constant: 52),
-            contentStack.bottomAnchor.constraint(equalTo: panel.bottomAnchor, constant: -10)
+            contentStack.topAnchor.constraint(equalTo: panel.topAnchor, constant: 80),
+            contentStack.bottomAnchor.constraint(equalTo: panel.bottomAnchor, constant: -12)
         ])
 
         refreshPaywallStoreUI()
@@ -3044,6 +3030,27 @@ private extension ViewController {
         return stack
     }
 
+    func paywallMetaItem(title: String, subtitle: String) -> NSView {
+        let card = roundedContainer(cornerRadius: 12, color: palette.inputBackground)
+        card.translatesAutoresizingMaskIntoConstraints = false
+        card.heightAnchor.constraint(equalToConstant: 48).isActive = true
+        styleSurface(card, borderColor: palette.inputBorder, borderWidth: 1, shadow: false)
+
+        let titleLabel = textLabel(title, font: NSFont.systemFont(ofSize: 11, weight: .semibold), color: palette.textPrimary)
+        let subtitleLabel = textLabel(subtitle, font: NSFont.systemFont(ofSize: 10, weight: .medium), color: palette.textSecondary)
+        card.addSubview(titleLabel)
+        card.addSubview(subtitleLabel)
+
+        NSLayoutConstraint.activate([
+            titleLabel.centerXAnchor.constraint(equalTo: card.centerXAnchor),
+            titleLabel.topAnchor.constraint(equalTo: card.topAnchor, constant: 8),
+            subtitleLabel.centerXAnchor.constraint(equalTo: card.centerXAnchor),
+            subtitleLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 3)
+        ])
+
+        return card
+    }
+
     func paywallBenefitItem(icon: String, text: String) -> NSView {
         let card = HoverTrackingView()
         card.translatesAutoresizingMaskIntoConstraints = false