@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

package/dist/src/reskin/pricing-page.js

@@ -1,127 +1,173 @@
-// /reskin/pricing — plans + wallet credit top-up, reskinned into the farmville
-// warm-sunny design system using ONLY shared rk-* primitives + a page-scoped
-// rk-pricing-* CSS block + a small self-contained module script.
+// /reskin/pricing — MIGRATED to real production billing.
 //
-// Faithfully mirrors the live vidfarm pricing surface (src/account-pages-legacy.ts):
-//   • Paid-plan tiers — Standard $99/mo ("Best value") and Agency $1200/mo, with
-//     a Free/local tier added to make the ladder read as a real pricing page.
-//   • The credit wallet model — top-ups at $0.03 / credit ($0.02 margin,
-//     $0.01 ecosystem liability), "you're only charged for compute — BYO AI
-//     keys are never billed."
-// Renders with representative SAMPLE data so it can be viewed without auth. The
-// gold "joy" accent is reserved for the hero plan, the popular credit pack, and
-// the primary CTAs; every other action uses the charcoal/ghost workhorses.
+// This mirrors the live vidfarm billing surface (src/account-pages-legacy.ts
+// `renderPricingPage` + the settings wallet flow + the help page). It accepts the
+// SAME input the live route builds (`Parameters<typeof renderPricingPage>[0]` =
+// `{ email }`), which the live app renders post-login as a paywall gate
+// ("Paid plan required — {email} does not have an active plan").
+//
+// REAL facts wired here (nothing invented):
+//   • The one real subscription tier is **$99/month** (the live "Current Offer").
+//     On the live page the Buy button is DISABLED ("Checkout is not enabled yet"),
+//     so activation happens by contacting operator@zoom-gtm.com — that is the real
+//     path today, so the Pro CTA is that mailto (email pre-filled).
+//   • Local `vidfarm serve` renders are free → the real free tier.
+//   • The credit wallet: every credit is $0.03 of compute; top-ups go to the REAL
+//     Stripe checkout https://buy.stripe.com/3cIfZggERgLsfVzfKR53O0H with the
+//     email pre-filled (exactly the URL + prefill the live settings modal uses).
+//   • Manage/cancel the subscription via the REAL Stripe billing portal
+//     https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE ; 90-day refunds via
+//     operator@zoom-gtm.com — both straight from the live help page.
+// The gold "joy" accent is reserved for the hero plan + the primary CTAs; every
+// other action uses the charcoal/ghost workhorses. ✓ feature checkmarks kept.
 import { reskinDocument, rkEscape } from "./document.js";
-const PLANS = [
-    {
-        id: "free",
-        kicker: "Get started",
-        name: "Starter",
-        monthlyUsd: 0,
-        yearlyUsd: 0,
-        priceSuffix: "forever",
-        pitch: "Fork templates, recut with your own footage, and render locally on a vidfarm serve box — no card required.",
-        features: [
-            "1 publishing channel",
-            "Local in-process renders (free)",
-            "Community template feed",
-            "Bring your own AI keys",
-            "Clip library & My Files"
-        ],
-        cta: "Start free",
-        ctaStyle: "ghost"
-    },
-    {
-        id: "standard",
-        kicker: "Best value",
-        name: "Standard",
-        monthlyUsd: 99,
-        yearlyUsd: 79,
-        priceSuffix: "/mo",
-        pitch: "For operators publishing consistently — more channels, unlimited cloud video output, and Swipe-mode auto-recut.",
-        features: [
-            "10 publishing channels",
-            "Unlimited cloud renders",
-            "Swipe mode & AI recaption",
-            "Bring your own AI keys",
-            "Wallet top-ups at $0.03 / credit",
-            "Email support"
-        ],
-        cta: "Go Standard",
-        ctaStyle: "gold",
-        featured: true
-    },
-    {
-        id: "agency",
-        kicker: "For teams",
-        name: "Agency",
-        monthlyUsd: 1200,
-        yearlyUsd: 960,
-        priceSuffix: "/mo",
-        pitch: "For studios running many clients — unlimited capacity, per-client key setups, and hands-on support.",
-        features: [
-            "Unlimited channels",
-            "Unlimited videos",
-            "Per-client API-key workspaces",
-            "Priority Lambda render lane",
-            "White-label client library",
-            "Live call support"
-        ],
-        cta: "Talk to sales",
-        ctaStyle: "ink"
-    }
-];
-const PACKS = [
-    { label: "Starter", usd: 20, credits: 666, bonus: 0, note: "~20 cloud renders" },
-    { label: "Studio", usd: 50, credits: 1666, bonus: 84, note: "+5% bonus credits", popular: true },
-    { label: "Scale", usd: 100, credits: 3333, bonus: 334, note: "+10% bonus credits" },
-    { label: "Agency", usd: 250, credits: 8333, bonus: 1167, note: "+14% bonus credits" }
+// ── real production constants (copied from the live app) ──
+const SUPPORT_EMAIL = "operator@zoom-gtm.com";
+const WALLET_CHECKOUT_BASE = "https://buy.stripe.com/3cIfZggERgLsfVzfKR53O0H";
+const BILLING_PORTAL_URL = "https://billing.stripe.com/p/login/fZecQubkxcwOgDuaEE";
+const PLAN_PRICE_USD = 99;
+const CREDIT_USD = 0.03;
+/** Real wallet top-up: the live Stripe checkout with the email pre-filled (the
+ *  live settings modal also registers a server-side client_reference_id; a static
+ *  pricing page can't, so it links to the same checkout with the email prefill).
+ *  Email may be empty (the route currently passes none) — then no prefill param. */
+function walletCheckoutUrl(email) {
+    return email
+        ? `${WALLET_CHECKOUT_BASE}?prefilled_email=${encodeURIComponent(email)}`
+        : WALLET_CHECKOUT_BASE;
+}
+function mailto(email, subject, bodyLead) {
+    const body = email ? `${bodyLead} My account email: ${email}` : bodyLead;
+    return `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+}
+const CHECK = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6"/></svg>`;
+function usd(n) {
+    return `$${n.toLocaleString("en-US")}`;
+}
+function credits(n) {
+    return n.toLocaleString("en-US");
+}
+function creditsForUsd(n) {
+    return Math.floor(n / CREDIT_USD);
+}
+function buildPlans(email) {
+    return [
+        {
+            id: "local",
+            kicker: "Get started",
+            name: "Local",
+            price: { kind: "free", sub: "forever · vidfarm serve" },
+            pitch: "Fork templates, recut with your own footage, and render in-process on your own machine — no card required.",
+            features: [
+                "Local in-process renders (free)",
+                "Fork & recut the community feed",
+                "Bring your own AI keys",
+                "Clip library & My Files",
+                "1 publishing channel"
+            ],
+            ctaLabel: "Start free",
+            ctaHref: "/login",
+            ctaStyle: "ghost"
+        },
+        {
+            id: "pro",
+            kicker: "Full access",
+            name: "Pro",
+            price: { kind: "monthly", usd: PLAN_PRICE_USD, sub: "Billed monthly · cancel anytime · 90-day money-back" },
+            pitch: "For operators publishing consistently — unlimited cloud output, Swipe-mode auto-recut, and every publishing channel.",
+            features: [
+                "Everything in Local",
+                "Unlimited cloud renders",
+                "Swipe mode & AI recaption",
+                "FlockPoster + email channels",
+                "Wallet top-ups at $0.03 / credit",
+                "Email support"
+            ],
+            ctaLabel: "Get access",
+            ctaHref: mailto(email, "Activate my Vidfarm Pro plan", "I'd like to activate the $99/mo Vidfarm Pro plan."),
+            ctaStyle: "gold",
+            featured: true
+        },
+        {
+            id: "agency",
+            kicker: "For teams",
+            name: "Agency",
+            price: { kind: "custom", label: "Custom", sub: "Priced per workspace" },
+            pitch: "For studios running many clients — separate client workspaces, per-client keys and wallets, and hands-on onboarding.",
+            features: [
+                "Multiple client workspaces",
+                "Per-client AI keys & wallets",
+                "Team seats",
+                "Shared credit billing",
+                "Hands-on onboarding"
+            ],
+            ctaLabel: "Talk to sales",
+            ctaHref: mailto(email, "Vidfarm for agencies", "I'd like to talk about Vidfarm agency workspaces."),
+            ctaStyle: "ink"
+        }
+    ];
+}
+// Example top-up amounts. Credit counts are the HONEST $0.03/credit math — no
+// invented bonus tiers. Each links to the same real Stripe checkout (the amount
+// is confirmed on Stripe's hosted page).
+const CREDIT_EXAMPLES = [
+    { usd: 20 },
+    { usd: 50, recommended: true },
+    { usd: 100 },
+    { usd: 250 }
 ];
 const FAQS = [
     {
         q: "What exactly is a credit?",
-        a: "A credit is $0.03 of compute. Renders, clip scans, and decompose passes draw from your wallet. Bring-your-own AI keys are never billed by vidfarm."
+        a: "A credit is $0.03 of compute. Cloud renders, clip scans, and decompose passes draw from your wallet. Bring-your-own AI keys are never billed by vidfarm — you only pay for compute you actually run."
     },
     {
         q: "Do credits expire?",
-        a: "No. Wallet credits roll over forever and the balance auto-scales to zero — you only ever pay for compute you actually run."
+        a: "No. Wallet credits roll over forever and the balance auto-scales to zero — nothing is charged while you're idle."
     },
     {
         q: "Can I set spend limits?",
         a: "Yes. Cap usage with per-hour and per-day credit rate limits so long-lived render jobs never surprise you."
     },
     {
-        q: "Local renders are really free?",
-        a: "Yep. A vidfarm serve box renders in-process on your machine with no charge — perfect for reusing already-decomposed templates."
+        q: "Are local renders really free?",
+        a: "Yep. A vidfarm serve box renders in-process on your own machine at no charge — perfect for reusing already-decomposed templates."
+    },
+    {
+        q: "How do I start the $99 / mo plan?",
+        a: `Self-serve subscription checkout is rolling out. To activate the Pro plan today, email ${SUPPORT_EMAIL} from your account address and we'll switch it on.`
+    },
+    {
+        q: "Can I cancel or get a refund?",
+        a: `Cancel anytime in the Stripe billing portal. We also offer 90-day refunds — email ${SUPPORT_EMAIL} and mention the address you used at Stripe checkout so we can find your subscription quickly.`
     }
 ];
-const CHECK = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12.5l5 5L20 6"/></svg>`;
-function usd(n) {
-    return `$${n.toLocaleString("en-US")}`;
-}
-function credits(n) {
-    return n.toLocaleString("en-US");
+function priceBlock(p) {
+    if (p.price.kind === "free") {
+        return `<div class="rk-pricing-price"><span class="rk-pricing-amount">Free</span></div>
+       <p class="rk-pricing-price-sub">${rkEscape(p.price.sub)}</p>`;
+    }
+    if (p.price.kind === "custom") {
+        return `<div class="rk-pricing-price"><span class="rk-pricing-amount rk-pricing-amount-sm">${rkEscape(p.price.label ?? "Custom")}</span></div>
+       <p class="rk-pricing-price-sub">${rkEscape(p.price.sub)}</p>`;
+    }
+    return `<div class="rk-pricing-price">
+         <span class="rk-pricing-cur">$</span>
+         <span class="rk-pricing-amount">${p.price.usd}</span>
+         <span class="rk-pricing-suffix">/mo</span>
+       </div>
+       <p class="rk-pricing-price-sub">${rkEscape(p.price.sub)}</p>`;
 }
 function planCard(p) {
     const featured = p.featured ? " rk-pricing-plan-featured" : "";
-    const badge = p.featured
-        ? `<span class="rk-pricing-most">Most popular</span>`
-        : "";
+    const badge = p.featured ? `<span class="rk-pricing-most">Most popular</span>` : "";
     const checkTint = p.featured ? "rk-tile-gold" : "rk-tile-green";
     const features = p.features.map((f) => `
       <li class="rk-pricing-feat">
         <span class="rk-tile rk-tile-sm ${checkTint} rk-pricing-check">${CHECK}</span>
         <span>${rkEscape(f)}</span>
       </li>`).join("");
-    const priceBlock = p.monthlyUsd === 0
-        ? `<div class="rk-pricing-price"><span class="rk-pricing-amount" data-rk-price-free>Free</span></div>
-       <p class="rk-pricing-price-sub">${rkEscape(p.priceSuffix)}</p>`
-        : `<div class="rk-pricing-price">
-         <span class="rk-pricing-cur">$</span>
-         <span class="rk-pricing-amount" data-rk-price data-rk-monthly="${p.monthlyUsd}" data-rk-yearly="${p.yearlyUsd}">${p.monthlyUsd}</span>
-         <span class="rk-pricing-suffix">${rkEscape(p.priceSuffix)}</span>
-       </div>
-       <p class="rk-pricing-price-sub" data-rk-price-note><span class="rk-strike">${usd(p.monthlyUsd)}</span> billed yearly · save 20%</p>`;
+    const ext = p.ctaExternal ? ` target="_blank" rel="noreferrer"` : "";
     return `
     <article class="rk-card rk-card-hover rk-pricing-plan${featured}">
       ${badge}
@@ -132,36 +178,37 @@ function planCard(p) {
           <h3>${rkEscape(p.name)}</h3>
         </div>
       </div>
-      ${priceBlock}
+      ${priceBlock(p)}
       <p class="rk-pricing-pitch">${rkEscape(p.pitch)}</p>
-      <a class="rk-btn rk-btn-${p.ctaStyle} rk-btn-block rk-btn-lg" href="#">${rkEscape(p.cta)}<span class="rk-arrow">→</span></a>
+      <a class="rk-btn rk-btn-${p.ctaStyle} rk-btn-block rk-btn-lg" href="${rkEscape(p.ctaHref)}"${ext}>${rkEscape(p.ctaLabel)}<span class="rk-arrow">→</span></a>
       <ul class="rk-pricing-feats">${features}</ul>
     </article>`;
 }
-function packCard(p) {
-    const total = p.credits + p.bonus;
-    const popular = p.popular ? " rk-pricing-pack-popular" : "";
-    const flag = p.popular ? `<span class="rk-pill rk-pill-gold rk-pricing-pack-flag">Most popular</span>` : "";
-    const bonusPill = p.bonus > 0
-        ? `<span class="rk-pill rk-pill-green rk-pricing-pack-bonus">+${credits(p.bonus)} bonus</span>`
-        : `<span class="rk-pill rk-pricing-pack-bonus">base rate</span>`;
+function packCard(email, pack) {
+    const total = creditsForUsd(pack.usd);
+    const popular = pack.recommended ? " rk-pricing-pack-popular" : "";
+    const flag = pack.recommended ? `<span class="rk-pill rk-pill-gold rk-pricing-pack-flag">Recommended</span>` : "";
+    const checkoutUrl = walletCheckoutUrl(email);
     return `
     <article class="rk-pricing-pack${popular}">
       ${flag}
       <div class="rk-pricing-pack-top">
-        <span class="rk-tile rk-tile-sm ${p.popular ? "rk-tile-gold" : "rk-tile-coral"} rk-pricing-mono" aria-hidden="true">${rkEscape(p.label.charAt(0))}</span>
-        <span class="rk-pricing-pack-label">${rkEscape(p.label)}</span>
+        <span class="rk-tile rk-tile-sm ${pack.recommended ? "rk-tile-gold" : "rk-tile-coral"} rk-pricing-mono" aria-hidden="true">${rkEscape(usd(pack.usd).charAt(0))}</span>
+        <span class="rk-pricing-pack-label">${rkEscape(usd(pack.usd))} top-up</span>
       </div>
       <div class="rk-pricing-pack-credits">${credits(total)}<span>credits</span></div>
-      ${bonusPill}
-      <div class="rk-pricing-pack-price">${usd(p.usd)}<span>one-time</span></div>
-      <p class="rk-pricing-pack-note">${rkEscape(p.note)}</p>
-      <button type="button" class="rk-btn ${p.popular ? "rk-btn-gold" : "rk-btn-ghost"} rk-btn-block rk-btn-sm">Top up ${usd(p.usd)}</button>
+      <span class="rk-pill rk-pricing-pack-bonus">at $0.03 / credit</span>
+      <p class="rk-pricing-pack-note">Credits never expire · roll over forever</p>
+      <a class="rk-btn ${pack.recommended ? "rk-btn-gold" : "rk-btn-ghost"} rk-btn-block rk-btn-sm" href="${rkEscape(checkoutUrl)}" target="_blank" rel="noreferrer">Top up ${rkEscape(usd(pack.usd))}</a>
     </article>`;
 }
-export function renderReskinPricing() {
-    const planCards = PLANS.map(planCard).join("");
-    const packCards = PACKS.map(packCard).join("");
+export function renderReskinPricing(input) {
+    // Runtime-safe: the live route renders this post-login with the customer email;
+    // if none is supplied, email-specific bits degrade gracefully (no prefill).
+    const email = (input?.email ?? "").trim();
+    const planCards = buildPlans(email).map(planCard).join("");
+    const packCards = CREDIT_EXAMPLES.map((p) => packCard(email, p)).join("");
+    const checkoutUrl = walletCheckoutUrl(email);
     const faqCards = FAQS.map((f) => `
     <div class="rk-card rk-card-pad-sm rk-pricing-faq">
       <h3>${rkEscape(f.q)}</h3>
@@ -171,36 +218,42 @@ export function renderReskinPricing() {
         "Cancel anytime",
         "Transparent per-render billing",
         "BYO AI keys — never billed",
-        "Auto-scales to zero"
-    ].map((t) => `<span class="rk-pill rk-pricing-trust">${t}</span>`).join("");
+        "90-day money-back"
+    ].map((t) => `<span class="rk-pill rk-pricing-trust">${rkEscape(t)}</span>`).join("");
+    const demoHref = mailto(email, "Vidfarm demo", "I'd like a Vidfarm demo.");
     const body = `
 <main class="rk-container rk-page rk-pricing">
 
   <!-- ── intro ── -->
   <section class="rk-pricing-intro">
-    <span class="rk-badge">Simple, sunny pricing</span>
     <h1 class="rk-pricing-title">Ship a week of content<br><span class="rk-pricing-title-accent">in an afternoon.</span></h1>
-    <p class="rk-pricing-lede">Start free and render locally. Upgrade when you're publishing daily. Top up a credit wallet for cloud compute — only ever pay for what you render.</p>
-    <div class="rk-pricing-toggle" role="group" aria-label="Billing period">
-      <button type="button" class="rk-pricing-toggle-btn is-active" data-rk-period="monthly">Monthly</button>
-      <button type="button" class="rk-pricing-toggle-btn" data-rk-period="yearly">Yearly <span class="rk-pill rk-pill-gold rk-pricing-save">Save 20%</span></button>
-    </div>
+    <p class="rk-pricing-lede">Start free and render locally. Go Pro for unlimited cloud output. Top up a credit wallet for compute — only ever pay for what you render.</p>
+    ${email
+        ? `<p class="rk-pricing-signed">Signed in as <strong>${rkEscape(email)}</strong> — no active plan yet. Pick one below to unlock cloud rendering.</p>`
+        : ""}
   </section>
 
   <!-- ── plan cards ── -->
   <section class="rk-pricing-plans">${planCards}</section>
 
+  <p class="rk-pricing-manage">Already on a plan? <a href="${rkEscape(BILLING_PORTAL_URL)}" target="_blank" rel="noreferrer">Manage billing, invoices &amp; cancellation in the Stripe portal <span class="rk-arrow">↗</span></a></p>
+
   <!-- ── credit top-up strip ── -->
   <section class="rk-card rk-pricing-credits">
     <div class="rk-pricing-credits-head">
       <span class="rk-eyebrow">Credit wallet</span>
       <h2>Top up credits, pay only for compute</h2>
       <p class="rk-muted">Every credit is <strong>$0.03</strong> of render compute. Cloud renders, clip scans and decompose passes draw from your wallet — bring-your-own AI keys are never billed. Balance rolls over forever and auto-scales to zero.</p>
+      <div class="rk-row rk-wrap rk-pricing-credits-cta">
+        <a class="rk-btn rk-btn-gold rk-btn-lg" href="${rkEscape(checkoutUrl)}" target="_blank" rel="noreferrer">Top up wallet<span class="rk-arrow">→</span></a>
+        <span class="rk-hint">Secure Stripe checkout${email ? ` · pre-filled for ${rkEscape(email)}` : ""}</span>
+      </div>
     </div>
     <div class="rk-pricing-packs">${packCards}</div>
     <div class="rk-pricing-credits-foot">
-      <span class="rk-pill rk-pill-sky">Set per-hour & per-day spend caps</span>
+      <span class="rk-pill rk-pill-sky">Set per-hour &amp; per-day spend caps</span>
       <span class="rk-pill">Local <code>vidfarm serve</code> renders are free</span>
+      <span class="rk-pill">Choose any amount at checkout</span>
     </div>
   </section>
 
@@ -220,10 +273,10 @@ export function renderReskinPricing() {
     <div class="rk-pricing-cta-inner">
       <span class="rk-badge rk-pricing-cta-badge">Ready when you are</span>
       <h2 class="rk-pricing-cta-title">Make your first ad today.</h2>
-      <p class="rk-pricing-cta-sub">Fork a template, recut it with your footage, and render — free on your own machine. Upgrade only when you're ready to scale.</p>
+      <p class="rk-pricing-cta-sub">Fork a template, recut it with your footage, and render — free on your own machine. Go Pro only when you're ready to scale.</p>
       <div class="rk-row rk-wrap rk-pricing-cta-btns">
-        <a class="rk-btn rk-btn-ink rk-btn-lg" href="#">Start free<span class="rk-arrow">→</span></a>
-        <a class="rk-btn rk-btn-ghost rk-btn-lg rk-pricing-cta-ghost" href="#">Book a demo</a>
+        <a class="rk-btn rk-btn-ink rk-btn-lg" href="/login">Start free<span class="rk-arrow">→</span></a>
+        <a class="rk-btn rk-btn-ghost rk-btn-lg rk-pricing-cta-ghost" href="${rkEscape(demoHref)}">Book a demo</a>
       </div>
     </div>
   </section>
@@ -239,17 +292,12 @@ export function renderReskinPricing() {
 .rk-pricing-title-accent::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.36em;z-index:-1;
   background:var(--rk-gold-500);border-radius:var(--rk-r-full);opacity:.55}
 .rk-pricing-lede{font-size:var(--rk-text-lg);color:var(--rk-text-muted);max-width:620px;line-height:1.55}
-.rk-pricing-toggle{display:inline-flex;gap:4px;padding:5px;background:#fff;border:1px solid var(--rk-border);
-  border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-sm)}
-.rk-pricing-toggle-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border:0;cursor:pointer;
-  background:transparent;border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;
-  font-weight:600;color:var(--rk-n-600);transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
-.rk-pricing-toggle-btn.is-active{background:var(--rk-ink);color:#fff}
-.rk-pricing-save{font-size:11px;padding:2px 8px}
-.rk-pricing-toggle-btn.is-active .rk-pricing-save{background:var(--rk-gold-500);color:var(--rk-ink)}
+.rk-pricing-signed{font-size:13px;color:var(--rk-n-600);background:var(--rk-gold-tint);border:1px solid var(--rk-gold-tint2);
+  padding:8px 16px;border-radius:var(--rk-r-full)}
+.rk-pricing-signed strong{color:var(--rk-ink);font-weight:700}
 
 /* plan cards */
-.rk-pricing-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;margin-bottom:64px}
+.rk-pricing-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;margin-bottom:20px}
 @media(max-width:960px){.rk-pricing-plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}}
 .rk-pricing-plan{position:relative;display:flex;flex-direction:column;gap:18px;overflow:visible}
 .rk-pricing-plan-featured{border-color:transparent;box-shadow:var(--rk-ring-gold),var(--rk-shadow-xl);
@@ -265,20 +313,27 @@ export function renderReskinPricing() {
 .rk-pricing-price{display:flex;align-items:baseline;gap:2px;color:var(--rk-ink);margin-top:2px}
 .rk-pricing-cur{font-family:var(--rk-font-display);font-weight:800;font-size:1.5rem;align-self:flex-start;margin-top:.5rem}
 .rk-pricing-amount{font-family:var(--rk-font-display);font-weight:800;font-size:3.4rem;letter-spacing:-.03em;line-height:1}
+.rk-pricing-amount-sm{font-size:2.5rem}
 .rk-pricing-suffix{font-size:var(--rk-text-base);font-weight:600;color:var(--rk-text-muted);margin-left:4px}
 .rk-pricing-price-sub{font-size:13px;color:var(--rk-text-muted);min-height:18px}
-.rk-strike{text-decoration:line-through;color:var(--rk-n-400)}
 .rk-pricing-pitch{font-size:14px;color:var(--rk-text);line-height:1.55;min-height:66px}
 .rk-pricing-feats{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:12px;border-top:1px solid var(--rk-border)}
 .rk-pricing-feat{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--rk-n-700)}
 .rk-pricing-check{padding:6px}
 .rk-pricing-check svg{width:100%;height:100%}
 
+/* manage-billing line */
+.rk-pricing-manage{text-align:center;font-size:13px;color:var(--rk-text-muted);margin:0 auto 60px}
+.rk-pricing-manage a{color:var(--rk-n-700);font-weight:600;border-bottom:1px solid var(--rk-border-strong)}
+.rk-pricing-manage a:hover{color:var(--rk-ink)}
+
 /* credit strip */
 .rk-pricing-credits{padding:34px;background:linear-gradient(180deg,#fff 0%,var(--rk-n-50) 100%)}
+@media(max-width:560px){.rk-pricing-credits{padding:22px 16px}}
 .rk-pricing-credits-head{max-width:680px;margin-bottom:26px;display:grid;gap:8px}
 .rk-pricing-credits-head h2{font-size:var(--rk-text-3xl);letter-spacing:-.02em}
 .rk-pricing-credits-head p{font-size:15px;line-height:1.55}
+.rk-pricing-credits-cta{margin-top:8px}
 .rk-pricing-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
 @media(max-width:900px){.rk-pricing-packs{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:520px){.rk-pricing-packs{grid-template-columns:1fr}}
@@ -294,11 +349,8 @@ export function renderReskinPricing() {
   color:var(--rk-ink);line-height:1;display:flex;align-items:baseline;gap:6px}
 .rk-pricing-pack-credits span{font-family:var(--rk-font-body);font-size:12px;font-weight:600;color:var(--rk-text-muted);letter-spacing:0}
 .rk-pricing-pack-bonus{align-self:flex-start}
-.rk-pricing-pack-price{font-family:var(--rk-font-display);font-weight:700;font-size:1.05rem;color:var(--rk-n-700);
-  display:flex;align-items:baseline;gap:6px;margin-top:2px}
-.rk-pricing-pack-price span{font-family:var(--rk-font-body);font-size:12px;font-weight:500;color:var(--rk-text-faint)}
 .rk-pricing-pack-note{font-size:12px;color:var(--rk-text-muted);min-height:16px}
-.rk-pricing-pack button{margin-top:4px}
+.rk-pricing-pack a{margin-top:4px}
 .rk-pricing-credits-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--rk-border)}
 
 /* faq + trust */
@@ -326,34 +378,13 @@ export function renderReskinPricing() {
 .rk-pricing-cta-ghost{background:rgba(255,255,255,.85);border-color:transparent}
 .rk-pricing-cta-ghost:hover{background:#fff}
 `;
-    const script = `
-(function(){
-  var root=document;
-  var btns=root.querySelectorAll('[data-rk-period]');
-  btns.forEach(function(btn){
-    btn.addEventListener('click',function(){
-      var period=btn.getAttribute('data-rk-period');
-      btns.forEach(function(b){b.classList.toggle('is-active',b===btn)});
-      var yearly=period==='yearly';
-      root.querySelectorAll('[data-rk-price]').forEach(function(el){
-        var v=el.getAttribute(yearly?'data-rk-yearly':'data-rk-monthly');
-        el.textContent=v;
-      });
-      root.querySelectorAll('[data-rk-price-note]').forEach(function(el){
-        el.style.visibility=yearly?'visible':'hidden';
-      });
-    });
-  });
-  // start on monthly: hide the "billed yearly" note until yearly is picked
-  root.querySelectorAll('[data-rk-price-note]').forEach(function(el){el.style.visibility='hidden';});
-})();`;
     return reskinDocument({
         title: "vidfarm reskin — Pricing",
-        description: "Reskinned vidfarm pricing page — plans, credit wallet top-ups, and the $0.03/credit model.",
+        description: "Reskinned vidfarm pricing — the $99/mo Pro plan, the $0.03/credit wallet, and real Stripe checkout.",
         activeSlug: "pricing",
+        account: { email: input.email },
         pageCss,
-        body,
-        script
+        body
     });
 }
 //# sourceMappingURL=pricing-page.js.map