v1.7.0: piani Basic/Pro/Premium/Annual + quota giornaliera

Pricing model: subscription mensili (Basic 2.99 / Pro 5.99 / Premium 9.99)
piu' Annual 49.90 one-time. Feature gating per piano (Basic = solo audio,
Pro+ = tutto). Quota giornaliera (10/30/150) con reset mezzanotte Europe/Rome.

Server: tabella daily_usage, endpoint /api/usage/consume e /status,
webhook LS gestisce subscription_* events + mappatura variant_id -> plan
via .env (LS_VARIANT_BASIC|PRO|PREMIUM|ANNUAL).

Client: gating tab in sidebar in base ai features del piano, contatore
"X/Y oggi" + bottone Upgrade, modal blocco con CTA verso landing.

landing/css/style.css

@@ -555,6 +555,52 @@ a { color: inherit; text-decoration: none; }
   margin: 14px 0 0;
 }
 
+/* Grid 4 colonne per i piani */
+.price-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 32px;
+  align-items: stretch;
+}
+@media (max-width: 1100px) {
+  .price-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 640px) {
+  .price-grid { grid-template-columns: 1fr; }
+}
+
+.price-card-sm {
+  margin: 0;
+  max-width: none;
+  padding: 32px 22px 24px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+  border: 1px solid var(--border);
+}
+.price-card-sm .price-amount { font-size: 44px; }
+.price-card-sm .price-currency { font-size: 20px; }
+.price-card-sm .price-once { font-size: 13px; }
+.price-card-sm .price-features { margin-bottom: 22px; flex: 1; }
+.price-card-sm .price-features li { padding: 7px 0; font-size: 13.5px; }
+
+.price-card-featured {
+  border-color: var(--accent);
+  box-shadow: 0 18px 48px rgba(29, 185, 84, 0.18);
+}
+
+.price-badge-gold {
+  background: linear-gradient(135deg, #f8c44a, #f4a51c);
+  color: #0a0a0a;
+}
+
+.price-shared {
+  max-width: 720px;
+  margin: 0 auto;
+  text-align: center;
+}
+
 /* ============================================================
    FAQ
    ============================================================ */