1<!doctype html> 2<html lang="en" class="bg-slate-50"> 3<head>
4<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8937657325897344" 5 crossorigin="anonymous"></script>
vendor: 1 bytes, line 5
5
6<script 7 defer 8 data-website-id="dfid_Uo2kpGlRCbbzBG1E6iSDt" 9 data-domain="videom8.com" 10 src="https://datafa.st/js/script.js"> 11</script>
11 12<!-- Google Tag Manager -->
13<script>
vendor: 327 bytes, lines 13-17
13(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 14new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 15j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 16'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 17})(window,document,'script','dataLayer','
17GTM-T9RTK9DP
vendor: 3 bytes, line 17
17');
17</script>
17 18<!-- End Google Tag Manager --> 19 <meta charset="utf-8"> 20 <meta name="viewport" content="width=device-width, initial-scale=1"> 21 <title>Pricing â VideoM8</title> 22 <meta name="robots" content="index,follow"> 23 <meta name="description" content="Record and edit locally for free, or get cloud sharing, storage, advanced editing, publishing, analytics, and monthly AI credits with VideoM8 Pro."> 24 <link rel="canonical" href="https://videom8.com/pricing"> 25 <meta property="og:url" content="https://videom8.com/pricing"> 26 <meta property="og:type" content="website"> 27 <meta property="og:title" content="Pricing â VideoM8"> 28 <meta property="og:description" content="Record and edit locally for free, or get cloud sharing, storage, advanced editing, publishing, analytics, and monthly AI credits with VideoM8 Pro."> 29 <meta property="og:site_name" content="VideoM8"> 30 <meta property="og:locale" content="en_AU"> 31 <meta property="og:image" content="https://videom8.com/social/og.svg"> 32 <meta property="og:image:secure_url" content="https://videom8.com/social/og.svg"> 33 <meta property="og:image:type" content="image/svg+xml"> 34 <meta property="og:image:width" content="1200"> 35 <meta property="og:image:height" content="630"> 36 <meta property="og:image:alt" content="VideoM8"> 37 <meta name="twitter:card" content="summary_large_image"> 38 <meta name="twitter:domain" content="videom8.com"> 39 <meta name="twitter:title" content="Pricing â VideoM8"> 40 <meta name="twitter:description" content="Record and edit locally for free, or get cloud sharing, storage, advanced editing, publishing, analytics, and monthly AI credits with VideoM8 Pro."> 41 <meta name="twitter:image" content="https://videom8.com/social/og.svg"> 42 <meta name="twitter:image:alt" content="VideoM8"> 43
43<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"VideoM8","url":"https://videom8.com/","description":"Record and edit locally for free, or get cloud sharing, storage, advanced editing, publishing, analytics, and monthly AI credits with VideoM8 Pro.","potentialAction":{"@type":"SearchAction","target":"https://videom8.com/?q={search_term_string}","query-input":"required name=search_term_string"}}</script>
43 44
44<script defer data-site="k8kt3606" data-domain="videom8.com" src="https://piqo.app/piqo.js"></script>
vendor: 1 bytes, line 44
44
45<script> 46(function () { 47 var queue = []; 48 var blockedProp = /(^|_)(email|name|title|url|file|account|user|share)_?id?$|(^|_)(email|name|title|url|file)$/i; 49 function safeProps(input) { 50 var out = {}; 51 Object.keys(input || {}).slice(0, 10).forEach(function (key) { 52 if (blockedProp.test(key)) return; 53 var value = input[key]; 54 if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') return; 55 out[key] = String(value).slice(0, 100); 56 }); 57 return out; 58 } 59 function flush() { 60 if (typeof window.piqo !== 'function') return false; 61 while (queue.length) { 62 var event = queue.shift(); 63 window.piqo(event.name, { props: event.props }); 64 } 65 return true; 66 } 67 window.micrositePiqo = function (name, props) { 68 if (!/^[a-z][a-z0-9_]{1,49}$/.test(String(name || ''))) return; 69 queue.push({ name: String(name), props: safeProps(props) }); 70 flush(); 71 }; 72 window.addEventListener('load', flush, { once: true }); 73 window.setTimeout(flush, 2000); 74})(); 75</script>
75 76
76<script src="https://cdn.tailwindcss.com"></script>
76 77 <style> 78 #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; } 79 .checkout-success { 80 position: fixed; inset: 0; z-index: 50; 81 display: grid; place-items: center; 82 padding: 24px; 83 background: rgba(15, 23, 42, 0.45); 84 backdrop-filter: blur(6px); 85 } 86 .checkout-success.hidden { display: none; } 87 .checkout-success-card { 88 width: min(28rem, 100%); 89 text-align: center; 90 padding: 36px 28px; 91 border-radius: 20px; 92 background: #fff; 93 border: 1px solid #dbe3ef; 94 box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); 95 } 96 .checkout-success-eyebrow { 97 margin: 0; 98 font-size: 0.8rem; 99 font-weight: 700; 100 letter-spacing: 0.08em; 101 text-transform: uppercase; 102 color: #4f46e5; 103 } 104 .checkout-success-title { 105 margin: 12px 0 0; 106 font-size: 1.75rem; 107 font-weight: 800; 108 letter-spacing: -0.02em; 109 color: #0f172a; 110 } 111 .checkout-success-desc { 112 margin: 12px 0 0; 113 font-size: 0.95rem; 114 line-height: 1.55; 115 color: #475569; 116 } 117 .checkout-success-actions { 118 margin-top: 24px; 119 display: flex; 120 flex-direction: column; 121 gap: 10px; 122 } 123 .checkout-success-btn-primary { 124 display: block; 125 padding: 12px 18px; 126 border-radius: 10px; 127 font-weight: 700; 128 font-size: 0.95rem; 129 text-decoration: none; 130 background: #4f46e5; 131 color: #fff; 132 } 133 .checkout-success-btn-primary:hover { background: #4338ca; } 134 .checkout-success-btn-secondary { 135 display: block; 136 padding: 12px 18px; 137 border-radius: 10px; 138 font-weight: 600; 139 font-size: 0.9rem; 140 text-decoration: none; 141 color: #4f46e5; 142 background: #eef2ff; 143 border: 1px solid #c7d2fe; 144 } 145 .checkout-success-btn-secondary:hover { background: #e0e7ff; } 146 .pricing-billing-panel { 147 margin: 2rem auto 0; 148 max-width: 36rem; 149 padding: 14px 16px; 150 border-radius: 12px; 151 border: 1px solid #e2e8f0; 152 background: #f8fafc; 153 text-align: left; 154 } 155 .pricing-billing-panel.hidden { display: none; } 156 .pricing-billing-panel--info { border-color: #c7d2fe; background: #eef2ff; } 157 .pricing-billing-panel--warning { border-color: #fde68a; background: #fffbeb; } 158 .pricing-billing-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a; } 159 .pricing-billing-msg { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.5; color: #475569; } 160 .pricing-billing-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } 161 .pricing-billing-btn { 162 border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 14px; 163 font-size: 0.85rem; font-weight: 600; background: #fff; color: #334155; cursor: pointer; 164 } 165 .pricing-billing-btn:hover { border-color: #a5b4fc; color: #4f46e5; } 166 .pricing-billing-btn--primary { background: #4f46e5; border-color: #4f46e5; color: #fff; } 167 .pricing-billing-btn--primary:hover { background: #4338ca; } 168 .pricing-billing-hint { margin: 10px 0 0; font-size: 0.8rem; color: #64748b; line-height: 1.45; } 169 170 .pricing-brand-page .site-primary-nav { 171 border-color: rgba(104,75,180,0.14); 172 background: rgba(255,255,255,0.94); 173 box-shadow: 0 10px 30px rgba(39,36,58,0.08); 174 } 175 .pricing-brand-page #navLogoLink { color: #6f35f5; } 176 .pricing-brand-page [data-marketing-footer] { margin-top: 0; } 177 .pricing-page { 178 background: #f7f5ff; 179 color: #27243a; 180 } 181 .pricing-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; } 182 .pricing-hero { padding: 56px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr); gap: 56px; align-items: center; } 183 .pricing-hero h1 { margin: 0; max-width: 650px; font-size: clamp(2.75rem, 5vw, 4.35rem); line-height: 1; font-weight: 850; color: #27243a; text-wrap: balance; } 184 .pricing-hero p { margin: 20px 0 0; max-width: 620px; font-size: 1.04rem; line-height: 1.65; color: #5f5b72; text-wrap: pretty; } 185 .pricing-hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } 186 .pricing-primary-link, .pricing-secondary-link { 187 display: inline-flex; align-items: center; justify-content: center; gap: 8px; 188 min-height: 44px; padding: 0 18px; border-radius: 8px; font-size: 0.92rem; font-weight: 800; text-decoration: none; 189 } 190 .pricing-primary-link { background: #6f35f5; color: #fff; } 191 .pricing-primary-link:hover { background: #5b29dc; } 192 .pricing-secondary-link { background: #fff; color: #27243a; border: 1px solid rgba(104, 75, 180, 0.22); } 193 .pricing-secondary-link:hover { border-color: rgba(104, 75, 180, 0.42); } 194 .pricing-hero-card { width: 100%; max-width: 440px; justify-self: end; border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; padding: 16px; background: #fff; } 195 .pricing-video-frame { overflow: hidden; border-radius: 8px; background: #29233c; color: #fff; } 196 .pricing-video-top { display: flex; gap: 7px; padding: 13px 14px; background: #211b33; border-bottom: 1px solid rgba(255,255,255,0.08); } 197 .pricing-dot { width: 9px; height: 9px; border-radius: 999px; background: #64748b; } 198 .pricing-dot:nth-child(1) { background: #ef4444; } .pricing-dot:nth-child(2) { background: #f59e0b; } .pricing-dot:nth-child(3) { background: #22c55e; } 199 .pricing-video-body { min-height: 210px; padding: 20px; display: grid; align-content: end; background: #4f2aa8; } 200 .pricing-video-title { margin: 0; max-width: 18rem; font-size: 1.8rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; } 201 .pricing-video-meta { margin-top: 16px; display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: 0.82rem; } 202 .pricing-video-avatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; } 203 .pricing-video-bar { margin-top: 22px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; } 204 .pricing-video-bar span { display: block; width: 68%; height: 100%; background: #fff; border-radius: inherit; } 205 .pricing-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; } 206 .pricing-hero-stat { padding: 12px; border-radius: 8px; background: #f3efff; border: 1px solid #ded4ff; } 207 .pricing-hero-stat strong { display: block; font-size: 1rem; color: #27243a; } 208 .pricing-hero-stat span { display: block; margin-top: 2px; font-size: 0.72rem; color: #5f5b72; } 209 .pricing-billing-toggle { margin: 0 auto 22px; width: fit-content; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: #e9e2fb; border: 1px solid #d8ccff; } 210 .pricing-billing-toggle button { border: 0; background: transparent; cursor: pointer; padding: 8px 13px; border-radius: 8px; font-size: 0.84rem; font-weight: 750; color: #5f5b72; } 211 .pricing-billing-toggle button[aria-pressed="true"] { background: #fff; color: #27243a; box-shadow: 0 2px 10px rgba(55,41,111,0.08); } 212 .pricing-billing-discount { display: inline-flex; align-items: center; margin-left: 3px; padding: 3px 7px; border-radius: 999px; background: #dcfce7; color: #047857; font-size: 0.7rem; font-weight: 850; } 213 .pricing-section-head { margin: 64px auto 26px; max-width: 760px; text-align: center; } 214 .pricing-plans-section > .pricing-section-head:first-child { margin-top: 44px; } 215 .pricing-section-head h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; font-weight: 850; color: #27243a; text-wrap: balance; } 216 .pricing-section-head p { margin: 14px auto 0; max-width: 620px; font-size: 1rem; line-height: 1.7; color: #5f5b72; text-wrap: pretty; } 217 .pricing-plans { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } 218 .pricing-plan { 219 position: relative; display: flex; flex-direction: column; border-radius: 8px; padding: 30px; 220 background: #fff; border: 1px solid rgba(104, 75, 180, 0.16); box-shadow: 0 18px 50px rgba(55, 41, 111, 0.09); 221 } 222 .pricing-plan--pro { border: 2px solid #6f35f5; box-shadow: 0 28px 70px rgba(111, 53, 245, 0.18); } 223 .pricing-plan-label { width: fit-content; border-radius: 999px; padding: 6px 10px; background: #efe7ff; color: #6f35f5; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } 224 .pricing-plan h3 { margin: 16px 0 0; font-size: 1.45rem; font-weight: 850; letter-spacing: 0; color: #27243a; } 225 .pricing-plan-desc { margin: 9px 0 0; min-height: 3.1rem; color: #5f5b72; font-size: 0.94rem; line-height: 1.55; } 226 .pricing-price { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; color: #27243a; } 227 .pricing-price strong { min-width: 0; max-width: 100%; overflow-wrap: normal; word-break: normal; font-size: clamp(2rem, 2.5vw, 2.65rem); line-height: 0.98; font-weight: 850; letter-spacing: -0.025em; } 228 .pricing-price span { color: #5f5b72; font-size: 0.9rem; } 229 .pricing-plan-note { margin: 8px 0 0; color: #5f5b72; font-size: 0.86rem; min-height: 1.4rem; } 230 .pricing-plan-savings { margin: 8px 0 0; color: #047857; font-size: 0.84rem; font-weight: 750; min-height: 1.3rem; } 231 .pricing-plan ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } 232 .pricing-plan li { display: flex; gap: 10px; color: #334155; font-size: 0.92rem; line-height: 1.45; } 233 .pricing-plan li svg { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; color: #6f35f5; } 234 .pricing-plan-cta { margin-top: auto; padding-top: 26px; } 235 .pricing-plan-cta a, .pricing-plan-cta button { 236 width: 100%; min-height: 46px; display: inline-flex; justify-content: center; align-items: center; 237 border-radius: 8px; font-size: 0.94rem; font-weight: 800; text-decoration: none; cursor: pointer; 238 } 239 .pricing-plan-cta a { color: #6f35f5; background: #fff; border: 1px solid #d8ccff; } 240 .pricing-plan-cta a:hover { background: #f4efff; } 241 .pricing-plan-cta button { border: 0; background: #6f35f5; color: #fff; box-shadow: 0 16px 34px rgba(111,53,245,0.24); } 242 .pricing-plan-cta button:hover { background: #5b29dc; } 243 .pricing-plan-cta button:disabled { opacity: 0.72;
243 cursor: not-allowed; } 244 #manageBillingBtn.hidden { display: none !important; } 245 .pricing-active-note { margin: 18px auto 0; max-width: 650px; text-align: center; color: #5f5b72; font-size: 0.92rem; line-height: 1.6; } 246 .pricing-active-note.hidden { display: none; } 247 .pricing-credit-packs { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } 248 .pricing-credit-pack { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; background: #fff; } 249 .pricing-credit-pack h3 { margin: 0; font-size: 1.05rem; color: #27243a; } 250 .pricing-credit-pack p { margin: 5px 0 0; min-height: 2.6rem; color: #5f5b72; font-size: 0.86rem; line-height: 1.5; } 251 .pricing-credit-pack strong { font-size: 1.65rem; color: #27243a; font-variant-numeric: tabular-nums; } 252 .pricing-credit-pack button { min-height: 42px; border: 1px solid #d8ccff; border-radius: 8px; background: #fff; color: #5b29dc; font-weight: 800; cursor: pointer; } 253 .pricing-credit-pack button:hover { background: #f4efff; } 254 .pricing-credit-note { max-width: 720px; margin: 16px auto 0; color: #5f5b72; font-size: 0.86rem; line-height: 1.6; text-align: center; } 255 .pricing-proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 22px; } 256 .pricing-replaces { margin: 24px auto 0; max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } 257 .pricing-replaces span { padding: 7px 11px; border: 1px solid #ded4ff; border-radius: 999px; background: #fff; color: #5f5b72; font-size: 0.8rem; font-weight: 700; } 258 .pricing-proof-card { border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; padding: 18px; background: rgba(255,255,255,0.86); } 259 .pricing-proof-card[href] { display: block; text-decoration: none; transition: transform 0.16s ease, border-color 0.16s ease; } 260 .pricing-proof-card[href]:hover { transform: translateY(-1px); border-color: rgba(111, 53, 245, 0.38); } 261 .pricing-proof-card svg { width: 22px; height: 22px; color: #6f35f5; } 262 .pricing-proof-card strong { display: block; margin-top: 12px; color: #27243a; font-size: 0.98rem; } 263 .pricing-proof-card span { display: block; margin-top: 5px; color: #5f5b72; font-size: 0.86rem; line-height: 1.5; } 264 .pricing-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; background: #fff; box-shadow: 0 16px 48px rgba(55,41,111,0.06); } 265 .pricing-compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; } 266 .pricing-compare th { padding: 18px 20px; text-align: left; color: #27243a; background: #f7f5ff; border-bottom: 1px solid #e5ddff; } 267 .pricing-compare th:not(:first-child), .pricing-compare td:not(:first-child) { text-align: center; } 268 .pricing-compare td { padding: 15px 20px; border-bottom: 1px solid #f0ebff; color: #3d394f; } 269 .pricing-compare tr:last-child td { border-bottom: 0; } 270 .pricing-compare .pricing-compare-group td { padding: 14px 20px; background: #efe7ff; color: #5b29dc; font-size: 0.76rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; } 271 .pricing-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #efe7ff; color: #6f35f5; } 272 .pricing-dash { color: #cbd5e1; font-weight: 800; } 273 .pricing-use-cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } 274 .pricing-use-case { padding: 22px; border-radius: 8px; border: 1px solid rgba(104, 75, 180, 0.16); background: #fff; } 275 .pricing-use-case svg { width: 24px; height: 24px; color: #6f35f5; } 276 .pricing-use-case h3 { margin: 14px 0 0; font-size: 1rem; font-weight: 800; color: #27243a; } 277 .pricing-use-case h3 a { color: inherit; text-decoration: none; } 278 .pricing-use-case h3 a:hover { color: #6f35f5; } 279 .pricing-use-case p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: #5f5b72; } 280 .pricing-faq { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 72px; } 281 .pricing-faq details { border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; padding: 18px 20px; background: #fff; } 282 .pricing-faq summary { cursor: pointer; font-weight: 800; color: #27243a; } 283 .pricing-faq p { margin: 10px 0 0; color: #5f5b72; font-size: 0.92rem; line-height: 1.6; } 284 @media (max-width: 900px) { 285 .pricing-hero, .pricing-proof, .pricing-use-cases, .pricing-faq, .pricing-credit-packs { grid-template-columns: 1fr; } 286 .pricing-plans { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); } 287 .pricing-hero { padding-top: 48px; } 288 .pricing-compare-wrap { overflow-x: auto; } 289 .pricing-compare { min-width: 680px; } 290 } 291 @media (max-width: 560px) { 292 .pricing-shell { padding: 0 16px; } 293 .pricing-hero { gap: 28px; } 294 .pricing-hero-stats { gap: 6px; } 295 .pricing-hero-stat { padding: 10px 8px; } 296 .pricing-plans { grid-template-columns: 1fr; } 297 .pricing-plan { padding: 22px; } 298 .pricing-section-head { margin-top: 46px; } 299 } 300 </style> 301 <style>:root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; }:root { 302 --brand: #6f35f5; 303 --brand-hover: #5f28d9; 304 --brand-soft: #f1eafe; 305 --brand-ring: rgba(111, 53, 245, 0.13); 306 --ink: #18181b; 307 --ink-muted: #71717a; 308 --ink-faint: #a1a1aa; 309 --surface: #ffffff; 310 --surface-subtle: #fafafa; 311 --line: #e4e4e7; 312 --line-strong: #d4d4d8; 313 --page-max-width: 78rem; 314} 315html.theme-dark { 316 --brand-hover: #7d4bf7; 317 --brand-soft: rgba(111, 53, 245, 0.2); 318 --brand-ring: rgba(111, 53, 245, 0.22); 319 --ink: #fafafa; 320 --ink-muted: #a1a1aa; 321 --ink-faint: #71717a; 322 --surface: #18181b; 323 --surface-subtle: #131316; 324 --line: #27272a; 325 --line-strong: #3f3f46; 326}</style>
326<script> 327(function () { 328 try { 329 if (localStorage.getItem('microsite_theme') === 'dark') { 330 document.documentElement.classList.add('theme-dark'); 331 } 332 } catch (e) {} 333})(); 334</script>
334<style> 335 html.user-plan-pro .pro-upsell-only, 336 body[data-user-plan="pro"] .pro-upsell-only { display: none !important; } 337 html.user-plan-pro #launchBanner, 338 body[data-user-plan="pro"] #launchBanner { display: none !important; } 339 html.user-plan-pro .pro-badge, 340 html.user-plan-pro .settings-pro-pill, 341 html.user-plan-pro .record-pro-pill, 342 html.user-plan-pro .field-pro-hint, 343 html.user-plan-pro .video-owner-pro-pill, 344 body[data-user-plan="pro"] .pro-badge, 345 body[data-user-plan="pro"] .settings-pro-pill, 346 body[data-user-plan="pro"] .record-pro-pill, 347 body[data-user-plan="pro"] .field-pro-hint, 348 body[data-user-plan="pro"] .video-owner-pro-pill { display: none !important; } 349 .nav-profile-avatar { display: inline-flex; text-decoration: none; border-radius: var(--radius-pill); } 350 .nav-profile-avatar:focus-visible { outline: 2px solid #6f35f5; outline-offset: 2px; } 351 .nav-profile-avatar-inner { 352 width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); 353 background: #f1eafe; color: #6f35f5; 354 display: grid; place-items: center; overflow: hidden; 355 border: 1px solid #d9c8fb; 356 } 357 .nav-profile-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } 358 .nav-profile-avatar-inner .size-5 { width: 1.15rem; height: 1.15rem; } 359 .site-primary-nav { 360 position: sticky; 361 top: 0; 362 z-index: 100; 363 } 364 .site-breadcrumb-bar { 365 position: sticky; 366 top: var(--site-primary-nav-height, 4.5625rem); 367 z-index: 90; 368 border-bottom: 1px solid rgba(229, 231, 235, 0.95); 369 background: rgba(255, 255, 255, 0.94); 370 backdrop-filter: blur(12px); 371 } 372 .site-breadcrumb-nav { 373 overflow-x: auto; 374 scrollbar-width: none; 375 } 376 .site-breadcrumb-nav::-webkit-scrollbar {
377 display: none; 378 } 379 .site-breadcrumb-list { 380 display: flex; 381 align-items: center; 382 min-height: 2.75rem; 383 gap: 0; 384 white-space: nowrap; 385 list-style: none; 386 margin: 0; 387 padding: 0; 388 color: #6b7280; 389 font-size: 0.875rem; 390 line-height: 1.5rem; 391 } 392 .site-breadcrumb-item { 393 display: inline-flex; 394 align-items: center; 395 min-width: 0; 396 } 397 .site-breadcrumb-item + .site-breadcrumb-item::before { 398 content: "/"; 399 margin: 0 0.75rem; 400 color: #9ca3af; 401 } 402 .site-breadcrumb-link { 403 color: inherit; 404 text-decoration: none; 405 border-radius: 0.375rem; 406 outline-offset: 0.25rem; 407 } 408 .site-breadcrumb-link:hover { 409 color: #111827; 410 } 411 .site-breadcrumb-link:focus-visible { 412 outline: 2px solid #6366f1; 413 } 414 .site-breadcrumb-current { 415 max-width: min(42rem, 55vw); 416 overflow: hidden; 417 color: #111827; 418 font-weight: 600; 419 text-overflow: ellipsis; 420 } 421 @media (max-width: 640px) { 422 .site-breadcrumb-current { 423 max-width: 58vw; 424 } 425 } 426 .dark .site-breadcrumb-bar { 427 border-bottom-color: rgba(255, 255, 255, 0.1); 428 background: rgba(17, 24, 39, 0.94); 429 } 430 .dark .site-breadcrumb-list { 431 color: #9ca3af; 432 } 433 .dark .site-breadcrumb-item + .site-breadcrumb-item::before { 434 color: #6b7280; 435 } 436 .dark .site-breadcrumb-link:hover, 437 .dark .site-breadcrumb-current { 438 color: #f9fafb; 439 } 440 .nav-marketing-menu { 441 position: relative; 442 list-style: none; 443 } 444 .nav-marketing-dropdown { 445 position: relative; 446 } 447 .nav-marketing-summary { 448 display: inline-flex; 449 align-items: center; 450 gap: 0.3rem; 451 min-height: 2.25rem; 452 border-radius: var(--radius-sm); 453 padding: 0.45rem 0.55rem; 454 color: #374151; 455 cursor: pointer; 456 list-style: none; 457 user-select: none; 458 } 459 .nav-marketing-summary::-webkit-details-marker { 460 display: none; 461 } 462 .nav-marketing-summary:hover, 463 .nav-marketing-dropdown[open] .nav-marketing-summary, 464 .nav-marketing-summary.is-active { 465 background: #f8fafc; 466 color: #111827; 467 } 468 .nav-marketing-summary-caret { 469 width: 0.8rem; 470 height: 0.8rem; 471 color: #9ca3af; 472 transition: transform 0.12s ease; 473 } 474 .nav-marketing-dropdown[open] .nav-marketing-summary-caret { 475 transform: rotate(180deg); 476 } 477 .nav-marketing-panel { 478 position: absolute; 479 left: 50%; 480 top: calc(100% + 0.65rem); 481 z-index: 125; 482 width: min(42rem, calc(100vw - 2rem)); 483 transform: translateX(-50%); 484 border: 1px solid #e5e7eb; 485 border-radius: 0.875rem; 486 background: #fff; 487 padding: 0.75rem; 488 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16); 489 } 490 .nav-marketing-panel--compact { 491 width: min(24rem, calc(100vw - 2rem)); 492 } 493 .nav-marketing-panel-grid { 494 display: grid; 495 grid-template-columns: repeat(3, minmax(0, 1fr)); 496 gap: 0.5rem; 497 } 498 .nav-marketing-panel-grid--two { 499 grid-template-columns: repeat(2, minmax(0, 1fr)); 500 } 501 .nav-marketing-section { 502 min-width: 0; 503 padding: 0.35rem; 504 } 505 .nav-marketing-section-title { 506 margin: 0 0 0.4rem; 507 color: #64748b; 508 font-size: 0.72rem; 509 font-weight: 800; 510 line-height: 1; 511 text-transform: uppercase; 512 } 513 .nav-marketing-panel a { 514 display: block; 515 border-radius: var(--radius-sm); 516 padding: 0.55rem 0.65rem; 517 color: #1f2937; 518 text-decoration: none; 519 } 520 .nav-marketing-panel a:hover, 521 .nav-marketing-panel a.is-active { 522 background: #f8fafc; 523 color: #4338ca; 524 } 525 .nav-marketing-link-title { 526 display: block; 527 font-size: 0.9rem; 528 font-weight: 750; 529 line-height: 1.25; 530 } 531 .nav-marketing-link-desc { 532 display: block; 533 margin-top: 0.16rem; 534 color: #64748b; 535 font-size: 0.78rem; 536 font-weight: 500; 537 line-height: 1.35; 538 } 539 html:has(> body.nav-logged-in:not(.share-public-page)) { background: #fafafa; }
540 body.nav-logged-in { 541 padding-left: var(--nav-sidebar-width, 18rem); 542 background: #fff; 543 box-sizing: border-box; 544 } 545 body.nav-logged-in:not(.share-public-page) { 546 position: relative; 547 min-height: 100vh; 548 padding-top: 0.5rem; 549 padding-right: 0.5rem; 550 padding-bottom: 0.5rem; 551 background: transparent; 552 } 553 body.nav-logged-in:not(.share-public-page)::before { 554 content: ""; 555 position: absolute; 556 z-index: -1; 557 inset: 0.5rem 0.5rem 0.5rem var(--nav-sidebar-width, 18rem); 558 border: 1px solid #e4e4e7; 559 border-radius: 0.75rem; 560 background: #fff; 561 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 562 pointer-events: none; 563 } 564 body.nav-logged-in:not(.share-public-page)::after { 565 content: ""; 566 position: fixed; 567 top: 0; 568 right: 0; 569 left: var(--nav-sidebar-width, 18rem); 570 height: 0.5rem; 571 z-index: 96; 572 background: #fafafa; 573 pointer-events: none; 574 } 575 body.nav-logged-in.nav-sidebar-collapsed { 576 padding-left: 3rem; 577 } 578 body.nav-logged-in.nav-sidebar-collapsed:not(.share-public-page)::before { left: 3rem; } 579 body.nav-logged-in.nav-sidebar-collapsed:not(.share-public-page)::after { left: 3rem; } 580 .nav-logged-in-topbar { 581 display: none; 582 } 583 body.nav-logged-in .nav-logged-in-topbar { 584 position: sticky; 585 top: 0.5rem; 586 z-index: 95; 587 display: flex; 588 min-height: 3rem; 589 align-items: center; 590 gap: 0.75rem; 591 border: 1px solid #e4e4e7; 592 border-radius: 0.75rem 0.75rem 0 0; 593 background: rgba(255, 255, 255, 0.96); 594 padding: 0 1.5rem; 595 backdrop-filter: blur(8px); 596 box-sizing: border-box; 597 } 598 body.nav-logged-in .nav-marketing-menu { 599 display: none !important; 600 } 601 body.nav-logged-in #navPricingLink { 602 display: none !important; 603 } 604 .nav-sidebar-toggle, 605 .nav-topbar-sidebar-toggle { 606 display: none; 607 align-items: center; 608 justify-content: center; 609 width: 2.25rem; 610 height: 2.25rem; 611 border: 1px solid #e2e8f0; 612 border-radius: var(--radius-sm); 613 background: #fff; 614 color: #475569; 615 cursor: pointer; 616 flex-shrink: 0; 617 } 618 .nav-sidebar-toggle:hover, 619 .nav-topbar-sidebar-toggle:hover { 620 border-color: #d9c8fb; 621 background: #f1eafe; 622 color: #6f35f5; 623 } 624 .nav-sidebar-toggle svg, 625 .nav-topbar-sidebar-toggle svg { 626 width: 1.15rem; 627 height: 1.15rem; 628 } 629 body.nav-sidebar-collapsed .nav-sidebar-toggle svg { 630 transform: rotate(180deg); 631 } 632 body.nav-logged-in .nav-sidebar-toggle, 633 body.nav-logged-in.nav-sidebar-collapsed .nav-topbar-sidebar-toggle { 634 display: inline-flex; 635 } 636 body.nav-logged-in .nav-topbar-sidebar-toggle { 637 display: inline-flex; 638 border: 0; 639 border-radius: 0.375rem; 640 background: transparent; 641 } 642 body.nav-logged-in .nav-topbar-sidebar-toggle:hover { 643 border-color: transparent; 644 background: #f1f5f9; 645 color: #0f172a; 646 } 647 .nav-page-context { 648 display: flex; 649 min-width: 0; 650 align-items: center; 651 gap: 0.75rem; 652 } 653 .nav-page-separator { 654 width: 1px; 655 height: 1rem; 656 flex: 0 0 auto; 657 background: #e4e4e7; 658 } 659 .nav-page-breadcrumb { 660 min-width: 0; 661 } 662 .nav-page-breadcrumb ol { 663 display: flex; 664 min-width: 0; 665 align-items: center; 666 gap: 0.625rem; 667 margin: 0; 668 padding: 0; 669 list-style: none; 670 color: #71717a; 671 font-size: 0.875rem; 672 } 673 .nav-page-breadcrumb li { 674 display: inline-flex; 675 min-width: 0; 676 align-items: center; 677 } 678 .nav-page-breadcrumb li[aria-current="page"] { 679 overflow: hidden; 680 color: #18181b; 681 font-weight: 500; 682 text-overflow: ellipsis; 683 white-space: nowrap; 684 } 685 .nav-page-breadcrumb a { 686 color: inherit; 687 text-decoration: none; 688 } 689 .nav-page-breadcrumb a:hover { color: #0f172a; } 690 .nav-page-breadcrumb svg { 691 width: 0.875rem; 692 height: 0.875rem; 693 color: #94a3b8; 694 } 695 .nav-sidebar-header { 696 display: flex; 697 align-items: center; 698 gap: 0.75rem; 699 min-width: 0; 700 border-radius: 0.375rem; 701 } 702 .nav-sidebar-header > a { 703 font-size: 1rem; 704 font-weight: 600; 705 letter-spacing: -0.01em; 706 color: #18181b; 707 text-decoration: none; 708 } 709 .nav-logged-in-search { 710 position: relative; 711 flex: 1; 712 min-width: 0; 713 } 714 .nav-logged-in-search svg { 715 position: absolute; 716 left: 0.875rem; 717 top: 50%; 718 width: 1rem; 719 height: 1rem; 720 color: #94a3b8; 721 pointer-events: none; 722 transform: translateY(-50%); 723 } 724 .nav-logged-in-search input { 725 width: 100%; 726 border: 1px solid transparent; 727 border-radius: 0.375rem; 728 background: transparent; 729 padding: 0.7rem 4.25rem 0.7rem 2.4rem; 730 font: inherit; 731 font-size: 0.9rem; 732 color: #18181b; 733 outline: none; 734 box-sizing: border-box; 735 cursor: pointer; 736 } 737 .nav-logged-in-search input::placeholder { color: #94a3b8; } 738 .nav-logged-in-search input:focus { 739 border-color: #d9c8fb; 740 background: #fff; 741 box-shadow: 0 0 0 3px rgba(111, 53, 245, 0.12); 742 } 743 .nav-logged-in-search kbd { 744 position: absolute; 745 right: 0.7rem; 746 top: 50%; 747 display: inline-flex; 748 align-items: center; 749 gap: 0.15rem; 750 border: 1px solid #cbd5e1; 751 border-bottom-color: #94a3b8; 752 border-radius: 0.45rem; 753 background: #fff; 754 padding: 0.14rem 0.45rem; 755 color: #334155; 756 font-size: 0.72rem; 757 font-weight: 700; 758 font-family: inherit; 759 box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); 760 pointer-events: none; 761 transform: translateY(-50%); 762 } 763 .nav-topbar-actions { 764 display: flex; 765 align-items: center; 766 gap: 0.75rem; 767 list-style: none; 768 margin: 0; 769 padding: 0; 770 } 771 .nav-theme-toggle { 772 display: inline-flex; 773 align-items: center; 774 justify-content: center; 775 width: 2.25rem; 776 height: 2.25rem; 777 margin-left: auto; 778 border: 0; 779 border-radius: 0.375rem; 780 background: transparent; 781 color: #475569; 782 cursor: pointer; 783 flex-shrink: 0; 784 } 785 .nav-theme-toggle:hover { background: #f1f5f9; color: #0f172a; } 786 .nav-theme-toggle svg { width: 1.05rem; height: 1.05rem; } 787 .nav-theme-toggle .nav-theme-icon-sun { display: none; } 788 html.theme-dark .nav-theme-toggle .nav-theme-icon-sun { display: block; } 789 html.theme-dark .nav-theme-toggle .nav-theme-icon-moon { display: none; } 790 .nav-topbar-actions > li { 791 list-style: none; 792 margin: 0; 793 padding: 0; 794 } 795 .nav-topbar-action { 796 display: inline-flex; 797 align-items: center; 798 justify-content: center; 799 min-height: 2.25rem; 800 border-radius: var(--radius-sm); 801 padding: 0.5rem 0.85rem; 802 font-size: 0.875rem; 803 font-weight: 700; 804 line-height: 1; 805 text-decoration: none; 806 white-space: nowrap; 807 box-sizing: border-box; 808 } 809 .nav-topbar-action--secondary { 810 background: #fff; 811 color: #18181b; 812 box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(24, 24, 27, 0.04); 813 } 814 .nav-topbar-action--secondary:hover { background: #f4f4f5; } 815 .nav-topbar-action--primary { 816 background: #6f35f5; 817 color: #fff; 818 box-shadow: 0 1px 2px rgba(111, 53, 245, 0.24); 819 } 820 .nav-topbar-action--primary:hover { background: #5f28d9; } 821 .nav-logged-in-topbar .nav-activity-wrap { 822 display: none !important; 823 }
824 body.nav-logged-in .site-primary-nav { 825 position: fixed; 826 inset: 0 auto 0 0; 827 width: var(--nav-sidebar-width, 18rem); 828 height: auto; 829 max-height: none; 830 overflow-x: hidden; 831 overflow-y: auto; 832 overscroll-behavior: contain; 833 border: 0; 834 border-radius: 0; 835 background: transparent; 836 box-shadow: none; 837 } 838 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav { 839 width: 3rem; 840 } 841 .nav-sidebar-resizer { 842 display: none; 843 } 844 body.nav-logged-in .nav-sidebar-resizer { 845 position: fixed; 846 inset: 0 auto 0 calc(var(--nav-sidebar-width, 18rem) - 3px); 847 z-index: 101; 848 display: block; 849 width: 6px; 850 border: 0; 851 background: transparent; 852 cursor: col-resize; 853 } 854 body.nav-logged-in .nav-sidebar-resizer::after { 855 content: ""; 856 position: absolute; 857 inset: 0 2px; 858 background: transparent; 859 transition: background 0.12s ease; 860 } 861 body.nav-logged-in .nav-sidebar-resizer:hover::after, 862 body.nav-logged-in .nav-sidebar-resizer:focus-visible::after, 863 body.nav-sidebar-resizing .nav-sidebar-resizer::after { 864 background: #d9c8fb; 865 } 866 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-resizer { 867 display: none; 868 } 869 body.nav-logged-in .site-primary-nav > div { 870 min-height: 100%; 871 max-width: none; 872 flex-direction: column; 873 align-items: stretch; 874 justify-content: flex-start; 875 gap: 0.75rem; 876 padding: 0.5rem 0.625rem; 877 } 878 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav > div { 879 align-items: center; 880 gap: 0.75rem; 881 padding: 0.5rem 0.25rem; 882 } 883 body.nav-logged-in .nav-sidebar-header { width: 100%; } 884 body.nav-logged-in .nav-sidebar-header > a { 885 display: flex; 886 align-items: center; 887 min-height: 2rem; 888 padding: 0 0.625rem; 889 } 890 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header { width: 2.5rem; } 891 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a { 892 display: flex; 893 width: 2.5rem; 894 overflow: hidden; 895 justify-content: center; 896 font-size: 0; 897 } 898 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a::first-letter { 899 font-size: 1.125rem; 900 } 901 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-toggle { 902 justify-content: center; 903 } 904 body.nav-logged-in .nav-mobile-trigger { display: none; } 905 body.nav-logged-in .site-primary-nav #navPrimaryLinks { 906 width: 100%; 907 flex: 1; 908 flex-direction: column; 909 align-items: stretch; 910 justify-content: flex-start; 911 gap: 0.125rem; 912 } 913 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks { 914 align-items: center; 915 gap: 0.35rem; 916 } 917 body.nav-logged-in .site-primary-nav #navPrimaryLinks > li { 918 width: 100%; 919 } 920 body.nav-logged-in .site-primary-nav #navPrimaryLinks a, 921 body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"] { 922 display: flex; 923 width: 100%; 924 align-items: center; 925 justify-content: flex-start; 926 min-height: 2rem; 927 gap: 0.625rem; 928 border-radius: 0.375rem; 929 padding: 0.4375rem 0.625rem; 930 color: #3f3f46; 931 font-weight: 500; 932 box-sizing: border-box; 933 } 934 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a, 935 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks button, 936 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar { 937 width: 2.25rem; 938 height: 2.25rem; 939 min-height: 2.25rem; 940 justify-content: center; 941 padding: 0; 942 } 943 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a span:not(.nav-link-icon), 944 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar::after, 945 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-plan-badge, 946 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-dropdown,
947 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-library-tree { 948 display: none !important; 949 } 950 .nav-queue-badge { 951 margin-left: auto; 952 min-width: 1.25rem; 953 height: 1.15rem; 954 padding: 0 0.3rem; 955 display: inline-flex; 956 align-items: center; 957 justify-content: center; 958 border-radius: var(--radius-pill); 959 background: #f4f4f5; 960 color: #71717a; 961 font-size: 0.68rem; 962 font-weight: 700; 963 font-variant-numeric: tabular-nums; 964 } 965 html.theme-dark .nav-queue-badge { background: #27272a; color: #a1a1aa; } 966 .nav-collapsed-hover-label { 967 position: fixed; 968 z-index: 150; 969 transform: translateY(-50%); 970 pointer-events: none; 971 max-width: min(14rem, calc(100vw - 6.5rem)); 972 overflow: hidden; 973 text-overflow: ellipsis; 974 white-space: nowrap; 975 border: 1px solid rgba(226, 232, 240, 0.95); 976 border-radius: var(--radius-sm); 977 background: rgba(15, 23, 42, 0.92); 978 color: #fff; 979 padding: 0.34rem 0.55rem; 980 font-size: 0.76rem; 981 font-weight: 700; 982 line-height: 1; 983 box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); 984 } 985 .nav-collapsed-hover-label[hidden] { 986 display: none !important; 987 } 988 body.nav-logged-in .site-primary-nav .nav-link-icon { 989 display: inline-flex; 990 align-items: center; 991 justify-content: center; 992 width: 1rem; 993 height: 1rem; 994 color: #52525b; 995 flex-shrink: 0; 996 } 997 body.nav-logged-in .site-primary-nav .nav-link-icon svg { 998 width: 1rem; 999 height: 1rem; 1000 } 1001 body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover, 1002 body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover { 1003 background: #f4f4f5; 1004 color: #18181b; 1005 } 1006 body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover .nav-link-icon, 1007 body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover .nav-link-icon { 1008 color: #0f172a; 1009 } 1010 body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600, 1011 body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 { 1012 background: #f1eafe; 1013 color: #6f35f5; 1014 font-weight: 600; 1015 } 1016 body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600 .nav-link-icon, 1017 body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 .nav-link-icon { 1018 color: #6f35f5; 1019 } 1020 body.nav-logged-in .site-primary-nav #navAuthSignedIn { 1021 margin-top: auto; 1022 padding-top: 0.5rem; 1023 border-top: 1px solid #e4e4e7; 1024 } 1025 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navAuthSignedIn { 1026 padding-top: 0.75rem; 1027 } 1028 body.nav-logged-in .site-primary-nav .nav-profile-menu, 1029 body.nav-logged-in .site-primary-nav .nav-profile-avatar { 1030 width: 100%; 1031 } 1032 body.nav-logged-in .site-primary-nav .nav-profile-avatar { 1033 align-items: center; 1034 justify-content: flex-start; 1035 min-height: 2.75rem; 1036 gap: 0.625rem; 1037 border-radius: 0.375rem; 1038 padding: 0.375rem 0.5rem; 1039 } 1040 body.nav-logged-in .site-primary-nav .nav-profile-avatar:hover { 1041 background: #f4f4f5; 1042 } 1043 body.nav-logged-in .site-primary-nav .nav-profile-avatar::after { 1044 content: "Account"; 1045 font-size: 0.875rem; 1046 font-weight: 500; 1047 color: #18181b; 1048 } 1049 body.nav-logged-in .site-primary-nav .nav-profile-dropdown { 1050 position: static; 1051 margin-top: 0.35rem; 1052 width: 100%; 1053 min-width: 0; 1054 box-shadow: none; 1055 box-sizing: border-box; 1056 } 1057 body.nav-logged-in .site-primary-nav .nav-plan-badge { 1058 right: 0.35rem; 1059 bottom: 0.35rem; 1060 } 1061 .nav-library-tree { display: none; } 1062 .nav-sidebar-disclosure { 1063 width: 100%; 1064 } 1065 .nav-sidebar-disclosure > summary { 1066 display: flex; 1067 align-items: center; 1068 gap: 0.625rem; 1069 min-height: 2rem; 1070 box-sizing: border-box; 1071 border-radius: 0.375rem; 1072 padding: 0.4375rem 0.625rem; 1073 color: #3f3f46; 1074 cursor: pointer; 1075 font-size: 0.875rem; 1076 font-weight: 500; 1077 list-style: none; 1078 } 1079 .nav-sidebar-disclosure > summary::-webkit-details-marker { display: none; } 1080 .nav-sidebar-disclosure > summary:hover { background: #f8fafc; color: #0f172a; } 1081 .nav-sidebar-disclosure > summary:focus-visible { 1082 outline: 2px solid #c9b1fa; 1083 outline-offset: 2px; 1084 } 1085 .nav-sidebar-disclosure > summary .nav-link-icon { color: #64748b; } 1086 .nav-disclosure-chevron { 1087 display: inline-flex; 1088 margin-left: auto; 1089 color: #94a3b8; 1090 transition: transform 0.12s ease; 1091 } 1092 .nav-sidebar-disclosure[open] > summary .nav-disclosure-chevron { transform: rotate(180deg); } 1093 .nav-disclosure-links { 1094 display: flex; 1095 flex-direction: column; 1096 gap: 0.125rem; 1097 margin: 0; 1098 padding: 0.125rem 0 0.25rem; 1099 list-style: none; 1100 }
1101 body.nav-logged-in .site-primary-nav #navPrimaryLinks .nav-disclosure-links a { 1102 min-height: 2.2rem; 1103 padding-top: 0.45rem; 1104 padding-bottom: 0.45rem; 1105 color: #475569; 1106 font-size: 0.82rem; 1107 } 1108 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-disclosure > summary { 1109 justify-content: center; 1110 padding: 0.65rem; 1111 } 1112 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-disclosure > summary > span:not(.nav-link-icon), 1113 body.nav-logged-in.nav-sidebar-collapsed .nav-disclosure-links, 1114 body.nav-logged-in.nav-sidebar-collapsed .nav-disclosure-content { 1115 display: none !important; 1116 } 1117 .nav-disclosure-content { padding-top: 0.125rem; } 1118 body.nav-logged-in .nav-library-tree { 1119 display: block; 1120 margin-top: 0.125rem; 1121 } 1122 .nav-library-section { margin-top: 0.85rem; } 1123 .nav-library-section[hidden] { display: none !important; } 1124 .nav-library-section-head { 1125 display: flex; 1126 align-items: center; 1127 justify-content: space-between; 1128 gap: 0.5rem; 1129 padding: 0 0.35rem 0.35rem 0.75rem; 1130 } 1131 .nav-library-section-title { 1132 font-size: 0.75rem; 1133 font-weight: 500; 1134 letter-spacing: 0; 1135 line-height: 1; 1136 text-transform: none; 1137 color: #71717a; 1138 } 1139 .nav-library-add { 1140 display: inline-flex; 1141 align-items: center; 1142 justify-content: center; 1143 width: 1.65rem; 1144 height: 1.65rem; 1145 border: 1px solid #e2e8f0; 1146 border-radius: var(--radius-sm); 1147 background: #fff; 1148 color: #475569; 1149 font: inherit; 1150 font-size: 1rem; 1151 font-weight: 800; 1152 line-height: 1; 1153 cursor: pointer; 1154 } 1155 .nav-library-add:hover { 1156 border-color: #d9c8fb; 1157 background: #f1eafe; 1158 color: #6f35f5; 1159 } 1160 .nav-library-list { 1161 display: flex; 1162 flex-direction: column; 1163 gap: 0.125rem; 1164 } 1165 .nav-library-list[role="tree"], 1166 .nav-library-subtree[role="group"] { 1167 list-style: none; 1168 margin: 0; 1169 padding: 0; 1170 } 1171 .nav-library-node { 1172 list-style: none; 1173 margin: 0; 1174 padding: 0; 1175 } 1176 .nav-library-folder { 1177 border-radius: var(--radius-md); 1178 } 1179 .nav-library-folder-row { 1180 display: flex; 1181 align-items: center; 1182 gap: 0.2rem; 1183 min-width: 0; 1184 border: 1px solid transparent; 1185 border-radius: var(--radius-md); 1186 padding: 0.125rem; 1187 } 1188 .nav-library-folder-row:hover, 1189 .nav-library-folder.is-active .nav-library-folder-row { 1190 border-color: #e2e8f0; 1191 background: #f8fafc; 1192 } 1193 .nav-library-drag-handle { 1194 display: inline-flex; 1195 align-items: center; 1196 justify-content: center; 1197 width: 1rem; 1198 min-width: 1rem; 1199 min-height: 1.75rem; 1200 color: #94a3b8; 1201 cursor: grab; 1202 font-size: 0.72rem; 1203 line-height: 1; 1204 opacity: 0.55; 1205 user-select: none; 1206 } 1207 .nav-library-folder-row:hover .nav-library-drag-handle, 1208 .nav-library-file-item:hover .nav-library-drag-handle { color: #64748b; opacity: 1; } 1209 .nav-library-folder:active .nav-library-drag-handle, 1210 .nav-library-file-item:active .nav-library-drag-handle { cursor: grabbing; } 1211 .nav-library-folder-toggle { 1212 display: flex; 1213 align-items: center; 1214 gap: 0.45rem; 1215 flex: 1; 1216 min-width: 0; 1217 min-height: 2rem; 1218 border: 0; 1219 border-radius: var(--radius-sm); 1220 background: transparent; 1221 color: #1e293b; 1222 cursor: pointer; 1223 padding: 0.42rem 0.45rem; 1224 text-align: left; 1225 box-sizing: border-box; 1226 } 1227 .nav-library-folder-toggle:hover, 1228 .nav-library-folder-toggle:focus-visible { 1229 background: #f8fafc; 1230 color: #0f172a; 1231 outline: 0; 1232 } 1233 .nav-library-folder.is-active .nav-library-folder-toggle { color: #0f172a; } 1234 .nav-library-caret { 1235 display: inline-flex; 1236 align-items: center; 1237 justify-content: center; 1238 width: 0.8rem; 1239 color: #94a3b8; 1240 flex-shrink: 0; 1241 transition: transform 0.12s ease; 1242 } 1243 .nav-library-folder.is-expanded .nav-library-caret { 1244 transform: rotate(90deg); 1245 } 1246 .nav-library-folder[data-nav-depth="1"] .nav-library-folder-row { margin-left: 0.9rem; } 1247 .nav-library-folder[data-nav-depth="2"] .nav-library-folder-row { margin-left: 1.8rem; } 1248 .nav-library-folder[data-nav-depth="3"] .nav-library-folder-row { margin-left: 2.7rem; } 1249 .nav-library-folder[data-nav-depth="4"] .nav-library-folder-row { margin-left: 3.6rem; } 1250 .nav-library-folder-icon { 1251 position: relative; 1252 width: 1.05rem; 1253 height: 0.82rem; 1254 margin-right: 0.05rem; 1255 border-radius: 0.18rem 0.2rem 0.2rem 0.2rem; 1256 background: var(--folder-color, #6f35f5); 1257 box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.08); 1258 opacity: 0.9; 1259 flex-shrink: 0; 1260 } 1261 .nav-library-folder-icon::before { 1262 content: ""; 1263 position: absolute; 1264 left: 0.1rem; 1265 top: -0.2rem; 1266 width: 0.52rem; 1267 height: 0.28rem; 1268 border-radius: 0.18rem 0.18rem 0 0; 1269 background: inherit; 1270 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); 1271 } 1272 .nav-library-folder-name, 1273 .nav-library-file-name { 1274 min-width: 0; 1275 overflow: hidden; 1276 text-overflow: ellipsis; 1277 white-space: nowrap; 1278 } 1279 .nav-library-folder-name { 1280 flex: 1; 1281 font-size: 0.82rem; 1282 font-weight: 700; 1283 } 1284 .nav-library-count { 1285 display: inline-flex; 1286 align-items: center; 1287 justify-content: center; 1288 min-width: 1.2rem; 1289 height: 1.15rem; 1290 padding: 0 0.3rem; 1291 border-radius: var(--radius-pill); 1292 background: #eef2f7; 1293 color: #475569; 1294 font-size: 0.68rem; 1295 font-weight: 800; 1296 font-variant-numeric: tabular-nums; 1297 flex-shrink: 0; 1298 } 1299 .nav-library-favorite { 1300 display: inline-flex; 1301 align-items: center; 1302 justify-content: center; 1303 width: 1.65rem; 1304 height: 1.65rem; 1305 border: 0; 1306 border-radius: var(--radius-sm); 1307 background: transparent; 1308 color: #cbd5e1; 1309 cursor: pointer; 1310 flex-shrink: 0; 1311 opacity: 0; 1312 transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease; 1313 } 1314 .nav-library-folder-row:hover .nav-library-favorite, 1315 .nav-library-favorite:focus-visible, 1316 .nav-library-favorite.is-on { 1317 opacity: 1; 1318 } 1319 .nav-library-favorite:hover { background: #f8fafc; color: #64748b; } 1320 .nav-library-favorite.is-on { color: #f59e0b; } 1321 .nav-library-favorite svg { width: 1rem; height: 1rem; } 1322 .nav-library-file-list { 1323 margin: 0.125rem 0 0.45rem 1.95rem; 1324 padding: 0 0 0 0.75rem; 1325 border-left: 1px solid #e2e8f0; 1326 list-style: none; 1327 display: flex; 1328 flex-direction: column; 1329 gap: 0.0625rem; 1330 } 1331 .nav-library-subtree { 1332 margin: 0.125rem 0 0.35rem 1rem; 1333 padding-left: 0.7rem; 1334 border-left: 1px solid #e2e8f0; 1335 } 1336 .nav-library-folder.is-drop-target > .nav-library-folder-row { 1337 border-color: #9a6df8; 1338 background: #f1eafe; 1339 box-shadow: inset 0 0 0 1px #d9c8fb; 1340 } 1341 .nav-library-folder.is-folder-dragging { 1342 opacity: 0.58; 1343 } 1344 .nav-library-file-link { 1345 display: flex; 1346 align-items: center; 1347 gap: 0.45rem; 1348 min-height: 1.55rem; 1349 border-radius: var(--radius-sm); 1350 padding: 0.25rem 0.45rem 0.25rem 0.35rem; 1351 color: #475569; 1352 font-size: 0.76rem; 1353 font-weight: 650; 1354 text-decoration: none; 1355 flex: 1; 1356 min-width: 0; 1357 } 1358 .nav-library-file-link:hover { background: #f8fafc; color: #1e293b; } 1359 .nav-library-file-icon { 1360 position: relative; 1361 width: 0.68rem; 1362 height: 0.82rem; 1363 border-radius: 0.12rem; 1364 background: #ef4444; 1365 box-shadow: inset 0 0 0 1px rgba(127, 29, 29, 0.1); 1366 flex-shrink: 0; 1367 } 1368 .nav-library-file-icon::after { 1369 content: ""; 1370 position: absolute; 1371 right: 0; 1372 top: 0; 1373 border-top: 0.22rem solid #fecaca; 1374 border-left: 0.22rem solid transparent; 1375 } 1376 .nav-library-name-form { 1377 margin: 0.15rem 0 0.45rem; 1378 padding: 0.5rem; 1379 border: 1px solid #dbe4f0; 1380 border-radius: var(--radius-sm); 1381 background: #fff; 1382 } 1383 .nav-library-name-input { 1384 width: 100%; 1385 min-width: 0; 1386 border: 1px solid #c9b1fa; 1387 border-radius: var(--radius-sm); 1388 padding: 0.45rem 0.5rem; 1389 color: #0f172a; 1390 font-size: 0.82rem; 1391 font-weight: 700; 1392 box-sizing: border-box; 1393 } 1394 .nav-library-name-input:focus { 1395 outline: 2px solid #d9c8fb; 1396 outline-offset: 1px; 1397 } 1398 .nav-library-name-actions { 1399 display: flex; 1400 align-items: center; 1401 gap: 0.375rem; 1402 margin-top: 0.45rem; 1403 } 1404 .nav-library-name-save, 1405 .nav-library-name-cancel { 1406 border: 0; 1407 border-radius: 0.45rem; 1408 padding: 0.36rem 0.55rem; 1409 font-size: 0.74rem; 1410 font-weight: 800; 1411 cursor: pointer; 1412 } 1413 .nav-library-name-save { background: #6f35f5; color: #fff; } 1414 .nav-library-name-save:hover { background: #5f28d9; } 1415 .nav-library-name-cancel { background: transparent; color: #64748b; } 1416 .nav-library-name-cancel:hover { background: #f1f5f9; color: #334155; } 1417 .nav-library-folder.is-drop-target .nav-library-folder-toggle, 1418 #navStuffLink.is-drop-target a { 1419 outline: 2px solid #6f35f5; 1420 outline-offset: 2px; 1421 background: #f1eafe; 1422 } 1423 .nav-library-file-item { display: flex; align-items: center; gap: 0.15rem; cursor: grab; } 1424 .nav-library-file-item:active { cursor: grabbing; } 1425 .nav-library-empty { 1426 margin: 0.35rem 0.75rem 0; 1427 color: #64748b; 1428 font-size: 0.78rem; 1429 font-weight: 600; 1430 } 1431 .nav-profile-menu { position: relative; z-index: 1; } 1432 .nav-profile-menu .nav-profile-avatar { 1433 position: relative; border: 0; padding: 0; cursor: pointer; background: transparent; 1434 } 1435 .nav-plan-badge { 1436 position: absolute; right: -4px; bottom: -4px; 1437 font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; 1438 line-height: 1; padding: 2px 5px; border-radius: var(--radius-pill); 1439 background: #6f35f5; color: #fff; border: 2px solid #fff; 1440 box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18); 1441 } 1442 .nav-plan-badge.hidden { display: none !important; } 1443 .nav-profile-dropdown { 1444 position: absolute; right: 0; top: calc(100% + 8px); z-index: 120; 1445 min-width: 11.5rem; padding: 6px; 1446 border-radius: var(--radius-md); border: 1px solid #e2e8f0; 1447 background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); 1448 } 1449 .nav-profile-dropdown[hidden] { display: none !important; } 1450 .nav-profile-dropdown a, 1451 .nav-profile-dropdown button { 1452 display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left; 1453 border: 0; background: transparent; cursor: pointer; 1454 padding: 9px 12px; border-radius: var(--radius-sm); 1455 font-size: 0.875rem; font-weight: 600; color: #1e293b; 1456 text-decoration: none; box-sizing: border-box; 1457 } 1458 .nav-profile-dropdown a:hover, 1459 .nav-profile-dropdown button:hover { background: #f1f5f9; color: #0f172a; } 1460 .nav-profile-dropdown .nav-menu-divider { 1461 margin: 4px 8px; border: 0; border-top: 1px solid #e2e8f0; height: 0; 1462 } 1463 .nav-profile-dropdown .nav-menu-signout { color: #64748b; } 1464 .nav-record-cta { list-style: none; } 1465 .site-primary-nav #navPrimaryLinks .nav-record-cta a { 1466 background: #6f35f5; 1467 color: #fff !important; 1468 font-weight: 500; 1469 box-shadow: 0 1px 2px rgba(111, 53, 245, 0.24); 1470 } 1471 .site-primary-nav #navPrimaryLinks .nav-record-cta a .nav-link-icon { 1472 color: #fff !important; 1473 } 1474 .site-primary-nav #navPrimaryLinks .nav-record-cta a:hover { 1475 background: #5f28d9; 1476 color: #fff; 1477 }
1478 body.nav-logged-in [data-app-footer] { display: none; } 1479 .nav-mobile-trigger { 1480 display: none; 1481 width: 2.5rem; 1482 height: 2.5rem; 1483 align-items: center; 1484 justify-content: center; 1485 border: 1px solid #e5e7eb; 1486 border-radius: var(--radius-sm); 1487 background: #fff; 1488 color: #111827; 1489 cursor: pointer; 1490 } 1491 .nav-mobile-trigger:hover { background: #f8fafc; } 1492 .nav-mobile-trigger-lines, 1493 .nav-mobile-trigger-lines::before, 1494 .nav-mobile-trigger-lines::after { 1495 display: block; 1496 width: 1.1rem; 1497 height: 2px; 1498 border-radius: var(--radius-pill); 1499 background: currentColor; 1500 transition: transform 0.16s ease, opacity 0.16s ease; 1501 } 1502 .nav-mobile-trigger-lines { position: relative; } 1503 .nav-mobile-trigger-lines::before, 1504 .nav-mobile-trigger-lines::after { 1505 content: ""; 1506 position: absolute; 1507 left: 0; 1508 } 1509 .nav-mobile-trigger-lines::before { transform: translateY(-6px); } 1510 .nav-mobile-trigger-lines::after { transform: translateY(6px); } 1511 .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines { background: transparent; } 1512 .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines::before { transform: rotate(45deg); } 1513 .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines::after { transform: rotate(-45deg); } 1514 @media (max-width: 900px) { 1515 body.nav-logged-in .nav-sidebar-resizer { 1516 display: none; 1517 } 1518 html:has(> body.nav-logged-in:not(.share-public-page)) { background: #fff; } 1519 body.nav-logged-in { 1520 padding: 0; 1521 } 1522 body.nav-logged-in:not(.share-public-page) { 1523 background: #fff; 1524 } 1525 body.nav-logged-in:not(.share-public-page)::before, 1526 body.nav-logged-in:not(.share-public-page)::after { 1527 display: none; 1528 } 1529 body.nav-logged-in.nav-sidebar-collapsed { 1530 padding: 0; 1531 } 1532 body.nav-logged-in .nav-sidebar-toggle, 1533 body.nav-logged-in .nav-topbar-sidebar-toggle { 1534 display: none; 1535 } 1536 body.nav-logged-in .nav-logged-in-topbar { 1537 top: 0; 1538 min-height: 4rem; 1539 padding: 0.75rem 1rem; 1540 border: 0; 1541 border-bottom: 1px solid #e4e4e7; 1542 border-radius: 0; 1543 } 1544 .nav-page-context { 1545 display: none; 1546 } 1547 .nav-logged-in-search { 1548 flex: 0 0 2.75rem; 1549 width: 2.75rem; 1550 height: 2.75rem; 1551 overflow: hidden; 1552 border-radius: 0.5rem; 1553 } 1554 .nav-logged-in-search svg { 1555 left: 50%; 1556 width: 1.125rem; 1557 height: 1.125rem; 1558 transform: translate(-50%, -50%); 1559 } 1560 .nav-logged-in-search input { 1561 height: 2.75rem; 1562 padding: 0; 1563 opacity: 0; 1564 } 1565 .nav-logged-in-search:focus-within { 1566 background: #f4f4f5; 1567 box-shadow: 0 0 0 2px rgba(111, 53, 245, 0.28); 1568 } 1569 .nav-logged-in-search kbd { 1570 display: none; 1571 } 1572 .nav-topbar-actions { 1573 gap: 0.5rem; 1574 } 1575 .nav-topbar-action { 1576 min-height: 2.75rem; 1577 padding: 0.6rem 0.75rem; 1578 } 1579 .nav-theme-toggle { 1580 width: 2.75rem; 1581 height: 2.75rem; 1582 } 1583 body.nav-logged-in .site-primary-nav { 1584 position: sticky; 1585 inset: auto; 1586 height: auto; 1587 max-height: none; 1588 width: 100%; 1589 overflow: visible; 1590 border: 0; 1591 border-bottom: 1px solid #e5e7eb; 1592 border-radius: 0; 1593 box-shadow: none; 1594 } 1595 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav { 1596 width: 100%; 1597 } 1598 .site-primary-nav > div { 1599 flex-wrap: nowrap; 1600 gap: 0.75rem; 1601 padding: 1rem 1.5rem; 1602 } 1603 body.nav-logged-in .site-primary-nav > div { 1604 min-height: 0; 1605 flex-direction: row; 1606 align-items: center; 1607 justify-content: space-between; 1608 } 1609 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav > div { 1610 align-items: center; 1611 gap: 0.75rem; 1612 padding: 1rem 1.5rem; 1613 } 1614 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header { 1615 width: auto; 1616 }
1617 body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a { 1618 display: flex; 1619 justify-content: flex-start; 1620 } 1621 .nav-mobile-trigger { display: inline-flex; } 1622 body.nav-logged-in .nav-mobile-trigger { display: inline-flex; } 1623 .site-primary-nav #navPrimaryLinks { 1624 position: absolute; 1625 left: 1rem; 1626 right: 1rem; 1627 top: calc(100% + 0.5rem); 1628 z-index: 130; 1629 display: none; 1630 flex-direction: column; 1631 align-items: stretch; 1632 gap: 0; 1633 padding: 0.5rem; 1634 border: 1px solid #e5e7eb; 1635 border-radius: var(--radius-lg); 1636 background: rgba(255, 255, 255, 0.98); 1637 box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16); 1638 } 1639 .site-primary-nav.is-mobile-open #navPrimaryLinks { display: flex; } 1640 .site-primary-nav #navPrimaryLinks > li { width: 100%; } 1641 body.nav-logged-in .site-primary-nav #navPrimaryLinks { 1642 width: auto; 1643 flex: none; 1644 } 1645 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks { 1646 align-items: stretch; 1647 gap: 0; 1648 } 1649 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a, 1650 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks button, 1651 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar { 1652 width: 100%; 1653 height: auto; 1654 min-height: 0; 1655 justify-content: flex-start; 1656 padding: 0.75rem 0.85rem; 1657 } 1658 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a span:not(.nav-link-icon):not([hidden]):not(.hidden), 1659 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar::after, 1660 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-plan-badge:not(.hidden), 1661 body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-library-tree:not(.hidden) { 1662 display: initial !important; 1663 } 1664 body.nav-logged-in .site-primary-nav #navAuthSignedIn { 1665 margin-top: 0; 1666 padding-top: 0; 1667 border-top: 0; 1668 } 1669 .site-primary-nav #navPrimaryLinks a, 1670 .site-primary-nav #navPrimaryLinks button[data-open-account="login"] { 1671 display: flex; 1672 width: 100%; 1673 justify-content: flex-start; 1674 padding: 0.75rem 0.85rem; 1675 border-radius: var(--radius-md); 1676 box-sizing: border-box; 1677 } 1678 .site-primary-nav #navPrimaryLinks a:hover, 1679 .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover { 1680 background: #f8fafc; 1681 } 1682 .site-primary-nav .nav-marketing-summary { 1683 display: flex; 1684 width: 100%; 1685 justify-content: space-between; 1686 padding: 0.75rem 0.85rem; 1687 border-radius: var(--radius-md); 1688 box-sizing: border-box; 1689 } 1690 .site-primary-nav .nav-marketing-panel { 1691 position: static; 1692 width: 100%; 1693 margin: 0.25rem 0 0.5rem; 1694 transform: none; 1695 border-radius: var(--radius-md); 1696 box-shadow: none; 1697 } 1698 .site-primary-nav .nav-marketing-panel-grid, 1699 .site-primary-nav .nav-marketing-panel-grid--two { 1700 grid-template-columns: 1fr; 1701 } 1702 .site-primary-nav .nav-marketing-section-title { 1703 margin-top: 0.35rem; 1704 } 1705 .site-primary-nav #navPrimaryLinks button[data-open-account="signup"] { 1706 width: 100%; 1707 justify-content: center; 1708 padding: 0.75rem 0.85rem; 1709 } 1710 .site-primary-nav #navAuthGuest { 1711 flex-direction: column; 1712 align-items: stretch; 1713 gap: 0.35rem; 1714 } 1715 .site-primary-nav .nav-profile-dropdown { 1716 position: static; 1717 margin-top: 0.35rem; 1718 box-shadow: none; 1719 } 1720 } 1721 .profile-plan-badge { 1722 display: inline-block; margin-left: 8px; vertical-align: middle; 1723 font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; 1724 padding: 3px 8px; border-radius: var(--radius-pill); background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; 1725 } 1726 .profile-plan-badge.hidden { display: none !important; } 1727 .profile-public-url-row { 1728 display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; 1729 } 1730 .profile-public-url-row .profile-public-url-link { 1731 flex: 1; min-width: 0; font-size: 0.85rem; color: #4f46e5; word-break: break-all; 1732 } 1733 .profile-copy-btn { 1734 flex-shrink: 0; border: 1px solid #cbd5e1; border-radius: var(--radius-sm); 1735 padding: 6px 12px; font-size: 0.8rem; font-weight: 600; 1736 background: #fff; color: #475569; cursor: pointer; 1737 } 1738 .profile-copy-btn:hover { border-color: #a5b4fc; color: #4f46e5; } 1739 .upgrade-usage-host { max-width: 48rem; margin: 0 auto; padding: 0 20px; } 1740 .upgrade-usage-host[hidden] { display: none !important; } 1741 .upgrade-usage-banner { 1742 margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); 1743 display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; 1744 border: 1px solid #c7d2fe; background: #eef2ff; 1745 } 1746 .upgrade-usage-banner--warn { border-color: #fde68a; background: #fffbeb; } 1747 .upgrade-usage-banner--urgent { border-color: #fecaca; background: #fef2f2; } 1748 .upgrade-usage-banner-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a; } 1749 .upgrade-usage-banner-msg { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: #475569; } 1750 .upgrade-usage-banner-more { margin: 4px 0 0; font-size: 0.75rem; color: #64748b; } 1751 .upgrade-usage-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } 1752 .upgrade-usage-banner-cta { 1753 border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; font-weight: 700; 1754 background: #4f46e5; color: #fff; text-decoration: none; 1755 } 1756 .upgrade-usage-banner-cta:hover { background: #4338ca; } 1757 .upgrade-usage-banner-dismiss { 1758 border: 0; background: transparent; font-size: 0.8rem; font-weight: 600; 1759 color: #64748b; cursor: pointer; text-decoration: underline; 1760 } 1761 .profile-visibility-warn { 1762 margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); 1763 font-size: 0.85rem; line-height: 1.45; 1764 background: #fffbeb; border: 1px solid #fde68a; color: #92400e; 1765 } 1766 .profile-visibility-warn.hidden { display: none !important; } 1767 </style><style> 1768 html.theme-dark:has(>
1768 body.nav-logged-in:not(.share-public-page)) { background: #18181b; color-scheme: dark; } 1769 html.theme-dark body.nav-logged-in:not(.share-public-page) { background: transparent; } 1770 html.theme-dark body.nav-logged-in:not(.share-public-page)::before { 1771 border-color: #27272a; 1772 background: #09090b; 1773 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); 1774 } 1775 html.theme-dark body.nav-logged-in:not(.share-public-page)::after { background: #18181b; } 1776 html.theme-dark body.nav-logged-in .nav-logged-in-topbar { 1777 border-color: #27272a; 1778 background: rgba(9, 9, 11, 0.96); 1779 } 1780 html.theme-dark .nav-page-separator { background: #27272a; } 1781 html.theme-dark .nav-page-breadcrumb ol { color: #a1a1aa; } 1782 html.theme-dark .nav-page-breadcrumb li[aria-current="page"] { color: #fafafa; } 1783 html.theme-dark .nav-page-breadcrumb a:hover { color: #fafafa; } 1784 html.theme-dark body.nav-logged-in .nav-topbar-sidebar-toggle { color: #a1a1aa; } 1785 html.theme-dark body.nav-logged-in .nav-topbar-sidebar-toggle:hover { background: #27272a; color: #fafafa; } 1786 html.theme-dark .nav-sidebar-toggle { 1787 border-color: #3f3f46; 1788 background: #18181b; 1789 color: #a1a1aa; 1790 } 1791 html.theme-dark .nav-sidebar-toggle:hover { 1792 border-color: #6f35f5; 1793 background: rgba(111, 53, 245, 0.16); 1794 color: #b7a2fb; 1795 } 1796 html.theme-dark .nav-theme-toggle { color: #a1a1aa; } 1797 html.theme-dark .nav-theme-toggle:hover { background: #27272a; color: #fafafa; } 1798 html.theme-dark .nav-sidebar-header > a { color: #fafafa; } 1799 html.theme-dark .nav-logged-in-search input { color: #fafafa; } 1800 html.theme-dark .nav-logged-in-search input::placeholder { color: #71717a; } 1801 html.theme-dark .nav-logged-in-search input:focus { 1802 border-color: rgba(111, 53, 245, 0.55); 1803 background: #18181b; 1804 box-shadow: 0 0 0 3px rgba(111, 53, 245, 0.22); 1805 } 1806 html.theme-dark .nav-logged-in-search kbd { 1807 border-color: #3f3f46; 1808 border-bottom-color: #52525b; 1809 background: #18181b; 1810 color: #a1a1aa; 1811 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); 1812 } 1813 html.theme-dark .nav-topbar-action--secondary { 1814 background: #18181b; 1815 color: #fafafa; 1816 box-shadow: inset 0 0 0 1px #3f3f46, 0 1px 2px rgba(0, 0, 0, 0.3); 1817 } 1818 html.theme-dark .nav-topbar-action--secondary:hover { background: #27272a; } 1819 html.theme-dark .nav-topbar-action--primary:hover { background: #7d4bf7; } 1820 html.theme-dark body.nav-logged-in .site-primary-nav { background: transparent; } 1821 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a, 1822 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"] { 1823 color: #a1a1aa; 1824 } 1825 html.theme-dark body.nav-logged-in .site-primary-nav .nav-link-icon { color: #71717a; } 1826 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover, 1827 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover { 1828 background: #27272a; 1829 color: #fafafa; 1830 } 1831 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover .nav-link-icon, 1832 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover .nav-link-icon { 1833 color: #fafafa; 1834 } 1835 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600, 1836 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 { 1837 background: rgba(111, 53, 245, 0.2); 1838 color: #b7a2fb; 1839 } 1840 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600 .nav-link-icon, 1841 html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 .nav-link-icon { 1842 color: #b7a2fb; 1843 } 1844 html.theme-dark .site-primary-nav #navPrimaryLinks .nav-record-cta a:hover { background: #7d4bf7; } 1845 html.theme-dark .nav-sidebar-disclosure > summary { color: #a1a1aa; } 1846 html.theme-dark .nav-sidebar-disclosure > summary:hover { background: #27272a; color: #fafafa; } 1847 html.theme-dark .nav-sidebar-disclosure > summary .nav-link-icon { color: #71717a; } 1848 html.theme-dark .nav-library-section-title { color: #71717a; } 1849 html.theme-dark .nav-library-add { 1850 border-color: #3f3f46; 1851 background: #18181b; 1852 color: #a1a1aa; 1853 } 1854 html.theme-dark .nav-library-add:hover { 1855 border-color: #6f35f5; 1856 background: rgba(111, 53, 245, 0.16); 1857 color: #b7a2fb; 1858 } 1859 html.theme-dark .nav-library-folder-row:hover, 1860 html.theme-dark .nav-library-folder.is-active .nav-library-folder-row { 1861 border-color: #3f3f46; 1862 background: #27272a; 1863 } 1864 html.theme-dark .nav-library-folder-toggle { color: #d4d4d8; } 1865 html.theme-dark .nav-library-folder-toggle:hover, 1866 html.theme-dark .nav-library-folder-toggle:focus-visible { background: #27272a; color: #fafafa; } 1867 html.theme-dark .nav-library-folder.is-active .nav-library-folder-toggle { color: #fafafa; } 1868 html.theme-dark .nav-library-count { background: #27272a; color: #a1a1aa; } 1869 html.theme-dark .nav-library-file-list, 1870 html.theme-dark .nav-library-subtree { border-color: #27272a; } 1871 html.theme-dark .nav-library-file-link { color: #a1a1aa; } 1872 html.theme-dark .nav-library-file-link:hover { background: #27272a; color: #fafafa; } 1873 html.theme-dark .nav-library-empty { color: #71717a; } 1874 html.theme-dark .nav-library-favorite:hover { background: #27272a; color: #a1a1aa; } 1875 html.theme-dark .nav-library-name-form { border-color: #3f3f46; background: #18181b; } 1876 html.theme-dark .nav-library-name-input { 1877 border-color: #6f35f5; 1878 background: #09090b; 1879 color: #fafafa; 1880 }
1881 html.theme-dark body.nav-logged-in .site-primary-nav #navAuthSignedIn { border-color: #27272a; } 1882 html.theme-dark body.nav-logged-in .site-primary-nav .nav-profile-avatar:hover { background: #27272a; } 1883 html.theme-dark body.nav-logged-in .site-primary-nav .nav-profile-avatar::after { color: #fafafa; } 1884 html.theme-dark .nav-profile-avatar-inner { 1885 background: rgba(111, 53, 245, 0.2); 1886 color: #b7a2fb; 1887 border-color: rgba(111, 53, 245, 0.4); 1888 } 1889 html.theme-dark .nav-profile-dropdown { 1890 border-color: #27272a; 1891 background: #18181b; 1892 box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); 1893 } 1894 html.theme-dark .nav-profile-dropdown a, 1895 html.theme-dark .nav-profile-dropdown button { color: #d4d4d8; } 1896 html.theme-dark .nav-profile-dropdown a:hover, 1897 html.theme-dark .nav-profile-dropdown button:hover { background: #27272a; color: #fafafa; } 1898 html.theme-dark .nav-profile-dropdown .nav-menu-divider { border-color: #27272a; } 1899 html.theme-dark .nav-profile-dropdown .nav-menu-signout { color: #a1a1aa; } 1900 html.theme-dark .nav-profile-dropdown select { 1901 border-color: #3f3f46; 1902 background: #09090b; 1903 color: #fafafa; 1904 } 1905 html.theme-dark .ms-cmdk-backdrop { background: rgba(0, 0, 0, 0.6); } 1906 html.theme-dark .ms-cmdk-panel { 1907 border-color: #27272a; 1908 background: #18181b; 1909 box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); 1910 } 1911 html.theme-dark .ms-cmdk-search { border-bottom-color: #27272a; } 1912 html.theme-dark .ms-cmdk-input { background: transparent; color: #fafafa; } 1913 html.theme-dark .ms-cmdk-input::placeholder { color: #71717a; } 1914 html.theme-dark .ms-cmdk-group-label { color: #71717a; } 1915 html.theme-dark .ms-cmdk-item-title { color: #fafafa; } 1916 html.theme-dark .ms-cmdk-item-hint, 1917 html.theme-dark .ms-cmdk-shortcut { color: #a1a1aa; } 1918 html.theme-dark .ms-cmdk-item:hover, 1919 html.theme-dark .ms-cmdk-item[aria-selected="true"] { background: rgba(111, 53, 245, 0.2); color: #e4e4e7; } 1920 html.theme-dark .ms-cmdk-item:hover .ms-cmdk-item-hint, 1921 html.theme-dark .ms-cmdk-item[aria-selected="true"] .ms-cmdk-item-hint { color: #b7a2fb; } 1922 html.theme-dark .ms-cmdk-icon { background: #27272a; color: #a1a1aa; } 1923 html.theme-dark .ms-cmdk-item:hover .ms-cmdk-icon, 1924 html.theme-dark .ms-cmdk-item[aria-selected="true"] .ms-cmdk-icon { background: #18181b; color: #b7a2fb; } 1925 html.theme-dark .ms-cmdk-shortcut kbd, 1926 html.theme-dark .ms-cmdk-hint kbd { 1927 border-color: #3f3f46; 1928 border-bottom-color: #52525b; 1929 background: #09090b; 1930 color: #a1a1aa; 1931 } 1932 html.theme-dark .ms-cmdk-hint { 1933 border-top-color: #27272a; 1934 background: #131316; 1935 color: #a1a1aa; 1936 } 1937 @media (max-width: 900px) { 1938 html.theme-dark:has(> body.nav-logged-in:not(.share-public-page)) { background: #09090b; } 1939 html.theme-dark body.nav-logged-in:not(.share-public-page) { background: #09090b; } 1940 html.theme-dark body.nav-logged-in .site-primary-nav { 1941 border-color: #27272a; 1942 background: rgba(9, 9, 11, 0.92); 1943 } 1944 html.theme-dark .site-primary-nav #navPrimaryLinks { 1945 border-color: #27272a; 1946 background: rgba(24, 24, 27, 0.98); 1947 } 1948 } 1949 </style><style> 1950 .ms-skeleton { position: relative; overflow: hidden; background: #e2e8f0; border-radius: var(--radius-sm); } 1951 .ms-skeleton::after { 1952 content: ''; position: absolute; inset: 0; 1953 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent); 1954 animation: ms-shimmer 1.2s infinite; 1955 } 1956 @keyframes ms-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } 1957 .ms-skeleton-row { height: 72px; border-radius: var(--radius-md); margin-bottom: 10px; } 1958 .ms-skeleton-line { height: 12px; margin-bottom: 8px; } 1959 .ms-skeleton-line--sm { width: 40%; height: 10px; } 1960 .ms-skeleton-line--md { width: 70%; } 1961 .ms-skeleton-stat { height: 88px; border-radius: var(--radius-md); } 1962 .ms-skeleton-overlay { 1963 position: absolute; inset: 0; z-index: 2; 1964 display: grid; grid-template-columns: 1fr; gap: 1rem; 1965 pointer-events: none; 1966 } 1967 @media (min-width: 900px) { 1968 .ms-skeleton-overlay { grid-template-columns: 1.2fr 1fr; } 1969 .ms-skeleton-overlay > .ms-skeleton-stat:first-child { grid-column: 1 / -1; min-height: 220px; } 1970 } 1971 .is-skeleton-loading { position: relative; } 1972 .is-skeleton-loading > :not(.ms-skeleton-overlay) { visibility: hidden; } 1973 .ms-toast-host { 1974 position: fixed; bottom: 20px; right: 20px; z-index: 500; 1975 display: flex; flex-direction: column; gap: 8px; max-width: min(24rem, calc(100vw - 32px)); 1976 pointer-events: none; 1977 } 1978 .ms-toast { 1979 pointer-events: auto; 1980 display: flex; align-items: center; gap: 12px; 1981 padding: 12px 14px; border-radius: var(--radius-md); 1982 background: #0f172a; color: #f8fafc; 1983 box-shadow: 0 12px 32px rgba(15,23,42,0.28); 1984 font-size: 0.875rem; line-height: 1.4; 1985 animation: ms-toast-in 0.2s ease-out; 1986 }
1987 @keyframes ms-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } 1988 .ms-toast-msg { flex: 1; min-width: 0; } 1989 .ms-toast-actions { display: flex; gap: 6px; flex-shrink: 0; } 1990 .ms-toast-btn { 1991 border: none; border-radius: var(--radius-sm); padding: 6px 10px; 1992 font-size: 0.8rem; font-weight: 600; cursor: pointer; 1993 } 1994 .ms-toast-btn--undo { background: #eef2ff; color: #4338ca; } 1995 .ms-toast-btn--dismiss { background: rgba(255,255,255,0.12); color: #e2e8f0; } 1996 .ms-cmdk { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } 1997 .ms-cmdk[hidden] { display: none !important; } 1998 .ms-cmdk-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); backdrop-filter: blur(4px); } 1999 .ms-cmdk-panel { 2000 position: relative; width: min(38rem, 100%); border-radius: var(--radius-lg); 2001 background: #fff; border: 1px solid #e2e8f0; 2002 box-shadow: 0 24px 48px rgba(15,23,42,0.18); overflow: hidden; 2003 } 2004 .ms-cmdk-search { position: relative; display: grid; grid-template-columns: 1fr; border-bottom: 1px solid #e2e8f0; } 2005 .ms-cmdk-search svg { 2006 position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; 2007 color: #94a3b8; pointer-events: none; transform: translateY(-50%); 2008 } 2009 .ms-cmdk-input { 2010 width: 100%; box-sizing: border-box; border: none; 2011 padding: 15px 16px 15px 48px; font-size: 1rem; outline: none; 2012 } 2013 .ms-cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: min(52vh, 390px); overflow: auto; } 2014 .ms-cmdk-group-label { 2015 padding: 12px 10px 6px; font-size: 0.72rem; line-height: 1; 2016 color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; 2017 } 2018 .ms-cmdk-item { 2019 display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 12px; 2020 padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; 2021 } 2022 .ms-cmdk-item:hover, .ms-cmdk-item[aria-selected="true"] { background: #eef2ff; color: #312e81; } 2023 .ms-cmdk-item:hover .ms-cmdk-item-hint, .ms-cmdk-item[aria-selected="true"] .ms-cmdk-item-hint { color: #4338ca; } 2024 .ms-cmdk-icon { 2025 display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; 2026 border-radius: var(--radius-sm); background: #f8fafc; color: #64748b; 2027 } 2028 .ms-cmdk-icon svg { width: 1.15rem; height: 1.15rem; } 2029 .ms-cmdk-item:hover .ms-cmdk-icon, .ms-cmdk-item[aria-selected="true"] .ms-cmdk-icon { background: #fff; color: #4338ca; } 2030 .ms-cmdk-item-main { min-width: 0; } 2031 .ms-cmdk-item-title { display: block; color: #0f172a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2032 .ms-cmdk-item-hint { display: block; margin-top: 2px; color: #64748b; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2033 .ms-cmdk-shortcut { display: inline-flex; align-items: center; gap: 4px; color: #64748b; } 2034 .ms-cmdk-shortcut kbd, .ms-cmdk-hint kbd { 2035 display: inline-flex; min-width: 1.55rem; height: 1.35rem; align-items: center; justify-content: center; 2036 border: 1px solid #cbd5e1; border-bottom-color: #94a3b8; border-radius: 6px; 2037 background: #fff; color: #334155; padding: 0 6px; font-size: 0.72rem; font-family: inherit; font-weight: 700; 2038 box-shadow: 0 1px 0 rgba(15,23,42,0.08); 2039 } 2040 .ms-cmdk-item[aria-selected="true"] .ms-cmdk-shortcut kbd { border-color: #818cf8; color: #3730a3; } 2041 .ms-cmdk-empty { padding: 16px; text-align: center; color: #64748b; font-size: 0.875rem; } 2042 .ms-cmdk-hint { 2043 display: flex; flex-wrap: wrap; align-items: center; gap: 8px; 2044 padding: 10px 14px; font-size: 0.75rem; color: #64748b; border-top: 1px solid #f1f5f9; background: #f8fafc; 2045 } 2046 .ms-drag-handle { 2047 cursor: grab; color: #94a3b8; padding: 4px 6px; border: none; background: transparent; 2048 font-size: 1rem; line-height: 1; touch-action: none; 2049 } 2050 .ms-drag-handle:active { cursor: grabbing; } 2051 .stuff-row.is-dragging { opacity: 0.45; } 2052 .stuff-row.is-drop-target { outline: 2px dashed #818cf8; outline-offset: 2px; } 2053 .stuff-bulk-bar { 2054 display: flex; flex-wrap: wrap; align-items: center; gap: 8px; 2055 padding: 10px 12px; margin-top: 12px; border-radius: var(--radius-md); 2056 background: #eef2ff; border: 1px solid #c7d2fe; 2057 } 2058 .stuff-bulk-bar[hidden] { display: none !important; } 2059 .stuff-file-list { list-style: none; margin: 8px 0 0; padding: 0; } 2060 .stuff-file-row { 2061 display: flex; align-items: center; gap: 8px; padding: 6px 8px; 2062 border-radius: var(--radius-sm); background: #f8fafc; margin-top: 4px; font-size: 0.8rem; 2063 } 2064 .stuff-file-row.is-dragging { opacity: 0.45; } 2065 .upload-retry-btn { 2066 margin-left: 8px; border: 1px solid #fca5a5; background: #fff; 2067 color: #b91c1c; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 0.8rem; 2068 font-weight: 600; cursor: pointer; 2069 } 2070 .upload-retry-btn:hover { background: #fef2f2; } 2071 </style><style> 2072 .nav-activity-wrap { position: relative; list-style: none; } 2073 .nav-activity-badge { 2074 position: absolute; top: 7px; left: 1.45rem; 2075 min-width: 8px; height: 8px; border-radius: var(--radius-pill); 2076 background: #ef4444; border: 2px solid #fff; 2077 pointer-events: none; 2078 } 2079 .nav-activity-badge[hidden] { display: none !important; } 2080 .nav-activity-panel { 2081 position: absolute; right: 0; top: calc(100% + 10px); 2082 width: min(22rem, calc(100vw - 24px)); 2083 max-height: min(28rem, 70vh); 2084 display: flex; flex-direction: column; 2085 border-radius: var(--radius-lg); border: 1px solid #e2e8f0; 2086 background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14); 2087 z-index: 250; overflow: hidden; 2088 } 2089 .nav-activity-panel[hidden] { display: none !important; } 2090 .nav-activity-head { 2091 display: flex; align-items: center; justify-content: space-between; gap: 8px; 2092 padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9; 2093 } 2094 .nav-activity-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #0f172a; } 2095 .nav-activity-mark { 2096 border: 0; background: none; font-size: 0.78rem; font-weight: 600; 2097 color: #4f46e5; cursor: pointer; padding: 4px 0; 2098 } 2099 .nav-activity-mark:hover { text-decoration: underline; } 2100 .nav-activity-list { 2101 list-style: none; margin: 0; padding: 6px 0; 2102 overflow-y: auto; flex: 1; min-height: 0; 2103 } 2104 .nav-activity-item { 2105 display: grid; grid-template-columns: auto 1fr; gap: 10px; 2106 padding: 10px 14px; border-bottom: 1px solid #f8fafc; 2107 } 2108 .nav-activity-item:last-child { border-bottom: 0; } 2109 .nav-activity-icon { 2110 width: 2rem; height: 2rem; border-radius: var(--radius-sm); 2111 display: grid; place-items: center; align-self: start; flex-shrink: 0; 2112 line-height: 1; overflow: visible; 2113 } 2114 .nav-activity-icon svg { display: block; width: 1rem; height: 1rem; overflow: visible; } 2115 .nav-activity-icon--emoji { font-size: 1.05rem; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } 2116 .nav-activity-icon--uploaded { background: #eef2ff; color: #4f46e5; } 2117 .nav-activity-icon--viewed { background: #ecfdf5; color: #059669; } 2118 .nav-activity-icon--downloaded { background: #e0f2fe; color: #0284c7; } 2119 .nav-activity-icon--commented { background: #fef3c7; color: #d97706; } 2120 .nav-activity-icon--reacted { background: #fff7ed; color: #ea580c; } 2121 .nav-activity-icon--shared { background: #fce7f3; color: #db2777; } 2122 .nav-activity-icon--achievement { background: #fef9c3; color: #ca8a04; } 2123 .nav-activity-body { min-width: 0; } 2124 .nav-activity-title { margin: 0; font-size: 0.82rem; font-weight: 700; color: #0f172a; } 2125 .nav-activity-text { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.4; color: #64748b; } 2126 .nav-activity-time { margin: 4px 0 0; font-size: 0.72rem; color: #94a3b8; } 2127 .nav-activity-empty { 2128 padding: 28px 20px; text-align: center; font-size: 0.85rem; color: #64748b; line-height: 1.5; 2129 } 2130 .nav-activity-foot { 2131 padding: 10px 14px; border-top: 1px solid #f1f5f9; text-align: center; 2132 } 2133 .nav-activity-foot a { 2134 font-size: 0.8rem; font-weight: 600; color: #4f46e5; text-decoration: none; 2135 } 2136 .nav-activity-foot a:hover { text-decoration: underline; } 2137 @media (max-width: 640px) { 2138 .nav-activity-panel { position: fixed; right: 12px; left: 12px; top: 72px; width: auto; } 2139 } 2140 </style> 2141 <style> 2142 .account-modal { 2143 position: fixed; 2144 inset: 0; 2145 z-index: 200; 2146 display: flex; 2147 align-items: center; 2148 justify-content: center; 2149 padding: 20px; 2150 } 2151 .account-modal[hidden] { display: none !important; } 2152 .account-modal-backdrop { 2153 position: absolute; 2154 inset: 0; 2155 background: rgba(15, 23, 42, 0.28); 2156 backdrop-filter: blur(14px) saturate(1.2); 2157 -webkit-backdrop-filter: blur(14px) saturate(1.2); 2158 } 2159 .account-modal-panel { 2160 position: relative; 2161 z-index: 1; 2162 width: min(440px, 100%); 2163 max-height: min(90vh, 520px); 2164 overflow: auto; 2165 border-radius: var(--radius-lg); 2166 border: 1px solid rgba(255, 255, 255, 0.65); 2167 background: rgba(255, 255, 255, 0.78); 2168 backdrop-filter: blur(24px) saturate(1.4); 2169 -webkit-backdrop-filter: blur(24px) saturate(1.4); 2170 box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22); 2171 padding: 28px 24px 24px; 2172 } 2173 .account-modal-close { 2174 position: absolute; 2175 top: 14px; 2176 right: 14px; 2177 display: grid; 2178 place-items: center; 2179 width: 36px; 2180 height: 36px; 2181 border: 0; 2182 border-radius: var(--radius-sm); 2183 background: rgba(255, 255, 255, 0.55); 2184 color: #475569; 2185 cursor: pointer; 2186 }
2187 .account-modal-close:hover { background: rgba(255, 255, 255, 0.9); color: #0f172a; } 2188 .account-modal-title { margin: 0 2rem 0 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; } 2189 .account-modal-desc { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.5; color: #475569; } 2190 .account-modal-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; } 2191 .account-email-step { display: flex; flex-direction: column; gap: 14px; } 2192 .account-modal-fields { display: flex; flex-direction: column; gap: 12px; } 2193 .account-name-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } 2194 .account-modal-input { 2195 width: 100%; 2196 border-radius: var(--radius-sm); 2197 border: 1px solid rgba(203, 213, 225, 0.9); 2198 background: rgba(255, 255, 255, 0.72); 2199 padding: 11px 12px; 2200 font-size: 0.9rem; 2201 color: #1e293b; 2202 outline: none; 2203 } 2204 .account-modal-input::placeholder { color: #94a3b8; } 2205 .account-modal-input:focus { 2206 border-color: #6366f1; 2207 box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); 2208 } 2209 .account-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; } 2210 .account-modal-btn-primary { 2211 border: 0; 2212 border-radius: var(--radius-sm); 2213 padding: 10px 16px; 2214 font-size: 0.9rem; 2215 font-weight: 600; 2216 background: #4f46e5; 2217 color: #fff; 2218 cursor: pointer; 2219 } 2220 .account-modal-btn-primary:hover { background: #4338ca; } 2221 .account-modal-btn-secondary { 2222 border: 1px solid #c7d2fe; 2223 border-radius: var(--radius-sm); 2224 padding: 10px 16px; 2225 font-size: 0.9rem; 2226 font-weight: 600; 2227 background: rgba(255, 255, 255, 0.7); 2228 color: #4338ca; 2229 cursor: pointer; 2230 } 2231 .account-modal-btn-secondary:hover { background: #eef2ff; } 2232 .account-modal-status { margin: 0; min-height: 1.2em; font-size: 0.88rem; color: #64748b; } 2233 @media (max-width: 520px) { 2234 .account-name-grid { grid-template-columns: 1fr; } 2235 } 2236 </style> 2237</head> 2238<body class="pricing-brand-page min-h-screen flex flex-col"> 2239<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 2239-2240
2239 2240<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
2240GTM-T9RTK9DP
vendor: 83 bytes, lines 2240-2241
2240" 2241height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
2242<!-- End Google Tag Manager (noscript) --> 2243 <div id="checkoutSuccess" class="checkout-success hidden" role="dialog" aria-modal="true" aria-labelledby="checkoutSuccessTitle"> 2244 <div class="checkout-success-card"> 2245 <p class="checkout-success-eyebrow">VideoM8 billing</p> 2246 <h2 id="checkoutSuccessTitle" class="checkout-success-title">Cheers â you’re in!</h2> 2247 <p class="checkout-success-desc">Thank you for subscribing. Your paid VideoM8 features are ready when you are.</p> 2248 <div class="checkout-success-actions"> 2249 <a href="/library" class="checkout-success-btn-primary">Open library</a> 2250 <a href="/brand" class="checkout-success-btn-secondary">Set up branding</a> 2251 </div> 2252 </div> 2253 </div> 2254 <canvas id="confetti" aria-hidden="true"></canvas> 2255 <div id="launchBanner" class="flex items-center gap-x-6 bg-indigo-600 px-6 py-2.5 sm:px-3.5 sm:before:flex-1"> 2256 <p class="text-sm/6 text-white"> 2257 <a href="/record" class="hover:underline"> 2258 <strong class="font-semibold">Create and share videos, instantly.</strong> Start for free <svg class="inline-block size-4 align-[-2px]" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="arrow_forward" data-material-variant="regular"><path d="M686-450H190q-13 0-21.5-8.5T160-480q0-13 8.5-21.5T190-510h496L459-737q-9-9-9-21t9-21q9-9 21-9t21 9l278 278q5 5 7 10t2 11q0 6-2 11t-7 10L501-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l227-227Z"/></svg> 2259 </a> 2260 </p> 2261 <div class="flex flex-1 justify-end"> 2262 <button type="button" data-dismiss-banner class="-m-3 p-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"> 2263 <span class="sr-only">Dismiss</span> 2264 <svg class="size-5 text-white" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="close" data-material-variant="regular"><path d="M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z"/></svg> 2265 </button> 2266 </div> 2267</div> 2268 <nav class="site-primary-nav w-full border-b border-gray-200 bg-white/90 backdrop-blur dark:border-white/10 dark:bg-gray-900/90" aria-label="Primary"> 2269 <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-6 lg:px-8" data-slot="sidebar"> 2270 <div class="nav-sidebar-header"> 2271 <a id="navLogoLink" class="text-lg font-extrabold tracking-tight text-gray-900 dark:text-white" href="/">VideoM8</a> 2272 </div> 2273 <button type="button" id="navMobileMenuBtn" class="nav-mobile-trigger" aria-label="Open navigation" aria-expanded="false" aria-controls="navPrimaryLinks"> 2274 <span class="nav-mobile-trigger-lines" aria-hidden="true"></span> 2275 </button> 2276 <ul id="navPrimaryLinks" class="flex flex-wrap items-center justify-end gap-4 text-sm font-semibold sm:gap-5"> 2277 <li id="navSolutionsLink" class="nav-marketing-menu"> 2278 <details class="nav-marketing-dropdown"> 2279 <summary class="nav-marketing-summary">Solutions <svg class="nav-marketing-summary-caret" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 7.22a.75.75 0 0 1 1.06 0L10 10.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 8.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg></summary> 2280 <div class="nav-marketing-panel "> 2281 <div class="nav-marketing-panel-grid"> 2282 <div class="nav-marketing-section"><p class="nav-marketing-section-title">Explore</p><a href="/solutions" class=""><span class="nav-marketing-link-title">Solutions index</span><span class="nav-marketing-link-desc">Choose by team, use case, or industry.</span></a><a href="/use-cases" class=""><span class="nav-marketing-link-title">Use cases</span><span class="nav-marketing-link-desc">Video hosting, transfer, storage, and galleries.</span></a><a href="/compare" class=""><span class="nav-marketing-link-title">Compare</span><span class="nav-marketing-link-desc">Alternatives for video, file, and proposal links.</span></a><a href="/features/sales-video-message" class=""><span class="nav-marketing-link-title">Sales video messages</span><span class="nav-marketing-link-desc">Record demos with CTAs and files.</span></a></div><div class="nav-marketing-section"><p class="nav-marketing-section-title">By team</p><a href="/teams" class=""><span class="nav-marketing-link-title">All teams</span><span class="nav-marketing-link-desc">Browse every team workflow.</span></a><a href="/teams/sales" class=""><span class="nav-marketing-link-title">Sales</span><span class="nav-marketing-link-desc">Demos, proposals, and follow-up links.</span></a><a href="/teams/marketing" class=""><span class="nav-marketing-link-title">Marketing</span><span class="nav-marketing-link-desc">Launch packs and campaign assets.</span></a><a href="/teams/product" class=""><span class="nav-marketing-link-title">Product</span><span class="nav-marketing-link-desc">Specs, research, and prototype demos.</span></a></div><div class="nav-marketing-section"><p class="nav-marketing-section-title">By industry</p><a href="/industries" class=""><span class="nav-marketing-link-title">All industries</span><span class="nav-marketing-link-desc">Browse sector-specific pages.</span></a><a href="/industries/technology" class=""><span class="nav-marketing-link-title">Technology</span><span class="nav-marketing-link-desc">Async demos and release walkthroughs.</span></a><a href="/industries/media" class=""><span class="nav-marketing-link-title">Media</span><span class="nav-marketing-link-desc">Screeners, cuts, and press kits.</span></a><a href="/industries/education" class=""><span class="nav-marketing-link-title">Education</span><span class="nav-marketing-link-desc">Lesson recordings and resource packs.</span></a></div> 2283 </div> 2284 </div> 2285 </details> 2286 </li><li id="navTemplatesLink" class="nav-marketing-menu"> 2287 <details class="nav-marketing-dropdown"> 2288 <summary class="nav-marketing-summary">Templates <svg class="nav-marketing-summary-caret" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 7.22a.75.75 0 0 1 1.06 0L10 10.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 8.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg></summary> 2289 <div class="nav-marketing-panel "> 2290 <div class="nav-marketing-panel-grid"> 2291 <div class="nav-marketing-section"><p class="nav-marketing-section-title">Gallery</p><a href="/templates" class=""><span class="nav-marketing-link-title">Template gallery</span><span class="nav-marketing-link-desc">Reusable page patterns for common handoffs.</span></a><a href="/templates/product-demo" class=""><span class="nav-marketing-link-title">Product demo</span><span class="nav-marketing-link-desc">Show a workflow and close with a CTA.</span></a><a href="/templates/client-handoff" class=""><span class="nav-marketing-link-title">
2291Client handoff</span><span class="nav-marketing-link-desc">Deliver files, context, and next steps.</span></a></div><div class="nav-marketing-section"><p class="nav-marketing-section-title">Operations</p><a href="/templates/training-walkthrough" class=""><span class="nav-marketing-link-title">Training walkthrough</span><span class="nav-marketing-link-desc">Create evergreen onboarding content.</span></a><a href="/templates/incident-update" class=""><span class="nav-marketing-link-title">Incident update</span><span class="nav-marketing-link-desc">Share status, evidence, and actions.</span></a></div><div class="nav-marketing-section"><p class="nav-marketing-section-title">Creative</p><a href="/templates/launch-asset-pack" class=""><span class="nav-marketing-link-title">Launch asset pack</span><span class="nav-marketing-link-desc">Package campaign assets for partners.</span></a><a href="/templates/portfolio-showcase" class=""><span class="nav-marketing-link-title">Portfolio showcase</span><span class="nav-marketing-link-desc">Present selected work with context.</span></a></div> 2292 </div> 2293 </div> 2294 </details> 2295 </li><li id="navResourcesLink" class="nav-marketing-menu"> 2296 <details class="nav-marketing-dropdown"> 2297 <summary class="nav-marketing-summary is-active">Resources <svg class="nav-marketing-summary-caret" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 7.22a.75.75 0 0 1 1.06 0L10 10.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 8.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg></summary> 2298 <div class="nav-marketing-panel nav-marketing-panel--compact"> 2299 <div class="nav-marketing-panel-grid nav-marketing-panel-grid--two"> 2300 <div class="nav-marketing-section"><p class="nav-marketing-section-title">Learn</p><a href="/features" class=""><span class="nav-marketing-link-title">Features</span><span class="nav-marketing-link-desc">Recording, hosting, branding, and analytics.</span></a><a href="/tools" class=""><span class="nav-marketing-link-title">Free video tools</span><span class="nav-marketing-link-desc">Calculators and browser-based production utilities.</span></a><a href="/features/share-screen-recording" class=""><span class="nav-marketing-link-title">Share screen recording</span><span class="nav-marketing-link-desc">Turn recordings into pages.</span></a><a href="/chrome-extension" class=""><span class="nav-marketing-link-title">Chrome extension</span><span class="nav-marketing-link-desc">Record from any tab in one click.</span></a><a href="/features/step-by-step-demos" class=""><span class="nav-marketing-link-title">Step-by-step demos</span><span class="nav-marketing-link-desc">Turn clicks into annotated walkthroughs.</span></a><a href="/features/client-video-portal" class=""><span class="nav-marketing-link-title">Client video portal</span><span class="nav-marketing-link-desc">Focused handoffs without a portal login.</span></a><a href="/discover" class=""><span class="nav-marketing-link-title">Discover</span><span class="nav-marketing-link-desc">Browse public videos, pages, profiles, and courses.</span></a><a href="/blog" class=""><span class="nav-marketing-link-title">Blog</span><span class="nav-marketing-link-desc">Guides and product notes.</span></a><a href="/pricing" class="is-active"><span class="nav-marketing-link-title">Pricing</span><span class="nav-marketing-link-desc">Local recording, one Pro plan, and optional AI credits.</span></a></div><div class="nav-marketing-section"><p class="nav-marketing-section-title">Reference</p><a href="/llm.txt" class=""><span class="nav-marketing-link-title">llm.txt</span><span class="nav-marketing-link-desc">AI-readable site summary.</span></a><a href="/sitemap.xml" class=""><span class="nav-marketing-link-title">Sitemap</span><span class="nav-marketing-link-desc">Index of public pages.</span></a></div> 2301 </div> 2302 </div> 2303 </details> 2304 </li> 2305 <li id="navRecordLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/record" aria-label="Record" title="Record" data-nav-tooltip="Record"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="videocam" data-material-variant="filled"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l134-134q7-7 16.5-3.5T880-649v338q0 10-9.5 13.5T854-301L720-435v215q0 24-18 42t-42 18H140Z"/></svg></span><span>Record</span></a></li> 2306 <li id="navUploadLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/upload" aria-label="Upload" title="Upload" data-nav-tooltip="Upload"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="cloud_upload" data-material-variant="filled"><path d="M251-160q-88 0-149.5-61.5T40-371q0-78 50-137t127-71q20-97 94-158.5T482-799q112 0 189 81.5T748-522v24q72-2 122 46.5T920-329q0 69-50 119t-119 50H510v-318l62 62q9 9 21 9t21-9q9-9 9-21.5t-9-21.5L501-573q-9-9-21-9t-21 9L345-459q-9 9-8.5 21t9.5 21q9 9 21.5 9t21.5-9l61-61v318H251Z"/></svg></span><span>Upload</span></a></li>
2307 <li id="navRecordCta" class="hidden nav-record-cta"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/record" aria-label="Record a video" title="Record a video" data-nav-tooltip="Record a video"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="videocam" data-material-variant="filled"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l134-134q7-7 16.5-3.5T880-649v338q0 10-9.5 13.5T854-301L720-435v215q0 24-18 42t-42 18H140Z"/></svg></span><span>Record a video</span></a></li> 2308 <li id="navPricingLink" class="pro-upsell-only"><a class="text-indigo-600 dark:text-indigo-400" href="/pricing">Pricing</a></li> 2309 <li id="navAuthGuest" class="flex items-center gap-2 sm:gap-3"> 2310 <button type="button" data-open-account="login" class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white border-0 bg-transparent p-0 cursor-pointer">Log in</button> 2311 <button type="button" data-open-account="signup" class="rounded-lg bg-indigo-600 px-3 py-1.5 text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-400">Sign up</button> 2312 </li> 2313 <li id="navIdeasLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/ideas" aria-label="Ideas" title="Ideas" data-nav-tooltip="Ideas"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="edit_square" data-material-variant="filled"><path d="M390-360q-13 0-21.5-8.5T360-390v-115q0-12 5-23.5t13-19.5l364-364q9-9 20-13t22-4q11 0 22.5 4.5T827-911l83 84q9 9 13.5 20t4.5 22q0 11-4.5 22.5T910-742L548-378q-8 8-19.5 13t-23.5 5H390Zm410-355 68-70-84-84-69 69 85 85ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h333q10 0 17 5.5t10 13.5q3 8 2 16.5t-8 15.5L318-573q-8 8-13 19.5t-5 23.5v170q0 25 17.5 42.5T360-300h167q12 0 23.5-5t19.5-13l219-219q7-7 15.5-8t16.5 2q8 3 13.5 10t5.5 17v336q0 24-18 42t-42 18H180Z"/></svg></span><span>Ideas</span></a></li> 2314 <li id="navStuffLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/library" aria-label="Library" title="Library" data-nav-tooltip="Library"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="video_library" data-material-variant="filled"><path d="M655-521q11-7 11-19t-11-19L459-685q-11-8-23-1.5T424-666v252q0 14 12 20.5t23-1.5l196-126ZM260-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260ZM140-80q-24 0-42-18t-18-42v-590q0-13 8.5-21.5T110-760q13 0 21.5 8.5T140-730v590h590q13 0 21.5 8.5T760-110q0 13-8.5 21.5T730-80H140Z"/></svg></span><span>Library</span></a></li> 2315 <li id="navEngagementLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/engagement" aria-label="Analytics" title="Analytics" data-nav-tooltip="Analytics"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="monitoring" data-material-variant="filled"><path d="M128.5-128.63Q120-137.25 120-150v-46q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v46q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q285-137.25 285-150v-206q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v206q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q450-137.25 450-150v-146q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v146q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q615-137.25 615-150v-246q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v246q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q780-137.25 780-150v-366q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v366q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63ZM559.5-499q-11.5 0-22.46-4.7-10.97-4.69-20.04-13.3L400-634 172-407q-9.07 9-21.53 8.5-12.47-.5-21.34-9.5-8.13-9-8.63-21t8.5-21l229-227q9.07-8.87 20.04-12.93Q389-694 400-694t22.34 4.07Q433.68-685.87 442-677l118 118 229-229q9-9 21-9t20.87 9q8.13 9 8.63 21t-8.5 21L602-517q-8 9-19.5 13.5t-23 4.5Z"/></svg></span><span>Analytics</span></a></li> 2316 <li id="navPublishingLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/publishing" aria-label="Publishing" title="Publishing" data-nav-tooltip="Publishing"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="send" data-material-variant="filled"><path d="M162-178q-15 6-28.5-2.5T120-205v-200l302-75-302-77v-198q0-16 13.5-24.5T162-782l652 274q18 8 18 28t-18 28L162-178Z"/></svg></span><span>Publishing</span><span id="navPublishingBadge" class="nav-queue-badge" hidden aria-label="Scheduled posts"></span></a></li> 2317 <li id="navInboxLink" class="hidden"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/inbox" aria-label="Inbox" title="Inbox" data-nav-tooltip="Inbox"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="inbox" data-material-variant="filled"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm300-173q35 0 64-18t47-48q6-11 18-14t24-3h147v-404H180v404h147q12 0 24 3t18 14q18 30 47 48t64 18Z"/></svg></span><span>Inbox</span></a></li> 2318 <li id="navAuthSignedIn" class="hidden list-none"> 2319 <div class="nav-profile-menu"> 2320 <button type="button" id="navProfileMenuBtn" class="nav-profile-avatar" aria-haspopup="true" aria-expanded="false" aria-controls="navProfileDropdown" aria-label="Account menu" title="Account menu" data-nav-tooltip="Account">
2321 <span id="navProfileAvatarIcon" class="nav-profile-avatar-inner"><svg class="size-5" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="account_circle" data-material-variant="regular"><path d="M222-255q63-44 125-67.5T480-346q71 0 133.5 23.5T739-255q44-54 62.5-109T820-480q0-145-97.5-242.5T480-820q-145 0-242.5 97.5T140-480q0 61 19 116t63 109Zm160.5-234.5Q343-529 343-587t39.5-97.5Q422-724 480-724t97.5 39.5Q617-645 617-587t-39.5 97.5Q538-450 480-450t-97.5-39.5ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm107.5-76Q640-172 691-212q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480-140q55 0 107.5-16Zm-52-375.5Q557-553 557-587t-21.5-55.5Q514-664 480-664t-55.5 21.5Q403-621 403-587t21.5 55.5Q446-510 480-510t55.5-21.5ZM480-587Zm0 374Z"/></svg></span> 2322 <img id="navProfileAvatarImg" class="nav-profile-avatar-inner hidden" alt=""> 2323 <span id="navPlanBadge" class="nav-plan-badge hidden">Pro</span> 2324 </button> 2325 <div id="navProfileDropdown" class="nav-profile-dropdown" role="menu" hidden> 2326 <div class="px-3 py-2" role="none"> 2327 <label for="navWorkspaceSelect" class="block text-xs font-semibold text-gray-500">Workspace</label> 2328 <select id="navWorkspaceSelect" class="mt-1 w-full rounded-md border border-gray-200 bg-white px-2 py-2 text-sm text-gray-900" aria-label="Active workspace"> 2329 <option value="personal">Personal workspace</option> 2330 </select> 2331 <div id="navWorkspaceRole" class="mt-1 text-xs text-gray-500" aria-live="polite"></div> 2332 </div> 2333 <hr class="nav-menu-divider" aria-hidden="true"> 2334 <a href="/settings" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="settings" data-material-variant="filled"><path d="M421-80q-14 0-25-9t-13-23l-15-94q-19-7-40-19t-37-25l-86 40q-14 6-28 1.5T155-226L97-330q-8-13-4.5-27t15.5-23l80-59q-2-9-2.5-20.5T185-480q0-9 .5-20.5T188-521l-80-59q-12-9-15.5-23t4.5-27l58-104q8-13 22-17.5t28 1.5l86 40q16-13 37-25t40-18l15-95q2-14 13-23t25-9h118q14 0 25 9t13 23l15 94q19 7 40.5 18.5T669-710l86-40q14-6 27.5-1.5T804-734l59 104q8 13 4.5 27.5T852-580l-80 57q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l80 58q12 8 15.5 22.5T863-330l-58 104q-8 13-22 17.5t-28-1.5l-86-40q-16 13-36.5 25.5T592-206l-15 94q-2 14-13 23t-25 9H421Zm59-270q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Z"/></svg></span><span>Settings</span></a> 2335 <a href="/profile" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="account_circle" data-material-variant="filled"><path d="M222-255q63-40 124.5-60.5T480-336q72 0 134 20.5T739-255q44-54 62.5-109T820-480q0-145-97.5-242.5T480-820q-145 0-242.5 97.5T140-480q0 61 19 116t63 109Zm160.5-234.5Q343-529 343-587t39.5-97.5Q422-724 480-724t97.5 39.5Q617-645 617-587t-39.5 97.5Q538-450 480-450t-97.5-39.5ZM480-80q-84 0-157-31.5t-127-86Q142-252 111-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z"/></svg></span><span>Public Profile</span></a> 2336 <a id="navTeamLink" href="/team" class="hidden" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="group" data-material-variant="filled"><path d="M38-254q0-35 18-63.5t50-42.5q73-32 131.5-46T358-420q62 0 120 14t131 46q32 14 50.5 42.5T678-254v34q0 25-17.5 42.5T618-160H98q-25 0-42.5-17.5T38-220v-34Zm686 94q5-15 9.5-29.5T738-220v-34q0-63-29-101.5T622-420q69 8 130 22t99 34q33 19 52 47t19 63v34q0 25-17.5 42.5T862-160H724ZM250-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42Zm426 0q-42 42-108 42-11 0-24.5-1.5T519-488q24-25 36.5-61.5T568-631q0-45-12.5-79.5T519-774q11-3 24.5-5t24.5-2q66 0 108 42t42 108q0 66-42 108Z"/></svg></span><span>Team</span></a> 2337 <a id="navActivityLink" href="/activity" class="nav-activity-wrap hidden" role="menuitem">
2338 <span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="notifications" data-material-variant="filled"><path d="M190-200q-13 0-21.5-8.5T160-230q0-13 8.5-21.5T190-260h50v-304q0-84 49.5-150.5T420-798v-22q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v22q81 17 130.5 83.5T720-564v304h50q13 0 21.5 8.5T800-230q0 13-8.5 21.5T770-200H190ZM480-80q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80Z"/></svg></span><span>Activity</span> 2339 <span id="navActivityBadge" class="nav-activity-badge" hidden aria-hidden="true"></span> 2340 </a> 2341 <a href="/brand" id="navMenuBranding" class="hidden" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="palette" data-material-variant="filled"><path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-84 32-157t87.5-127q55.5-54 130-85T489-880q79 0 150 26.5T763.5-780q53.5 47 85 111.5T880-527q0 108-63 170.5T650-294h-75q-18 0-31 14t-13 31q0 20 14.5 38t14.5 43q0 26-24.5 57T480-80ZM282-469q15-15 15-35t-15-35q-15-15-35-15t-35 15q-15 15-15 35t15 35q15 15 35 15t35-15Zm126-170q15-15 15-35t-15-35q-15-15-35-15t-35 15q-15 15-15 35t15 35q15 15 35 15t35-15Zm214 0q15-15 15-35t-15-35q-15-15-35-15t-35 15q-15 15-15 35t15 35q15 15 35 15t35-15Zm131 170q15-15 15-35t-15-35q-15-15-35-15t-35 15q-15 15-15 35t15 35q15 15 35 15t35-15Z"/></svg></span><span>Brand Kit</span></a> 2342 <a href="/achievements" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="workspace_premium" data-material-variant="filled"><path d="m480-483-76 57q-5 3-9.5 0t-2.5-8l29-93-78-61q-5-3-2.5-8t7.5-5h94l31-96q2-5 7-5t7 5l30 96h95q5 0 7.5 5t-2.5 8l-78 61 28 93q2 5-2 8t-9 0l-76-57Zm0 364L284-53q-14 5-27-4.5T244-82v-262q-45-47-64.5-103T160-560q0-136 92-228t228-92q136 0 228 92t92 228q0 57-19.5 113T716-344v262q0 15-13 24.5T676-53l-196-66Zm184.5-256.5Q740-451 740-560t-75.5-184.5Q589-820 480-820t-184.5 75.5Q220-669 220-560t75.5 184.5Q371-300 480-300t184.5-75.5Z"/></svg></span><span>Achievements</span></a> 2343 <a href="/plans" role="menuitem"><span class="nav-link-icon" aria-hidden="true"><svg class="nav-link-icon-svg" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="filled"><path d="M349-250h262q13 0 21.5-8.5T641-280q0-13-8.5-21.5T611-310H349q-13 0-21.5 8.5T319-280q0 13 8.5 21.5T349-250Zm0-170h262q13 0 21.5-8.5T641-450q0-13-8.5-21.5T611-480H349q-13 0-21.5 8.5T319-450q0 13 8.5 21.5T349-420ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12 0 23.5 5t19.5 13l183 183q8 8 13 19.5t5 23.5v496q0 24-18 42t-42 18H220Zm331-584q0 13 8.5 21.5T581-634h159L551-820v156Z"/></svg></span><span>Plan</span></a> 2344 <hr class="nav-menu-divider" aria-hidden="true"> 2345 <button type="button" data-nav-signout role="menuitem" class="nav-menu-signout">Sign out</button> 2346 </div> 2347 </div> 2348 </li> 2349 </ul> 2350 </div> 2351</nav> 2352<div class="nav-sidebar-resizer" data-nav-sidebar-resizer role="separator" aria-label="Resize sidebar" aria-orientation="vertical" aria-valuemin="288" aria-valuemax="380" aria-valuenow="288" tabindex="0"></div> 2353<div id="navLoggedInTopbar" class="nav-logged-in-topbar" data-slot="sidebar-inset" aria-label="Page toolbar"> 2354 <div class="nav-page-context"> 2355 <button type="button" class="nav-topbar-sidebar-toggle" data-nav-sidebar-toggle data-slot="sidebar-trigger" aria-label="Collapse sidebar" aria-expanded="true" title="Collapse sidebar"><svg class="nav-shell-icon" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="left_panel_close" data-material-variant="filled"><path d="M663-380v-200q0-9.92-9.5-13.46Q644-597 637-590l-89 89q-9 9-9 21t9 21l89 89q7 7 16.5 3.46T663-380ZM180-120q-24.75 0-42.37-17.63Q120-155.25 120-180v-600q0-24.75 17.63
2355-42.38Q155.25-840 180-840h600q24.75 0 42.38 17.62Q840-804.75 840-780v600q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm207-60h393v-600H387v600Z"/></svg><span class="sr-only">Toggle sidebar</span></button> 2356 <span class="nav-page-separator" data-slot="separator" aria-hidden="true"></span> 2357 <nav class="nav-page-breadcrumb" data-slot="breadcrumb" aria-label="Breadcrumb"> 2358 <ol> 2359 <li><a href="/library">Workspace</a></li> 2360 <li aria-hidden="true"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="arrow_forward" data-material-variant="regular"><path d="M686-450H190q-13 0-21.5-8.5T160-480q0-13 8.5-21.5T190-510h496L459-737q-9-9-9-21t9-21q9-9 21-9t21 9l278 278q5 5 7 10t2 11q0 6-2 11t-7 10L501-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l227-227Z"/></svg></li> 2361 <li aria-current="page">Workspace</li> 2362 </ol> 2363 </nav> 2364 </div> 2365 <form class="nav-logged-in-search" role="search" data-open-cmdk-form data-open-cmdk> 2366 <svg class="size-5" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="search" data-material-variant="regular"><path d="M378-329q-108.16 0-183.08-75Q120-479 120-585t75-181q75-75 181.5-75t181 75Q632-691 632-584.85 632-542 618-502q-14 40-42 75l242 240q9 8.56 9 21.78T818-143q-9 9-22.22 9-13.22 0-21.78-9L533-384q-30 26-69.96 40.5Q423.08-329 378-329Zm-1-60q81.25 0 138.13-57.5Q572-504 572-585t-56.87-138.5Q458.25-781 377-781q-82.08 0-139.54 57.5Q180-666 180-585t57.46 138.5Q294.92-389 377-389Z"/></svg> 2367 <input type="search" placeholder="Search or jump..." aria-label="Search pages and links" autocomplete="off" readonly data-open-cmdk-input> 2368 <kbd>âK</kbd> 2369 </form> 2370 <ul class="nav-topbar-actions"> 2371 <li><a href="/upload" class="nav-topbar-action nav-topbar-action--secondary">Upload</a></li> 2372 <li><a href="/record" class="nav-topbar-action nav-topbar-action--primary">Record</a></li> 2373 </ul> 2374 2375 <button type="button" class="nav-theme-toggle" data-nav-theme-toggle data-slot="theme-toggle" aria-pressed="false" aria-label="Switch to dark mode" title="Switch to dark mode"> 2376 <svg class="nav-theme-icon-moon" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="dark_mode" data-material-variant="regular"><path d="M480-120q-150 0-255-105T120-480q0-135 79.5-229T408-830q20-5 34-1t22 15q8 10 7.5 25t-8.5 35q-9 23-14 47t-5 49q0 90 63 153t153 63q25 0 48.5-4.5T754-461q22-8 38-7t26 9q10 8 13 23t-2 36q-27 121-121 200.5T480-120Zm0-60q109 0 190-67.5T771-406q-25 11-53.5 16.5T660-384q-115 0-195.5-80.5T384-660q0-24 5-51.5t18-62.5q-98 27-162.5 109.5T180-480q0 125 87.5 212.5T480-180Zm-4-297Z"/></svg> 2377 <svg class="nav-theme-icon-sun" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="light_mode" data-material-variant="regular"><path d="M579-380.76q41-40.77 41-99Q620-538 579.24-579q-40.77-41-99-41Q422-620 381-579.24q-41 40.77-41 99Q340-422 380.76-381q40.77 41 99 41Q538-340 579-380.76ZM338.5-338.5Q280-397 280-480t58.5-141.5Q397-680 480-680t141.5 58.5Q680-563 680-480t-58.5 141.5Q563-280 480-280t-141.5-58.5ZM70-450q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32Q57.25-510 70-510h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H70Zm720 0q-12.75 0-21.37-8.68-8.63-8.67-8.63-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h100q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H790ZM458.5-768.63Q450-777.25 450-790v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm0 720Q450-57.25 450-70v-100q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v100q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63ZM240-678l-57-56q-9-9-8.63-21.6.37-12.61 8.53-21.5 8.89-8.9 21.5-8.9 12.6 0 21.6 9l56 57q8 9 8 21t-8 20.5q-8 8.5-20.5 8.5t-21.5-8Zm494 495-56-57q-8-9-8-21.38 0-12.37 8.5-20.62 8.5-9 20.5-9t21 9l57 56q9 9 8.63 21.6-.37 12.61-8.53 21.5-8.89 8.9-21.5 8.9-12.6 0-21.6-9Zm-56-495q-9-9-9-21t9-21l56-57q9-9 21.6-8.63 12.61.37 21.5 8.53 8.9 8.89 8.9 21.5 0 12.6-9 21.6l-57 56q-8 8-20.36 8-12.37 0-21.64-8ZM182.9-182.9q-8.9-8.89-8.9-21.5 0-12.6 9-21.6l57-56q8.8-9 20.9-9 12.1 0 20.71 9 9.39 9 9.39 21t-9 21l-56 57q-9 9-21.6 8.63-12.61-.37-21.5-8.53ZM480-480Z"/></svg> 2378 <span class="sr-only">Toggle dark mode</span> 2379 </button> 2380</div> 2381 <main class="pricing-page flex-1"> 2382 <div class="pricing-shell"> 2383 <section class="pricing-hero"> 2384 <div> 2385 <h1>From recording to published content, in one workspace.</h1> 2386 <p>Replace the patchwork of a screen recorder, video editor, clip generator, social scheduler, and analytics tool. Start locally for free, then upgrade when your content needs the cloud.</p> 2387 <div class="pricing-hero-actions"> 2388 <a class="pricing-primary-link" href="/chrome-extension"><svg class="size-5" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="videocam" data-material-variant="regular"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l134-134q7-7 16.5-3.46T880-649v338q0 9.92-9.5 13.46Q861-294 854-301L720-435v215q0 24-18 42t-42 18H140Zm0-60h520v-520H14
23880v520Zm0 0v-520 520Z"/></svg> Get the extension</a> 2389 <a class="pricing-secondary-link" href="#compare">Compare plans</a> 2390 </div> 2391 </div> 2392 <div class="pricing-hero-card" aria-label="VideoM8 video share preview"> 2393 <div class="pricing-video-frame"> 2394 <div class="pricing-video-top"><span class="pricing-dot"></span><span class="pricing-dot"></span><span class="pricing-dot"></span></div> 2395 <div class="pricing-video-body"> 2396 <h2 class="pricing-video-title">Client walkthrough: product launch</h2> 2397 <div class="pricing-video-meta"> 2398 <span class="pricing-video-avatar"><svg class="size-5" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="account_circle" data-material-variant="regular"><path d="M222-255q63-44 125-67.5T480-346q71 0 133.5 23.5T739-255q44-54 62.5-109T820-480q0-145-97.5-242.5T480-820q-145 0-242.5 97.5T140-480q0 61 19 116t63 109Zm160.5-234.5Q343-529 343-587t39.5-97.5Q422-724 480-724t97.5 39.5Q617-645 617-587t-39.5 97.5Q538-450 480-450t-97.5-39.5ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm107.5-76Q640-172 691-212q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480-140q55 0 107.5-16Zm-52-375.5Q557-553 557-587t-21.5-55.5Q514-664 480-664t-55.5 21.5Q403-621 403-587t21.5 55.5Q446-510 480-510t55.5-21.5ZM480-587Zm0 374Z"/></svg></span> 2399 <span>Branded page · CTA · watch progress</span> 2400 </div> 2401 <div class="pricing-video-bar"><span></span></div> 2402 </div> 2403 </div> 2404 <div class="pricing-hero-stats"> 2405 <div class="pricing-hero-stat"><strong>2 hrs</strong><span>Pro recording</span></div> 2406 <div class="pricing-hero-stat"><strong>100 GB</strong><span>Cloud storage</span></div> 2407 <div class="pricing-hero-stat"><strong>100</strong><span>AI credits monthly</span></div> 2408 </div> 2409 </div> 2410 </section> 2411 2412 <div class="pricing-replaces" aria-label="Tools VideoM8 can replace"><span>Screen recorder</span><span>Video editor</span><span>Clip generator</span><span>Social scheduler</span><span>Video analytics</span></div> 2413 2414 <section class="pricing-plans-section" aria-labelledby="pricingPlansTitle"> 2415 <div class="pricing-section-head"> 2416 <h2 id="pricingPlansTitle">One workspace instead of five subscriptions.</h2> 2417 <p>Record and edit locally for free. Pro takes a creator from capture to published content; Team adds the controls needed to work together.</p> 2418 </div> 2419 <div class="pricing-billing-toggle" aria-label="Billing cadence"> 2420 <button type="button" data-pricing-cadence="monthly" aria-pressed="true">Monthly</button> 2421 <button type="button" data-pricing-cadence="yearly" aria-pressed="false">Yearly <span class="pricing-billing-discount">20% off</span></button> 2422 </div> 2423 <div class="pricing-plans"> 2424 <section class="pricing-plan" aria-labelledby="tier-free"> 2425 <span class="pricing-plan-label">Free forever</span> 2426 <h3 id="tier-free">Local</h3> 2427 <p class="pricing-plan-desc">Capture, edit, and export on your device. Try cloud sharing with temporary branded links.</p> 2428 <p class="pricing-price"><strong>$0</strong><span>forever</span></p> 2429 <p class="pricing-plan-note">No credit card required.</p> 2430 <ul><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2430<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Unlimited local screen and camera recording</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Local editor and video export</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Up to 10 minutes per recording</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2430<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Temporary branded share links</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Links expire after 7 days</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>No credit card required</span></li></ul> 2431 <div class="pricing-plan-cta"><a href="/chrome-extension">Get the Chrome extension</a></div> 2432 </section> 2433 2434 <section class="pricing-plan pricing-plan--pro" aria-labelledby="tier-pro"> 2435 <span class="pricing-plan-label">Best for creators</span> 2436 <h3 id="tier-pro">VideoM8 Pro</h3> 2437 <p class="pricing-plan-desc">Capture, edit, share, repurpose, and publish from one complete workspace.</p> 2438 <p class="pricing-price"><strong id="proPriceValue" data-monthly-price="USD $19/month" data-yearly-price="USD $180/year">USD $19/month</strong><span id="proPricePeriod" data-monthly-period="" data-yearly-period=""></span></p> 2439 <p id="proBillingNote" class="pricing-plan-note" data-monthly-note="Secure checkout via Stripe. Cancel anytime." data-yearly-note="Equivalent to USD $12/month, billed as USD $180/year.">Secure checkout via Stripe. Cancel anytime.</p> 2440 <p id="proSavingsNote" class="pricing-plan-savings" data-yearly-savings="Equivalent to USD $12/month, billed as USD $180/year."></p> 2441 <ul><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2441<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Unlimited capture with recordings up to 2 hours</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Full Studio editor and 1080p export</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Permanent share links and 100 GB cloud storage</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2441<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Custom branding, URLs, CTAs, and lead capture</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Analytics and watch-progress alerts</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Social publishing, API, and MCP access</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2441<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>100 AI credits included every month</span></li></ul> 2442 <div class="pricing-plan-cta"> 2443 <button type="button" id="upgradeProBtn" data-checkout-plan="personal" data-checkout-kind="base">Start Pro</button> 2444 <button type="button" id="manageBillingBtn" class="mt-3 hidden">Manage billing</button> 2445 </div> 2446 <p id="upgradeProStatus" class="mt-3 min-h-[1.2em] text-center text-sm text-slate-500" role="status" aria-live="polite"></p> 2447 <div id="pricingBillingPanel" class="pricing-billing-panel hidden" role="status" aria-live="polite"> 2448 <p id="pricingBillingTitle" class="pricing-billing-title"></p> 2449 <p id="pricingBillingMsg" class="pricing-billing-msg"></p> 2450 <p id="pricingBillingHint" class="pricing-billing-hint hidden"></p> 2451 <div class="pricing-billing-actions"> 2452 <button type="button" id="restoreProBtn" class="pricing-billing-btn pricing-billing-btn--primary hidden">Restore Pro access</button> 2453 <button type="button" id="syncBillingBtn" class="pricing-billing-btn hidden">Sync from Stripe</button> 2454 </div> 2455 </div> 2456 </section> 2457 <section class="pricing-plan" aria-labelledby="tier-team"> 2458 <span class="pricing-plan-label">For growing teams</span> 2459 <h3 id="tier-team">VideoM8 Team</h3> 2460 <p class="pricing-plan-desc">Run a shared content operation with roles, approvals, assignments, and one bill.</p> 2461 <p class="pricing-price"><strong id="teamPriceValue" data-monthly-price="USD $29/seat/month" data-yearly-price="USD $278/seat/year">USD $29/seat/month</strong><span id="teamPricePeriod" data-monthly-period="" data-yearly-period=""></span></p> 2462 <p id="teamBillingNote" class="pricing-plan-note" data-monthly-note="Starts with 2 seats. Secure checkout via Stripe." data-yearly-note="Save 20% with annual team billing.">Starts with 2 seats. Secure checkout via Stripe.</p> 2463 <p id="teamSavingsNote" class="pricing-plan-savings" data-yearly-savings="Save 20% with annual team billing."></p> 2464 <ul><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2464<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Everything in Pro for every paid seat</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Shared workspace, library, and brand defaults</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Roles, permissions, and approval workflows</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2464<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Shared Inbox and assignments</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Combined team analytics and higher API limits</span></li><li><svg class="" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg><span>Central billing with seats that scale</span></li></ul> 2465 <div class="pricing-plan-cta"><button type="button" data-checkout-plan="team" data-checkout-kind="base" data-checkout-seats="2">Start Team with 2 seats</button></div> 2466 </section> 2467 </div> 2468 2469 <div class="pricing-section-head"> 2470 <h2>Use AI credits only when you need them.</h2> 2471 <p>Pro includes 100 credits every month. Credits power AI clips, content analysis, generated B-roll, images, and other premium AI actions. Recording, editing, hosting, and posting never use credits.</p> 2472 </div> 2473 <div class="pricing-credit-packs"><section class="pricing-credit-pack" aria-labelledby="tier-credits_100"> 2474 <div> 2475 <h3 id="tier-credits_100">100 credits</h3> 2476 <p>For an occasional extra project.</p> 2477 </div> 2478 <strong>USD $9</strong> 2479 <button type="button" data-credit-pack="credits_100">Buy credits</button> 2480 </section><section class="pricing-credit-pack" aria-labelledby="tier-credits_500"> 2481 <div> 2482 <h3 id="tier-credits_500">500 credits</h3> 2483 <p>For regular content production.</p> 2484 </div> 2485 <strong>USD $39</strong> 2486 <button type="button" data-credit-pack="credits_500">Buy credits</button> 2487 </section><section class="pricing-credit-pack" aria-labelledby="tier-credits_1000"> 2488 <div> 2489 <h3 id="tier-credits_1000">1,000 credits</h3> 2490 <p>For high-volume AI creation.</p> 2491 </div> 2492 <strong>USD $69</strong> 2493 <button type="button" data-credit-pack="credits_1000">Buy credits</button> 2494 </section></div> 2495 <p class="pricing-credit-note">Purchased credits are added to your balance and do not replace your monthly Pro allowance. Failed generations are refunded automatically.</p> 2496 <p class="pro-upsell-only pricing-active-note">
2496Sign in to subscribe. Configure <a href="/brand" class="font-semibold text-indigo-600 hover:text-indigo-500">Brand Studio</a> once you’re on a paid plan.</p> 2497 <p id="pricingProActiveNote" class="pricing-active-note hidden">You’re on Pro. Manage billing above or open <a href="/brand" class="font-semibold text-indigo-600 hover:text-indigo-500">Brand Studio</a> to customise share pages.</p> 2498 </section> 2499 2500 <section aria-labelledby="pricingProofTitle"> 2501 <div class="pricing-section-head"> 2502 <h2 id="pricingProofTitle">One complete video workflow.</h2> 2503 <p>Pro covers the product you use every day. Credits are reserved for compute-intensive AI actions.</p> 2504 </div> 2505 <div class="pricing-proof"> 2506 <a class="pricing-proof-card" href="/features/sales-video-message"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="videocam" data-material-variant="regular"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h520q24 0 42 18t18 42v215l134-134q7-7 16.5-3.46T880-649v338q0 9.92-9.5 13.46Q861-294 854-301L720-435v215q0 24-18 42t-42 18H140Zm0-60h520v-520H140v520Zm0 0v-520 520Z"/></svg><strong>Record and present</strong><span>Screen plus camera recording with studio layouts, thumbnails, and branded backgrounds.</span></a> 2507 <a class="pricing-proof-card" href="/features/branded-video-page"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="wand_stars" data-material-variant="regular"><path d="m654-454-91 147q-8 13-22.5 10T522-314l-33-133-306 305q-9 9-21 9t-21-9q-9-9-9-21t9-21l305-305-133-33q-14-4-17-18.5t10-22.5l147-92-12-172q-1-15 12.5-22t24.5 3l132 111 160-64q14-5 24 5t5 24l-65 160 111 132q10 11 3.5 24.5T827-441l-173-13ZM131-721q-5-5-5-11t5-11l46-46q5-5 11-5t11 5l45 45q5 5 5 11t-5 11l-46 46q-5 5-11 5t-11-5l-45-45Zm428 307 63-102 120 9-78-92 45-111-111 45-92-78 9 120-102 64 117 29 29 116Zm163 283-46-46q-5-5-4.5-11t5.5-11l45-45q5-5 11-5t11 5l46 46q5 5 4.5 11t-5.5 11l-45 45q-5 5-11 5t-11-5ZM578-579Z"/></svg><strong>Brand the experience</strong><span>Turn a raw file link into a polished share page with your identity and calls to action.</span></a> 2508 <a class="pricing-proof-card" href="/features/share-video-link"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="monitoring" data-material-variant="regular"><path d="M128.5-128.63Q120-137.25 120-150v-46q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v46q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q285-137.25 285-150v-206q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v206q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q450-137.25 450-150v-146q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v146q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q615-137.25 615-150v-246q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v246q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q780-137.25 780-150v-366q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v366q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63ZM559.5-499q-11.5 0-22.46-4.7-10.97-4.69-20.04-13.3L400-634 172-407q-9.07 9-21.53 8.5-12.47-.5-21.34-9.5-8.13-9-8.63-21t8.5-21l229-227q9.07-8.87 20.04-12.93Q389-694 400-694t22.34 4.07Q433.68-685.87 442-677l118 118 229-229q9-9 21-9t20.87 9q8.13 9 8.63 21t-8.5 21L602-517q-8 9-19.5 13.5t-23 4.5Z"/></svg><strong>Measure intent</strong><span>See views, watch progress, engagement, leads, and download activity on paid plans.</span></a> 2509 </div> 2510 </section> 2511 2512 <section id="compare" aria-labelledby="pricingCompareTitle"> 2513 <div class="pricing-section-head"> 2514 <h2 id="pricingCompareTitle">Compare plans</h2> 2515 <p>A clearer breakdown of recording, hosting, branding, conversion, and management features.</p> 2516 </div> 2517 <div class="pricing-compare-wrap"> 2518 <table class="pricing-compare"> 2519 <thead> 2520 <tr><th>Feature</th><th>Local</th><th>Pro</th><th>Team</th></tr> 2521 </thead> 2522 <tbody><tr class="pricing-compare-group"><td colspan="4">Video recording and studio</td></tr> 2523 <tr> 2524 <td>Screen and camera recording</td> 2525 <td>Local, up to 10 min</td><td>Up to 2 hours</td><td>Up to 2 hours / seat</td> 2526 </tr> 2527 <tr> 2528 <td>Studio layout editor</td> 2529 <td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2529<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2530 </tr> 2531 <tr> 2532 <td>Custom thumbnails</td> 2533 <td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2533<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2534 </tr> 2535 <tr> 2536 <td>Video backgrounds and wallpapers</td> 2537 <td>Basic</td><td>Full brand control</td><td>Shared brand defaults</td> 2538 </tr> 2539 <tr> 2540 <td>Full Studio editor</td> 2541 <td>Local basics</td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2541<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2542 </tr><tr class="pricing-compare-group"><td colspan="4">Sharing and hosting</td></tr> 2543 <tr> 2544 <td>Share links</td> 2545 <td>Temporary, branded</td><td>Unlimited and permanent</td><td>Unlimited and permanent</td> 2546 </tr> 2547 <tr> 2548 <td>Account storage pool</td> 2549 <td>Temporary links only</td><td>100 GB</td><td>Pooled team storage</td> 2550 </tr> 2551 <tr> 2552 <td>Link expiry</td> 2553 <td>7 days</td><td>Never or timed</td><td>Never or timed</td> 2554 </tr> 2555 <tr> 2556 <td>Custom short URLs</td> 2557 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2557<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2558 </tr> 2559 <tr> 2560 <td>Password protection</td> 2561 <td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2561<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2562 </tr> 2563 <tr> 2564 <td>Library folders and tags</td> 2565 <td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2565<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td>Shared library</td> 2566 </tr><tr class="pricing-compare-group"><td colspan="4">Brand and conversion</td></tr> 2567 <tr> 2568 <td>Branded share pages</td> 2569 <td>VideoM8 branded</td><td>Brand-only pages</td><td>Shared brand system</td> 2570 </tr> 2571 <tr> 2572 <td>Brand Kit and themes</td> 2573 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2573<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2574 </tr> 2575 <tr> 2576 <td>Call-to-action panels</td> 2577 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2578 </tr> 2579 <tr> 2580 <td>Lead capture</td> 2581 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2581<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2582 </tr> 2583 <tr> 2584 <td>Public profile featured content</td> 2585 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2585<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2586 </tr><tr class="pricing-compare-group"><td colspan="4">Insights and management</td></tr> 2587 <tr> 2588 <td>Analytics dashboard</td> 2589 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td>Combined team analytics</td> 2590 </tr> 2591 <tr> 2592 <td>Video engagement insights</td> 2593 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2593<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2594 </tr> 2595 <tr> 2596 <td>Lead export</td> 2597 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2597<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2598 </tr> 2599 <tr> 2600 <td>Roles and approvals</td> 2601 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2602 </tr> 2603 <tr> 2604 <td>Shared Inbox assignments</td> 2605 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular">
2605<path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td> 2606 </tr> 2607 <tr> 2608 <td>AI credits</td> 2609 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td>100 included monthly</td><td>100 per paid seat</td> 2610 </tr> 2611 <tr> 2612 <td>Extra AI credits</td> 2613 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td>Buy when needed</td><td>Buy when needed</td> 2614 </tr> 2615 <tr> 2616 <td>Billing portal</td> 2617 <td><span class="pricing-dash" aria-label="Not included">-</span></td><td><span class="pricing-check" aria-label="Included"><svg class="size-4" width="1rem" height="1rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="check" data-material-variant="regular"><path d="m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z"/></svg></span></td><td>Central billing</td> 2618 </tr></tbody> 2619 </table> 2620 </div> 2621 </section> 2622 2623 <section aria-labelledby="pricingUseCasesTitle"> 2624 <div class="pricing-section-head"> 2625 <h2 id="pricingUseCasesTitle">Where paid plans pay for themselves</h2> 2626 </div> 2627 <div class="pricing-use-cases"> 2628 <article class="pricing-use-case"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="monitoring" data-material-variant="regular"><path d="M128.5-128.63Q120-137.25 120-150v-46q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v46q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q285-137.25 285-150v-206q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v206q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q450-137.25 450-150v-146q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v146q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q615-137.25 615-150v-246q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v246q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63Zm165 0Q780-137.25 780-150v-366q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v366q0 12.75-8.68 21.37-8.67 8.63-21.5 8.63-12.82 0-21.32-8.63ZM559.5-499q-11.5 0-22.46-4.7-10.97-4.69-20.04-13.3L400-634 172-407q-9.07 9-21.53 8.5-12.47-.5-21.34-9.5-8.13-9-8.63-21t8.5-21l229-227q9.07-8.87 20.04-12.93Q389-694 400-694t22.34 4.07Q433.68-685.87 442-677l118 118 229-229q9-9 21-9t20.87 9q8.13 9 8.63 21t-8.5 21L602-517q-8 9-19.5 13.5t-23 4.5Z"/></svg><h3><a href="/features/sales-video-message">Sales walkthroughs</a></h3><p>Send product demos, pricing packs, and proposal videos with branded CTAs and lead capture.</p></article> 2629 <article class="pricing-use-case"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="download" data-material-variant="regular"><path d="M469-327q-5-2-10-7L308-485q-9-9.27-8.5-21.64.5-12.36 9.11-21.36 9.39-9 21.89-9t21.5 9l98 99v-341q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v341l99-99q8.8-9 20.9-8.5 12.1.5 21.49 9.5 8.61 9 8.61 21.5t-9 21.5L501-334q-5 5-10.13 7-5.14 2-11 2-5.87 0-10.87-2ZM220-160q-24 0-42-18t-18-42v-113q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v113h520v-113q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v113q0 24-18 42t-42 18H220Z"/></svg><h3><a href="/features/client-video-portal">Client delivery</a></h3><p>Host large files, walkthrough videos, and final assets behind a clean, permanent share page.</p></article> 2630 <article class="pricing-use-case"><svg class="" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="account_circle" data-material-variant="regular"><path d="M222-255q63-44 125-67.5T480-346q71 0 133.5 23.5T739-255q44-54 62.5-109T820-480q0-145-97.5-242.5T480-820q-145 0-242.5 97.5T140-480q0 61 19 116t63 109Zm160.5-234.5Q343-529 343-587t39.5-97.5Q422-724 480-724t97.5 39.5Q617-645 617-587t-39.5 97.5Q538-450 480-450t-97.5-39.5ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q83 0 155.5 31.5t127 86q54.5 54.5 86 127T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Zm107.5-76Q640-172 691-212q-51-36-104-55t-107-19q-54 0-107 19t-104 55q51 40 103.5 56T480-140q55 0 107.5-16Zm-52-375.5Q557-553 557-587t-21.5-55.5Q514-664 480-664t-55.5 21.5Q403-621 403-587t21.5 55.5Q446-510 480-510t55.5-21.5ZM480-587Zm0 374Z"/></svg><h3><a href="/compare/sharebrand-alternative">Agency handoffs</a></h3><p>Pin your best videos and resources to branded pages that look like your brand.</p></article> 2631 </div> 2632 </section> 2633 2634 <section aria-labelledby="pricingFaqTitle"> 2635 <div class="pricing-section-head"> 2636 <h2 id="pricingFaqTitle">Questions</h2> 2637 </div> 2638 <div class="pricing-faq"> 2639 <details open><summary>What uses AI credits?</summary><p>Only AI actions such as content analysis, generated clips, B-roll, and images use credits. Recording, editing, hosting, downloading, and ordinary publishing do not.</p></details> 2640 <details><summary>What happens when I use my included credits?</summary><p>You can buy a prepaid credit pack whenever you need more. You do not need to change plans or start another subscription.</p></details> 2641 <details><summary>Do failed generations use credits?</summary><p>No. Credits reserved for a failed or cancelled generation are returned automatically.</p></details> 2642 <details><summary>What happens to Local share links?</summary><p>Local share links are temporary and VideoM8-branded. Pro adds unlimited permanent links, custom branding, and analytics.</p></details> 2643 <details><summary>Can I cancel Pro?</summary><p>Yes. Pro is handled through Stripe, and you can manage or cancel billing from your account plan page.</p></details> 2644 </div> 2645 </section> 2646 </div> 2647 </main> 2648 <footer data-marketing-footer class="site-footer mt-12 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-white/10 sm:mt-16"> 2649 <div class="site-footer-inner mx-auto max-w-7xl px-6 py-16 sm:py-20 lg:px-8 lg:py-24"> 2650 <div class="site-footer-grid grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-8"> 2651 <div class="site-footer-brand lg:col-span-3"> 2652 <a href="/" class="text-xl font-extrabold tracking-tight text-indigo-600 dark:text-indigo-400">VideoM8</a> 2653 <p class="mt-4 max-w-xs text-sm/6 text-gray-600 dark:text-gray-400">Share files, videos, and sites as branded experiences â with analytics and lead capture.</p> 2654 <ul role="list" class="mt-6 space-y-3"> 2655 <li><a href="/upload" class="text-sm/6 font-semibold text-gray-800 hover:text-indigo-600 dark:text-gray-200 dark:hover:text-indigo-400">Upload a file</a></li> 2656 <li><a href="/pricing" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Pricing</a></li> 2657 </ul> 2658 </div> 2659 <div class="site-footer-links lg:col-span-9"> 2660 <div class="site-footer-group-grid grid grid-cols-2 gap-8 lg:grid-cols-4"> 2661 2662 <div> 2663 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white"><a href="/compare" class="hover:text-indigo-600 dark:hover:text-indigo-400">Compare</a></h3> 2664 <ul role="list" class="mt-6 space-y-3"> 2665 <li><a href="/compare/loom-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Loom alternative</a></li> 2666 <li><a href="/compare/vidyard-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Vidyard alternative</a></li> 2667 <li><a href="/compare/wetransfer-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">WeTransfer alternative</a></li> 2668 <li><a href="/compare/docsend-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">DocSend alternative</a></li> 2669 <li><a href="/compare/screenpal-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">ScreenPal alternative</a></li> 2670 <li><a href="/compare/recordjoy-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">RecordJoy alternative</a></li> 2671 <li><a href="/compare/sharebrand-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sharebrand alternative</a></li> 2672 <li><a href="/compare/zight-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Zight alternative</a></li> 2673 <li><a href="/compare/droply-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Droply alternative</a></li> 2674 <li><a href="/compare/cloudapp-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">CloudApp alternative</a></li> 2675 <li><a href="/compare/droplr-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Droplr alternative</a></li> 2676 <li><a href="/compare/sendbig-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">SendBig alternative</a></li> 2677 <li><a href="/compare/smash-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Smash alternative</a></li> 2678 <li><a href="/compare/sharefile-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">ShareFile alternative</a></li> 2679 <li><a href="/compare/clowd-alternative" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Clowd alternative</a></li> 2680 </ul> 2681 </div> 2682 <div> 2683 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white"><a href="/templates" class="hover:text-indigo-600 dark:hover:text-indigo-400">Templates</a></h3> 2684 <ul role="list" class="mt-6 space-y-3"> 2685 <li><a href="/templates/product-demo" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Product demo</a></li> 2686 <li><a href="/templates/sales-proposal" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sales proposal</a></li> 2687 <li><a href="/templates/client-handoff" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Client handoff</a></li> 2688 <li><a href="/templates/agency-client-delivery" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Agency client delivery</a></li> 2689 <li><a href="/templates/training-walkthrough" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Training walkthrough</a></li> 2690 <li><a href="/templates/customer-onboarding" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Customer onboarding</a></li> 2691 <li><a href="/templates/design-review" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Design review</a></li> 2692 <li><a href="/templates/bug-report-walkthrough" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Bug report walkthrough</a></li> 2693 <li><a href="/templates/investor-update" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Investor update</a></li> 2694 <li><a href="/templates/real-estate-walkthrough" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Real estate walkthrough</a></li> 2695 <li><a href="/templates/course-resource-pack" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Course resource pack</a></li> 2696 <li><a href="/templates/launch-asset-pack" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Launch asset pack</a></li> 2697 <li><a href="/templates/incident-update" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Incident update</a></li> 2698 <li><a href="/templates/portfolio-showcase" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Portfolio showcase</a></li> 2699 </ul> 2700 </div> 2701 <div> 2702 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white"><a href="/teams" class="hover:text-indigo-600 dark:hover:text-indigo-400">Teams</a></h3> 2703 <ul role="list" class="mt-6 space-y-3"> 2704 <li><a href="/teams/sales" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sales</a></li> 2705 <li><a href="/teams/marketing" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Marketing</a></li> 2706 <li><a href="/teams/hr" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">HR</a></li> 2707 <li><a href="/teams/it" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">IT</a></li> 2708 <li><a href="/teams/creatives" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Creatives</a></li> 2709 <li><a href="/teams/legal" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Legal</a></li> 2710 <li><a href="/teams/customer-success" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Customer Success</a></li> 2711 <li><a href="/teams/product" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Product</a></li> 2712 </ul> 2713 </div> 2714 <div> 2715 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white"><a href="/use-cases" class="hover:text-indigo-600 dark:hover:text-indigo-400">Use cases</a></h3> 2716 <ul role="list" class="mt-6 space-y-3"> 2717 <li><a href="/use-cases/video-hosting" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Video hosting</a></li> 2718 <li><a href="/use-cases/video-transfer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Video transfer</a></li> 2719 <li><a href="/use-cases/cloud-storage" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
2719Cloud storage</a></li> 2720 <li><a href="/use-cases/send-large-files" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Send large files</a></li> 2721 <li><a href="/use-cases/photo-transfer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Photo transfer</a></li> 2722 <li><a href="/use-cases/photo-hosting" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Photo hosting</a></li> 2723 <li><a href="/use-cases/sharing-files" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sharing files</a></li> 2724 <li><a href="/use-cases/video-proposals" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Video proposals</a></li> 2725 <li><a href="/use-cases/client-file-delivery" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Client file delivery</a></li> 2726 <li><a href="/use-cases/share-screen-recording" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Share screen recording</a></li> 2727 <li><a href="/use-cases/async-customer-onboarding" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Async customer onboarding</a></li> 2728 <li><a href="/use-cases/design-feedback" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Design feedback</a></li> 2729 <li><a href="/use-cases/bug-report-video" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Bug report video</a></li> 2730 <li><a href="/use-cases/static-site-hosting" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Static site hosting</a></li> 2731 <li><a href="/use-cases/lead-capture-pages" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Lead capture pages</a></li> 2732 </ul> 2733 </div> 2734 <div> 2735 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white"><a href="/industries" class="hover:text-indigo-600 dark:hover:text-indigo-400">Industries</a></h3> 2736 <ul role="list" class="mt-6 space-y-3"> 2737 <li><a href="/industries/construction" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Construction</a></li> 2738 <li><a href="/industries/technology" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Technology</a></li> 2739 <li><a href="/industries/manufacturing" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Manufacturing</a></li> 2740 <li><a href="/industries/media" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Media</a></li> 2741 <li><a href="/industries/professional-services" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Professional services</a></li> 2742 <li><a href="/industries/education" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Education</a></li> 2743 <li><a href="/industries/real-estate" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Real Estate</a></li> 2744 <li><a href="/industries/legal" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Legal</a></li> 2745 <li><a href="/industries/sales-and-marketing" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sales & Marketing</a></li> 2746 <li><a href="/industries/recruitment" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Recruitment</a></li> 2747 <li><a href="/industries/e-learning-and-publishing" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">E-Learning & Publishing</a></li> 2748 <li><a href="/industries/crypto" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Crypto</a></li> 2749 <li><a href="/industries/students" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Students</a></li> 2750 </ul> 2751 </div> 2752 </div> 2753 <div class="site-footer-bottom-grid mt-12 grid grid-cols-2 gap-8 border-t border-gray-200 pt-8 dark:border-white/10 sm:grid-cols-3"> 2754 <div> 2755 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Legal</h3> 2756 <ul role="list" class="mt-4 space-y-3"> 2757 <li><a href="/terms" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Terms of service</a></li> 2758 <li><a href="/privacy" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Privacy policy</a></li> 2759 </ul> 2760 </div> 2761 <div> 2762 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Product</h3> 2763 <ul role="list" class="mt-4 space-y-3"> 2764 <li><a href="/features" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Features</a></li> 2765 <li><a href="/chrome-extension" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Chrome extension</a></li> 2766 <li><a href="/blog" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Blog</a></li> 2767 <li class="pro-upsell-only"><a href="/plans" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Plans & billing</a></li> 2768 <li><a href="/llm.txt" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">llm.txt</a></li> 2769 <li><a href="/sitemap.xml" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Sitemap</a></li> 2770 </ul> 2771 </div> 2772 <div> 2773 <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Network</h3> 2774 <ul role="list" class="mt-4 space-y-3"> 2775 <li><a href="https://agentkit.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">AgentKit</a></li><li><a href="https://apparate.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Apparate</a></li><li><a href="https://brandkit.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">BrandKit</a></li><li><a href="https://cockatoo.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Cockatoo</a></li><li><a href="https://cosign.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">CoSign</a></li><li><a href="https://coworkers.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Coworkers</a></li><li><a href="https://dialmany.com" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">DialMany</a></li><li><a href="https://housebase.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">HouseBase</a></li><li><a href="https://linkforadollar.com" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Link For A Dollar</a></li><li><a href="https://videom8.com" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">VideoM8</a></li><li><a href="https://plantsale.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">ð± Plant Sale</a></li><li><a href="https://trady.com.au" target="_blank" rel="noopener noreferrer" class="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Trady</a></li> 2776 </ul> 2777 </div> 2778 </div> 2779 </div> 2780 </div> 2781 <p class="mt-12 border-t border-gray-200 pt-8 text-sm/6 text-gray-500 dark:border-white/10 dark:text-gray-400">© 2026 VideoM8. All rights reserved.</p> 2782 </div> 2783</footer> 2784<footer data-app-footer hidden class="mt-auto border-t border-gray-200 bg-white py-6 dark:border-white/10 dark:bg-gray-900"> 2785 <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 px-6 text-sm text-gray-500 dark:text-gray-400 lg:px-8"> 2786 <p>© 2026 VideoM8</p> 2787 <nav class="flex flex-wrap gap-4" aria-label="Footer"> 2788 <a href="/terms" class="hover:text-gray-800 dark:hover:text-gray-200">Terms</a> 2789 <a href="/privacy" class="hover:text-gray-800 dark:hover:text-gray-200">Privacy</a> 2790 <a href="/pricing" class="hover:text-gray-800 dark:hover:text-gray-200">Pricing</a> 2791 </nav> 2792 </div> 2793</footer>
2794<script> 2795(function () { 2796 var ACCOUNT_ID_KEY = 'microsite_account_id'; 2797 var SESSION_EXPIRES_KEY = 'microsite_session_expires_at'; 2798 var marketingFooter = document.querySelector('[data-marketing-footer]'); 2799 var appFooter = document.querySelector('[data-app-footer]'); 2800 if (!marketingFooter || !appFooter) return; 2801 2802 function hasValidStoredSession() { 2803 try { 2804 var accountId = localStorage.getItem(ACCOUNT_ID_KEY); 2805 if (!accountId) return false; 2806 var rawExpires = localStorage.getItem(SESSION_EXPIRES_KEY); 2807 if (!rawExpires) return true; 2808 var expires = Number(rawExpires); 2809 return !Number.isFinite(expires) || expires <= 0 || Date.now() <= expires; 2810 } catch (e) { 2811 return false; 2812 } 2813 } 2814 2815 function hasSignedInShell() { 2816 var signedInNav = document.getElementById('navAuthSignedIn'); 2817 return document.body.classList.contains('nav-logged-in') 2818 || (signedInNav && !signedInNav.classList.contains('hidden') && !signedInNav.hidden); 2819 } 2820 2821 function applyFooterState() { 2822 var signedIn = hasValidStoredSession() || hasSignedInShell(); 2823 marketingFooter.hidden = signedIn; 2824 appFooter.hidden = !signedIn; 2825 } 2826 2827 window.micrositeApplyLoggedInFooter = applyFooterState; 2828 applyFooterState(); 2829 window.addEventListener('storage', applyFooterState); 2830 window.addEventListener('focus', applyFooterState); 2831 window.addEventListener('pageshow', applyFooterState); 2832 window.addEventListener('microsite-auth-updated', applyFooterState); 2833 window.setInterval(applyFooterState, 2000); 2834})(); 2835</script>
2835 2836<div id="micrositeToastHost" class="ms-toast-host" aria-live="polite"></div> 2837<div id="micrositeCmdk" class="ms-cmdk" hidden> 2838 <div class="ms-cmdk-backdrop" data-cmdk-close tabindex="-1" aria-hidden="true"></div> 2839 <div class="ms-cmdk-panel" role="dialog" aria-modal="true" aria-label="Command palette"> 2840 <div class="ms-cmdk-search"> 2841 <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 2842 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.329 3.329a.75.75 0 1 1-1.061 1.06l-3.328-3.328A7 7 0 0 1 2 9Z" /> 2843 </svg> 2844 <input id="micrositeCmdkInput" class="ms-cmdk-input" type="search" placeholder="Search pages, folders, and links..." autocomplete="off" spellcheck="false"> 2845 </div> 2846 <ul id="micrositeCmdkList" class="ms-cmdk-list" role="listbox"></ul> 2847 <p class="ms-cmdk-hint"><kbd>â</kbd><kbd>â</kbd> Navigate <kbd>Enter</kbd> Open <kbd>Esc</kbd> Close <kbd>â</kbd><kbd>K</kbd> Toggle</p> 2848 </div> 2849</div> 2850 <div id="accountModal" class="account-modal" hidden> 2851 <div class="account-modal-backdrop" data-close-modal tabindex="-1" aria-hidden="true"></div> 2852 <div class="account-modal-panel" role="dialog" aria-modal="true" aria-labelledby="accountModalTitle"> 2853 <button type="button" class="account-modal-close" data-close-modal aria-label="Close"><svg class="size-5" width="1.25rem" height="1.25rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="close" data-material-variant="regular"><path d="M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z"/></svg></button> 2854 <div id="accountGuest"> 2855 <h2 id="accountModalTitle" class="account-modal-title">Continue with email</h2> 2856 <p id="accountModalDesc" class="account-modal-desc">We’ll email you a sign-in code. New accounts are created automatically.</p> 2857 <form id="accountLoginForm" class="account-modal-form"> 2858 <div id="accountEmailStep" class="account-email-step"> 2859 <div class="account-modal-fields"> 2860 <input id="accountEmail" type="email" required autocomplete="email" placeholder="[email protected]" class="account-modal-input"> 2861 </div> 2862 <div class="account-modal-actions"> 2863 <button type="submit" id="accountSendCodeBtn" class="account-modal-btn-primary">Continue</button> 2864 </div> 2865 </div> 2866 <div id="accountCodeStep" class="hidden"> 2867 <p class="text-sm text-slate-600">Enter the 6-digit code we sent to <span id="accountCodeEmail" class="font-semibold text-slate-800"></span>, or use the link in that email.</p> 2868 <input id="accountLoginCode" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" placeholder="123456" class="mt-3 w-full rounded-lg border border-gray-300/80 bg-white/70 px-3 py-2.5 text-center text-lg tracking-[0.3em] text-slate-800 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"> 2869 <div class="account-modal-actions"> 2870 <button type="button" id="accountVerifyCodeBtn" class="account-modal-btn-primary">Verify code</button> 2871 <button type="button" id="accountResendCodeBtn" class="account-modal-btn-secondary">Resend</button> 2872 </div> 2873 </div> 2874 </form> 2875 <p id="accountStatus" class="account-modal-status" role="status" aria-live="polite"></p> 2876 </div> 2877 <div id="accountSignedIn" class="hidden"> 2878 <h2 class="account-modal-title">You’re signed in</h2> 2879 <p id="accountEmailDisplay" class="text-sm text-slate-500"></p> 2880 <p class="account-modal-desc"><span id="accountModalNeverHint">Use Never expiry when uploading.</span> <a href="/profile" class="font-semibold text-indigo-600 hover:text-indigo-800">Profile</a> · <a href="/brand" class="font-semibold text-indigo-600 hover:text-indigo-800">Brand Kit</a></p> 2881 <div class="account-modal-actions" style="margin-top:18px"> 2882 <button type="button" id="accountModalContinueBtn" class="account-modal-btn-primary" hidden>Use Never expiry</button> 2883 <button type="button" id="accountModalSignOutBtn" class="account-modal-btn-secondary">Sign out</button> 2884 </div> 2885 </div> 2886 </div> 2887 </div> 2888
2888<script> 2889(function () { 2890 var PLAN_KEY = 'microsite_user_plan'; 2891 window.micrositeApplyPlanState = function (plan) { 2892 var isPro = plan === 'pro'; 2893 window.micrositeUserPlan = isPro ? 'pro' : 'free'; 2894 try { 2895 if (isPro) localStorage.setItem(PLAN_KEY, 'pro'); 2896 else localStorage.removeItem(PLAN_KEY); 2897 } catch (e) { /* ignore */ } 2898 document.documentElement.classList.toggle('user-plan-pro', isPro); 2899 document.body.setAttribute('data-user-plan', isPro ? 'pro' : 'free'); 2900 var navPricing = document.getElementById('navPricingLink'); 2901 if (navPricing) navPricing.classList.toggle('hidden', isPro); 2902 var banner = document.getElementById('launchBanner'); 2903 if (isPro && banner) banner.remove(); 2904 if (typeof window.updateNavPlanBadge === 'function') window.updateNavPlanBadge(isPro ? 'pro' : 'free'); 2905 }; 2906 window.micrositeIsPro = function () { 2907 return window.micrositeUserPlan === 'pro' 2908 || document.body.getAttribute('data-user-plan') === 'pro' 2909 || document.documentElement.classList.contains('user-plan-pro'); 2910 }; 2911 window.micrositeSyncProUpsell = function (isPro) { 2912 window.micrositeApplyPlanState(isPro ? 'pro' : 'free'); 2913 }; 2914 window.micrositeApplyPlanFromPayload = function (payload) { 2915 var plan = 'free'; 2916 var billing = payload && payload.billing; 2917 window.micrositeHasTeam = !!(payload && payload.team); 2918 if (billing && billing.proAccess === true) plan = 'pro'; 2919 else if (billing && billing.effectivePlan === 'pro') plan = 'pro'; 2920 else if (payload && payload.plan === 'pro') plan = 'pro'; 2921 window.micrositeApplyPlanState(plan); 2922 return plan; 2923 }; 2924 try { 2925 if (localStorage.getItem(PLAN_KEY) === 'pro') window.micrositeApplyPlanState('pro'); 2926 } catch (e) { /* ignore */ } 2927 window.addEventListener('microsite-plan-updated', function (e) { 2928 if (e.detail === 'pro' || e.detail === 'free') window.micrositeApplyPlanState(e.detail); 2929 }); 2930})(); 2931</script>
2931<script> 2932window.micrositeOpenBillingPortal = async function () { 2933 var response = await fetch('/billing/portal', { 2934 method: 'POST', 2935 headers: { 'Content-Type': 'application/json' }, 2936 body: '{}' 2937 }); 2938 var data = await response.json().catch(function () { return {}; }); 2939 if (!response.ok || !data.url) throw new Error(data.error || 'Could not open billing management.'); 2940 window.location.assign(data.url); 2941}; 2942</script>
2942<script> 2943(function () { 2944 const ACCOUNT_ID_KEY = 'microsite_account_id'; 2945 const menuBtn = document.getElementById('navProfileMenuBtn'); 2946 const dropdown = document.getElementById('navProfileDropdown'); 2947 if (!menuBtn || !dropdown) return; 2948 2949 function closeMenu() { 2950 dropdown.hidden = true; 2951 menuBtn.setAttribute('aria-expanded', 'false'); 2952 } 2953 2954 function openMenu() { 2955 dropdown.hidden = false; 2956 menuBtn.setAttribute('aria-expanded', 'true'); 2957 } 2958 2959 function toggleMenu() { 2960 if (dropdown.hidden) openMenu(); 2961 else closeMenu(); 2962 } 2963 2964 menuBtn.addEventListener('click', function (e) { 2965 e.stopPropagation(); 2966 toggleMenu(); 2967 }); 2968 2969 document.addEventListener('click', function (e) { 2970 if (!dropdown.hidden && !dropdown.contains(e.target) && e.target !== menuBtn) closeMenu(); 2971 }); 2972 document.addEventListener('keydown', function (e) { 2973 if (e.key === 'Escape') closeMenu(); 2974 }); 2975 2976 dropdown.querySelectorAll('a[role="menuitem"]').forEach(function (el) { 2977 el.addEventListener('click', closeMenu); 2978 }); 2979 2980 dropdown.querySelectorAll('a[href="/plans"][role="menuitem"]').forEach(function (el) { 2981 el.addEventListener('click', closeMenu); 2982 }); 2983 2984 var signOutBtn = dropdown.querySelector('[data-nav-signout]'); 2985 if (signOutBtn) { 2986 signOutBtn.addEventListener('click', function () { 2987 closeMenu(); 2988 if (typeof window.micrositeSignOut === 'function') window.micrositeSignOut(); 2989 else { 2990 try { fetch('/account/logout', { method: 'POST' }).catch(function () {}); } catch (e) {} 2991 localStorage.removeItem(ACCOUNT_ID_KEY); 2992 localStorage.removeItem('microsite_account_email'); 2993 localStorage.removeItem('microsite_session_expires_at'); 2994 window.location.href = '/'; 2995 } 2996 }); 2997 } 2998 2999 window.updateNavPlanBadge = function (plan) { 3000 var badge = document.getElementById('navPlanBadge'); 3001 var profileBadge = document.getElementById('profilePlanBadge'); 3002 var isPro = plan === 'pro'; 3003 if (badge) badge.classList.toggle('hidden', !isPro); 3004 if (profileBadge) profileBadge.classList.toggle('hidden', !isPro); 3005 var menuBranding = document.getElementById('navMenuBranding'); 3006 if (menuBranding) menuBranding.classList.toggle('hidden', !isPro); 3007 }; 3008 3009 if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) { 3010 window.updateNavPlanBadge('pro'); 3011 } 3012 3013 window.updateNavProfileAvatar = function (meta) { 3014 var btn = document.getElementById('navProfileMenuBtn'); 3015 var img = document.getElementById('navProfileAvatarImg'); 3016 var icon = document.getElementById('navProfileAvatarIcon'); 3017 if (!btn) return; 3018 var label = (meta && meta.displayName) || 'Account menu'; 3019 btn.setAttribute('aria-label', label); 3020 btn.setAttribute('title', label); 3021 btn.setAttribute('data-nav-tooltip', label); 3022 var url = meta && meta.avatarUrl ? meta.avatarUrl : ''; 3023 if (url && img) { 3024 img.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now(); 3025 img.classList.remove('hidden'); 3026 if (icon) icon.classList.add('hidden'); 3027 } else if (img && icon) { 3028 img.classList.add('hidden'); 3029 img.removeAttribute('src'); 3030 icon.classList.remove('hidden'); 3031 } 3032 }; 3033})(); 3034</script>
3034<script> 3035(function () { 3036 var menus = Array.prototype.slice.call(document.querySelectorAll('.nav-marketing-dropdown')); 3037 if (!menus.length) return; 3038 3039 function closeMenu(menu) { 3040 if (menu) menu.open = false; 3041 } 3042 3043 function closeOthers(current) { 3044 menus.forEach(function (menu) { 3045 if (menu !== current) closeMenu(menu); 3046 }); 3047 } 3048 3049 menus.forEach(function (menu) { 3050 var summary = menu.querySelector('summary'); 3051 if (!summary) return; 3052 menu.addEventListener('toggle', function () { 3053 if (menu.open) closeOthers(menu); 3054 }); 3055 summary.addEventListener('keydown', function (e) { 3056 if (e.key === 'Escape') { 3057 closeMenu(menu); 3058 summary.focus(); 3059 } 3060 }); 3061 menu.querySelectorAll('a').forEach(function (link) { 3062 link.addEventListener('click', function () { 3063 closeMenu(menu); 3064 }); 3065 }); 3066 }); 3067 3068 document.addEventListener('click', function (e) { 3069 menus.forEach(function (menu) { 3070 if (menu.open && !menu.contains(e.target)) closeMenu(menu); 3071 }); 3072 }); 3073 document.addEventListener('keydown', function (e) { 3074 if (e.key === 'Escape') menus.forEach(closeMenu); 3075 }); 3076})(); 3077</script>
3077<script> 3078(function () { 3079 var nav = document.querySelector('.site-primary-nav'); 3080 var btn = document.getElementById('navMobileMenuBtn'); 3081 var menu = document.getElementById('navPrimaryLinks'); 3082 if (!nav || !btn || !menu) return; 3083 function close() { 3084 nav.classList.remove('is-mobile-open'); 3085 btn.setAttribute('aria-expanded', 'false'); 3086 } 3087 function open() { 3088 nav.classList.add('is-mobile-open'); 3089 btn.setAttribute('aria-expanded', 'true'); 3090 } 3091 btn.addEventListener('click', function (e) { 3092 e.stopPropagation(); 3093 nav.classList.contains('is-mobile-open') ? close() : open(); 3094 }); 3095 menu.querySelectorAll('a, button').forEach(function (item) { 3096 item.addEventListener('click', function () { 3097 if (window.matchMedia('(max-width: 900px)').matches) close(); 3098 }); 3099 }); 3100 document.addEventListener('click', function (e) { 3101 if (!nav.classList.contains('is-mobile-open')) return; 3102 if (!nav.contains(e.target)) close(); 3103 }); 3104 document.addEventListener('keydown', function (e) { 3105 if (e.key === 'Escape') close(); 3106 }); 3107})(); 3108</script>
3108<script> 3109(function () { 3110 var nav = document.querySelector('.site-primary-nav'); 3111 if (!nav) return; 3112 function syncBreadcrumbOffset() { 3113 document.documentElement.style.setProperty('--site-primary-nav-height', Math.ceil(nav.getBoundingClientRect().height) + 'px'); 3114 } 3115 syncBreadcrumbOffset(); 3116 window.addEventListener('resize', syncBreadcrumbOffset); 3117 if ('ResizeObserver' in window) { 3118 new ResizeObserver(syncBreadcrumbOffset).observe(nav); 3119 } 3120})(); 3121</script>
3121<script> 3122(function () { 3123 var STORAGE_KEY = 'microsite_nav_sidebar_collapsed'; 3124 var WIDTH_KEY = 'microsite_nav_sidebar_width'; 3125 var buttons = Array.prototype.slice.call(document.querySelectorAll('[data-nav-sidebar-toggle]')); 3126 var resizer = document.querySelector('[data-nav-sidebar-resizer]'); 3127 var hoverLabel = null; 3128 var minWidth = 288; 3129 var maxWidth = 380; 3130 function clampWidth(value) { 3131 var width = Number(value) || 288; 3132 return Math.max(minWidth, Math.min(maxWidth, width)); 3133 } 3134 function applyWidth(value) { 3135 var width = clampWidth(value); 3136 document.documentElement.style.setProperty('--nav-sidebar-width', width + 'px'); 3137 if (resizer) resizer.setAttribute('aria-valuenow', String(width)); 3138 } 3139 function isCollapsed() { 3140 var defaultCollapsed = document.body.classList.contains('share-public-page'); 3141 if (defaultCollapsed) return true; 3142 try { 3143 var stored = localStorage.getItem(STORAGE_KEY); 3144 if (stored === '1') return true; 3145 if (stored === '0') return false; 3146 return defaultCollapsed; 3147 } catch (e) { return defaultCollapsed; } 3148 } 3149 function setCollapsed(collapsed) { 3150 document.body.classList.toggle('nav-sidebar-collapsed', !!collapsed); 3151 buttons.forEach(function (button) { 3152 button.setAttribute('aria-expanded', collapsed ? 'false' : 'true'); 3153 button.setAttribute('aria-label', collapsed ? 'Expand sidebar' : 'Collapse sidebar'); 3154 button.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse sidebar'); 3155 }); 3156 } 3157 window.micrositeApplyNavSidebarState = function () { 3158 try { applyWidth(localStorage.getItem(WIDTH_KEY)); } catch (e) { applyWidth(288); } 3159 setCollapsed(isCollapsed()); 3160 }; 3161 buttons.forEach(function (button) { 3162 button.addEventListener('click', function () { 3163 var collapsed = !document.body.classList.contains('nav-sidebar-collapsed');
3164 try { localStorage.setItem(STORAGE_KEY, collapsed ? '1' : '0'); } catch (e) {} 3165 setCollapsed(collapsed); 3166 }); 3167 }); 3168 function ensureHoverLabel() { 3169 if (hoverLabel) return hoverLabel; 3170 hoverLabel = document.createElement('div'); 3171 hoverLabel.className = 'nav-collapsed-hover-label'; 3172 hoverLabel.hidden = true; 3173 document.body.appendChild(hoverLabel); 3174 return hoverLabel; 3175 } 3176 function hideHoverLabel() { 3177 if (!hoverLabel) return; 3178 hoverLabel.hidden = true; 3179 hoverLabel.textContent = ''; 3180 } 3181 function showHoverLabel(item) { 3182 if (!document.body.classList.contains('nav-sidebar-collapsed')) return; 3183 if (window.matchMedia('(max-width: 900px)').matches) return; 3184 var label = item.getAttribute('data-nav-tooltip') || item.getAttribute('aria-label') || item.getAttribute('title') || ''; 3185 if (!label) return; 3186 var el = ensureHoverLabel(); 3187 var rect = item.getBoundingClientRect(); 3188 el.textContent = label; 3189 el.hidden = false; 3190 el.style.left = Math.round(rect.right + 10) + 'px'; 3191 el.style.top = Math.round(rect.top + (rect.height / 2)) + 'px'; 3192 } 3193 document.querySelectorAll('[data-nav-tooltip]').forEach(function (item) { 3194 item.addEventListener('mouseenter', function () { showHoverLabel(item); }); 3195 item.addEventListener('mouseover', function () { showHoverLabel(item); }); 3196 item.addEventListener('pointerenter', function () { showHoverLabel(item); }); 3197 item.addEventListener('focus', function () { showHoverLabel(item); }); 3198 item.addEventListener('mouseleave', hideHoverLabel); 3199 item.addEventListener('mouseout', hideHoverLabel); 3200 item.addEventListener('pointerleave', hideHoverLabel); 3201 item.addEventListener('blur', hideHoverLabel); 3202 }); 3203 window.addEventListener('resize', hideHoverLabel); 3204 window.addEventListener('scroll', hideHoverLabel, true); 3205 if (resizer) { 3206 var startX = 0; 3207 var startWidth = 288; 3208 var dragging = false; 3209 function currentWidth() { 3210 return clampWidth(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nav-sidebar-width')) || 288); 3211 } 3212 function saveWidth(width) { 3213 try { localStorage.setItem(WIDTH_KEY, String(clampWidth(width))); } catch (e) {} 3214 } 3215 function onPointerMove(event) { 3216 if (!dragging) return; 3217 var next = clampWidth(startWidth + event.clientX - startX); 3218 applyWidth(next); 3219 } 3220 function onPointerUp() { 3221 if (!dragging) return; 3222 dragging = false; 3223 document.body.classList.remove('nav-sidebar-resizing'); 3224 saveWidth(currentWidth()); 3225 window.removeEventListener('pointermove', onPointerMove); 3226 window.removeEventListener('pointerup', onPointerUp); 3227 } 3228 resizer.addEventListener('pointerdown', function (event) { 3229 if (document.body.classList.contains('nav-sidebar-collapsed')) return; 3230 if (window.matchMedia('(max-width: 900px)').matches) return; 3231 dragging = true; 3232 startX = event.clientX; 3233 startWidth = currentWidth(); 3234 document.body.classList.add('nav-sidebar-resizing'); 3235 resizer.setPointerCapture?.(event.pointerId); 3236 window.addEventListener('pointermove', onPointerMove); 3237 window.addEventListener('pointerup', onPointerUp); 3238 }); 3239 resizer.addEventListener('keydown', function (event) { 3240 if (document.body.classList.contains('nav-sidebar-collapsed')) return; 3241 if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return; 3242 event.preventDefault(); 3243 var delta = event.key === 'ArrowRight' ? 16 : -16; 3244 var next = clampWidth(currentWidth() + delta); 3245 applyWidth(next); 3246 saveWidth(next); 3247 }); 3248 } 3249 window.micrositeApplyNavSidebarState(); 3250})(); 3251</script>
3251<script> 3252(function () { 3253 function apply(dark) { 3254 document.documentElement.classList.toggle('theme-dark', !!dark); 3255 Array.prototype.slice.call(document.querySelectorAll('[data-nav-theme-toggle]')).forEach(function (button) { 3256 button.setAttribute('aria-pressed', dark ? 'true' : 'false'); 3257 button.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode'); 3258 button.setAttribute('title', dark ? 'Switch to light mode' : 'Switch to dark mode'); 3259 }); 3260 } 3261 apply(document.documentElement.classList.contains('theme-dark')); 3262 document.addEventListener('click', function (event) { 3263 var button = event.target && event.target.closest ? event.target.closest('[data-nav-theme-toggle]') : null; 3264 if (!button) return; 3265 var dark = !document.documentElement.classList.contains('theme-dark'); 3266 try { localStorage.setItem('microsite_theme', dark ? 'dark' : 'light'); } catch (e) {} 3267 apply(dark); 3268 }); 3269})(); 3270</script>
3270<script> 3271(function () { 3272 var badge = document.getElementById('navPublishingBadge'); 3273 if (!badge) return; 3274 var CACHE_KEY = 'microsite_publishing_queue_cache'; 3275 function paint(count) { 3276 if (!(count > 0)) { badge.hidden = true; return; } 3277 badge.textContent = count > 99 ? '99+' : String(count); 3278 badge.hidden = false; 3279 } 3280 function refresh() { 3281 var accountId = ''; 3282 try { accountId = localStorage.getItem('microsite_account_id') || ''; } catch (e) {} 3283 if (!accountId) { badge.hidden = true; return; } 3284 try { 3285 var cached = JSON.parse(sessionStorage.getItem(CACHE_KEY) || 'null'); 3286 if (cached && (Date.now() - cached.at) < 300000) { paint(cached.count); return; } 3287 } catch (e) {} 3288 fetch('/account/publishing/posts?state=scheduled', { headers: { 'x-account-id': accountId } }) 3289 .then(function (res) { return res.ok ? res.json() : null; }) 3290 .then(function (data) { 3291 if (!data || !data.ok) return; 3292 var count = (data.posts || []).length; 3293 try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ at: Date.now(), count: count })); } catch (e) {} 3294 paint(count); 3295 }) 3296 .catch(function () {}); 3297 } 3298 refresh(); 3299 window.addEventListener('microsite-account-updated', refresh); 3300})(); 3301</script>
3301<script> 3302(function () { 3303 var key = "microsite_launch_banner_dismissed"; 3304 var banner = document.getElementById('launchBanner'); 3305 if (!banner) return; 3306 if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) { 3307 banner.remove(); 3308 return; 3309 } 3310 if (localStorage.getItem(key) === '1') { 3311 banner.remove(); 3312 return; 3313 } 3314 var btn = banner.querySelector('[data-dismiss-banner]'); 3315 if (btn) btn.addEventListener('click', function () { 3316 localStorage.setItem(key, '1'); 3317 banner.remove(); 3318 }); 3319})(); 3320</script>
3320<script> 3321(function () { 3322 var DISMISS_KEY = 'microsite_usage_dismissed'; 3323 var host = document.getElementById('upgradeUsageHost'); 3324 if (!host) return; 3325 3326 function dismissedIds() { 3327 try { 3328 var raw = localStorage.getItem(DISMISS_KEY); 3329 return raw ? JSON.parse(raw) : {}; 3330 } catch (e) { return {}; } 3331 } 3332 3333 function dismissPrompt(id) { 3334 var map = dismissedIds(); 3335 map[id] = Date.now(); 3336 try { localStorage.setItem(DISMISS_KEY, JSON.stringify(map)); } catch (e) {} 3337 renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes || 0); 3338 } 3339 3340 function pendingUploadPrompts(usage, bytes) { 3341 var isPro = (usage && usage.isPro) || (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()); 3342 if (isPro || !bytes) return []; 3343 var limit = (usage && usage.perLinkLimit) || 1073741824; 3344 var limitLabel = (usage && usage.perLinkLimitLabel) || '1 GB'; 3345 var ratio = bytes / limit; 3346 if (ratio >= 1) { 3347 return [{ 3348 id: 'upload-size', 3349 level: 'urgent', 3350 title: 'File too large for Free', 3351 message: 'Local supports uploads up to ' + limitLabel + '. Pro adds 100 GB of cloud storage and supports up to 25 GB per link.', 3352 ctaLabel: 'Compare plans', 3353 ctaHref: '/plans', 3354 }]; 3355 } 3356 if (ratio >= 0.85) { 3357 return [{ 3358 id: 'upload-size', 3359 level: 'warn', 3360 title: 'Large upload', 3361 message: 'This upload is ' + formatBytes(bytes) + ' â close to your Local ' + limitLabel + ' cap. Pro supports up to 25 GB per link.', 3362 ctaLabel: 'See plans', 3363 ctaHref: '/plans', 3364 }]; 3365 } 3366 return []; 3367 } 3368 3369 function formatBytes(n) { 3370 if (n >= 1073741824) return (Math.round(n / 1073741824 * 10) / 10) + ' GB'; 3371 if (n >= 1048576) return Math.round(n / 1048576) + ' MB'; 3372 return Math.round(n / 1024) + ' KB'; 3373 } 3374 3375 function renderUsage(usage, pendingBytes) { 3376 if (!host) return; 3377 if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) { 3378 host.hidden = true; 3379 host.innerHTML = ''; 3380 return; 3381 } 3382 if (!usage || !usage.hasPrompts) { 3383 var pendingOnly = pendingUploadPrompts(usage, pendingBytes); 3384 if (!pendingOnly.length) { host.hidden = true; host.innerHTML = ''; return; } 3385 usage = usage || { prompts: [] }; 3386 } 3387 var dismissed = dismissedIds(); 3388 var extra = pendingUploadPrompts(usage, pendingBytes); 3389 var merged = (usage.prompts || []).concat(extra); 3390 var seen = {}; 3391 var prompts = merged.filter(function (p) { 3392 if (!p || !p.id || seen[p.id] || dismissed[p.id]) return false; 3393 seen[p.id] = true; 3394 return true; 3395 }); 3396 if (!prompts.length) { host.hidden = true; host.innerHTML = ''; return; } 3397 var top = prompts[0]; 3398 var level = top.level === 'urgent' ? 'upgrade-usage-banner--urgent' : (top.level === 'warn' ? 'upgrade-usage-banner--warn' : ''); 3399 host.innerHTML = '<div class="upgrade-usage-banner ' + level + '">' + 3400 '<div class="upgrade-usage-banner-body">' + 3401 '<p class="upgrade-usage-banner-title">' + top.title + '</p>' + 3402 '<p class="upgrade-usage-banner-msg">' + top.message + '</p>' + 3403 (prompts.length > 1 ? '<p class="upgrade-usage-banner-more">+' + (prompts.length - 1) + ' more tip' + (prompts.length > 2 ? 's' : '') + '</p>' : '') + 3404 '</div>' + 3405 '<div class="upgrade-usage-banner-actions">' + 3406 '<a class="upgrade-usage-banner-cta" href="' + (top.ctaHref || '/plans') + '">' + (top.ctaLabel || 'View plans') + '</a>' + 3407 '<button type="button" class="upgrade-usage-banner-dismiss" data-dismiss-usage="' + top.id + '">Dismiss</button>' + 3408 '</div></div>'; 3409 host.hidden = false; 3410 host.querySelector('[data-dismiss-usage]')?.addEventListener('click', function () { 3411 dismissPrompt(top.id); 3412 }); 3413 } 3414 3415 window.micrositeApplyUsage = function (usage) { 3416 window.micrositeUsage = usage || null; 3417 renderUsage(usage, window.micrositeUsagePendingBytes || 0); 3418 document.dispatchEvent(new CustomEvent('microsite-usage-updated', { detail: usage })); 3419 }; 3420 3421 window.micrositeSetPendingUploadBytes = function (bytes) { 3422 window.micrositeUsagePendingBytes = bytes || 0; 3423 renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes); 3424 }; 3425 3426 document.addEventListener('microsite-plan-updated', function () { 3427 renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes || 0); 3428 }); 3429 3430 try { 3431 if (window.micrositeUsage) renderUsage(window.micrositeUsage, 0); 3432 } catch (e) { /* ignore */ } 3433})(); 3434</script>
3434<script> 3435(function () { 3436 function esc(s) { 3437 return String(s == null ? '' : s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); 3438 } 3439 3440 function formatStatCount(n) { 3441 const value = Number(n) || 0; 3442 if (value >= 1000000) return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'M'; 3443 if (value >= 1000) return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'K'; 3444 return String(value); 3445 } 3446 3447 window.micrositeAchievementLabel = function (item) { 3448 if (!item) return ''; 3449 if (item.unlocked) return 'Done'; 3450 return formatStatCount(item.value) + ' / ' + formatStatCount(item.target); 3451 }; 3452 3453 window.micrositeProcessAchievements = function (items) { 3454 if (!Array.isArray(items) || !items.length) return; 3455 items.forEach(function (item) { 3456 if (!item || !item.id) return; 3457 var key = 'microsite_achievement_seen_' + item.id + '_' + (item.unlockedAt || ''); 3458 try { 3459 if (localStorage.getItem(key) === '1') return; 3460 localStorage.setItem(key, '1'); 3461 } catch (e) {} 3462 var label = item.label || 'Achievement unlocked'; 3463 var message = 'Achievement unlocked: ' + label; 3464 if (typeof window.micrositeToast === 'function') { 3465 window.micrositeToast(message, { duration: 9000 }); 3466 } 3467 }); 3468 }; 3469 3470 async function shareAchievement(item) { 3471 if (!item || !item.shareUrl) return; 3472 var title = (item.label || 'Achievement') + ' unlocked on VideoM8'; 3473 var shareUrl = item.shareUrl + (item.shareUrl.indexOf('?') >= 0 ? '&' : '?') + 'card=achievement'; 3474 if (typeof window.micrositeOpenShareModal === 'function') { 3475 window.micrositeOpenShareModal({ 3476 shareUrl: shareUrl, 3477 title: title, 3478 embedSupported: false, 3479 initialTab: 'social', 3480 }); 3481 return; 3482 } 3483 try { 3484 await navigator.clipboard.writeText(shareUrl); 3485 if (typeof window.micrositeToast === 'function') window.micrositeToast('Achievement link copied.'); 3486 } catch (e) { 3487 window.prompt('Copy achievement link', shareUrl); 3488 } 3489 } 3490 3491 window.micrositeRenderAchievementsPage = function (payload) { 3492 var achievements = payload.achievements || {}; 3493 var sets = Array.isArray(achievements.sets) ? achievements.sets : []; 3494 var grid = document.getElementById('achGrid'); 3495 var unlockedEl = document.getElementById('achUnlocked'); 3496 var totalEl = document.getElementById('achTotal'); 3497 var nextEl = document.getElementById('achNext'); 3498 if (unlockedEl) unlockedEl.textContent = achievements.unlockedCount || 0; 3499 if (totalEl) totalEl.textContent = achievements.totalCount || 0; 3500 if (nextEl) nextEl.textContent = achievements.next ? achievements.next.label : 'All done'; 3501 if (!grid) return; 3502 if (!sets.length) { 3503 grid.innerHTML = '<div class="ach-set"><div class="ach-set-head"><h2 class="ach-set-title">No achievements yet</h2></div></div>'; 3504 return; 3505 } 3506 grid.innerHTML = sets.map(function (set) { 3507 return '<section class="ach-set">' + 3508 '<div class="ach-set-head"><h2 class="ach-set-title">' + esc(set.label) + '</h2><span class="ach-set-count">' + 3509 esc((set.unlockedCount || 0) + ' / ' + (set.totalCount || 0)) + '</span></div>' + 3510 '<ul class="ach-list">' + (set.items || []).map(function (item) { 3511 var progress = Math.max(0, Math.min(100, Number(item.progress) || 0)); 3512 var shareAction = item.unlocked && item.shareUrl 3513 ? '<button type="button" class="ach-share" data-achievement-share="' + esc(item.id) + '">Share moment</button>' 3514 : ''; 3515 return '<li class="ach-item' + (item.unlocked ? ' is-unlocked' : ' is-locked') + '">' + 3516 '<div class="ach-card-top">' + 3517 '<span class="ach-mark" aria-hidden="true">' + (item.unlocked ? 'â' : '') + '</span>' + 3518 '<span class="ach-pill">' + (item.unlocked ? 'Unlocked' : 'Locked') + '</span>' + 3519 '</div>' + 3520 '<span><span class="ach-name">' + esc(item.label) + '</span><span class="ach-desc">' + esc(item.description) + '</span></span>' + 3521 '<span class="ach-card-bottom">' + 3522 '<span class="ach-value">' + esc(window.micrositeAchievementLabel(item)) + '</span>' + 3523 '<span class="ach-bar"><span style="width:' + progress + '%"></span></span>' + 3524 shareAction + 3525 '</span>' + 3526 '</li>'; 3527 }).join('') + '</ul></section>'; 3528 }).join(''); 3529 grid.querySelectorAll('[data-achievement-share]').forEach(function (button) { 3530 button.addEventListener('click', function () { 3531 var id = button.getAttribute('data-achievement-share') || ''; 3532 var found = null; 3533 sets.some(function (set) { 3534 return (set.items || []).some(function (item) { 3535 if (item && item.id === id) { 3536 found = item; 3537 return true; 3538 } 3539 return false;
3540 }); 3541 }); 3542 shareAchievement(found); 3543 }); 3544 }); 3545 }; 3546})(); 3547</script>
3547<script> 3548(function () { 3549 var toastHost = document.getElementById('micrositeToastHost'); 3550 var cmdkRoot = document.getElementById('micrositeCmdk'); 3551 var cmdkInput = document.getElementById('micrositeCmdkInput'); 3552 var cmdkList = document.getElementById('micrositeCmdkList'); 3553 var cmdkSelected = 0; 3554 var cmdkItems = []; 3555 var stuffCache = null; 3556 var stuffCacheAt = 0; 3557 3558 var NAV_ITEMS = [ 3559 { id: 'home', label: 'Home', hint: 'Marketing homepage', href: '/', aliases: 'dashboard start landing', icon: 'home' }, 3560 { id: 'record', label: 'Record', hint: 'Record screen and camera video', href: '/record', signedIn: true, aliases: 'camera screen studio video', icon: 'video' }, 3561 { id: 'upload', label: 'Upload', hint: 'Upload files or host a site', href: '/upload', signedIn: true, aliases: 'file site zip publish', icon: 'upload' }, 3562 { id: 'stuff', label: 'Library', hint: 'Your links', href: '/library', signedIn: true, aliases: 'stuff links files folders', icon: 'grid' }, 3563 { id: 'activity', label: 'Activity', hint: 'Recent events', href: '/activity', signedIn: true, aliases: 'notifications opened comments reactions', icon: 'bell' }, 3564 { id: 'engagement', label: 'Analytics', hint: 'Pro', href: '/engagement', signedIn: true, pro: true, aliases: 'engagement leads viewers visits', icon: 'chart' }, 3565 { id: 'features', label: 'Features', hint: 'Product overview', href: '/features', aliases: 'product overview', icon: 'sparkles' }, 3566 { id: 'blog', label: 'Blog', hint: 'Guides and workflows', href: '/blog', aliases: 'articles guides', icon: 'document' }, 3567 { id: 'achievements', label: 'Achievements', hint: 'Settings', href: '/achievements', signedIn: true, aliases: 'badges progress', icon: 'badge' }, 3568 { id: 'settings', label: 'Settings', hint: 'Account', href: '/settings', signedIn: true, aliases: 'personal workspace team account preferences', icon: 'grid' }, 3569 { id: 'profile', label: 'Public Profile', hint: 'Your page', href: '/profile', signedIn: true, aliases: 'bio public page', icon: 'user' }, 3570 { id: 'brand', label: 'Brand Kit', hint: 'Pro', href: '/brand', signedIn: true, pro: true, aliases: 'branding theme colours logo', icon: 'sparkles' }, 3571 { id: 'team', label: 'Team', hint: 'Workspace', href: '/team', signedIn: true, aliases: 'members invites workspace', icon: 'users' }, 3572 { id: 'plans', label: 'Plan & billing', hint: 'Account', href: '/plans', signedIn: true, aliases: 'billing subscription account', icon: 'card' }, 3573 { id: 'pricing', label: 'Pricing', hint: 'Compare plans', href: '/pricing', aliases: 'plans upgrade price', icon: 'tag' }, 3574 ]; 3575 3576 var CMDK_ICONS = { 3577 home: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v5.5a1.5 1.5 0 0 1-1.5 1.5H12v-5H8v5H5.5A1.5 1.5 0 0 1 4 16.5V11H3a1 1 0 0 1-.707-1.707l7-7Z"/></svg>', 3578 video: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M3.25 4A2.25 2.25 0 0 0 1 6.25v7.5A2.25 2.25 0 0 0 3.25 16h7.5A2.25 2.25 0 0 0 13 13.75v-7.5A2.25 2.25 0 0 0 10.75 4h-7.5ZM19 4.75a.75.75 0 0 0-1.28-.53l-3 3a.75.75 0 0 0-.22.53v4.5c0 .199.079.39.22.53l3 3a.75.75 0 0 0 1.28-.53V4.75Z"/></svg>', 3579 upload: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M5.5 11.5A3.5 3.5 0 0 1 9 8h1.086c.17-1.12 1.163-2 2.414-2 .96 0 1.792.6 2.124 1.448A3.75 3.75 0 0 1 17.5 11.5 3.75 3.75 0 0 1 13.75 15.25H9A3.5 3.5 0 0 1 5.5 11.5Z"/><path d="M10 7.25a.75.75 0 0 1 .53.22l2 2a.75.75 0 1 1-1.06 1.06l-.72-.72V13a.75.75 0 0 1-1.5 0V9.81l-.72.72a.75.75 0 0 1-1.06-1.06l2-2a.75.75 0 0 1 .53-.22Z"/></svg>', 3580 grid: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h2.5A2.25 2.25 0 0 1 10 4.25v2.5A2.25 2.25 0 0 1 7.75 9h-2.5A2.25 2.25 0 0 1 3 6.75v-2.5Zm9.75 0A2.25 2.25 0 0 1 15 2h2.5a2.25 2.25 0 0 1 2.25 2.25v2.5A2.25 2.25 0 0 1 17.5 9H15a2.25 2.25 0 0 1-2.25-2.25v-2.5ZM3 13.25A2.25 2.25 0 0 1 5.25 11h2.5A2.25 2.25 0 0 1 10 13.25v2.5A2.25 2.25 0 0 1 7.75 18h-2.5A2.25 2.25 0 0 1 3 15.75v-2.5Zm9.75 0A2.25 2.25 0 0 1 15 11h2.5a2.25 2.25 0 0 1 2.25 2.25v2.5A2.25 2.25 0 0 1 17.5 18H15a2.25 2.25 0 0 1-2.25-2.25v-2.5Z" clip-rule="evenodd"/></svg>', 3581 bell: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M7.5 3.75a2.5 2.5 0 1 1 5 0v.35A5.5 5.5 0 0 1 15.5 9v1.8l1.2 2.4A1.25 1.25 0 0 1 15.582 15H4.418A1.25 1.25 0 0 1 3.3 13.2l1.2-2.4V9a5.5 5.5 0 0 1 3-4.9v-.35ZM8 16.25a2 2 0 0 0 4 0H8Z" clip-rule="evenodd"/></svg>', 3582 chart: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M15.5 2A1.5 1.5 0 0 0 14 3.5v13a1.5 1.5 0 0 0 1.5 1.5h1a1.5 1.5 0 0 0 1.5-1.5v-13A1.5 1.5 0 0 0 16.5 2h-1ZM8.5 7A1.5 1.5 0 0 0 7 8.5v8A1.5 1.5 0 0 0 8.5 18h1a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 9.5 7h-1ZM2 12.5A1.5 1.5 0 0 1 3.5 11h1A1.5 1.5 0 0 1 6 12.5v4A1.5 1.5 0 0 1 4.5 18h-1A1.5 1.5 0 0 1 2 16.5v-4Z"/></svg>', 3583 sparkles: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684Z"/></svg>', 3584 document: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 2A1.5 1.5 0 0 0 3 3.5v13A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5V7.621a1.5 1.5 0 0 0-.44-1.06l-4.12-4.122A1.5 1.5 0 0 0 11.378 2H4.5ZM6.75 10.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 3a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z" clip-rule="evenodd"/></svg>', 3585 badge: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 2a6 6 0 0 0-3.66 10.754l-.764 3.82a.75.75 0 0 0 1.073.815L10 15.713l3.351 1.676a.75.75 0 0 0 1.073-.816l-.764-3.82A6 6 0 0 0 10 2Zm2.78 6.28a.75.75 0 1 0-1.06-1.06L9.25 9.69 8.28 8.72a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3-3Z" clip-rule="evenodd"/></svg>', 3586 user: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-7 9a7 7 0 1 1 14 0H3Z" clip-rule="evenodd"/></svg>', 3587 users: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.5 18a5.5 5.5 0 0 1 11 0h-11ZM12.9 18h5.6a4.5 4.5 0 0 0-6.23-4.15A6.48 6.48 0 0 1 12.9 18Z"/></svg>', 3588 card: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M2 5.5A2.5 2.5 0 0 1 4.5 3h11A2.5 2.5 0 0 1 18 5.5V6H2v-.5ZM2 8v6.5A2.5 2.5 0 0 0 4.5 17h11a2.5 2.5 0 0 0 2.5-2.5V8H2Zm3 5.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>', 3589 tag: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879c0 .663.263 1.299.732 1.768l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.879-3.879a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.379 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/></svg>', 3590 folder: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M3.75 3A1.75 1.75 0 0 0 2 4.75V8.01c.505-.323 1.106-.51 1.75-.51h12.5c.644 0 1.245.187 1.75.51V6.75A1.75 1.75 0 0 0 16.25 5h-4.836a.25.25 0 0 1-.177-.073L9.823 3.513A1.75 1.75 0 0 0 8.586 3H3.75Z"/><path d="M3.75 9A1.75 1.75 0 0 0 2 10.75v4.5C2 16.216 2.784 17 3.75 17h12.5A1.75 1.75 0 0 0 18 15.25v-4.5A1.75 1.75 0 0 0 16.25 9H3.75Z"/></svg>', 3591 link: '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M12.232 4.232a3.25 3.25 0 0 1 4.596 4.596l-2.5 2.5a3.25 3.25 0 0 1-4.596 0 .75.75 0 1 1 1.061-1.061 1.75 1.75 0 0 0 2.475 0l2.5-2.5a1.75 1.75 0 0 0-2.475-2.474l-1.006 1.005a.75.75 0 1 1-1.06-1.06l1.005-1.006Z"/><path d="M7.768 15.768a3.25 3.25 0 0 1-4.596-4.596l2.5-2.5a3.25 3.25 0 0 1 4.596 0 .75.75 0 0 1-1.061 1.061 1.75 1.75 0 0 0-2.475 0l-2.5 2.5a1.75 1.75 0 0 0 2.475 2.474l1.006-1.005a.75.75 0 1 1 1.06 1.06l-1.005 1.006Z"/></svg>', 3592 }; 3593 3594 function accountId() { 3595 try { return localStorage.getItem('microsite_account_id') || ''; } catch (e) { return ''; } 3596 } 3597 3598 function isPro() { 3599 return typeof window.micrositeIsPro === 'function' && window.micrositeIsPro(); 3600 } 3601 3602 function escapeHtml(value) { 3603 return String(value == null ? '' : value) 3604 .replace(/&/g, '&') 3605 .replace(/</g, '<') 3606 .replace(/>/g, '>') 3607 .replace(/"/g, '"'); 3608 } 3609 3610 function cmdkGroupLabel(type) { 3611 if (type === 'folder') return 'Folders'; 3612 if (type === 'link') return 'Shared links'; 3613 return 'Pages'; 3614 } 3615 3616 function cmdkIconHtml(item) { 3617 var key = item.icon || item.type || 'link'; 3618 return CMDK_ICONS[key] || CMDK_ICONS.link; 3619 } 3620 3621 function cmdkShortcutHtml(item) { 3622 return '<span class="ms-cmdk-shortcut"><kbd>Enter</kbd>' + (item.external ? '<kbd>â</kbd>' : '') + '</span>'; 3623 } 3624 3625 window.micrositeToast = function (message, options) { 3626 options = options || {}; 3627 if (!toastHost || !message) return null; 3628 var el = document.createElement('div'); 3629 el.className = 'ms-toast'; 3630 el.innerHTML = '<span class="ms-toast-msg"></span><div class="ms-toast-actions"></div>'; 3631 el.querySelector('.ms-toast-msg').textContent = message; 3632 var actions = el.querySelector('.ms-toast-actions');
3633 var undoFn = options.undo; 3634 if (typeof undoFn === 'function') { 3635 var undoBtn = document.createElement('button'); 3636 undoBtn.type = 'button'; 3637 undoBtn.className = 'ms-toast-btn ms-toast-btn--undo'; 3638 undoBtn.textContent = options.undoLabel || 'Undo'; 3639 undoBtn.addEventListener('click', function () { 3640 undoFn(); 3641 el.remove(); 3642 }); 3643 actions.appendChild(undoBtn); 3644 } 3645 var dismiss = document.createElement('button'); 3646 dismiss.type = 'button'; 3647 dismiss.className = 'ms-toast-btn ms-toast-btn--dismiss'; 3648 dismiss.textContent = 'Dismiss'; 3649 dismiss.addEventListener('click', function () { el.remove(); }); 3650 actions.appendChild(dismiss); 3651 toastHost.appendChild(el); 3652 var ttl = options.duration || (undoFn ? 10000 : 5000); 3653 var timer = window.setTimeout(function () { el.remove(); }, ttl); 3654 el.addEventListener('remove', function () { window.clearTimeout(timer); }); 3655 return el; 3656 }; 3657 3658 window.micrositeClearSkeleton = function (container) { 3659 if (!container) return; 3660 var overlay = container.querySelector('.ms-skeleton-overlay'); 3661 if (overlay) overlay.remove(); 3662 container.classList.remove('is-skeleton-loading'); 3663 if (container.dataset.loading === 'skeleton') delete container.dataset.loading; 3664 }; 3665 3666 window.micrositeShowSkeleton = function (container, variant, count) { 3667 if (!container) return; 3668 count = count || 3; 3669 var html = ''; 3670 if (variant === 'stat') { 3671 html = Array(count).fill('<div class="ms-skeleton ms-skeleton-stat"></div>').join(''); 3672 } else { 3673 html = Array(count).fill( 3674 '<div class="ms-skeleton-row ms-skeleton">' + 3675 '<div class="ms-skeleton-line ms-skeleton-line--md" style="margin:16px"></div>' + 3676 '<div class="ms-skeleton-line ms-skeleton-line--sm" style="margin:12px 16px 16px"></div></div>' 3677 ).join(''); 3678 } 3679 if (container.dataset.skeletonMode === 'overlay') { 3680 window.micrositeClearSkeleton(container); 3681 var overlay = document.createElement('div'); 3682 overlay.className = 'ms-skeleton-overlay'; 3683 overlay.setAttribute('aria-hidden', 'true'); 3684 overlay.innerHTML = html; 3685 container.appendChild(overlay); 3686 container.classList.add('is-skeleton-loading'); 3687 container.dataset.loading = 'skeleton'; 3688 return; 3689 } 3690 container.innerHTML = html; 3691 container.dataset.loading = 'skeleton'; 3692 }; 3693 3694 async function loadStuffForCmdk() { 3695 var id = accountId(); 3696 if (!id) return []; 3697 if (stuffCache && Date.now() - stuffCacheAt < 60000) return stuffCache; 3698 try { 3699 var res = await fetch('/account/stuff', { headers: { 'x-account-id': id } }); 3700 var data = await res.json().catch(function () { return {}; }); 3701 if (!res.ok) return []; 3702 stuffCache = data || {}; 3703 stuffCacheAt = Date.now(); 3704 return stuffCache; 3705 } catch (e) { return []; } 3706 } 3707 3708 function buildCmdkItems(query) { 3709 var q = (query || '').trim().toLowerCase(); 3710 var signedIn = !!accountId(); 3711 var items = []; 3712 NAV_ITEMS.forEach(function (nav) { 3713 if (nav.signedIn && !signedIn) return; 3714 if (nav.pro && !isPro()) return; 3715 var hay = (nav.label + ' ' + nav.hint + ' ' + nav.href + ' ' + (nav.aliases || '')).toLowerCase(); 3716 if (q && hay.indexOf(q) < 0) return; 3717 items.push({ type: 'nav', label: nav.label, hint: nav.hint, href: nav.href, icon: nav.icon }); 3718 }); 3719 ((stuffCache && stuffCache.folders) || []).forEach(function (folder) { 3720 var hay = [folder.name, 'folder', 'library'].join(' ').toLowerCase(); 3721 if (q && hay.indexOf(q) < 0) return; 3722 items.push({ 3723 type: 'folder', 3724 label: folder.name || 'Folder', 3725 hint: 'Library folder', 3726 href: '/library?folder=' + encodeURIComponent(folder.folderId || ''), 3727 icon: 'folder', 3728 }); 3729 }); 3730 ((stuffCache && stuffCache.items) || []).forEach(function (row) { 3731 var hay = [row.displayTitle, row.pageTitle, row.label, row.slug, row.type, row.kind, row.shareUrl, (row.tags || []).join(' ')].join(' ').toLowerCase(); 3732 if (q && hay.indexOf(q) < 0) return; 3733 items.push({ 3734 type: 'link', 3735 label: row.displayTitle || row.pageTitle || row.label || row.slug || 'Shared link', 3736 hint: row.kind || row.type || 'Link', 3737 href: row.shareUrl, 3738 external: true, 3739 icon: 'link', 3740 }); 3741 }); 3742 return items; 3743 } 3744 3745 function renderCmdkList() { 3746 if (!cmdkList) return; 3747 cmdkItems = buildCmdkItems(cmdkInput ? cmdkInput.value : ''); 3748 cmdkSelected = 0; 3749 if (!cmdkItems.length) { 3750 cmdkList.innerHTML = '<li class="ms-cmdk-empty">No matches</li>'; 3751 return; 3752 } 3753 var lastGroup = ''; 3754 cmdkList.innerHTML = cmdkItems.map(function (item, i) { 3755 var group = cmdkGroupLabel(item.type); 3756 var groupHtml = group === lastGroup ? '' : '<li class="ms-cmdk-group-label" role="presentation">' + escapeHtml(group) + '</li>'; 3757 lastGroup = group; 3758 return groupHtml + '<li class="ms-cmdk-item" role="option" data-cmdk-index="' + i + '" aria-selected="' + (i === 0 ? 'true' : 'false') + '">' + 3759 '<span class="ms-cmdk-icon" aria-hidden="true">' + cmdkIconHtml(item) + '</span>' + 3760 '<span class="ms-cmdk-item-main"><span class="ms-cmdk-item-title">' + escapeHtml(item.label) + '</span><span class="ms-cmdk-item-hint">' + 3761 escapeHtml(item.hint) + '</span></span>' + 3762 cmdkShortcutHtml(item) + '</li>'; 3763 }).join(''); 3764 cmdkList.querySelectorAll('.ms-cmdk-item').forEach(function (el) { 3765 el.addEventListener('mouseenter', function () { 3766 cmdkSelected = Number(el.getAttribute('data-cmdk-index')) || 0; 3767 updateCmdkSelection(); 3768 }); 3769 el.addEventListener('click', function () { 3770 cmdkSelected = Number(el.getAttribute('data-cmdk-index')) || 0; 3771 runCmdkSelection(); 3772 }); 3773 }); 3774 } 3775 3776 function updateCmdkSelection() { 3777 if (!cmdkList) return; 3778 cmdkList.querySelectorAll('.ms-cmdk-item').forEach(function (el, i) { 3779 el.setAttribute('aria-selected', i === cmdkSelected ? 'true' : 'false'); 3780 }); 3781 var active = cmdkList.querySelector('[data-cmdk-index="' + cmdkSelected + '"]'); 3782 if (active) active.scrollIntoView({ block: 'nearest' }); 3783 } 3784 3785 function runCmdkSelection() { 3786 var item = cmdkItems[cmdkSelected]; 3787 if (!item) return; 3788 closeCmdk(); 3789 if (item.external && item.href) { 3790 window.open(item.href, '_blank', 'noopener'); 3791 return; 3792 } 3793 if (item.href) window.location.href = item.href; 3794 } 3795 3796 var cmdkTriggerEl = null; 3797 3798 function openCmdk(initialQuery) { 3799 if (!cmdkRoot) return; 3800 cmdkTriggerEl = document.activeElement; 3801 cmdkRoot.hidden = false;
3802 if (cmdkInput) { 3803 cmdkInput.value = initialQuery || ''; 3804 cmdkInput.focus(); 3805 } 3806 renderCmdkList(); 3807 loadStuffForCmdk().then(function () { 3808 renderCmdkList(); 3809 }); 3810 } 3811 3812 function closeCmdk() { 3813 if (!cmdkRoot) return; 3814 cmdkRoot.hidden = true; 3815 if (cmdkTriggerEl && typeof cmdkTriggerEl.focus === 'function') cmdkTriggerEl.focus(); 3816 cmdkTriggerEl = null; 3817 } 3818 3819 function cmdkFocusables() { 3820 var panel = cmdkRoot.querySelector('.ms-cmdk-panel'); 3821 if (!panel) return []; 3822 return Array.prototype.filter.call( 3823 panel.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'), 3824 function (el) { return !el.disabled && !el.hidden && el.offsetParent !== null; } 3825 ); 3826 } 3827 3828 if (cmdkRoot) { 3829 cmdkRoot.querySelectorAll('[data-cmdk-close]').forEach(function (el) { 3830 el.addEventListener('click', closeCmdk); 3831 }); 3832 if (cmdkInput) { 3833 cmdkInput.addEventListener('input', renderCmdkList); 3834 cmdkInput.addEventListener('keydown', function (e) { 3835 if (e.key === 'ArrowDown') { e.preventDefault(); cmdkSelected = Math.min(cmdkSelected + 1, cmdkItems.length - 1); updateCmdkSelection(); } 3836 if (e.key === 'ArrowUp') { e.preventDefault(); cmdkSelected = Math.max(cmdkSelected - 1, 0); updateCmdkSelection(); } 3837 if (e.key === 'Enter') { e.preventDefault(); runCmdkSelection(); } 3838 if (e.key === 'Escape') { e.preventDefault(); closeCmdk(); } 3839 }); 3840 } 3841 } 3842 3843 document.addEventListener('keydown', function (e) { 3844 if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { 3845 e.preventDefault(); 3846 if (cmdkRoot && !cmdkRoot.hidden) closeCmdk(); 3847 else openCmdk(); 3848 } 3849 if (e.key === 'Escape' && cmdkRoot && !cmdkRoot.hidden) closeCmdk(); 3850 if (e.key === 'Tab' && cmdkRoot && !cmdkRoot.hidden) { 3851 var focusables = cmdkFocusables(); 3852 if (!focusables.length) return; 3853 var first = focusables[0]; 3854 var last = focusables[focusables.length - 1]; 3855 var active = document.activeElement; 3856 var panel = cmdkRoot.querySelector('.ms-cmdk-panel'); 3857 if (e.shiftKey && (active === first || !panel.contains(active))) { 3858 e.preventDefault(); 3859 last.focus(); 3860 } else if (!e.shiftKey && (active === last || !panel.contains(active))) { 3861 e.preventDefault(); 3862 first.focus(); 3863 } 3864 } 3865 }); 3866 3867 document.querySelectorAll('[data-open-cmdk-form]').forEach(function (form) { 3868 form.addEventListener('submit', function (e) { 3869 e.preventDefault(); 3870 openCmdk(); 3871 }); 3872 }); 3873 3874 document.querySelectorAll('[data-open-cmdk]').forEach(function (btn) { 3875 btn.addEventListener('click', function (e) { 3876 e.preventDefault(); 3877 openCmdk(); 3878 }); 3879 }); 3880 3881 document.querySelectorAll('[data-open-cmdk-input]').forEach(function (input) { 3882 input.addEventListener('focus', function () { openCmdk(); }); 3883 input.addEventListener('keydown', function (e) { 3884 if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) { 3885 e.preventDefault(); 3886 openCmdk(e.key); 3887 } 3888 }); 3889 }); 3890 3891 window.micrositeOpenCmdk = openCmdk; 3892 window.micrositeInvalidateStuffCache = function () { stuffCache = null; stuffCacheAt = 0; }; 3893 3894 window.micrositeInitSortableList = function (listEl, options) { 3895 if (!listEl) return; 3896 options = options || {}; 3897 var dragging = null; 3898 listEl.querySelectorAll('[data-drag-item]').forEach(function (row) { 3899 var handle = row.querySelector('[data-drag-handle]'); 3900 if (!handle) return; 3901 handle.addEventListener('dragstart', function (e) { 3902 dragging = handle.closest('[data-drag-item]') || row; 3903 dragging.classList.add('is-dragging'); 3904 if (e.dataTransfer) { 3905 e.dataTransfer.effectAllowed = 'move'; 3906 e.dataTransfer.setData('text/plain', row.getAttribute('data-drag-id') || ''); 3907 } 3908 }); 3909 handle.addEventListener('dragend', function () { 3910 if (dragging) dragging.classList.remove('is-dragging'); 3911 listEl.querySelectorAll('.is-drop-target').forEach(function (el) { el.classList.remove('is-drop-target'); }); 3912 dragging = null; 3913 }); 3914 row.addEventListener('dragover', function (e) { 3915 if (!dragging || dragging === row) return; 3916 e.preventDefault(); 3917 row.classList.add('is-drop-target'); 3918 }); 3919 row.addEventListener('dragleave', function () { row.classList.remove('is-drop-target'); }); 3920 row.addEventListener('drop', function (e) { 3921 e.preventDefault(); 3922 row.classList.remove('is-drop-target'); 3923 if (!dragging || dragging === row) return; 3924 var parent = row.parentNode; 3925 var rect = row.getBoundingClientRect(); 3926 var before = e.clientY < rect.top + rect.height / 2; 3927 if (before) parent.insertBefore(dragging, row); 3928 else parent.insertBefore(dragging, row.nextSibling); 3929 if (typeof options.onReorder === 'function') options.onReorder(collectOrder()); 3930 }); 3931 }); 3932 3933 function collectOrder() { 3934 return Array.from(listEl.querySelectorAll('[data-drag-item]')).map(function (el) { 3935 return el.getAttribute('data-drag-id') || ''; 3936 }
3936).filter(Boolean); 3937 } 3938 }; 3939})(); 3940</script>
3940<script> 3941(function () { 3942 var ACCOUNT_ID_KEY = 'microsite_account_id'; 3943 var READ_KEY = 'microsite_activity_read_at'; 3944 var wrap = document.getElementById('navActivityLink'); 3945 var badge = document.getElementById('navActivityBadge'); 3946 var items = []; 3947 var pollTimer = null; 3948 3949 function readAt() { 3950 try { return localStorage.getItem(READ_KEY) || ''; } catch (e) { return ''; } 3951 } 3952 3953 async function setReadAt(iso) { 3954 var next = iso || new Date().toISOString(); 3955 try { localStorage.setItem(READ_KEY, next); } catch (e) {} 3956 var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 3957 if (accountId) { 3958 try { 3959 var res = await fetch('/account/activity/read', { 3960 method: 'POST', 3961 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 3962 body: JSON.stringify({ readAt: next }), 3963 }); 3964 var data = await res.json().catch(function () { return {}; }); 3965 if (res.ok && data.readAt) { 3966 next = data.readAt; 3967 try { localStorage.setItem(READ_KEY, next); } catch (e) {} 3968 } 3969 } catch (e) {} 3970 } 3971 updateBadge(); 3972 } 3973 3974 function updateBadge() { 3975 if (!badge) return; 3976 var lastRead = readAt(); 3977 var unread = items.some(function (it) { return it.at && (!lastRead || it.at > lastRead); }); 3978 badge.hidden = !unread; 3979 } 3980 3981 async function loadActivity(markSeen) { 3982 var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 3983 if (!accountId || !wrap) return; 3984 try { 3985 var res = await fetch('/account/activity?limit=25&compact=1', { headers: { 'x-account-id': accountId } }); 3986 var data = await res.json().catch(function () { return {}; }); 3987 if (!res.ok) return; 3988 items = data.items || []; 3989 if (data.readAt) { 3990 try { localStorage.setItem(READ_KEY, data.readAt); } catch (e) {} 3991 } 3992 if (markSeen && items[0]?.at) setReadAt(items[0].at); 3993 updateBadge(); 3994 } catch (e) {} 3995 } 3996 3997 function showForSignedIn() { 3998 if (!wrap) return; 3999 var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 4000 wrap.classList.toggle('hidden', !accountId); 4001 if (accountId) { 4002 loadActivity(false); 4003 if (!pollTimer) pollTimer = window.setInterval(function () { loadActivity(false); }, 90000); 4004 } else if (pollTimer) { 4005 window.clearInterval(pollTimer); 4006 pollTimer = null; 4007 } 4008 } 4009 4010 window.addEventListener('storage', function (e) { 4011 if (e.key === ACCOUNT_ID_KEY) showForSignedIn(); 4012 if (e.key === READ_KEY) updateBadge(); 4013 }); 4014 window.addEventListener('microsite-activity-read', updateBadge); 4015 window.addEventListener('microsite-auth-updated', showForSignedIn); 4016 document.addEventListener('DOMContentLoaded', showForSignedIn); 4017 if (document.readyState !== 'loading') showForSignedIn(); 4018})(); 4019</script>
4019 4020
4020<script> 4021(function () { 4022 const ACCOUNT_ID_KEY = 'microsite_account_id'; 4023 const ACCOUNT_EMAIL_KEY = 'microsite_account_email'; 4024 const SESSION_EXPIRES_KEY = 'microsite_session_expires_at'; 4025 const SESSION_TTL_MS = 2592000000; 4026 const accountModal = document.getElementById('accountModal'); 4027 if (!accountModal) return; 4028 4029 const accountGuest = document.getElementById('accountGuest'); 4030 const accountSignedIn = document.getElementById('accountSignedIn'); 4031 const accountLoginForm = document.getElementById('accountLoginForm'); 4032 const accountEmailStep = document.getElementById('accountEmailStep'); 4033 const accountCodeStep = document.getElementById('accountCodeStep'); 4034 const accountEmailInput = document.getElementById('accountEmail'); 4035 const accountLoginCode = document.getElementById('accountLoginCode'); 4036 const accountCodeEmail = document.getElementById('accountCodeEmail'); 4037 const accountSendCodeBtn = document.getElementById('accountSendCodeBtn'); 4038 const accountVerifyCodeBtn = document.getElementById('accountVerifyCodeBtn'); 4039 const accountResendCodeBtn = document.getElementById('accountResendCodeBtn'); 4040 const accountStatusEl = document.getElementById('accountStatus'); 4041 const accountModalTitle = document.getElementById('accountModalTitle'); 4042 const accountModalDesc = document.getElementById('accountModalDesc'); 4043 const accountEmailDisplay = document.getElementById('accountEmailDisplay'); 4044 const accountSignOutBtn = document.getElementById('accountSignOutBtn'); 4045 const accountModalSignOutBtn = document.getElementById('accountModalSignOutBtn'); 4046 const accountModalContinueBtn = document.getElementById('accountModalContinueBtn'); 4047 const accountModalNeverHint = document.getElementById('accountModalNeverHint'); 4048 const linkExpiryNever = document.getElementById('linkExpiryNever'); 4049 const expiryNeverLabel = document.getElementById('expiryNeverLabel'); 4050 const expiryNeverUpgradeNote = document.getElementById('expiryNeverUpgradeNote'); 4051 const linkSlugInput = document.getElementById('linkSlug'); 4052 const customSlugWrap = document.getElementById('customSlugWrap'); 4053 let defaultLinkNamePlaceholder = ''; 4054 const leadCaptureWrap = document.getElementById('leadCaptureWrap'); 4055 const leadCaptureInput = document.getElementById('leadCapture'); 4056 const leadHeadlineWrap = document.getElementById('leadHeadlineWrap'); 4057 const leadHeadlineInput = document.getElementById('leadHeadline'); 4058 const videoConversionWrap = document.getElementById('videoConversionWrap'); 4059 const linkExpiry1h = document.getElementById('linkExpiry1h'); 4060 const linkExpiry24h = document.getElementById('linkExpiry24h'); 4061 const expiry1hLabel = document.getElementById('expiry1hLabel'); 4062 const expiry24hLabel = document.getElementById('expiry24hLabel'); 4063 const defaultExpiryInput = document.querySelector('input[name="linkExpiry"][value="7d"]'); 4064 const navAuthGuest = document.getElementById('navAuthGuest'); 4065 const navAuthSignedIn = document.getElementById('navAuthSignedIn'); 4066 const navBrandingLink = document.getElementById('navBrandingLink'); 4067 const navLibraryTree = document.getElementById('navLibraryTree'); 4068 const navLibraryFolders = document.getElementById('navLibraryFolders'); 4069 const navLibraryFavorites = document.getElementById('navLibraryFavorites'); 4070 const navLibraryFavoritesSection = document.getElementById('navLibraryFavoritesSection'); 4071 const navLibraryEmpty = document.getElementById('navLibraryEmpty'); 4072 const navLibraryNewFolder = document.getElementById('navLibraryNewFolder'); 4073 const navWorkspaceSelect = document.getElementById('navWorkspaceSelect'); 4074 const navWorkspaceRole = document.getElementById('navWorkspaceRole'); 4075 const hasNeverExpiry = !!linkExpiryNever; 4076 let accountModalReturnFocus = null; 4077 let accountModalMode = 'login'; 4078 let navLibraryData = null; 4079 let navFolderNameEditor = null; 4080 let navDraggingShareIds = []; 4081 let navDraggingFolderId = ''; 4082 let navExpandedFolderIds = new Set(); 4083 let navCollapsedFolderIds = new Set(); 4084 const FOLDER_COLORS = ['slate', 'red', 'amber', 'emerald', 'sky', 'indigo', 'violet', 'pink']; 4085 const FOLDER_COLOR_HEX = { 4086 slate: '#64748b', 4087 red: '#ef4444', 4088 amber: '#f59e0b', 4089 emerald: '#10b981', 4090 sky: '#0ea5e9', 4091 indigo: '#6366f1', 4092 violet: '#8b5cf6', 4093 pink: '#ec4899', 4094 }; 4095 4096 const modalCopy = { 4097 never: { 4098 title: 'Paid plan required for permanent hosting', 4099 desc: 'Upgrade to Pro to create links that never expire.', 4100 }, 4101 pro: { 4102 title: 'See what Pro includes', 4103 desc: 'Sign in, then upgrade to Pro for permanent links, custom branding, storage, analytics, and AI credits.', 4104 }, 4105 login: { 4106 title: 'Continue with email', 4107 desc: 'Weâll email you a sign-in code. New accounts are created automatically.', 4108 }, 4109 signup: { 4110 title: 'Continue with email', 4111 desc: 'Weâll email you a sign-in code. New accounts are created automatically.', 4112 }, 4113 }; 4114 4115 function getStoredAccountId() { 4116 return localStorage.getItem(ACCOUNT_ID_KEY) || ''; 4117 } 4118 4119 function refreshSessionExpiry() { 4120 try {
4121 localStorage.setItem(SESSION_EXPIRES_KEY, String(Date.now() + SESSION_TTL_MS)); 4122 } catch (e) { /* ignore */ } 4123 } 4124 4125 function isSessionExpired() { 4126 try { 4127 var raw = localStorage.getItem(SESSION_EXPIRES_KEY); 4128 if (!raw) return false; 4129 var expires = Number(raw); 4130 return Number.isFinite(expires) && expires > 0 && Date.now() > expires; 4131 } catch (e) { 4132 return false; 4133 } 4134 } 4135 4136 function clearStoredSession() { 4137 localStorage.removeItem(ACCOUNT_ID_KEY); 4138 localStorage.removeItem(ACCOUNT_EMAIL_KEY); 4139 localStorage.removeItem(SESSION_EXPIRES_KEY); 4140 } 4141 4142 function restoreCachedSignedInUi(email) { 4143 var cachedPlan = 'free'; 4144 try { 4145 if (localStorage.getItem('microsite_user_plan') === 'pro') cachedPlan = 'pro'; 4146 } catch (e) { /* ignore */ } 4147 setSignedInUi(email, cachedPlan, null, null); 4148 } 4149 4150 function setNavShellMode(signedIn) { 4151 document.body.classList.toggle('nav-logged-in', !!signedIn); 4152 const nav = document.querySelector('.site-primary-nav'); 4153 if (nav) nav.classList.toggle('is-logged-in', !!signedIn); 4154 if (typeof window.micrositeApplyNavSidebarState === 'function') { 4155 window.micrositeApplyNavSidebarState(); 4156 } 4157 } 4158 4159 function setHiddenById(id, hidden) { 4160 var el = document.getElementById(id); 4161 if (el) el.classList.toggle('hidden', !!hidden); 4162 } 4163 4164 function upgradeFeatureFromMode(mode) { 4165 if (mode === 'never') return 'permanentExpiry'; 4166 if (mode === 'leads') return 'leads'; 4167 if (mode === 'team') return 'teamWorkspace'; 4168 if (mode === 'clips') return 'clips'; 4169 if (mode === 'customSlug') return 'customSlug'; 4170 if (mode === 'analytics') return 'analytics'; 4171 return 'branding'; 4172 } 4173 4174 function upgradeHrefForFeature(feature) { 4175 var path = window.location.pathname || '/upload'; 4176 var query = window.location.search || ''; 4177 return '/plans?feature=' + encodeURIComponent(feature || 'branding') + '&returnTo=' + encodeURIComponent(path + query); 4178 } 4179 4180 function setUploadProPanelLocked(panel, locked) { 4181 if (!panel) return; 4182 panel.classList.toggle('is-plan-locked', !!locked); 4183 panel.setAttribute('aria-disabled', locked ? 'true' : 'false'); 4184 panel.querySelectorAll('input, select, button').forEach(function (el) { 4185 el.disabled = !!locked; 4186 }); 4187 } 4188 4189 function applyPlanUi(plan, payload) { 4190 var userPlan = plan === 'pro' ? 'pro' : 'free'; 4191 var isPro = userPlan === 'pro'; 4192 if (linkExpiryNever) linkExpiryNever.disabled = !isPro; 4193 if (linkSlugInput) linkSlugInput.disabled = !isPro; 4194 if (customSlugWrap) customSlugWrap.classList.toggle('is-plan-locked', !isPro); 4195 if (expiryNeverUpgradeNote) expiryNeverUpgradeNote.classList.toggle('is-visible', !isPro); 4196 setUploadProPanelLocked(leadCaptureWrap, !isPro); 4197 setUploadProPanelLocked(videoConversionWrap, !isPro); 4198 if (leadCaptureInput && !isPro) leadCaptureInput.checked = false; 4199 if (leadHeadlineWrap && !isPro) leadHeadlineWrap.classList.add('hidden'); 4200 if (leadHeadlineInput && !isPro) leadHeadlineInput.value = ''; 4201 if (linkExpiry1h) linkExpiry1h.disabled = false; 4202 if (linkExpiry24h) linkExpiry24h.disabled = false; 4203 if (!isPro && defaultExpiryInput) defaultExpiryInput.checked = true; 4204 window.micrositeUserPlan = userPlan; 4205 if (typeof window.micrositeApplyPlanFromPayload === 'function' && payload) { 4206 userPlan = window.micrositeApplyPlanFromPayload(payload); 4207 } else if (typeof window.micrositeApplyPlanState === 'function') { 4208 window.micrositeApplyPlanState(userPlan); 4209 } 4210 window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: userPlan })); 4211 return userPlan; 4212 } 4213 4214 function updateNavAuthUi(email, profileMeta) { 4215 setNavShellMode(true); 4216 if (navAuthGuest) navAuthGuest.classList.add('hidden'); 4217 if (navAuthSignedIn) navAuthSignedIn.classList.remove('hidden'); 4218 setHiddenById('navSolutionsLink', true); 4219 setHiddenById('navTemplatesLink', true); 4220 setHiddenById('navResourcesLink', true); 4221 setHiddenById('navPricingLink', true); 4222 setHiddenById('navRecordLink', true); 4223 setHiddenById('navUploadLink', true); 4224 setHiddenById('navRecordCta', false); 4225 setHiddenById('navIdeasLink', false); 4226 setHiddenById('navStuffLink', false); 4227 setHiddenById('navAgentLink', false); 4228 setHiddenById('navPublishingLink', false); 4229 setHiddenById('navInboxLink', false); 4230 setHiddenById('navLibraryTree', !getStoredAccountId() || !['/library', '/stuff'].includes(window.location.pathname)); 4231 setHiddenById('navEngagementLink', false); 4232 setHiddenById('navTeamLink', false); 4233 setHiddenById('navActivityLink', false); 4234 if (typeof window.updateNavProfileAvatar === 'function') { 4235 window.updateNavProfileAvatar(profileMeta || { displayName: email || 'Account menu' }); 4236 } 4237 // On /record the nav folder tree is below-the-fold chrome â defer its 4238 // fetch to idle so it never competes with the camera pre-warm and engine. 4239 if (window.location.pathname === '/record') { 4240 (window.requestIdleCallback || function (fn) { window.setTimeout(fn, 2000); })(function () { loadNavLibrary(); }); 4241 } else { 4242 loadNavLibrary(); 4243 } 4244 loadWorkspaces(); 4245 } 4246 4247 function workspaceRoleLabel(value) {
4248 value = String(value || ''); 4249 return value ? value.charAt(0).toUpperCase() + value.slice(1) : ''; 4250 } 4251 4252 async function loadWorkspaces() { 4253 if (!navWorkspaceSelect || !getStoredAccountId()) return; 4254 try { 4255 const res = await fetch('/account/workspaces', { headers: { 'x-account-id': getStoredAccountId() } }); 4256 const data = await res.json(); 4257 if (!res.ok || !Array.isArray(data.workspaces)) return; 4258 navWorkspaceSelect.innerHTML = data.workspaces.map(function (workspace) { 4259 return '<option value="' + String(workspace.id).replace(/"/g, '"') + '"' + (workspace.active ? ' selected' : '') + '>' + 4260 String(workspace.name || 'Workspace').replace(/[&<>]/g, function (ch) { return ({ '&': '&', '<': '<', '>': '>' })[ch]; }) + 4261 '</option>'; 4262 }).join(''); 4263 const active = data.workspaces.find(function (workspace) { return workspace.active; }); 4264 if (navWorkspaceRole) navWorkspaceRole.textContent = active ? workspaceRoleLabel(active.role) : ''; 4265 const crumb = document.querySelector('.nav-page-breadcrumb li:first-child a'); 4266 if (crumb && active) crumb.textContent = active.name; 4267 } catch (e) { /* keep personal fallback */ } 4268 } 4269 4270 navWorkspaceSelect?.addEventListener('change', async function () { 4271 navWorkspaceSelect.disabled = true; 4272 if (navWorkspaceRole) navWorkspaceRole.textContent = 'Switchingâ¦'; 4273 try {
4274 const res = await fetch('/account/workspaces/switch', { 4275 method: 'POST', 4276 headers: { 'Content-Type': 'application/json', 'x-account-id': getStoredAccountId() }, 4277 body: JSON.stringify({ workspaceId: navWorkspaceSelect.value }), 4278 }); 4279 const data = await res.json().catch(function () { return {}; }); 4280 if (!res.ok) throw new Error(data.error || 'Could not switch workspace.'); 4281 window.location.reload(); 4282 } catch (err) { 4283 if (navWorkspaceRole) navWorkspaceRole.textContent = err.message || 'Could not switch workspace.'; 4284 navWorkspaceSelect.disabled = false; 4285 } 4286 }); 4287 4288 function updateNavGuestUi() { 4289 setNavShellMode(false); 4290 if (navAuthGuest) navAuthGuest.classList.remove('hidden'); 4291 if (navAuthSignedIn) navAuthSignedIn.classList.add('hidden'); 4292 setHiddenById('navSolutionsLink', false); 4293 setHiddenById('navTemplatesLink', false); 4294 setHiddenById('navResourcesLink', false); 4295 setHiddenById('navPricingLink', false); 4296 setHiddenById('navRecordLink', true); 4297 setHiddenById('navUploadLink', true); 4298 setHiddenById('navRecordCta', true); 4299 setHiddenById('navIdeasLink', true); 4300 setHiddenById('navStuffLink', true); 4301 setHiddenById('navAgentLink', true); 4302 setHiddenById('navPublishingLink', true); 4303 setHiddenById('navInboxLink', true); 4304 setHiddenById('navLibraryTree', true); 4305 setHiddenById('navEngagementLink', true); 4306 setHiddenById('navTeamLink', true); 4307 setHiddenById('navActivityLink', true); 4308 if (typeof window.updateNavProfileAvatar === 'function') window.updateNavProfileAvatar(null); 4309 } 4310 4311 function setSignedInUi(email, plan, profileMeta, payload) { 4312 if (accountGuest) accountGuest.classList.add('hidden'); 4313 if (accountSignedIn) accountSignedIn.classList.remove('hidden'); 4314 if (accountEmailDisplay) accountEmailDisplay.textContent = email || 'your account'; 4315 if (accountModalContinueBtn) accountModalContinueBtn.hidden = !hasNeverExpiry; 4316 if (accountModalNeverHint) accountModalNeverHint.hidden = !hasNeverExpiry; 4317 applyPlanUi(plan || 'free', payload || null); 4318 updateNavAuthUi(email, profileMeta); 4319 if (payload && typeof window.micrositeApplyUsage === 'function') { 4320 window.micrositeApplyUsage(payload.usage || null); 4321 } 4322 window.dispatchEvent(new CustomEvent('microsite-auth-updated', { 4323 detail: { signedIn: true, email: email || '', plan: window.micrositeUserPlan || plan || 'free', payload: payload || null }, 4324 })); 4325 } 4326 4327 function setSignedOutUi() { 4328 if (accountGuest) accountGuest.classList.remove('hidden'); 4329 if (accountSignedIn) accountSignedIn.classList.add('hidden'); 4330 if (linkExpiryNever) { 4331 linkExpiryNever.disabled = true; 4332 linkExpiryNever.checked = false; 4333 } 4334 if (linkSlugInput) { 4335 linkSlugInput.disabled = true; 4336 linkSlugInput.value = ''; 4337 } 4338 if (defaultExpiryInput) defaultExpiryInput.checked = true; 4339 applyPlanUi('free', null); 4340 updateNavGuestUi(); 4341 window.dispatchEvent(new CustomEvent('microsite-auth-updated', { detail: { signedIn: false } })); 4342 } 4343 4344 function openAccountModal(mode) { 4345 accountModalMode = mode || 'login'; 4346 if (window.micrositeUserPlan === 'pro' && (accountModalMode === 'pro' || accountModalMode === 'never')) { 4347 accountModalMode = 'login'; 4348 } 4349 var copy = modalCopy[accountModalMode] || modalCopy.login; 4350 if (accountModalTitle) accountModalTitle.textContent = copy.title; 4351 if (accountModalDesc) accountModalDesc.textContent = copy.desc; 4352 accountModalReturnFocus = document.activeElement; 4353 accountModal.hidden = false; 4354 document.body.style.overflow = 'hidden'; 4355 if (getStoredAccountId()) { 4356 if (accountGuest) accountGuest.classList.add('hidden'); 4357 if (accountSignedIn) accountSignedIn.classList.remove('hidden'); 4358 } else { 4359 if (accountGuest) accountGuest.classList.remove('hidden'); 4360 if (accountSignedIn) accountSignedIn.classList.add('hidden'); 4361 if (accountStatusEl) accountStatusEl.textContent = ''; 4362 showEmailStep(); 4363 } 4364 window.setTimeout(function () { if (accountEmailInput) accountEmailInput.focus(); }, 50); 4365 } 4366 4367 function closeAccountModal() { 4368 accountModal.hidden = true; 4369 document.body.style.overflow = ''; 4370 if (accountModalReturnFocus && accountModalReturnFocus.focus) accountModalReturnFocus.focus(); 4371 accountModalReturnFocus = null; 4372 } 4373 4374 function selectNeverExpiry() { 4375 if (linkExpiryNever) { 4376 linkExpiryNever.disabled = false;
4377 linkExpiryNever.checked = true; 4378 } 4379 } 4380 4381 function promptProFeature(mode) { 4382 if (window.micrositeUserPlan === 'pro') return; 4383 if (getStoredAccountId()) { 4384 window.location.assign(upgradeHrefForFeature(upgradeFeatureFromMode(mode || 'pro'))); 4385 return; 4386 } 4387 openAccountModal(mode || 'pro'); 4388 } 4389 4390 function showCodeStep(email) { 4391 if (accountEmailStep) accountEmailStep.classList.add('hidden'); 4392 if (accountCodeStep) accountCodeStep.classList.remove('hidden'); 4393 if (accountCodeEmail) accountCodeEmail.textContent = email; 4394 if (accountLoginCode) { 4395 accountLoginCode.value = ''; 4396 accountLoginCode.focus(); 4397 } 4398 if (accountModalTitle) accountModalTitle.textContent = 'Check your email'; 4399 if (accountModalDesc) accountModalDesc.textContent = 'Enter the 6-digit code or use the link we sent.'; 4400 } 4401 4402 function showEmailStep() { 4403 if (accountCodeStep) accountCodeStep.classList.add('hidden'); 4404 if (accountEmailStep) accountEmailStep.classList.remove('hidden'); 4405 var copy = modalCopy[accountModalMode] || modalCopy.login; 4406 if (accountModalTitle) accountModalTitle.textContent = copy.title; 4407 if (accountModalDesc) accountModalDesc.textContent = copy.desc; 4408 updateSignupFields(); 4409 } 4410 4411 function updateSignupFields() { 4412 if (accountSendCodeBtn) accountSendCodeBtn.textContent = 'Continue'; 4413 } 4414 4415 /** 4416 * Same-origin path or nothing: canonicalize through the URL parser so 4417 * tricks it honors (backslashes-as-slashes, stripped tabs/newlines turning 4418 * a path into //host) can't smuggle in another origin. 4419 */ 4420 function safeLoginReturnPath(path) { 4421 try { 4422 if (typeof path !== 'string' || path.charAt(0) !== '/') return ''; 4423 var parsed = new URL(path, window.location.origin); 4424 if (parsed.origin !== window.location.origin) return ''; 4425 return parsed.pathname + parsed.search + parsed.hash; 4426 } catch (e) { 4427 return ''; 4428 } 4429 } 4430 4431 /** Remember where to land after login (e.g. /library?returnTo=/studio?id=x). */ 4432 function rememberLoginReturnTo() { 4433 try { 4434 var requested = new URLSearchParams(window.location.search).get('returnTo') || ''; 4435 if (!requested && window.location.pathname === '/record') requested = window.location.pathname + window.location.search; 4436 var path = safeLoginReturnPath(requested); 4437 if (!path) return; 4438 localStorage.setItem('microsite_login_return_to', JSON.stringify({ path: path, exp: Date.now() + 15 * 60 * 1000 })); 4439 } catch (e) {} 4440 } 4441 4442 function consumeLoginReturnTo() { 4443 try { 4444 var stored = JSON.parse(localStorage.getItem('microsite_login_return_to') || 'null'); 4445 localStorage.removeItem('microsite_login_return_to'); 4446 if (stored && typeof stored.path === 'string' && Number(stored.exp) > Date.now()) { 4447 return safeLoginReturnPath(stored.path); 4448 } 4449 } catch (e) {} 4450 return ''; 4451 } 4452 4453 function authKitUrl(mode) { 4454 var params = new URLSearchParams(); 4455 params.set('screenHint', mode === 'signup' ? 'sign-up' : 'sign-in'); 4456 var requested = ''; 4457 try { 4458 requested = new URLSearchParams(window.location.search).get('returnTo') || ''; 4459 } catch (e) {} 4460 var returnTo = safeLoginReturnPath(requested); 4461 if (!returnTo && window.location.pathname !== '/') { 4462 returnTo = safeLoginReturnPath(window.location.pathname + window.location.search + window.location.hash); 4463 } 4464 params.set('returnTo', returnTo || '/library'); 4465 return '/auth/workos/login?' + params.toString(); 4466 } 4467 4468 function openAuthEntry(mode) { 4469 if (mode === 'login' || mode === 'signup') { 4470 if (getStoredAccountId()) { 4471 window.location.assign('/library'); 4472 return; 4473 } 4474 if (mode === 'signup' && typeof window.micrositePiqo === 'function') { 4475 window.micrositePiqo('signup_started', { entry_path: window.location.pathname }); 4476 } 4477 window.location.assign(authKitUrl(mode)); 4478 return; 4479 } 4480 openAccountModal(mode || 'login'); 4481 } 4482 4483 async function requestLoginCode(email, isSignup, profileDraft) { 4484 rememberLoginReturnTo(); 4485 var returnTo = safeLoginReturnPath(window.location.pathname + window.location.search + window.location.hash) || '/library'; 4486 var response = await fetch('/account/request-login', { 4487 method: 'POST', 4488 headers: { 'Content-Type': 'application/json' }, 4489 body: JSON.stringify({ 4490 email: email, 4491 signup: !!isSignup, 4492 firstName: profileDraft && profileDraft.firstName || '', 4493 lastName: profileDraft && profileDraft.lastName || '', 4494 returnTo: returnTo, 4495 }), 4496 }); 4497 var data = await response.json().catch(function () { return {}; }); 4498 if (!response.ok) throw new Error(data.error || 'Could not send sign-in email.'); 4499 return data; 4500 } 4501 4502 async function verifyLoginCode(email, code) { 4503 var response = await fetch('/account/verify-login', { 4504 method: 'POST', 4505 headers: { 'Content-Type': 'application/json' }, 4506 body: JSON.stringify({ email: email, code: code }), 4507 }); 4508 var data = await response.json().catch(function () { return {}; }); 4509 if (!response.ok || !data.accountId) throw new Error(data.error || 'Invalid code.'); 4510 localStorage.setItem(ACCOUNT_ID_KEY, data.accountId); 4511 localStorage.setItem(ACCOUNT_EMAIL_KEY, email); 4512 refreshSessionExpiry(); 4513 setSignedInUi(email, data.plan || 'free', data.profile || null, data); 4514 return data.accountId; 4515 } 4516 4517 async function completeLogin(email, isSignup) { 4518 if (accountStatusEl) accountStatusEl.textContent = 'Sending your sign-in code...'; 4519 if (isSignup && typeof window.micrositePiqo === 'function') { 4520 window.micrositePiqo('signup_started', { entry_path: window.location.pathname }); 4521 } 4522 var loginResponse = await requestLoginCode(email, isSignup, null); 4523 if (loginResponse && loginResponse.redirectUrl) { 4524 var workosUrl = new URL(loginResponse.redirectUrl); 4525 if (workosUrl.protocol !== 'https:' || workosUrl.origin !== 'https://api.workos.com') {
4526 throw new Error('The sign-in destination was invalid.'); 4527 } 4528 window.location.assign(workosUrl.toString()); 4529 return; 4530 } 4531 if (accountStatusEl) accountStatusEl.textContent = 'Check your inbox for the code and link.'; 4532 showCodeStep(email); 4533 } 4534 4535 async function restoreAccountSession() { 4536 var accountId = getStoredAccountId(); 4537 var email = localStorage.getItem(ACCOUNT_EMAIL_KEY) || ''; 4538 if (!accountId) { 4539 setSignedOutUi(); 4540 return; 4541 } 4542 try { 4543 var response = await fetch('/account/ping', { 4544 method: 'POST', 4545 headers: { 'Content-Type': 'application/json' }, 4546 body: JSON.stringify({ accountId: accountId }), 4547 }); 4548 if (!response.ok) { 4549 if (response.status === 400 || response.status === 401 || response.status === 403 || response.status === 404) { 4550 clearStoredSession(); 4551 setSignedOutUi(); 4552 return; 4553 } 4554 throw new Error('session check failed'); 4555 } 4556 var pingData = await response.json().catch(function () { return {}; }); 4557 refreshSessionExpiry(); 4558 setSignedInUi(pingData.email || email, pingData.plan || 'free', pingData.profile || null, pingData); 4559 } catch (err) { 4560 restoreCachedSignedInUi(email); 4561 } 4562 } 4563 4564 async function signOutAccount() { 4565 var logoutUrl = ''; 4566 try { 4567 var response = await fetch('/account/logout', { method: 'POST' }); 4568 var data = await response.json().catch(function () { return {}; }); 4569 logoutUrl = data && data.logoutUrl || ''; 4570 } catch (e) {} 4571 clearStoredSession(); 4572 setSignedOutUi(); 4573 if (accountStatusEl) accountStatusEl.textContent = 'Signed out.'; 4574 closeAccountModal(); 4575 if (logoutUrl) { 4576 try { 4577 var parsed = new URL(logoutUrl); 4578 if (parsed.protocol === 'https:' && parsed.origin === 'https://api.workos.com') { 4579 window.location.assign(parsed.toString()); 4580 return; 4581 } 4582 } catch (e) {} 4583 } 4584 window.location.assign('/'); 4585 } 4586 4587 function gateProExpiryLabel(labelEl, inputEl, mode) { 4588 if (!labelEl || !inputEl) return; 4589 labelEl.addEventListener('click', function (event) { 4590 if (inputEl.disabled) { 4591 event.preventDefault(); 4592 promptProFeature(mode); 4593 } 4594 }); 4595 } 4596 4597 accountModal.querySelectorAll('[data-close-modal]').forEach(function (el) { 4598 el.addEventListener('click', closeAccountModal); 4599 }); 4600 document.addEventListener('keydown', function (event) { 4601 if (event.key === 'Escape' && !accountModal.hidden) closeAccountModal(); 4602 // Keep Tab inside the dialog while it is open (focus trap). 4603 if (event.key === 'Tab' && !accountModal.hidden) { 4604 var panel = accountModal.querySelector('.account-modal-panel'); 4605 if (!panel) return; 4606 var focusables = Array.prototype.filter.call( 4607 panel.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'), 4608 function (el) { return !el.disabled && !el.hidden && el.offsetParent !== null; } 4609 ); 4610 if (!focusables.length) return; 4611 var first = focusables[0]; 4612 var last = focusables[focusables.length - 1]; 4613 var active = document.activeElement; 4614 if (event.shiftKey && (active === first || !panel.contains(active))) { 4615 event.preventDefault(); 4616 last.focus(); 4617 } else if (!event.shiftKey && (active === last || !panel.contains(active))) { 4618 event.preventDefault(); 4619 first.focus(); 4620 } 4621 } 4622 }); 4623 document.querySelectorAll('[data-open-account]').forEach(function (btn) { 4624 btn.addEventListener('click', function (event) { 4625 event.preventDefault(); 4626 openAuthEntry(btn.getAttribute('data-open-account') || 'login'); 4627 }); 4628 }); 4629 document.querySelectorAll('[data-upload-upgrade-feature]').forEach(function (link) { 4630 link.addEventListener('click', function (event) { 4631 if (window.micrositeUserPlan === 'pro') return; 4632 if (getStoredAccountId()) return; 4633 event.preventDefault(); 4634 openAccountModal('pro'); 4635 }); 4636 }); 4637 gateProExpiryLabel(expiryNeverLabel, linkExpiryNever, 'never'); 4638 if (expiry1hLabel && linkExpiry1h) gateProExpiryLabel(expiry1hLabel, linkExpiry1h, 'pro'); 4639 if (expiry24hLabel && linkExpiry24h) gateProExpiryLabel(expiry24hLabel, linkExpiry24h, 'pro'); 4640 if (linkSlugInput) { 4641 defaultLinkNamePlaceholder = linkSlugInput.getAttribute('placeholder') || ''; 4642 linkSlugInput.addEventListener('focus', function () { 4643 if (linkSlugInput.disabled) { 4644 linkSlugInput.blur(); 4645 promptProFeature('pro'); 4646 } 4647 }); 4648 } 4649 if (accountModalContinueBtn) { 4650 accountModalContinueBtn.addEventListener('click', function () { 4651 selectNeverExpiry(); 4652 closeAccountModal(); 4653 }); 4654 } 4655 if (accountLoginForm) { 4656 accountLoginForm.addEventListener('submit', function (event) { 4657 event.preventDefault(); 4658 var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase(); 4659 if (!email) { 4660 if (accountStatusEl) accountStatusEl.textContent = 'Enter your email address.'; 4661 return; 4662 } 4663 completeLogin(email, accountModalMode === 'signup').catch(function (err) { 4664 if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Could not send email.'; 4665 }); 4666 }); 4667 } 4668 if (accountVerifyCodeBtn) { 4669 accountVerifyCodeBtn.addEventListener('click', function () { 4670 var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase(); 4671 var code = (accountLoginCode && accountLoginCode.value || '').trim(); 4672 if (!email || !code) { 4673 if (accountStatusEl) accountStatusEl.textContent = 'Enter the 6-digit code from your email.'; 4674 return; 4675 } 4676 if (accountStatusEl) accountStatusEl.textContent = 'Verifying...'; 4677 var completingSignup = accountModalMode === 'signup'; 4678 verifyLoginCode(email, code).then(function () { 4679 if (completingSignup && typeof window.micrositePiqo === 'function') { 4680 window.micrositePiqo('signup_completed', { entry_path: window.location.pathname }); 4681 } 4682 if (hasNeverExpiry && (accountModalMode === 'never' || linkExpiryNever)) selectNeverExpiry(); 4683 if (accountStatusEl) accountStatusEl.textContent = 'Signed in.'; 4684 var loginReturnTo = consumeLoginReturnTo(); 4685 if (loginReturnTo) { 4686 window.setTimeout(function () { window.location.assign(loginReturnTo); }, 400); 4687 return; 4688 } 4689 window.setTimeout(closeAccountModal, 400); 4690 }).catch(function (err) { 4691 if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Invalid code.'; 4692 }); 4693 }); 4694 } 4695 if (accountResendCodeBtn) { 4696 accountResendCodeBtn.addEventListener('click', function () { 4697 var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase(); 4698 if (!email) return; 4699 if (accountStatusEl) accountStatusEl.textContent = 'Sending a new code...'; 4700 requestLoginCode(email, false).then(function () { 4701 if (accountStatusEl) accountStatusEl.textContent = 'New code sent.'; 4702 }).catch(function (err) { 4703 if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Re
4703send failed.'; 4704 }); 4705 }); 4706 } 4707 if (accountSignOutBtn) accountSignOutBtn.addEventListener('click', signOutAccount); 4708 if (accountModalSignOutBtn) accountModalSignOutBtn.addEventListener('click', signOutAccount); 4709 window.micrositeSignOut = signOutAccount; 4710 4711function navEscapeHtml(value) { 4712 return String(value || '').replace(/[&<>"']/g, function (ch) { 4713 return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[ch]; 4714 }); 4715 } 4716 4717 function navFolderColor(folder) { 4718 var color = folder && typeof folder.color === 'string' ? folder.color : ''; 4719 return FOLDER_COLOR_HEX[color] || FOLDER_COLOR_HEX.indigo; 4720 } 4721 4722 function navFolderStyle(folder) { 4723 return 'style="--folder-color:' + navEscapeHtml(navFolderColor(folder)) + '"'; 4724 } 4725 4726 function navCurrentFolderId() { 4727 try { 4728 return new URL(window.location.href).searchParams.get('folder') || ''; 4729 } catch (e) { 4730 return ''; 4731 } 4732 } 4733 4734 function isLibraryPage() { 4735 return window.location.pathname === '/library' || window.location.pathname === '/stuff'; 4736 } 4737 4738 function setNavCurrentFolder(folderId) { 4739 var id = folderId || ''; 4740 if (id) { 4741 navExpandedFolderIds.add(id); 4742 navCollapsedFolderIds.delete(id); 4743 } 4744 if (isLibraryPage()) { 4745 var url = new URL(window.location.href); 4746 if (id) url.searchParams.set('folder', id); 4747 else url.searchParams.delete('folder'); 4748 window.history.replaceState({}, '', url.pathname + url.search); 4749 window.dispatchEvent(new CustomEvent('microsite-library-folder-selected', { detail: { folderId: id } })); 4750 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 4751 return; 4752 } 4753 window.location.href = id ? '/library?folder=' + encodeURIComponent(id) : '/library'; 4754 } 4755 4756 window.addEventListener('microsite-library-folder-changed', function (event) { 4757 var id = event && event.detail ? (event.detail.folderId || '') : ''; 4758 if (id) { 4759 navExpandedFolderIds.add(id); 4760 navCollapsedFolderIds.delete(id); 4761 } 4762 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 4763 }); 4764 4765 function navCardTitle(row) { 4766 var title = String(row && (row.displayTitle || row.pageTitle || row.label || row.slug) || '').trim(); 4767 if (!title) return row && row.kind === 'video' ? 'Video' : 'Shared link'; 4768 return title; 4769 } 4770 4771 function navSortItems(rows) { 4772 return (rows || []).slice().sort(function (a, b) { 4773 return String(b.updatedAt || b.createdAt || '').localeCompare(String(a.updatedAt || a.createdAt || '')); 4774 }); 4775 } 4776 4777 function navFavoriteIcon() { 4778 return '<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C8.284 2 6.592 2.106 4.93 2.31 3.806 2.45 3 3.414 3 4.517V17.25a.75.75 0 0 0 1.075.676L10 15.082l5.925 2.844A.75.75 0 0 0 17 17.25V4.517c0-1.103-.806-2.068-1.93-2.206A41.38 41.38 0 0 0 10 2Z" /></svg>'; 4779 } 4780 4781 function navFileHtml(row) { 4782 var title = navEscapeHtml(navCardTitle(row)); 4783 var href = row && row.shareUrl ? navEscapeHtml(row.shareUrl) : '#'; 4784 return '<li class="nav-library-file-item" draggable="true" data-nav-share-id="' + navEscapeHtml(row && row.shareId || '') + '">' + 4785 '<span class="nav-library-drag-handle" aria-hidden="true" title="Drag to move">â®â®</span>' + 4786 '<a class="nav-library-file-link" href="' + href + '"' + (row && row.shareUrl ? ' target="_blank" rel="noopener"' : '') + ' title="' + title + '">' + 4787 '<span class="nav-library-file-icon" aria-hidden="true"></span>' + 4788 '<span class="nav-library-file-name">' + title + '</span>' + 4789 '</a></li>'; 4790 } 4791 4792 function navFolderNameFormHtml() { 4793 if (!navFolderNameEditor) return ''; 4794 return '<form class="nav-library-name-form" data-nav-folder-name-form data-parent-folder-id="' + navEscapeHtml(navFolderNameEditor.parentFolderId || '') + '">' + 4795 '<label class="sr-only" for="navLibraryFolderName">Folder name</label>' + 4796 '<input id="navLibraryFolderName" class="nav-library-name-input" name="folderName" type="text" value="' + navEscapeHtml(navFolderNameEditor.name || '') + '" maxlength="80" placeholder="Folder name" autocomplete="off">' + 4797 '<div class="nav-library-name-actions">' + 4798 '<button type="submit" class="nav-library-name-save">Create</button>' + 4799 '<button type="button" class="nav-library-name-cancel" data-nav-folder-name-cancel>Cancel</button>' + 4800 '</div>' + 4801 '</form>'; 4802 } 4803 4804 function navFoldersByParent(folders) { 4805 return (folders || []).reduce(function (map, folder) { 4806 var parentId = folder.parentFolderId || ''; 4807 if (!map[parentId]) map[parentId] = []; 4808 map[parentId].push(folder); 4809 return map; 4810 }, {}); 4811 } 4812 4813 function navFolderDescendantActive(folderId, byParent) { 4814 var activeId = navCurrentFolderId(); 4815 if (!activeId || activeId === folderId) return activeId === folderId; 4816 var children = byParent[folderId] || []; 4817 return children.some(function (child) { 4818 return navFolderDescendantActive(child.folderId, byParent); 4819 }); 4820 } 4821 4822 function navFolderHtml(folder, byParent, depth) { 4823 var active = navCurrentFolderId() === folder.folderId; 4824 var children = byParent[folder.folderId] || []; 4825 var hasChildren = children.length > 0; 4826 var descendantActive = !active && navFolderDescendantActive(folder.folderId, byParent); 4827 var expanded = !!(active || descendantActive || navExpandedFolderIds.has(folder.folderId)) && !navCollapsedFolderIds.has(folder.folderId); 4828 var count = folder.itemCount || 0; 4829 var childCount = folder.childCount || children.length || 0; 4830 var totalCount = count + childCount; 4831 var items = navSortItems((navLibraryData && navLibraryData.items || []).filter(function (row) {
4832 return (row.folderId || '') === folder.folderId; 4833 })).slice(0, 12); 4834 var files = expanded 4835 ? '<ul class="nav-library-file-list">' + (items.length 4836 ? items.map(navFileHtml).join('') 4837 : '<li class="nav-library-empty">No files in this folder.</li>') + '</ul>' 4838 : ''; 4839 var childCreateForm = navFolderNameEditor && navFolderNameEditor.parentFolderId === folder.folderId 4840 ? '<li class="nav-library-node" role="none">' + navFolderNameFormHtml() + '</li>' 4841 : ''; 4842 var childTree = expanded && (hasChildren || childCreateForm) 4843 ? '<ul class="nav-library-subtree" role="group">' + childCreateForm + children.map(function (child) { 4844 return navFolderHtml(child, byParent, Math.min(depth + 1, 5)); 4845 }).join('') + '</ul>' 4846 : ''; 4847 var label = navEscapeHtml(folder.name || 'Folder'); 4848 return '<li class="nav-library-node" role="none">' + 4849 '<div class="nav-library-folder' + (active ? ' is-active' : '') + (expanded ? ' is-expanded' : '') + '" role="treeitem" tabindex="0" aria-level="' + (depth + 1) + '" aria-expanded="' + (hasChildren || items.length ? (expanded ? 'true' : 'false') : 'fal
4849se') + '" aria-selected="' + (active ? 'true' : 'false') + '" aria-label="' + label + '" data-nav-folder="' + navEscapeHtml(folder.folderId) + '" data-nav-folder-drop-id="' + navEscapeHtml(folder.folderId) + '" data-nav-depth="' + Math.min(depth, 4) + '" draggable="true">' + 4850 '<div class="nav-library-folder-row">' + 4851 '<span class="nav-library-drag-handle" aria-hidden="true" title="Drag to move">â®â®</span>' + 4852 '<button type="button" class="nav-library-folder-toggle" data-nav-folder-toggle="' + navEscapeHtml(folder.folderId) + '" aria-expanded="' + (expanded ? 'true' : 'false') + '">' + 4853 '<span class="nav-library-caret" aria-hidden="true">âº</span>' + 4854 '<span class="nav-library-folder-icon" ' + navFolderStyle(folder) + ' aria-hidden="true"></span>' + 4855 '<span class="nav-library-folder-name">' + label + '</span>' + 4856 '<span class="nav-library-count">' + totalCount + '</span>' + 4857 '</button>' + 4858 '<button type="button" class="nav-library-favorite nav-library-child-add" data-nav-folder-add-child="' + navEscapeHtml(folder.folderId) + '" aria-label="New subfolder in ' + label + '" title="New subfolder">+</button>' + 4859 '<button type="button" class="nav-library-favorite' + (folder.favorite ? ' is-on' : '') + '" data-nav-folder-favorite="' + navEscapeHtml(folder.folderId) + '" aria-label="' + (folder.favorite ? 'Remove from favorites' : 'Add to favorites') + '" title="' + (folder.favorite ? 'Remove from favorites' : 'Add to favorites') + '">' + 4860 navFavoriteIcon() + 4861 '</button>' + 4862 '</div>' + 4863 files + 4864 childTree + 4865 '</div></li>'; 4866 } 4867 4868 function navFavoriteFolderHtml(folder) { 4869 var active = navCurrentFolderId() === folder.folderId; 4870 var label = navEscapeHtml(folder.name || 'Folder'); 4871 return '<button type="button" class="nav-library-folder-toggle nav-library-saved-view' + (active ? ' is-active' : '') + '" data-nav-folder-open="' + navEscapeHtml(folder.folderId) + '" aria-current="' + (active ? 'page' : 'false') + '">' + 4872 '<span class="nav-library-folder-icon" ' + navFolderStyle(folder) + ' aria-hidden="true"></span>' + 4873 '<span class="nav-library-folder-name">' + label + '</span>' + 4874 '<span class="nav-library-count">' + ((folder.itemCount || 0) + (folder.childCount || 0)) + '</span>' + 4875 '</button>'; 4876 } 4877 4878 function renderNavLibrary(data) { 4879 navLibraryData = data || navLibraryData || {}; 4880 var folders = navLibraryData.folders || []; 4881 var libraryContext = isLibraryPage(); 4882 if (navLibraryTree) { 4883 navLibraryTree.classList.toggle('hidden', !getStoredAccountId() || !libraryContext); 4884 var folderDisclosure = navLibraryTree.querySelector('.nav-folders-disclosure'); 4885 if (folderDisclosure && navCurrentFolderId()) folderDisclosure.open = true; 4886 } 4887 var byParent = navFoldersByParent(folders); 4888 var treeHtml = '<ul class="nav-library-list" role="tree" aria-label="Library folders">' + (byParent[''] || []).map(function (folder) { 4889 return navFolderHtml(folder, byParent, 0); 4890 }).join('') + '</ul>'; 4891 if (navLibraryFolders) navLibraryFolders.innerHTML = (navFolderNameEditor && !navFolderNameEditor.parentFolderId ? navFolderNameFormHtml() : '') + treeHtml; 4892 if (navLibraryEmpty) navLibraryEmpty.hidden = !!folders.length; 4893 var favorites = folders.filter(function (folder) { return !!folder.favorite; }); 4894 if (navLibraryFavoritesSection) navLibraryFavoritesSection.hidden = !favorites.length; 4895 if (navLibraryFavorites) navLibraryFavorites.innerHTML = favorites.map(navFavoriteFolderHtml).join(''); 4896 } 4897 4898 function focusNavFolderNameInput() { 4899 window.setTimeout(function () { 4900 var input = document.getElementById('navLibraryFolderName'); 4901 if (!input) return; 4902 input.focus(); 4903 input.select(); 4904 }, 0); 4905 } 4906 4907 function openNavFolderNameEditor(parentFolderId) { 4908 navFolderNameEditor = { name: '', parentFolderId: parentFolderId || '' }; 4909 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 4910 focusNavFolderNameInput(); 4911 } 4912 4913 function cancelNavFolderNameEditor() { 4914 navFolderNameEditor = null; 4915 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 4916 } 4917 4918 var navLibraryLoadPromise = null; 4919 var navLibraryLoadedAt = 0; 4920 4921 // Same idempotent definition as the library page script â see the comment 4922 // there. On pages without the library script this copy is the one that runs. 4923 window.micrositeSharedStuffFetch = window.micrositeSharedStuffFetch || function (accountId) { 4924 if (window.micrositeSharedStuffInflight) return window.micrositeSharedStuffInflight; 4925 window.micrositeSharedStuffInflight = fetch('/account/stuff', { headers: { 'x-account-id': accountId } }) 4926 .then(function (res) { 4927 return res.json().catch(function () { return {}; }).then(function (data) { 4928 return { ok: res.ok, status: res.status, data: data }; 4929 }); 4930 }) 4931 .finally(function () { window.micrositeSharedStuffInflight = null; }); 4932 return window.micrositeSharedStuffInflight; 4933 }; 4934 4935 async function loadNavLibrary(options) { 4936 var accountId = getStoredAccountId(); 4937 if (!accountId || !navLibraryTree) return; 4938 // Auth-state syncs can fire this several times at boot â reuse one 4939 // request, and skip refetches inside a short window unless forced. 4940 var force = options && options.force; 4941 if (navLibraryLoadPromise) return navLibraryLoadPromise; 4942 if (!force && navLibraryLoadedAt && Date.now() - navLibraryLoadedAt < 30000) return; 4943 navLibraryLoadPromise = (async function () {
4944 try { 4945 // Shared single-flight with the library page script (which fetches 4946 // the identical /account/stuff payload) â concurrent boots join one 4947 // request regardless of which script starts first. 4948 var result = await window.micrositeSharedStuffFetch(accountId); 4949 if (result.ok) { 4950 renderNavLibrary(result.data); 4951 navLibraryLoadedAt = Date.now(); 4952 } 4953 } catch (e) {} 4954 navLibraryLoadPromise = null; 4955 })(); 4956 return navLibraryLoadPromise; 4957 } 4958 4959 async function postNavFolderUpdate(folderId, updates) { 4960 var accountId = getStoredAccountId(); 4961 if (!accountId || !folderId) return null; 4962 try { 4963 var response = await fetch('/account/stuff/folders/update', { 4964 method: 'POST', 4965 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 4966 body: JSON.stringify(Object.assign({ folderId: folderId }, updates || {})), 4967 }); 4968 var data = await response.json().catch(function () { return {}; }); 4969 if (response.ok) { 4970 renderNavLibrary(data); 4971 window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data })); 4972 } else if (typeof window.micrositeToast === 'function') { 4973 window.micrositeToast(data.error || 'Could not move the folder.'); 4974 } 4975 return data; 4976 } catch (error) { 4977 if (typeof window.micrositeToast === 'function') window.micrositeToast('Could not move the folder. Check your connection.'); 4978 return null; 4979 } 4980 } 4981 4982 async function createNavFolder(name, parentFolderId) { 4983 var accountId = getStoredAccountId(); 4984 if (!accountId) return; 4985 if (typeof name !== 'string') { 4986 openNavFolderNameEditor(parentFolderId || ''); 4987 return; 4988 } 4989 if (!name || !name.trim()) return; 4990 var color = FOLDER_COLORS[((navLibraryData && navLibraryData.folders || []).length) % FOLDER_COLORS.length] || 'indigo'; 4991 var response = await fetch('/account/stuff/folders/create', { 4992 method: 'POST', 4993 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 4994 body: JSON.stringify({ name: name.trim(), color: color, parentFolderId: parentFolderId || navFolderNameEditor?.parentFolderId || '' }), 4995 }); 4996 var data = await response.json().catch(function () { return {}; }); 4997 if (!response.ok) return; 4998 navFolderNameEditor = null; 4999 renderNavLibrary(data); 5000 window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data })); 5001 if (data.folder && data.folder.folderId) setNavCurrentFolder(data.folder.folderId); 5002 } 5003 5004 function setNavShareDragData(event, shareIds) { 5005 var ids = (shareIds || []).filter(Boolean); 5006 if (!ids.length || !event.dataTransfer) return; 5007 navDraggingShareIds = ids; 5008 navDraggingFolderId = ''; 5009 event.dataTransfer.effectAllowed = 'move'; 5010 event.dataTransfer.setData('application/x-microsite-share-ids', JSON.stringify(ids)); 5011 event.dataTransfer.setData('text/plain', ids.join(',')); 5012 } 5013 5014 function setNavFolderDragData(event, folderId) { 5015 if (!folderId || !event.dataTransfer) return; 5016 navDraggingFolderId = folderId; 5017 navDraggingShareIds = []; 5018 event.dataTransfer.effectAllowed = 'move'; 5019 event.dataTransfer.setData('application/x-microsite-folder-id', folderId); 5020 event.dataTransfer.setData('text/plain', folderId); 5021 } 5022 5023 function navFolderDragIdFromEvent(event) { 5024 if (!event.dataTransfer) return navDraggingFolderId; 5025 return event.dataTransfer.getData('application/x-microsite-folder-id') || navDraggingFolderId || ''; 5026 } 5027 5028 function navShareDragIdsFromEvent(event) { 5029 if (!event.dataTransfer) return navDraggingShareIds.slice(); 5030 var raw = event.dataTransfer.getData('application/x-microsite-share-ids') || event.dataTransfer.getData('text/plain'); 5031 if (!raw) return navDraggingShareIds.slice(); 5032 try { 5033 var parsed = JSON.parse(raw);
5034 if (Array.isArray(parsed)) return parsed.filter(Boolean); 5035 } catch (e) {} 5036 return raw.split(',').map(function (id) { return id.trim(); }).filter(Boolean); 5037 } 5038 5039 async function moveNavSharesToFolder(shareIds, folderId) { 5040 var accountId = getStoredAccountId(); 5041 if (!accountId || !shareIds || !shareIds.length) return; 5042 try { 5043 var response = await fetch('/account/stuff/folders/move', { 5044 method: 'POST', 5045 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 5046 body: JSON.stringify({ shareIds: shareIds, folderId: folderId || '' }), 5047 }); 5048 var data = await response.json().catch(function () { return {}; }); 5049 if (!response.ok) { 5050 if (typeof window.micrositeToast === 'function') window.micrositeToast(data.error || 'Could not move the item.'); 5051 return; 5052 } 5053 renderNavLibrary(data); 5054 window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data })); 5055 if (typeof window.micrositeToast === 'function') { 5056 var folder = navFolderById(folderId); 5057 window.micrositeToast('Moved ' + shareIds.length + ' item' + (shareIds.length === 1 ? '' : 's') + ' to ' + (folder ? folder.name : 'Library') + '.'); 5058 } 5059 } catch (error) { 5060 if (typeof window.micrositeToast === 'function') window.micrositeToast('Could not move the item. Check your connection.'); 5061 } 5062 } 5063 5064 async function moveNavFolderToParent(folderId, parentFolderId) { 5065 if (!folderId) return; 5066 if (parentFolderId) navExpandedFolderIds.add(parentFolderId); 5067 var data = await postNavFolderUpdate(folderId, { parentFolderId: parentFolderId || '' }); 5068 if (data && typeof window.micrositeToast === 'function') { 5069 var parent = navFolderById(parentFolderId); 5070 window.micrositeToast('Folder moved to ' + (parent ? parent.name : 'Library') + '.'); 5071 } 5072 } 5073 5074 function navFolderById(folderId) { 5075 return (navLibraryData && navLibraryData.folders || []).find(function (folder) { 5076 return folder.folderId === folderId; 5077 }) || null; 5078 } 5079 5080 function navFolderIsDescendant(folderId, possibleAncestorId) { 5081 var folder = navFolderById(folderId); 5082 var seen = {}; 5083 while (folder && folder.parentFolderId) { 5084 if (folder.parentFolderId === possibleAncestorId) return true; 5085 if (seen[folder.parentFolderId]) return false; 5086 seen[folder.parentFolderId] = true; 5087 folder = navFolderById(folder.parentFolderId); 5088 } 5089 return false; 5090 } 5091 5092 function navValidFolderDrop(folderId, parentFolderId) { 5093 if (!folderId) return false; 5094 if (folderId === parentFolderId) return false; 5095 if (parentFolderId && navFolderIsDescendant(parentFolderId, folderId)) return false; 5096 var folder = navFolderById(folderId); 5097 if (!folder) return false; 5098 return (folder.parentFolderId || '') !== (parentFolderId || ''); 5099 } 5100 5101 function navDropTarget(event) { 5102 return event.target.closest('[data-nav-folder-drop-id], #navStuffLink'); 5103 } 5104 5105 function onNavLibraryDragStart(event) { 5106 var item = event.target.closest('[data-nav-share-id]'); 5107 if (item) { 5108 setNavShareDragData(event, [item.getAttribute('data-nav-share-id') || '']); 5109 return; 5110 } 5111 var folder = event.target.closest('[data-nav-folder]'); 5112 if (!folder) return; 5113 setNavFolderDragData(event, folder.getAttribute('data-nav-folder') || ''); 5114 folder.classList.add('is-folder-dragging'); 5115 } 5116 5117 function onNavLibraryDragOver(event) { 5118 var target = navDropTarget(event); 5119 if (!target) return; 5120 var draggedFolderId = navFolderDragIdFromEvent(event); 5121 if (draggedFolderId) { 5122 var parentFolderId = target.getAttribute('data-nav-folder-drop-id') || ''; 5123 if (!navValidFolderDrop(draggedFolderId, parentFolderId)) return; 5124 event.preventDefault(); 5125 if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; 5126 target.classList.add('is-drop-target'); 5127 return; 5128 } 5129 var ids = navShareDragIdsFromEvent(event); 5130 if (!ids.length) return; 5131 event.preventDefault(); 5132 if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'; 5133 target.classList.add('is-drop-target'); 5134 } 5135 5136 function onNavLibraryDragLeave(event) { 5137 var target = navDropTarget(event); 5138 if (!target || target.contains(event.relatedTarget)) return; 5139 target.classList.remove('is-drop-target'); 5140 } 5141 5142 function onNavLibraryDrop(event) { 5143 var target = navDropTarget(event); 5144 if (!target) return; 5145 var draggedFolderId = navFolderDragIdFromEvent(event); 5146 if (draggedFolderId) { 5147 var parentFolderId = target.getAttribute('data-nav-folder-drop-id') || ''; 5148 if (!navValidFolderDrop(draggedFolderId, parentFolderId)) return; 5149 event.preventDefault(); 5150 target.classList.remove('is-drop-target'); 5151 moveNavFolderToParent(draggedFolderId, parentFolderId); 5152 return; 5153 } 5154 var ids = navShareDragIdsFromEvent(event); 5155 if (!ids.length) return; 5156 event.preventDefault(); 5157 target.classList.remove('is-drop-target'); 5158 var folderId = target.getAttribute('data-nav-folder-drop-id') || ''; 5159 moveNavSharesToFolder(ids, folderId); 5160 } 5161 5162 function onNavLibraryDragEnd(event) { 5163 navDraggingFolderId = ''; 5164 navDraggingShareIds = []; 5165 var folder = event.target.closest('[data-nav-folder]'); 5166 if (folder) folder.classList.remove('is-folder-dragging'); 5167 document.querySelectorAll('.is-drop-target').forEach(function (node) { 5168 node.classList.remove('is-drop-target'); 5169 }); 5170 } 5171 5172 5173 if (navLibraryNewFolder) navLibraryNewFolder.addEventListener('click', function () { createNavFolder(null, ''); });
5174 [navLibraryFolders, navLibraryFavorites].forEach(function (wrap) { 5175 if (!wrap) return; 5176 wrap.addEventListener('click', function (event) { 5177 if (event.target.closest('[data-nav-folder-name-form]')) { 5178 if (event.target.closest('[data-nav-folder-name-cancel]')) { 5179 event.preventDefault(); 5180 cancelNavFolderNameEditor(); 5181 } 5182 return; 5183 } 5184 var addChildBtn = event.target.closest('[data-nav-folder-add-child]'); 5185 if (addChildBtn) { 5186 event.preventDefault(); 5187 event.stopPropagation(); 5188 var parentId = addChildBtn.getAttribute('data-nav-folder-add-child') || ''; 5189 navExpandedFolderIds.add(parentId); 5190 navCollapsedFolderIds.delete(parentId); 5191 openNavFolderNameEditor(parentId); 5192 return; 5193 } 5194 var toggleBtn = event.target.closest('[data-nav-folder-toggle]'); 5195 if (toggleBtn) { 5196 event.preventDefault(); 5197 event.stopPropagation(); 5198 var toggleFolderId = toggleBtn.getAttribute('data-nav-folder-toggle') || ''; 5199 var willCollapse = navExpandedFolderIds.has(toggleFolderId) || (navCurrentFolderId() === toggleFolderId && !navCollapsedFolderIds.has(toggleFolderId)); 5200 if (willCollapse) { 5201 navExpandedFolderIds.delete(toggleFolderId); 5202 navCollapsedFolderIds.add(toggleFolderId); 5203 } else { 5204 navExpandedFolderIds.add(toggleFolderId); 5205 navCollapsedFolderIds.delete(toggleFolderId); 5206 } 5207 if (!willCollapse && isLibraryPage()) { 5208 setNavCurrentFolder(toggleFolderId); 5209 return; 5210 } 5211 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 5212 return; 5213 } 5214 var folderLink = event.target.closest('[data-nav-folder-open]'); 5215 if (folderLink) { 5216 var openFolderId = folderLink.getAttribute('data-nav-folder-open') || ''; 5217 event.preventDefault(); 5218 setNavCurrentFolder(openFolderId); 5219 return; 5220 } 5221 var favoriteBtn = event.target.closest('[data-nav-folder-favorite]'); 5222 if (!favoriteBtn) return; 5223 event.preventDefault(); 5224 event.stopPropagation(); 5225 var folderId = favoriteBtn.getAttribute('data-nav-folder-favorite') || ''; 5226 var folder = (navLibraryData && navLibraryData.folders || []).find(function (row) { 5227 return row.folderId === folderId; 5228 }); 5229 if (!folder) return; 5230 postNavFolderUpdate(folderId, { favorite: !folder.favorite }); 5231 }); 5232 wrap.addEventListener('submit', function (event) { 5233 var form = event.target.closest('[data-nav-folder-name-form]'); 5234 if (!form) return; 5235 event.preventDefault(); 5236 var input = form.querySelector('[name="folderName"]'); 5237 var name = input ? input.value.trim() : ''; 5238 if (!name) { 5239 if (input) input.focus(); 5240 return; 5241 } 5242 createNavFolder(name, form.getAttribute('data-parent-folder-id') || ''); 5243 }); 5244 wrap.addEventListener('keydown', function (event) { 5245 var treeItem = event.target.closest('[role="treeitem"][data-nav-folder]'); 5246 if (!treeItem) return; 5247 var folderId = treeItem.getAttribute('data-nav-folder') || ''; 5248 if (event.key === 'Enter' || event.key === ' ') { 5249 event.preventDefault(); 5250 setNavCurrentFolder(folderId); 5251 return; 5252 } 5253 if (event.key === 'ArrowRight') { 5254 event.preventDefault(); 5255 navExpandedFolderIds.add(folderId); 5256 navCollapsedFolderIds.delete(folderId); 5257 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 5258 return; 5259 } 5260 if (event.key === 'ArrowLeft') { 5261 event.preventDefault(); 5262 navExpandedFolderIds.delete(folderId); 5263 navCollapsedFolderIds.add(folderId); 5264 renderNavLibrary(navLibraryData || { folders: [], items: [] }); 5265 } 5266 }); 5267 wrap.addEventListener('dragstart', onNavLibraryDragStart); 5268 wrap.addEventListener('dragover', onNavLibraryDragOver); 5269 wrap.addEventListener('dragleave', onNavLibraryDragLeave); 5270 wrap.addEventListener('drop', onNavLibraryDrop); 5271 wrap.addEventListener('dragend', onNavLibraryDragEnd); 5272 }); 5273 var navStuffLink = document.getElementById('navStuffLink'); 5274 if (navStuffLink) { 5275 navStuffLink.addEventListener('dragover', onNavLibraryDragOver); 5276 navStuffLink.addEventListener('dragleave', onNavLibraryDragLeave); 5277 navStuffLink.addEventListener('drop', onNavLibraryDrop); 5278 } 5279 window.addEventListener('popstate', function () { renderNavLibrary(navLibraryData); }); 5280 // Library page refreshes (imports, deletes, plan changes) publish the fresh 5281 // payload â mirror it here so the sidebar never needs its own fetch. 5282 window.addEventListener('microsite-library-stuff-loaded', function (event) { 5283 if (!event || !event.detail) return; 5284 renderNavLibrary(event.detail); 5285 navLibraryLoadedAt = Date.now(); 5286 }); 5287 5288 5289 window.addEventListener('microsite-library-data', function (event) { 5290 if (event && event.detail) renderNavLibrary(event.detail); 5291 }); 5292 window.addEventListener('microsite-library-nav-refresh', function () { loadNavLibrary({ force: true }); }); 5293 5294 (function initSessionUi() { 5295 var accountId = getStoredAccountId(); 5296 if (!accountId) { 5297 setSignedOutUi(); 5298 return; 5299 } 5300 if (isSessionExpired()) { 5301 clearStoredSession(); 5302 setSignedOutUi(); 5303 return; 5304 } 5305 restoreCachedSignedInUi(localStorage.getItem(ACCOUNT_EMAIL_KEY) || ''); 5306 restoreAccountSession(); 5307 })(); 5308 5309 window.addEventListener('microsite-open-account', function (event) { 5310 openAuthEntry((event && event.detail) || 'login'); 5311 }); 5312 5313 const authParam = new URLSearchParams(location.search).get('auth'); 5314 if (authParam === 'login' || authParam === 'signup') openAuthEntry(authParam); 5315})(); 5316</script>
5316 5317
5317<script> 5318(function () { 5319 const ACCOUNT_ID_KEY = 'microsite_account_id'; 5320 const STRIPE_ENABLED = true; 5321 const btn = document.getElementById('upgradeProBtn'); 5322 const manageBtn = document.getElementById('manageBillingBtn'); 5323 const statusEl = document.getElementById('upgradeProStatus'); 5324 const checkoutButtons = Array.from(document.querySelectorAll('[data-checkout-plan], [data-credit-pack]')); 5325 const cadenceButtons = Array.from(document.querySelectorAll('[data-pricing-cadence]')); 5326 const proPriceValue = document.getElementById('proPriceValue'); 5327 const proPricePeriod = document.getElementById('proPricePeriod'); 5328 const proBillingNote = document.getElementById('proBillingNote'); 5329 const proSavingsNote = document.getElementById('proSavingsNote'); 5330 const teamPriceValue = document.getElementById('teamPriceValue'); 5331 const teamPricePeriod = document.getElementById('teamPricePeriod'); 5332 const teamBillingNote = document.getElementById('teamBillingNote'); 5333 const teamSavingsNote = document.getElementById('teamSavingsNote'); 5334 const billingPanel = document.getElementById('pricingBillingPanel'); 5335 const billingTitle = document.getElementById('pricingBillingTitle'); 5336 const billingMsg = document.getElementById('pricingBillingMsg'); 5337 const billingHint = document.getElementById('pricingBillingHint'); 5338 const restoreBtn = document.getElementById('restoreProBtn'); 5339 const syncBillingBtn = document.getElementById('syncBillingBtn'); 5340 if (!btn) return; 5341 var selectedCadence = 'monthly'; 5342 5343 function setCadence(cadence) { 5344 selectedCadence = cadence === 'yearly' ? 'yearly' : 'monthly'; 5345 cadenceButtons.forEach(function (button) { 5346 button.setAttribute('aria-pressed', button.getAttribute('data-pricing-cadence') === selectedCadence ? 'true' : 'false'); 5347 }); 5348 if (proPriceValue) { 5349 proPriceValue.textContent = selectedCadence === 'yearly' 5350 ? (proPriceValue.getAttribute('data-yearly-price') || proPriceValue.textContent) 5351 : (proPriceValue.getAttribute('data-monthly-price') || proPriceValue.textContent); 5352 } 5353 if (proPricePeriod) { 5354 proPricePeriod.textContent = selectedCadence === 'yearly' 5355 ? (proPricePeriod.getAttribute('data-yearly-period') || '') 5356 : (proPricePeriod.getAttribute('data-monthly-period') || ''); 5357 } 5358 if (proBillingNote) { 5359 proBillingNote.textContent = selectedCadence === 'yearly' 5360 ? (proBillingNote.getAttribute('data-yearly-note') || '') 5361 : (proBillingNote.getAttribute('data-monthly-note') || ''); 5362 } 5363 if (proSavingsNote) { 5364 proSavingsNote.textContent = selectedCadence === 'yearly' 5365 ? (proSavingsNote.getAttribute('data-yearly-savings') || '') 5366 : ''; 5367 } 5368 if (teamPriceValue) { 5369 teamPriceValue.textContent = selectedCadence === 'yearly' 5370 ? (teamPriceValue.getAttribute('data-yearly-price') || teamPriceValue.textContent) 5371 : (teamPriceValue.getAttribute('data-monthly-price') || teamPriceValue.textContent); 5372 } 5373 if (teamPricePeriod) { 5374 teamPricePeriod.textContent = selectedCadence === 'yearly' 5375 ? (teamPricePeriod.getAttribute('data-yearly-period') || '') 5376 : (teamPricePeriod.getAttribute('data-monthly-period') || ''); 5377 } 5378 if (teamBillingNote) { 5379 teamBillingNote.textContent = selectedCadence === 'yearly' 5380 ? (teamBillingNote.getAttribute('data-yearly-note') || '') 5381 : (teamBillingNote.getAttribute('data-monthly-note') || ''); 5382 } 5383 if (teamSavingsNote) { 5384 teamSavingsNote.textContent = selectedCadence === 'yearly' 5385 ? (teamSavingsNote.getAttribute('data-yearly-savings') || '') 5386 : ''; 5387 } 5388 } 5389 5390 cadenceButtons.forEach(function (button) { 5391 button.addEventListener('click', function () { 5392 setCadence(button.getAttribute('data-pricing-cadence')); 5393 }); 5394 }); 5395 5396 function setProActiveUi(message) { 5397 btn.textContent = 'Paid plan active'; 5398 btn.disabled = true; 5399 if (manageBtn && STRIPE_ENABLED) { 5400 manageBtn.classList.remove('hidden'); 5401 } 5402 if (statusEl) statusEl.textContent = message || 'Your account is on a paid plan.'; 5403 if (typeof window.micrositeApplyPlanState === 'function') window.micrositeApplyPlanState('pro'); 5404 else if (typeof window.micrositeSyncProUpsell === 'function') window.micrositeSyncProUpsell(true); 5405 var activeNote = document.getElementById('pricingProActiveNote'); 5406 if (activeNote) activeNote.classList.remove('hidden'); 5407 if (billingPanel) billingPanel.classList.add('hidden'); 5408 } 5409 5410 function showProBillingNotice(billing) { 5411 if (!billing || !billing.notice) return; 5412 applyBillingUi(billing, 'pro'); 5413 } 5414 5415 function applyBillingUi(billing, plan) { 5416 if (!billingPanel || !STRIPE_ENABLED) return; 5417 var notice = billing && billing.notice;
5418 var isPro = plan === 'pro' || billing?.proAccess; 5419 if (isPro && !notice && !billing?.needsRestore) { 5420 billingPanel.classList.add('hidden'); 5421 return; 5422 } 5423 var showPanel = !!(notice || billing?.needsRestore || (!isPro && billing?.stripeLinked)); 5424 if (!showPanel) { 5425 billingPanel.classList.add('hidden'); 5426 return; 5427 } 5428 billingPanel.classList.remove('hidden'); 5429 billingPanel.classList.remove('pricing-billing-panel--info', 'pricing-billing-panel--warning'); 5430 if (notice && notice.level === 'warning') billingPanel.classList.add('pricing-billing-panel--warning'); 5431 else billingPanel.classList.add('pricing-billing-panel--info'); 5432 5433 if (billingTitle) billingTitle.textContent = (notice && notice.title) || 'Billing'; 5434 if (billingMsg) { 5435 billingMsg.textContent = (notice && notice.message) 5436 || (billing?.needsRestore 5437 ? 'We can match your Stripe subscription to this account using the email on your receipt.' 5438 : 'Link your Stripe subscription to unlock your paid plan.'); 5439 } 5440 if (billingHint) { 5441 if (billing?.needsRestore) { 5442 billingHint.textContent = 'Use the same email here as on your Stripe receipt, then tap Restore Pro access or Sync from Stripe.'; 5443 billingHint.classList.remove('hidden'); 5444 } else { 5445 billingHint.classList.add('hidden'); 5446 } 5447 } 5448 if (restoreBtn) { 5449 restoreBtn.classList.toggle('hidden', !billing?.needsRestore || isPro); 5450 } 5451 if (syncBillingBtn) { 5452 syncBillingBtn.classList.toggle('hidden', !STRIPE_ENABLED || isPro); 5453 } 5454 } 5455 5456 async function syncBillingFromStripe(messagePrefix) { 5457 const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 5458 if (!accountId || !STRIPE_ENABLED) { 5459 if (statusEl) statusEl.textContent = 'Sign in to sync billing.'; 5460 return null; 5461 } 5462 if (statusEl) statusEl.textContent = (messagePrefix || 'Syncing') + ' from Stripe\u2026'; 5463 const res = await fetch('/account/sync-billing', { 5464 method: 'POST', 5465 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 5466 body: '{}', 5467 }); 5468 const data = await res.json().catch(function () { return {}; }); 5469 if (!res.ok) { 5470 if (statusEl) statusEl.textContent = data.error || 'Could not sync billing.'; 5471 return null; 5472 } 5473 return data; 5474 } 5475 5476 async function restoreProAccess() { 5477 const data = await syncBillingFromStripe('Restoring billing access'); 5478 if (!data) return; 5479 if (data.plan === 'pro' || (data.billing && data.billing.proAccess)) { 5480 setProActiveUi('Paid access restored from your Stripe subscription.'); 5481 window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' })); 5482 return; 5483 } 5484 applyBillingUi(data.billing, data.plan); 5485 if (statusEl) { 5486 statusEl.textContent = data.billing?.notice?.message 5487 || 'No active paid subscription found for this account email. Check Stripe uses the same address.'; 5488 } 5489 } 5490 5491 async function startCheckout(button) { 5492 const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 5493 if (!accountId) { 5494 window.dispatchEvent(new CustomEvent('microsite-open-account', { detail: 'signup' })); 5495 if (statusEl) statusEl.textContent = 'Sign in or create an account first.'; 5496 return; 5497 } 5498 const creditPack = button?.getAttribute('data-credit-pack') || ''; 5499 const buttonCadence = button?.getAttribute('data-checkout-cadence') || selectedCadence; 5500 const checkoutPlan = button?.getAttribute('data-checkout-plan') || 'personal'; 5501 const checkoutKind = button?.getAttribute('data-checkout-kind') || (checkoutPlan.indexOf('clips_') === 0 ? 'clips' : 'base'); 5502 const seats = Number(button?.getAttribute('data-checkout-seats')) || 0; 5503 if (typeof window.micrositePiqo === 'function') { 5504 window.micrositePiqo('checkout_started', { plan: checkoutPlan, cadence: buttonCadence, kind: checkoutKind }); 5505 } 5506 if (STRIPE_ENABLED) { 5507 if (statusEl) statusEl.textContent = 'Redirecting to secure checkout\u2026'; 5508 const res = await fetch(creditPack ? '/billing/credits-checkout' : '/billing/create-checkout', { 5509 method: 'POST', 5510 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 5511 body: JSON.stringify(creditPack 5512 ? { pack: creditPack } 5513 : { kind: checkoutKind, plan: checkoutPlan, cadence: buttonCadence, seats: seats }), 5514 }); 5515 const data = await res.json().catch(function () { return {}; }); 5516 if (!res.ok || !data.url) { 5517 if (data.manageBilling && typeof window.micrositeOpenBillingPortal === 'function') { 5518 try { await window.micrositeOpenBillingPortal(); } catch (error) { if (statusEl) statusEl.textContent = error.message || data.error; } 5519 return; 5520 } 5521 if (statusEl) statusEl.textContent = data.error || 'Could not start checkout.'; 5522 return; 5523 } 5524 window.location.href = data.url; 5525 return; 5526 } 5527 if (statusEl) statusEl.textContent = 'Upgrading\u2026'; 5528 const res = await fetch('/account/upgrade-pro', { 5529 method: 'POST', 5530 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 5531 body: JSON.stringify({ cadence: buttonCadence, plan: checkoutPlan }), 5532 }); 5533 const data = await res.json().catch(function () { return {}; }); 5534 if (!res.ok) { 5535 if (statusEl) statusEl.textContent = data.error || 'Upgrade failed.'; 5536 return; 5537 } 5538 setProActiveUi('You\u2019re on a paid plan. Open Library or Branding to customise share pages.'); 5539 } 5540 5541 async function openBillingPortal() { 5542 const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 5543 if (!accountId) return; 5544 if (statusEl) statusEl.textContent = 'Opening billing portal\u2026'; 5545 const res = await fetch('/billing/portal', { 5546 method: 'POST', 5547 headers: { 'Content-Type': 'application/json', 'x-account-id': accountId }, 5548 body: '{}', 5549 }); 5550 const data = await res.json().catch(function () { return {}; }); 5551 if (!res.ok || !data.url) { 5552 if (statusEl) statusEl.textContent = data.error || 'Could not open billing portal.'; 5553 return; 5554 } 5555 window.location.href = data.url; 5556 } 5557 5558 checkoutButtons.forEach(function (button) { 5559 button.addEventListener('click', function () { startCheckout(button); }); 5560 }); 5561 if (manageBtn) manageBtn.addEventListener('click', openBillingPortal); 5562 if (restoreBtn) restoreBtn.addEventListener('click', restoreProAccess); 5563 if (syncBillingBtn) { 5564 syncBillingBtn.addEventListener('click', function () { 5565 syncBillingFromStripe('Syncing').then(function (data) { 5566 if (!data) return; 5567 if (data.plan === 'pro' || (data.billing && data.billing.proAccess)) { 5568 setProActiveUi('Billing synced â you are on a paid plan.'); 5569 window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' })); 5570 } else { 5571 applyBillingUi(data.billing, data.plan); 5572 if (statusEl) statusEl.textContent = 'Sync complete. See billing details below.'; 5573 } 5574 }); 5575 }); 5576 } 5577 5578 const checkout = new URLSearchParams(location.search).get('checkout'); 5579 if (checkout === 'cancelled' && statusEl) { 5580 statusEl.textContent = 'Checkout cancelled. You can subscribe whenever you\u2019re ready.'; 5581 } 5582 5583 function applyAccountBilling(data) { 5584 if (!data) return; 5585 if (data.plan === 'pro') { 5586 setProActiveUi(checkout === 'success' ? 'Your paid plan is active. Thanks for subscribing!' : 'Your account is on a paid plan.'); 5587 if (checkout === 'clips_success' && statusEl) statusEl.textContent = 'Clips add-on
5587is active. Thanks for subscribing!'; 5588 if (checkout === 'credits_success' && statusEl) statusEl.textContent = 'AI credits added. Thanks!'; 5589 showProBillingNotice(data.billing); 5590 window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' })); 5591 } else { 5592 applyBillingUi(data.billing, data.plan); 5593 if ((checkout === 'success' || checkout === 'clips_success') && statusEl && (!data.billing || !data.billing.proAccess)) { 5594 statusEl.textContent = 'Payment received. Tap Restore access if your paid plan is not active yet.'; 5595 } 5596 } 5597 } 5598 5599 const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || ''; 5600 if (accountId) { 5601 const afterCheckout = (checkout === 'success' || checkout === 'clips_success') && STRIPE_ENABLED; 5602 const syncPromise = afterCheckout 5603 ? syncBillingFromStripe('Confirming payment') 5604 : Promise.resolve(null); 5605 syncPromise.then(function (syncData) { 5606 if (syncData) applyAccountBilling(syncData); 5607 return fetch('/account/ping', { 5608 method: 'POST', 5609 headers: { 'Content-Type': 'application/json' }, 5610 body: JSON.stringify({ accountId: accountId }), 5611 }); 5612 }).then(function (r) { return r && r.json ? r.json() : {}; }).then(function (data) { 5613 if (!data || !data.plan) return; 5614 if (data.plan === 'pro') { 5615 applyAccountBilling(data); 5616 } else { 5617 applyBillingUi(data.billing, data.plan); 5618 } 5619 if (typeof window.micrositeRenderReferralPanel === 'function') { 5620 window.micrositeRenderReferralPanel(data.referral || null); 5621 } 5622 if (typeof window.micrositeApplyEmailPrefs === 'function') { 5623 window.micrositeApplyEmailPrefs(data.emailPrefs || null, data.plan); 5624 } 5625 }).catch(function () {}); 5626 } 5627})(); 5628</script>
5628 5629
5629<script> 5630(function () { 5631 function playCheerSound() { 5632 try { 5633 const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); 5634 function tone(freq, ms, delay) { 5635 const osc = audioCtx.createOscillator(); 5636 const gain = audioCtx.createGain(); 5637 osc.type = 'triangle'; 5638 osc.frequency.value = freq; 5639 gain.gain.value = 0.09; 5640 osc.connect(gain); 5641 gain.connect(audioCtx.destination); 5642 const t = audioCtx.currentTime + delay; 5643 osc.start(t); 5644 osc.stop(t + ms / 1000); 5645 } 5646 audioCtx.resume().then(function () { 5647 tone(523, 140, 0); 5648 tone(659, 160, 0.1); 5649 tone(784, 200, 0.22); 5650 tone(1047, 240, 0.36); 5651 }); 5652 } catch (e) {} 5653 } 5654 5655 function confettiBurst() { 5656 const canvas = document.getElementById('confetti'); 5657 if (!canvas) return; 5658 const ctx = canvas.getContext('2d'); 5659 const dpr = window.devicePixelRatio || 1; 5660 const width = window.innerWidth; 5661 const height = window.innerHeight; 5662 canvas.width = Math.floor(width * dpr); 5663 canvas.height = Math.floor(height * dpr); 5664 canvas.style.width = width + 'px'; 5665 canvas.style.height = height + 'px'; 5666 ctx.setTransform(dpr, 0, 0, dpr, 0, 0); 5667 const colors = ['#4f46e5', '#06b6d4', '#22c55e', '#f59e0b', '#ec4899', '#eab308']; 5668 const pieces = Array.from({ length: 180 }, function () { 5669 return { 5670 x: Math.random() * width, 5671 y: -20 - Math.random() * height * 0.4, 5672 r: 4 + Math.random() * 7, 5673 c: colors[Math.floor(Math.random() * colors.length)], 5674 vx: -2.5 + Math.random() * 5, 5675 vy: 2 + Math.random() * 5, 5676 g: 0.05 + Math.random() * 0.06, 5677 rot: Math.random() * Math.PI, 5678 }; 5679 }); 5680 var frame = 0; 5681 function tick() { 5682 ctx.clearRect(0, 0, width, height); 5683 for (var i = 0; i < pieces.length; i++) { 5684 var p = pieces[i]; 5685 p.x += p.vx; 5686 p.y += p.vy; 5687 p.vy += p.g; 5688 p.rot += 0.08; 5689 ctx.save(); 5690 ctx.translate(p.x, p.y); 5691 ctx.rotate(p.rot); 5692 ctx.fillStyle = p.c; 5693 ctx.fillRect(-p.r / 2, -p.r / 3, p.r, p.r * 0.7); 5694 ctx.restore(); 5695 } 5696 frame += 1; 5697 if (frame < 200) requestAnimationFrame(tick); 5698 else ctx.clearRect(0, 0, width, height); 5699 } 5700 tick(); 5701 } 5702 5703 function showCheckoutSuccess() { 5704 var overlay = document.getElementById('checkoutSuccess'); 5705 if (overlay) overlay.classList.remove('hidden'); 5706 document.body.style.overflow = 'hidden'; 5707 confettiBurst(); 5708 window.setTimeout(confettiBurst, 400); 5709 playCheerSound(); 5710 if (window.history && window.history.replaceState) { 5711 window.history.replaceState({}, '', '/pricing'); 5712 } 5713 } 5714 5715 var checkoutState = new URLSearchParams(location.search).get('checkout'); 5716 if (checkoutState === 'success' || checkoutState === 'clips_success' || checkoutState === 'credits_success') { 5717 showCheckoutSuccess(); 5718 } 5719})(); 5720</script>
vendor: 1 bytes, line 5720
5720
5721<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"4cf3abd8dd974a209dfa86984ac2b334","r":1,"spa":2}' crossorigin="anonymous"></script>
5721 5722</body> 5723</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.