1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>Radial â Pricing</title> 7 <meta 8 name="description" 9 content="Radial pricing: your first three sites are free. Full product, any use, forever. Unlimited sites for $149 a year." 10 /> 11 <link rel="icon" type="image/png" href="assets/radial-icon.png?v=3" /> 12 <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" /> 13 <link rel="stylesheet" href="styles.css" /> 14 <style> 15 /* 16 * Pricing â LAYOUT ONLY. No new type styles: text reuses the homepage 17 * scale (16/20 like .tagline, 18/24 like .waitlist-input, 14/20 like 18 * .waitlist-msg), the --ink/--font tokens, and the .cta pill. 19 */ 20 .pricing { 21 display: flex; 22 flex-direction: column; 23 align-items: center; 24 gap: 40px; 25 width: 100%; 26 max-width: 620px; 27 } 28 29 .pricing-head { 30 display: flex; 31 flex-direction: column; 32 gap: 8px; 33 } 34 35 .pricing-intro { 36 margin: 0; 37 text-align: center; 38 font-size: 15px; 39 line-height: 20px; 40 color: var(--ink); 41 } 42 43 /* Sub line + trust notes â the 14/20 muted style, one ink step down for notes */ 44 .pricing-sub { 45 margin: 0; 46 text-align: center; 47 font-size: 13px; 48 line-height: 20px; 49 color: rgba(var(--ink-rgb), 0.6); 50 } 51 52 .pricing-notes { 53 display: flex; 54 flex-direction: column; 55 gap: 8px; 56 } 57 58 .pricing-notes p { 59 margin: 0; 60 text-align: center; 61 font-size: 13px; 62 line-height: 20px; 63 color: rgba(var(--ink-rgb), 0.5); 64 } 65 66 .pricing-notes a { 67 color: inherit; 68 } 69 70 .tiers { 71 display: flex; 72 flex-wrap: wrap; 73 justify-content: center; 74 gap: 16px; 75 width: 100%; 76 } 77 78 .tier { 79 flex: 1 1 240px; 80 display: flex; 81 flex-direction: column; 82 align-items: center; 83 gap: 20px; 84 padding: 20px 24px; 85 border-radius: 16px; 86 /* Same light grey fill as homepage .how-col cards */ 87 background: rgba(var(--ink-rgb), 0.03); 88 text-align: center; 89 } 90 91 .tier-head { 92 display: flex; 93 flex-direction: column; 94 align-items: center; 95 gap: 6px; 96 } 97 98 /* Tier label â reuses the 14/20 muted style */ 99 .tier-name { 100 font-size: 13px; 101 line-height: 20px; 102 color: rgba(var(--ink-rgb), 0.6); 103 } 104 105 /* Price chip â reuses homepage .how-n key treatment */ 106 .tier-head .how-n { 107 margin: 0; 108 } 109 110 .tier-desc { 111 margin: 0; 112 font-size: 13px; 113 line-height: 20px; 114 color: rgba(var(--ink-rgb), 0.6); 115 } 116 117 .tier-list { 118 margin: 0; 119 padding: 0; 120 list-style: none; 121 display: flex; 122 flex-direction: column; 123 gap: 8px; 124 } 125 126 .tier-list li { 127 font-size: 13px; 128 line-height: 20px; 129 color: rgba(var(--ink-rgb), 0.6); 130 } 131 132 /* Keep the CTA aligned to the bottom when tiers differ in height */ 133 .tier .cta { 134 margin-top: auto; 135 } 136 137 /* Fire pill for the Pro tier CTA */ 138 .tier [data-checkout] { 139 background: #ff7900 140 linear-gradient(180deg, rgba(255, 30, 0, 0) 0%, #ff1e00 60.58%); 141 box-shadow: inset 0 2px 3px rgba(255, 30, 0, 0.32), 142 inset 0 4px 4px rgba(255, 255, 255, 0.08); 143 } 144 .tier [data-checkout] .cta-label { 145 color: #ffffcc; 146 text-shadow: 0 0.5px 0 #dd1a00; 147 } 148 </style> 149
149<script src="/assets/theme.js"></script>
149 150
150<script defer src="/assets/site-nav.js"></script>
150 151
151<script defer src="/assets/ph.js"></script>
151 152 </head> 153 <body> 154 <main class="page"> 155 <div class="container"> 156 <div data-site-nav></div> 157 158 <div class="pricing"> 159 <div class="pricing-head"> 160 <p class="pricing-intro"> 161 Your first three sites are free. Unlimited is one flat license. 162 </p> 163 <p class="pricing-sub"> 164 The free tier is the full product, forever. Pay only when you 165 outgrow three sites. 166 </p> 167 </div> 168 169 <div class="tiers"> 170 <section class="tier"> 171 <div class="tier-head"> 172 <span class="tier-name">Free</span> 173 <kbd class="how-n">$0 / forever</kbd> 174 </div> 175 <p class="tier-desc">Open 3 sites at a time.</p> 176 <ul class="tier-list"> 177 <li>Full visual editor and live preview</li> 178 <li>Publish to your own repo</li> 179 <li>1 editor per site</li> 180 <li>Any use, commercial work included</li> 181 <li>Not a trial. Never expires</li> 182 </ul> 183 <a class="cta" href="/download"> 184 <span class="cta-label">Download</span> 185 </a> 186 </section> 187 188 <section class="tier"> 189 <div class="tier-head"> 190 <span class="tier-name">Pro</span> 191 <kbd class="how-n">$149 / year</kbd> 192 </div> 193 <p class="tier-desc"> 194 Unlimited sites. 195 </p> 196 <ul class="tier-list"> 197 <li>Everything in Free, without the site cap</li> 198 <li>Unlimited editors per site</li> 199 <li>Live share: your local preview on a radial.to link, no deploy</li> 200 <li>One license per person, on all your machines</li> 201 <li>Priority support and feature requests</li> 202 <li>30-day money-back guarantee</li> 203 </ul> 204 <button 205 class="cta" 206 type="button" 207 data-checkout 208 > 209 <span class="cta-label">Upgrade to Pro</span> 210 </button> 211 </section> 212 </div> 213 214 <div class="pricing-notes"> 215 <p> 216 If your license lapses, nothing breaks. Every existing site 217 keeps working and your review links stay live; you just can't 218 add a new site or start a live share. Your work lives in your 219 own repo, not ours. 220 </p> 221 <p> 222 Studios: seat pricing with central billing. 223 Write <a href="mailto:[email protected]">[email protected]</a>. 224 </p> 225 </div> 226 </div> 227 </div> 228 </main> 229 230 231
231<script> 232 (function () { 233 // Live: the Pro button starts Stripe checkout for everyone. (During the 234 // closed beta this was gated to ?buy=1; that gate was dropped at go-live.) 235 document.querySelectorAll('[data-checkout]').forEach(function (btn) { 236 var label = btn.querySelector('.cta-label'); 237 if (label) label.textContent = 'Upgrade to Pro'; 238 btn.addEventListener( 239 'click', 240 function (e) { 241 e.preventDefault(); 242 e.stopImmediatePropagation(); // beat the waitlist handler on this button 243 btn.disabled = true; 244 if (label) label.textContent = 'Starting checkoutâ¦'; 245 if (window.posthog && window.posthog.capture) window.posthog.capture('checkout_started'); 246 fetch('/api/checkout', { 247 method: 'POST', 248 headers: { 'Content-Type': 'application/json' }, 249 body: JSON.stringify({}), 250 }) 251 .then(function (r) { return r.json(); }) 252 .then(function (d) { 253 if (d && d.url) location.href = d.url; 254 else throw new Error('no url'); 255 }) 256 .catch(function () { 257 btn.disabled = false; 258 if (label) label.textContent = 'Upgrade to Pro'; 259 }); 260 }, 261 true // capture phase, so this runs before the waitlist listener 262 ); 263 }); 264 })(); 265 </script>
265 266 </body> 267</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.