@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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

@@ -0,0 +1,262 @@
+// /reskin/login — the auth screen ported into the farmville design system,
+// now MIGRATED to the REAL production auth (no more fake password-only form).
+//
+// Bare chrome (no shared top nav / footer): an auth screen owns its whole
+// canvas, so we render just the body over a warm sunny background. A two-column
+// composition — a sunlit brand/marketing panel on the left, a floating white
+// auth card on the right — collapses to a single centered card on small screens.
+//
+// This accepts the SAME input object the live /login route already builds (via
+// `Parameters<typeof renderLoginPage>[0]`), so the route wiring is just "call
+// this instead of the legacy renderer". Every form posts to the REAL login
+// endpoints with the exact field names the live login uses:
+//   • password:      POST ${routePrefix}/password?mode=password   {email,password}
+//   • OTP request:   POST ${routePrefix}/otp/request?mode=otp     {email}
+//   • OTP verify:    POST ${routePrefix}/otp/verify?mode=otp      {email(hidden),code,name?}
+// routePrefix defaults to "/login" but is honored from the input (e.g. the
+// agency-client login uses "/agency-client-login"). On success the real
+// endpoints own the redirect (post-login return path) — we never fake it.
+//
+// The segmented control at the top switches between the two REAL modes
+// (Email code = otp, Password) via honest ?mode= links, so it mirrors the
+// live login's mode handling exactly. Design stays farmville; NO emoji.
+import { reskinDocument, rkEscape } from "./document.js";
+const EYE = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
+const MAIL = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m3.5 7 8.5 6 8.5-6"/></svg>`;
+const LOCK = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2.5"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>`;
+export function renderReskinLogin(input = {}) {
+    // Mirror the live renderer's normalization exactly.
+    const mode = input.mode === "password" ? "password" : "otp";
+    const routePrefix = input.routePrefix || "/login";
+    const rp = rkEscape(routePrefix);
+    const email = rkEscape(input.email ?? "");
+    const otpSent = Boolean(input.otpSent);
+    // REAL endpoints (same as src/account-pages-legacy.ts → renderLoginPage).
+    const PASSWORD_ACTION = `${rp}/password?mode=password`;
+    const OTP_REQUEST_ACTION = `${rp}/otp/request?mode=otp`;
+    const OTP_VERIFY_ACTION = `${rp}/otp/verify?mode=otp`;
+    const OTP_HREF = `${rp}?mode=otp`;
+    const PASSWORD_HREF = `${rp}?mode=password`;
+    const message = input.message
+        ? `<div class="rk-notice rk-notice-ok rk-login-flash">${rkEscape(input.message)}</div>`
+        : "";
+    const error = input.error
+        ? `<div class="rk-notice rk-notice-err rk-login-flash">${rkEscape(input.error)}</div>`
+        : "";
+    // ── segmented mode control (real ?mode= links) ──────────────────────────
+    // Hidden while verifying a code (mid-flow) — there we show "Change email".
+    const seg = otpSent
+        ? ""
+        : `<div class="rk-login-seg" role="tablist" aria-label="Choose a sign-in method">
+        <span class="rk-login-seg-thumb${mode === "password" ? " is-right" : ""}"></span>
+        <a class="rk-login-seg-btn${mode === "otp" ? " is-active" : ""}" href="${OTP_HREF}" role="tab" aria-selected="${mode === "otp" ? "true" : "false"}">Email code</a>
+        <a class="rk-login-seg-btn${mode === "password" ? " is-active" : ""}" href="${PASSWORD_HREF}" role="tab" aria-selected="${mode === "password" ? "true" : "false"}">Password</a>
+      </div>`;
+    // ── header copy per state ───────────────────────────────────────────────
+    const head = mode === "password"
+        ? { title: "Welcome back", sub: "Log in with your email and password." }
+        : otpSent
+            ? { title: "Check your email", sub: `Enter the 6-digit code we sent${input.email ? ` to ${email}` : ""}.` }
+            : { title: "Sign in with a code", sub: "We'll email you a 6-digit code — no password to remember." };
+    // ── the auth form (three honest states) ─────────────────────────────────
+    let authPane;
+    if (mode === "password") {
+        authPane = `
+      <form class="rk-stack rk-login-form" method="post" action="${PASSWORD_ACTION}">
+        <div class="rk-field">
+          <label class="rk-label" for="rk-login-email">Email</label>
+          <input class="rk-input" id="rk-login-email" type="email" name="email" value="${email}" placeholder="you@studio.co" autocomplete="email" required autofocus />
+        </div>
+        <div class="rk-field">
+          <label class="rk-label" for="rk-login-pass">Password</label>
+          <div class="rk-input-group">
+            <input class="rk-input" id="rk-login-pass" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
+            <button class="rk-btn rk-btn-ghost rk-btn-sm rk-login-eye" type="button" data-rk-reveal="rk-login-pass" aria-label="Show password">${EYE}</button>
+          </div>
+        </div>
+        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">Log in <span class="rk-arrow">→</span></button>
+      </form>
+
+      <div class="rk-login-divider"><span>or</span></div>
+      <a class="rk-btn rk-btn-ghost rk-btn-lg rk-btn-block rk-login-alt" href="${OTP_HREF}">${MAIL} Email me a login code</a>`;
+    }
+    else if (otpSent) {
+        authPane = `
+      <form class="rk-stack rk-login-form" method="post" action="${OTP_VERIFY_ACTION}">
+        <input type="hidden" name="email" value="${email}" />
+        <div class="rk-field">
+          <label class="rk-label" for="rk-login-code">6-digit code</label>
+          <input class="rk-input rk-login-code" id="rk-login-code" name="code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" placeholder="000000" autofocus required />
+        </div>
+        <div class="rk-field">
+          <label class="rk-label" for="rk-login-name">Your name <span class="rk-login-optional">(optional — for new accounts)</span></label>
+          <input class="rk-input" id="rk-login-name" name="name" type="text" placeholder="Dylan Vane" autocomplete="name" />
+        </div>
+        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">Verify &amp; continue <span class="rk-arrow">→</span></button>
+      </form>
+
+      <p class="rk-login-foot"><a href="${OTP_HREF}">Use a different email</a></p>`;
+    }
+    else {
+        authPane = `
+      <form class="rk-stack rk-login-form" method="post" action="${OTP_REQUEST_ACTION}">
+        <div class="rk-field">
+          <label class="rk-label" for="rk-login-email">Email</label>
+          <input class="rk-input" id="rk-login-email" type="email" name="email" value="${email}" placeholder="you@studio.co" autocomplete="email" required autofocus />
+        </div>
+        <button class="rk-btn rk-btn-gold rk-btn-lg rk-btn-block rk-login-submit" type="submit">${MAIL} Email me a login code</button>
+      </form>
+
+      <div class="rk-login-divider"><span>or</span></div>
+      <a class="rk-btn rk-btn-ghost rk-btn-lg rk-btn-block rk-login-alt" href="${PASSWORD_HREF}">${LOCK} Use a password instead</a>`;
+    }
+    const body = `
+<main class="rk-login">
+  <div class="rk-login-art">
+    <div class="rk-login-art-sky"></div>
+    <span class="rk-login-blob rk-login-blob-a"></span>
+    <span class="rk-login-blob rk-login-blob-b"></span>
+    <div class="rk-login-art-inner">
+      <a class="rk-brand rk-login-brand" href="/">
+        <span class="rk-brand-mark">V</span>vidfarm
+      </a>
+      <div class="rk-login-art-copy">
+        <h1 class="rk-login-hed">A week of content, made in an afternoon.</h1>
+        <p class="rk-login-lede">Sign in to spin up short-form ads from your own clips — punchy hooks, UGC energy, captions that pop.</p>
+        <ul class="rk-login-feats">
+          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Mine &amp; tag clips automatically</li>
+          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Swipe templates into finished ads</li>
+          <li><span class="rk-login-feat-mark" aria-hidden="true"></span> Publish straight to your channels</li>
+        </ul>
+      </div>
+      <figure class="rk-login-quote rk-glass">
+        <div class="rk-login-quote-avatar">DV</div>
+        <blockquote>
+          <p>"We ship a full week of ads before lunch now. It feels like cheating."</p>
+          <figcaption>Dylan Vane · Founder, Studio Co</figcaption>
+        </blockquote>
+      </figure>
+    </div>
+  </div>
+
+  <div class="rk-login-pane">
+    <div class="rk-login-card">
+      <a class="rk-brand rk-login-card-brand" href="/">
+        <span class="rk-brand-mark">V</span>vidfarm
+      </a>
+
+      <div class="rk-login-head">
+        <h2 class="rk-login-title">${rkEscape(head.title)}</h2>
+        <p class="rk-muted">${head.sub}</p>
+      </div>
+
+      ${seg}
+      ${message}
+      ${error}
+      ${authPane}
+    </div>
+    <p class="rk-login-legal">By continuing you agree to our <a href="#">Terms</a> &amp; <a href="#">Privacy Policy</a>.</p>
+  </div>
+</main>`;
+    const pageCss = `
+.rk-login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;
+  background:radial-gradient(120% 90% at 100% 0%,var(--rk-gold-tint) 0%,transparent 55%),var(--rk-bg)}
+@media(max-width:920px){.rk-login{grid-template-columns:1fr}}
+
+/* ── left: sunlit brand / marketing panel ── */
+.rk-login-art{position:relative;overflow:hidden;display:flex;padding:56px clamp(2rem,4vw,4rem)}
+@media(max-width:920px){.rk-login-art{display:none}}
+.rk-login-art-sky{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(72% 55% at 22% 12%,rgba(255,244,214,.96),transparent 62%),
+  radial-gradient(60% 55% at 92% 96%,rgba(255,199,56,.42),transparent 60%),
+  linear-gradient(158deg,#89ccf3 0%,#b7e0fa 42%,#ffe7c9 100%)}
+.rk-login-blob{position:absolute;z-index:0;border-radius:var(--rk-r-full);filter:blur(2px);
+  background:rgba(255,255,255,.55)}
+.rk-login-blob-a{width:220px;height:120px;top:16%;right:12%;box-shadow:60px 20px 0 -18px rgba(255,255,255,.5)}
+.rk-login-blob-b{width:150px;height:84px;bottom:24%;left:-30px;background:rgba(255,255,255,.4)}
+.rk-login-art-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:32px;
+  justify-content:space-between;width:100%;max-width:440px;margin:auto}
+.rk-login-brand{font-size:22px;color:var(--rk-ink)}
+.rk-login-brand .rk-brand-mark{width:30px;height:30px;font-size:17px}
+.rk-login-art-copy{display:grid;gap:18px}
+.rk-login-eyebrow{justify-self:start;background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9);
+  backdrop-filter:blur(6px);color:var(--rk-n-700)}
+.rk-login-hed{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.05;letter-spacing:-.035em;color:var(--rk-ink);
+  max-width:12ch;text-wrap:balance}
+.rk-login-lede{font-size:var(--rk-text-lg);line-height:1.5;color:var(--rk-n-700);max-width:34ch}
+.rk-login-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
+.rk-login-feats li{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600;color:var(--rk-n-800)}
+.rk-login-feat-mark{width:7px;height:7px;border-radius:var(--rk-r-full);background:var(--rk-gold-500);
+  box-shadow:0 0 0 4px var(--rk-gold-tint2);flex:none;margin:0 3px}
+.rk-login-quote{border-radius:var(--rk-r-3xl);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;
+  box-shadow:var(--rk-shadow-lg)}
+.rk-login-quote-avatar{width:42px;height:42px;border-radius:var(--rk-r-full);flex:none;display:grid;place-items:center;
+  font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);
+  background:var(--rk-gold-500);box-shadow:var(--rk-shadow-xs)}
+.rk-login-quote blockquote{margin:0;display:grid;gap:6px}
+.rk-login-quote p{font-size:14px;font-weight:600;color:var(--rk-ink);line-height:1.45}
+.rk-login-quote figcaption{font-size:12px;font-weight:600;color:var(--rk-n-600)}
+
+/* ── right: floating auth card ── */
+.rk-login-pane{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
+  padding:48px clamp(1.25rem,4vw,3rem)}
+.rk-login-card{width:100%;max-width:412px;background:var(--rk-surface);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-3xl);padding:clamp(28px,3vw,40px);box-shadow:var(--rk-shadow-xl);display:grid;gap:22px}
+.rk-login-card-brand{display:none;font-size:20px}
+@media(max-width:920px){.rk-login-card-brand{display:inline-flex;justify-self:center}}
+.rk-login-head{display:grid;gap:6px;text-align:center}
+.rk-login-title{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
+.rk-login-flash{font-size:13px;padding:11px 14px}
+
+/* segmented mode control — real ?mode= links. gold is reserved for submit, so
+   the active thumb is a plain white pill with an ink label */
+.rk-login-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:4px;
+  background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-full)}
+.rk-login-seg-thumb{position:absolute;z-index:0;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);
+  background:#fff;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-sm);
+  transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-login-seg-thumb.is-right{transform:translateX(100%)}
+.rk-login-seg-btn{position:relative;z-index:1;appearance:none;border:0;background:transparent;cursor:pointer;
+  padding:9px 12px;border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;font-weight:600;
+  text-align:center;color:var(--rk-n-500);transition:color var(--rk-dur) var(--rk-ease)}
+.rk-login-seg-btn.is-active{color:var(--rk-ink)}
+
+.rk-login-form{gap:16px}
+.rk-login-eye{padding:0 12px;color:var(--rk-n-500)}
+.rk-login-submit{margin-top:4px}
+.rk-login-code{font-family:var(--rk-font-mono);font-size:20px;letter-spacing:.42em;text-align:center;padding-right:0}
+.rk-login-code::placeholder{letter-spacing:.42em}
+.rk-login-optional{font-weight:500;color:var(--rk-text-faint)}
+
+.rk-login-divider{display:flex;align-items:center;gap:14px;color:var(--rk-text-faint);
+  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
+.rk-login-divider::before,.rk-login-divider::after{content:"";height:1px;flex:1;background:var(--rk-border)}
+.rk-login-alt{color:var(--rk-ink)}
+.rk-login-foot{text-align:center;font-size:14px;color:var(--rk-text-muted)}
+.rk-login-foot a{font-weight:700;color:var(--rk-ink)}
+.rk-login-foot a:hover{color:var(--rk-gold-700)}
+.rk-login-legal{font-size:12px;color:var(--rk-text-faint);text-align:center;max-width:412px}
+.rk-login-legal a{color:var(--rk-text-muted);text-decoration:underline}
+`;
+    const script = `
+(function(){
+  var root=document;
+  // password reveal eye (only present in password mode)
+  root.querySelectorAll('[data-rk-reveal]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var el=root.getElementById(btn.getAttribute('data-rk-reveal'));
+      if(!el)return; el.type=el.type==='password'?'text':'password';
+    });
+  });
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Login",
+        description: "Reskinned vidfarm login / sign up screen.",
+        activeSlug: "login",
+        chrome: "bare",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=login-page.js.map

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

@@ -0,0 +1,388 @@
+// /reskin/pricing — MIGRATED to real production billing.
+//
+// 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";
+// ── 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. 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 — 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: "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.`
+    }
+];
+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 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 ext = p.ctaExternal ? ` target="_blank" rel="noreferrer"` : "";
+    return `
+    <article class="rk-card rk-card-hover rk-pricing-plan${featured}">
+      ${badge}
+      <div class="rk-pricing-plan-head">
+        <span class="rk-tile ${p.featured ? "rk-tile-gold" : "rk-tile-ink"} rk-pricing-mono" aria-hidden="true">${rkEscape(p.name.charAt(0))}</span>
+        <div>
+          <span class="rk-eyebrow ${p.featured ? "" : "rk-pricing-kicker-muted"}">${rkEscape(p.kicker)}</span>
+          <h3>${rkEscape(p.name)}</h3>
+        </div>
+      </div>
+      ${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.ctaHref)}"${ext}>${rkEscape(p.ctaLabel)}<span class="rk-arrow">→</span></a>
+      <ul class="rk-pricing-feats">${features}</ul>
+    </article>`;
+}
+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 ${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>
+      <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(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>
+      <p class="rk-muted">${rkEscape(f.a)}</p>
+    </div>`).join("");
+    const trustPills = [
+        "Cancel anytime",
+        "Transparent per-render billing",
+        "BYO AI keys — never billed",
+        "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">
+    <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. 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 &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>
+
+  <!-- ── FAQ + trust ── -->
+  <section class="rk-pricing-faqs-wrap">
+    <div class="rk-pricing-faqs-head">
+      <span class="rk-eyebrow">Good to know</span>
+      <h2>Questions, answered</h2>
+    </div>
+    <div class="rk-grid rk-grid-2 rk-pricing-faqs">${faqCards}</div>
+    <div class="rk-row rk-wrap rk-pricing-trustrow">${trustPills}</div>
+  </section>
+
+  <!-- ── final gold CTA band ── -->
+  <section class="rk-pricing-cta">
+    <div class="rk-pricing-cta-art" aria-hidden="true"></div>
+    <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. 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="/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>
+
+</main>`;
+    const pageCss = `
+.rk-pricing{padding-top:32px}
+
+/* intro */
+.rk-pricing-intro{display:grid;justify-items:center;text-align:center;gap:18px;max-width:760px;margin:8px auto 52px}
+.rk-pricing-title{font-size:clamp(2.4rem,6vw,3.6rem);letter-spacing:-.035em;line-height:1.04}
+.rk-pricing-title-accent{position:relative;display:inline-block;color:var(--rk-ink)}
+.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-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: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);
+  background:linear-gradient(180deg,var(--rk-gold-tint) 0%,#fff 26%);transform:translateY(-10px);z-index:2}
+@media(max-width:960px){.rk-pricing-plan-featured{transform:none}}
+.rk-pricing-most{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap;
+  background:var(--rk-gold-500);color:var(--rk-ink);font-family:var(--rk-font-body);font-weight:700;
+  font-size:12px;letter-spacing:.02em;padding:6px 16px;border-radius:var(--rk-r-full);box-shadow:var(--rk-shadow-md)}
+.rk-pricing-mono{font-family:var(--rk-font-display);font-weight:800;line-height:1}
+.rk-pricing-plan-head{display:flex;align-items:center;gap:12px}
+.rk-pricing-plan-head h3{font-size:var(--rk-text-2xl);margin-top:2px}
+.rk-pricing-kicker-muted{color:var(--rk-n-500)}
+.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-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%)}
+.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}}
+.rk-pricing-pack{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);padding:20px 18px;box-shadow:var(--rk-shadow-xs);
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-pricing-pack:hover{transform:translateY(-3px);box-shadow:var(--rk-shadow-md);border-color:var(--rk-border-strong)}
+.rk-pricing-pack-popular{border-color:var(--rk-gold-500);box-shadow:0 0 0 2px var(--rk-gold-tint2),var(--rk-shadow-md)}
+.rk-pricing-pack-flag{position:absolute;top:-11px;right:14px;font-size:11px;padding:3px 10px}
+.rk-pricing-pack-top{display:flex;align-items:center;gap:9px}
+.rk-pricing-pack-label{font-family:var(--rk-font-display);font-weight:700;font-size:14px;color:var(--rk-ink)}
+.rk-pricing-pack-credits{font-family:var(--rk-font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;
+  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-note{font-size:12px;color:var(--rk-text-muted);min-height:16px}
+.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 */
+.rk-pricing-faqs-wrap{margin-top:64px}
+.rk-pricing-faqs-head{display:grid;gap:8px;text-align:center;justify-items:center;margin-bottom:28px}
+.rk-pricing-faqs-head h2{font-size:var(--rk-text-3xl);letter-spacing:-.02em}
+.rk-pricing-faq{display:grid;gap:7px}
+.rk-pricing-faq h3{font-size:var(--rk-text-base);font-weight:700}
+.rk-pricing-faq p{font-size:14px;line-height:1.55}
+.rk-pricing-trustrow{justify-content:center;margin-top:26px}
+.rk-pricing-trust{background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);color:var(--rk-n-600);padding:7px 14px}
+
+/* final gold CTA band */
+.rk-pricing-cta{position:relative;overflow:hidden;margin-top:72px;border-radius:var(--rk-r-3xl);
+  padding:clamp(40px,6vw,64px) var(--rk-gutter);text-align:center;box-shadow:var(--rk-shadow-lg)}
+.rk-pricing-cta-art{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(70% 120% at 15% 10%,rgba(255,255,255,.7),transparent 55%),
+  radial-gradient(60% 120% at 90% 90%,rgba(252,185,0,.55),transparent 55%),
+  linear-gradient(135deg,var(--rk-gold-500) 0%,var(--rk-gold-600) 55%,#ffd873 100%)}
+.rk-pricing-cta-inner{position:relative;z-index:1;display:grid;justify-items:center;gap:16px;max-width:620px;margin:0 auto}
+.rk-pricing-cta-badge{background:rgba(255,255,255,.9);border-color:transparent}
+.rk-pricing-cta-title{font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em;color:var(--rk-ink)}
+.rk-pricing-cta-sub{font-size:var(--rk-text-lg);color:#5a4a12;line-height:1.5;font-weight:500}
+.rk-pricing-cta-btns{justify-content:center;margin-top:8px}
+.rk-pricing-cta-ghost{background:rgba(255,255,255,.85);border-color:transparent}
+.rk-pricing-cta-ghost:hover{background:#fff}
+`;
+    return reskinDocument({
+        title: "vidfarm reskin — Pricing",
+        description: "Reskinned vidfarm pricing — the $99/mo Pro plan, the $0.03/credit wallet, and real Stripe checkout.",
+        activeSlug: "pricing",
+        pageCss,
+        body
+    });
+}
+//# sourceMappingURL=pricing-page.js.map