PageSourceSearch

https://videom8.com/pricing

html videom8.com collected 2026-10-02 01:47:43 UTC 315,401 bytes, 5,723 lines download raw bytes

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&rsquo;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&nbsp;<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&rsquo;re on a paid plan.</p>
2497    <p id="pricingProActiveNote" class="pricing-active-note hidden">You&rsquo;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 &amp; 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 &amp; 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 &amp; 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">&copy; 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>&copy; 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&rsquo;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&rsquo;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> &middot; <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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
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, '&amp;')
3605      .replace(/</g, '&lt;')
3606      .replace(/>/g, '&gt;')
3607      .replace(/"/g, '&quot;');
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, '&quot;') + '"' + (workspace.active ? ' selected' : '') + '>' +
4260          String(workspace.name || 'Workspace').replace(/[&<>]/g, function (ch) { return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[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 ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[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.