added on WebSTLs (webstls.com) at 2026-07-01 22:27:03
| 1 | <!-- ===== Landing nav (shared on every marketing page) ===== --> | |
| 2 | <header class="landing-nav"> | |
| 3 | <div class="landing-nav-inner"> | |
| 4 | <a href="index.cgi" class="flex items-center gap-3" style="text-decoration:none"> | |
| 5 | <div class="brand-mark"><span>WS</span></div> | |
| 6 | <div class="brand-text"> | |
| 7 | <span class="brand-name">WebSTLs</span> | |
| 8 | <span class="brand-sub">Creator Platform</span> | |
| 9 | </div> | |
| 10 | </a> | |
| 11 | <nav class="links"> | |
| 12 | <a href="features.cgi">Features</a> | |
| 13 | <a href="tour.cgi">Tour</a> | |
| 14 | <a href="why.cgi">Why WebSTLs</a> | |
| 15 | <a href="pricing.cgi" class="text-brand">Pricing</a> | |
| 16 | <a href="faq.cgi">FAQ</a> | |
| 17 | <a href="about.cgi">About</a> | |
| 18 | </nav> | |
| 19 | <div class="auth-actions"> | |
| 20 | <a href="login.cgi" class="btn btn-ghost btn-sm">Sign in</a> | |
| 21 | <a href="signup.cgi" class="btn btn-primary btn-sm">Start free trial</a> | |
| 22 | </div> | |
| 23 | </div> | |
| 24 | </header> | |
| 25 | ||
| 26 | <!-- ===== Hero ===== --> | |
| 27 | <section class="hero" style="padding-bottom:40px"> | |
| 28 | <div class="hero-grid-bg"></div> | |
| 29 | <div class="hero-glow-1"></div> | |
| 30 | <div class="hero-glow-2"></div> | |
| 31 | <div class="hero-inner" style="grid-template-columns:1fr;text-align:center"> | |
| 32 | <div> | |
| 33 | <span class="hero-pill"><span class="dot"></span> Simple, transparent pricing</span> | |
| 34 | <h1 class="hero-title">Simple, <span class="grad">honest pricing.</span></h1> | |
| 35 | <p class="hero-sub" style="max-width:640px;margin:18px auto 0"> | |
| 36 | Start your 14-day free trial. No credit card. | |
| 37 | No setup fees, no per-transaction fees, no surprise overages. | |
| 38 | </p> | |
| 39 | </div> | |
| 40 | </div> | |
| 41 | </section> | |
| 42 | ||
| 43 | <!-- Active-promo banner. Surfaces the currently-running plan promo | |
| 44 | so prospects see the deal before they pick a tier. Hidden when | |
| 45 | no plan-target promo is active. --> | |
| 46 | [if:$has_promo] | |
| 47 | <section style="padding:0 32px 22px;max-width:1280px;margin:0 auto"> | |
| 48 | <div style="display:flex;align-items:center;gap:14px;justify-content:center;padding:14px 22px;border-radius:14px;background:linear-gradient(135deg,rgba(34,197,94,0.10),rgba(124,58,237,0.10));border:1px solid rgba(34,197,94,0.40);flex-wrap:wrap"> | |
| 49 | <span style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(34,197,94,0.18);color:#86efac;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase"> | |
| 50 | <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> | |
| 51 | Limited-time offer | |
| 52 | </span> | |
| 53 | <div style="color:#fff;font-size:15px;font-weight:600"> | |
| 54 | $promo_label on your first invoice with code | |
| 55 | <code style="background:rgba(255,255,255,0.10);padding:3px 9px;border-radius:6px;font-family:var(--font-mono,monospace);font-weight:700;letter-spacing:0.5px">$promo_code</code> | |
| 56 | </div> | |
| 57 | </div> | |
| 58 | </section> | |
| 59 | [/if] | |
| 60 | ||
| 61 | <!-- ===== Plan cards (DB-driven via admin_packages.cgi) ===== --> | |
| 62 | <section class="section" style="padding-top:0"> | |
| 63 | <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:1280px;margin:0 auto;padding:0 32px"> | |
| 64 | ||
| 65 | [loop:@plans] | |
| 66 | ||
| 67 | [if:$loop1.not_featured] | |
| 68 | <div class="card card-elevated" style="padding:24px;display:flex;flex-direction:column"> | |
| 69 | <div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase;font-weight:700">[$loop1.display_name]</div> | |
| 70 | <div style="font-family:var(--font-display);font-size:38px;font-weight:700;color:#fff;margin:8px 0 2px">[$loop1.price_display][if:!$loop1.is_free] <span style="font-size:16px;color:var(--col-text-3);font-weight:500">/ [$loop1.period_label]</span>[/if]</div> | |
| 71 | [if:$loop1.has_annual_note]<div class="text-xs text-dim">[$loop1.annual_note]</div>[/if] | |
| 72 | [if:$loop1.has_tagline]<div class="text-xs text-dim" style="margin-top:6px;line-height:1.5">[$loop1.tagline]</div>[/if] | |
| 73 | [if:$loop1.promo_active]<div style="margin-top:10px;padding:8px 12px;border-radius:8px;background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.30);color:#86efac;font-size:11.5px;line-height:1.5">[$loop1.promo_card_line]</div>[/if] | |
| 74 | <ul class="price-list" style="margin:18px 0;flex:1"> | |
| 75 | [$loop1.bullets_html] | |
| 76 | </ul> | |
| 77 | <a href="[$loop1.cta_href]" class="btn btn-secondary btn-lg" style="width:100%">[$loop1.cta_label]</a> | |
| 78 | </div> | |
| 79 | [/if] | |
| 80 | ||
| 81 | [if:$loop1.is_featured] | |
| 82 | <div class="card card-elevated" style="padding:24px;display:flex;flex-direction:column;border:2px solid var(--col-accent);position:relative"> | |
| 83 | <div style="position:absolute;top:-12px;left:24px;background:linear-gradient(130deg,#3b82f6,#7c3aed);color:#fff;padding:4px 10px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase">Most popular</div> | |
| 84 | <div class="text-xs" style="letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:var(--col-accent-bright)">[$loop1.display_name]</div> | |
| 85 | <div style="font-family:var(--font-display);font-size:38px;font-weight:700;color:#fff;margin:8px 0 2px">[$loop1.price_display][if:!$loop1.is_free] <span style="font-size:16px;color:var(--col-text-3);font-weight:500">/ [$loop1.period_label]</span>[/if]</div> | |
| 86 | [if:$loop1.has_annual_note]<div class="text-xs text-dim">[$loop1.annual_note]</div>[/if] | |
| 87 | [if:$loop1.has_tagline]<div class="text-xs text-dim" style="margin-top:6px;line-height:1.5">[$loop1.tagline]</div>[/if] | |
| 88 | [if:$loop1.promo_active]<div style="margin-top:10px;padding:8px 12px;border-radius:8px;background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.30);color:#86efac;font-size:11.5px;line-height:1.5">[$loop1.promo_card_line]</div>[/if] | |
| 89 | <ul class="price-list" style="margin:18px 0;flex:1"> | |
| 90 | [$loop1.bullets_html] | |
| 91 | </ul> | |
| 92 | <a href="[$loop1.cta_href]" class="btn btn-primary btn-lg" style="width:100%">[$loop1.cta_label]</a> | |
| 93 | </div> | |
| 94 | [/if] | |
| 95 | ||
| 96 | [/loop] | |
| 97 | ||
| 98 | </div> | |
| 99 | </section> | |
| 100 | ||
| 101 | <!-- ===== Comparison table ===== --> | |
| 102 | <section class="section" style="max-width:1100px;margin:0 auto;padding:40px 32px"> | |
| 103 | <h2 class="section-title" style="font-size:32px;text-align:center;margin-bottom:8px">Compare plans side-by-side</h2> | |
| 104 | <p class="section-sub" style="text-align:center;margin-bottom:30px">All plans include unlimited storefront visitors and Stripe Connect Express payouts.</p> | |
| 105 | ||
| 106 | <div style="overflow-x:auto;background:var(--col-surface-1);border:1px solid var(--col-border);border-radius:14px"> | |
| 107 | <table style="width:100%;border-collapse:collapse;font-size:13px"> | |
| 108 | <thead> | |
| 109 | <tr style="background:var(--col-surface-2)"> | |
| 110 | <th style="text-align:left;padding:14px 18px;color:var(--col-text-3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase">Feature</th> | |
| 111 | <th style="padding:14px 18px;color:var(--col-text-3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase">Free</th> | |
| 112 | <th style="padding:14px 18px;color:var(--col-text-3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase">Starter</th> | |
| 113 | <th style="padding:14px 18px;color:var(--col-accent-bright);font-size:11px;letter-spacing:1.5px;text-transform:uppercase">Pro</th> | |
| 114 | <th style="padding:14px 18px;color:var(--col-text-3);font-size:11px;letter-spacing:1.5px;text-transform:uppercase">Studio</th> | |
| 115 | </tr> | |
| 116 | </thead> | |
| 117 | <tbody style="color:var(--col-text-2)"> | |
| 118 | <tr><td style="padding:12px 18px;color:var(--col-text)">Active models</td><td style="text-align:center;padding:12px">5</td><td style="text-align:center;padding:12px">Unlimited</td><td style="text-align:center;padding:12px">Unlimited</td><td style="text-align:center;padding:12px">Unlimited</td></tr> | |
| 119 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">Platform transaction fee</td><td style="text-align:center;padding:12px">10%</td><td style="text-align:center;padding:12px">5%</td><td style="text-align:center;padding:12px">2%</td><td style="text-align:center;padding:12px;color:#4ade80">0%</td></tr> | |
| 120 | <tr><td style="padding:12px 18px;color:var(--col-text)">Cross-platform publishing</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">2 markets</td><td style="text-align:center;padding:12px">All markets</td><td style="text-align:center;padding:12px">All markets</td></tr> | |
| 121 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">A/B page tests <span class="text-xs text-dim">(1-click duplicate)</span></td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 122 | <tr><td style="padding:12px 18px;color:var(--col-text)">MVT block tests <span class="text-xs text-dim">(named slots, 2-6 variants)</span></td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 123 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">Layout + theme variant swap</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 124 | <tr><td style="padding:12px 18px;color:var(--col-text)">Price experiments <span class="text-xs text-dim">(Thompson bandit)</span></td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 125 | <tr><td style="padding:12px 18px;color:var(--col-text)">Pooled-data recommendations</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 126 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">Coupons, sales, bundles</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 127 | <tr><td style="padding:12px 18px;color:var(--col-text)">Custom domain + branded checkout</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 128 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">Team seats</td><td style="text-align:center;padding:12px">1</td><td style="text-align:center;padding:12px">1</td><td style="text-align:center;padding:12px">1</td><td style="text-align:center;padding:12px">5</td></tr> | |
| 129 | <tr><td style="padding:12px 18px;color:var(--col-text)">Multiple storefronts</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px">—</td><td style="text-align:center;padding:12px;color:#4ade80">✓</td></tr> | |
| 130 | <tr style="background:rgba(255,255,255,0.02)"><td style="padding:12px 18px;color:var(--col-text)">Support</td><td style="text-align:center;padding:12px">Community</td><td style="text-align:center;padding:12px">Email</td><td style="text-align:center;padding:12px">Priority email</td><td style="text-align:center;padding:12px">SLA + Slack</td></tr> | |
| 131 | </tbody> | |
| 132 | </table> | |
| 133 | </div> | |
| 134 | </section> | |
| 135 | ||
| 136 | <!-- ===== Refunds-as-credit callout ===== --> | |
| 137 | <section class="section" style="max-width:900px;margin:0 auto;padding:40px 32px"> | |
| 138 | <div class="card card-elevated" style="padding:28px;background:linear-gradient(135deg,rgba(59,130,246,0.10),rgba(124,58,237,0.10));border-color:rgba(99,102,241,0.40)"> | |
| 139 | <div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap"> | |
| 140 | <div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#7c3aed);display:grid;place-items:center;flex-shrink:0"> | |
| 141 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg> | |
| 142 | </div> | |
| 143 | <div style="flex:1;min-width:280px"> | |
| 144 | <h3 style="font-family:var(--font-display);font-size:20px;color:#fff;margin:0 0 8px">Refunds become credit on your next bill</h3> | |
| 145 | <p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:0"> | |
| 146 | We don't do card-refund-roulette. If something goes wrong, we credit your WebSTLs account and auto-apply it | |
| 147 | to your next invoice before charging your card. Cleaner books, faster resolution, and your card stays | |
| 148 | untouched whenever credit covers the bill. | |
| 149 | </p> | |
| 150 | </div> | |
| 151 | </div> | |
| 152 | </div> | |
| 153 | </section> | |
| 154 | ||
| 155 | <!-- ===== Pricing FAQ ===== --> | |
| 156 | <section class="section" style="max-width:900px;margin:0 auto;padding:40px 32px 60px"> | |
| 157 | <h2 class="section-title" style="font-size:28px;text-align:center;margin-bottom:6px">Pricing questions, answered</h2> | |
| 158 | <p class="section-sub" style="text-align:center;margin-bottom:32px">Quick reads on the stuff people usually email about before they sign up.</p> | |
| 159 | ||
| 160 | <div style="display:flex;flex-direction:column;gap:12px"> | |
| 161 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Do I need a credit card to start?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">No. The 14-day trial is free with no card required. We’ll only ask for payment if you decide to keep using WebSTLs after the trial ends. Cancel anytime — no questions.</p></details> | |
| 162 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">What is the “platform fee”?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">A small percentage of each storefront sale that funds the platform. Free = 10%, Starter = 5%, Pro = 2%, Studio = 0%. Stripe's standard processing fees (2.9% + 30¢) apply on every plan — that goes to Stripe, not us.</p></details> | |
| 163 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Can I switch plans mid-month?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">Yes. Upgrades take effect immediately and the next invoice is prorated. Downgrades take effect at your billing anchor so you keep what you paid for.</p></details> | |
| 164 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Do I have to enter a credit card for the free trial?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">For Starter and Pro free trials, yes — we collect it at signup so the upgrade is seamless on day 15. You can cancel any time before the trial ends with one click and never be charged.</p></details> | |
| 165 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">What happens if my card fails?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">We retry up to 4 times over the next week and email you on each attempt. Your storefront stays live during that window. If we still can't charge, your account moves to the free tier — no data is deleted.</p></details> | |
| 166 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Do you offer refunds?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">Yes — issued as account credit and auto-applied to your next invoice. You'll see your credit balance + ledger on the Billing page. If you cancel entirely with unused credit, we'll work out a card refund case-by-case.</p></details> | |
| 167 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Annual or monthly — which is better?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">Annual is 10× the monthly price — you get 2 months free. Pick monthly if you want to try a plan and pick annual once you're sure.</p></details> | |
| 168 | <details class="card" style="padding:18px 22px"><summary style="cursor:pointer;font-weight:600;color:#fff;font-size:15px">Is there a discount for annual prepay?</summary><p class="text-sm" style="color:var(--col-text-2);line-height:1.65;margin:10px 0 0">Yes — annual prepay is 10x the monthly rate (2 months free baked in). For Studio, multi-year deals are available through sales.</p></details> | |
| 169 | </div> | |
| 170 | ||
| 171 | <div style="text-align:center;margin-top:40px"> | |
| 172 | <a href="signup.cgi" class="btn btn-primary btn-lg">Start free — no card required</a> | |
| 173 | <p class="text-xs text-dim" style="margin-top:12px">Or <a href="contact.cgi" class="text-brand">talk to sales</a> if you want to test something specific first.</p> | |
| 174 | </div> | |
| 175 | </section> | |
| 176 | ||
| 177 | <!-- ===== Footer (shared) ===== --> | |
| 178 | <footer class="site-foot"> | |
| 179 | <div class="foot-grid"> | |
| 180 | <div class="foot-col"> | |
| 181 | <div class="flex items-center gap-3 mb-2"> | |
| 182 | <div class="brand-mark" style="width:32px;height:32px;font-size:15px">W<span>S</span></div> | |
| 183 | <div class="brand-text"><span class="brand-name">WebSTLs</span></div> | |
| 184 | </div> | |
| 185 | <p class="text-sm text-secondary" style="max-width:340px">The operating system for 3D creators. Publish, sell, and optimize from one console.</p> | |
| 186 | </div> | |
| 187 | <div class="foot-col"><h5>Platform</h5><ul><li><a href="features.cgi">Features</a></li><li><a href="tour.cgi">Tour</a></li><li><a href="why.cgi">Why WebSTLs</a></li><li><a href="pricing.cgi">Pricing</a></li><li><a href="faq.cgi">FAQ</a></li></ul></div> | |
| 188 | <div class="foot-col"><h5>Company</h5><ul><li><a href="about.cgi">About</a></li><li><a href="contact.cgi">Contact</a></li></ul></div> | |
| 189 | <div class="foot-col"><h5>Legal & Trust</h5><ul><li><a href="privacy.cgi">Privacy</a></li><li><a href="terms.cgi">Terms of Service</a></li></ul></div> | |
| 190 | </div> | |
| 191 | <div class="foot-bottom"><span>© 2026 WebSTLs, Inc. All rights reserved.</span><span>Made for creators who treat this like a business.</span></div> | |
| 192 | </footer> |