@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

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

@@ -0,0 +1,225 @@
+// /reskin/login — the auth screen ported into the farmville design system.
+//
+// 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.
+//
+// Faithfully mirrors src/account-pages-legacy.ts → renderLoginPage. The legacy
+// page is OTP-first with a password alternative; the design brief here favors a
+// classic email + password form with a (visual) Log in / Sign up pill toggle, so
+// the primary form posts to the REAL password endpoint /login/password (mode=
+// password) and the ghost secondary button links to the REAL passwordless OTP
+// flow at /login?mode=otp — both endpoints are honest.
+import { reskinDocument } from "./document.js";
+// Real login endpoints from the live app (src/app.ts).
+const PASSWORD_ACTION = "/login/password?mode=password";
+const OTP_HREF = "/login?mode=otp";
+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>`;
+export function renderReskinLogin() {
+    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">
+        <span class="rk-badge rk-login-eyebrow">Welcome back to the farm</span>
+        <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" data-rk-title>Welcome back</h2>
+        <p class="rk-muted" data-rk-subtitle>Log in to pick up where you left off.</p>
+      </div>
+
+      <div class="rk-login-seg" role="tablist" aria-label="Log in or sign up">
+        <span class="rk-login-seg-thumb" data-rk-thumb></span>
+        <button type="button" class="rk-login-seg-btn is-active" data-rk-seg="login" aria-selected="true">Log in</button>
+        <button type="button" class="rk-login-seg-btn" data-rk-seg="signup" aria-selected="false">Sign up</button>
+      </div>
+
+      <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" placeholder="you@studio.co" autocomplete="email" required />
+        </div>
+        <div class="rk-field">
+          <div class="rk-login-label-row">
+            <label class="rk-label" for="rk-login-pass">Password</label>
+            <a class="rk-login-forgot" href="${OTP_HREF}" data-rk-forgot>Forgot password?</a>
+          </div>
+          <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" data-rk-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>
+
+      <p class="rk-login-foot" data-rk-foot>
+        New to vidfarm? <a href="#" data-rk-foot-link>Start a free trial</a>
+      </p>
+    </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}
+
+/* segmented pill toggle (visual) — 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;
+  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-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
+.rk-login-forgot{font-size:12px;font-weight:600;color:var(--rk-gold-700)}
+.rk-login-forgot:hover{text-decoration:underline}
+.rk-login-eye{padding:0 12px;color:var(--rk-n-500)}
+.rk-login-submit{margin-top:4px}
+
+.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;
+  // segmented Log in / Sign up toggle — visual only; both keep the real password
+  // form, we just relabel copy so the two states read honestly.
+  var thumb=root.querySelector('[data-rk-thumb]');
+  var title=root.querySelector('[data-rk-title]');
+  var subtitle=root.querySelector('[data-rk-subtitle]');
+  var submit=root.querySelector('[data-rk-submit]');
+  var foot=root.querySelector('[data-rk-foot]');
+  var forgot=root.querySelector('[data-rk-forgot]');
+  var arrow='<span class="rk-arrow">\\u2192</span>';
+  var copy={
+    login:{title:'Welcome back',sub:'Log in to pick up where you left off.',btn:'Log in '+arrow,foot:'New to vidfarm? <a href="#" data-rk-foot-link>Start a free trial</a>',forgot:true},
+    signup:{title:'Create your studio',sub:'Start making short-form ads in minutes.',btn:'Create account '+arrow,foot:'Already have an account? <a href="#" data-rk-foot-link>Log in</a>',forgot:false}
+  };
+  root.querySelectorAll('[data-rk-seg]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var mode=btn.getAttribute('data-rk-seg');
+      root.querySelectorAll('[data-rk-seg]').forEach(function(b){
+        var on=b===btn; b.classList.toggle('is-active',on); b.setAttribute('aria-selected',on?'true':'false');
+      });
+      if(thumb)thumb.classList.toggle('is-right',mode==='signup');
+      var c=copy[mode];
+      if(title)title.textContent=c.title;
+      if(subtitle)subtitle.textContent=c.sub;
+      if(submit)submit.innerHTML=c.btn;
+      if(foot)foot.innerHTML=c.foot;
+      if(forgot)forgot.style.visibility=c.forgot?'visible':'hidden';
+    });
+  });
+  // password reveal eye
+  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,359 @@
+// /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.
+//
+// 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.
+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" }
+];
+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."
+    },
+    {
+        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."
+    },
+    {
+        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."
+    }
+];
+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 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 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>`;
+    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 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>
+      <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>`;
+    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>
+      </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>
+    </article>`;
+}
+export function renderReskinPricing() {
+    const planCards = PLANS.map(planCard).join("");
+    const packCards = PACKS.map(packCard).join("");
+    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",
+        "Auto-scales to zero"
+    ].map((t) => `<span class="rk-pill rk-pricing-trust">${t}</span>`).join("");
+    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>
+  </section>
+
+  <!-- ── plan cards ── -->
+  <section class="rk-pricing-plans">${planCards}</section>
+
+  <!-- ── 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>
+    <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">Local <code>vidfarm serve</code> renders are free</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. Upgrade 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>
+      </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-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)}
+
+/* plan cards */
+.rk-pricing-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;margin-bottom:64px}
+@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-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%}
+
+/* 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-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-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-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}
+`;
+    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.",
+        activeSlug: "pricing",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=pricing-page.js.map