PageSourceSearch

https://videom8.com/

html videom8.com collected 2026-10-02 01:47:40 UTC 410,616 bytes, 7,441 lines download raw bytes

1<!doctype html>
2<html lang="en" class="bg-white dark:bg-gray-900">
3<head>
4<script
5  defer
6  data-website-id="dfid_Uo2kpGlRCbbzBG1E6iSDt"
7  data-domain="videom8.com"
8  src="https://datafa.st/js/script.js">
9</script>
9
10<!-- Google Tag Manager -->
11<script>
vendor: 327 bytes, lines 11-15
11(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
12new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
13j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
14'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
15})(window,document,'script','dataLayer','
15GTM-T9RTK9DP
vendor: 3 bytes, line 15
15');
15</script>
15
16<!-- End Google Tag Manager -->
17  <meta charset="utf-8">
18  <meta name="viewport" content="width=device-width, initial-scale=1">
19  <title>VideoM8 — record and share polished video pages</title>
20  <meta name="robots" content="index,follow">
21  <meta name="description" content="Record screen and camera walkthroughs, edit in Studio, and publish branded video share pages with CTAs, analytics, and social-ready link previews.">
22  <link rel="canonical" href="https://videom8.com">
23  <meta property="og:url" content="https://videom8.com">
24  <meta property="og:type" content="website">
25  <meta property="og:title" content="VideoM8 — record and share polished video pages">
26  <meta property="og:description" content="Record screen and camera walkthroughs, edit in Studio, and publish branded video share pages with CTAs, analytics, and social-ready link previews.">
27  <meta property="og:site_name" content="VideoM8">
28  <meta property="og:locale" content="en_AU">
29  <meta property="og:image" content="https://videom8.com/social/og.svg">
30  <meta property="og:image:secure_url" content="https://videom8.com/social/og.svg">
31  <meta property="og:image:type" content="image/svg+xml">
32  <meta property="og:image:width" content="1200">
33  <meta property="og:image:height" content="630">
34  <meta property="og:image:alt" content="VideoM8">
35  <meta name="twitter:card" content="summary_large_image">
36  <meta name="twitter:domain" content="videom8.com">
37  <meta name="twitter:title" content="VideoM8 — record and share polished video pages">
38  <meta name="twitter:description" content="Record screen and camera walkthroughs, edit in Studio, and publish branded video share pages with CTAs, analytics, and social-ready link previews.">
39  <meta name="twitter:image" content="https://videom8.com/social/og.svg">
40  <meta name="twitter:image:alt" content="VideoM8">
41  
41<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"VideoM8","url":"https://videom8.com/","description":"Record screen and camera walkthroughs, edit in Studio, and publish branded video share pages with CTAs, analytics, and social-ready link previews.","potentialAction":{"@type":"SearchAction","target":"https://videom8.com/?q={search_term_string}","query-input":"required name=search_term_string"}}</script>
41
42  <link rel="manifest" href="/manifest.webmanifest">
43<link rel="icon" href="/social/og.svg" type="image/svg+xml">
44<meta name="theme-color" content="#4f46e5">
45<meta name="mobile-web-app-capable" content="yes">
46<meta name="apple-mobile-web-app-capable" content="yes">
47<meta name="apple-mobile-web-app-title" content="VideoM8">
48  <link rel="preconnect" href="https://fonts.googleapis.com">
49  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
50  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&display=swap" rel="stylesheet">
51  
51<script defer data-site="k8kt3606" data-domain="videom8.com" src="https://piqo.app/piqo.js"></script>
vendor: 1 bytes, line 51
51
52<script>
53(function () {
54  var queue = [];
55  var blockedProp = /(^|_)(email|name|title|url|file|account|user|share)_?id?$|(^|_)(email|name|title|url|file)$/i;
56  function safeProps(input) {
57    var out = {};
58    Object.keys(input || {}).slice(0, 10).forEach(function (key) {
59      if (blockedProp.test(key)) return;
60      var value = input[key];
61      if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') return;
62      out[key] = String(value).slice(0, 100);
63    });
64    return out;
65  }
66  function flush() {
67    if (typeof window.piqo !== 'function') return false;
68    while (queue.length) {
69      var event = queue.shift();
70      window.piqo(event.name, { props: event.props });
71    }
72    return true;
73  }
74  window.micrositePiqo = function (name, props) {
75    if (!/^[a-z][a-z0-9_]{1,49}$/.test(String(name || ''))) return;
76    queue.push({ name: String(name), props: safeProps(props) });
77    flush();
78  };
79  window.addEventListener('load', flush, { once: true });
80  window.setTimeout(flush, 2000);
81})();
82</script>
82
83  
83<script>
84(function(){try{if(localStorage.getItem('microsite_account_id')&&location.pathname==='/')location.replace('/library');}catch(e){}})();
85</script>
85
86  
86<script src="https://cdn.tailwindcss.com"></script>
86
87  <style>:root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; }:root {
88  --brand: #6f35f5;
89  --brand-hover: #5f28d9;
90  --brand-soft: #f1eafe;
91  --brand-ring: rgba(111, 53, 245, 0.13);
92  --ink: #18181b;
93  --ink-muted: #71717a;
94  --ink-faint: #a1a1aa;
95  --surface: #ffffff;
96  --surface-subtle: #fafafa;
97  --line: #e4e4e7;
98  --line-strong: #d4d4d8;
99  --page-max-width: 78rem;
100}
101html.theme-dark {
102  --brand-hover: #7d4bf7;
103  --brand-soft: rgba(111, 53, 245, 0.2);
104  --brand-ring: rgba(111, 53, 245, 0.22);
105  --ink: #fafafa;
106  --ink-muted: #a1a1aa;
107  --ink-faint: #71717a;
108  --surface: #18181b;
109  --surface-subtle: #131316;
110  --line: #27272a;
111  --line-strong: #3f3f46;
112}</style>
112<script>
113(function () {
114  try {
115    if (localStorage.getItem('microsite_theme') === 'dark') {
116      document.documentElement.classList.add('theme-dark');
117    }
118  } catch (e) {}
119})();
120</script>
120<style>
121    html.user-plan-pro .pro-upsell-only,
122    body[data-user-plan="pro"] .pro-upsell-only { display: none !important; }
123    html.user-plan-pro #launchBanner,
124    body[data-user-plan="pro"] #launchBanner { display: none !important; }
125    html.user-plan-pro .pro-badge,
126    html.user-plan-pro .settings-pro-pill,
127    html.user-plan-pro .record-pro-pill,
128    html.user-plan-pro .field-pro-hint,
129    html.user-plan-pro .video-owner-pro-pill,
130    body[data-user-plan="pro"] .pro-badge,
131    body[data-user-plan="pro"] .settings-pro-pill,
132    body[data-user-plan="pro"] .record-pro-pill,
133    body[data-user-plan="pro"] .field-pro-hint,
134    body[data-user-plan="pro"] .video-owner-pro-pill { display: none !important; }
135    .nav-profile-avatar { display: inline-flex; text-decoration: none; border-radius: var(--radius-pill); }
136    .nav-profile-avatar:focus-visible { outline: 2px solid #6f35f5; outline-offset: 2px; }
137    .nav-profile-avatar-inner {
138      width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill);
139      background: #f1eafe; color: #6f35f5;
140      display: grid; place-items: center; overflow: hidden;
141      border: 1px solid #d9c8fb;
142    }
143    .nav-profile-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
144    .nav-profile-avatar-inner .size-5 { width: 1.15rem; height: 1.15rem; }
145    .site-primary-nav {
146      position: sticky;
147      top: 0;
148      z-index: 100;
149    }
150    .site-breadcrumb-bar {
151      position: sticky;
152      top: var(--site-primary-nav-height, 4.5625rem);
153      z-index: 90;
154      border-bottom: 1px solid rgba(229, 231, 235, 0.95);
155      background: rgba(255, 255, 255, 0.94);
156      backdrop-filter: blur(12px);
157    }
158    .site-breadcrumb-nav {
159      overflow-x: auto;
160      scrollbar-width: none;
161    }
162    .site-breadcrumb-nav::-webkit-scrollbar {
163      display: none;
164    }
165    .site-breadcrumb-list {
166      display: flex;
167      align-items: center;
168      min-height: 2.75rem;
169      gap: 0;
170      white-space: nowrap;
171      list-style: none;
172      margin: 0;
173      padding: 0;
174      color: #6b7280;
175      font-size: 0.875rem;
176      line-height: 1.5rem;
177    }
178    .site-breadcrumb-item {
179      display: inline-flex;
180      align-items: center;
181      min-width: 0;
182    }
183    .site-breadcrumb-item + .site-breadcrumb-item::before {
184      content: "/";
185      margin: 0 0.75rem;
186      color: #9ca3af;
187    }
188    .site-breadcrumb-link {
189      color: inherit;
190      text-decoration: none;
191      border-radius: 0.375rem;
192      outline-offset: 0.25rem;
193    }
194    .site-breadcrumb-link:hover {
195      color: #111827;
196    }
197    .site-breadcrumb-link:focus-visible {
198      outline: 2px solid #6366f1;
199    }
200    .site-breadcrumb-current {
201      max-width: min(42rem, 55vw);
202      overflow: hidden;
203      color: #111827;
204      font-weight: 600;
205      text-overflow: ellipsis;
206    }
207    @media (max-width: 640px) {
208      .site-breadcrumb-current {
209        max-width: 58vw;
210      }
211    }
212    .dark .site-breadcrumb-bar {
213      border-bottom-color: rgba(255, 255, 255, 0.1);
214      background: rgba(17, 24, 39, 0.94);
215    }
216    .dark .site-breadcrumb-list {
217      color: #9ca3af;
218    }
219    .dark .site-breadcrumb-item + .site-breadcrumb-item::before {
220      color: #6b7280;
221    }
222    .dark .site-breadcrumb-link:hover,
223    .dark .site-breadcrumb-current {
224      color: #f9fafb;
225    }
226    .nav-marketing-menu {
227      position: relative;
228      list-style: none;
229    }
230    .nav-marketing-dropdown {
231      position: relative;
232    }
233    .nav-marketing-summary {
234      display: inline-flex;
235      align-items: center;
236      gap: 0.3rem;
237      min-height: 2.25rem;
238      border-radius: var(--radius-sm);
239      padding: 0.45rem 0.55rem;
240      color: #374151;
241      cursor: pointer;
242      list-style: none;
243      user-select: none;
244    }
245    .nav-marketing-summary::-webkit-details-marker {
246      display: none;
247    }
248    .nav-marketing-summary:hover,
249    .nav-marketing-dropdown[open] .nav-marketing-summary,
250    .nav-marketing-summary.is-active {
251      background: #f8fafc;
252      color: #111827;
253    }
254    .nav-marketing-summary-caret {
255      width: 0.8rem;
256      height: 0.8rem;
257      color: #9ca3af;
258      transition: transform 0.12s ease;
259    }
260    .nav-marketing-dropdown[open] .nav-marketing-summary-caret {
261      transform: rotate(180deg);
262    }
263    .nav-marketing-panel {
264      position: absolute;
265      left: 50%;
266      top: calc(100% + 0.65rem);
267      z-index: 125;
268      width: min(42rem, calc(100vw - 2rem));
269      transform: translateX(-50%);
270      border: 1px solid #e5e7eb;
271      border-radius: 0.875rem;
272      background: #fff;
273      padding: 0.75rem;
274      box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
275    }
276    .nav-marketing-panel--compact {
277      width: min(24rem, calc(100vw - 2rem));
278    }
279    .nav-marketing-panel-grid {
280      display: grid;
281      grid-template-columns: repeat(3, minmax(0, 1fr));
282      gap: 0.5rem;
283    }
284    .nav-marketing-panel-grid--two {
285      grid-template-columns: repeat(2, minmax(0, 1fr));
286    }
287    .nav-marketing-section {
288      min-width: 0;
289      padding: 0.35rem;
290    }
291    .nav-marketing-section-title {
292      margin: 0 0 0.4rem;
293      color: #64748b;
294      font-size: 0.72rem;
295      font-weight: 800;
296      line-height: 1;
297      text-transform: uppercase;
298    }
299    .nav-marketing-panel a {
300      display: block;
301      border-radius: var(--radius-sm);
302      padding: 0.55rem 0.65rem;
303      color: #1f2937;
304      text-decoration: none;
305    }
306    .nav-marketing-panel a:hover,
307    .nav-marketing-panel a.is-active {
308      background: #f8fafc;
309      color: #4338ca;
310    }
311    .nav-marketing-link-title {
312      display: block;
313      font-size: 0.9rem;
314      font-weight: 750;
315      line-height: 1.25;
316    }
317    .nav-marketing-link-desc {
318      display: block;
319      margin-top: 0.16rem;
320      color: #64748b;
321      font-size: 0.78rem;
322      font-weight: 500;
323      line-height: 1.35;
324    }
325    html:has(> body.nav-logged-in:not(.share-public-page)) { background: #fafafa; }
326    body.nav-logged-in {
327      padding-left: var(--nav-sidebar-width, 18rem);
328      background: #fff;
329      box-sizing: border-box;
330    }
331    body.nav-logged-in:not(.share-public-page) {
332      position: relative;
333      min-height: 100vh;
334      padding-top: 0.5rem;
335      padding-right: 0.5rem;
336      padding-bottom: 0.5rem;
337      background: transparent;
338    }
339    body.nav-logged-in:not(.share-public-page)::before {
340      content: "";
341      position: absolute;
342      z-index: -1;
343      inset: 0.5rem 0.5rem 0.5rem var(--nav-sidebar-width, 18rem);
344      border: 1px solid #e4e4e7;
345      border-radius: 0.75rem;
346      background: #fff;
347      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
348      pointer-events: none;
349    }
350    body.nav-logged-in:not(.share-public-page)::after {
351      content: "";
352      position: fixed;
353      top: 0;
354      right: 0;
355      left: var(--nav-sidebar-width, 18rem);
356      height: 0.5rem;
357      z-index: 96;
358      background: #fafafa;
359      pointer-events: none;
360    }
361    body.nav-logged-in.nav-sidebar-collapsed {
362      padding-left: 3rem;
363    }
364    body.nav-logged-in.nav-sidebar-collapsed:not(.share-public-page)::before { left: 3rem; }
365    body.nav-logged-in.nav-sidebar-collapsed:not(.share-public-page)::after { left: 3rem; }
366    .nav-logged-in-topbar {
367      display: none;
368    }
369    body.nav-logged-in .nav-logged-in-topbar {
370      position: sticky;
371      top: 0.5rem;
372      z-index: 95;
373      display: flex;
374      min-height: 3rem;
375      align-items: center;
376      gap: 0.75rem;
377      border: 1px solid #e4e4e7;
378      border-radius: 0.75rem 0.75rem 0 0;
379      background: rgba(255, 255, 255, 0.96);
380      padding: 0 1.5rem;
381      backdrop-filter: blur(8px);
382      box-sizing: border-box;
383    }
384    body.nav-logged-in .nav-marketing-menu {
385      display: none !important;
386    }
387    body.nav-logged-in #navPricingLink {
388      display: none !important;
389    }
390    .nav-sidebar-toggle,
391    .nav-topbar-sidebar-toggle {
392      display: none;
393      align-items: center;
394      justify-content: center;
395      width: 2.25rem;
396      height: 2.25rem;
397      border: 1px solid #e2e8f0;
398      border-radius: var(--radius-sm);
399      background: #fff;
400      color: #475569;
401      cursor: pointer;
402      flex-shrink: 0;
403    }
404    .nav-sidebar-toggle:hover,
405    .nav-topbar-sidebar-toggle:hover {
406      border-color: #d9c8fb;
407      background: #f1eafe;
408      color: #6f35f5;
409    }
410    .nav-sidebar-toggle svg,
411    .nav-topbar-sidebar-toggle svg {
412      width: 1.15rem;
413      height: 1.15rem;
414    }
415    body.nav-sidebar-collapsed .nav-sidebar-toggle svg {
416      transform: rotate(180deg);
417    }
418    body.nav-logged-in .nav-sidebar-toggle,
419    body.nav-logged-in.nav-sidebar-collapsed .nav-topbar-sidebar-toggle {
420      display: inline-flex;
421    }
422    body.nav-logged-in .nav-topbar-sidebar-toggle {
423      display: inline-flex;
424      border: 0;
425      border-radius: 0.375rem;
426      background: transparent;
427    }
428    body.nav-logged-in .nav-topbar-sidebar-toggle:hover {
429      border-color: transparent;
430      background: #f1f5f9;
431      color: #0f172a;
432    }
433    .nav-page-context {
434      display: flex;
435      min-width: 0;
436      align-items: center;
437      gap: 0.75rem;
438    }
439    .nav-page-separator {
440      width: 1px;
441      height: 1rem;
442      flex: 0 0 auto;
443      background: #e4e4e7;
444    }
445    .nav-page-breadcrumb {
446      min-width: 0;
447    }
448    .nav-page-breadcrumb ol {
449      display: flex;
450      min-width: 0;
451      align-items: center;
452      gap: 0.625rem;
453      margin: 0;
454      padding: 0;
455      list-style: none;
456      color: #71717a;
457      font-size: 0.875rem;
458    }
459    .nav-page-breadcrumb li {
460      display: inline-flex;
461      min-width: 0;
462      align-items: center;
463    }
464    .nav-page-breadcrumb li[aria-current="page"] {
465      overflow: hidden;
466      color: #18181b;
467      font-weight: 500;
468      text-overflow: ellipsis;
469      white-space: nowrap;
470    }
471    .nav-page-breadcrumb a {
472      color: inherit;
473      text-decoration: none;
474    }
475    .nav-page-breadcrumb a:hover { color: #0f172a; }
476    .nav-page-breadcrumb svg {
477      width: 0.875rem;
478      height: 0.875rem;
479      color: #94a3b8;
480    }
481    .nav-sidebar-header {
482      display: flex;
483      align-items: center;
484      gap: 0.75rem;
485      min-width: 0;
486      border-radius: 0.375rem;
487    }
488    .nav-sidebar-header > a {
489      font-size: 1rem;
490      font-weight: 600;
491      letter-spacing: -0.01em;
492      color: #18181b;
493      text-decoration: none;
494    }
495    .nav-logged-in-search {
496      position: relative;
497      flex: 1;
498      min-width: 0;
499    }
500    .nav-logged-in-search svg {
501      position: absolute;
502      left: 0.875rem;
503      top: 50%;
504      width: 1rem;
505      height: 1rem;
506      color: #94a3b8;
507      pointer-events: none;
508      transform: translateY(-50%);
509    }
510    .nav-logged-in-search input {
511      width: 100%;
512      border: 1px solid transparent;
513      border-radius: 0.375rem;
514      background: transparent;
515      padding: 0.7rem 4.25rem 0.7rem 2.4rem;
516      font: inherit;
517      font-size: 0.9rem;
518      color: #18181b;
519      outline: none;
520      box-sizing: border-box;
521      cursor: pointer;
522    }
523    .nav-logged-in-search input::placeholder { color: #94a3b8; }
524    .nav-logged-in-search input:focus {
525      border-color: #d9c8fb;
526      background: #fff;
527      box-shadow: 0 0 0 3px rgba(111, 53, 245, 0.12);
528    }
529    .nav-logged-in-search kbd {
530      position: absolute;
531      right: 0.7rem;
532      top: 50%;
533      display: inline-flex;
534      align-items: center;
535      gap: 0.15rem;
536      border: 1px solid #cbd5e1;
537      border-bottom-color: #94a3b8;
538      border-radius: 0.45rem;
539      background: #fff;
540      padding: 0.14rem 0.45rem;
541      color: #334155;
542      font-size: 0.72rem;
543      font-weight: 700;
544      font-family: inherit;
545      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
546      pointer-events: none;
547      transform: translateY(-50%);
548    }
549    .nav-topbar-actions {
550      display: flex;
551      align-items: center;
552      gap: 0.75rem;
553      list-style: none;
554      margin: 0;
555      padding: 0;
556    }
557    .nav-theme-toggle {
558      display: inline-flex;
559      align-items: center;
560      justify-content: center;
561      width: 2.25rem;
562      height: 2.25rem;
563      margin-left: auto;
564      border: 0;
565      border-radius: 0.375rem;
566      background: transparent;
567      color: #475569;
568      cursor: pointer;
569      flex-shrink: 0;
570    }
571    .nav-theme-toggle:hover { background: #f1f5f9; color: #0f172a; }
572    .nav-theme-toggle svg { width: 1.05rem; height: 1.05rem; }
573    .nav-theme-toggle .nav-theme-icon-sun { display: none; }
574    html.theme-dark .nav-theme-toggle .nav-theme-icon-sun { display: block; }
575    html.theme-dark .nav-theme-toggle .nav-theme-icon-moon { display: none; }
576    .nav-topbar-actions > li {
577      list-style: none;
578      margin: 0;
579      padding: 0;
580    }
581    .nav-topbar-action {
582      display: inline-flex;
583      align-items: center;
584      justify-content: center;
585      min-height: 2.25rem;
586      border-radius: var(--radius-sm);
587      padding: 0.5rem 0.85rem;
588      font-size: 0.875rem;
589      font-weight: 700;
590      line-height: 1;
591      text-decoration: none;
592      white-space: nowrap;
593      box-sizing: border-box;
594    }
595    .nav-topbar-action--secondary {
596      background: #fff;
597      color: #18181b;
598      box-shadow: inset 0 0 0 1px #e4e4e7, 0 1px 2px rgba(24, 24, 27, 0.04);
599    }
600    .nav-topbar-action--secondary:hover { background: #f4f4f5; }
601    .nav-topbar-action--primary {
602      background: #6f35f5;
603      color: #fff;
604      box-shadow: 0 1px 2px rgba(111, 53, 245, 0.24);
605    }
606    .nav-topbar-action--primary:hover { background: #5f28d9; }
607    .nav-logged-in-topbar .nav-activity-wrap {
608      display: none !important;
609    }
610    body.nav-logged-in .site-primary-nav {
611      position: fixed;
612      inset: 0 auto 0 0;
613      width: var(--nav-sidebar-width, 18rem);
614      height: auto;
615      max-height: none;
616      overflow-x: hidden;
617      overflow-y: auto;
618      overscroll-behavior: contain;
619      border: 0;
620      border-radius: 0;
621      background: transparent;
622      box-shadow: none;
623    }
624    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav {
625      width: 3rem;
626    }
627    .nav-sidebar-resizer {
628      display: none;
629    }
630    body.nav-logged-in .nav-sidebar-resizer {
631      position: fixed;
632      inset: 0 auto 0 calc(var(--nav-sidebar-width, 18rem) - 3px);
633      z-index: 101;
634      display: block;
635      width: 6px;
636      border: 0;
637      background: transparent;
638      cursor: col-resize;
639    }
640    body.nav-logged-in .nav-sidebar-resizer::after {
641      content: "";
642      position: absolute;
643      inset: 0 2px;
644      background: transparent;
645      transition: background 0.12s ease;
646    }
647    body.nav-logged-in .nav-sidebar-resizer:hover::after,
648    body.nav-logged-in .nav-sidebar-resizer:focus-visible::after,
649    body.nav-sidebar-resizing .nav-sidebar-resizer::after {
650      background: #d9c8fb;
651    }
652    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-resizer {
653      display: none;
654    }
655    body.nav-logged-in .site-primary-nav > div {
656      min-height: 100%;
657      max-width: none;
658      flex-direction: column;
659      align-items: stretch;
660      justify-content: flex-start;
661      gap: 0.75rem;
662      padding: 0.5rem 0.625rem;
663    }
664    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav > div {
665      align-items: center;
666      gap: 0.75rem;
667      padding: 0.5rem 0.25rem;
668    }
669    body.nav-logged-in .nav-sidebar-header { width: 100%; }
670    body.nav-logged-in .nav-sidebar-header > a {
671      display: flex;
672      align-items: center;
673      min-height: 2rem;
674      padding: 0 0.625rem;
675    }
676    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header { width: 2.5rem; }
677    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a {
678      display: flex;
679      width: 2.5rem;
680      overflow: hidden;
681      justify-content: center;
682      font-size: 0;
683    }
684    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a::first-letter {
685      font-size: 1.125rem;
686    }
687    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-toggle {
688      justify-content: center;
689    }
690    body.nav-logged-in .nav-mobile-trigger { display: none; }
691    body.nav-logged-in .site-primary-nav #navPrimaryLinks {
692      width: 100%;
693      flex: 1;
694      flex-direction: column;
695      align-items: stretch;
696      justify-content: flex-start;
697      gap: 0.125rem;
698    }
699    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks {
700      align-items: center;
701      gap: 0.35rem;
702    }
703    body.nav-logged-in .site-primary-nav #navPrimaryLinks > li {
704      width: 100%;
705    }
706	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a,
707	    body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"] {
708	      display: flex;
709	      width: 100%;
710	      align-items: center;
711	      justify-content: flex-start;
712	      min-height: 2rem;
713	      gap: 0.625rem;
714	      border-radius: 0.375rem;
715	      padding: 0.4375rem 0.625rem;
716	      color: #3f3f46;
717	      font-weight: 500;
718	      box-sizing: border-box;
719	    }
720    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a,
721    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks button,
722    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar {
723      width: 2.25rem;
724      height: 2.25rem;
725      min-height: 2.25rem;
726      justify-content: center;
727      padding: 0;
728    }
729    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a span:not(.nav-link-icon),
730    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar::after,
731    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-plan-badge,
732    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-dropdown,
733    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-library-tree {
734      display: none !important;
735    }
736    .nav-queue-badge {
737      margin-left: auto;
738      min-width: 1.25rem;
739      height: 1.15rem;
740      padding: 0 0.3rem;
741      display: inline-flex;
742      align-items: center;
743      justify-content: center;
744      border-radius: var(--radius-pill);
745      background: #f4f4f5;
746      color: #71717a;
747      font-size: 0.68rem;
748      font-weight: 700;
749      font-variant-numeric: tabular-nums;
750    }
751    html.theme-dark .nav-queue-badge { background: #27272a; color: #a1a1aa; }
752    .nav-collapsed-hover-label {
753      position: fixed;
754      z-index: 150;
755      transform: translateY(-50%);
756      pointer-events: none;
757      max-width: min(14rem, calc(100vw - 6.5rem));
758      overflow: hidden;
759      text-overflow: ellipsis;
760      white-space: nowrap;
761      border: 1px solid rgba(226, 232, 240, 0.95);
762      border-radius: var(--radius-sm);
763      background: rgba(15, 23, 42, 0.92);
764      color: #fff;
765      padding: 0.34rem 0.55rem;
766      font-size: 0.76rem;
767      font-weight: 700;
768      line-height: 1;
769      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
770    }
771    .nav-collapsed-hover-label[hidden] {
772      display: none !important;
773    }
774	    body.nav-logged-in .site-primary-nav .nav-link-icon {
775	      display: inline-flex;
776	      align-items: center;
777	      justify-content: center;
778	      width: 1rem;
779	      height: 1rem;
780	      color: #52525b;
781	      flex-shrink: 0;
782	    }
783	    body.nav-logged-in .site-primary-nav .nav-link-icon svg {
784	      width: 1rem;
785	      height: 1rem;
786	    }
787	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover,
788	    body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover {
789	      background: #f4f4f5;
790	      color: #18181b;
791	    }
792	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover .nav-link-icon,
793	    body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover .nav-link-icon {
794	      color: #0f172a;
795	    }
796	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600,
797	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 {
798	      background: #f1eafe;
799	      color: #6f35f5;
800	      font-weight: 600;
801	    }
802	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600 .nav-link-icon,
803	    body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 .nav-link-icon {
804	      color: #6f35f5;
805	    }
806    body.nav-logged-in .site-primary-nav #navAuthSignedIn {
807      margin-top: auto;
808      padding-top: 0.5rem;
809      border-top: 1px solid #e4e4e7;
810    }
811    body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navAuthSignedIn {
812      padding-top: 0.75rem;
813    }
814    body.nav-logged-in .site-primary-nav .nav-profile-menu,
815    body.nav-logged-in .site-primary-nav .nav-profile-avatar {
816      width: 100%;
817    }
818    body.nav-logged-in .site-primary-nav .nav-profile-avatar {
819      align-items: center;
820      justify-content: flex-start;
821      min-height: 2.75rem;
822      gap: 0.625rem;
823      border-radius: 0.375rem;
824      padding: 0.375rem 0.5rem;
825    }
826    body.nav-logged-in .site-primary-nav .nav-profile-avatar:hover {
827      background: #f4f4f5;
828    }
829	    body.nav-logged-in .site-primary-nav .nav-profile-avatar::after {
830	      content: "Account";
831	      font-size: 0.875rem;
832	      font-weight: 500;
833	      color: #18181b;
834	    }
835    body.nav-logged-in .site-primary-nav .nav-profile-dropdown {
836      position: static;
837      margin-top: 0.35rem;
838      width: 100%;
839      min-width: 0;
840      box-shadow: none;
841      box-sizing: border-box;
842    }
843    body.nav-logged-in .site-primary-nav .nav-plan-badge {
844      right: 0.35rem;
845      bottom: 0.35rem;
846    }
847    .nav-library-tree { display: none; }
848    .nav-sidebar-disclosure {
849      width: 100%;
850    }
851    .nav-sidebar-disclosure > summary {
852      display: flex;
853      align-items: center;
854      gap: 0.625rem;
855      min-height: 2rem;
856      box-sizing: border-box;
857      border-radius: 0.375rem;
858      padding: 0.4375rem 0.625rem;
859      color: #3f3f46;
860      cursor: pointer;
861      font-size: 0.875rem;
862      font-weight: 500;
863      list-style: none;
864    }
865    .nav-sidebar-disclosure > summary::-webkit-details-marker { display: none; }
866    .nav-sidebar-disclosure > summary:hover { background: #f8fafc; color: #0f172a; }
867    .nav-sidebar-disclosure > summary:focus-visible {
868      outline: 2px solid #c9b1fa;
869      outline-offset: 2px;
870    }
871    .nav-sidebar-disclosure > summary .nav-link-icon { color: #64748b; }
872    .nav-disclosure-chevron {
873      display: inline-flex;
874      margin-left: auto;
875      color: #94a3b8;
876      transition: transform 0.12s ease;
877    }
878    .nav-sidebar-disclosure[open] > summary .nav-disclosure-chevron { transform: rotate(180deg); }
879    .nav-disclosure-links {
880      display: flex;
881      flex-direction: column;
882      gap: 0.125rem;
883      margin: 0;
884      padding: 0.125rem 0 0.25rem;
885      list-style: none;
886    }
887    body.nav-logged-in .site-primary-nav #navPrimaryLinks .nav-disclosure-links a {
888      min-height: 2.2rem;
889      padding-top: 0.45rem;
890      padding-bottom: 0.45rem;
891      color: #475569;
892      font-size: 0.82rem;
893    }
894    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-disclosure > summary {
895      justify-content: center;
896      padding: 0.65rem;
897    }
898    body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-disclosure > summary > span:not(.nav-link-icon),
899    body.nav-logged-in.nav-sidebar-collapsed .nav-disclosure-links,
900    body.nav-logged-in.nav-sidebar-collapsed .nav-disclosure-content {
901      display: none !important;
902    }
903    .nav-disclosure-content { padding-top: 0.125rem; }
904    body.nav-logged-in .nav-library-tree {
905      display: block;
906      margin-top: 0.125rem;
907    }
908    .nav-library-section { margin-top: 0.85rem; }
909    .nav-library-section[hidden] { display: none !important; }
910    .nav-library-section-head {
911      display: flex;
912      align-items: center;
913      justify-content: space-between;
914      gap: 0.5rem;
915      padding: 0 0.35rem 0.35rem 0.75rem;
916    }
917	    .nav-library-section-title {
918	      font-size: 0.75rem;
919	      font-weight: 500;
920	      letter-spacing: 0;
921	      line-height: 1;
922	      text-transform: none;
923	      color: #71717a;
924	    }
925    .nav-library-add {
926      display: inline-flex;
927      align-items: center;
928      justify-content: center;
929      width: 1.65rem;
930      height: 1.65rem;
931      border: 1px solid #e2e8f0;
932      border-radius: var(--radius-sm);
933      background: #fff;
934      color: #475569;
935      font: inherit;
936      font-size: 1rem;
937      font-weight: 800;
938      line-height: 1;
939      cursor: pointer;
940    }
941    .nav-library-add:hover {
942      border-color: #d9c8fb;
943      background: #f1eafe;
944      color: #6f35f5;
945    }
946    .nav-library-list {
947      display: flex;
948      flex-direction: column;
949      gap: 0.125rem;
950    }
951    .nav-library-list[role="tree"],
952    .nav-library-subtree[role="group"] {
953      list-style: none;
954      margin: 0;
955      padding: 0;
956    }
957    .nav-library-node {
958      list-style: none;
959      margin: 0;
960      padding: 0;
961    }
962    .nav-library-folder {
963      border-radius: var(--radius-md);
964    }
965    .nav-library-folder-row {
966      display: flex;
967      align-items: center;
968      gap: 0.2rem;
969      min-width: 0;
970      border: 1px solid transparent;
971      border-radius: var(--radius-md);
972      padding: 0.125rem;
973    }
974    .nav-library-folder-row:hover,
975    .nav-library-folder.is-active .nav-library-folder-row {
976      border-color: #e2e8f0;
977      background: #f8fafc;
978    }
979    .nav-library-drag-handle {
980      display: inline-flex;
981      align-items: center;
982      justify-content: center;
983      width: 1rem;
984      min-width: 1rem;
985      min-height: 1.75rem;
986      color: #94a3b8;
987      cursor: grab;
988      font-size: 0.72rem;
989      line-height: 1;
990      opacity: 0.55;
991      user-select: none;
992    }
993    .nav-library-folder-row:hover .nav-library-drag-handle,
994    .nav-library-file-item:hover .nav-library-drag-handle { color: #64748b; opacity: 1; }
995    .nav-library-folder:active .nav-library-drag-handle,
996    .nav-library-file-item:active .nav-library-drag-handle { cursor: grabbing; }
997    .nav-library-folder-toggle {
998      display: flex;
999      align-items: center;
1000      gap: 0.45rem;
1001      flex: 1;
1002      min-width: 0;
1003      min-height: 2rem;
1004      border: 0;
1005      border-radius: var(--radius-sm);
1006      background: transparent;
1007      color: #1e293b;
1008      cursor: pointer;
1009      padding: 0.42rem 0.45rem;
1010      text-align: left;
1011      box-sizing: border-box;
1012    }
1013    .nav-library-folder-toggle:hover,
1014    .nav-library-folder-toggle:focus-visible {
1015      background: #f8fafc;
1016      color: #0f172a;
1017      outline: 0;
1018    }
1019    .nav-library-folder.is-active .nav-library-folder-toggle { color: #0f172a; }
1020    .nav-library-caret {
1021      display: inline-flex;
1022      align-items: center;
1023      justify-content: center;
1024      width: 0.8rem;
1025      color: #94a3b8;
1026      flex-shrink: 0;
1027      transition: transform 0.12s ease;
1028    }
1029    .nav-library-folder.is-expanded .nav-library-caret {
1030      transform: rotate(90deg);
1031    }
1032    .nav-library-folder[data-nav-depth="1"] .nav-library-folder-row { margin-left: 0.9rem; }
1033    .nav-library-folder[data-nav-depth="2"] .nav-library-folder-row { margin-left: 1.8rem; }
1034    .nav-library-folder[data-nav-depth="3"] .nav-library-folder-row { margin-left: 2.7rem; }
1035    .nav-library-folder[data-nav-depth="4"] .nav-library-folder-row { margin-left: 3.6rem; }
1036    .nav-library-folder-icon {
1037      position: relative;
1038      width: 1.05rem;
1039      height: 0.82rem;
1040      margin-right: 0.05rem;
1041      border-radius: 0.18rem 0.2rem 0.2rem 0.2rem;
1042      background: var(--folder-color, #6f35f5);
1043      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.08);
1044      opacity: 0.9;
1045      flex-shrink: 0;
1046    }
1047    .nav-library-folder-icon::before {
1048      content: "";
1049      position: absolute;
1050      left: 0.1rem;
1051      top: -0.2rem;
1052      width: 0.52rem;
1053      height: 0.28rem;
1054      border-radius: 0.18rem 0.18rem 0 0;
1055      background: inherit;
1056      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
1057    }
1058    .nav-library-folder-name,
1059    .nav-library-file-name {
1060      min-width: 0;
1061      overflow: hidden;
1062      text-overflow: ellipsis;
1063      white-space: nowrap;
1064    }
1065    .nav-library-folder-name {
1066      flex: 1;
1067      font-size: 0.82rem;
1068      font-weight: 700;
1069    }
1070    .nav-library-count {
1071      display: inline-flex;
1072      align-items: center;
1073      justify-content: center;
1074      min-width: 1.2rem;
1075      height: 1.15rem;
1076      padding: 0 0.3rem;
1077      border-radius: var(--radius-pill);
1078	      background: #eef2f7;
1079	      color: #475569;
1080      font-size: 0.68rem;
1081      font-weight: 800;
1082      font-variant-numeric: tabular-nums;
1083      flex-shrink: 0;
1084    }
1085    .nav-library-favorite {
1086      display: inline-flex;
1087      align-items: center;
1088      justify-content: center;
1089      width: 1.65rem;
1090      height: 1.65rem;
1091      border: 0;
1092      border-radius: var(--radius-sm);
1093      background: transparent;
1094      color: #cbd5e1;
1095      cursor: pointer;
1096      flex-shrink: 0;
1097      opacity: 0;
1098      transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
1099    }
1100    .nav-library-folder-row:hover .nav-library-favorite,
1101    .nav-library-favorite:focus-visible,
1102    .nav-library-favorite.is-on {
1103      opacity: 1;
1104    }
1105    .nav-library-favorite:hover { background: #f8fafc; color: #64748b; }
1106    .nav-library-favorite.is-on { color: #f59e0b; }
1107    .nav-library-favorite svg { width: 1rem; height: 1rem; }
1108    .nav-library-file-list {
1109      margin: 0.125rem 0 0.45rem 1.95rem;
1110      padding: 0 0 0 0.75rem;
1111      border-left: 1px solid #e2e8f0;
1112      list-style: none;
1113      display: flex;
1114      flex-direction: column;
1115      gap: 0.0625rem;
1116    }
1117    .nav-library-subtree {
1118      margin: 0.125rem 0 0.35rem 1rem;
1119      padding-left: 0.7rem;
1120      border-left: 1px solid #e2e8f0;
1121    }
1122    .nav-library-folder.is-drop-target > .nav-library-folder-row {
1123      border-color: #9a6df8;
1124      background: #f1eafe;
1125      box-shadow: inset 0 0 0 1px #d9c8fb;
1126    }
1127    .nav-library-folder.is-folder-dragging {
1128      opacity: 0.58;
1129    }
1130    .nav-library-file-link {
1131      display: flex;
1132      align-items: center;
1133      gap: 0.45rem;
1134      min-height: 1.55rem;
1135      border-radius: var(--radius-sm);
1136	      padding: 0.25rem 0.45rem 0.25rem 0.35rem;
1137	      color: #475569;
1138	      font-size: 0.76rem;
1139      font-weight: 650;
1140      text-decoration: none;
1141      flex: 1;
1142      min-width: 0;
1143    }
1144	    .nav-library-file-link:hover { background: #f8fafc; color: #1e293b; }
1145    .nav-library-file-icon {
1146      position: relative;
1147      width: 0.68rem;
1148      height: 0.82rem;
1149      border-radius: 0.12rem;
1150      background: #ef4444;
1151      box-shadow: inset 0 0 0 1px rgba(127, 29, 29, 0.1);
1152      flex-shrink: 0;
1153    }
1154    .nav-library-file-icon::after {
1155      content: "";
1156      position: absolute;
1157      right: 0;
1158      top: 0;
1159      border-top: 0.22rem solid #fecaca;
1160      border-left: 0.22rem solid transparent;
1161    }
1162    .nav-library-name-form {
1163      margin: 0.15rem 0 0.45rem;
1164      padding: 0.5rem;
1165      border: 1px solid #dbe4f0;
1166      border-radius: var(--radius-sm);
1167      background: #fff;
1168    }
1169    .nav-library-name-input {
1170      width: 100%;
1171      min-width: 0;
1172      border: 1px solid #c9b1fa;
1173      border-radius: var(--radius-sm);
1174      padding: 0.45rem 0.5rem;
1175      color: #0f172a;
1176      font-size: 0.82rem;
1177      font-weight: 700;
1178      box-sizing: border-box;
1179    }
1180    .nav-library-name-input:focus {
1181      outline: 2px solid #d9c8fb;
1182      outline-offset: 1px;
1183    }
1184    .nav-library-name-actions {
1185      display: flex;
1186      align-items: center;
1187      gap: 0.375rem;
1188      margin-top: 0.45rem;
1189    }
1190    .nav-library-name-save,
1191    .nav-library-name-cancel {
1192      border: 0;
1193      border-radius: 0.45rem;
1194      padding: 0.36rem 0.55rem;
1195      font-size: 0.74rem;
1196      font-weight: 800;
1197      cursor: pointer;
1198    }
1199    .nav-library-name-save { background: #6f35f5; color: #fff; }
1200    .nav-library-name-save:hover { background: #5f28d9; }
1201    .nav-library-name-cancel { background: transparent; color: #64748b; }
1202    .nav-library-name-cancel:hover { background: #f1f5f9; color: #334155; }
1203    .nav-library-folder.is-drop-target .nav-library-folder-toggle,
1204    #navStuffLink.is-drop-target a {
1205      outline: 2px solid #6f35f5;
1206      outline-offset: 2px;
1207      background: #f1eafe;
1208    }
1209    .nav-library-file-item { display: flex; align-items: center; gap: 0.15rem; cursor: grab; }
1210    .nav-library-file-item:active { cursor: grabbing; }
1211    .nav-library-empty {
1212	      margin: 0.35rem 0.75rem 0;
1213	      color: #64748b;
1214	      font-size: 0.78rem;
1215      font-weight: 600;
1216    }
1217    .nav-profile-menu { position: relative; z-index: 1; }
1218    .nav-profile-menu .nav-profile-avatar {
1219      position: relative; border: 0; padding: 0; cursor: pointer; background: transparent;
1220    }
1221    .nav-plan-badge {
1222      position: absolute; right: -4px; bottom: -4px;
1223      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
1224      line-height: 1; padding: 2px 5px; border-radius: var(--radius-pill);
1225      background: #6f35f5; color: #fff; border: 2px solid #fff;
1226      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
1227    }
1228    .nav-plan-badge.hidden { display: none !important; }
1229    .nav-profile-dropdown {
1230      position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
1231      min-width: 11.5rem; padding: 6px;
1232      border-radius: var(--radius-md); border: 1px solid #e2e8f0;
1233      background: #fff; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
1234    }
1235    .nav-profile-dropdown[hidden] { display: none !important; }
1236	    .nav-profile-dropdown a,
1237	    .nav-profile-dropdown button {
1238	      display: flex; align-items: center; gap: 0.625rem; width: 100%; text-align: left;
1239	      border: 0; background: transparent; cursor: pointer;
1240	      padding: 9px 12px; border-radius: var(--radius-sm);
1241	      font-size: 0.875rem; font-weight: 600; color: #1e293b;
1242	      text-decoration: none; box-sizing: border-box;
1243	    }
1244    .nav-profile-dropdown a:hover,
1245    .nav-profile-dropdown button:hover { background: #f1f5f9; color: #0f172a; }
1246    .nav-profile-dropdown .nav-menu-divider {
1247      margin: 4px 8px; border: 0; border-top: 1px solid #e2e8f0; height: 0;
1248    }
1249    .nav-profile-dropdown .nav-menu-signout { color: #64748b; }
1250    .nav-record-cta { list-style: none; }
1251    .site-primary-nav #navPrimaryLinks .nav-record-cta a {
1252      background: #6f35f5;
1253      color: #fff !important;
1254      font-weight: 500;
1255      box-shadow: 0 1px 2px rgba(111, 53, 245, 0.24);
1256    }
1257    .site-primary-nav #navPrimaryLinks .nav-record-cta a .nav-link-icon {
1258      color: #fff !important;
1259    }
1260    .site-primary-nav #navPrimaryLinks .nav-record-cta a:hover {
1261      background: #5f28d9;
1262      color: #fff;
1263    }
1264    body.nav-logged-in [data-app-footer] { display: none; }
1265    .nav-mobile-trigger {
1266      display: none;
1267      width: 2.5rem;
1268      height: 2.5rem;
1269      align-items: center;
1270      justify-content: center;
1271      border: 1px solid #e5e7eb;
1272      border-radius: var(--radius-sm);
1273      background: #fff;
1274      color: #111827;
1275      cursor: pointer;
1276    }
1277    .nav-mobile-trigger:hover { background: #f8fafc; }
1278    .nav-mobile-trigger-lines,
1279    .nav-mobile-trigger-lines::before,
1280    .nav-mobile-trigger-lines::after {
1281      display: block;
1282      width: 1.1rem;
1283      height: 2px;
1284      border-radius: var(--radius-pill);
1285      background: currentColor;
1286      transition: transform 0.16s ease, opacity 0.16s ease;
1287    }
1288    .nav-mobile-trigger-lines { position: relative; }
1289    .nav-mobile-trigger-lines::before,
1290    .nav-mobile-trigger-lines::after {
1291      content: "";
1292      position: absolute;
1293      left: 0;
1294    }
1295    .nav-mobile-trigger-lines::before { transform: translateY(-6px); }
1296    .nav-mobile-trigger-lines::after { transform: translateY(6px); }
1297    .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines { background: transparent; }
1298    .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines::before { transform: rotate(45deg); }
1299    .site-primary-nav.is-mobile-open .nav-mobile-trigger-lines::after { transform: rotate(-45deg); }
1300    @media (max-width: 900px) {
1301      body.nav-logged-in .nav-sidebar-resizer {
1302        display: none;
1303      }
1304      html:has(> body.nav-logged-in:not(.share-public-page)) { background: #fff; }
1305      body.nav-logged-in {
1306        padding: 0;
1307      }
1308      body.nav-logged-in:not(.share-public-page) {
1309        background: #fff;
1310      }
1311      body.nav-logged-in:not(.share-public-page)::before,
1312      body.nav-logged-in:not(.share-public-page)::after {
1313        display: none;
1314      }
1315      body.nav-logged-in.nav-sidebar-collapsed {
1316        padding: 0;
1317      }
1318      body.nav-logged-in .nav-sidebar-toggle,
1319      body.nav-logged-in .nav-topbar-sidebar-toggle {
1320        display: none;
1321      }
1322      body.nav-logged-in .nav-logged-in-topbar {
1323        top: 0;
1324        min-height: 4rem;
1325        padding: 0.75rem 1rem;
1326        border: 0;
1327        border-bottom: 1px solid #e4e4e7;
1328        border-radius: 0;
1329      }
1330      .nav-page-context {
1331        display: none;
1332      }
1333      .nav-logged-in-search {
1334        flex: 0 0 2.75rem;
1335        width: 2.75rem;
1336        height: 2.75rem;
1337        overflow: hidden;
1338        border-radius: 0.5rem;
1339      }
1340      .nav-logged-in-search svg {
1341        left: 50%;
1342        width: 1.125rem;
1343        height: 1.125rem;
1344        transform: translate(-50%, -50%);
1345      }
1346      .nav-logged-in-search input {
1347        height: 2.75rem;
1348        padding: 0;
1349        opacity: 0;
1350      }
1351      .nav-logged-in-search:focus-within {
1352        background: #f4f4f5;
1353        box-shadow: 0 0 0 2px rgba(111, 53, 245, 0.28);
1354      }
1355      .nav-logged-in-search kbd {
1356        display: none;
1357      }
1358      .nav-topbar-actions {
1359        gap: 0.5rem;
1360      }
1361      .nav-topbar-action {
1362        min-height: 2.75rem;
1363        padding: 0.6rem 0.75rem;
1364      }
1365      .nav-theme-toggle {
1366        width: 2.75rem;
1367        height: 2.75rem;
1368      }
1369      body.nav-logged-in .site-primary-nav {
1370        position: sticky;
1371        inset: auto;
1372        height: auto;
1373        max-height: none;
1374        width: 100%;
1375        overflow: visible;
1376        border: 0;
1377        border-bottom: 1px solid #e5e7eb;
1378        border-radius: 0;
1379        box-shadow: none;
1380      }
1381      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav {
1382        width: 100%;
1383      }
1384      .site-primary-nav > div {
1385        flex-wrap: nowrap;
1386        gap: 0.75rem;
1387        padding: 1rem 1.5rem;
1388      }
1389      body.nav-logged-in .site-primary-nav > div {
1390        min-height: 0;
1391        flex-direction: row;
1392        align-items: center;
1393        justify-content: space-between;
1394      }
1395      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav > div {
1396        align-items: center;
1397        gap: 0.75rem;
1398        padding: 1rem 1.5rem;
1399      }
1400      body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header {
1401        width: auto;
1402      }
1403      body.nav-logged-in.nav-sidebar-collapsed .nav-sidebar-header > a {
1404        display: flex;
1405        justify-content: flex-start;
1406      }
1407      .nav-mobile-trigger { display: inline-flex; }
1408      body.nav-logged-in .nav-mobile-trigger { display: inline-flex; }
1409      .site-primary-nav #navPrimaryLinks {
1410        position: absolute;
1411        left: 1rem;
1412        right: 1rem;
1413        top: calc(100% + 0.5rem);
1414        z-index: 130;
1415        display: none;
1416        flex-direction: column;
1417        align-items: stretch;
1418        gap: 0;
1419        padding: 0.5rem;
1420        border: 1px solid #e5e7eb;
1421        border-radius: var(--radius-lg);
1422        background: rgba(255, 255, 255, 0.98);
1423        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
1424      }
1425      .site-primary-nav.is-mobile-open #navPrimaryLinks { display: flex; }
1426      .site-primary-nav #navPrimaryLinks > li { width: 100%; }
1427      body.nav-logged-in .site-primary-nav #navPrimaryLinks {
1428        width: auto;
1429        flex: none;
1430      }
1431      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks {
1432        align-items: stretch;
1433        gap: 0;
1434      }
1435      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a,
1436      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks button,
1437      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar {
1438        width: 100%;
1439        height: auto;
1440        min-height: 0;
1441        justify-content: flex-start;
1442        padding: 0.75rem 0.85rem;
1443      }
1444      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav #navPrimaryLinks a span:not(.nav-link-icon):not([hidden]):not(.hidden),
1445      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-profile-avatar::after,
1446      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-plan-badge:not(.hidden),
1447      body.nav-logged-in.nav-sidebar-collapsed .site-primary-nav .nav-library-tree:not(.hidden) {
1448        display: initial !important;
1449      }
1450      body.nav-logged-in .site-primary-nav #navAuthSignedIn {
1451        margin-top: 0;
1452        padding-top: 0;
1453        border-top: 0;
1454      }
1455      .site-primary-nav #navPrimaryLinks a,
1456      .site-primary-nav #navPrimaryLinks button[data-open-account="login"] {
1457        display: flex;
1458        width: 100%;
1459        justify-content: flex-start;
1460        padding: 0.75rem 0.85rem;
1461        border-radius: var(--radius-md);
1462        box-sizing: border-box;
1463      }
1464      .site-primary-nav #navPrimaryLinks a:hover,
1465      .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover {
1466        background: #f8fafc;
1467      }
1468      .site-primary-nav .nav-marketing-summary {
1469        display: flex;
1470        width: 100%;
1471        justify-content: space-between;
1472        padding: 0.75rem 0.85rem;
1473        border-radius: var(--radius-md);
1474        box-sizing: border-box;
1475      }
1476      .site-primary-nav .nav-marketing-panel {
1477        position: static;
1478        width: 100%;
1479        margin: 0.25rem 0 0.5rem;
1480        transform: none;
1481        border-radius: var(--radius-md);
1482        box-shadow: none;
1483      }
1484      .site-primary-nav .nav-marketing-panel-grid,
1485      .site-primary-nav .nav-marketing-panel-grid--two {
1486        grid-template-columns: 1fr;
1487      }
1488      .site-primary-nav .nav-marketing-section-title {
1489        margin-top: 0.35rem;
1490      }
1491      .site-primary-nav #navPrimaryLinks button[data-open-account="signup"] {
1492        width: 100%;
1493        justify-content: center;
1494        padding: 0.75rem 0.85rem;
1495      }
1496      .site-primary-nav #navAuthGuest {
1497        flex-direction: column;
1498        align-items: stretch;
1499        gap: 0.35rem;
1500      }
1501      .site-primary-nav .nav-profile-dropdown {
1502        position: static;
1503        margin-top: 0.35rem;
1504        box-shadow: none;
1505      }
1506    }
1507    .profile-plan-badge {
1508      display: inline-block; margin-left: 8px; vertical-align: middle;
1509      font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
1510      padding: 3px 8px; border-radius: var(--radius-pill); background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe;
1511    }
1512    .profile-plan-badge.hidden { display: none !important; }
1513    .profile-public-url-row {
1514      display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
1515    }
1516    .profile-public-url-row .profile-public-url-link {
1517      flex: 1; min-width: 0; font-size: 0.85rem; color: #4f46e5; word-break: break-all;
1518    }
1519    .profile-copy-btn {
1520      flex-shrink: 0; border: 1px solid #cbd5e1; border-radius: var(--radius-sm);
1521      padding: 6px 12px; font-size: 0.8rem; font-weight: 600;
1522      background: #fff; color: #475569; cursor: pointer;
1523    }
1524    .profile-copy-btn:hover { border-color: #a5b4fc; color: #4f46e5; }
1525    .upgrade-usage-host { max-width: 48rem; margin: 0 auto; padding: 0 20px; }
1526    .upgrade-usage-host[hidden] { display: none !important; }
1527    .upgrade-usage-banner {
1528      margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md);
1529      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
1530      border: 1px solid #c7d2fe; background: #eef2ff;
1531    }
1532    .upgrade-usage-banner--warn { border-color: #fde68a; background: #fffbeb; }
1533    .upgrade-usage-banner--urgent { border-color: #fecaca; background: #fef2f2; }
1534    .upgrade-usage-banner-title { margin: 0; font-size: 0.9rem; font-weight: 700; color: #0f172a; }
1535    .upgrade-usage-banner-msg { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: #475569; }
1536    .upgrade-usage-banner-more { margin: 4px 0 0; font-size: 0.75rem; color: #64748b; }
1537    .upgrade-usage-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
1538    .upgrade-usage-banner-cta {
1539      border-radius: var(--radius-sm); padding: 8px 14px; font-size: 0.85rem; font-weight: 700;
1540      background: #4f46e5; color: #fff; text-decoration: none;
1541    }
1542    .upgrade-usage-banner-cta:hover { background: #4338ca; }
1543    .upgrade-usage-banner-dismiss {
1544      border: 0; background: transparent; font-size: 0.8rem; font-weight: 600;
1545      color: #64748b; cursor: pointer; text-decoration: underline;
1546    }
1547    .profile-visibility-warn {
1548      margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
1549      font-size: 0.85rem; line-height: 1.45;
1550      background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
1551    }
1552    .profile-visibility-warn.hidden { display: none !important; }
1553  </style><style>
1554    html.theme-dark:has(>
1554 body.nav-logged-in:not(.share-public-page)) { background: #18181b; color-scheme: dark; }
1555    html.theme-dark body.nav-logged-in:not(.share-public-page) { background: transparent; }
1556    html.theme-dark body.nav-logged-in:not(.share-public-page)::before {
1557      border-color: #27272a;
1558      background: #09090b;
1559      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
1560    }
1561    html.theme-dark body.nav-logged-in:not(.share-public-page)::after { background: #18181b; }
1562    html.theme-dark body.nav-logged-in .nav-logged-in-topbar {
1563      border-color: #27272a;
1564      background: rgba(9, 9, 11, 0.96);
1565    }
1566    html.theme-dark .nav-page-separator { background: #27272a; }
1567    html.theme-dark .nav-page-breadcrumb ol { color: #a1a1aa; }
1568    html.theme-dark .nav-page-breadcrumb li[aria-current="page"] { color: #fafafa; }
1569    html.theme-dark .nav-page-breadcrumb a:hover { color: #fafafa; }
1570    html.theme-dark body.nav-logged-in .nav-topbar-sidebar-toggle { color: #a1a1aa; }
1571    html.theme-dark body.nav-logged-in .nav-topbar-sidebar-toggle:hover { background: #27272a; color: #fafafa; }
1572    html.theme-dark .nav-sidebar-toggle {
1573      border-color: #3f3f46;
1574      background: #18181b;
1575      color: #a1a1aa;
1576    }
1577    html.theme-dark .nav-sidebar-toggle:hover {
1578      border-color: #6f35f5;
1579      background: rgba(111, 53, 245, 0.16);
1580      color: #b7a2fb;
1581    }
1582    html.theme-dark .nav-theme-toggle { color: #a1a1aa; }
1583    html.theme-dark .nav-theme-toggle:hover { background: #27272a; color: #fafafa; }
1584    html.theme-dark .nav-sidebar-header > a { color: #fafafa; }
1585    html.theme-dark .nav-logged-in-search input { color: #fafafa; }
1586    html.theme-dark .nav-logged-in-search input::placeholder { color: #71717a; }
1587    html.theme-dark .nav-logged-in-search input:focus {
1588      border-color: rgba(111, 53, 245, 0.55);
1589      background: #18181b;
1590      box-shadow: 0 0 0 3px rgba(111, 53, 245, 0.22);
1591    }
1592    html.theme-dark .nav-logged-in-search kbd {
1593      border-color: #3f3f46;
1594      border-bottom-color: #52525b;
1595      background: #18181b;
1596      color: #a1a1aa;
1597      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
1598    }
1599    html.theme-dark .nav-topbar-action--secondary {
1600      background: #18181b;
1601      color: #fafafa;
1602      box-shadow: inset 0 0 0 1px #3f3f46, 0 1px 2px rgba(0, 0, 0, 0.3);
1603    }
1604    html.theme-dark .nav-topbar-action--secondary:hover { background: #27272a; }
1605    html.theme-dark .nav-topbar-action--primary:hover { background: #7d4bf7; }
1606    html.theme-dark body.nav-logged-in .site-primary-nav { background: transparent; }
1607    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a,
1608    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"] {
1609      color: #a1a1aa;
1610    }
1611    html.theme-dark body.nav-logged-in .site-primary-nav .nav-link-icon { color: #71717a; }
1612    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover,
1613    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover {
1614      background: #27272a;
1615      color: #fafafa;
1616    }
1617    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a:hover .nav-link-icon,
1618    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks button[data-open-account="login"]:hover .nav-link-icon {
1619      color: #fafafa;
1620    }
1621    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600,
1622    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 {
1623      background: rgba(111, 53, 245, 0.2);
1624      color: #b7a2fb;
1625    }
1626    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-600 .nav-link-icon,
1627    html.theme-dark body.nav-logged-in .site-primary-nav #navPrimaryLinks a.text-indigo-400 .nav-link-icon {
1628      color: #b7a2fb;
1629    }
1630    html.theme-dark .site-primary-nav #navPrimaryLinks .nav-record-cta a:hover { background: #7d4bf7; }
1631    html.theme-dark .nav-sidebar-disclosure > summary { color: #a1a1aa; }
1632    html.theme-dark .nav-sidebar-disclosure > summary:hover { background: #27272a; color: #fafafa; }
1633    html.theme-dark .nav-sidebar-disclosure > summary .nav-link-icon { color: #71717a; }
1634    html.theme-dark .nav-library-section-title { color: #71717a; }
1635    html.theme-dark .nav-library-add {
1636      border-color: #3f3f46;
1637      background: #18181b;
1638      color: #a1a1aa;
1639    }
1640    html.theme-dark .nav-library-add:hover {
1641      border-color: #6f35f5;
1642      background: rgba(111, 53, 245, 0.16);
1643      color: #b7a2fb;
1644    }
1645    html.theme-dark .nav-library-folder-row:hover,
1646    html.theme-dark .nav-library-folder.is-active .nav-library-folder-row {
1647      border-color: #3f3f46;
1648      background: #27272a;
1649    }
1650    html.theme-dark .nav-library-folder-toggle { color: #d4d4d8; }
1651    html.theme-dark .nav-library-folder-toggle:hover,
1652    html.theme-dark .nav-library-folder-toggle:focus-visible { background: #27272a; color: #fafafa; }
1653    html.theme-dark .nav-library-folder.is-active .nav-library-folder-toggle { color: #fafafa; }
1654    html.theme-dark .nav-library-count { background: #27272a; color: #a1a1aa; }
1655    html.theme-dark .nav-library-file-list,
1656    html.theme-dark .nav-library-subtree { border-color: #27272a; }
1657    html.theme-dark .nav-library-file-link { color: #a1a1aa; }
1658    html.theme-dark .nav-library-file-link:hover { background: #27272a; color: #fafafa; }
1659    html.theme-dark .nav-library-empty { color: #71717a; }
1660    html.theme-dark .nav-library-favorite:hover { background: #27272a; color: #a1a1aa; }
1661    html.theme-dark .nav-library-name-form { border-color: #3f3f46; background: #18181b; }
1662    html.theme-dark .nav-library-name-input {
1663      border-color: #6f35f5;
1664      background: #09090b;
1665      color: #fafafa;
1666    }
1667    html.theme-dark body.nav-logged-in .site-primary-nav #navAuthSignedIn { border-color: #27272a; }
1668    html.theme-dark body.nav-logged-in .site-primary-nav .nav-profile-avatar:hover { background: #27272a; }
1669    html.theme-dark body.nav-logged-in .site-primary-nav .nav-profile-avatar::after { color: #fafafa; }
1670    html.theme-dark .nav-profile-avatar-inner {
1671      background: rgba(111, 53, 245, 0.2);
1672      color: #b7a2fb;
1673      border-color: rgba(111, 53, 245, 0.4);
1674    }
1675    html.theme-dark .nav-profile-dropdown {
1676      border-color: #27272a;
1677      background: #18181b;
1678      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
1679    }
1680    html.theme-dark .nav-profile-dropdown a,
1681    html.theme-dark .nav-profile-dropdown button { color: #d4d4d8; }
1682    html.theme-dark .nav-profile-dropdown a:hover,
1683    html.theme-dark .nav-profile-dropdown button:hover { background: #27272a; color: #fafafa; }
1684    html.theme-dark .nav-profile-dropdown .nav-menu-divider { border-color: #27272a; }
1685    html.theme-dark .nav-profile-dropdown .nav-menu-signout { color: #a1a1aa; }
1686    html.theme-dark .nav-profile-dropdown select {
1687      border-color: #3f3f46;
1688      background: #09090b;
1689      color: #fafafa;
1690    }
1691    html.theme-dark .ms-cmdk-backdrop { background: rgba(0, 0, 0, 0.6); }
1692    html.theme-dark .ms-cmdk-panel {
1693      border-color: #27272a;
1694      background: #18181b;
1695      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
1696    }
1697    html.theme-dark .ms-cmdk-search { border-bottom-color: #27272a; }
1698    html.theme-dark .ms-cmdk-input { background: transparent; color: #fafafa; }
1699    html.theme-dark .ms-cmdk-input::placeholder { color: #71717a; }
1700    html.theme-dark .ms-cmdk-group-label { color: #71717a; }
1701    html.theme-dark .ms-cmdk-item-title { color: #fafafa; }
1702    html.theme-dark .ms-cmdk-item-hint,
1703    html.theme-dark .ms-cmdk-shortcut { color: #a1a1aa; }
1704    html.theme-dark .ms-cmdk-item:hover,
1705    html.theme-dark .ms-cmdk-item[aria-selected="true"] { background: rgba(111, 53, 245, 0.2); color: #e4e4e7; }
1706    html.theme-dark .ms-cmdk-item:hover .ms-cmdk-item-hint,
1707    html.theme-dark .ms-cmdk-item[aria-selected="true"] .ms-cmdk-item-hint { color: #b7a2fb; }
1708    html.theme-dark .ms-cmdk-icon { background: #27272a; color: #a1a1aa; }
1709    html.theme-dark .ms-cmdk-item:hover .ms-cmdk-icon,
1710    html.theme-dark .ms-cmdk-item[aria-selected="true"] .ms-cmdk-icon { background: #18181b; color: #b7a2fb; }
1711    html.theme-dark .ms-cmdk-shortcut kbd,
1712    html.theme-dark .ms-cmdk-hint kbd {
1713      border-color: #3f3f46;
1714      border-bottom-color: #52525b;
1715      background: #09090b;
1716      color: #a1a1aa;
1717    }
1718    html.theme-dark .ms-cmdk-hint {
1719      border-top-color: #27272a;
1720      background: #131316;
1721      color: #a1a1aa;
1722    }
1723    @media (max-width: 900px) {
1724      html.theme-dark:has(> body.nav-logged-in:not(.share-public-page)) { background: #09090b; }
1725      html.theme-dark body.nav-logged-in:not(.share-public-page) { background: #09090b; }
1726      html.theme-dark body.nav-logged-in .site-primary-nav {
1727        border-color: #27272a;
1728        background: rgba(9, 9, 11, 0.92);
1729      }
1730      html.theme-dark .site-primary-nav #navPrimaryLinks {
1731        border-color: #27272a;
1732        background: rgba(24, 24, 27, 0.98);
1733      }
1734    }
1735  </style><style>
1736    .ms-skeleton { position: relative; overflow: hidden; background: #e2e8f0; border-radius: var(--radius-sm); }
1737    .ms-skeleton::after {
1738      content: ''; position: absolute; inset: 0;
1739      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
1740      animation: ms-shimmer 1.2s infinite;
1741    }
1742    @keyframes ms-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
1743    .ms-skeleton-row { height: 72px; border-radius: var(--radius-md); margin-bottom: 10px; }
1744    .ms-skeleton-line { height: 12px; margin-bottom: 8px; }
1745    .ms-skeleton-line--sm { width: 40%; height: 10px; }
1746    .ms-skeleton-line--md { width: 70%; }
1747    .ms-skeleton-stat { height: 88px; border-radius: var(--radius-md); }
1748    .ms-skeleton-overlay {
1749      position: absolute; inset: 0; z-index: 2;
1750      display: grid; grid-template-columns: 1fr; gap: 1rem;
1751      pointer-events: none;
1752    }
1753    @media (min-width: 900px) {
1754      .ms-skeleton-overlay { grid-template-columns: 1.2fr 1fr; }
1755      .ms-skeleton-overlay > .ms-skeleton-stat:first-child { grid-column: 1 / -1; min-height: 220px; }
1756    }
1757    .is-skeleton-loading { position: relative; }
1758    .is-skeleton-loading > :not(.ms-skeleton-overlay) { visibility: hidden; }
1759    .ms-toast-host {
1760      position: fixed; bottom: 20px; right: 20px; z-index: 500;
1761      display: flex; flex-direction: column; gap: 8px; max-width: min(24rem, calc(100vw - 32px));
1762      pointer-events: none;
1763    }
1764    .ms-toast {
1765      pointer-events: auto;
1766      display: flex; align-items: center; gap: 12px;
1767      padding: 12px 14px; border-radius: var(--radius-md);
1768      background: #0f172a; color: #f8fafc;
1769      box-shadow: 0 12px 32px rgba(15,23,42,0.28);
1770      font-size: 0.875rem; line-height: 1.4;
1771      animation: ms-toast-in 0.2s ease-out;
1772    }
1773    @keyframes ms-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
1774    .ms-toast-msg { flex: 1; min-width: 0; }
1775    .ms-toast-actions { display: flex; gap: 6px; flex-shrink: 0; }
1776    .ms-toast-btn {
1777      border: none; border-radius: var(--radius-sm); padding: 6px 10px;
1778      font-size: 0.8rem; font-weight: 600; cursor: pointer;
1779    }
1780    .ms-toast-btn--undo { background: #eef2ff; color: #4338ca; }
1781    .ms-toast-btn--dismiss { background: rgba(255,255,255,0.12); color: #e2e8f0; }
1782    .ms-cmdk { position: fixed; inset: 0; z-index: 400; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
1783    .ms-cmdk[hidden] { display: none !important; }
1784    .ms-cmdk-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.45); backdrop-filter: blur(4px); }
1785    .ms-cmdk-panel {
1786      position: relative; width: min(38rem, 100%); border-radius: var(--radius-lg);
1787      background: #fff; border: 1px solid #e2e8f0;
1788      box-shadow: 0 24px 48px rgba(15,23,42,0.18); overflow: hidden;
1789    }
1790    .ms-cmdk-search { position: relative; display: grid; grid-template-columns: 1fr; border-bottom: 1px solid #e2e8f0; }
1791    .ms-cmdk-search svg {
1792      position: absolute; left: 16px; top: 50%; width: 20px; height: 20px;
1793      color: #94a3b8; pointer-events: none; transform: translateY(-50%);
1794    }
1795    .ms-cmdk-input {
1796      width: 100%; box-sizing: border-box; border: none;
1797      padding: 15px 16px 15px 48px; font-size: 1rem; outline: none;
1798    }
1799    .ms-cmdk-list { list-style: none; margin: 0; padding: 8px; max-height: min(52vh, 390px); overflow: auto; }
1800    .ms-cmdk-group-label {
1801      padding: 12px 10px 6px; font-size: 0.72rem; line-height: 1;
1802      color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
1803    }
1804    .ms-cmdk-item {
1805      display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 12px;
1806      padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem;
1807    }
1808    .ms-cmdk-item:hover, .ms-cmdk-item[aria-selected="true"] { background: #eef2ff; color: #312e81; }
1809    .ms-cmdk-item:hover .ms-cmdk-item-hint, .ms-cmdk-item[aria-selected="true"] .ms-cmdk-item-hint { color: #4338ca; }
1810    .ms-cmdk-icon {
1811      display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
1812      border-radius: var(--radius-sm); background: #f8fafc; color: #64748b;
1813    }
1814    .ms-cmdk-icon svg { width: 1.15rem; height: 1.15rem; }
1815    .ms-cmdk-item:hover .ms-cmdk-icon, .ms-cmdk-item[aria-selected="true"] .ms-cmdk-icon { background: #fff; color: #4338ca; }
1816    .ms-cmdk-item-main { min-width: 0; }
1817    .ms-cmdk-item-title { display: block; color: #0f172a; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1818    .ms-cmdk-item-hint { display: block; margin-top: 2px; color: #64748b; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1819    .ms-cmdk-shortcut { display: inline-flex; align-items: center; gap: 4px; color: #64748b; }
1820    .ms-cmdk-shortcut kbd, .ms-cmdk-hint kbd {
1821      display: inline-flex; min-width: 1.55rem; height: 1.35rem; align-items: center; justify-content: center;
1822      border: 1px solid #cbd5e1; border-bottom-color: #94a3b8; border-radius: 6px;
1823      background: #fff; color: #334155; padding: 0 6px; font-size: 0.72rem; font-family: inherit; font-weight: 700;
1824      box-shadow: 0 1px 0 rgba(15,23,42,0.08);
1825    }
1826    .ms-cmdk-item[aria-selected="true"] .ms-cmdk-shortcut kbd { border-color: #818cf8; color: #3730a3; }
1827    .ms-cmdk-empty { padding: 16px; text-align: center; color: #64748b; font-size: 0.875rem; }
1828    .ms-cmdk-hint {
1829      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
1830      padding: 10px 14px; font-size: 0.75rem; color: #64748b; border-top: 1px solid #f1f5f9; background: #f8fafc;
1831    }
1832    .ms-drag-handle {
1833      cursor: grab; color: #94a3b8; padding: 4px 6px; border: none; background: transparent;
1834      font-size: 1rem; line-height: 1; touch-action: none;
1835    }
1836    .ms-drag-handle:active { cursor: grabbing; }
1837    .stuff-row.is-dragging { opacity: 0.45; }
1838    .stuff-row.is-drop-target { outline: 2px dashed #818cf8; outline-offset: 2px; }
1839    .stuff-bulk-bar {
1840      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
1841      padding: 10px 12px; margin-top: 12px; border-radius: var(--radius-md);
1842      background: #eef2ff; border: 1px solid #c7d2fe;
1843    }
1844    .stuff-bulk-bar[hidden] { display: none !important; }
1845    .stuff-file-list { list-style: none; margin: 8px 0 0; padding: 0; }
1846    .stuff-file-row {
1847      display: flex; align-items: center; gap: 8px; padding: 6px 8px;
1848      border-radius: var(--radius-sm); background: #f8fafc; margin-top: 4px; font-size: 0.8rem;
1849    }
1850    .stuff-file-row.is-dragging { opacity: 0.45; }
1851    .upload-retry-btn {
1852      margin-left: 8px; border: 1px solid #fca5a5; background: #fff;
1853      color: #b91c1c; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 0.8rem;
1854      font-weight: 600; cursor: pointer;
1855    }
1856    .upload-retry-btn:hover { background: #fef2f2; }
1857  </style><style>
1858    .nav-activity-wrap { position: relative; list-style: none; }
1859    .nav-activity-badge {
1860      position: absolute; top: 7px; left: 1.45rem;
1861      min-width: 8px; height: 8px; border-radius: var(--radius-pill);
1862      background: #ef4444; border: 2px solid #fff;
1863      pointer-events: none;
1864    }
1865    .nav-activity-badge[hidden] { display: none !important; }
1866    .nav-activity-panel {
1867      position: absolute; right: 0; top: calc(100% + 10px);
1868      width: min(22rem, calc(100vw - 24px));
1869      max-height: min(28rem, 70vh);
1870      display: flex; flex-direction: column;
1871      border-radius: var(--radius-lg); border: 1px solid #e2e8f0;
1872      background: #fff; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
1873      z-index: 250; overflow: hidden;
1874    }
1875    .nav-activity-panel[hidden] { display: none !important; }
1876    .nav-activity-head {
1877      display: flex; align-items: center; justify-content: space-between; gap: 8px;
1878      padding: 14px 16px 10px; border-bottom: 1px solid #f1f5f9;
1879    }
1880    .nav-activity-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; color: #0f172a; }
1881    .nav-activity-mark {
1882      border: 0; background: none; font-size: 0.78rem; font-weight: 600;
1883      color: #4f46e5; cursor: pointer; padding: 4px 0;
1884    }
1885    .nav-activity-mark:hover { text-decoration: underline; }
1886    .nav-activity-list {
1887      list-style: none; margin: 0; padding: 6px 0;
1888      overflow-y: auto; flex: 1; min-height: 0;
1889    }
1890    .nav-activity-item {
1891      display: grid; grid-template-columns: auto 1fr; gap: 10px;
1892      padding: 10px 14px; border-bottom: 1px solid #f8fafc;
1893    }
1894    .nav-activity-item:last-child { border-bottom: 0; }
1895    .nav-activity-icon {
1896      width: 2rem; height: 2rem; border-radius: var(--radius-sm);
1897      display: grid; place-items: center; align-self: start; flex-shrink: 0;
1898      line-height: 1; overflow: visible;
1899    }
1900    .nav-activity-icon svg { display: block; width: 1rem; height: 1rem; overflow: visible; }
1901    .nav-activity-icon--emoji { font-size: 1.05rem; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
1902    .nav-activity-icon--uploaded { background: #eef2ff; color: #4f46e5; }
1903    .nav-activity-icon--viewed { background: #ecfdf5; color: #059669; }
1904    .nav-activity-icon--downloaded { background: #e0f2fe; color: #0284c7; }
1905    .nav-activity-icon--commented { background: #fef3c7; color: #d97706; }
1906    .nav-activity-icon--reacted { background: #fff7ed; color: #ea580c; }
1907    .nav-activity-icon--shared { background: #fce7f3; color: #db2777; }
1908    .nav-activity-icon--achievement { background: #fef9c3; color: #ca8a04; }
1909    .nav-activity-body { min-width: 0; }
1910    .nav-activity-title { margin: 0; font-size: 0.82rem; font-weight: 700; color: #0f172a; }
1911    .nav-activity-text { margin: 2px 0 0; font-size: 0.8rem; line-height: 1.4; color: #64748b; }
1912    .nav-activity-time { margin: 4px 0 0; font-size: 0.72rem; color: #94a3b8; }
1913    .nav-activity-empty {
1914      padding: 28px 20px; text-align: center; font-size: 0.85rem; color: #64748b; line-height: 1.5;
1915    }
1916    .nav-activity-foot {
1917      padding: 10px 14px; border-top: 1px solid #f1f5f9; text-align: center;
1918    }
1919    .nav-activity-foot a {
1920      font-size: 0.8rem; font-weight: 600; color: #4f46e5; text-decoration: none;
1921    }
1922    .nav-activity-foot a:hover { text-decoration: underline; }
1923    @media (max-width: 640px) {
1924      .nav-activity-panel { position: fixed; right: 12px; left: 12px; top: 72px; width: auto; }
1925    }
1926  </style>
1927  <style>
1928    .pricing-brand-page .site-primary-nav {
1929      border-color: rgba(104,75,180,0.14);
1930      background: rgba(255,255,255,0.94);
1931      box-shadow: 0 10px 30px rgba(39,36,58,0.08);
1932    }
1933    .pricing-brand-page #navLogoLink { color: #6f35f5; }
1934    .pricing-brand-page [data-marketing-footer] { margin-top: 0; }
1935    .pricing-page {
1936      background: #f7f5ff;
1937      color: #27243a;
1938    }
1939    .pricing-shell { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
1940    .pricing-hero { padding: 56px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.76fr); gap: 56px; align-items: center; }
1941    .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; }
1942    .pricing-hero p { margin: 20px 0 0; max-width: 620px; font-size: 1.04rem; line-height: 1.65; color: #5f5b72; text-wrap: pretty; }
1943    .pricing-hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
1944    .pricing-primary-link, .pricing-secondary-link {
1945      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
1946      min-height: 44px; padding: 0 18px; border-radius: 8px; font-size: 0.92rem; font-weight: 800; text-decoration: none;
1947    }
1948    .pricing-primary-link { background: #6f35f5; color: #fff; }
1949    .pricing-primary-link:hover { background: #5b29dc; }
1950    .pricing-secondary-link { background: #fff; color: #27243a; border: 1px solid rgba(104, 75, 180, 0.22); }
1951    .pricing-secondary-link:hover { border-color: rgba(104, 75, 180, 0.42); }
1952    .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; }
1953    .pricing-video-frame { overflow: hidden; border-radius: 8px; background: #29233c; color: #fff; }
1954    .pricing-video-top { display: flex; gap: 7px; padding: 13px 14px; background: #211b33; border-bottom: 1px solid rgba(255,255,255,0.08); }
1955    .pricing-dot { width: 9px; height: 9px; border-radius: 999px; background: #64748b; }
1956    .pricing-dot:nth-child(1) { background: #ef4444; } .pricing-dot:nth-child(2) { background: #f59e0b; } .pricing-dot:nth-child(3) { background: #22c55e; }
1957    .pricing-video-body { min-height: 210px; padding: 20px; display: grid; align-content: end; background: #4f2aa8; }
1958    .pricing-video-title { margin: 0; max-width: 18rem; font-size: 1.8rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
1959    .pricing-video-meta { margin-top: 16px; display: flex; align-items: center; gap: 10px; color: #cbd5e1; font-size: 0.82rem; }
1960    .pricing-video-avatar { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: #eef2ff; color: #4f46e5; }
1961    .pricing-video-bar { margin-top: 22px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
1962    .pricing-video-bar span { display: block; width: 68%; height: 100%; background: #fff; border-radius: inherit; }
1963    .pricing-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
1964    .pricing-hero-stat { padding: 12px; border-radius: 8px; background: #f3efff; border: 1px solid #ded4ff; }
1965    .pricing-hero-stat strong { display: block; font-size: 1rem; color: #27243a; }
1966    .pricing-hero-stat span { display: block; margin-top: 2px; font-size: 0.72rem; color: #5f5b72; }
1967    .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; }
1968    .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; }
1969    .pricing-billing-toggle button[aria-pressed="true"] { background: #fff; color: #27243a; box-shadow: 0 2px 10px rgba(55,41,111,0.08); }
1970    .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; }
1971    .pricing-section-head { margin: 64px auto 26px; max-width: 760px; text-align: center; }
1972    .pricing-plans-section > .pricing-section-head:first-child { margin-top: 44px; }
1973    .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; }
1974    .pricing-section-head p { margin: 14px auto 0; max-width: 620px; font-size: 1rem; line-height: 1.7; color: #5f5b72; text-wrap: pretty; }
1975    .pricing-plans { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
1976    .pricing-plan {
1977      position: relative; display: flex; flex-direction: column; border-radius: 8px; padding: 30px;
1978      background: #fff; border: 1px solid rgba(104, 75, 180, 0.16); box-shadow: 0 18px 50px rgba(55, 41, 111, 0.09);
1979    }
1980    .pricing-plan--pro { border: 2px solid #6f35f5; box-shadow: 0 28px 70px rgba(111, 53, 245, 0.18); }
1981    .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; }
1982    .pricing-plan h3 { margin: 16px 0 0; font-size: 1.45rem; font-weight: 850; letter-spacing: 0; color: #27243a; }
1983    .pricing-plan-desc { margin: 9px 0 0; min-height: 3.1rem; color: #5f5b72; font-size: 0.94rem; line-height: 1.55; }
1984    .pricing-price { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; color: #27243a; }
1985    .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; }
1986    .pricing-price span { color: #5f5b72; font-size: 0.9rem; }
1987    .pricing-plan-note { margin: 8px 0 0; color: #5f5b72; font-size: 0.86rem; min-height: 1.4rem; }
1988    .pricing-plan-savings { margin: 8px 0 0; color: #047857; font-size: 0.84rem; font-weight: 750; min-height: 1.3rem; }
1989    .pricing-plan ul { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
1990    .pricing-plan li { display: flex; gap: 10px; color: #334155; font-size: 0.92rem; line-height: 1.45; }
1991    .pricing-plan li svg { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; color: #6f35f5; }
1992    .pricing-plan-cta { margin-top: auto; padding-top: 26px; }
1993    .pricing-plan-cta a, .pricing-plan-cta button {
1994      width: 100%; min-height: 46px; display: inline-flex; justify-content: center; align-items: center;
1995      border-radius: 8px; font-size: 0.94rem; font-weight: 800; text-decoration: none; cursor: pointer;
1996    }
1997    .pricing-plan-cta a { color: #6f35f5; background: #fff; border: 1px solid #d8ccff; }
1998    .pricing-plan-cta a:hover { background: #f4efff; }
1999    .pricing-plan-cta button { border: 0; background: #6f35f5; color: #fff; box-shadow: 0 16px 34px rgba(111,53,245,0.24); }
2000    .pricing-plan-cta button:hover { background: #5b29dc; }
2001    .pricing-plan-cta button:disabled { opacity: 0.72;
2001 cursor: not-allowed; }
2002    #manageBillingBtn.hidden { display: none !important; }
2003    .pricing-active-note { margin: 18px auto 0; max-width: 650px; text-align: center; color: #5f5b72; font-size: 0.92rem; line-height: 1.6; }
2004    .pricing-active-note.hidden { display: none; }
2005    .pricing-credit-packs { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
2006    .pricing-credit-pack { display: grid; gap: 14px; padding: 22px; border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; background: #fff; }
2007    .pricing-credit-pack h3 { margin: 0; font-size: 1.05rem; color: #27243a; }
2008    .pricing-credit-pack p { margin: 5px 0 0; min-height: 2.6rem; color: #5f5b72; font-size: 0.86rem; line-height: 1.5; }
2009    .pricing-credit-pack strong { font-size: 1.65rem; color: #27243a; font-variant-numeric: tabular-nums; }
2010    .pricing-credit-pack button { min-height: 42px; border: 1px solid #d8ccff; border-radius: 8px; background: #fff; color: #5b29dc; font-weight: 800; cursor: pointer; }
2011    .pricing-credit-pack button:hover { background: #f4efff; }
2012    .pricing-credit-note { max-width: 720px; margin: 16px auto 0; color: #5f5b72; font-size: 0.86rem; line-height: 1.6; text-align: center; }
2013    .pricing-proof { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
2014    .pricing-replaces { margin: 24px auto 0; max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
2015    .pricing-replaces span { padding: 7px 11px; border: 1px solid #ded4ff; border-radius: 999px; background: #fff; color: #5f5b72; font-size: 0.8rem; font-weight: 700; }
2016    .pricing-proof-card { border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; padding: 18px; background: rgba(255,255,255,0.86); }
2017    .pricing-proof-card[href] { display: block; text-decoration: none; transition: transform 0.16s ease, border-color 0.16s ease; }
2018    .pricing-proof-card[href]:hover { transform: translateY(-1px); border-color: rgba(111, 53, 245, 0.38); }
2019    .pricing-proof-card svg { width: 22px; height: 22px; color: #6f35f5; }
2020    .pricing-proof-card strong { display: block; margin-top: 12px; color: #27243a; font-size: 0.98rem; }
2021    .pricing-proof-card span { display: block; margin-top: 5px; color: #5f5b72; font-size: 0.86rem; line-height: 1.5; }
2022    .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); }
2023    .pricing-compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
2024    .pricing-compare th { padding: 18px 20px; text-align: left; color: #27243a; background: #f7f5ff; border-bottom: 1px solid #e5ddff; }
2025    .pricing-compare th:not(:first-child), .pricing-compare td:not(:first-child) { text-align: center; }
2026    .pricing-compare td { padding: 15px 20px; border-bottom: 1px solid #f0ebff; color: #3d394f; }
2027    .pricing-compare tr:last-child td { border-bottom: 0; }
2028    .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; }
2029    .pricing-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: #efe7ff; color: #6f35f5; }
2030    .pricing-dash { color: #cbd5e1; font-weight: 800; }
2031    .pricing-use-cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
2032    .pricing-use-case { padding: 22px; border-radius: 8px; border: 1px solid rgba(104, 75, 180, 0.16); background: #fff; }
2033    .pricing-use-case svg { width: 24px; height: 24px; color: #6f35f5; }
2034    .pricing-use-case h3 { margin: 14px 0 0; font-size: 1rem; font-weight: 800; color: #27243a; }
2035    .pricing-use-case h3 a { color: inherit; text-decoration: none; }
2036    .pricing-use-case h3 a:hover { color: #6f35f5; }
2037    .pricing-use-case p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.6; color: #5f5b72; }
2038    .pricing-faq { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 72px; }
2039    .pricing-faq details { border: 1px solid rgba(104, 75, 180, 0.16); border-radius: 8px; padding: 18px 20px; background: #fff; }
2040    .pricing-faq summary { cursor: pointer; font-weight: 800; color: #27243a; }
2041    .pricing-faq p { margin: 10px 0 0; color: #5f5b72; font-size: 0.92rem; line-height: 1.6; }
2042    @media (max-width: 900px) {
2043      .pricing-hero, .pricing-proof, .pricing-use-cases, .pricing-faq, .pricing-credit-packs { grid-template-columns: 1fr; }
2044      .pricing-plans { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
2045      .pricing-hero { padding-top: 48px; }
2046      .pricing-compare-wrap { overflow-x: auto; }
2047      .pricing-compare { min-width: 680px; }
2048    }
2049    @media (max-width: 560px) {
2050      .pricing-shell { padding: 0 16px; }
2051      .pricing-hero { gap: 28px; }
2052      .pricing-hero-stats { gap: 6px; }
2053      .pricing-hero-stat { padding: 10px 8px; }
2054      .pricing-plans { grid-template-columns: 1fr; }
2055      .pricing-plan { padding: 22px; }
2056      .pricing-section-head { margin-top: 46px; }
2057    }
2058  </style>
2059  <style>
2060    .mh-product-ui {
2061      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
2062      font-size: 14px;
2063      line-height: 1.45;
2064      color: #0f172a;
2065      --brand: #6f35f5;
2066      --brand-soft: #f2eefd;
2067      --brand-mid: #ddd3fa;
2068    }
2069    .mh-product-ui[data-surface="share"],
2070    .mh-product-ui[data-surface="lead"] {
2071      background: linear-gradient(135deg, #f7f5ff, #ffffff);
2072    }
2073    .mh-product-ui[data-surface="video"] {
2074      background: linear-gradient(165deg, #f7f5ff 0%, #ffffff 38%, #ece9fb 100%);
2075    }
2076    .mh-product-ui[data-surface="analytics"] {
2077      background: #faf9ff;
2078    }
2079    .mh-product-ui[data-surface="profile"] {
2080      background: #f7f5ff;
2081      display: grid;
2082      place-items: center;
2083      padding: 20px;
2084    }
2085    .mh-product-ui .share-brand-bar {
2086      padding: 14px 20px;
2087      background: #fff;
2088      box-shadow: 0 1px 0 rgba(15,23,42,0.06);
2089      border-bottom: 2px solid var(--brand);
2090    }
2091    .mh-product-ui .share-brand-inner {
2092      max-width: 960px;
2093      margin: 0 auto;
2094      display: flex;
2095      align-items: center;
2096      gap: 12px;
2097      min-height: 40px;
2098    }
2099    .mh-product-ui .share-brand-logo {
2100      width: 36px;
2101      height: 36px;
2102      border-radius: 10px;
2103      background: linear-gradient(135deg, #8d47ff, #6232e7);
2104      color: #fff;
2105      font-size: 0.7rem;
2106      font-weight: 800;
2107      display: grid;
2108      place-items: center;
2109      flex-shrink: 0;
2110    }
2111    .mh-product-ui .share-brand-name {
2112      font-size: 1.05rem;
2113      font-weight: 700;
2114      letter-spacing: -0.02em;
2115    }
2116    .mh-product-ui .page-main { padding: 16px 16px 20px; }
2117    .mh-product-ui .card {
2118      max-width: 960px;
2119      margin: 0 auto;
2120      background: #fff;
2121      border: 1px solid #dbe3ef;
2122      border-radius: 16px;
2123      padding: 22px;
2124      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
2125    }
2126    .mh-product-ui .card h1 {
2127      margin: 0;
2128      font-size: 1.35rem;
2129      font-weight: 800;
2130      letter-spacing: -0.02em;
2131    }
2132    .mh-product-ui .meta {
2133      margin-top: 8px;
2134      color: #475569;
2135      font-size: 0.92rem;
2136    }
2137    .mh-product-ui .gallery-grid {
2138      list-style: none;
2139      margin: 20px 0 0;
2140      padding: 0;
2141      display: grid;
2142      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
2143      gap: 12px;
2144    }
2145    .mh-product-ui .gallery-item {
2146      border: 1px solid #e2e8f0;
2147      border-radius: 12px;
2148      overflow: hidden;
2149      background: #f8fafc;
2150      display: flex;
2151      flex-direction: column;
2152    }
2153    .mh-product-ui .gallery-thumb {
2154      display: grid;
2155      place-items: center;
2156      aspect-ratio: 4/3;
2157      background: linear-gradient(180deg, #ece9fb, #f7f5ff);
2158      border-bottom: 1px solid #e9e4f9;
2159    }
2160    .mh-product-ui .gallery-thumb--doc { background: linear-gradient(180deg, #fff, #f1f5f9); }
2161    .mh-product-ui .gallery-meta { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
2162    .mh-product-ui .gallery-name { font-weight: 600; font-size: 0.82rem; color: #0f172a; }
2163    .mh-product-ui .gallery-size { font-size: 0.75rem; color: #64748b; }
2164    .mh-product-ui .gallery-actions { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
2165    .mh-product-ui .gallery-btn {
2166      font-size: 0.75rem;
2167      font-weight: 600;
2168      text-decoration: none;
2169      color: var(--brand);
2170      border: 1px solid var(--brand-mid);
2171      background: #fff;
2172      border-radius: 8px;
2173      padding: 5px 8px;
2174    }
2175    .mh-product-ui .video-landing-main { padding: 0 16px 20px; }
2176    .mh-product-ui .video-landing-inner { max-width: 920px; margin: 0 auto; }
2177    .mh-product-ui .video-landing-card {
2178      margin-top: 12px;
2179      padding: 22px;
2180      border-radius: 20px;
2181      border: 1px solid rgba(148, 163, 184, 0.35);
2182      background: rgba(255, 255, 255, 0.92);
2183      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
2184    }
2185    .mh-product-ui .video-landing-hero { text-align: center; max-width: 36rem; margin: 0 auto; }
2186    .mh-product-ui .video-landing-title {
2187      margin: 0;
2188      font-size: 1.35rem;
2189      font-weight: 800;
2190      letter-spacing: -0.03em;
2191      line-height: 1.15;
2192    }
2193    .mh-product-ui .video-landing-lead {
2194      margin: 10px 0 0;
2195      font-size: 0.92rem;
2196      line-height: 1.55;
2197      color: #475569;
2198    }
2199    .mh-product-ui .video-landing-player { margin-top: 18px; }
2200    .mh-product-ui .stream-player-frame {
2201      aspect-ratio: 16/9;
2202      border-radius: 14px;
2203      background: linear-gradient(145deg, #25105f, #4c1d95 55%, #7d3bf0);
2204      box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
2205      display: grid;
2206      place-items: center;
2207      position: relative;
2208      overflow: hidden;
2209    }
2210    .mh-product-ui .stream-player-progress {
2211      position: absolute;
2212      left: 12px;
2213      right: 12px;
2214      bottom: 12px;
2215      height: 4px;
2216      background: rgba(255,255,255,0.25);
2217      border-radius: 999px;
2218    }
2219    .mh-product-ui .stream-player-progress span {
2220      display: block;
2221      height: 100%;
2222      width: 42%;
2223      background: #c4b5fd;
2224      border-radius: 999px;
2225    }
2226    .mh-product-ui .eg-wrap-mock { padding: 14px 16px 18px; }
2227    .mh-product-ui .eg-head-mock h1 {
2228      margin: 0;
2229      font-size: 1.25rem;
2230      font-weight: 700;
2231      color: #0f172a;
2232    }
2233    .mh-product-ui .eg-head-mock p { margin: 6px 0 0; font-size: 0.82rem; color: #64748b; }
2234    .mh-product-ui .eg-tabs {
2235      display: flex;
2236      flex-wrap: wrap;
2237      gap: 6px;
2238      margin-top: 12px;
2239      border-bottom: 1px solid #e2e8f0;
2240      padding-bottom: 6px;
2241    }
2242    .mh-product-ui .eg-tab {
2243      border: 0;
2244      background: none;
2245      padding: 7px 12px;
2246      border-radius: 999px;
2247      font-size: 0.8rem;
2248      font-weight: 600;
2249      color: #64748b;
2250    }
2251    .mh-product-ui .eg-tab.is-active { background: var(--brand-soft); color: #5b21b6; }
2252    .mh-product-ui .eg-metrics {
2253      display: grid;
2254      grid-template-columns: repeat(3, 1fr);
2255      gap: 10px;
2256      margin-top: 14px;
2257    }
2258    .mh-product-ui .eg-metric {
2259      background: #fff;
2260      border: 1px solid #e2e8f0;
2261      border-radius: 14px;
2262      padding: 12px;
2263      box-shadow: 0 1px 2px rgba(15,23,42,0.04);
2264    }
2265    .mh-product-ui .eg-metric-label {
2266      font-size: 0.68rem;
2267      font-weight: 600;
2268      letter-spacing: 0.04em;
2269      text-transform: uppercase;
2270      color: #64748b;
2271    }
2272    .mh-product-ui .eg-metric-value {
2273      margin-top: 4px;
2274      font-size: 1.35rem;
2275      font-weight: 700;
2276      color: #0f172a;
2277    }
2278    .mh-product-ui .eg-metric-sub { margin-top: 3px; font-size: 0.72rem; color: #15803d; }
2279    .mh-product-ui .eg-panel {
2280      margin-top: 12px;
2281      background: #fff;
2282      border: 1px solid #e2e8f0;
2283      border-radius: 14px;
2284      box-shadow: 0 1px 2px rgba(15,23,42,0.04);
2285      overflow: hidden;
2286    }
2287    .mh-product-ui .eg-panel-head {
2288      padding: 12px 14px;
2289      border-bottom: 1px solid #f1f5f9;
2290      display: flex;
2291      justify-content: space-between;
2292      align-items: center;
2293      gap: 8px;
2294    }
2295    .mh-product-ui .eg-panel-title { font-size: 0.88rem; font-weight: 700; }
2296    .mh-product-ui .eg-chart-bars {
2297      display: flex;
2298      align-items: flex-end;
2299      gap: 6px;
2300      height: 72px;
2301      padding: 12px 14px 14px;
2302    }
2303    .mh-product-ui .eg-chart-bars span {
2304      flex: 1;
2305      background: linear-gradient(180deg, #a566ff, #6f35f5);
2306      border-radius: 4px 4px 0 0;
2307      min-height: 8px;
2308    }
2309    .mh-product-ui .lead-preview-shell { position: relative; }
2310    .mh-product-ui .lead-preview-shell--locked .lead-preview-blur {
2311      filter: blur(8px);
2312      opacity: 0.5;
2313      pointer-events: none;
2314      max-height: 200px;
2315      overflow: hidden;
2316    }
2317    .mh-product-ui .lead-capture-box {
2318      margin: 16px;
2319      padding: 16px;
2320      border-radius: 12px;
2321      border: 1px solid #a7f3d0;
2322      background: #ecfdf5;
2323      text-align: left;
2324      position: relative;
2325      z-index: 2;
2326      box-shadow: 0 16px 40px rgba(15,23,42,0.12);
2327    }
2328    .mh-product-ui .lead-capture-heading {
2329      margin: 0;
2330      font-size: 0.95rem;
2331      font-weight: 700;
2332      color: #0f172a;
2333    }
2334    .mh-product-ui .lead-capture-desc {
2335      margin: 6px 0 0;
2336      font-size: 0.85rem;
2337      color: #64748b;
2338    }
2339    .mh-product-ui .lead-capture-label {
2340      display: block;
2341      margin-top: 10px;
2342      font-size: 0.8rem;
2343      font-weight: 600;
2344      color: #475569;
2345    }
2346    .mh-product-ui .lead-capture-input {
2347      margin-top: 4px;
2348      width: 100%;
2349      box-sizing: border-box;
2350      padding: 9px 11px;
2351      border: 1px solid #cbd5e1;
2352      border-radius: 10px;
2353      font-size: 0.85rem;
2354      background: #fff;
2355      color: #0f172a;
2356    }
2357    .mh-product-ui .lead-capture-btn {
2358      margin-top: 12px;
2359      border: 0;
2360      border-radius: 10px;
2361      padding: 10px 14px;
2362      font-weight: 600;
2363      font-size: 0.9rem;
2364      background: #059669;
2365      color: #fff;
2366      width: 100%;
2367    }
2368    .mh-product-ui .public-profile-card {
2369      width: min(20rem, 100%);
2370      background: #fff;
2371      border: 1px solid #e2e8f0;
2372      border-radius: 16px;
2373      padding: 28px 24px;
2374      text-align: center;
2375      box-shadow: 0 16px 48px rgba(15,23,42,0.08);
2376    }
2377    .mh-product-ui .public-profile-avatar {
2378      width: 72px;
2379      height: 72px;
2380      margin: 0 auto 12px;
2381      border-radius: 999px;
2382      background: var(--brand-soft);
2383      border: 2px solid var(--brand-mid);
2384      display: grid;
2385      place-items: center;
2386      color: var(--brand);
2387      font-weight: 800;
2388      font-size: 1.1rem;
2389    }
2390    .mh-product-ui .public-profile-card h1 {
2391      margin: 0;
2392      font-size: 1.2rem;
2393      font-weight: 800;
2394    }
2395    .mh-product-ui .public-profile-meta {
2396      margin-top: 6px;
2397      font-size: 0.82rem;
2398      color: #64748b;
2399    }
2400    .mh-product-ui .public-profile-links {
2401      list-style: none;
2402      margin: 16px 0 0;
2403      padding: 0;
2404      display: flex;
2405      flex-direction: column;
2406      gap: 8px;
2407      text-align: left;
2408    }
2409    .mh-product-ui .public-profile-links a {
2410      display: block;
2411      border-radius: 10px;
2412      padding: 9px 11px;
2413      background: var(--brand-soft);
2414      color: #5b21b6;
2415      font-size: 0.82rem;
2416      font-weight: 700;
2417      text-decoration: none;
2418    }
2419    .mh-product-ui .hosted-site-card {
2420      max-width: 960px;
2421      margin: 12px auto 0;
2422      background: #fff;
2423      border: 1px solid #dbe3ef;
2424      border-radius: 16px;
2425      overflow: hidden;
2426      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
2427    }
2428    .mh-product-ui .hosted-site-nav {
2429      display: flex;
2430      gap: 16px;
2431      padding: 12px 18px;
2432      border-bottom: 1px solid #e2e8f0;
2433      font-size: 0.8rem;
2434      font-weight: 700;
2435      color: #64748b;
2436    }
2437    .mh-product-ui .hosted-site-hero {
2438      padding: 20px 18px;
2439      background: linear-gradient(135deg, #f2eefd, #fff);
2440    }
2441    .mh-product-ui .hosted-site-hero h2 {
2442      margin: 6px 0 4px;
2443      font-size: 1.1rem;
2444      font-weight: 800;
2445    }
2446    .mh-product-ui .hosted-site-hero p { margin: 0; font-size: 0.85rem; color: #64748b; }
2447    .mh-product-ui .hosted-site-grid {
2448      display: grid;
2449      grid-template-columns: repeat(3, 1fr);
2450      gap: 8px;
2451      padding: 0 18px 18px;
2452    }
2453    .mh-product-ui .hosted-site-grid div {
2454      aspect-ratio: 1;
2455      border-radius: 10px;
2456      background: linear-gradient(135deg, #ece9fb, #fbe4ff);
2457    }
2458  </style><style>
2459    .mh-home-page {
2460      --mh-ink: #27243a;
2461      --mh-muted: #5f5b72;
2462      --mh-purple: #6f35f5;
2463      --mh-purple-deep: #25105f;
2464      --mh-purple-mid: #7d3bf0;
2465      --mh-purple-bright: #a633ff;
2466      --mh-lilac: #ece9fb;
2467      --mh-lilac-soft: #f7f5ff;
2468      --mh-display: 'Baloo 2', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
2469    }
2470    .mh-home-page .site-primary-nav {
2471      border-color: rgba(104,75,180,0.14);
2472      background: rgba(255,255,255,0.94);
2473      box-shadow: 0 10px 30px rgba(39,36,58,0.08);
2474    }
2475    .mh-home-page #navLogoLink { color: var(--mh-purple); }
2476    .mh-home-page [data-marketing-footer] { margin-top: 0; }
2477    .mh-section-eyebrow {
2478      display: inline-block;
2479      padding: 0.3rem 0.95rem;
2480      border: 2px solid var(--mh-ink);
2481      border-radius: 999px;
2482      background: #fff;
2483      font-size: 0.8rem;
2484      font-weight: 800;
2485      text-transform: uppercase;
2486      color: var(--mh-ink);
2487      box-shadow: 0.2rem 0.2rem 0 var(--mh-purple);
2488      transform: rotate(-2deg);
2489    }
2490    .dark .mh-section-eyebrow { background: #1e1b4b; border-color: #c4b5fd; color: #c4b5fd; box-shadow: 0.2rem 0.2rem 0 #818cf8; }
2491    .mh-section-title { margin-top: 1rem; font-family: var(--mh-display); font-size: clamp(2rem, 3.8vw, 3.2rem); font-weight: 700; letter-spacing: 0; color: var(--mh-ink); line-height: 1.05; }
2492    .dark .mh-section-title { color: #fff; }
2493    .mh-echo { display: grid; padding-bottom: 0.42em; }
2494    .mh-echo > span { grid-area: 1 / 1; }
2495    .mh-echo-main { position: relative; z-index: 1; }
2496    .mh-echo-ghost {
2497      transform: translateY(0.16em);
2498      color: transparent;
2499      -webkit-text-stroke: 1.5px rgba(111, 53, 245, 0.28);
2500      pointer-events: none;
2501    }
2502    .mh-echo-ghost--2 { transform: translateY(0.32em); -webkit-text-stroke-color: rgba(111, 53, 245, 0.13); }
2503    .dark .mh-echo-ghost { -webkit-text-stroke-color: rgba(196, 181, 253, 0.3); }
2504    .dark .mh-echo-ghost--2 { -webkit-text-stroke-color: rgba(196, 181, 253, 0.14); }
2505    .mh-section-blurb { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.68; color: var(--mh-muted); }
2506    .dark .mh-section-blurb { color: #94a3b8; }
2507
2508    .mh-browser {
2509      border-radius: 18px;
2510      overflow: hidden;
2511      background: #fff;
2512      border: 2px solid rgba(104,75,180,0.2);
2513      box-shadow: 0.4rem 0.4rem 0 rgba(111,53,245,0.16);
2514    }
2515    .mh-browser--compact { box-shadow: 0.28rem 0.28rem 0 rgba(111,53,245,0.12); }
2516    .mh-browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f2eefd; border-bottom: 1px solid #ddd3fa; }
2517    .mh-browser-dots { display: flex; gap: 5px; }
2518    .mh-browser-dots span { width: 9px; height: 9px; border-radius: 999px; }
2519    .mh-browser-dots span:first-child { background: #fca5a5; }
2520    .mh-browser-dots span:nth-child(2) { background: #fcd34d; }
2521    .mh-browser-dots span:nth-child(3) { background: #86efac; }
2522    .mh-browser-url {
2523      flex: 1; font-size: 0.72rem; font-weight: 700; color: #5f5b72;
2524      background: #fff; border: 1px solid #ddd3fa; border-radius: 999px; padding: 5px 12px;
2525      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
2526    }
2527    .mh-browser-body--flush { padding: 0; background: #fff; overflow: hidden; }
2528
2529    .mh-hero {
2530      position: relative;
2531      min-height: 500px;
2532      overflow: hidden;
2533      background:
2534        radial-gradient(44rem 26rem at 82% 18%, rgba(216, 77, 255, 0.72), transparent 64%),
2535        radial-gradient(42rem 28rem at 62% 96%, rgba(107, 83, 255, 0.78), transparent 62%),
2536        linear-gradient(124deg, #25105f 0%, #6e14ed 56%, #a633ff 100%);
2537      color: #fff;
2538      isolation: isolate;
2539    }
2540    .mh-hero::before {
2541      content: "";
2542      position: absolute;
2543      left: 38%;
2544      bottom: -36%;
2545      width: 54rem;
2546      height: 24rem;
2547      border: 2px solid rgba(255,255,255,0.28);
2548      border-radius: 50%;
2549      transform: rotate(-12deg);
2550      z-index: -2;
2551    }
2552    .mh-hero-shade {
2553      position: absolute;
2554      inset: 0;
2555      z-index: -1;
2556      background: linear-gradient(90deg, rgba(28, 9, 82, 0.36), transparent 62%);
2557      pointer-events: none;
2558    }
2559    .mh-hero-inner {
2560      width: 100%;
2561      min-height: 620px;
2562      display: grid;
2563      grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
2564      gap: clamp(2rem, 5vw, 5rem);
2565      align-items: center;
2566    }
2567    .mh-hero-copy {
2568      max-width: 31rem;
2569      text-align: left;
2570      text-shadow: none;
2571    }
2572    .mh-hero-copy h1 {
2573      margin: 0;
2574      color: #fff;
2575      font-family: var(--mh-display);
2576      font-size: clamp(2.5rem, 5.4vw, 5rem);
2577      font-weight: 800;
2578      line-height: 1.02;
2579      letter-spacing: 0;
2580      text-shadow:
2581        0.035em 0.035em 0 #c99aff,
2582        0.07em 0.07em 0 var(--mh-purple-bright),
2583        0.105em 0.105em 0 var(--mh-purple-mid),
2584        0.14em 0.14em 0 var(--mh-purple-deep);
2585    }
2586    .mh-hero-word { display: inline-block; }
2587    .mh-hero-word--pop { transform: rotate(-2.5deg); }
2588    .mh-hero-word--tilt { transform: rotate(1.6deg); }
2589    .mh-hero-copy p {
2590      margin: 1.25rem 0 0;
2591      max-width: 31rem;
2592      color: rgba(255, 255, 255, 0.86);
2593      font-size: clamp(1rem, 1.45vw, 1.18rem);
2594      font-weight: 650;
2595      line-height: 1.62;
2596    }
2597    .mh-hero-cta, .mh-pill-cta {
2598      display: inline-flex;
2599      align-items: center;
2600      justify-content: center;
2601      min-height: 54px;
2602      padding: 0 2rem;
2603      border: 0;
2604      border-radius: 999px;
2605      background: #fff;
2606      color: #4d20bc;
2607      box-shadow: 0.28rem 0.28rem 0 var(--mh-purple-deep);
2608      font-family: var(--mh-display);
2609      font-size: 1.05rem;
2610      font-weight: 700;
2611      cursor: pointer;
2612      text-shadow: none;
2613      text-decoration: none;
2614      transition: transform 150ms ease-out, box-shadow 150ms ease-out;
2615    }
2616    .mh-hero-cta { margin-top: 1.9rem; }
2617    .mh-hero-cta:hover, .mh-pill-cta:hover { background: #fff; transform: translate(-2px, -2px); box-shadow: 0.42rem 0.42rem 0 var(--mh-purple-deep); }
2618    .mh-hero-cta:active, .mh-pill-cta:active { transform: translate(2px, 2px); box-shadow: 0.08rem 0.08rem 0 var(--mh-purple-deep); }
2619    .mh-hero-art { position: relative; min-height: 310px; display: grid; align-items: center; }
2620    @media (max-width: 480px) {
2621      .mh-hero-copy h1 { overflow-wrap: anywhere; }
2622      .mh-browser { border-radius: 10px; }
2623    }
2624    @media (max-width: 640px) {
2625      .mh-hero { height: 610px; min-height: 0; }
2626      .mh-hero-inner { grid-template-columns: 1fr; min-height: auto; }
2627      .mh-hero-art { min-height: 112px; overflow: hidden; }
2628      .mh-hero-copy h1 { font-size: clamp(2rem, 9vw, 2.45rem); line-height: 1.02; }
2629      .mh-hero-copy p { max-width: 20rem; font-size: 0.9rem; line-height: 1.45; }
2630    }
2631
2632    .mh-home-page main { overflow-x: clip; }
2633    .mh-marquee {
2634      overflow: hidden;
2635      background: var(--mh-lilac);
2636      border-block: 2px solid rgba(104, 75, 180, 0.18);
2637      transform: rotate(-1.2deg) scale(1.02);
2638      position: relative;
2639      z-index: 1;
2640    }
2641    .dark .mh-marquee { background: #1e1b4b; border-color: rgba(196, 181, 253, 0.2); }
2642    .mh-marquee-track { display: flex; width: max-content; }
2643    .mh-marquee-run {
2644      flex-shrink: 0;
2645      display: flex;
2646      align-items: center;
2647      gap: 2.4rem;
2648      padding: 0.9rem 1.2rem;
2649      animation: mh-marquee 26s linear infinite;
2650    }
2651    .mh-marquee-word {
2652      font-family: var(--mh-display);
2653      font-weight: 700;
2654      font-size: clamp(1.1rem, 2vw, 1.5rem);
2655      color: var(--mh-purple);
2656      white-space: nowrap;
2657    }
2658    .dark .mh-marquee-word { color: #c4b5fd; }
2659    .mh-marquee-star { color: var(--mh-purple-bright); font-size: 1rem; }
2660    @keyframes mh-marquee { to { transform: translateX(calc(-100% - 2.4rem)); } }
2661    @media (prefers-reduced-motion: reduce) {
2662      .mh-marquee-run { animation: none; }
2663      .mh-hero-cta, .mh-pill-cta, .mh-bento-item, .mh-feature-icon { transition: none; }
2664    }
2665
2666    .mh-home-page .chrome-extension-promo { background: var(--mh-lilac-soft); border-block: 1px solid rgba(104, 75, 180, 0.18); }
2667    .dark .mh-home-page .chrome-extension-promo, .mh-home-page.dark .chrome-extension-promo { background: #111827; }
2668    .mh-home-page .chrome-extension-promo-icon { background: var(--mh-purple); border-radius: 14px; transform: rotate(-4deg); }
2669    .mh-home-page .chrome-extension-promo-cta {
2670      border-radius: 999px;
2671      background: var(--mh-purple);
2672      box-shadow: 0.2rem 0.2rem 0 var(--mh-purple-deep);
2673      font-family: var(--mh-display);
2674      transition: transform 150ms ease-out, box-shadow 150ms ease-out;
2675    }
2676    .mh-home-page .chrome-extension-promo-cta:hover { transform: translate(-2px, -2px); box-shadow: 0.34rem 0.34rem 0 var(--mh-purple-deep); }
2677
2678    .mh-pillars, .mh-use-cases, .mh-examples { padding: 5.4rem 0; }
2679    .mh-pillars { background: #fff; border-top: 1px solid rgba(104,75,180,0.12); }
2680    .dark .mh-pillars { background: #111827; border-color: rgba(255,255,255,0.1); }
2681    .mh-use-cases { background: var(--mh-lilac); border-top: 1px solid rgba(104,75,180,0.12); }
2682    .dark .mh-use-cases { background: #030712; border-color: rgba(255,255,255,0.08); }
2683    .mh-examples { background: var(--mh-lilac-soft); border-top: 1px solid rgba(104,75,180,0.12); }
2684    .dark .mh-examples { background: linear-gradient(180deg, #1e1b4b 0%, #111827 100%); border-color: rgba(255,255,255,0.08); }
2685
2686    .mh-feature-stack { display: flex; flex-direction: column; gap: 0; margin-top: 2.5rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
2687    .mh-feature-row {
2688      display: grid;
2689      gap: 1.75rem;
2690      align-items: center;
2691      padding: 2.25rem 0;
2692      border-bottom: 1px solid rgba(104,75,180,0.14);
2693    }
2694    .dark .mh-feature-row { border-color: rgba(255,255,255,0.08); }
2695    .mh-feature-row:last-child { border-bottom: 0; }
2696    @media (min-width: 900px) {
2697      .mh-feature-row { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 2.5rem;
2697 padding: 2.75rem 0; }
2698      .mh-feature-row--flip .mh-feature-copy { order: 2; }
2699      .mh-feature-row--flip .mh-feature-preview { order: 1; }
2700    }
2701    .mh-feature-row--link { text-decoration: none; color: inherit; transition: background 0.15s; border-radius: 12px; margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
2702    .mh-feature-row--link:hover { background: rgba(111,53,245,0.05); }
2703    .mh-feature-row--link:hover .mh-feature-title { color: var(--mh-purple); }
2704    .mh-feature-icon {
2705      width: 3rem; height: 3rem; border-radius: 14px;
2706      background: linear-gradient(135deg, #8d47ff, #6232e7); color: #fff;
2707      display: grid; place-items: center;
2708      box-shadow: 0.18rem 0.18rem 0 var(--mh-purple-deep);
2709      transform: rotate(-4deg);
2710      transition: transform 150ms ease-out;
2711    }
2712    .mh-feature-row:hover .mh-feature-icon { transform: rotate(4deg); }
2713    .mh-feature-title { margin: 0; font-family: var(--mh-display); font-size: 1.45rem; font-weight: 700; color: var(--mh-ink); letter-spacing: 0; }
2714    .dark .mh-feature-title { color: #fff; }
2715    .mh-feature-row .mh-feature-icon + .mh-feature-title { margin-top: 1rem; }
2716    .mh-feature-desc { margin: 0.65rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--mh-muted); max-width: 32rem; }
2717    .dark .mh-feature-desc { color: #94a3b8; }
2718    .mh-feature-cta { display: inline-block; margin-top: 0.85rem; font-size: 0.875rem; font-weight: 800; color: var(--mh-purple); text-decoration: none; }
2719    .mh-feature-preview { min-width: 0; }
2720    .mh-feature-preview .mh-browser { transform: none; }
2721
2722    .mh-ecosystem { padding: 5.4rem 0; background: #fff; border-top: 1px solid rgba(104,75,180,0.12); }
2723    .dark .mh-ecosystem { background: #111827; border-color: rgba(255,255,255,0.1); }
2724    .mh-bento { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
2725    @media (min-width: 768px) { .mh-bento { grid-template-columns: repeat(2, 1fr); } }
2726    @media (min-width: 1100px) { .mh-bento { grid-template-columns: repeat(3, 1fr); } }
2727    .mh-bento-item { margin: 0; border-radius: 20px; overflow: hidden; border: 2px solid rgba(104,75,180,0.18); background: var(--mh-lilac-soft); box-shadow: 0.3rem 0.3rem 0 rgba(111,53,245,0.16); transition: transform 150ms ease-out, box-shadow 150ms ease-out; }
2728    .mh-bento-item:hover { transform: translate(-3px, -3px) rotate(-0.4deg); box-shadow: 0.5rem 0.5rem 0 rgba(111,53,245,0.22); }
2729    .dark .mh-bento-item { border-color: rgba(255,255,255,0.1); background: #1e293b; }
2730    @media (min-width: 768px) { .mh-bento-item--wide { grid-column: span 2; } }
2731    @media (min-width: 1100px) { .mh-bento-item--wide { grid-column: span 2; } }
2732    .mh-bento-cap { display: flex; flex-direction: column; gap: 4px; padding: 1rem 1.15rem 0.5rem; font-size: 0.8125rem; color: var(--mh-muted); }
2733    .mh-bento-cap strong { font-size: 0.9375rem; color: var(--mh-ink); }
2734    .dark .mh-bento-cap strong { color: #fff; }
2735    .mh-bento-preview { padding: 0 12px 12px; }
2736    .mh-bento-preview .mh-browser { transform: none; }
2737
2738    .mh-final-cta {
2739      padding: 5.5rem 0;
2740      background: linear-gradient(135deg, #9e45e8 0%, #5c45f6 100%);
2741      border-top: 1px solid rgba(104,75,180,0.12);
2742    }
2743    .mh-final-cta-title {
2744      margin: 0;
2745      color: #fff;
2746      font-family: var(--mh-display);
2747      font-size: clamp(2.3rem, 4.5vw, 3.7rem);
2748      font-weight: 800;
2749      line-height: 1.04;
2750      text-shadow:
2751        0.04em 0.04em 0 var(--mh-purple-bright),
2752        0.08em 0.08em 0 var(--mh-purple-deep);
2753    }
2754
2755  </style>
2756  <style>
2757    .chrome-extension-promo { padding: 2rem 1.5rem; background: #eff6ff; border-block: 1px solid #bfdbfe; }
2758    .chrome-extension-promo-inner { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
2759    .chrome-extension-promo-copy { display: flex; align-items: center; gap: 1rem; min-width: 0; }
2760    .chrome-extension-promo-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 0.75rem; background: #2563eb; color: #fff; }
2761    .chrome-extension-promo-icon svg { width: 1.5rem; height: 1.5rem; }
2762    .chrome-extension-promo h2 { margin: 0; color: #0f172a; font-size: 1.125rem; line-height: 1.35; font-weight: 800; text-wrap: balance; }
2763    .chrome-extension-promo p { margin: 0.3rem 0 0; max-width: 44rem; color: #475569; font-size: 0.9rem; line-height: 1.55; text-wrap: pretty; }
2764    .chrome-extension-promo-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 0 0 auto; min-height: 2.75rem; padding: 0 1rem; border-radius: 0.625rem; background: #2563eb; color: #fff; font-size: 0.875rem; font-weight: 750; text-decoration: none; }
2765    .chrome-extension-promo-cta:hover { background: #1d4ed8; }
2766    .chrome-extension-promo-cta:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
2767    @media (max-width: 700px) {
2768      .chrome-extension-promo-inner { align-items: stretch; flex-direction: column; gap: 1rem; }
2769      .chrome-extension-promo-cta { width: 100%; }
2770    }
2771  </style>
2772  <style>
2773    .mp-demo { --mp-ink:#111827; --mp-muted:#64748b; --mp-line:#e2e8f0; width:100%; margin:0; color:var(--mp-ink); font:500 10px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-align:left; }
2774    .mp-demo * { box-sizing:border-box; }
2775    .mp-demo button { font:inherit; }
2776    .mp-demo-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; color:rgba(255,255,255,.88); font-size:11px; font-weight:750; }
2777    .mp-demo-caption > span { display:flex; align-items:center; gap:7px; }
2778    .mp-demo-caption > span i { width:7px; height:7px; border-radius:999px; background:#86efac; box-shadow:0 0 0 4px rgba(134,239,172,.16); animation:mp-live 1.8s ease-in-out infinite; }
2779    .mp-zoom-button { border:0; padding:4px 0; background:transparent; color:inherit; cursor:pointer; font-weight:750; }
2780    .mp-zoom-button b { display:inline-block; margin-left:3px; transition:transform .2s ease; }
2781    .mp-zoom-button:hover b { transform:translate(2px,-2px); }
2782    .mp-browser { overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:18px; background:#fff; box-shadow:0 30px 70px rgba(17,7,50,.38); transform:translateZ(0); transition:transform .35s ease,box-shadow .35s ease; }
2783    .mp-demo.is-zoomed .mp-browser { transform:scale(1.06); box-shadow:0 38px 90px rgba(17,7,50,.48); }
2784    .mp-browser-bar { height:26px; display:flex; align-items:center; gap:8px; padding:0 9px; border-bottom:1px solid #dbe3ef; background:#f8fafc; }
2785    .mp-browser-dots { display:flex; gap:4px; }
2786    .mp-browser-dots i { width:6px; height:6px; border-radius:50%; background:#f87171; }
2787    .mp-browser-dots i:nth-child(2){background:#fbbf24}.mp-browser-dots i:nth-child(3){background:#4ade80}
2788    .mp-browser-url { flex:1; max-width:230px; margin:auto; padding:3px 10px; border:1px solid #ddd3fa; border-radius:999px; background:#fff; color:#64748b; text-align:center; font-size:8px; }
2789    .mp-browser-lock { width:20px;
2789 color:#94a3b8; text-align:right; }
2790    .mp-browser-viewport { position:relative; height:318px; overflow:hidden; background:#f4f6f8; }
2791    .mp-pane { position:absolute; inset:0; opacity:0; pointer-events:none; transform:translateY(8px) scale(.995); transition:opacity .28s ease,transform .32s ease; }
2792    .mp-demo[data-active="record"] [data-demo-pane="record"],.mp-demo[data-active="studio"] [data-demo-pane="studio"],.mp-demo[data-active="share"] [data-demo-pane="share"],.mp-demo[data-active="analytics"] [data-demo-pane="analytics"] { opacity:1; pointer-events:auto; transform:none; }
2793    .mp-appbar,.mp-studio-topbar,.mp-share-brand { height:36px; display:flex; align-items:center; gap:12px; padding:0 13px; border-bottom:1px solid var(--mp-line); background:#fff; }
2794    .mp-wordmark { color:#5b35e8; font-size:12px; font-weight:850; letter-spacing:-.03em; }
2795    .mp-appbar-title { flex:1; padding-left:11px; border-left:1px solid var(--mp-line); color:#334155; }
2796    .mp-appbar-action { color:#475569; font-weight:700; }
2797    .mp-record-layout { display:grid; grid-template-columns:145px minmax(0,1fr); height:282px; }
2798    .mp-record-setup { display:flex; flex-direction:column; gap:8px; padding:14px 12px; border-right:1px solid var(--mp-line); background:#fff; }
2799    .mp-kicker { color:#64748b; font-size:8px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
2800    .mp-record-setup strong { font-size:13px; }
2801    .mp-select-row { display:flex; align-items:center; gap:7px; min-height:31px; padding:0 8px; border:1px solid #dbe3ef; border-radius:7px; background:#fff; color:#334155; }
2802    .mp-select-row span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mp-select-row b{color:#94a3b8}.mp-device-icon{color:#5b35e8}
2803    .mp-toggle-row { display:flex; align-items:center; justify-content:space-between; color:#475569; }
2804    .mp-toggle-row i { width:22px; height:12px; padding:2px; border-radius:999px; background:#6d4aff; }
2805    .mp-toggle-row i::after { content:""; display:block; width:8px; height:8px; margin-left:10px; border-radius:50%; background:#fff; }
2806    .mp-layout-options { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
2807    .mp-layout-options span { padding:6px 3px; border:1px solid var(--mp-line); border-radius:5px; color:#64748b; text-align:center; font-size:8px; }
2808    .mp-layout-options .is-selected { border-color:#6d4aff; background:#f0edff; color:#5939d9; font-weight:800; }
2809    .mp-record-button { margin-top:auto; min-height:31px; border:0; border-radius:7px; background:#dc2626; color:#fff; font-weight:800; cursor:pointer; }
2810    .mp-record-button i,.mp-rec-badge i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; background:currentColor; }
2811    .mp-record-stage { display:grid; place-items:center; padding:16px; background:#ebeef2; }
2812    .mp-record-canvas { position:relative; width:100%; max-width:390px; aspect-ratio:16/9; overflow:hidden; border:8px solid #171923; border-radius:9px; background:#fff; box-shadow:0 16px 30px rgba(15,23,42,.18); }
2813    .mp-sample-browser { position:absolute; inset:0; overflow:hidden; background:linear-gradient(135deg,#f8fbff 0%,#f3f0ff 60%,#fff 100%); color:#172033; }
2814    .mp-sample-nav { height:21%; display:flex; align-items:center; gap:7%; padding:0 6%; border-bottom:1px solid rgba(15,23,42,.07); font-size:6px; }
2815    .mp-sample-nav b { margin-right:auto; color:#5b35e8; font-size:9px; }.mp-sample-nav em{padding:4px 6px;border-radius:4px;background:#5b35e8;color:#fff;font-style:normal;font-weight:700}
2816    .mp-sample-copy { position:absolute; left:7%; top:31%; display:flex; flex-direction:column; align-items:flex-start; }
2817    .mp-sample-copy small { color:#7257dc; font-size:5px; font-weight:850; letter-spacing:.12em; }.mp-sample-copy strong{margin-top:4px;font-size:15px;line-height:1.02;letter-spacing:-.04em}.mp-sample-copy span{margin-top:5px;color:#687386;font-size:6px}.mp-sample-copy i{width:40px;height:11px;margin-top:8px;border-radius:4px;background:#5b35e8}
2818    .mp-sample-cards { position:absolute; right:6%; bottom:8%; width:39%; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }.mp-sample-cards i{height:48px;border:1px solid #ddd6fe;border-radius:5px;background:linear-gradient(145deg,#fff,#eee9ff)}.mp-sample-cards i:nth-child(2){transform:translateY(-12px)}
2819    .mp-camera-bubble { position:absolute; right:3.5%; bottom:5%; width:18%; aspect-ratio:1; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; background:linear-gradient(145deg,#422a91,#b592ff); box-shadow:0 8px 16px rgba(15,23,42,.3); color:#fff; font-size:9px; font-weight:850; }
2820    .mp-camera-bubble span { display:grid; place-items:center; width:66%; height:66%; border-radius:50%; background:rgba(255,255,255,.17); }
2821    .mp-rec-badge { position:absolute; left:8px; top:8px; padding:4px 6px; border-radius:4px; background:rgba(15,23,42,.78); color:#fff;
2821 font-size:7px; }.mp-rec-badge i{color:#ef4444}
2822    .mp-cursor { position:absolute; left:40%; top:58%; width:0; height:0; border-top:11px solid #111827; border-right:7px solid transparent; filter:drop-shadow(0 1px 1px rgba(255,255,255,.9)); animation:mp-cursor 5.2s cubic-bezier(.4,0,.2,1) infinite; }
2823    .mp-click-ring { position:absolute; left:62%; top:39%; width:24px; height:24px; margin:-12px 0 0 -12px; border:2px solid #7c3aed; border-radius:50%; opacity:0; animation:mp-click 5.2s ease-out infinite; }
2824    .mp-studio-topbar { height:40px; }.mp-studio-topbar .mp-back{color:#64748b}.mp-studio-topbar>div{display:flex;flex:1;flex-direction:column}.mp-studio-topbar>div strong{font-size:10px}.mp-studio-topbar>div span{color:#94a3b8;font-size:7px}.mp-studio-topbar button{border:0;border-radius:5px;padding:6px 10px;background:#4f46e5;color:#fff;font-weight:750}
2825    .mp-pointer-toolbar { height:27px; display:flex; align-items:center; gap:10px; padding:0 11px; border-bottom:1px solid var(--mp-line); background:#f8fafc; color:#64748b; font-size:7px; }.mp-pointer-toolbar b{color:#334155}.mp-pointer-toolbar .is-on{color:#4338ca}
2826    .mp-studio-body { display:grid; grid-template-columns:58px minmax(0,1fr) 130px; height:251px; background:#eef1f4; }
2827    .mp-studio-rail { display:flex; flex-direction:column; gap:2px; padding:8px 5px; border-right:1px solid var(--mp-line); background:#fff; }.mp-studio-rail span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;border-radius:5px;color:#64748b;font-size:7px}.mp-studio-rail b{font-size:11px}.mp-studio-rail .is-active{background:#eeebff;color:#5b35e8;font-weight:800}
2828    .mp-editor-main { min-width:0; display:grid; grid-template-rows:minmax(0,1fr) 22px 66px; padding:9px 10px 0; }
2829    .mp-editor-canvas { min-height:0; display:grid; place-items:center; }.mp-video-scene{position:relative;width:min(100%,310px);aspect-ratio:16/9;overflow:hidden;border:7px solid #25105f;border-radius:8px;background:#fff;box-shadow:0 9px 22px rgba(15,23,42,.15)}
2830    .mp-camera-bubble--studio{width:18%}.mp-cursor--studio{animation-delay:-.6s}.mp-click-ring--studio{animation-delay:-.6s}
2831    .mp-preview-tools { display:flex; align-items:center; gap:7px; color:#64748b; font-size:7px; }.mp-preview-tools i{flex:1}.mp-preview-tools .is-active{padding:3px 6px;border-radius:4px;background:#fff;color:#4338ca;font-weight:800}
2832    .mp-timeline { position:relative; overflow:hidden; border-top:1px solid #d7dde5; background:#f8fafc; }.mp-timeline-ruler{display:flex;justify-content:space-between;padding:4px 6px 2px;color:#94a3b8;font-size:6px}.mp-timeline-track{position:relative;display:flex;gap:2px;height:19px;margin:0 5px}.mp-timeline-track i{flex:1;border-radius:3px;background:linear-gradient(90deg,#7c3aed,#a855f7)}.mp-timeline-track i:nth-child(2){flex:.55}.mp-timeline-track b{position:absolute;left:56%;top:-14px;width:1px;height:46px;background:#ef4444}.mp-timeline-track b::before{content:"";position:absolute;left:-3px;top:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #ef4444}.mp-audio-track{display:flex;align-items:center;gap:1px;height:13px;margin:2px 5px;padding:0 4px;border-radius:2px;background:#ece9fb}.mp-audio-track i{width:9%;height:4px;border-radius:50%;background:#a78bfa}.mp-audio-track i:nth-child(even){height:8px}
2833    .mp-inspector { padding:10px; border-left:1px solid var(--mp-line); background:#fff; }.mp-inspector-head{display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid var(--mp-line);font-size:10px}.mp-inspector>label{display:flex;justify-content:space-between;margin-top:10px;color:#64748b;font-size:7px;font-weight:700}.mp-clip-card{display:flex;align-items:center;gap:6px;margin-top:5px;padding:6px;border:1px solid var(--mp-line);border-radius:6px;background:#f8fafc}.mp-clip-card>i{width:24px;height:18px;border-radius:3px;background:linear-gradient(135deg,#c4b5fd,#8b5cf6)}.mp-clip-card>div{min-width:0;display:flex;flex:1;flex-direction:column}.mp-clip-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
2833font-size:7px}.mp-clip-card span{color:#94a3b8;font-size:6px}.mp-clip-card em{font-style:normal}.mp-on-pill{padding:2px 5px;border-radius:99px;background:#dcfce7;color:#15803d!important}.mp-range{position:relative;height:4px;margin:10px 2px;border-radius:99px;background:#e2e8f0}.mp-range i{display:block;height:100%;border-radius:inherit;background:#6d4aff}.mp-range b{position:absolute;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#6d4aff;box-shadow:0 1px 3px rgba(15,23,42,.3)}.mp-inspector-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:11px}.mp-inspector-actions span{padding:5px 2px;border:1px solid var(--mp-line);border-radius:4px;color:#475569;text-align:center;font-size:7px}
2834    .mp-share { background:linear-gradient(160deg,#f4f7ff,#fff 52%,#f4f1ff); }.mp-share-brand{padding:0 20px}.mp-share-logo{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:linear-gradient(145deg,#5b35e8,#9f7aea);color:#fff;font-weight:900}.mp-share-brand strong{flex:1;font-size:11px}.mp-share-brand nav{display:flex;gap:13px;color:#64748b;font-size:8px}.mp-share-main{width:min(100% - 42px,560px);margin:0 auto;padding:14px 0}.mp-share-copy{text-align:center}.mp-share-copy>span{color:#6d4aff;font-size:6px;font-weight:850;letter-spacing:.12em}.mp-share-copy h3{margin:3px 0 0;font-size:16px;letter-spacing:-.035em}.mp-share-copy p{margin:3px 0 0;color:#64748b;font-size:8px}.mp-share-player{margin-top:10px;padding:7px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;box-shadow:0 14px 28px rgba(15,23,42,.11)}.mp-share-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#111827}.mp-share-screen .mp-sample-browser{inset:0}.mp-camera-bubble--share{width:14%}.mp-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:36px;height:36px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 5px 16px rgba(15,23,42,.28);color:#5b35e8;cursor:pointer}.mp-play span{margin-left:2px}.mp-player-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;height:23px;padding:0 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:6px}.mp-player-controls b{position:absolute;left:8px;right:8px;top:0;height:2px;background:linear-gradient(90deg,#7c3aed 0 38%,rgba(255,255,255,.4) 38%)}.mp-player-controls i{margin-left:auto;font-style:normal}.mp-share-footer{display:flex;align-items:center;gap:10px;margin-top:9px;color:#64748b;font-size:7px}.mp-share-footer b{color:#334155}.mp-share-footer button{margin-left:auto;border:0;border-radius:5px;padding:6px 9px;background:#5b35e8;color:#fff;font-weight:750}.mp-demo.is-video-playing .mp-play{opacity:0;transform:translate(-50%,-50%) scale(.72)}.mp-demo.is-video-playing .mp-share-screen .mp-sample-browser{animation:mp-video-pan 4s ease-in-out infinite alternate}.mp-demo.is-video-playing .mp-player-controls b{animation:mp-progress 5s linear infinite}
2835    .mp-analytics { background:#f6f8fb; }.mp-analytics-bar nav{display:flex;align-self:stretch;gap:4px}.mp-analytics-bar nav span{display:flex;align-items:center;padding:0 8px;color:#64748b}.mp-analytics-bar nav .is-active{border-bottom:2px solid #5b35e8;color:#4338ca;font-weight:800}.mp-avatar{display:grid;place-items:center;width:21px;height:21px;margin-left:auto;border-radius:50%;background:#ede9fe;color:#5b35e8;font-size:7px;font-weight:850}.mp-analytics-main{padding:14px 16px}.mp-analytics-heading{display:flex;align-items:flex-end;justify-content:space-between}.mp-analytics-heading span{color:#6d4aff;font-size:6px;font-weight:850;letter-spacing:.12em}.mp-analytics-heading h3{margin:2px 0 0;font-size:14px}.mp-analytics-heading button{border:1px solid var(--mp-line);border-radius:5px;padding:5px 7px;background:#fff;color:#475569}.mp-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.mp-metrics article{display:flex;flex-direction:column;padding:8px;border:1px solid var(--mp-line);border-radius:7px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.03)}.mp-metrics span{color:#64748b;font-size:6px;font-weight:800;text-transform:uppercase}.mp-metrics b{margin-top:2px;font-size:15px}.mp-metrics em{color:#15803d;font-size:6px;font-style:normal}.mp-chart-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(100px,.7fr);gap:7px;margin-top:7px}.mp-chart-card,.mp-watch-card{height:159px;padding:9px;border:1px solid var(--mp-line);border-radius:7px;background:#fff}.mp-chart-card header{display:flex;justify-content:space-between}.mp-chart-card header div{display:flex;flex-direction:column}.mp-chart-card header span{font-size:8px;font-weight:800}.mp-chart-card header b{color:#94a3b8;font-size:6px}.mp-chart-card header em{color:#6d4aff;
2835font-size:7px;font-style:normal}.mp-bars{height:91px;display:flex;align-items:end;gap:4px;padding:9px 5px 0;border-bottom:1px solid #e2e8f0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#f1f5f9 30px)}.mp-bars i{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:linear-gradient(#9f7aea,#6d4aff);transform-origin:bottom;animation:mp-bars 1.1s ease-out both}.mp-bars i:nth-child(2n){animation-delay:.08s}.mp-chart-card footer{display:flex;justify-content:space-between;padding-top:4px;color:#94a3b8;font-size:5px}.mp-watch-card{display:flex;flex-direction:column;align-items:center;text-align:center}.mp-watch-card>span{align-self:flex-start;color:#64748b;font-size:6px;font-weight:850;letter-spacing:.08em}.mp-watch-card>b{align-self:flex-start;margin-top:2px;font-size:8px}.mp-watch-ring{width:66px;height:66px;display:grid;place-content:center;margin:10px 0 4px;border-radius:50%;background:radial-gradient(circle,#fff 55%,transparent 57%),conic-gradient(#6d4aff 0 68%,#ede9fe 68%)}.mp-watch-ring strong{font-size:13px}.mp-watch-ring span{color:#94a3b8;font-size:6px}.mp-watch-card p{margin:auto 0 0;color:#64748b;font-size:6px}
2836    .mp-tour-controls { display:flex; align-items:center; gap:8px; margin-top:10px; }
2837    .mp-tour-tabs { flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
2838    .mp-tour-tab,.mp-tour-play { min-height:29px; border:1px solid rgba(255,255,255,.24); border-radius:7px; background:rgba(20,8,58,.24); color:rgba(255,255,255,.72); cursor:pointer; transition:background .18s ease,color .18s ease,border-color .18s ease; }
2839    .mp-tour-tab { display:flex; align-items:center; justify-content:center; gap:6px; font-size:9px; font-weight:750; }.mp-tour-tab:hover,.mp-tour-tab.is-active{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.16);color:#fff}.mp-tour-tab-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.mp-tour-tab.is-active .mp-tour-tab-dot{background:#86efac;box-shadow:0 0 0 3px rgba(134,239,172,.13)}
2840    .mp-tour-play { width:31px; flex:0 0 31px; }.mp-tour-play .mp-play-icon{display:none}.mp-demo[data-playing="false"] .mp-tour-play .mp-pause-icon{display:none}.mp-demo[data-playing="false"] .mp-tour-play .mp-play-icon{display:inline}
2841    .mp-demo--compact .mp-browser-viewport{height:280px}.mp-demo--compact{font-size:9px}.mp-demo--compact .mp-demo-caption{color:#475569}.mp-demo--compact .mp-tour-tab,.mp-demo--compact .mp-tour-play{border-color:#d9d4e8;background:#fff;color:#655f76}.mp-demo--compact .mp-tour-tab:hover,.mp-demo--compact .mp-tour-tab.is-active{border-color:#8b5cf6;background:#f2eeff;color:#5b35e8}.mp-demo--compact .mp-tour-tab.is-active .mp-tour-tab-dot{background:#6d4aff;box-shadow:0 0 0 3px rgba(109,74,255,.13)}
2842    @keyframes mp-live{50%{opacity:.5;box-shadow:0 0 0 7px rgba(134,239,172,0)}}
2843    @keyframes mp-cursor{0%,16%{left:36%;top:68%}35%,54%{left:63%;top:42%}72%,100%{left:77%;top:67%}}
2844    @keyframes mp-click{0%,31%,100%{opacity:0;transform:scale(.3)}36%{opacity:.85;transform:scale(.45)}48%{opacity:0;transform:scale(1.45)}}
2845    @keyframes mp-video-pan{to{transform:scale(1.14) translate(-3%,-2%)}}
2846    @keyframes mp-progress{from{background:linear-gradient(90deg,#7c3aed 0 5%,rgba(255,255,255,.4) 5%)}to{background:linear-gradient(90deg,#7c3aed 0 92%,rgba(255,255,255,.4) 92%)}}
2847    @keyframes mp-bars{from{transform:scaleY(.08);opacity:.3}}
2848    @media (max-width:760px){.mp-browser-viewport{height:292px}.mp-record-layout{grid-template-columns:112px minmax(0,1fr);height:256px}
2848.mp-record-setup{padding:10px 8px}.mp-studio-body{grid-template-columns:48px minmax(0,1fr);height:225px}.mp-inspector{display:none}.mp-pointer-toolbar span:nth-of-type(3){display:none}.mp-share-main{width:min(100% - 24px,520px)}.mp-metrics{grid-template-columns:repeat(2,1fr)}.mp-metrics article:nth-child(n+3){display:none}.mp-chart-grid{grid-template-columns:1fr}.mp-watch-card{display:none}.mp-demo--compact .mp-browser-viewport{height:260px}}
2849    @media (max-width:480px){.mp-demo-caption{font-size:9px}.mp-browser-viewport{height:244px}.mp-browser-bar{height:22px}.mp-record-layout{grid-template-columns:88px minmax(0,1fr);height:222px}.mp-record-setup{gap:5px}.mp-record-setup strong{font-size:9px}.mp-select-row{min-height:25px;padding:0 5px;font-size:7px}.mp-layout-options{grid-template-columns:1fr}.mp-layout-options span:last-child{display:none}.mp-record-button{min-height:27px;font-size:7px}.mp-record-stage{padding:8px}.mp-pointer-toolbar{height:22px;gap:5px}.mp-studio-topbar{height:34px}.mp-studio-body{grid-template-columns:38px minmax(0,1fr);height:188px}.mp-studio-rail{padding:4px 2px}.mp-studio-rail span{font-size:5px;padding:3px 1px}.mp-studio-rail span:nth-child(n+4){display:none}.mp-editor-main{grid-template-rows:minmax(0,1fr) 17px 50px;padding:5px 5px 0}.mp-share-brand{height:30px;padding:0 10px}.mp-share-main{padding:9px 0}.mp-share-copy p{display:none}.mp-share-player{margin-top:6px}.mp-share-footer{margin-top:5px}.mp-analytics-main{padding:8px}.mp-analytics-heading h3{font-size:11px}.mp-metrics{margin-top:6px}.mp-chart-grid{margin-top:5px}.mp-chart-card{height:125px}.mp-bars{height:72px}.mp-tour-tab{font-size:7px;gap:3px}.mp-tour-controls{margin-top:7px}.mp-demo.is-zoomed .mp-browser{transform:scale(1.025)}}
2850    @media (prefers-reduced-motion:reduce){.mp-demo-caption>span i,.mp-cursor,.mp-click-ring,.mp-bars i,.mp-demo.is-video-playing .mp-share-screen .mp-sample-browser,.mp-demo.is-video-playing .mp-player-controls b{animation:none!important}.mp-pane,.mp-browser{transition:none!important}}
2851  </style>
2852  <style>
2853    .mk-motion-ready [data-mk-reveal] {
2854      transform: translateY(18px);
2855      opacity: 0;
2856    }
2857    .mk-motion-ready [data-mk-reveal] {
2858      will-change: transform, opacity;
2859    }
2860    [data-mk-reveal].is-visible {
2861      transform: none;
2862      opacity: 1;
2863      transition: transform 620ms cubic-bezier(.2,.7,.2,1), opacity 620ms ease;
2864    }
2865    [data-mk-parallax] {
2866      will-change: transform;
2867    }
2868    
2869    .mh-carousel-shell {
2870      margin-top: 2.5rem;
2871      overflow: hidden;
2872    }
2873    .mh-carousel {
2874      display: flex;
2875      gap: 1.25rem;
2876      overflow-x: auto;
2877      overscroll-behavior-x: contain;
2878      scroll-snap-type: x mandatory;
2879      scrollbar-width: none;
2880      padding: 0.15rem 0.25rem 1rem;
2881    }
2882    .mh-carousel::-webkit-scrollbar {
2883      display: none;
2884    }
2885    .mh-carousel-slide {
2886      flex: 0 0 min(36rem, 86vw);
2887      scroll-snap-align: center;
2888    }
2889    .mh-carousel-slide .mh-feature-row {
2890      height: 100%;
2891      margin: 0;
2892      padding: 1.25rem;
2893      border: 1px solid #e2e8f0;
2894      border-radius: 18px;
2895      background: rgba(255,255,255,0.9);
2896      box-shadow: 0 18px 45px rgba(15,23,42,0.08);
2897    }
2898    .dark .mh-carousel-slide .mh-feature-row {
2899      border-color: rgba(255,255,255,0.1);
2900      background: rgba(15,23,42,0.62);
2901      box-shadow: 0 18px 45px rgba(0,0,0,0.24);
2902    }
2903    @media (min-width: 900px) {
2904      .mh-carousel-slide {
2905        flex-basis: min(52rem, 78vw);
2906      }
2907    }
2908    @media (prefers-reduced-motion: reduce) {
2909      [data-mk-reveal],
2910      [data-mk-reveal].is-visible,
2911      [data-mk-parallax] {
2912        transform: none !important;
2913        opacity: 1 !important;
2914        transition: none !important;
2915        will-change: auto !important;
2916      }
2917      .mh-carousel { scroll-behavior: auto; }
2918    }
2919  </style>
2920  <style>
2921    .account-modal {
2922      position: fixed;
2923      inset: 0;
2924      z-index: 200;
2925      display: flex;
2926      align-items: center;
2927      justify-content: center;
2928      padding: 20px;
2929    }
2930    .account-modal[hidden] { display: none !important; }
2931    .account-modal-backdrop {
2932      position: absolute;
2933      inset: 0;
2934      background: rgba(15, 23, 42, 0.28);
2935      backdrop-filter: blur(14px) saturate(1.2);
2936      -webkit-backdrop-filter: blur(14px) saturate(1.2);
2937    }
2938    .account-modal-panel {
2939      position: relative;
2940      z-index: 1;
2941      width: min(440px, 100%);
2942      max-height: min(90vh, 520px);
2943      overflow: auto;
2944      border-radius: var(--radius-lg);
2945      border: 1px solid rgba(255, 255, 255, 0.65);
2946      background: rgba(255, 255, 255, 0.78);
2947      backdrop-filter: blur(24px) saturate(1.4);
2948      -webkit-backdrop-filter: blur(24px) saturate(1.4);
2949      box-shadow: 0 28px 60px rgba(15, 23, 42, 0.22);
2950      padding: 28px 24px 24px;
2951    }
2952    .account-modal-close {
2953      position: absolute;
2954      top: 14px;
2955      right: 14px;
2956      display: grid;
2957      place-items: center;
2958      width: 36px;
2959      height: 36px;
2960      border: 0;
2961      border-radius: var(--radius-sm);
2962      background: rgba(255, 255, 255, 0.55);
2963      color: #475569;
2964      cursor: pointer;
2965    }
2966    .account-modal-close:hover { background: rgba(255, 255, 255, 0.9); color: #0f172a; }
2967    .account-modal-title { margin: 0 2rem 0 0; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
2968    .account-modal-desc { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.5; color: #475569; }
2969    .account-modal-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
2970    .account-email-step { display: flex; flex-direction: column; gap: 14px; }
2971    .account-modal-fields { display: flex; flex-direction: column; gap: 12px; }
2972    .account-name-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
2973    .account-modal-input {
2974      width: 100%;
2975      border-radius: var(--radius-sm);
2976      border: 1px solid rgba(203, 213, 225, 0.9);
2977      background: rgba(255, 255, 255, 0.72);
2978      padding: 11px 12px;
2979      font-size: 0.9rem;
2980      color: #1e293b;
2981      outline: none;
2982    }
2983    .account-modal-input::placeholder { color: #94a3b8; }
2984    .account-modal-input:focus {
2985      border-color: #6366f1;
2986      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
2987    }
2988    .account-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
2989    .account-modal-btn-primary {
2990      border: 0;
2991      border-radius: var(--radius-sm);
2992      padding: 10px 16px;
2993      font-size: 0.9rem;
2994      font-weight: 600;
2995      background: #4f46e5;
2996      color: #fff;
2997      cursor: pointer;
2998    }
2999    .account-modal-btn-primary:hover { background: #4338ca; }
3000    .account-modal-btn-secondary {
3001      border: 1px solid #c7d2fe;
3002      border-radius: var(--radius-sm);
3003      padding: 10px 16px;
3004      font-size: 0.9rem;
3005      font-weight: 600;
3006      background: rgba(255, 255, 255, 0.7);
3007      color: #4338ca;
3008      cursor: pointer;
3009    }
3010    .account-modal-btn-secondary:hover { background: #eef2ff; }
3011    .account-modal-status { margin: 0; min-height: 1.2em; font-size: 0.88rem; color: #64748b; }
3012    @media (max-width: 520px) {
3013      .account-name-grid { grid-template-columns: 1fr; }
3014    }
3015  </style>
3016</head>
3017<body class="mh-home-page min-h-screen flex flex-col bg-white">
3018<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 3018-3019
3018
3019<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
3019GTM-T9RTK9DP
vendor: 83 bytes, lines 3019-3020
3019"
3020height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
3021<!-- End Google Tag Manager (noscript) -->
3022  <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">
3023  <div class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-6 py-6 lg:px-8" data-slot="sidebar">
3024    <div class="nav-sidebar-header">
3025      <a id="navLogoLink" class="text-lg font-extrabold tracking-tight text-gray-900 dark:text-white" href="/">VideoM8</a>
3026    </div>
3027    <button type="button" id="navMobileMenuBtn" class="nav-mobile-trigger" aria-label="Open navigation" aria-expanded="false" aria-controls="navPrimaryLinks">
3028      <span class="nav-mobile-trigger-lines" aria-hidden="true"></span>
3029    </button>
3030    <ul id="navPrimaryLinks" class="flex flex-wrap items-center justify-end gap-4 text-sm font-semibold sm:gap-5">
3031      <li id="navSolutionsLink" class="nav-marketing-menu">
3032        <details class="nav-marketing-dropdown">
3033          <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>
3034          <div class="nav-marketing-panel ">
3035            <div class="nav-marketing-panel-grid">
3036              <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>
3037            </div>
3038          </div>
3039        </details>
3040      </li><li id="navTemplatesLink" class="nav-marketing-menu">
3041        <details class="nav-marketing-dropdown">
3042          <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>
3043          <div class="nav-marketing-panel ">
3044            <div class="nav-marketing-panel-grid">
3045              <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">
3045Client 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>
3046            </div>
3047          </div>
3048        </details>
3049      </li><li id="navResourcesLink" class="nav-marketing-menu">
3050        <details class="nav-marketing-dropdown">
3051          <summary class="nav-marketing-summary">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>
3052          <div class="nav-marketing-panel nav-marketing-panel--compact">
3053            <div class="nav-marketing-panel-grid nav-marketing-panel-grid--two">
3054              <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=""><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>
3055            </div>
3056          </div>
3057        </details>
3058      </li>
3059	      <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>
3060	      <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>
3061      <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>
3062      <li id="navPricingLink" class="pro-upsell-only"><a class="text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white" href="/pricing">Pricing</a></li>
3063      <li id="navAuthGuest" class="flex items-center gap-2 sm:gap-3">
3064        <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>
3065        <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>
3066      </li>
3067	      <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>
3068	      <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>
3069	      <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>
3070	      <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>
3071	      <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>
3072      <li id="navAuthSignedIn" class="hidden list-none">
3073        <div class="nav-profile-menu">
3074          <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">
3075            <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>
3076            <img id="navProfileAvatarImg" class="nav-profile-avatar-inner hidden" alt="">
3077            <span id="navPlanBadge" class="nav-plan-badge hidden">Pro</span>
3078          </button>
3079          <div id="navProfileDropdown" class="nav-profile-dropdown" role="menu" hidden>
3080              <div class="px-3 py-2" role="none">
3081                <label for="navWorkspaceSelect" class="block text-xs font-semibold text-gray-500">Workspace</label>
3082                <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">
3083                  <option value="personal">Personal workspace</option>
3084                </select>
3085                <div id="navWorkspaceRole" class="mt-1 text-xs text-gray-500" aria-live="polite"></div>
3086              </div>
3087              <hr class="nav-menu-divider" aria-hidden="true">
3088	            <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>
3089	            <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>
3090	            <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>
3091	            <a id="navActivityLink" href="/activity" class="nav-activity-wrap hidden" role="menuitem">
3092	              <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>
3093	              <span id="navActivityBadge" class="nav-activity-badge" hidden aria-hidden="true"></span>
3094	            </a>
3095	            <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>
3096	            <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>
3097	            <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>
3098            <hr class="nav-menu-divider" aria-hidden="true">
3099            <button type="button" data-nav-signout role="menuitem" class="nav-menu-signout">Sign out</button>
3100          </div>
3101        </div>
3102      </li>
3103    </ul>
3104  </div>
3105</nav>
3106<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>
3107<div id="navLoggedInTopbar" class="nav-logged-in-topbar" data-slot="sidebar-inset" aria-label="Page toolbar">
3108  <div class="nav-page-context">
3109    <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
3109-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>
3110    <span class="nav-page-separator" data-slot="separator" aria-hidden="true"></span>
3111    <nav class="nav-page-breadcrumb" data-slot="breadcrumb" aria-label="Breadcrumb">
3112      <ol>
3113        <li><a href="/library">Workspace</a></li>
3114        <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>
3115        <li aria-current="page">Workspace</li>
3116      </ol>
3117    </nav>
3118  </div>
3119  <form class="nav-logged-in-search" role="search" data-open-cmdk-form data-open-cmdk>
3120    <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>
3121    <input type="search" placeholder="Search or jump..." aria-label="Search pages and links" autocomplete="off" readonly data-open-cmdk-input>
3122    <kbd>⌘K</kbd>
3123  </form>
3124  <ul class="nav-topbar-actions">
3125    <li><a href="/upload" class="nav-topbar-action nav-topbar-action--secondary">Upload</a></li>
3126    <li><a href="/record" class="nav-topbar-action nav-topbar-action--primary">Record</a></li>
3127  </ul>
3128  
3129  <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">
3130    <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>
3131    <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>
3132    <span class="sr-only">Toggle dark mode</span>
3133  </button>
3134</div>
3135  <main class="flex-1">
3136    <section class="mh-hero">
3137    <div class="mh-hero-shade" aria-hidden="true"></div>
3138    <div class="relative mx-auto min-h-[calc(100svh-82px)] max-w-7xl px-6 py-20 sm:px-8 lg:px-10" data-mk-parallax="-5">
3139      <div class="mh-hero-inner" data-mk-reveal>
3140        <div class="mh-hero-copy">
3141          <h1 class="text-balance"><span class="mh-hero-word">Press</span> <span class="mh-hero-word mh-hero-word--pop">record,</span><br>share <span class="mh-hero-word mh-hero-word--tilt">everywhere</span></h1>
3142          <p class="text-pretty">Record, edit and share polished video pages without slowing down your day.</p>
3143          <a href="/record" class="mh-hero-cta" data-aha-cta="hero_record">Let’s hit record</a>
3144        </div>
3145        <div class="mh-hero-art">
3146          <figure class="mp-demo mp-demo--hero" data-product-demo data-active="record" data-playing="true">
3147    <figcaption class="mp-demo-caption">
3148      <span><i aria-hidden="true"></i> Interactive product tour</span>
3149      <button type="button" class="mp-zoom-button" data-demo-zoom aria-label="Zoom product preview" aria-pressed="false">Zoom UI <b>↗</b></button>
3150    </figcaption>
3151    <div class="mp-browser">
3152      <div class="mp-browser-bar"><span class="mp-browser-dots"><i></i><i></i><i></i></span><span class="mp-browser-url">videom8.com</span><span class="mp-browser-lock">⌕</span></div>
3153      <div class="mp-browser-viewport">
3154        <section class="mp-pane mp-record" data-demo-pane="record" aria-label="Recorder preview">
3155    <header class="mp-appbar">
3156      <span class="mp-wordmark">microsite</span>
3157      <span class="mp-appbar-title">New recording</span>
3158      <span class="mp-appbar-action">Library</span>
3159    </header>
3160    <div class="mp-record-layout">
3161      <aside class="mp-record-setup">
3162        <span class="mp-kicker">Recording setup</span>
3163        <strong>Screen + camera</strong>
3164        <div class="mp-select-row"><span class="mp-device-icon">▣</span><span>Entire screen</span><b>⌄</b></div>
3165        <div class="mp-select-row"><span class="mp-device-icon">●</span><span>FaceTime Camera</span><b>⌄</b></div>
3166        <div class="mp-toggle-row"><span>Microphone</span><i></i></div>
3167        <div class="mp-layout-options"><span class="is-selected">Bubble</span><span>Side by side</span></div>
3168        <button type="button" class="mp-record-button"><i></i> Start recording</button>
3169      </aside>
3170      <div class="mp-record-stage">
3171        <div class="mp-record-canvas">
3172          <div class="mp-sample-browser">
3173            <div class="mp-sample-nav"><b>Northstar</b><span>Product</span><span>Customers</span><em>Book a demo</em></div>
3174            <div class="mp-sample-copy"><small>WORKFLOW AUTOMATION</small><strong>Move work forward,<br>without the busywork.</strong><span>One calm place to plan, automate, and deliver.</span><i></i></div>
3175            <div class="mp-sample-cards"><i></i><i></i><i></i></div>
3176          </div>
3177          <span class="mp-camera-bubble"><span>LB</span></span>
3178          <span class="mp-cursor" aria-hidden="true"></span>
3179          <span class="mp-click-ring" aria-hidden="true"></span>
3180          <span class="mp-rec-badge"><i></i> Ready</span>
3181        </div>
3182      </div>
3183    </div>
3184  </section>
3185        <section class="mp-pane mp-studio" data-demo-pane="studio" aria-label="Studio editor preview">
3186    <header class="mp-studio-topbar">
3187      <span class="mp-back">← Library</span>
3188      <div><strong>Product walkthrough</strong><span>videom8.com/v/product-walkthrough</span></div>
3189      <button type="button">Share</button>
3190    </header>
3191    <div class="mp-pointer-toolbar"><b>Post-edit</b><span class="is-on">✓ Click highlights</span><span class="is-on">✓ Cursor zoom</span><span>○ Spotlight</span></div>
3192    <div class="mp-studio-body">
3193      <nav class="mp-studio-rail" aria-label="Editor tools">
3194        <span class="is-active"><b>✦</b>Edit</span><span><b>▣</b>Layout</span><span><b>T</b>Page</span><span><b>↗</b>CTA</span><span><b>☷</b>Captions</span>
3195      </nav>
3196      <div class="mp-editor-main">
3197        <div class="mp-editor-canvas">
3198          <div class="mp-video-scene">
3199            <div class="mp-sample-browser">
3200              <div class="mp-sample-nav"><b>Northstar</b><span>Product</span><span>Customers</span><em>Book a demo</em></div>
3201              <div class="mp-sample-copy"><small>WORKFLOW AUTOMATION</small><strong>Move work forward,<br>without the busywork.</strong><span>One calm place to plan, automate, and deliver.</span><i></i></div>
3202              <div class="mp-sample-cards"><i></i><i></i><i></i></div>
3203            </div>
3204            <span class="mp-camera-bubble mp-camera-bubble--studio"><span>LB</span></span>
3205            <span class="mp-cursor mp-cursor--studio" aria-hidden="true"></span>
3206            <span class="mp-click-ring mp-click-ring--studio" aria-hidden="true"></span>
3207          </div>
3208        </div>
3209        <div class="mp-preview-tools"><span class="is-active">Fit</span><span>Fill</span><span>Actual</span><i></i><span>▢ Safe area</span></div>
3210        <div class="mp-timeline">
3211          <div class="mp-timeline-ruler"><span>0:00</span><span>0:20</span><span>0:40</span><span>1:00</span></div>
3212          <div class="mp-timeline-track"><i></i><i></i><i></i><b></b></div>
3213          <div class="mp-audio-track"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
3214        </div>
3215      </div>
3216      <aside class="mp-inspector">
3217        <div class="mp-inspector-head"><b>Edit video</b><span>×</span></div>
3218        <label>Timeline <span>1:08</span></label>
3219        <div class="mp-clip-card"><i></i><div><b>Product walkthrough</b><span>00:00 — 01:08</span></div><em>•••</em></div>
3220        <label>Click zoom <span class="mp-on-pill">On</span></label>
3221        <div class="mp-range"><i style="width:68%"></i><b style="left:68%"></b></div>
3222        <div class="mp-inspector-actions"><span>Split</span><span>Trim</span><span>Speed</span></div>
3223      </aside>
3224    </div>
3225  </section>
3226        <section class="mp-pane mp-share" data-demo-pane="share" aria-label="Published video page preview">
3227    <header class="mp-share-brand"><span class="mp-share-logo">N</span><strong>Northstar</strong><nav><span>Work</span><span>About</span></nav></header>
3228    <main class="mp-share-main">
3229      <div class="mp-share-copy"><span>VIDEO WALKTHROUGH</span><h3>Product walkthrough</h3><p>A quick walkthrough with everything you need for the next step.</p></div>
3230      <div class="mp-share-player">
3231        <div class="mp-share-screen">
3232          <div class="mp-sample-browser">
3233            <div class="mp-sample-nav"><b>Northstar</b><span>Product</span><span>Customers</span><em>Book a demo</em></div>
3234            <div class="mp-sample-copy"><small>WORKFLOW AUTOMATION</small><strong>Move work forward.</strong><span>One calm place to plan and deliver.</span><i></i></div>
3235          </div>
3236          <button type="button" class="mp-play" data-demo-video aria-label="Play animated video preview"><span>▶</span></button>
3237          <span class="mp-camera-bubble mp-camera-bubble--share"><span>LB</span></span>
3238          <div class="mp-player-controls"><b></b><span>0:24 / 1:08</span><i>◧</i></div>
3239        </div>
3240      </div>
3241      <div class="mp-share-footer"><span><b>2</b> chapters</span><span><b>3</b> attachments</span><button type="button">Book a demo</button></div>
3242    </main>
3243  </section>
3244        <section class="mp-pane mp-analytics" data-demo-pane="analytics" aria-label="Engagement analytics preview">
3245    <header class="mp-appbar mp-analytics-bar"><span class="mp-wordmark">microsite</span><nav><span>Library</span><span class="is-active">Engagement</span><span>Leads</span></nav><span class="mp-avatar">LB</span></header>
3246    <main class="mp-analytics-main">
3247      <div class="mp-analytics-heading"><div><span>ANALYTICS</span><h3>Product walkthrough</h3></div><button type="button">Last 30 days⌄</button></div>
3248      <div class="mp-metrics">
3249        <article><span>Views</span><b data-demo-counter="847">847</b><em>↑ 18%</em></article>
3250        <article><span>Unique viewers</span><b data-demo-counter="612">612</b><em>↑ 12%</em></article>
3251        <article><span>Average watch</span><b>68%</b><em>+9 points</em></article>
3252        <article><span>Leads</span><b data-demo-counter="24">24</b><em>8 this week</em></article>
3253      </div>
3254      <div class="mp-chart-grid">
3255        <article class="mp-chart-card"><header><div><span>Views over time</span><b>1,024 total plays</b></div><em>Views</em></header><div class="mp-bars"><i style="height:42%"></i><i style="height:58%"></i><i style="height:49%"></i><i style="height:76%"></i><i style="height:64%"></i><i style="height:88%"></i><i style="height:70%"></i><i style="height:94%"></i><i style="height:82%"></i><i style="height:100%"></i><i style="height:74%"></i><i style="height:90%"></i></div><footer><span>Jun 10</span><span>Jun 20</span><span>Jul 1</span><span>Jul 10</span></footer></article>
3256        <article class="mp-watch-card"><span>WATCH INTENSITY</span><b>Viewers stay for the demo</b><div class="mp-watch-ring"><strong>68%</strong><span>avg.</span></div><p>Peak replay at <b>0:37</b></p></article>
3257      </div>
3258    </main>
3259  </section>
3260      </div>
3261    </div>
3262    <div class="mp-tour-controls" role="group" aria-label="Choose product tour step">
3263      <div class="mp-tour-tabs">
3264        <button type="button" class="mp-tour-tab is-active" data-demo-step="record" aria-pressed="true">
3265    <span class="mp-tour-tab-dot" aria-hidden="true"></span>Record
3266  </button>
3267        <button type="button" class="mp-tour-tab" data-demo-step="studio" aria-pressed="false">
3268    <span class="mp-tour-tab-dot" aria-hidden="true"></span>Edit
3269  </button>
3270        <button type="button" class="mp-tour-tab" data-demo-step="share" aria-pressed="false">
3271    <span class="mp-tour-tab-dot" aria-hidden="true"></span>Share
3272  </button>
3273        <button type="button" class="mp-tour-tab" data-demo-step="analytics" aria-pressed="false">
3274    <span class="mp-tour-tab-dot" aria-hidden="true"></span>Measure
3275  </button>
3276      </div>
3277      <button type="button" class="mp-tour-play" data-demo-autoplay aria-label="Pause product tour" aria-pressed="true"><span class="mp-pause-icon">Ⅱ</span><span class="mp-play-icon">▶</span></button>
3278    </div>
3279  </figure>
3280        </div>
3281      </div>
3282    </div>
3283  </section>
3284    <section class="mh-marquee" aria-label="Record it, Trim it, Brand it, Share it, Track it, Love it">
3285    <div class="mh-marquee-track" aria-hidden="true">
3286      <div class="mh-marquee-run"><span class="mh-marquee-word">Record it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Trim it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Brand it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Share it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Track it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Love it</span><span class="mh-marquee-star" aria-hidden="true">✶</span></div>
3287      <div class="mh-marquee-run"><span class="mh-marquee-word">Record it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Trim it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Brand it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Share it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Track it</span><span class="mh-marquee-star" aria-hidden="true">✶</span><span class="mh-marquee-word">Love it</span><span class="mh-marquee-star" aria-hidden="true">✶</span></div>
3288    </div>
3289  </section>
3290    <section class="chrome-extension-promo" aria-labelledby="chromeExtensionPromoTitle">
3291    <div class="chrome-extension-promo-inner">
3292      <div class="chrome-extension-promo-copy">
3293        <span class="chrome-extension-promo-icon" aria-hidden="true"><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-520H140v520Zm0 0v-520 520Z"/></svg></span>
3294        <div>
3295          <h2 id="chromeExtensionPromoTitle">Record from any tab with the microsite Chrome extension</h2>
3296          <p>Start screen and camera recordings in one click, keep controls beside your work, and send the finished link without changing tabs.</p>
3297        </div>
3298      </div>
3299      <a class="chrome-extension-promo-cta" href="/chrome-extension">Get the Chrome extension <span aria-hidden="true">&rarr;</span></a>
3300    </div>
3301  </section>
3302    <section id="product" class="mh-pillars" data-mk-reveal>
3303    <div class="mx-auto max-w-7xl px-6 lg:px-8">
3304      <div class="mx-auto max-w-2xl text-center">
3305        <h2 class="mh-section-eyebrow">Product</h2>
3306        <p class="mh-section-title mh-echo"><span class="mh-echo-main">Video-first, with files when you need them</span><span class="mh-echo-ghost" aria-hidden="true">Video-first, with files when you need them</span><span class="mh-echo-ghost mh-echo-ghost--2" aria-hidden="true">Video-first, with files when you need them</span></p>
3307        <p class="mh-section-blurb">Record walkthroughs, publish branded pages, and attach collections or microsites—each row mirrors what viewers see on your share links.</p>
3308      </div>
3309      <div class="mh-feature-stack"><article class="mh-feature-row" data-mk-reveal>
3310  <div class="mh-feature-copy">
3311      <div class="mh-feature-icon"><svg class="size-6" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="link" data-material-variant="regular"><path d="M280-280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h140q12.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.5H280q-58.33 0-99.17 40.76-40.83 40.77-40.83 99Q140-422 180.83-381q40.84 41 99.17 41h140q12.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.5H280Zm75-170q-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.5h250q12.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.5H355Zm185 170q-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.5h140q58.33 0 99.17-40.76 40.83-40.77 40.83-99Q820-538 779.17-579q-40.84-41-99.17-41H540q-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.5h140q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H540Z"/></svg></div>
3312      <h3 class="mh-feature-title">Share files</h3>
3313      <p class="mh-feature-desc">Collections, password protection, and one branded URL for entire handover packs — same gallery layout recipients see on your links.</p></div>
3314  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3315  <div class="mh-browser-bar">
3316    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3317    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3318  </div>
3319  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
3320  <header class="share-brand-bar" role="presentation">
3321  <div class="share-brand-inner">
3322    <span class="share-brand-logo" aria-hidden="true">AC</span>
3323    <span class="share-brand-name">Acme Studio</span>
3324  </div>
3325</header>
3326  <div class="page-main">
3327    <div class="card">
3328      <h1>Q2 proposal &amp; deliverables</h1>
3329      <p class="meta">3 files · Expires in 7 days · Password protected</p>
3330      <ul class="gallery-grid">
3331        <li class="gallery-item">
3332          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
3333          <div class="gallery-meta">
3334            <span class="gallery-name">Proposal.pdf</span>
3335            <span class="gallery-size">2.4 MB</span>
3336            <div class="gallery-actions">
3337              <span class="gallery-btn">Open</span>
3338              <span class="gallery-btn">Download</span>
3339            </div>
3340          </div>
3341        </li>
3342        <li class="gallery-item">
3343          <div class="gallery-thumb"></div>
3344          <div class="gallery-meta">
3345            <span class="gallery-name">Hero-mockup.png</span>
3346            <span class="gallery-size">1.1 MB</span>
3347            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
3348          </div>
3349        </li>
3350        <li class="gallery-item">
3351          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
3352          <div class="gallery-meta">
3353            <span class="gallery-name">Brand-assets.zip</span>
3354            <span class="gallery-size">48 MB</span>
3355            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
3356          </div>
3357        </li>
3358      </ul>
3359    </div>
3360  </div>
3361</div></div>
3362</div></div>
3363</article><article class="mh-feature-row mh-feature-row--flip" data-mk-reveal>
3364  <div class="mh-feature-copy">
3365      <div class="mh-feature-icon"><svg class="size-6" 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></div>
3366      <h3 class="mh-feature-title">Record video</h3>
3367      <p class="mh-feature-desc">Branded video landing pages with the in-app player shell, watch analytics, and optional email gates.</p></div>
3368  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3369  <div class="mh-browser-bar">
3370    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3371    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3372  </div>
3373  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3374  <header class="share-brand-bar" role="presentation">
3375  <div class="share-brand-inner">
3376    <span class="share-brand-logo" aria-hidden="true">RR</span>
3377    <span class="share-brand-name">Riverside Realty</span>
3378  </div>
3379</header>
3380  <main class="video-landing-main">
3381    <div class="video-landing-inner">
3382      <div class="video-landing-card">
3383        <div class="video-landing-hero">
3384          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3385          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3386        </div>
3387        <div class="video-landing-player">
3388          <div class="stream-player-frame">
3389            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3390            <div class="stream-player-progress"><span></span></div>
3391          </div>
3392        </div>
3393      </div>
3394    </div>
3395  </main>
3396</div></div>
3397</div></div>
3398</article><article class="mh-feature-row" data-mk-reveal>
3399  <div class="mh-feature-copy">
3400      <div class="mh-feature-icon"><svg class="size-6" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="dashboard_customize" data-material-variant="regular">
3400<path d="M150-510q-12.75 0-21.37-8.63Q120-527.25 120-540v-270q0-12.75 8.63-21.38Q137.25-840 150-840h270q12.75 0 21.38 8.62Q450-822.75 450-810v270q0 12.75-8.62 21.37Q432.75-510 420-510H150Zm30-271v188-188Zm360 271q-12.75 0-21.37-8.63Q510-527.25 510-540v-270q0-12.75 8.63-21.38Q527.25-840 540-840h270q12.75 0 21.38 8.62Q840-822.75 840-810v270q0 12.75-8.62 21.37Q822.75-510 810-510H540Zm53-271v188-188ZM150-120q-12.75 0-21.37-8.63Q120-137.25 120-150v-270q0-12.75 8.63-21.38Q137.25-450 150-450h270q12.75 0 21.38 8.62Q450-432.75 450-420v270q0 12.75-8.62 21.37Q432.75-120 420-120H150Zm30-249v189-189Zm494.82 249q-12.82 0-21.32-8.63-8.5-8.62-8.5-21.37v-105H539q-12 0-20.5-8.68-8.5-8.67-8.5-21.5 0-12.82 8.63-21.32 8.62-8.5 21.37-8.5h105v-106q0-12 8.68-20.5 8.67-8.5 21.5-8.5 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v105h106q12 0 20.5 8.68 8.5 8.67 8.5 21.5 0 12.82-8.62 21.32-8.63 8.5-21.38 8.5H705v106q0 12-8.68 20.5-8.67 8.5-21.5 8.5ZM570-780v210h210v-210H570Zm-390 0v210h210v-210H180Zm0 390v210h210v-210H180Z"/></svg></div>
3401      <h3 class="mh-feature-title">Host sites</h3>
3402      <p class="mh-feature-desc">Publish zip microsites for campaigns, portfolios, and client deliverables without a separate CMS.</p></div>
3403  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3404  <div class="mh-browser-bar">
3405    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3406    <div class="mh-browser-url">microsite.com/spring-2026</div>
3407  </div>
3408  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="site">
3409  <header class="share-brand-bar" role="presentation">
3410  <div class="share-brand-inner">
3411    <span class="share-brand-logo" aria-hidden="true">SK</span>
3412    <span class="share-brand-name">Studio K</span>
3413  </div>
3414</header>
3415  <div class="page-main">
3416    <div class="hosted-site-card">
3417      <nav class="hosted-site-nav"><span>Launch</span><span>Work</span><span>Contact</span></nav>
3418      <div class="hosted-site-hero">
3419        <span style="display:block;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:#6f35f5">Hosted microsite</span>
3420        <h2>Spring collection 2026</h2>
3421        <p>Published from one zip — no separate CMS build.</p>
3422      </div>
3423      <div class="hosted-site-grid"><div></div><div></div><div></div></div>
3424    </div>
3425  </div>
3426</div></div>
3427</div></div>
3428</article><article class="mh-feature-row mh-feature-row--flip" data-mk-reveal>
3429  <div class="mh-feature-copy">
3430      <div class="mh-feature-icon"><svg class="size-6" 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></div>
3431      <h3 class="mh-feature-title">Collect leads</h3>
3432      <p class="mh-feature-desc">The same lead-capture panel and unlock flow used on live share pages — export contacts on Pro.</p></div>
3433  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3434  <div class="mh-browser-bar">
3435    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3436    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3437  </div>
3438  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="lead">
3439  <header class="share-brand-bar" role="presentation">
3440  <div class="share-brand-inner">
3441    <span class="share-brand-logo" aria-hidden="true">AC</span>
3442    <span class="share-brand-name">Acme Studio</span>
3443  </div>
3444</header>
3445  <div class="page-main">
3446    <div class="lead-preview-shell lead-preview-shell--locked">
3447      <div class="lead-preview-blur">
3448        <div class="card" style="margin-top:12px">
3449          <h1>Investor data room</h1>
3450          <p class="meta">Confidential · Lead gate enabled</p>
3451        </div>
3452      </div>
3453      <section class="lead-capture-box">
3454        <h2 class="lead-capture-heading">Request access to files</h2>
3455        <p class="lead-capture-desc">Share your details to unlock the handover pack.</p>
3456        <label class="lead-capture-label">
3456Name</label>
3457        <div class="lead-capture-input">Jordan Lee</div>
3458        <label class="lead-capture-label">Email</label>
3459        <div class="lead-capture-input">[email protected]</div>
3460        <button type="button" class="lead-capture-btn">Send request</button>
3461      </section>
3462    </div>
3463  </div>
3464</div></div>
3465</div></div>
3466</article><article class="mh-feature-row" data-mk-reveal>
3467  <div class="mh-feature-copy">
3468      <div class="mh-feature-icon"><svg class="size-6" 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></div>
3469      <h3 class="mh-feature-title">Track engagement</h3>
3470      <p class="mh-feature-desc">The Engagement dashboard: overview metrics, tabs, and activity charts in one place.</p></div>
3471  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3472  <div class="mh-browser-bar">
3473    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3474    <div class="mh-browser-url">microsite.com/engagement</div>
3475  </div>
3476  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="analytics">
3477  <div class="eg-wrap-mock">
3478    <div class="eg-head-mock">
3479      <h1>Engagement</h1>
3480      <p>Views, video watch time, and leads in one place.</p>
3481    </div>
3482    <nav class="eg-tabs" aria-hidden="true">
3483      <span class="eg-tab is-active">Overview</span>
3484      <span class="eg-tab">Audience</span>
3485      <span class="eg-tab">Performance</span>
3486    </nav>
3487    <div class="eg-metrics">
3488      <div class="eg-metric"><span class="eg-metric-label">Views</span><div class="eg-metric-value">847</div><div class="eg-metric-sub">+18% vs prior</div></div>
3489      <div class="eg-metric"><span class="eg-metric-label">Leads</span><div class="eg-metric-value">12</div><div class="eg-metric-sub">4 this week</div></div>
3490      <div class="eg-metric"><span class="eg-metric-label">Avg watch</span><div class="eg-metric-value">62%</div><div class="eg-metric-sub">Video links</div></div>
3491    </div>
3492    <section class="eg-panel">
3493      <div class="eg-panel-head"><span class="eg-panel-title">Views &amp; leads over time</span></div>
3494      <div class="eg-chart-bars" role="presentation">
3495        <span style="height:45%"></span><span style="height:72%"></span><span style="height:58%"></span>
3496        <span style="height:88%"></span><span style="height:65%"></span><span style="height:94%"></span><span style="height:70%"></span>
3497      </div>
3498    </section>
3499  </div>
3500</div></div>
3501</div></div>
3502</article></div>
3503    </div>
3504  </section>
3505    <section class="mh-examples" data-mk-reveal>
3506  <div class="mx-auto max-w-7xl px-6 lg:px-8">
3507    <div class="mx-auto max-w-2xl text-center">
3508      <h2 class="mh-section-eyebrow">See it in action</h2>
3509      <p class="mh-section-title">Same UI shapes as the live product</p>
3510      <p class="mh-section-blurb">Mocks use production class names and spacing — when the app UI changes, update marketing-home-previews.js alongside.</p>
3511    </div>
3512    <div class="mh-carousel-shell" aria-label="Example workflows">
3513      <div class="mh-carousel"><div class="mh-carousel-slide"><article class="mh-feature-row" data-mk-reveal>
3514  <div class="mh-feature-copy">
3515      <h3 class="mh-feature-title">Branded file handover</h3>
3516      <p class="mh-feature-desc">Upload a collection, apply your brand, share one link — recipients see the gallery layout above.</p>
3517      <a href="/features/client-video-portal" class="mh-feature-cta">Try this flow <span aria-hidden="true">&rarr;</span></a></div>
3518  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3519  <div class="mh-browser-bar">
3520    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3521    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3522  </div>
3523  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
3524  <header class="share-brand-bar" role="presentation">
3525  <div class="share-brand-inner">
3526    <span class="share-brand-logo" aria-hidden="true">AC</span>
3527    <span class="share-brand-name">Acme Studio</span>
3528  </div>
3529</header>
3530  <div class="page-main">
3531    <div class="card">
3532      <h1>Q2 proposal &amp; deliverables</h1>
3533      <p class="meta">3 files · Expires in 7 days · Password protected</p>
3534      <ul class="gallery-grid">
3535        <li class="gallery-item">
3536          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
3537          <div class="gallery-meta">
3538            <span class="gallery-name">Proposal.pdf</span>
3539            <span class="gallery-size">2.4 MB</span>
3540            <div class="gallery-actions">
3541              <span class="gallery-btn">Open</span>
3542              <span class="gallery-btn">Download</span>
3543            </div>
3544          </div>
3545        </li>
3546        <li class="gallery-item">
3547          <div class="gallery-thumb"></div>
3548          <div class="gallery-meta">
3549            <span class="gallery-name">Hero-mockup.png</span>
3550            <span class="gallery-size">1.1 MB</span>
3551            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
3552          </div>
3553        </li>
3554        <li class="gallery-item">
3555          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
3556          <div class="gallery-meta">
3557            <span class="gallery-name">Brand-assets.zip</span>
3558            <span class="gallery-size">48 MB</span>
3559            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
3560          </div>
3561        </li>
3562      </ul>
3563    </div>
3564  </div>
3565</div></div>
3566</div></div>
3567</article></div><div class="mh-carousel-slide"><article class="mh-feature-row mh-feature-row--flip" data-mk-reveal>
3568  <div class="mh-feature-copy">
3569      <h3 class="mh-feature-title">Video sales page</h3>
3570      <p class="mh-feature-desc">Record a walkthrough; viewers land on your video-landing page with branded player chrome.</p>
3571      <a href="/features/sales-video-message" class="mh-feature-cta">Try this flow <span aria-hidden="true">&rarr;</span></a></div>
3572  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3573  <div class="mh-browser-bar">
3574    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3575    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3576  </div>
3577  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3578  <header class="share-brand-bar" role="presentation">
3579  <div class="share-brand-inner">
3580    <span class="share-brand-logo" aria-hidden="true">RR</span>
3581    <span class="share-brand-name">Riverside Realty</span>
3582  </div>
3583</header>
3584  <main class="video-landing-main">
3585    <div class="video-landing-inner">
3586      <div class="video-landing-card">
3587        <div class="video-landing-hero">
3588          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3589          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3590        </div>
3591        <div class="video-landing-player">
3592          <div class="stream-player-frame">
3593            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3594            <div class="stream-player-progress"><span></span></div>
3595          </div>
3596        </div>
3597      </div>
3598    </div>
3599  </main>
3600</div></div>
3601</div></div>
3602</article></div><div class="mh-carousel-slide"><article class="mh-feature-row" data-mk-reveal>
3603  <div class="mh-feature-copy">
3604      <h3 class="mh-feature-title">Lead-gated proposal</h3>
3605      <p class="mh-feature-desc">Same lead-capture panel as production — name and email before files unlock.</p>
3606      <a href="/compare/docsend-alternative" class="mh-feature-cta">Try this flow <span aria-hidden="true">&rarr;</span></a></div>
3607  <div class="mh-feature-preview" data-mk-parallax="-3"><div class="mh-browser" aria-hidden="true">
3608  <div class="mh-browser-bar">
3609    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3610    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3611  </div>
3612  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="lead">
3613  <header class="share-brand-bar" role="presentation">
3614  <div class="share-brand-inner">
3615    <span class="share-brand-logo" aria-hidden="true">AC</span>
3616    <span class="share-brand-name">Acme Studio</span>
3617  </div>
3618</header>
3619  <div class="page-main">
3620    <div class="lead-preview-shell lead-preview-shell--locked">
3621      <div class="lead-preview-blur">
3622        <div class="card" style="margin-top:12px">
3623          <h1>Investor data room</h1>
3624          <p class="meta">Confidential · Lead gate enabled</p>
3625        </div>
3626      </div>
3627      <section class="lead-capture-box">
3628        <h2 class="lead-capture-heading">Request access to files</h2>
3629        <p class="lead-capture-desc">Share your details to unlock the handover pack.</p>
3630        <label class="lead-capture-label">
3630Name</label>
3631        <div class="lead-capture-input">Jordan Lee</div>
3632        <label class="lead-capture-label">Email</label>
3633        <div class="lead-capture-input">[email protected]</div>
3634        <button type="button" class="lead-capture-btn">Send request</button>
3635      </section>
3636    </div>
3637  </div>
3638</div></div>
3639</div></div>
3640</article></div></div>
3641    </div>
3642  </div>
3643</section>
3644    <section id="ecosystem" class="mh-ecosystem" data-mk-reveal>
3645  <div class="mx-auto max-w-7xl px-6 lg:px-8">
3646    <div class="mx-auto max-w-2xl text-center">
3647      <h2 class="mh-section-eyebrow">The full platform</h2>
3648      <p class="mh-section-title">What branded experiences actually look like</p>
3649      <p class="mh-section-blurb">Share pages, video, analytics, leads, and your public profile — connected in one workflow.</p>
3650    </div>
3651    <div class="mh-bento"><figure class="mh-bento-item mh-bento-item--wide" data-mk-reveal>
3652  <figcaption class="mh-bento-cap"><strong>Branded share page</strong><span>Logo, colours, headline, and file gallery on every link.</span></figcaption>
3653  <div class="mh-bento-preview"><div class="mh-browser" aria-hidden="true">
3654  <div class="mh-browser-bar">
3655    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3656    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3657  </div>
3658  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
3659  <header class="share-brand-bar" role="presentation">
3660  <div class="share-brand-inner">
3661    <span class="share-brand-logo" aria-hidden="true">AC</span>
3662    <span class="share-brand-name">Acme Studio</span>
3663  </div>
3664</header>
3665  <div class="page-main">
3666    <div class="card">
3667      <h1>Q2 proposal &amp; deliverables</h1>
3668      <p class="meta">3 files · Expires in 7 days · Password protected</p>
3669      <ul class="gallery-grid">
3670        <li class="gallery-item">
3671          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
3672          <div class="gallery-meta">
3673            <span class="gallery-name">Proposal.pdf</span>
3674            <span class="gallery-size">2.4 MB</span>
3675            <div class="gallery-actions">
3676              <span class="gallery-btn">Open</span>
3677              <span class="gallery-btn">Download</span>
3678            </div>
3679          </div>
3680        </li>
3681        <li class="gallery-item">
3682          <div class="gallery-thumb"></div>
3683          <div class="gallery-meta">
3684            <span class="gallery-name">Hero-mockup.png</span>
3685            <span class="gallery-size">1.1 MB</span>
3686            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
3687          </div>
3688        </li>
3689        <li class="gallery-item">
3690          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
3691          <div class="gallery-meta">
3692            <span class="gallery-name">Brand-assets.zip</span>
3693            <span class="gallery-size">48 MB</span>
3694            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
3695          </div>
3696        </li>
3697      </ul>
3698    </div>
3699  </div>
3700</div></div>
3701</div></div>
3702</figure><figure class="mh-bento-item" data-mk-reveal>
3703  <figcaption class="mh-bento-cap"><strong>Video viewer</strong><span>Branded player, timeline engagement, and optional email gate.</span></figcaption>
3704  <div class="mh-bento-preview"><div class="mh-browser" aria-hidden="true">
3705  <div class="mh-browser-bar">
3706    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3707    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3708  </div>
3709  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3710  <header class="share-brand-bar" role="presentation">
3711  <div class="share-brand-inner">
3712    <span class="share-brand-logo" aria-hidden="true">RR</span>
3713    <span class="share-brand-name">Riverside Realty</span>
3714  </div>
3715</header>
3716  <main class="video-landing-main">
3717    <div class="video-landing-inner">
3718      <div class="video-landing-card">
3719        <div class="video-landing-hero">
3720          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3721          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3722        </div>
3723        <div class="video-landing-player">
3724          <div class="stream-player-frame">
3725            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3726            <div class="stream-player-progress"><span></span></div>
3727          </div>
3728        </div>
3729      </div>
3730    </div>
3731  </main>
3732</div></div>
3733</div></div>
3734</figure><figure class="mh-bento-item" data-mk-reveal>
3735  <figcaption class="mh-bento-cap"><strong>Engagement dashboard</strong><span>Views, leads, watch time, and follow-up signals.</span></figcaption>
3736  <div class="mh-bento-preview"><div class="mh-browser" aria-hidden="true">
3737  <div class="mh-browser-bar">
3738    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3739    <div class="mh-browser-url">microsite.com/engagement</div>
3740  </div>
3741  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="analytics">
3742  <div class="eg-wrap-mock">
3743    <div class="eg-head-mock">
3744      <h1>Engagement</h1>
3745      <p>Views, video watch time, and leads in one place.</p>
3746    </div>
3747    <nav class="eg-tabs" aria-hidden="true">
3748      <span class="eg-tab is-active">Overview</span>
3749      <span class="eg-tab">Audience</span>
3750      <span class="eg-tab">Performance</span>
3751    </nav>
3752    <div class="eg-metrics">
3753      <div class="eg-metric"><span class="eg-metric-label">Views</span><div class="eg-metric-value">847</div><div class="eg-metric-sub">+18% vs prior</div></div>
3754      <div class="eg-metric"><span class="eg-metric-label">Leads</span><div class="eg-metric-value">12</div><div class="eg-metric-sub">4 this week</div></div>
3755      <div class="eg-metric"><span class="eg-metric-label">Avg watch</span><div class="eg-metric-value">62%</div><div class="eg-metric-sub">Video links</div></div>
3756    </div>
3757    <section class="eg-panel">
3758      <div class="eg-panel-head"><span class="eg-panel-title">Views &amp; leads over time</span></div>
3759      <div class="eg-chart-bars" role="presentation">
3760        <span style="height:45%"></span><span style="height:72%"></span><span style="height:58%"></span>
3761        <span style="height:88%"></span><span style="height:65%"></span><span style="height:94%"></span><span style="height:70%"></span>
3762      </div>
3763    </section>
3764  </div>
3765</div></div>
3766</div></div>
3767</figure><figure class="mh-bento-item mh-bento-item--wide" data-mk-reveal>
3768  <figcaption class="mh-bento-cap"><strong>Lead capture</strong><span>Unlock forms on share and video pages — CSV export on Pro.</span></figcaption>
3769  <div class="mh-bento-preview"><div class="mh-browser" aria-hidden="true">
3770  <div class="mh-browser-bar">
3771    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3772    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3773  </div>
3774  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="lead">
3775  <header class="share-brand-bar" role="presentation">
3776  <div class="share-brand-inner">
3777    <span class="share-brand-logo" aria-hidden="true">AC</span>
3778    <span class="share-brand-name">Acme Studio</span>
3779  </div>
3780</header>
3781  <div class="page-main">
3782    <div class="lead-preview-shell lead-preview-shell--locked">
3783      <div class="lead-preview-blur">
3784        <div class="card" style="margin-top:12px">
3785          <h1>Investor data room</h1>
3786          <p class="meta">Confidential · Lead gate enabled</p>
3787        </div>
3788      </div>
3789      <section class="lead-capture-box">
3790        <h2 class="lead-capture-heading">Request access to files</h2>
3791        <p class="lead-capture-desc">Share your details to unlock the handover pack.</p>
3792        <label class="lead-capture-label">
3792Name</label>
3793        <div class="lead-capture-input">Jordan Lee</div>
3794        <label class="lead-capture-label">Email</label>
3795        <div class="lead-capture-input">[email protected]</div>
3796        <button type="button" class="lead-capture-btn">Send request</button>
3797      </section>
3798    </div>
3799  </div>
3800</div></div>
3801</div></div>
3802</figure><figure class="mh-bento-item" data-mk-reveal>
3803  <figcaption class="mh-bento-cap"><strong>Public profile</strong><span>One link for your bio, featured work, and social presence.</span></figcaption>
3804  <div class="mh-bento-preview"><div class="mh-browser" aria-hidden="true">
3805  <div class="mh-browser-bar">
3806    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3807    <div class="mh-browser-url">microsite.com/u/jordan-lee</div>
3808  </div>
3809  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="profile">
3810  <article class="public-profile-card">
3811    <div class="public-profile-avatar">JL</div>
3812    <h1>Jordan Lee</h1>
3813    <p class="public-profile-meta">Product demos · Client packs · Portfolio</p>
3814    <ul class="public-profile-links">
3815      <li><a href="#">Featured proposal</a></li>
3816      <li><a href="#">Property walkthrough</a></li>
3817      <li><a href="#">Case study — Meridian</a></li>
3818    </ul>
3819  </article>
3820</div></div>
3821</div></div>
3822</figure></div>
3823  </div>
3824</section>
3825    <section id="use-cases" class="mh-use-cases" data-mk-reveal>
3826    <div class="mx-auto max-w-7xl px-6 lg:px-8">
3827      <div class="mx-auto max-w-2xl text-center">
3828        <h2 class="mh-section-eyebrow">Use cases</h2>
3829        <p class="mh-section-title mh-echo"><span class="mh-echo-main">Built for how teams share video</span><span class="mh-echo-ghost" aria-hidden="true">Built for how teams share video</span><span class="mh-echo-ghost mh-echo-ghost--2" aria-hidden="true">Built for how teams share video</span></p>
3830        <p class="mh-section-blurb">Async demos, client reviews, onboarding clips, and campaign explainers—one preview per workflow.</p>
3831      </div>
3832      <div class="mh-feature-stack"><a href="/features/sales-video-message" class="mh-feature-row mh-feature-row--link" data-mk-reveal>
3833  <div class="mh-feature-copy">
3834    <h3 class="mh-feature-title">Sales video messages</h3>
3835    <p class="mh-feature-desc">Personal demos with decks, CTAs, and follow-up signal.</p>
3836    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
3837  </div>
3838  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
3839  <div class="mh-browser-bar">
3840    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3841    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3842  </div>
3843  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3844  <header class="share-brand-bar" role="presentation">
3845  <div class="share-brand-inner">
3846    <span class="share-brand-logo" aria-hidden="true">RR</span>
3847    <span class="share-brand-name">Riverside Realty</span>
3848  </div>
3849</header>
3850  <main class="video-landing-main">
3851    <div class="video-landing-inner">
3852      <div class="video-landing-card">
3853        <div class="video-landing-hero">
3854          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3855          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3856        </div>
3857        <div class="video-landing-player">
3858          <div class="stream-player-frame">
3859            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3860            <div class="stream-player-progress"><span></span></div>
3861          </div>
3862        </div>
3863      </div>
3864    </div>
3865  </main>
3866</div></div>
3867</div></div>
3868</a><a href="/features/client-video-portal" class="mh-feature-row mh-feature-row--link mh-feature-row--flip" data-mk-reveal>
3869  <div class="mh-feature-copy">
3870    <h3 class="mh-feature-title">
3870Client video portals</h3>
3871    <p class="mh-feature-desc">Focused client pages without another login workflow.</p>
3872    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
3873  </div>
3874  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
3875  <div class="mh-browser-bar">
3876    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3877    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
3878  </div>
3879  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
3880  <header class="share-brand-bar" role="presentation">
3881  <div class="share-brand-inner">
3882    <span class="share-brand-logo" aria-hidden="true">AC</span>
3883    <span class="share-brand-name">Acme Studio</span>
3884  </div>
3885</header>
3886  <div class="page-main">
3887    <div class="card">
3888      <h1>Q2 proposal &amp; deliverables</h1>
3889      <p class="meta">3 files · Expires in 7 days · Password protected</p>
3890      <ul class="gallery-grid">
3891        <li class="gallery-item">
3892          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
3893          <div class="gallery-meta">
3894            <span class="gallery-name">Proposal.pdf</span>
3895            <span class="gallery-size">2.4 MB</span>
3896            <div class="gallery-actions">
3897              <span class="gallery-btn">Open</span>
3898              <span class="gallery-btn">Download</span>
3899            </div>
3900          </div>
3901        </li>
3902        <li class="gallery-item">
3903          <div class="gallery-thumb"></div>
3904          <div class="gallery-meta">
3905            <span class="gallery-name">Hero-mockup.png</span>
3906            <span class="gallery-size">1.1 MB</span>
3907            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
3908          </div>
3909        </li>
3910        <li class="gallery-item">
3911          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
3912          <div class="gallery-meta">
3913            <span class="gallery-name">Brand-assets.zip</span>
3914            <span class="gallery-size">48 MB</span>
3915            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
3916          </div>
3917        </li>
3918      </ul>
3919    </div>
3920  </div>
3921</div></div>
3922</div></div>
3923</a><a href="/features/share-screen-recording" class="mh-feature-row mh-feature-row--link" data-mk-reveal>
3924  <div class="mh-feature-copy">
3925    <h3 class="mh-feature-title">Share screen recordings</h3>
3926    <p class="mh-feature-desc">Record, add context, and send one polished page.</p>
3927    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
3928  </div>
3929  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
3930  <div class="mh-browser-bar">
3931    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3932    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3933  </div>
3934  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3935  <header class="share-brand-bar" role="presentation">
3936  <div class="share-brand-inner">
3937    <span class="share-brand-logo" aria-hidden="true">RR</span>
3938    <span class="share-brand-name">Riverside Realty</span>
3939  </div>
3940</header>
3941  <main class="video-landing-main">
3942    <div class="video-landing-inner">
3943      <div class="video-landing-card">
3944        <div class="video-landing-hero">
3945          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3946          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3947        </div>
3948        <div class="video-landing-player">
3949          <div class="stream-player-frame">
3950            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5
3950Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3951            <div class="stream-player-progress"><span></span></div>
3952          </div>
3953        </div>
3954      </div>
3955    </div>
3956  </main>
3957</div></div>
3958</div></div>
3959</a><a href="/compare/loom-alternative" class="mh-feature-row mh-feature-row--link mh-feature-row--flip" data-mk-reveal>
3960  <div class="mh-feature-copy">
3961    <h3 class="mh-feature-title">Loom alternative</h3>
3962    <p class="mh-feature-desc">Video messages with files, branding, and CTAs included.</p>
3963    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
3964  </div>
3965  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
3966  <div class="mh-browser-bar">
3967    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
3968    <div class="mh-browser-url">microsite.com/riverside/42-smith-st</div>
3969  </div>
3970  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="video">
3971  <header class="share-brand-bar" role="presentation">
3972  <div class="share-brand-inner">
3973    <span class="share-brand-logo" aria-hidden="true">RR</span>
3974    <span class="share-brand-name">Riverside Realty</span>
3975  </div>
3976</header>
3977  <main class="video-landing-main">
3978    <div class="video-landing-inner">
3979      <div class="video-landing-card">
3980        <div class="video-landing-hero">
3981          <h1 class="video-landing-title">42 Smith St — buyer walkthrough</h1>
3982          <p class="video-landing-lead">A quick tour before your inspection this Saturday.</p>
3983        </div>
3984        <div class="video-landing-player">
3985          <div class="stream-player-frame">
3986            <svg class="size-12 text-white/90" width="3rem" height="3rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="play_circle" data-material-variant="regular"><path d="m418-332 202-129q11-7 11-19t-11-19L418-628q-11-8-23-1.5T383-609v258q0 14 12 20.5t23-1.5Zm62 252q-82 0-155-31.5t-127.5-86Q143-252 111.5-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-80Zm0-60q142 0 241-99.5T820-480q0-142-99-241t-241-99q-141 0-240.5 99T140-480q0 141 99.5 240.5T480-140Zm0-340Z"/></svg>
3987            <div class="stream-player-progress"><span></span></div>
3988          </div>
3989        </div>
3990      </div>
3991    </div>
3992  </main>
3993</div></div>
3994</div></div>
3995</a><a href="/compare/wetransfer-alternative" class="mh-feature-row mh-feature-row--link" data-mk-reveal>
3996  <div class="mh-feature-copy">
3997    <h3 class="mh-feature-title">WeTransfer alternative</h3>
3998    <p class="mh-feature-desc">File delivery links that can carry video and next steps.</p>
3999    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
4000  </div>
4001  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
4002  <div class="mh-browser-bar">
4003    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
4004    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
4005  </div>
4006  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
4007  <header class="share-brand-bar" role="presentation">
4008  <div class="share-brand-inner">
4009    <span class="share-brand-logo" aria-hidden="true">AC</span>
4010    <span class="share-brand-name">Acme Studio</span>
4011  </div>
4012</header>
4013  <div class="page-main">
4014    <div class="card">
4015      <h1>Q2 proposal &amp; deliverables</h1>
4016      <p class="meta">3 files · Expires in 7 days · Password protected</p>
4017      <ul class="gallery-grid">
4018        <li class="gallery-item">
4019          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
4020          <div class="gallery-meta">
4021            <span class="gallery-name">Proposal.pdf</span>
4022            <span class="gallery-size">2.4 MB</span>
4023            <div class="gallery-actions">
4024              <span class="gallery-btn">Open</span>
4025              <span class="gallery-btn">Download</span>
4026            </div>
4027          </div>
4028        </li>
4029        <li class="gallery-item">
4030          <div class="gallery-thumb"></div>
4031          <div class="gallery-meta">
4032            <span class="gallery-name">Hero-mockup.png</span>
4033            <span class="gallery-size">1.1 MB</span>
4034            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
4035          </div>
4036        </li>
4037        <li class="gallery-item">
4038          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
4039          <div class="gallery-meta">
4040            <span class="gallery-name">Brand-assets.zip</span>
4041            <span class="gallery-size">48 MB</span>
4042            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
4043          </div>
4044        </li>
4045      </ul>
4046    </div>
4047  </div>
4048</div></div>
4049</div></div>
4050</a><a href="/use-cases/photo-hosting" class="mh-feature-row mh-feature-row--link mh-feature-row--flip" data-mk-reveal>
4051  <div class="mh-feature-copy">
4052    <h3 class="mh-feature-title">Portfolio sharing</h3>
4053    <p class="mh-feature-desc">Galleries that look like your studio, not a folder.</p>
4054    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
4055  </div>
4056  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
4057  <div class="mh-browser-bar">
4058    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
4059    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
4060  </div>
4061  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="share">
4062  <header class="share-brand-bar" role="presentation">
4063  <div class="share-brand-inner">
4064    <span class="share-brand-logo" aria-hidden="true">AC</span>
4065    <span class="share-brand-name">Acme Studio</span>
4066  </div>
4067</header>
4068  <div class="page-main">
4069    <div class="card">
4070      <h1>Q2 proposal &amp; deliverables</h1>
4071      <p class="meta">3 files · Expires in 7 days · Password protected</p>
4072      <ul class="gallery-grid">
4073        <li class="gallery-item">
4074          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="description" data-material-variant="regular"><path d="M349-250h262q12.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.5H349q-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.5Zm0-170h262q12.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.5H349q-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.5ZM220-80q-24 0-42-18t-18-42v-680q0-24 18-42t42-18h336q12.44 0 23.72 5T599-862l183 183q8 8 13 19.28 5 11.28 5 23.72v496q0 24-18 42t-42 18H220Zm331-584v-156H220v680h520v-494H581q-12.75 0-21.37-8.63Q551-651.25 551-664ZM220-820v186-186 680-680Z"/></svg></div>
4075          <div class="gallery-meta">
4076            <span class="gallery-name">Proposal.pdf</span>
4077            <span class="gallery-size">2.4 MB</span>
4078            <div class="gallery-actions">
4079              <span class="gallery-btn">Open</span>
4080              <span class="gallery-btn">Download</span>
4081            </div>
4082          </div>
4083        </li>
4084        <li class="gallery-item">
4085          <div class="gallery-thumb"></div>
4086          <div class="gallery-meta">
4087            <span class="gallery-name">Hero-mockup.png</span>
4088            <span class="gallery-size">1.1 MB</span>
4089            <div class="gallery-actions"><span class="gallery-btn">Open</span></div>
4090          </div>
4091        </li>
4092        <li class="gallery-item">
4093          <div class="gallery-thumb gallery-thumb--doc"><svg class="size-8 text-slate-400" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" data-material-symbol="archive" data-material-variant="regular"><path d="M458.5-572.38Q450-563.75 450-551v171l-66-66q-7.82-8-19.91-8T344-446.14q-8 7.85-8 20 0 12.14 8 20.14l115 115q9 9 21 9t21-9l115-115q8-7.82 8-19.91T616.14-446q-7.85-8-20-8-12.14 0-20.14 8l-66 66v-171q0-12.75-8.68-21.38-8.67-8.62-21.5-8.62-12.82 0-21.32 8.62ZM180-674v494h600v-494H180Zm0 554q-24.75 0-42.37-17.63Q120-155.25 120-180v-529q0-9.88 3-19.06 3-9.18 9-16.94l52-71q8-11 20.94-17.5Q217.88-840 232-840h495q14.12 0 27.06 6.5T775-816l53 71q6 7.76 9 16.94 3 9.18 3 19.06v529q0 24.75-17.62 42.37Q804.75-120 780-120H180Zm17-614h565l-36.41-46H233l-36 46Zm283 307Z"/></svg></div>
4094          <div class="gallery-meta">
4095            <span class="gallery-name">Brand-assets.zip</span>
4096            <span class="gallery-size">48 MB</span>
4097            <div class="gallery-actions"><span class="gallery-btn">Download</span></div>
4098          </div>
4099        </li>
4100      </ul>
4101    </div>
4102  </div>
4103</div></div>
4104</div></div>
4105</a><a href="/teams/product" class="mh-feature-row mh-feature-row--link" data-mk-reveal>
4106  <div class="mh-feature-copy">
4107    <h3 class="mh-feature-title">Investor updates</h3>
4108    <p class="mh-feature-desc">Confidential packs with expiry and lead gates.</p>
4109    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
4110  </div>
4111  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
4112  <div class="mh-browser-bar">
4113    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
4114    <div class="mh-browser-url">microsite.com/acme/q2-proposal</div>
4115  </div>
4116  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="lead">
4117  <header class="share-brand-bar" role="presentation">
4118  <div class="share-brand-inner">
4119    <span class="share-brand-logo" aria-hidden="true">AC</span>
4120    <span class="share-brand-name">Acme Studio</span>
4121  </div>
4122</header>
4123  <div class="page-main">
4124    <div class="lead-preview-shell lead-preview-shell--locked">
4125      <div class="lead-preview-blur">
4126        <div class="card" style="margin-top:12px">
4127          <h1>Investor data room</h1>
4128          <p class="meta">Confidential · Lead gate enabled</p>
4129        </div>
4130      </div>
4131      <section class="lead-capture-box">
4132        <h2 class="lead-capture-heading">Request access to files</h2>
4133        <p class="lead-capture-desc">Share your details to unlock the handover pack.</p>
4134        <label class="lead-capture-label">Name</label>
4135        <div class="lead-capture-input">Jordan Lee</div>
4136        <label class="lead-capture-label">Email</label>
4137        <div class="lead-capture-input">[email protected]</div>
4138        <button type="button" class="lead-capture-btn">Send request</button>
4139      </section>
4140    </div>
4141  </div>
4142</div></div>
4143</div></div>
4144</a><a href="/industries/recruitment" class="mh-feature-row mh-feature-row--link mh-feature-row--flip" data-mk-reveal>
4145  <div class="mh-feature-copy">
4146    <h3 class="mh-feature-title">Recruitment</h3>
4147    <p class="mh-feature-desc">Offer packs and portfolios on your public profile.</p>
4148    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
4149  </div>
4150  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
4151  <div class="mh-browser-bar">
4152    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
4153    <div class="mh-browser-url">microsite.com/u/jordan-lee</div>
4154  </div>
4155  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="profile">
4156  <article class="public-profile-card">
4157    <div class="public-profile-avatar">JL</div>
4158    <h1>
4158Jordan Lee</h1>
4159    <p class="public-profile-meta">Product demos · Client packs · Portfolio</p>
4160    <ul class="public-profile-links">
4161      <li><a href="#">Featured proposal</a></li>
4162      <li><a href="#">Property walkthrough</a></li>
4163      <li><a href="#">Case study — Meridian</a></li>
4164    </ul>
4165  </article>
4166</div></div>
4167</div></div>
4168</a><a href="/teams/creatives" class="mh-feature-row mh-feature-row--link" data-mk-reveal>
4169  <div class="mh-feature-copy">
4170    <h3 class="mh-feature-title">Agency delivery</h3>
4171    <p class="mh-feature-desc">Campaign assets on branded links and microsites.</p>
4172    <span class="mh-feature-cta">Learn more <span aria-hidden="true">&rarr;</span></span>
4173  </div>
4174  <div class="mh-feature-preview"><div class="mh-browser mh-browser--compact" aria-hidden="true">
4175  <div class="mh-browser-bar">
4176    <div class="mh-browser-dots"><span></span><span></span><span></span></div>
4177    <div class="mh-browser-url">microsite.com/spring-2026</div>
4178  </div>
4179  <div class="mh-browser-body mh-browser-body--flush"><div class="mh-product-ui" data-surface="site">
4180  <header class="share-brand-bar" role="presentation">
4181  <div class="share-brand-inner">
4182    <span class="share-brand-logo" aria-hidden="true">SK</span>
4183    <span class="share-brand-name">Studio K</span>
4184  </div>
4185</header>
4186  <div class="page-main">
4187    <div class="hosted-site-card">
4188      <nav class="hosted-site-nav"><span>Launch</span><span>Work</span><span>Contact</span></nav>
4189      <div class="hosted-site-hero">
4190        <span style="display:block;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:#6f35f5">Hosted microsite</span>
4191        <h2>Spring collection 2026</h2>
4192        <p>Published from one zip — no separate CMS build.</p>
4193      </div>
4194      <div class="hosted-site-grid"><div></div><div></div><div></div></div>
4195    </div>
4196  </div>
4197</div></div>
4198</div></div>
4199</a></div>
4200      <p class="mt-10 text-center text-sm text-gray-500 dark:text-gray-400">
4201        <a href="/use-cases" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">All use cases</a>
4202        <span class="mx-2" aria-hidden="true">·</span>
4203        <a href="/teams" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">Teams</a>
4204        <span class="mx-2" aria-hidden="true">·</span>
4205        <a href="/industries" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400">Industries</a>
4206      </p>
4207    </div>
4208  </section>
4209    <section class="mk-section mk-section--tint">
4210    <div class="pricing-shell" data-mk-reveal>
4211      <section class="pricing-plans-section" aria-labelledby="pricingPlansTitle">
4212    <div class="pricing-section-head">
4213      <h2 id="pricingPlansTitle">One workspace instead of five subscriptions.</h2>
4214      <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>
4215    </div>
4216    <div class="pricing-billing-toggle" aria-label="Billing cadence">
4217      <button type="button" data-pricing-cadence="monthly" aria-pressed="true">Monthly</button>
4218      <button type="button" data-pricing-cadence="yearly" aria-pressed="false">Yearly <span class="pricing-billing-discount">20% off</span></button>
4219    </div>
4220    <div class="pricing-plans">
4221      <section class="pricing-plan" aria-labelledby="tier-free">
4222        <span class="pricing-plan-label">Free forever</span>
4223        <h3 id="tier-free">Local</h3>
4224        <p class="pricing-plan-desc">Capture, edit, and export on your device. Try cloud sharing with temporary branded links.</p>
4225        <p class="pricing-price"><strong>$0</strong><span>forever</span></p>
4226        <p class="pricing-plan-note">No credit card required.</p>
4227        <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">
4227<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">
4227<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>
4228        <div class="pricing-plan-cta"><a href="/chrome-extension">Get the Chrome extension</a></div>
4229      </section>
4230
4231      <section class="pricing-plan pricing-plan--pro" aria-labelledby="tier-pro">
4232        <span class="pricing-plan-label">Best for creators</span>
4233        <h3 id="tier-pro">VideoM8 Pro</h3>
4234        <p class="pricing-plan-desc">Capture, edit, share, repurpose, and publish from one complete workspace.</p>
4235        <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>
4236        <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>
4237        <p id="proSavingsNote" class="pricing-plan-savings" data-yearly-savings="Equivalent to USD $12/month, billed as USD $180/year."></p>
4238        <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">
4238<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">
4238<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">
4238<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>
4239        <div class="pricing-plan-cta">
4240          <button type="button" id="upgradeProBtn" data-checkout-plan="personal" data-checkout-kind="base">Start Pro</button>
4241          <button type="button" id="manageBillingBtn" class="mt-3 hidden">Manage billing</button>
4242        </div>
4243        <p id="upgradeProStatus" class="mt-3 min-h-[1.2em] text-center text-sm text-slate-500" role="status" aria-live="polite"></p>
4244        <div id="pricingBillingPanel" class="pricing-billing-panel hidden" role="status" aria-live="polite">
4245          <p id="pricingBillingTitle" class="pricing-billing-title"></p>
4246          <p id="pricingBillingMsg" class="pricing-billing-msg"></p>
4247          <p id="pricingBillingHint" class="pricing-billing-hint hidden"></p>
4248          <div class="pricing-billing-actions">
4249            <button type="button" id="restoreProBtn" class="pricing-billing-btn pricing-billing-btn--primary hidden">Restore Pro access</button>
4250            <button type="button" id="syncBillingBtn" class="pricing-billing-btn hidden">Sync from Stripe</button>
4251          </div>
4252        </div>
4253      </section>
4254      <section class="pricing-plan" aria-labelledby="tier-team">
4255        <span class="pricing-plan-label">For growing teams</span>
4256        <h3 id="tier-team">VideoM8 Team</h3>
4257        <p class="pricing-plan-desc">Run a shared content operation with roles, approvals, assignments, and one bill.</p>
4258        <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>
4259        <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>
4260        <p id="teamSavingsNote" class="pricing-plan-savings" data-yearly-savings="Save 20% with annual team billing."></p>
4261        <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">
4261<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">
4261<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>
4262        <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>
4263      </section>
4264    </div>
4265
4266    <div class="pricing-section-head">
4267      <h2>Use AI credits only when you need them.</h2>
4268      <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>
4269    </div>
4270    <div class="pricing-credit-packs"><section class="pricing-credit-pack" aria-labelledby="tier-credits_100">
4271    <div>
4272      <h3 id="tier-credits_100">100 credits</h3>
4273      <p>For an occasional extra project.</p>
4274    </div>
4275    <strong>USD $9</strong>
4276    <button type="button" data-credit-pack="credits_100">Buy credits</button>
4277  </section><section class="pricing-credit-pack" aria-labelledby="tier-credits_500">
4278    <div>
4279      <h3 id="tier-credits_500">500 credits</h3>
4280      <p>For regular content production.</p>
4281    </div>
4282    <strong>USD $39</strong>
4283    <button type="button" data-credit-pack="credits_500">Buy credits</button>
4284  </section><section class="pricing-credit-pack" aria-labelledby="tier-credits_1000">
4285    <div>
4286      <h3 id="tier-credits_1000">1,000 credits</h3>
4287      <p>For high-volume AI creation.</p>
4288    </div>
4289    <strong>USD $69</strong>
4290    <button type="button" data-credit-pack="credits_1000">Buy credits</button>
4291  </section></div>
4292    <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>
4293    <p class="pro-upsell-only pricing-active-note">
4293Sign 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>
4294    <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>
4295  </section>
4296    </div>
4297  </section>
4298    <section class="mh-final-cta">
4299    <div class="mx-auto max-w-3xl px-6 text-center lg:px-8" data-mk-reveal>
4300      <h2 class="mh-final-cta-title text-balance">Ready when you are</h2>
4301      <p class="mt-4 text-lg/8 text-indigo-100 text-pretty">Publish a branded video page in minutes. Add files or a microsite when the deliverable needs more.</p>
4302      <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
4303        <a href="/record" data-aha-cta="final_record" class="mh-pill-cta mh-pill-cta--light">Let’s hit record</a>
4304      </div>
4305    </div>
4306  </section>
4307  </main>
4308  <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">
4309  <div class="site-footer-inner mx-auto max-w-7xl px-6 py-16 sm:py-20 lg:px-8 lg:py-24">
4310    <div class="site-footer-grid grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-8">
4311      <div class="site-footer-brand lg:col-span-3">
4312        <a href="/" class="text-xl font-extrabold tracking-tight text-indigo-600 dark:text-indigo-400">VideoM8</a>
4313        <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>
4314        <ul role="list" class="mt-6 space-y-3">
4315          <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>
4316          <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>
4317        </ul>
4318      </div>
4319      <div class="site-footer-links lg:col-span-9">
4320        <div class="site-footer-group-grid grid grid-cols-2 gap-8 lg:grid-cols-4">
4321          
4322          <div>
4323            <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>
4324            <ul role="list" class="mt-6 space-y-3">
4325              <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>
4326              <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>
4327              <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>
4328              <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>
4329              <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>
4330              <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>
4331              <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>
4332              <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>
4333              <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>
4334              <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>
4335              <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>
4336              <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>
4337              <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>
4338              <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>
4339              <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>
4340            </ul>
4341          </div>
4342          <div>
4343            <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>
4344            <ul role="list" class="mt-6 space-y-3">
4345              <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>
4346              <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>
4347              <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>
4348              <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>
4349              <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>
4350              <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>
4351              <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>
4352              <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>
4353              <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>
4354              <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>
4355              <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>
4356              <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>
4357              <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>
4358              <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>
4359            </ul>
4360          </div>
4361          <div>
4362            <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>
4363            <ul role="list" class="mt-6 space-y-3">
4364              <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>
4365              <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>
4366              <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>
4367              <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>
4368              <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>
4369              <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>
4370              <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>
4371              <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>
4372            </ul>
4373          </div>
4374          <div>
4375            <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>
4376            <ul role="list" class="mt-6 space-y-3">
4377              <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>
4378              <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>
4379              <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">
4379Cloud storage</a></li>
4380              <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>
4381              <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>
4382              <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>
4383              <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>
4384              <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>
4385              <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>
4386              <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>
4387              <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>
4388              <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>
4389              <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>
4390              <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>
4391              <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>
4392            </ul>
4393          </div>
4394          <div>
4395            <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>
4396            <ul role="list" class="mt-6 space-y-3">
4397              <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>
4398              <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>
4399              <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>
4400              <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>
4401              <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>
4402              <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>
4403              <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>
4404              <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>
4405              <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>
4406              <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>
4407              <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>
4408              <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>
4409              <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>
4410            </ul>
4411          </div>
4412        </div>
4413        <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">
4414          <div>
4415            <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Legal</h3>
4416            <ul role="list" class="mt-4 space-y-3">
4417              <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>
4418              <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>
4419            </ul>
4420          </div>
4421          <div>
4422            <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Product</h3>
4423            <ul role="list" class="mt-4 space-y-3">
4424              <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>
4425              <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>
4426              <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>
4427              <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>
4428              <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>
4429              <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>
4430            </ul>
4431          </div>
4432          <div>
4433            <h3 class="text-sm/6 font-semibold text-gray-900 dark:text-white">Network</h3>
4434            <ul role="list" class="mt-4 space-y-3">
4435              <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>
4436            </ul>
4437          </div>
4438        </div>
4439      </div>
4440    </div>
4441    <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>
4442  </div>
4443</footer>
4444<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">
4445  <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">
4446    <p>&copy; 2026 VideoM8</p>
4447    <nav class="flex flex-wrap gap-4" aria-label="Footer">
4448      <a href="/terms" class="hover:text-gray-800 dark:hover:text-gray-200">Terms</a>
4449      <a href="/privacy" class="hover:text-gray-800 dark:hover:text-gray-200">Privacy</a>
4450      <a href="/pricing" class="hover:text-gray-800 dark:hover:text-gray-200">Pricing</a>
4451    </nav>
4452  </div>
4453</footer>
4454<script>
4455(function () {
4456  var ACCOUNT_ID_KEY = 'microsite_account_id';
4457  var SESSION_EXPIRES_KEY = 'microsite_session_expires_at';
4458  var marketingFooter = document.querySelector('[data-marketing-footer]');
4459  var appFooter = document.querySelector('[data-app-footer]');
4460  if (!marketingFooter || !appFooter) return;
4461
4462  function hasValidStoredSession() {
4463    try {
4464      var accountId = localStorage.getItem(ACCOUNT_ID_KEY);
4465      if (!accountId) return false;
4466      var rawExpires = localStorage.getItem(SESSION_EXPIRES_KEY);
4467      if (!rawExpires) return true;
4468      var expires = Number(rawExpires);
4469      return !Number.isFinite(expires) || expires <= 0 || Date.now() <= expires;
4470    } catch (e) {
4471      return false;
4472    }
4473  }
4474
4475  function hasSignedInShell() {
4476    var signedInNav = document.getElementById('navAuthSignedIn');
4477    return document.body.classList.contains('nav-logged-in')
4478      || (signedInNav && !signedInNav.classList.contains('hidden') && !signedInNav.hidden);
4479  }
4480
4481  function applyFooterState() {
4482    var signedIn = hasValidStoredSession() || hasSignedInShell();
4483    marketingFooter.hidden = signedIn;
4484    appFooter.hidden = !signedIn;
4485  }
4486
4487  window.micrositeApplyLoggedInFooter = applyFooterState;
4488  applyFooterState();
4489  window.addEventListener('storage', applyFooterState);
4490  window.addEventListener('focus', applyFooterState);
4491  window.addEventListener('pageshow', applyFooterState);
4492  window.addEventListener('microsite-auth-updated', applyFooterState);
4493  window.setInterval(applyFooterState, 2000);
4494})();
4495</script>
4495
4496<div id="micrositeToastHost" class="ms-toast-host" aria-live="polite"></div>
4497<div id="micrositeCmdk" class="ms-cmdk" hidden>
4498  <div class="ms-cmdk-backdrop" data-cmdk-close tabindex="-1" aria-hidden="true"></div>
4499  <div class="ms-cmdk-panel" role="dialog" aria-modal="true" aria-label="Command palette">
4500    <div class="ms-cmdk-search">
4501      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
4502        <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" />
4503      </svg>
4504      <input id="micrositeCmdkInput" class="ms-cmdk-input" type="search" placeholder="Search pages, folders, and links..." autocomplete="off" spellcheck="false">
4505    </div>
4506    <ul id="micrositeCmdkList" class="ms-cmdk-list" role="listbox"></ul>
4507    <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>
4508  </div>
4509</div>
4510  <div id="accountModal" class="account-modal" hidden>
4511    <div class="account-modal-backdrop" data-close-modal tabindex="-1" aria-hidden="true"></div>
4512    <div class="account-modal-panel" role="dialog" aria-modal="true" aria-labelledby="accountModalTitle">
4513      <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>
4514      <div id="accountGuest">
4515        <h2 id="accountModalTitle" class="account-modal-title">Continue with email</h2>
4516        <p id="accountModalDesc" class="account-modal-desc">We&rsquo;ll email you a sign-in code. New accounts are created automatically.</p>
4517        <form id="accountLoginForm" class="account-modal-form">
4518          <div id="accountEmailStep" class="account-email-step">
4519            <div class="account-modal-fields">
4520              <input id="accountEmail" type="email" required autocomplete="email" placeholder="[email protected]" class="account-modal-input">
4521            </div>
4522            <div class="account-modal-actions">
4523              <button type="submit" id="accountSendCodeBtn" class="account-modal-btn-primary">Continue</button>
4524            </div>
4525          </div>
4526          <div id="accountCodeStep" class="hidden">
4527            <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>
4528            <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">
4529            <div class="account-modal-actions">
4530              <button type="button" id="accountVerifyCodeBtn" class="account-modal-btn-primary">Verify code</button>
4531              <button type="button" id="accountResendCodeBtn" class="account-modal-btn-secondary">Resend</button>
4532            </div>
4533          </div>
4534        </form>
4535        <p id="accountStatus" class="account-modal-status" role="status" aria-live="polite"></p>
4536      </div>
4537      <div id="accountSignedIn" class="hidden">
4538        <h2 class="account-modal-title">You&rsquo;re signed in</h2>
4539        <p id="accountEmailDisplay" class="text-sm text-slate-500"></p>
4540        <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>
4541        <div class="account-modal-actions" style="margin-top:18px">
4542          <button type="button" id="accountModalContinueBtn" class="account-modal-btn-primary" hidden>Use Never expiry</button>
4543          <button type="button" id="accountModalSignOutBtn" class="account-modal-btn-secondary">Sign out</button>
4544        </div>
4545      </div>
4546    </div>
4547  </div>
4548  
4548<script>
4549(function () {
4550  var PLAN_KEY = 'microsite_user_plan';
4551  window.micrositeApplyPlanState = function (plan) {
4552    var isPro = plan === 'pro';
4553    window.micrositeUserPlan = isPro ? 'pro' : 'free';
4554    try {
4555      if (isPro) localStorage.setItem(PLAN_KEY, 'pro');
4556      else localStorage.removeItem(PLAN_KEY);
4557    } catch (e) { /* ignore */ }
4558    document.documentElement.classList.toggle('user-plan-pro', isPro);
4559    document.body.setAttribute('data-user-plan', isPro ? 'pro' : 'free');
4560    var navPricing = document.getElementById('navPricingLink');
4561    if (navPricing) navPricing.classList.toggle('hidden', isPro);
4562    var banner = document.getElementById('launchBanner');
4563    if (isPro && banner) banner.remove();
4564    if (typeof window.updateNavPlanBadge === 'function') window.updateNavPlanBadge(isPro ? 'pro' : 'free');
4565  };
4566  window.micrositeIsPro = function () {
4567    return window.micrositeUserPlan === 'pro'
4568      || document.body.getAttribute('data-user-plan') === 'pro'
4569      || document.documentElement.classList.contains('user-plan-pro');
4570  };
4571  window.micrositeSyncProUpsell = function (isPro) {
4572    window.micrositeApplyPlanState(isPro ? 'pro' : 'free');
4573  };
4574	  window.micrositeApplyPlanFromPayload = function (payload) {
4575	    var plan = 'free';
4576	    var billing = payload && payload.billing;
4577	    window.micrositeHasTeam = !!(payload && payload.team);
4578	    if (billing && billing.proAccess === true) plan = 'pro';
4579    else if (billing && billing.effectivePlan === 'pro') plan = 'pro';
4580    else if (payload && payload.plan === 'pro') plan = 'pro';
4581    window.micrositeApplyPlanState(plan);
4582    return plan;
4583  };
4584  try {
4585    if (localStorage.getItem(PLAN_KEY) === 'pro') window.micrositeApplyPlanState('pro');
4586  } catch (e) { /* ignore */ }
4587  window.addEventListener('microsite-plan-updated', function (e) {
4588    if (e.detail === 'pro' || e.detail === 'free') window.micrositeApplyPlanState(e.detail);
4589  });
4590})();
4591</script>
4591<script>
4592window.micrositeOpenBillingPortal = async function () {
4593  var response = await fetch('/billing/portal', {
4594    method: 'POST',
4595    headers: { 'Content-Type': 'application/json' },
4596    body: '{}'
4597  });
4598  var data = await response.json().catch(function () { return {}; });
4599  if (!response.ok || !data.url) throw new Error(data.error || 'Could not open billing management.');
4600  window.location.assign(data.url);
4601};
4602</script>
4602<script>
4603(function () {
4604  const ACCOUNT_ID_KEY = 'microsite_account_id';
4605  const menuBtn = document.getElementById('navProfileMenuBtn');
4606  const dropdown = document.getElementById('navProfileDropdown');
4607  if (!menuBtn || !dropdown) return;
4608
4609  function closeMenu() {
4610    dropdown.hidden = true;
4611    menuBtn.setAttribute('aria-expanded', 'false');
4612  }
4613
4614  function openMenu() {
4615    dropdown.hidden = false;
4616    menuBtn.setAttribute('aria-expanded', 'true');
4617  }
4618
4619  function toggleMenu() {
4620    if (dropdown.hidden) openMenu();
4621    else closeMenu();
4622  }
4623
4624  menuBtn.addEventListener('click', function (e) {
4625    e.stopPropagation();
4626    toggleMenu();
4627  });
4628
4629  document.addEventListener('click', function (e) {
4630    if (!dropdown.hidden && !dropdown.contains(e.target) && e.target !== menuBtn) closeMenu();
4631  });
4632  document.addEventListener('keydown', function (e) {
4633    if (e.key === 'Escape') closeMenu();
4634  });
4635
4636  dropdown.querySelectorAll('a[role="menuitem"]').forEach(function (el) {
4637    el.addEventListener('click', closeMenu);
4638  });
4639
4640  dropdown.querySelectorAll('a[href="/plans"][role="menuitem"]').forEach(function (el) {
4641    el.addEventListener('click', closeMenu);
4642  });
4643
4644  var signOutBtn = dropdown.querySelector('[data-nav-signout]');
4645  if (signOutBtn) {
4646    signOutBtn.addEventListener('click', function () {
4647      closeMenu();
4648      if (typeof window.micrositeSignOut === 'function') window.micrositeSignOut();
4649      else {
4650        try { fetch('/account/logout', { method: 'POST' }).catch(function () {}); } catch (e) {}
4651        localStorage.removeItem(ACCOUNT_ID_KEY);
4652        localStorage.removeItem('microsite_account_email');
4653        localStorage.removeItem('microsite_session_expires_at');
4654        window.location.href = '/';
4655      }
4656    });
4657  }
4658
4659  window.updateNavPlanBadge = function (plan) {
4660    var badge = document.getElementById('navPlanBadge');
4661    var profileBadge = document.getElementById('profilePlanBadge');
4662    var isPro = plan === 'pro';
4663    if (badge) badge.classList.toggle('hidden', !isPro);
4664    if (profileBadge) profileBadge.classList.toggle('hidden', !isPro);
4665    var menuBranding = document.getElementById('navMenuBranding');
4666    if (menuBranding) menuBranding.classList.toggle('hidden', !isPro);
4667  };
4668
4669  if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) {
4670    window.updateNavPlanBadge('pro');
4671  }
4672
4673  window.updateNavProfileAvatar = function (meta) {
4674    var btn = document.getElementById('navProfileMenuBtn');
4675    var img = document.getElementById('navProfileAvatarImg');
4676    var icon = document.getElementById('navProfileAvatarIcon');
4677    if (!btn) return;
4678    var label = (meta && meta.displayName) || 'Account menu';
4679    btn.setAttribute('aria-label', label);
4680    btn.setAttribute('title', label);
4681    btn.setAttribute('data-nav-tooltip', label);
4682    var url = meta && meta.avatarUrl ? meta.avatarUrl : '';
4683    if (url && img) {
4684      img.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 't=' + Date.now();
4685      img.classList.remove('hidden');
4686      if (icon) icon.classList.add('hidden');
4687    } else if (img && icon) {
4688      img.classList.add('hidden');
4689      img.removeAttribute('src');
4690      icon.classList.remove('hidden');
4691    }
4692  };
4693})();
4694</script>
4694<script>
4695(function () {
4696  var menus = Array.prototype.slice.call(document.querySelectorAll('.nav-marketing-dropdown'));
4697  if (!menus.length) return;
4698
4699  function closeMenu(menu) {
4700    if (menu) menu.open = false;
4701  }
4702
4703  function closeOthers(current) {
4704    menus.forEach(function (menu) {
4705      if (menu !== current) closeMenu(menu);
4706    });
4707  }
4708
4709  menus.forEach(function (menu) {
4710    var summary = menu.querySelector('summary');
4711    if (!summary) return;
4712    menu.addEventListener('toggle', function () {
4713      if (menu.open) closeOthers(menu);
4714    });
4715    summary.addEventListener('keydown', function (e) {
4716      if (e.key === 'Escape') {
4717        closeMenu(menu);
4718        summary.focus();
4719      }
4720    });
4721    menu.querySelectorAll('a').forEach(function (link) {
4722      link.addEventListener('click', function () {
4723        closeMenu(menu);
4724      });
4725    });
4726  });
4727
4728  document.addEventListener('click', function (e) {
4729    menus.forEach(function (menu) {
4730      if (menu.open && !menu.contains(e.target)) closeMenu(menu);
4731    });
4732  });
4733  document.addEventListener('keydown', function (e) {
4734    if (e.key === 'Escape') menus.forEach(closeMenu);
4735  });
4736})();
4737</script>
4737<script>
4738(function () {
4739  var nav = document.querySelector('.site-primary-nav');
4740  var btn = document.getElementById('navMobileMenuBtn');
4741  var menu = document.getElementById('navPrimaryLinks');
4742  if (!nav || !btn || !menu) return;
4743  function close() {
4744    nav.classList.remove('is-mobile-open');
4745    btn.setAttribute('aria-expanded', 'false');
4746  }
4747  function open() {
4748    nav.classList.add('is-mobile-open');
4749    btn.setAttribute('aria-expanded', 'true');
4750  }
4751  btn.addEventListener('click', function (e) {
4752    e.stopPropagation();
4753    nav.classList.contains('is-mobile-open') ? close() : open();
4754  });
4755  menu.querySelectorAll('a, button').forEach(function (item) {
4756    item.addEventListener('click', function () {
4757      if (window.matchMedia('(max-width: 900px)').matches) close();
4758    });
4759  });
4760  document.addEventListener('click', function (e) {
4761    if (!nav.classList.contains('is-mobile-open')) return;
4762    if (!nav.contains(e.target)) close();
4763  });
4764  document.addEventListener('keydown', function (e) {
4765    if (e.key === 'Escape') close();
4766  });
4767})();
4768</script>
4768<script>
4769(function () {
4770  var nav = document.querySelector('.site-primary-nav');
4771  if (!nav) return;
4772  function syncBreadcrumbOffset() {
4773    document.documentElement.style.setProperty('--site-primary-nav-height', Math.ceil(nav.getBoundingClientRect().height) + 'px');
4774  }
4775  syncBreadcrumbOffset();
4776  window.addEventListener('resize', syncBreadcrumbOffset);
4777  if ('ResizeObserver' in window) {
4778    new ResizeObserver(syncBreadcrumbOffset).observe(nav);
4779  }
4780})();
4781</script>
4781<script>
4782(function () {
4783  var STORAGE_KEY = 'microsite_nav_sidebar_collapsed';
4784  var WIDTH_KEY = 'microsite_nav_sidebar_width';
4785  var buttons = Array.prototype.slice.call(document.querySelectorAll('[data-nav-sidebar-toggle]'));
4786  var resizer = document.querySelector('[data-nav-sidebar-resizer]');
4787  var hoverLabel = null;
4788  var minWidth = 288;
4789  var maxWidth = 380;
4790  function clampWidth(value) {
4791    var width = Number(value) || 288;
4792    return Math.max(minWidth, Math.min(maxWidth, width));
4793  }
4794  function applyWidth(value) {
4795    var width = clampWidth(value);
4796    document.documentElement.style.setProperty('--nav-sidebar-width', width + 'px');
4797    if (resizer) resizer.setAttribute('aria-valuenow', String(width));
4798  }
4799  function isCollapsed() {
4800    var defaultCollapsed = document.body.classList.contains('share-public-page');
4801    if (defaultCollapsed) return true;
4802    try {
4803      var stored = localStorage.getItem(STORAGE_KEY);
4804      if (stored === '1') return true;
4805      if (stored === '0') return false;
4806      return defaultCollapsed;
4807    } catch (e) { return defaultCollapsed; }
4808  }
4809  function setCollapsed(collapsed) {
4810    document.body.classList.toggle('nav-sidebar-collapsed', !!collapsed);
4811    buttons.forEach(function (button) {
4812      button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
4813      button.setAttribute('aria-label', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
4814      button.setAttribute('title', collapsed ? 'Expand sidebar' : 'Collapse sidebar');
4815    });
4816  }
4817  window.micrositeApplyNavSidebarState = function () {
4818    try { applyWidth(localStorage.getItem(WIDTH_KEY)); } catch (e) { applyWidth(288); }
4819    setCollapsed(isCollapsed());
4820  };
4821  buttons.forEach(function (button) {
4822    button.addEventListener('click', function () {
4823      var collapsed = !document.body.classList.contains('nav-sidebar-collapsed');
4824      try { localStorage.setItem(STORAGE_KEY, collapsed ? '1' : '0'); } catch (e) {}
4825      setCollapsed(collapsed);
4826    });
4827  });
4828  function ensureHoverLabel() {
4829    if (hoverLabel) return hoverLabel;
4830    hoverLabel = document.createElement('div');
4831    hoverLabel.className = 'nav-collapsed-hover-label';
4832    hoverLabel.hidden = true;
4833    document.body.appendChild(hoverLabel);
4834    return hoverLabel;
4835  }
4836  function hideHoverLabel() {
4837    if (!hoverLabel) return;
4838    hoverLabel.hidden = true;
4839    hoverLabel.textContent = '';
4840  }
4841  function showHoverLabel(item) {
4842    if (!document.body.classList.contains('nav-sidebar-collapsed')) return;
4843    if (window.matchMedia('(max-width: 900px)').matches) return;
4844    var label = item.getAttribute('data-nav-tooltip') || item.getAttribute('aria-label') || item.getAttribute('title') || '';
4845    if (!label) return;
4846    var el = ensureHoverLabel();
4847    var rect = item.getBoundingClientRect();
4848    el.textContent = label;
4849    el.hidden = false;
4850    el.style.left = Math.round(rect.right + 10) + 'px';
4851    el.style.top = Math.round(rect.top + (rect.height / 2)) + 'px';
4852  }
4853  document.querySelectorAll('[data-nav-tooltip]').forEach(function (item) {
4854    item.addEventListener('mouseenter', function () { showHoverLabel(item); });
4855    item.addEventListener('mouseover', function () { showHoverLabel(item); });
4856    item.addEventListener('pointerenter', function () { showHoverLabel(item); });
4857    item.addEventListener('focus', function () { showHoverLabel(item); });
4858    item.addEventListener('mouseleave', hideHoverLabel);
4859    item.addEventListener('mouseout', hideHoverLabel);
4860    item.addEventListener('pointerleave', hideHoverLabel);
4861    item.addEventListener('blur', hideHoverLabel);
4862  });
4863  window.addEventListener('resize', hideHoverLabel);
4864  window.addEventListener('scroll', hideHoverLabel, true);
4865  if (resizer) {
4866    var startX = 0;
4867    var startWidth = 288;
4868    var dragging = false;
4869    function currentWidth() {
4870      return clampWidth(parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nav-sidebar-width')) || 288);
4871    }
4872    function saveWidth(width) {
4873      try { localStorage.setItem(WIDTH_KEY, String(clampWidth(width))); } catch (e) {}
4874    }
4875    function onPointerMove(event) {
4876      if (!dragging) return;
4877      var next = clampWidth(startWidth + event.clientX - startX);
4878      applyWidth(next);
4879    }
4880    function onPointerUp() {
4881      if (!dragging) return;
4882      dragging = false;
4883      document.body.classList.remove('nav-sidebar-resizing');
4884      saveWidth(currentWidth());
4885      window.removeEventListener('pointermove', onPointerMove);
4886      window.removeEventListener('pointerup', onPointerUp);
4887    }
4888    resizer.addEventListener('pointerdown', function (event) {
4889      if (document.body.classList.contains('nav-sidebar-collapsed')) return;
4890      if (window.matchMedia('(max-width: 900px)').matches) return;
4891      dragging = true;
4892      startX = event.clientX;
4893      startWidth = currentWidth();
4894      document.body.classList.add('nav-sidebar-resizing');
4895      resizer.setPointerCapture?.(event.pointerId);
4896      window.addEventListener('pointermove', onPointerMove);
4897      window.addEventListener('pointerup', onPointerUp);
4898    });
4899    resizer.addEventListener('keydown', function (event) {
4900      if (document.body.classList.contains('nav-sidebar-collapsed')) return;
4901      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
4902      event.preventDefault();
4903      var delta = event.key === 'ArrowRight' ? 16 : -16;
4904      var next = clampWidth(currentWidth() + delta);
4905      applyWidth(next);
4906      saveWidth(next);
4907    });
4908  }
4909  window.micrositeApplyNavSidebarState();
4910})();
4911</script>
4911<script>
4912(function () {
4913  function apply(dark) {
4914    document.documentElement.classList.toggle('theme-dark', !!dark);
4915    Array.prototype.slice.call(document.querySelectorAll('[data-nav-theme-toggle]')).forEach(function (button) {
4916      button.setAttribute('aria-pressed', dark ? 'true' : 'false');
4917      button.setAttribute('aria-label', dark ? 'Switch to light mode' : 'Switch to dark mode');
4918      button.setAttribute('title', dark ? 'Switch to light mode' : 'Switch to dark mode');
4919    });
4920  }
4921  apply(document.documentElement.classList.contains('theme-dark'));
4922  document.addEventListener('click', function (event) {
4923    var button = event.target && event.target.closest ? event.target.closest('[data-nav-theme-toggle]') : null;
4924    if (!button) return;
4925    var dark = !document.documentElement.classList.contains('theme-dark');
4926    try { localStorage.setItem('microsite_theme', dark ? 'dark' : 'light'); } catch (e) {}
4927    apply(dark);
4928  });
4929})();
4930</script>
4930<script>
4931(function () {
4932  var badge = document.getElementById('navPublishingBadge');
4933  if (!badge) return;
4934  var CACHE_KEY = 'microsite_publishing_queue_cache';
4935  function paint(count) {
4936    if (!(count > 0)) { badge.hidden = true; return; }
4937    badge.textContent = count > 99 ? '99+' : String(count);
4938    badge.hidden = false;
4939  }
4940  function refresh() {
4941    var accountId = '';
4942    try { accountId = localStorage.getItem('microsite_account_id') || ''; } catch (e) {}
4943    if (!accountId) { badge.hidden = true; return; }
4944    try {
4945      var cached = JSON.parse(sessionStorage.getItem(CACHE_KEY) || 'null');
4946      if (cached && (Date.now() - cached.at) < 300000) { paint(cached.count); return; }
4947    } catch (e) {}
4948    fetch('/account/publishing/posts?state=scheduled', { headers: { 'x-account-id': accountId } })
4949      .then(function (res) { return res.ok ? res.json() : null; })
4950      .then(function (data) {
4951        if (!data || !data.ok) return;
4952        var count = (data.posts || []).length;
4953        try { sessionStorage.setItem(CACHE_KEY, JSON.stringify({ at: Date.now(), count: count })); } catch (e) {}
4954        paint(count);
4955      })
4956      .catch(function () {});
4957  }
4958  refresh();
4959  window.addEventListener('microsite-account-updated', refresh);
4960})();
4961</script>
4961<script>
4962(function () {
4963  var key = "microsite_launch_banner_dismissed";
4964  var banner = document.getElementById('launchBanner');
4965  if (!banner) return;
4966  if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) {
4967    banner.remove();
4968    return;
4969  }
4970  if (localStorage.getItem(key) === '1') {
4971    banner.remove();
4972    return;
4973  }
4974  var btn = banner.querySelector('[data-dismiss-banner]');
4975  if (btn) btn.addEventListener('click', function () {
4976    localStorage.setItem(key, '1');
4977    banner.remove();
4978  });
4979})();
4980</script>
4980<script>
4981(function () {
4982  var DISMISS_KEY = 'microsite_usage_dismissed';
4983  var host = document.getElementById('upgradeUsageHost');
4984  if (!host) return;
4985
4986  function dismissedIds() {
4987    try {
4988      var raw = localStorage.getItem(DISMISS_KEY);
4989      return raw ? JSON.parse(raw) : {};
4990    } catch (e) { return {}; }
4991  }
4992
4993  function dismissPrompt(id) {
4994    var map = dismissedIds();
4995    map[id] = Date.now();
4996    try { localStorage.setItem(DISMISS_KEY, JSON.stringify(map)); } catch (e) {}
4997    renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes || 0);
4998  }
4999
5000  function pendingUploadPrompts(usage, bytes) {
5001    var isPro = (usage && usage.isPro) || (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro());
5002    if (isPro || !bytes) return [];
5003    var limit = (usage && usage.perLinkLimit) || 1073741824;
5004    var limitLabel = (usage && usage.perLinkLimitLabel) || '1 GB';
5005    var ratio = bytes / limit;
5006    if (ratio >= 1) {
5007      return [{
5008        id: 'upload-size',
5009        level: 'urgent',
5010        title: 'File too large for Free',
5011        message: 'Local supports uploads up to ' + limitLabel + '. Pro adds 100 GB of cloud storage and supports up to 25 GB per link.',
5012        ctaLabel: 'Compare plans',
5013        ctaHref: '/plans',
5014      }];
5015    }
5016    if (ratio >= 0.85) {
5017      return [{
5018        id: 'upload-size',
5019        level: 'warn',
5020        title: 'Large upload',
5021        message: 'This upload is ' + formatBytes(bytes) + ' — close to your Local ' + limitLabel + ' cap. Pro supports up to 25 GB per link.',
5022        ctaLabel: 'See plans',
5023        ctaHref: '/plans',
5024      }];
5025    }
5026    return [];
5027  }
5028
5029  function formatBytes(n) {
5030    if (n >= 1073741824) return (Math.round(n / 1073741824 * 10) / 10) + ' GB';
5031    if (n >= 1048576) return Math.round(n / 1048576) + ' MB';
5032    return Math.round(n / 1024) + ' KB';
5033  }
5034
5035  function renderUsage(usage, pendingBytes) {
5036    if (!host) return;
5037    if (typeof window.micrositeIsPro === 'function' && window.micrositeIsPro()) {
5038      host.hidden = true;
5039      host.innerHTML = '';
5040      return;
5041    }
5042    if (!usage || !usage.hasPrompts) {
5043      var pendingOnly = pendingUploadPrompts(usage, pendingBytes);
5044      if (!pendingOnly.length) { host.hidden = true; host.innerHTML = ''; return; }
5045      usage = usage || { prompts: [] };
5046    }
5047    var dismissed = dismissedIds();
5048    var extra = pendingUploadPrompts(usage, pendingBytes);
5049    var merged = (usage.prompts || []).concat(extra);
5050    var seen = {};
5051    var prompts = merged.filter(function (p) {
5052      if (!p || !p.id || seen[p.id] || dismissed[p.id]) return false;
5053      seen[p.id] = true;
5054      return true;
5055    });
5056    if (!prompts.length) { host.hidden = true; host.innerHTML = ''; return; }
5057    var top = prompts[0];
5058    var level = top.level === 'urgent' ? 'upgrade-usage-banner--urgent' : (top.level === 'warn' ? 'upgrade-usage-banner--warn' : '');
5059    host.innerHTML = '<div class="upgrade-usage-banner ' + level + '">' +
5060      '<div class="upgrade-usage-banner-body">' +
5061      '<p class="upgrade-usage-banner-title">' + top.title + '</p>' +
5062      '<p class="upgrade-usage-banner-msg">' + top.message + '</p>' +
5063      (prompts.length > 1 ? '<p class="upgrade-usage-banner-more">+' + (prompts.length - 1) + ' more tip' + (prompts.length > 2 ? 's' : '') + '</p>' : '') +
5064      '</div>' +
5065      '<div class="upgrade-usage-banner-actions">' +
5066      '<a class="upgrade-usage-banner-cta" href="' + (top.ctaHref || '/plans') + '">' + (top.ctaLabel || 'View plans') + '</a>' +
5067      '<button type="button" class="upgrade-usage-banner-dismiss" data-dismiss-usage="' + top.id + '">Dismiss</button>' +
5068      '</div></div>';
5069    host.hidden = false;
5070    host.querySelector('[data-dismiss-usage]')?.addEventListener('click', function () {
5071      dismissPrompt(top.id);
5072    });
5073  }
5074
5075  window.micrositeApplyUsage = function (usage) {
5076    window.micrositeUsage = usage || null;
5077    renderUsage(usage, window.micrositeUsagePendingBytes || 0);
5078    document.dispatchEvent(new CustomEvent('microsite-usage-updated', { detail: usage }));
5079  };
5080
5081  window.micrositeSetPendingUploadBytes = function (bytes) {
5082    window.micrositeUsagePendingBytes = bytes || 0;
5083    renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes);
5084  };
5085
5086  document.addEventListener('microsite-plan-updated', function () {
5087    renderUsage(window.micrositeUsage, window.micrositeUsagePendingBytes || 0);
5088  });
5089
5090  try {
5091    if (window.micrositeUsage) renderUsage(window.micrositeUsage, 0);
5092  } catch (e) { /* ignore */ }
5093})();
5094</script>
5094<script>
5095(function () {
5096  function esc(s) {
5097    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
5098  }
5099
5100  function formatStatCount(n) {
5101    const value = Number(n) || 0;
5102    if (value >= 1000000) return (value / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
5103    if (value >= 1000) return (value / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
5104    return String(value);
5105  }
5106
5107  window.micrositeAchievementLabel = function (item) {
5108    if (!item) return '';
5109    if (item.unlocked) return 'Done';
5110    return formatStatCount(item.value) + ' / ' + formatStatCount(item.target);
5111  };
5112
5113  window.micrositeProcessAchievements = function (items) {
5114    if (!Array.isArray(items) || !items.length) return;
5115    items.forEach(function (item) {
5116      if (!item || !item.id) return;
5117      var key = 'microsite_achievement_seen_' + item.id + '_' + (item.unlockedAt || '');
5118      try {
5119        if (localStorage.getItem(key) === '1') return;
5120        localStorage.setItem(key, '1');
5121      } catch (e) {}
5122      var label = item.label || 'Achievement unlocked';
5123      var message = 'Achievement unlocked: ' + label;
5124      if (typeof window.micrositeToast === 'function') {
5125        window.micrositeToast(message, { duration: 9000 });
5126      }
5127    });
5128  };
5129
5130  async function shareAchievement(item) {
5131    if (!item || !item.shareUrl) return;
5132    var title = (item.label || 'Achievement') + ' unlocked on VideoM8';
5133    var shareUrl = item.shareUrl + (item.shareUrl.indexOf('?') >= 0 ? '&' : '?') + 'card=achievement';
5134    if (typeof window.micrositeOpenShareModal === 'function') {
5135      window.micrositeOpenShareModal({
5136        shareUrl: shareUrl,
5137        title: title,
5138        embedSupported: false,
5139        initialTab: 'social',
5140      });
5141      return;
5142    }
5143    try {
5144      await navigator.clipboard.writeText(shareUrl);
5145      if (typeof window.micrositeToast === 'function') window.micrositeToast('Achievement link copied.');
5146    } catch (e) {
5147      window.prompt('Copy achievement link', shareUrl);
5148    }
5149  }
5150
5151  window.micrositeRenderAchievementsPage = function (payload) {
5152    var achievements = payload.achievements || {};
5153    var sets = Array.isArray(achievements.sets) ? achievements.sets : [];
5154    var grid = document.getElementById('achGrid');
5155    var unlockedEl = document.getElementById('achUnlocked');
5156    var totalEl = document.getElementById('achTotal');
5157    var nextEl = document.getElementById('achNext');
5158    if (unlockedEl) unlockedEl.textContent = achievements.unlockedCount || 0;
5159    if (totalEl) totalEl.textContent = achievements.totalCount || 0;
5160    if (nextEl) nextEl.textContent = achievements.next ? achievements.next.label : 'All done';
5161    if (!grid) return;
5162    if (!sets.length) {
5163      grid.innerHTML = '<div class="ach-set"><div class="ach-set-head"><h2 class="ach-set-title">No achievements yet</h2></div></div>';
5164      return;
5165    }
5166    grid.innerHTML = sets.map(function (set) {
5167      return '<section class="ach-set">' +
5168        '<div class="ach-set-head"><h2 class="ach-set-title">' + esc(set.label) + '</h2><span class="ach-set-count">' +
5169        esc((set.unlockedCount || 0) + ' / ' + (set.totalCount || 0)) + '</span></div>' +
5170        '<ul class="ach-list">' + (set.items || []).map(function (item) {
5171          var progress = Math.max(0, Math.min(100, Number(item.progress) || 0));
5172          var shareAction = item.unlocked && item.shareUrl
5173            ? '<button type="button" class="ach-share" data-achievement-share="' + esc(item.id) + '">Share moment</button>'
5174            : '';
5175          return '<li class="ach-item' + (item.unlocked ? ' is-unlocked' : ' is-locked') + '">' +
5176            '<div class="ach-card-top">' +
5177            '<span class="ach-mark" aria-hidden="true">' + (item.unlocked ? '✓' : '') + '</span>' +
5178            '<span class="ach-pill">' + (item.unlocked ? 'Unlocked' : 'Locked') + '</span>' +
5179            '</div>' +
5180            '<span><span class="ach-name">' + esc(item.label) + '</span><span class="ach-desc">' + esc(item.description) + '</span></span>' +
5181            '<span class="ach-card-bottom">' +
5182            '<span class="ach-value">' + esc(window.micrositeAchievementLabel(item)) + '</span>' +
5183            '<span class="ach-bar"><span style="width:' + progress + '%"></span></span>' +
5184            shareAction +
5185            '</span>' +
5186            '</li>';
5187        }).join('') + '</ul></section>';
5188    }).join('');
5189    grid.querySelectorAll('[data-achievement-share]').forEach(function (button) {
5190      button.addEventListener('click', function () {
5191        var id = button.getAttribute('data-achievement-share') || '';
5192        var found = null;
5193        sets.some(function (set) {
5194          return (set.items || []).some(function (item) {
5195            if (item && item.id === id) {
5196              found = item;
5197              return true;
5198            }
5199            return false;
5200          });
5201        });
5202        shareAchievement(found);
5203      });
5204    });
5205  };
5206})();
5207</script>
5207<script>
5208(function () {
5209  var toastHost = document.getElementById('micrositeToastHost');
5210  var cmdkRoot = document.getElementById('micrositeCmdk');
5211  var cmdkInput = document.getElementById('micrositeCmdkInput');
5212  var cmdkList = document.getElementById('micrositeCmdkList');
5213  var cmdkSelected = 0;
5214  var cmdkItems = [];
5215  var stuffCache = null;
5216  var stuffCacheAt = 0;
5217
5218  var NAV_ITEMS = [
5219    { id: 'home', label: 'Home', hint: 'Marketing homepage', href: '/', aliases: 'dashboard start landing', icon: 'home' },
5220    { id: 'record', label: 'Record', hint: 'Record screen and camera video', href: '/record', signedIn: true, aliases: 'camera screen studio video', icon: 'video' },
5221    { id: 'upload', label: 'Upload', hint: 'Upload files or host a site', href: '/upload', signedIn: true, aliases: 'file site zip publish', icon: 'upload' },
5222    { id: 'stuff', label: 'Library', hint: 'Your links', href: '/library', signedIn: true, aliases: 'stuff links files folders', icon: 'grid' },
5223    { id: 'activity', label: 'Activity', hint: 'Recent events', href: '/activity', signedIn: true, aliases: 'notifications opened comments reactions', icon: 'bell' },
5224    { id: 'engagement', label: 'Analytics', hint: 'Pro', href: '/engagement', signedIn: true, pro: true, aliases: 'engagement leads viewers visits', icon: 'chart' },
5225    { id: 'features', label: 'Features', hint: 'Product overview', href: '/features', aliases: 'product overview', icon: 'sparkles' },
5226    { id: 'blog', label: 'Blog', hint: 'Guides and workflows', href: '/blog', aliases: 'articles guides', icon: 'document' },
5227    { id: 'achievements', label: 'Achievements', hint: 'Settings', href: '/achievements', signedIn: true, aliases: 'badges progress', icon: 'badge' },
5228    { id: 'settings', label: 'Settings', hint: 'Account', href: '/settings', signedIn: true, aliases: 'personal workspace team account preferences', icon: 'grid' },
5229    { id: 'profile', label: 'Public Profile', hint: 'Your page', href: '/profile', signedIn: true, aliases: 'bio public page', icon: 'user' },
5230    { id: 'brand', label: 'Brand Kit', hint: 'Pro', href: '/brand', signedIn: true, pro: true, aliases: 'branding theme colours logo', icon: 'sparkles' },
5231    { id: 'team', label: 'Team', hint: 'Workspace', href: '/team', signedIn: true, aliases: 'members invites workspace', icon: 'users' },
5232    { id: 'plans', label: 'Plan & billing', hint: 'Account', href: '/plans', signedIn: true, aliases: 'billing subscription account', icon: 'card' },
5233    { id: 'pricing', label: 'Pricing', hint: 'Compare plans', href: '/pricing', aliases: 'plans upgrade price', icon: 'tag' },
5234  ];
5235
5236  var CMDK_ICONS = {
5237    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>',
5238    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>',
5239    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>',
5240    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>',
5241    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>',
5242    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>',
5243    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>',
5244    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>',
5245    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>',
5246    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>',
5247    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>',
5248    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>',
5249    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>',
5250    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>',
5251    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>',
5252  };
5253
5254  function accountId() {
5255    try { return localStorage.getItem('microsite_account_id') || ''; } catch (e) { return ''; }
5256  }
5257
5258  function isPro() {
5259    return typeof window.micrositeIsPro === 'function' && window.micrositeIsPro();
5260  }
5261
5262  function escapeHtml(value) {
5263    return String(value == null ? '' : value)
5264      .replace(/&/g, '&amp;')
5265      .replace(/</g, '&lt;')
5266      .replace(/>/g, '&gt;')
5267      .replace(/"/g, '&quot;');
5268  }
5269
5270  function cmdkGroupLabel(type) {
5271    if (type === 'folder') return 'Folders';
5272    if (type === 'link') return 'Shared links';
5273    return 'Pages';
5274  }
5275
5276  function cmdkIconHtml(item) {
5277    var key = item.icon || item.type || 'link';
5278    return CMDK_ICONS[key] || CMDK_ICONS.link;
5279  }
5280
5281  function cmdkShortcutHtml(item) {
5282    return '<span class="ms-cmdk-shortcut"><kbd>Enter</kbd>' + (item.external ? '<kbd>↗</kbd>' : '') + '</span>';
5283  }
5284
5285  window.micrositeToast = function (message, options) {
5286    options = options || {};
5287    if (!toastHost || !message) return null;
5288    var el = document.createElement('div');
5289    el.className = 'ms-toast';
5290    el.innerHTML = '<span class="ms-toast-msg"></span><div class="ms-toast-actions"></div>';
5291    el.querySelector('.ms-toast-msg').textContent = message;
5292    var actions = el.querySelector('.ms-toast-actions');
5293    var undoFn = options.undo;
5294    if (typeof undoFn === 'function') {
5295      var undoBtn = document.createElement('button');
5296      undoBtn.type = 'button';
5297      undoBtn.className = 'ms-toast-btn ms-toast-btn--undo';
5298      undoBtn.textContent = options.undoLabel || 'Undo';
5299      undoBtn.addEventListener('click', function () {
5300        undoFn();
5301        el.remove();
5302      });
5303      actions.appendChild(undoBtn);
5304    }
5305    var dismiss = document.createElement('button');
5306    dismiss.type = 'button';
5307    dismiss.className = 'ms-toast-btn ms-toast-btn--dismiss';
5308    dismiss.textContent = 'Dismiss';
5309    dismiss.addEventListener('click', function () { el.remove(); });
5310    actions.appendChild(dismiss);
5311    toastHost.appendChild(el);
5312    var ttl = options.duration || (undoFn ? 10000 : 5000);
5313    var timer = window.setTimeout(function () { el.remove(); }, ttl);
5314    el.addEventListener('remove', function () { window.clearTimeout(timer); });
5315    return el;
5316  };
5317
5318  window.micrositeClearSkeleton = function (container) {
5319    if (!container) return;
5320    var overlay = container.querySelector('.ms-skeleton-overlay');
5321    if (overlay) overlay.remove();
5322    container.classList.remove('is-skeleton-loading');
5323    if (container.dataset.loading === 'skeleton') delete container.dataset.loading;
5324  };
5325
5326  window.micrositeShowSkeleton = function (container, variant, count) {
5327    if (!container) return;
5328    count = count || 3;
5329    var html = '';
5330    if (variant === 'stat') {
5331      html = Array(count).fill('<div class="ms-skeleton ms-skeleton-stat"></div>').join('');
5332    } else {
5333      html = Array(count).fill(
5334        '<div class="ms-skeleton-row ms-skeleton">' +
5335        '<div class="ms-skeleton-line ms-skeleton-line--md" style="margin:16px"></div>' +
5336        '<div class="ms-skeleton-line ms-skeleton-line--sm" style="margin:12px 16px 16px"></div></div>'
5337      ).join('');
5338    }
5339    if (container.dataset.skeletonMode === 'overlay') {
5340      window.micrositeClearSkeleton(container);
5341      var overlay = document.createElement('div');
5342      overlay.className = 'ms-skeleton-overlay';
5343      overlay.setAttribute('aria-hidden', 'true');
5344      overlay.innerHTML = html;
5345      container.appendChild(overlay);
5346      container.classList.add('is-skeleton-loading');
5347      container.dataset.loading = 'skeleton';
5348      return;
5349    }
5350    container.innerHTML = html;
5351    container.dataset.loading = 'skeleton';
5352  };
5353
5354  async function loadStuffForCmdk() {
5355    var id = accountId();
5356    if (!id) return [];
5357    if (stuffCache && Date.now() - stuffCacheAt < 60000) return stuffCache;
5358    try {
5359      var res = await fetch('/account/stuff', { headers: { 'x-account-id': id } });
5360      var data = await res.json().catch(function () { return {}; });
5361      if (!res.ok) return [];
5362      stuffCache = data || {};
5363      stuffCacheAt = Date.now();
5364      return stuffCache;
5365    } catch (e) { return []; }
5366  }
5367
5368  function buildCmdkItems(query) {
5369    var q = (query || '').trim().toLowerCase();
5370    var signedIn = !!accountId();
5371    var items = [];
5372    NAV_ITEMS.forEach(function (nav) {
5373      if (nav.signedIn && !signedIn) return;
5374      if (nav.pro && !isPro()) return;
5375      var hay = (nav.label + ' ' + nav.hint + ' ' + nav.href + ' ' + (nav.aliases || '')).toLowerCase();
5376      if (q && hay.indexOf(q) < 0) return;
5377      items.push({ type: 'nav', label: nav.label, hint: nav.hint, href: nav.href, icon: nav.icon });
5378    });
5379    ((stuffCache && stuffCache.folders) || []).forEach(function (folder) {
5380      var hay = [folder.name, 'folder', 'library'].join(' ').toLowerCase();
5381      if (q && hay.indexOf(q) < 0) return;
5382      items.push({
5383        type: 'folder',
5384        label: folder.name || 'Folder',
5385        hint: 'Library folder',
5386        href: '/library?folder=' + encodeURIComponent(folder.folderId || ''),
5387        icon: 'folder',
5388      });
5389    });
5390    ((stuffCache && stuffCache.items) || []).forEach(function (row) {
5391      var hay = [row.displayTitle, row.pageTitle, row.label, row.slug, row.type, row.kind, row.shareUrl, (row.tags || []).join(' ')].join(' ').toLowerCase();
5392      if (q && hay.indexOf(q) < 0) return;
5393      items.push({
5394        type: 'link',
5395        label: row.displayTitle || row.pageTitle || row.label || row.slug || 'Shared link',
5396        hint: row.kind || row.type || 'Link',
5397        href: row.shareUrl,
5398        external: true,
5399        icon: 'link',
5400      });
5401    });
5402    return items;
5403  }
5404
5405  function renderCmdkList() {
5406    if (!cmdkList) return;
5407    cmdkItems = buildCmdkItems(cmdkInput ? cmdkInput.value : '');
5408    cmdkSelected = 0;
5409    if (!cmdkItems.length) {
5410      cmdkList.innerHTML = '<li class="ms-cmdk-empty">No matches</li>';
5411      return;
5412    }
5413    var lastGroup = '';
5414    cmdkList.innerHTML = cmdkItems.map(function (item, i) {
5415      var group = cmdkGroupLabel(item.type);
5416      var groupHtml = group === lastGroup ? '' : '<li class="ms-cmdk-group-label" role="presentation">' + escapeHtml(group) + '</li>';
5417      lastGroup = group;
5418      return groupHtml + '<li class="ms-cmdk-item" role="option" data-cmdk-index="' + i + '" aria-selected="' + (i === 0 ? 'true' : 'false') + '">' +
5419        '<span class="ms-cmdk-icon" aria-hidden="true">' + cmdkIconHtml(item) + '</span>' +
5420        '<span class="ms-cmdk-item-main"><span class="ms-cmdk-item-title">' + escapeHtml(item.label) + '</span><span class="ms-cmdk-item-hint">' +
5421        escapeHtml(item.hint) + '</span></span>' +
5422        cmdkShortcutHtml(item) + '</li>';
5423    }).join('');
5424    cmdkList.querySelectorAll('.ms-cmdk-item').forEach(function (el) {
5425      el.addEventListener('mouseenter', function () {
5426        cmdkSelected = Number(el.getAttribute('data-cmdk-index')) || 0;
5427        updateCmdkSelection();
5428      });
5429      el.addEventListener('click', function () {
5430        cmdkSelected = Number(el.getAttribute('data-cmdk-index')) || 0;
5431        runCmdkSelection();
5432      });
5433    });
5434  }
5435
5436  function updateCmdkSelection() {
5437    if (!cmdkList) return;
5438    cmdkList.querySelectorAll('.ms-cmdk-item').forEach(function (el, i) {
5439      el.setAttribute('aria-selected', i === cmdkSelected ? 'true' : 'false');
5440    });
5441    var active = cmdkList.querySelector('[data-cmdk-index="' + cmdkSelected + '"]');
5442    if (active) active.scrollIntoView({ block: 'nearest' });
5443  }
5444
5445  function runCmdkSelection() {
5446    var item = cmdkItems[cmdkSelected];
5447    if (!item) return;
5448    closeCmdk();
5449    if (item.external && item.href) {
5450      window.open(item.href, '_blank', 'noopener');
5451      return;
5452    }
5453    if (item.href) window.location.href = item.href;
5454  }
5455
5456  var cmdkTriggerEl = null;
5457
5458  function openCmdk(initialQuery) {
5459    if (!cmdkRoot) return;
5460    cmdkTriggerEl = document.activeElement;
5461    cmdkRoot.hidden = false;
5462    if (cmdkInput) {
5463      cmdkInput.value = initialQuery || '';
5464      cmdkInput.focus();
5465    }
5466    renderCmdkList();
5467    loadStuffForCmdk().then(function () {
5468      renderCmdkList();
5469    });
5470  }
5471
5472  function closeCmdk() {
5473    if (!cmdkRoot) return;
5474    cmdkRoot.hidden = true;
5475    if (cmdkTriggerEl && typeof cmdkTriggerEl.focus === 'function') cmdkTriggerEl.focus();
5476    cmdkTriggerEl = null;
5477  }
5478
5479  function cmdkFocusables() {
5480    var panel = cmdkRoot.querySelector('.ms-cmdk-panel');
5481    if (!panel) return [];
5482    return Array.prototype.filter.call(
5483      panel.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'),
5484      function (el) { return !el.disabled && !el.hidden && el.offsetParent !== null; }
5485    );
5486  }
5487
5488  if (cmdkRoot) {
5489    cmdkRoot.querySelectorAll('[data-cmdk-close]').forEach(function (el) {
5490      el.addEventListener('click', closeCmdk);
5491    });
5492    if (cmdkInput) {
5493      cmdkInput.addEventListener('input', renderCmdkList);
5494      cmdkInput.addEventListener('keydown', function (e) {
5495        if (e.key === 'ArrowDown') { e.preventDefault(); cmdkSelected = Math.min(cmdkSelected + 1, cmdkItems.length - 1); updateCmdkSelection(); }
5496        if (e.key === 'ArrowUp') { e.preventDefault(); cmdkSelected = Math.max(cmdkSelected - 1, 0); updateCmdkSelection(); }
5497        if (e.key === 'Enter') { e.preventDefault(); runCmdkSelection(); }
5498        if (e.key === 'Escape') { e.preventDefault(); closeCmdk(); }
5499      });
5500    }
5501  }
5502
5503  document.addEventListener('keydown', function (e) {
5504    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
5505      e.preventDefault();
5506      if (cmdkRoot && !cmdkRoot.hidden) closeCmdk();
5507      else openCmdk();
5508    }
5509    if (e.key === 'Escape' && cmdkRoot && !cmdkRoot.hidden) closeCmdk();
5510    if (e.key === 'Tab' && cmdkRoot && !cmdkRoot.hidden) {
5511      var focusables = cmdkFocusables();
5512      if (!focusables.length) return;
5513      var first = focusables[0];
5514      var last = focusables[focusables.length - 1];
5515      var active = document.activeElement;
5516      var panel = cmdkRoot.querySelector('.ms-cmdk-panel');
5517      if (e.shiftKey && (active === first || !panel.contains(active))) {
5518        e.preventDefault();
5519        last.focus();
5520      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
5521        e.preventDefault();
5522        first.focus();
5523      }
5524    }
5525  });
5526
5527  document.querySelectorAll('[data-open-cmdk-form]').forEach(function (form) {
5528    form.addEventListener('submit', function (e) {
5529      e.preventDefault();
5530      openCmdk();
5531    });
5532  });
5533
5534  document.querySelectorAll('[data-open-cmdk]').forEach(function (btn) {
5535    btn.addEventListener('click', function (e) {
5536      e.preventDefault();
5537      openCmdk();
5538    });
5539  });
5540
5541  document.querySelectorAll('[data-open-cmdk-input]').forEach(function (input) {
5542    input.addEventListener('focus', function () { openCmdk(); });
5543    input.addEventListener('keydown', function (e) {
5544      if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
5545        e.preventDefault();
5546        openCmdk(e.key);
5547      }
5548    });
5549  });
5550
5551  window.micrositeOpenCmdk = openCmdk;
5552  window.micrositeInvalidateStuffCache = function () { stuffCache = null; stuffCacheAt = 0; };
5553
5554  window.micrositeInitSortableList = function (listEl, options) {
5555    if (!listEl) return;
5556    options = options || {};
5557    var dragging = null;
5558    listEl.querySelectorAll('[data-drag-item]').forEach(function (row) {
5559      var handle = row.querySelector('[data-drag-handle]');
5560      if (!handle) return;
5561      handle.addEventListener('dragstart', function (e) {
5562        dragging = handle.closest('[data-drag-item]') || row;
5563        dragging.classList.add('is-dragging');
5564        if (e.dataTransfer) {
5565          e.dataTransfer.effectAllowed = 'move';
5566          e.dataTransfer.setData('text/plain', row.getAttribute('data-drag-id') || '');
5567        }
5568      });
5569      handle.addEventListener('dragend', function () {
5570        if (dragging) dragging.classList.remove('is-dragging');
5571        listEl.querySelectorAll('.is-drop-target').forEach(function (el) { el.classList.remove('is-drop-target'); });
5572        dragging = null;
5573      });
5574      row.addEventListener('dragover', function (e) {
5575        if (!dragging || dragging === row) return;
5576        e.preventDefault();
5577        row.classList.add('is-drop-target');
5578      });
5579      row.addEventListener('dragleave', function () { row.classList.remove('is-drop-target'); });
5580      row.addEventListener('drop', function (e) {
5581        e.preventDefault();
5582        row.classList.remove('is-drop-target');
5583        if (!dragging || dragging === row) return;
5584        var parent = row.parentNode;
5585        var rect = row.getBoundingClientRect();
5586        var before = e.clientY < rect.top + rect.height / 2;
5587        if (before) parent.insertBefore(dragging, row);
5588        else parent.insertBefore(dragging, row.nextSibling);
5589        if (typeof options.onReorder === 'function') options.onReorder(collectOrder());
5590      });
5591    });
5592
5593    function collectOrder() {
5594      return Array.from(listEl.querySelectorAll('[data-drag-item]')).map(function (el) {
5595        return el.getAttribute('data-drag-id') || '';
5596      }
5596).filter(Boolean);
5597    }
5598  };
5599})();
5600</script>
5600<script>
5601(function () {
5602  var ACCOUNT_ID_KEY = 'microsite_account_id';
5603  var READ_KEY = 'microsite_activity_read_at';
5604  var wrap = document.getElementById('navActivityLink');
5605  var badge = document.getElementById('navActivityBadge');
5606  var items = [];
5607  var pollTimer = null;
5608
5609  function readAt() {
5610    try { return localStorage.getItem(READ_KEY) || ''; } catch (e) { return ''; }
5611  }
5612
5613  async function setReadAt(iso) {
5614    var next = iso || new Date().toISOString();
5615    try { localStorage.setItem(READ_KEY, next); } catch (e) {}
5616    var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
5617    if (accountId) {
5618      try {
5619        var res = await fetch('/account/activity/read', {
5620          method: 'POST',
5621          headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
5622          body: JSON.stringify({ readAt: next }),
5623        });
5624        var data = await res.json().catch(function () { return {}; });
5625        if (res.ok && data.readAt) {
5626          next = data.readAt;
5627          try { localStorage.setItem(READ_KEY, next); } catch (e) {}
5628        }
5629      } catch (e) {}
5630    }
5631    updateBadge();
5632  }
5633
5634  function updateBadge() {
5635    if (!badge) return;
5636    var lastRead = readAt();
5637    var unread = items.some(function (it) { return it.at && (!lastRead || it.at > lastRead); });
5638    badge.hidden = !unread;
5639  }
5640
5641  async function loadActivity(markSeen) {
5642    var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
5643    if (!accountId || !wrap) return;
5644    try {
5645      var res = await fetch('/account/activity?limit=25&compact=1', { headers: { 'x-account-id': accountId } });
5646      var data = await res.json().catch(function () { return {}; });
5647      if (!res.ok) return;
5648      items = data.items || [];
5649      if (data.readAt) {
5650        try { localStorage.setItem(READ_KEY, data.readAt); } catch (e) {}
5651      }
5652      if (markSeen && items[0]?.at) setReadAt(items[0].at);
5653      updateBadge();
5654    } catch (e) {}
5655  }
5656
5657  function showForSignedIn() {
5658    if (!wrap) return;
5659    var accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
5660    wrap.classList.toggle('hidden', !accountId);
5661    if (accountId) {
5662      loadActivity(false);
5663      if (!pollTimer) pollTimer = window.setInterval(function () { loadActivity(false); }, 90000);
5664    } else if (pollTimer) {
5665      window.clearInterval(pollTimer);
5666      pollTimer = null;
5667    }
5668  }
5669
5670  window.addEventListener('storage', function (e) {
5671    if (e.key === ACCOUNT_ID_KEY) showForSignedIn();
5672    if (e.key === READ_KEY) updateBadge();
5673  });
5674  window.addEventListener('microsite-activity-read', updateBadge);
5675  window.addEventListener('microsite-auth-updated', showForSignedIn);
5676  document.addEventListener('DOMContentLoaded', showForSignedIn);
5677  if (document.readyState !== 'loading') showForSignedIn();
5678})();
5679</script>
5679
5680  
5680<script>
5681(function () {
5682  const ACCOUNT_ID_KEY = 'microsite_account_id';
5683  const ACCOUNT_EMAIL_KEY = 'microsite_account_email';
5684  const SESSION_EXPIRES_KEY = 'microsite_session_expires_at';
5685  const SESSION_TTL_MS = 2592000000;
5686  const accountModal = document.getElementById('accountModal');
5687  if (!accountModal) return;
5688
5689  const accountGuest = document.getElementById('accountGuest');
5690  const accountSignedIn = document.getElementById('accountSignedIn');
5691  const accountLoginForm = document.getElementById('accountLoginForm');
5692  const accountEmailStep = document.getElementById('accountEmailStep');
5693  const accountCodeStep = document.getElementById('accountCodeStep');
5694  const accountEmailInput = document.getElementById('accountEmail');
5695  const accountLoginCode = document.getElementById('accountLoginCode');
5696  const accountCodeEmail = document.getElementById('accountCodeEmail');
5697  const accountSendCodeBtn = document.getElementById('accountSendCodeBtn');
5698  const accountVerifyCodeBtn = document.getElementById('accountVerifyCodeBtn');
5699  const accountResendCodeBtn = document.getElementById('accountResendCodeBtn');
5700  const accountStatusEl = document.getElementById('accountStatus');
5701  const accountModalTitle = document.getElementById('accountModalTitle');
5702  const accountModalDesc = document.getElementById('accountModalDesc');
5703  const accountEmailDisplay = document.getElementById('accountEmailDisplay');
5704  const accountSignOutBtn = document.getElementById('accountSignOutBtn');
5705  const accountModalSignOutBtn = document.getElementById('accountModalSignOutBtn');
5706  const accountModalContinueBtn = document.getElementById('accountModalContinueBtn');
5707  const accountModalNeverHint = document.getElementById('accountModalNeverHint');
5708  const linkExpiryNever = document.getElementById('linkExpiryNever');
5709  const expiryNeverLabel = document.getElementById('expiryNeverLabel');
5710  const expiryNeverUpgradeNote = document.getElementById('expiryNeverUpgradeNote');
5711  const linkSlugInput = document.getElementById('linkSlug');
5712  const customSlugWrap = document.getElementById('customSlugWrap');
5713  let defaultLinkNamePlaceholder = '';
5714  const leadCaptureWrap = document.getElementById('leadCaptureWrap');
5715  const leadCaptureInput = document.getElementById('leadCapture');
5716  const leadHeadlineWrap = document.getElementById('leadHeadlineWrap');
5717  const leadHeadlineInput = document.getElementById('leadHeadline');
5718  const videoConversionWrap = document.getElementById('videoConversionWrap');
5719  const linkExpiry1h = document.getElementById('linkExpiry1h');
5720  const linkExpiry24h = document.getElementById('linkExpiry24h');
5721  const expiry1hLabel = document.getElementById('expiry1hLabel');
5722  const expiry24hLabel = document.getElementById('expiry24hLabel');
5723  const defaultExpiryInput = document.querySelector('input[name="linkExpiry"][value="7d"]');
5724  const navAuthGuest = document.getElementById('navAuthGuest');
5725  const navAuthSignedIn = document.getElementById('navAuthSignedIn');
5726  const navBrandingLink = document.getElementById('navBrandingLink');
5727  const navLibraryTree = document.getElementById('navLibraryTree');
5728  const navLibraryFolders = document.getElementById('navLibraryFolders');
5729  const navLibraryFavorites = document.getElementById('navLibraryFavorites');
5730  const navLibraryFavoritesSection = document.getElementById('navLibraryFavoritesSection');
5731  const navLibraryEmpty = document.getElementById('navLibraryEmpty');
5732  const navLibraryNewFolder = document.getElementById('navLibraryNewFolder');
5733  const navWorkspaceSelect = document.getElementById('navWorkspaceSelect');
5734  const navWorkspaceRole = document.getElementById('navWorkspaceRole');
5735  const hasNeverExpiry = !!linkExpiryNever;
5736  let accountModalReturnFocus = null;
5737  let accountModalMode = 'login';
5738  let navLibraryData = null;
5739  let navFolderNameEditor = null;
5740  let navDraggingShareIds = [];
5741  let navDraggingFolderId = '';
5742  let navExpandedFolderIds = new Set();
5743  let navCollapsedFolderIds = new Set();
5744  const FOLDER_COLORS = ['slate', 'red', 'amber', 'emerald', 'sky', 'indigo', 'violet', 'pink'];
5745  const FOLDER_COLOR_HEX = {
5746    slate: '#64748b',
5747    red: '#ef4444',
5748    amber: '#f59e0b',
5749    emerald: '#10b981',
5750    sky: '#0ea5e9',
5751    indigo: '#6366f1',
5752    violet: '#8b5cf6',
5753    pink: '#ec4899',
5754  };
5755
5756  const modalCopy = {
5757    never: {
5758      title: 'Paid plan required for permanent hosting',
5759      desc: 'Upgrade to Pro to create links that never expire.',
5760    },
5761    pro: {
5762      title: 'See what Pro includes',
5763      desc: 'Sign in, then upgrade to Pro for permanent links, custom branding, storage, analytics, and AI credits.',
5764    },
5765    login: {
5766      title: 'Continue with email',
5767      desc: 'We’ll email you a sign-in code. New accounts are created automatically.',
5768    },
5769    signup: {
5770      title: 'Continue with email',
5771      desc: 'We’ll email you a sign-in code. New accounts are created automatically.',
5772    },
5773  };
5774
5775  function getStoredAccountId() {
5776    return localStorage.getItem(ACCOUNT_ID_KEY) || '';
5777  }
5778
5779  function refreshSessionExpiry() {
5780    try {
5781      localStorage.setItem(SESSION_EXPIRES_KEY, String(Date.now() + SESSION_TTL_MS));
5782    } catch (e) { /* ignore */ }
5783  }
5784
5785  function isSessionExpired() {
5786    try {
5787      var raw = localStorage.getItem(SESSION_EXPIRES_KEY);
5788      if (!raw) return false;
5789      var expires = Number(raw);
5790      return Number.isFinite(expires) && expires > 0 && Date.now() > expires;
5791    } catch (e) {
5792      return false;
5793    }
5794  }
5795
5796  function clearStoredSession() {
5797    localStorage.removeItem(ACCOUNT_ID_KEY);
5798    localStorage.removeItem(ACCOUNT_EMAIL_KEY);
5799    localStorage.removeItem(SESSION_EXPIRES_KEY);
5800  }
5801
5802  function restoreCachedSignedInUi(email) {
5803    var cachedPlan = 'free';
5804    try {
5805      if (localStorage.getItem('microsite_user_plan') === 'pro') cachedPlan = 'pro';
5806    } catch (e) { /* ignore */ }
5807    setSignedInUi(email, cachedPlan, null, null);
5808  }
5809
5810  function setNavShellMode(signedIn) {
5811    document.body.classList.toggle('nav-logged-in', !!signedIn);
5812    const nav = document.querySelector('.site-primary-nav');
5813    if (nav) nav.classList.toggle('is-logged-in', !!signedIn);
5814    if (typeof window.micrositeApplyNavSidebarState === 'function') {
5815      window.micrositeApplyNavSidebarState();
5816    }
5817  }
5818
5819  function setHiddenById(id, hidden) {
5820    var el = document.getElementById(id);
5821    if (el) el.classList.toggle('hidden', !!hidden);
5822  }
5823
5824  function upgradeFeatureFromMode(mode) {
5825    if (mode === 'never') return 'permanentExpiry';
5826    if (mode === 'leads') return 'leads';
5827    if (mode === 'team') return 'teamWorkspace';
5828    if (mode === 'clips') return 'clips';
5829    if (mode === 'customSlug') return 'customSlug';
5830    if (mode === 'analytics') return 'analytics';
5831    return 'branding';
5832  }
5833
5834  function upgradeHrefForFeature(feature) {
5835    var path = window.location.pathname || '/upload';
5836    var query = window.location.search || '';
5837    return '/plans?feature=' + encodeURIComponent(feature || 'branding') + '&returnTo=' + encodeURIComponent(path + query);
5838  }
5839
5840  function setUploadProPanelLocked(panel, locked) {
5841    if (!panel) return;
5842    panel.classList.toggle('is-plan-locked', !!locked);
5843    panel.setAttribute('aria-disabled', locked ? 'true' : 'false');
5844    panel.querySelectorAll('input, select, button').forEach(function (el) {
5845      el.disabled = !!locked;
5846    });
5847  }
5848
5849  function applyPlanUi(plan, payload) {
5850    var userPlan = plan === 'pro' ? 'pro' : 'free';
5851    var isPro = userPlan === 'pro';
5852    if (linkExpiryNever) linkExpiryNever.disabled = !isPro;
5853    if (linkSlugInput) linkSlugInput.disabled = !isPro;
5854    if (customSlugWrap) customSlugWrap.classList.toggle('is-plan-locked', !isPro);
5855    if (expiryNeverUpgradeNote) expiryNeverUpgradeNote.classList.toggle('is-visible', !isPro);
5856    setUploadProPanelLocked(leadCaptureWrap, !isPro);
5857    setUploadProPanelLocked(videoConversionWrap, !isPro);
5858    if (leadCaptureInput && !isPro) leadCaptureInput.checked = false;
5859    if (leadHeadlineWrap && !isPro) leadHeadlineWrap.classList.add('hidden');
5860    if (leadHeadlineInput && !isPro) leadHeadlineInput.value = '';
5861    if (linkExpiry1h) linkExpiry1h.disabled = false;
5862    if (linkExpiry24h) linkExpiry24h.disabled = false;
5863    if (!isPro && defaultExpiryInput) defaultExpiryInput.checked = true;
5864    window.micrositeUserPlan = userPlan;
5865    if (typeof window.micrositeApplyPlanFromPayload === 'function' && payload) {
5866      userPlan = window.micrositeApplyPlanFromPayload(payload);
5867    } else if (typeof window.micrositeApplyPlanState === 'function') {
5868      window.micrositeApplyPlanState(userPlan);
5869    }
5870    window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: userPlan }));
5871    return userPlan;
5872  }
5873
5874  function updateNavAuthUi(email, profileMeta) {
5875    setNavShellMode(true);
5876    if (navAuthGuest) navAuthGuest.classList.add('hidden');
5877    if (navAuthSignedIn) navAuthSignedIn.classList.remove('hidden');
5878    setHiddenById('navSolutionsLink', true);
5879    setHiddenById('navTemplatesLink', true);
5880    setHiddenById('navResourcesLink', true);
5881    setHiddenById('navPricingLink', true);
5882    setHiddenById('navRecordLink', true);
5883    setHiddenById('navUploadLink', true);
5884    setHiddenById('navRecordCta', false);
5885    setHiddenById('navIdeasLink', false);
5886    setHiddenById('navStuffLink', false);
5887    setHiddenById('navAgentLink', false);
5888    setHiddenById('navPublishingLink', false);
5889    setHiddenById('navInboxLink', false);
5890    setHiddenById('navLibraryTree', !getStoredAccountId() || !['/library', '/stuff'].includes(window.location.pathname));
5891    setHiddenById('navEngagementLink', false);
5892    setHiddenById('navTeamLink', false);
5893    setHiddenById('navActivityLink', false);
5894    if (typeof window.updateNavProfileAvatar === 'function') {
5895      window.updateNavProfileAvatar(profileMeta || { displayName: email || 'Account menu' });
5896    }
5897    // On /record the nav folder tree is below-the-fold chrome — defer its
5898    // fetch to idle so it never competes with the camera pre-warm and engine.
5899    if (window.location.pathname === '/record') {
5900      (window.requestIdleCallback || function (fn) { window.setTimeout(fn, 2000); })(function () { loadNavLibrary(); });
5901    } else {
5902      loadNavLibrary();
5903    }
5904    loadWorkspaces();
5905  }
5906
5907  function workspaceRoleLabel(value) {
5908    value = String(value || '');
5909    return value ? value.charAt(0).toUpperCase() + value.slice(1) : '';
5910  }
5911
5912  async function loadWorkspaces() {
5913    if (!navWorkspaceSelect || !getStoredAccountId()) return;
5914    try {
5915      const res = await fetch('/account/workspaces', { headers: { 'x-account-id': getStoredAccountId() } });
5916      const data = await res.json();
5917      if (!res.ok || !Array.isArray(data.workspaces)) return;
5918      navWorkspaceSelect.innerHTML = data.workspaces.map(function (workspace) {
5919        return '<option value="' + String(workspace.id).replace(/"/g, '&quot;') + '"' + (workspace.active ? ' selected' : '') + '>' +
5920          String(workspace.name || 'Workspace').replace(/[&<>]/g, function (ch) { return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[ch]; }) +
5921          '</option>';
5922      }).join('');
5923      const active = data.workspaces.find(function (workspace) { return workspace.active; });
5924      if (navWorkspaceRole) navWorkspaceRole.textContent = active ? workspaceRoleLabel(active.role) : '';
5925      const crumb = document.querySelector('.nav-page-breadcrumb li:first-child a');
5926      if (crumb && active) crumb.textContent = active.name;
5927    } catch (e) { /* keep personal fallback */ }
5928  }
5929
5930  navWorkspaceSelect?.addEventListener('change', async function () {
5931    navWorkspaceSelect.disabled = true;
5932    if (navWorkspaceRole) navWorkspaceRole.textContent = 'Switching…';
5933    try {
5934      const res = await fetch('/account/workspaces/switch', {
5935        method: 'POST',
5936        headers: { 'Content-Type': 'application/json', 'x-account-id': getStoredAccountId() },
5937        body: JSON.stringify({ workspaceId: navWorkspaceSelect.value }),
5938      });
5939      const data = await res.json().catch(function () { return {}; });
5940      if (!res.ok) throw new Error(data.error || 'Could not switch workspace.');
5941      window.location.reload();
5942    } catch (err) {
5943      if (navWorkspaceRole) navWorkspaceRole.textContent = err.message || 'Could not switch workspace.';
5944      navWorkspaceSelect.disabled = false;
5945    }
5946  });
5947
5948  function updateNavGuestUi() {
5949    setNavShellMode(false);
5950    if (navAuthGuest) navAuthGuest.classList.remove('hidden');
5951    if (navAuthSignedIn) navAuthSignedIn.classList.add('hidden');
5952    setHiddenById('navSolutionsLink', false);
5953    setHiddenById('navTemplatesLink', false);
5954    setHiddenById('navResourcesLink', false);
5955    setHiddenById('navPricingLink', false);
5956    setHiddenById('navRecordLink', true);
5957    setHiddenById('navUploadLink', true);
5958    setHiddenById('navRecordCta', true);
5959    setHiddenById('navIdeasLink', true);
5960    setHiddenById('navStuffLink', true);
5961    setHiddenById('navAgentLink', true);
5962    setHiddenById('navPublishingLink', true);
5963    setHiddenById('navInboxLink', true);
5964    setHiddenById('navLibraryTree', true);
5965    setHiddenById('navEngagementLink', true);
5966    setHiddenById('navTeamLink', true);
5967    setHiddenById('navActivityLink', true);
5968    if (typeof window.updateNavProfileAvatar === 'function') window.updateNavProfileAvatar(null);
5969  }
5970
5971  function setSignedInUi(email, plan, profileMeta, payload) {
5972    if (accountGuest) accountGuest.classList.add('hidden');
5973    if (accountSignedIn) accountSignedIn.classList.remove('hidden');
5974    if (accountEmailDisplay) accountEmailDisplay.textContent = email || 'your account';
5975    if (accountModalContinueBtn) accountModalContinueBtn.hidden = !hasNeverExpiry;
5976    if (accountModalNeverHint) accountModalNeverHint.hidden = !hasNeverExpiry;
5977    applyPlanUi(plan || 'free', payload || null);
5978    updateNavAuthUi(email, profileMeta);
5979    if (payload && typeof window.micrositeApplyUsage === 'function') {
5980      window.micrositeApplyUsage(payload.usage || null);
5981    }
5982    window.dispatchEvent(new CustomEvent('microsite-auth-updated', {
5983      detail: { signedIn: true, email: email || '', plan: window.micrositeUserPlan || plan || 'free', payload: payload || null },
5984    }));
5985  }
5986
5987  function setSignedOutUi() {
5988    if (accountGuest) accountGuest.classList.remove('hidden');
5989    if (accountSignedIn) accountSignedIn.classList.add('hidden');
5990    if (linkExpiryNever) {
5991      linkExpiryNever.disabled = true;
5992      linkExpiryNever.checked = false;
5993    }
5994    if (linkSlugInput) {
5995      linkSlugInput.disabled = true;
5996      linkSlugInput.value = '';
5997    }
5998    if (defaultExpiryInput) defaultExpiryInput.checked = true;
5999    applyPlanUi('free', null);
6000    updateNavGuestUi();
6001    window.dispatchEvent(new CustomEvent('microsite-auth-updated', { detail: { signedIn: false } }));
6002  }
6003
6004  function openAccountModal(mode) {
6005    accountModalMode = mode || 'login';
6006    if (window.micrositeUserPlan === 'pro' && (accountModalMode === 'pro' || accountModalMode === 'never')) {
6007      accountModalMode = 'login';
6008    }
6009    var copy = modalCopy[accountModalMode] || modalCopy.login;
6010    if (accountModalTitle) accountModalTitle.textContent = copy.title;
6011    if (accountModalDesc) accountModalDesc.textContent = copy.desc;
6012    accountModalReturnFocus = document.activeElement;
6013    accountModal.hidden = false;
6014    document.body.style.overflow = 'hidden';
6015    if (getStoredAccountId()) {
6016      if (accountGuest) accountGuest.classList.add('hidden');
6017      if (accountSignedIn) accountSignedIn.classList.remove('hidden');
6018    } else {
6019      if (accountGuest) accountGuest.classList.remove('hidden');
6020      if (accountSignedIn) accountSignedIn.classList.add('hidden');
6021      if (accountStatusEl) accountStatusEl.textContent = '';
6022      showEmailStep();
6023    }
6024    window.setTimeout(function () { if (accountEmailInput) accountEmailInput.focus(); }, 50);
6025  }
6026
6027  function closeAccountModal() {
6028    accountModal.hidden = true;
6029    document.body.style.overflow = '';
6030    if (accountModalReturnFocus && accountModalReturnFocus.focus) accountModalReturnFocus.focus();
6031    accountModalReturnFocus = null;
6032  }
6033
6034  function selectNeverExpiry() {
6035    if (linkExpiryNever) {
6036      linkExpiryNever.disabled = false;
6037      linkExpiryNever.checked = true;
6038    }
6039  }
6040
6041  function promptProFeature(mode) {
6042    if (window.micrositeUserPlan === 'pro') return;
6043    if (getStoredAccountId()) {
6044      window.location.assign(upgradeHrefForFeature(upgradeFeatureFromMode(mode || 'pro')));
6045      return;
6046    }
6047    openAccountModal(mode || 'pro');
6048  }
6049
6050  function showCodeStep(email) {
6051    if (accountEmailStep) accountEmailStep.classList.add('hidden');
6052    if (accountCodeStep) accountCodeStep.classList.remove('hidden');
6053    if (accountCodeEmail) accountCodeEmail.textContent = email;
6054    if (accountLoginCode) {
6055      accountLoginCode.value = '';
6056      accountLoginCode.focus();
6057    }
6058    if (accountModalTitle) accountModalTitle.textContent = 'Check your email';
6059    if (accountModalDesc) accountModalDesc.textContent = 'Enter the 6-digit code or use the link we sent.';
6060  }
6061
6062  function showEmailStep() {
6063    if (accountCodeStep) accountCodeStep.classList.add('hidden');
6064    if (accountEmailStep) accountEmailStep.classList.remove('hidden');
6065    var copy = modalCopy[accountModalMode] || modalCopy.login;
6066    if (accountModalTitle) accountModalTitle.textContent = copy.title;
6067    if (accountModalDesc) accountModalDesc.textContent = copy.desc;
6068    updateSignupFields();
6069  }
6070
6071  function updateSignupFields() {
6072    if (accountSendCodeBtn) accountSendCodeBtn.textContent = 'Continue';
6073  }
6074
6075  /**
6076   * Same-origin path or nothing: canonicalize through the URL parser so
6077   * tricks it honors (backslashes-as-slashes, stripped tabs/newlines turning
6078   * a path into //host) can't smuggle in another origin.
6079   */
6080  function safeLoginReturnPath(path) {
6081    try {
6082      if (typeof path !== 'string' || path.charAt(0) !== '/') return '';
6083      var parsed = new URL(path, window.location.origin);
6084      if (parsed.origin !== window.location.origin) return '';
6085      return parsed.pathname + parsed.search + parsed.hash;
6086    } catch (e) {
6087      return '';
6088    }
6089  }
6090
6091  /** Remember where to land after login (e.g. /library?returnTo=/studio?id=x). */
6092  function rememberLoginReturnTo() {
6093    try {
6094      var requested = new URLSearchParams(window.location.search).get('returnTo') || '';
6095      if (!requested && window.location.pathname === '/record') requested = window.location.pathname + window.location.search;
6096      var path = safeLoginReturnPath(requested);
6097      if (!path) return;
6098      localStorage.setItem('microsite_login_return_to', JSON.stringify({ path: path, exp: Date.now() + 15 * 60 * 1000 }));
6099    } catch (e) {}
6100  }
6101
6102  function consumeLoginReturnTo() {
6103    try {
6104      var stored = JSON.parse(localStorage.getItem('microsite_login_return_to') || 'null');
6105      localStorage.removeItem('microsite_login_return_to');
6106      if (stored && typeof stored.path === 'string' && Number(stored.exp) > Date.now()) {
6107        return safeLoginReturnPath(stored.path);
6108      }
6109    } catch (e) {}
6110    return '';
6111  }
6112
6113  function authKitUrl(mode) {
6114    var params = new URLSearchParams();
6115    params.set('screenHint', mode === 'signup' ? 'sign-up' : 'sign-in');
6116    var requested = '';
6117    try {
6118      requested = new URLSearchParams(window.location.search).get('returnTo') || '';
6119    } catch (e) {}
6120    var returnTo = safeLoginReturnPath(requested);
6121    if (!returnTo && window.location.pathname !== '/') {
6122      returnTo = safeLoginReturnPath(window.location.pathname + window.location.search + window.location.hash);
6123    }
6124    params.set('returnTo', returnTo || '/library');
6125    return '/auth/workos/login?' + params.toString();
6126  }
6127
6128  function openAuthEntry(mode) {
6129    if (mode === 'login' || mode === 'signup') {
6130      if (getStoredAccountId()) {
6131        window.location.assign('/library');
6132        return;
6133      }
6134      if (mode === 'signup' && typeof window.micrositePiqo === 'function') {
6135        window.micrositePiqo('signup_started', { entry_path: window.location.pathname });
6136      }
6137      window.location.assign(authKitUrl(mode));
6138      return;
6139    }
6140    openAccountModal(mode || 'login');
6141  }
6142
6143  async function requestLoginCode(email, isSignup, profileDraft) {
6144    rememberLoginReturnTo();
6145    var returnTo = safeLoginReturnPath(window.location.pathname + window.location.search + window.location.hash) || '/library';
6146    var response = await fetch('/account/request-login', {
6147      method: 'POST',
6148      headers: { 'Content-Type': 'application/json' },
6149      body: JSON.stringify({
6150        email: email,
6151        signup: !!isSignup,
6152        firstName: profileDraft && profileDraft.firstName || '',
6153        lastName: profileDraft && profileDraft.lastName || '',
6154        returnTo: returnTo,
6155      }),
6156    });
6157    var data = await response.json().catch(function () { return {}; });
6158    if (!response.ok) throw new Error(data.error || 'Could not send sign-in email.');
6159    return data;
6160  }
6161
6162  async function verifyLoginCode(email, code) {
6163    var response = await fetch('/account/verify-login', {
6164      method: 'POST',
6165      headers: { 'Content-Type': 'application/json' },
6166      body: JSON.stringify({ email: email, code: code }),
6167    });
6168    var data = await response.json().catch(function () { return {}; });
6169    if (!response.ok || !data.accountId) throw new Error(data.error || 'Invalid code.');
6170    localStorage.setItem(ACCOUNT_ID_KEY, data.accountId);
6171    localStorage.setItem(ACCOUNT_EMAIL_KEY, email);
6172    refreshSessionExpiry();
6173    setSignedInUi(email, data.plan || 'free', data.profile || null, data);
6174    return data.accountId;
6175  }
6176
6177  async function completeLogin(email, isSignup) {
6178    if (accountStatusEl) accountStatusEl.textContent = 'Sending your sign-in code...';
6179    if (isSignup && typeof window.micrositePiqo === 'function') {
6180      window.micrositePiqo('signup_started', { entry_path: window.location.pathname });
6181    }
6182    var loginResponse = await requestLoginCode(email, isSignup, null);
6183    if (loginResponse && loginResponse.redirectUrl) {
6184      var workosUrl = new URL(loginResponse.redirectUrl);
6185      if (workosUrl.protocol !== 'https:' || workosUrl.origin !== 'https://api.workos.com') {
6186        throw new Error('The sign-in destination was invalid.');
6187      }
6188      window.location.assign(workosUrl.toString());
6189      return;
6190    }
6191    if (accountStatusEl) accountStatusEl.textContent = 'Check your inbox for the code and link.';
6192    showCodeStep(email);
6193  }
6194
6195  async function restoreAccountSession() {
6196    var accountId = getStoredAccountId();
6197    var email = localStorage.getItem(ACCOUNT_EMAIL_KEY) || '';
6198    if (!accountId) {
6199      setSignedOutUi();
6200      return;
6201    }
6202    try {
6203      var response = await fetch('/account/ping', {
6204        method: 'POST',
6205        headers: { 'Content-Type': 'application/json' },
6206        body: JSON.stringify({ accountId: accountId }),
6207      });
6208      if (!response.ok) {
6209        if (response.status === 400 || response.status === 401 || response.status === 403 || response.status === 404) {
6210          clearStoredSession();
6211          setSignedOutUi();
6212          return;
6213        }
6214        throw new Error('session check failed');
6215      }
6216      var pingData = await response.json().catch(function () { return {}; });
6217      refreshSessionExpiry();
6218      setSignedInUi(pingData.email || email, pingData.plan || 'free', pingData.profile || null, pingData);
6219    } catch (err) {
6220      restoreCachedSignedInUi(email);
6221    }
6222  }
6223
6224  async function signOutAccount() {
6225    var logoutUrl = '';
6226    try {
6227      var response = await fetch('/account/logout', { method: 'POST' });
6228      var data = await response.json().catch(function () { return {}; });
6229      logoutUrl = data && data.logoutUrl || '';
6230    } catch (e) {}
6231    clearStoredSession();
6232    setSignedOutUi();
6233    if (accountStatusEl) accountStatusEl.textContent = 'Signed out.';
6234    closeAccountModal();
6235    if (logoutUrl) {
6236      try {
6237        var parsed = new URL(logoutUrl);
6238        if (parsed.protocol === 'https:' && parsed.origin === 'https://api.workos.com') {
6239          window.location.assign(parsed.toString());
6240          return;
6241        }
6242      } catch (e) {}
6243    }
6244    window.location.assign('/');
6245  }
6246
6247  function gateProExpiryLabel(labelEl, inputEl, mode) {
6248    if (!labelEl || !inputEl) return;
6249    labelEl.addEventListener('click', function (event) {
6250      if (inputEl.disabled) {
6251        event.preventDefault();
6252        promptProFeature(mode);
6253      }
6254    });
6255  }
6256
6257  accountModal.querySelectorAll('[data-close-modal]').forEach(function (el) {
6258    el.addEventListener('click', closeAccountModal);
6259  });
6260  document.addEventListener('keydown', function (event) {
6261    if (event.key === 'Escape' && !accountModal.hidden) closeAccountModal();
6262    // Keep Tab inside the dialog while it is open (focus trap).
6263    if (event.key === 'Tab' && !accountModal.hidden) {
6264      var panel = accountModal.querySelector('.account-modal-panel');
6265      if (!panel) return;
6266      var focusables = Array.prototype.filter.call(
6267        panel.querySelectorAll('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])'),
6268        function (el) { return !el.disabled && !el.hidden && el.offsetParent !== null; }
6269      );
6270      if (!focusables.length) return;
6271      var first = focusables[0];
6272      var last = focusables[focusables.length - 1];
6273      var active = document.activeElement;
6274      if (event.shiftKey && (active === first || !panel.contains(active))) {
6275        event.preventDefault();
6276        last.focus();
6277      } else if (!event.shiftKey && (active === last || !panel.contains(active))) {
6278        event.preventDefault();
6279        first.focus();
6280      }
6281    }
6282  });
6283  document.querySelectorAll('[data-open-account]').forEach(function (btn) {
6284    btn.addEventListener('click', function (event) {
6285      event.preventDefault();
6286      openAuthEntry(btn.getAttribute('data-open-account') || 'login');
6287    });
6288  });
6289  document.querySelectorAll('[data-upload-upgrade-feature]').forEach(function (link) {
6290    link.addEventListener('click', function (event) {
6291      if (window.micrositeUserPlan === 'pro') return;
6292      if (getStoredAccountId()) return;
6293      event.preventDefault();
6294      openAccountModal('pro');
6295    });
6296  });
6297  gateProExpiryLabel(expiryNeverLabel, linkExpiryNever, 'never');
6298  if (expiry1hLabel && linkExpiry1h) gateProExpiryLabel(expiry1hLabel, linkExpiry1h, 'pro');
6299  if (expiry24hLabel && linkExpiry24h) gateProExpiryLabel(expiry24hLabel, linkExpiry24h, 'pro');
6300  if (linkSlugInput) {
6301    defaultLinkNamePlaceholder = linkSlugInput.getAttribute('placeholder') || '';
6302    linkSlugInput.addEventListener('focus', function () {
6303      if (linkSlugInput.disabled) {
6304        linkSlugInput.blur();
6305        promptProFeature('pro');
6306      }
6307    });
6308  }
6309  if (accountModalContinueBtn) {
6310    accountModalContinueBtn.addEventListener('click', function () {
6311      selectNeverExpiry();
6312      closeAccountModal();
6313    });
6314  }
6315  if (accountLoginForm) {
6316    accountLoginForm.addEventListener('submit', function (event) {
6317      event.preventDefault();
6318      var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase();
6319      if (!email) {
6320        if (accountStatusEl) accountStatusEl.textContent = 'Enter your email address.';
6321        return;
6322      }
6323      completeLogin(email, accountModalMode === 'signup').catch(function (err) {
6324        if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Could not send email.';
6325      });
6326    });
6327  }
6328  if (accountVerifyCodeBtn) {
6329    accountVerifyCodeBtn.addEventListener('click', function () {
6330      var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase();
6331      var code = (accountLoginCode && accountLoginCode.value || '').trim();
6332      if (!email || !code) {
6333        if (accountStatusEl) accountStatusEl.textContent = 'Enter the 6-digit code from your email.';
6334        return;
6335      }
6336      if (accountStatusEl) accountStatusEl.textContent = 'Verifying...';
6337      var completingSignup = accountModalMode === 'signup';
6338      verifyLoginCode(email, code).then(function () {
6339        if (completingSignup && typeof window.micrositePiqo === 'function') {
6340          window.micrositePiqo('signup_completed', { entry_path: window.location.pathname });
6341        }
6342        if (hasNeverExpiry && (accountModalMode === 'never' || linkExpiryNever)) selectNeverExpiry();
6343        if (accountStatusEl) accountStatusEl.textContent = 'Signed in.';
6344        var loginReturnTo = consumeLoginReturnTo();
6345        if (loginReturnTo) {
6346          window.setTimeout(function () { window.location.assign(loginReturnTo); }, 400);
6347          return;
6348        }
6349        window.setTimeout(closeAccountModal, 400);
6350      }).catch(function (err) {
6351        if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Invalid code.';
6352      });
6353    });
6354  }
6355  if (accountResendCodeBtn) {
6356    accountResendCodeBtn.addEventListener('click', function () {
6357      var email = (accountEmailInput && accountEmailInput.value || '').trim().toLowerCase();
6358      if (!email) return;
6359      if (accountStatusEl) accountStatusEl.textContent = 'Sending a new code...';
6360      requestLoginCode(email, false).then(function () {
6361        if (accountStatusEl) accountStatusEl.textContent = 'New code sent.';
6362      }).catch(function (err) {
6363        if (accountStatusEl) accountStatusEl.textContent = err && err.message ? err.message : 'Re
6363send failed.';
6364      });
6365    });
6366  }
6367  if (accountSignOutBtn) accountSignOutBtn.addEventListener('click', signOutAccount);
6368  if (accountModalSignOutBtn) accountModalSignOutBtn.addEventListener('click', signOutAccount);
6369  window.micrositeSignOut = signOutAccount;
6370
6371function navEscapeHtml(value) {
6372    return String(value || '').replace(/[&<>"']/g, function (ch) {
6373      return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch];
6374    });
6375  }
6376
6377  function navFolderColor(folder) {
6378    var color = folder && typeof folder.color === 'string' ? folder.color : '';
6379    return FOLDER_COLOR_HEX[color] || FOLDER_COLOR_HEX.indigo;
6380  }
6381
6382  function navFolderStyle(folder) {
6383    return 'style="--folder-color:' + navEscapeHtml(navFolderColor(folder)) + '"';
6384  }
6385
6386  function navCurrentFolderId() {
6387    try {
6388      return new URL(window.location.href).searchParams.get('folder') || '';
6389    } catch (e) {
6390      return '';
6391    }
6392  }
6393
6394  function isLibraryPage() {
6395    return window.location.pathname === '/library' || window.location.pathname === '/stuff';
6396  }
6397
6398  function setNavCurrentFolder(folderId) {
6399    var id = folderId || '';
6400    if (id) {
6401      navExpandedFolderIds.add(id);
6402      navCollapsedFolderIds.delete(id);
6403    }
6404    if (isLibraryPage()) {
6405      var url = new URL(window.location.href);
6406      if (id) url.searchParams.set('folder', id);
6407      else url.searchParams.delete('folder');
6408      window.history.replaceState({}, '', url.pathname + url.search);
6409      window.dispatchEvent(new CustomEvent('microsite-library-folder-selected', { detail: { folderId: id } }));
6410      renderNavLibrary(navLibraryData || { folders: [], items: [] });
6411      return;
6412    }
6413    window.location.href = id ? '/library?folder=' + encodeURIComponent(id) : '/library';
6414  }
6415
6416  window.addEventListener('microsite-library-folder-changed', function (event) {
6417    var id = event && event.detail ? (event.detail.folderId || '') : '';
6418    if (id) {
6419      navExpandedFolderIds.add(id);
6420      navCollapsedFolderIds.delete(id);
6421    }
6422    renderNavLibrary(navLibraryData || { folders: [], items: [] });
6423  });
6424
6425  function navCardTitle(row) {
6426    var title = String(row && (row.displayTitle || row.pageTitle || row.label || row.slug) || '').trim();
6427    if (!title) return row && row.kind === 'video' ? 'Video' : 'Shared link';
6428    return title;
6429  }
6430
6431  function navSortItems(rows) {
6432    return (rows || []).slice().sort(function (a, b) {
6433      return String(b.updatedAt || b.createdAt || '').localeCompare(String(a.updatedAt || a.createdAt || ''));
6434    });
6435  }
6436
6437  function navFavoriteIcon() {
6438    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>';
6439  }
6440
6441  function navFileHtml(row) {
6442    var title = navEscapeHtml(navCardTitle(row));
6443    var href = row && row.shareUrl ? navEscapeHtml(row.shareUrl) : '#';
6444    return '<li class="nav-library-file-item" draggable="true" data-nav-share-id="' + navEscapeHtml(row && row.shareId || '') + '">' +
6445      '<span class="nav-library-drag-handle" aria-hidden="true" title="Drag to move">⋮⋮</span>' +
6446      '<a class="nav-library-file-link" href="' + href + '"' + (row && row.shareUrl ? ' target="_blank" rel="noopener"' : '') + ' title="' + title + '">' +
6447      '<span class="nav-library-file-icon" aria-hidden="true"></span>' +
6448      '<span class="nav-library-file-name">' + title + '</span>' +
6449      '</a></li>';
6450  }
6451
6452  function navFolderNameFormHtml() {
6453    if (!navFolderNameEditor) return '';
6454    return '<form class="nav-library-name-form" data-nav-folder-name-form data-parent-folder-id="' + navEscapeHtml(navFolderNameEditor.parentFolderId || '') + '">' +
6455      '<label class="sr-only" for="navLibraryFolderName">Folder name</label>' +
6456      '<input id="navLibraryFolderName" class="nav-library-name-input" name="folderName" type="text" value="' + navEscapeHtml(navFolderNameEditor.name || '') + '" maxlength="80" placeholder="Folder name" autocomplete="off">' +
6457      '<div class="nav-library-name-actions">' +
6458      '<button type="submit" class="nav-library-name-save">Create</button>' +
6459      '<button type="button" class="nav-library-name-cancel" data-nav-folder-name-cancel>Cancel</button>' +
6460      '</div>' +
6461      '</form>';
6462  }
6463
6464  function navFoldersByParent(folders) {
6465    return (folders || []).reduce(function (map, folder) {
6466      var parentId = folder.parentFolderId || '';
6467      if (!map[parentId]) map[parentId] = [];
6468      map[parentId].push(folder);
6469      return map;
6470    }, {});
6471  }
6472
6473  function navFolderDescendantActive(folderId, byParent) {
6474    var activeId = navCurrentFolderId();
6475    if (!activeId || activeId === folderId) return activeId === folderId;
6476    var children = byParent[folderId] || [];
6477    return children.some(function (child) {
6478      return navFolderDescendantActive(child.folderId, byParent);
6479    });
6480  }
6481
6482  function navFolderHtml(folder, byParent, depth) {
6483    var active = navCurrentFolderId() === folder.folderId;
6484    var children = byParent[folder.folderId] || [];
6485    var hasChildren = children.length > 0;
6486    var descendantActive = !active && navFolderDescendantActive(folder.folderId, byParent);
6487    var expanded = !!(active || descendantActive || navExpandedFolderIds.has(folder.folderId)) && !navCollapsedFolderIds.has(folder.folderId);
6488    var count = folder.itemCount || 0;
6489    var childCount = folder.childCount || children.length || 0;
6490    var totalCount = count + childCount;
6491    var items = navSortItems((navLibraryData && navLibraryData.items || []).filter(function (row) {
6492      return (row.folderId || '') === folder.folderId;
6493    })).slice(0, 12);
6494    var files = expanded
6495      ? '<ul class="nav-library-file-list">' + (items.length
6496        ? items.map(navFileHtml).join('')
6497        : '<li class="nav-library-empty">No files in this folder.</li>') + '</ul>'
6498      : '';
6499    var childCreateForm = navFolderNameEditor && navFolderNameEditor.parentFolderId === folder.folderId
6500      ? '<li class="nav-library-node" role="none">' + navFolderNameFormHtml() + '</li>'
6501      : '';
6502    var childTree = expanded && (hasChildren || childCreateForm)
6503      ? '<ul class="nav-library-subtree" role="group">' + childCreateForm + children.map(function (child) {
6504        return navFolderHtml(child, byParent, Math.min(depth + 1, 5));
6505      }).join('') + '</ul>'
6506      : '';
6507    var label = navEscapeHtml(folder.name || 'Folder');
6508    return '<li class="nav-library-node" role="none">' +
6509      '<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
6509se') + '" 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">' +
6510      '<div class="nav-library-folder-row">' +
6511      '<span class="nav-library-drag-handle" aria-hidden="true" title="Drag to move">⋮⋮</span>' +
6512      '<button type="button" class="nav-library-folder-toggle" data-nav-folder-toggle="' + navEscapeHtml(folder.folderId) + '" aria-expanded="' + (expanded ? 'true' : 'false') + '">' +
6513      '<span class="nav-library-caret" aria-hidden="true">›</span>' +
6514      '<span class="nav-library-folder-icon" ' + navFolderStyle(folder) + ' aria-hidden="true"></span>' +
6515      '<span class="nav-library-folder-name">' + label + '</span>' +
6516      '<span class="nav-library-count">' + totalCount + '</span>' +
6517      '</button>' +
6518      '<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>' +
6519      '<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') + '">' +
6520      navFavoriteIcon() +
6521      '</button>' +
6522      '</div>' +
6523      files +
6524      childTree +
6525      '</div></li>';
6526  }
6527
6528  function navFavoriteFolderHtml(folder) {
6529    var active = navCurrentFolderId() === folder.folderId;
6530    var label = navEscapeHtml(folder.name || 'Folder');
6531    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') + '">' +
6532      '<span class="nav-library-folder-icon" ' + navFolderStyle(folder) + ' aria-hidden="true"></span>' +
6533      '<span class="nav-library-folder-name">' + label + '</span>' +
6534      '<span class="nav-library-count">' + ((folder.itemCount || 0) + (folder.childCount || 0)) + '</span>' +
6535      '</button>';
6536  }
6537
6538  function renderNavLibrary(data) {
6539    navLibraryData = data || navLibraryData || {};
6540    var folders = navLibraryData.folders || [];
6541    var libraryContext = isLibraryPage();
6542    if (navLibraryTree) {
6543      navLibraryTree.classList.toggle('hidden', !getStoredAccountId() || !libraryContext);
6544      var folderDisclosure = navLibraryTree.querySelector('.nav-folders-disclosure');
6545      if (folderDisclosure && navCurrentFolderId()) folderDisclosure.open = true;
6546    }
6547    var byParent = navFoldersByParent(folders);
6548    var treeHtml = '<ul class="nav-library-list" role="tree" aria-label="Library folders">' + (byParent[''] || []).map(function (folder) {
6549      return navFolderHtml(folder, byParent, 0);
6550    }).join('') + '</ul>';
6551    if (navLibraryFolders) navLibraryFolders.innerHTML = (navFolderNameEditor && !navFolderNameEditor.parentFolderId ? navFolderNameFormHtml() : '') + treeHtml;
6552    if (navLibraryEmpty) navLibraryEmpty.hidden = !!folders.length;
6553    var favorites = folders.filter(function (folder) { return !!folder.favorite; });
6554    if (navLibraryFavoritesSection) navLibraryFavoritesSection.hidden = !favorites.length;
6555    if (navLibraryFavorites) navLibraryFavorites.innerHTML = favorites.map(navFavoriteFolderHtml).join('');
6556  }
6557
6558  function focusNavFolderNameInput() {
6559    window.setTimeout(function () {
6560      var input = document.getElementById('navLibraryFolderName');
6561      if (!input) return;
6562      input.focus();
6563      input.select();
6564    }, 0);
6565  }
6566
6567  function openNavFolderNameEditor(parentFolderId) {
6568    navFolderNameEditor = { name: '', parentFolderId: parentFolderId || '' };
6569    renderNavLibrary(navLibraryData || { folders: [], items: [] });
6570    focusNavFolderNameInput();
6571  }
6572
6573  function cancelNavFolderNameEditor() {
6574    navFolderNameEditor = null;
6575    renderNavLibrary(navLibraryData || { folders: [], items: [] });
6576  }
6577
6578  var navLibraryLoadPromise = null;
6579  var navLibraryLoadedAt = 0;
6580
6581  // Same idempotent definition as the library page script — see the comment
6582  // there. On pages without the library script this copy is the one that runs.
6583  window.micrositeSharedStuffFetch = window.micrositeSharedStuffFetch || function (accountId) {
6584    if (window.micrositeSharedStuffInflight) return window.micrositeSharedStuffInflight;
6585    window.micrositeSharedStuffInflight = fetch('/account/stuff', { headers: { 'x-account-id': accountId } })
6586      .then(function (res) {
6587        return res.json().catch(function () { return {}; }).then(function (data) {
6588          return { ok: res.ok, status: res.status, data: data };
6589        });
6590      })
6591      .finally(function () { window.micrositeSharedStuffInflight = null; });
6592    return window.micrositeSharedStuffInflight;
6593  };
6594
6595  async function loadNavLibrary(options) {
6596    var accountId = getStoredAccountId();
6597    if (!accountId || !navLibraryTree) return;
6598    // Auth-state syncs can fire this several times at boot — reuse one
6599    // request, and skip refetches inside a short window unless forced.
6600    var force = options && options.force;
6601    if (navLibraryLoadPromise) return navLibraryLoadPromise;
6602    if (!force && navLibraryLoadedAt && Date.now() - navLibraryLoadedAt < 30000) return;
6603    navLibraryLoadPromise = (async function () {
6604      try {
6605        // Shared single-flight with the library page script (which fetches
6606        // the identical /account/stuff payload) — concurrent boots join one
6607        // request regardless of which script starts first.
6608        var result = await window.micrositeSharedStuffFetch(accountId);
6609        if (result.ok) {
6610          renderNavLibrary(result.data);
6611          navLibraryLoadedAt = Date.now();
6612        }
6613      } catch (e) {}
6614      navLibraryLoadPromise = null;
6615    })();
6616    return navLibraryLoadPromise;
6617  }
6618
6619  async function postNavFolderUpdate(folderId, updates) {
6620    var accountId = getStoredAccountId();
6621    if (!accountId || !folderId) return null;
6622    try {
6623      var response = await fetch('/account/stuff/folders/update', {
6624        method: 'POST',
6625        headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
6626        body: JSON.stringify(Object.assign({ folderId: folderId }, updates || {})),
6627      });
6628      var data = await response.json().catch(function () { return {}; });
6629      if (response.ok) {
6630        renderNavLibrary(data);
6631        window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data }));
6632      } else if (typeof window.micrositeToast === 'function') {
6633        window.micrositeToast(data.error || 'Could not move the folder.');
6634      }
6635      return data;
6636    } catch (error) {
6637      if (typeof window.micrositeToast === 'function') window.micrositeToast('Could not move the folder. Check your connection.');
6638      return null;
6639    }
6640  }
6641
6642  async function createNavFolder(name, parentFolderId) {
6643    var accountId = getStoredAccountId();
6644    if (!accountId) return;
6645    if (typeof name !== 'string') {
6646      openNavFolderNameEditor(parentFolderId || '');
6647      return;
6648    }
6649    if (!name || !name.trim()) return;
6650    var color = FOLDER_COLORS[((navLibraryData && navLibraryData.folders || []).length) % FOLDER_COLORS.length] || 'indigo';
6651    var response = await fetch('/account/stuff/folders/create', {
6652      method: 'POST',
6653      headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
6654      body: JSON.stringify({ name: name.trim(), color: color, parentFolderId: parentFolderId || navFolderNameEditor?.parentFolderId || '' }),
6655    });
6656    var data = await response.json().catch(function () { return {}; });
6657    if (!response.ok) return;
6658    navFolderNameEditor = null;
6659    renderNavLibrary(data);
6660    window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data }));
6661    if (data.folder && data.folder.folderId) setNavCurrentFolder(data.folder.folderId);
6662  }
6663
6664  function setNavShareDragData(event, shareIds) {
6665    var ids = (shareIds || []).filter(Boolean);
6666    if (!ids.length || !event.dataTransfer) return;
6667    navDraggingShareIds = ids;
6668    navDraggingFolderId = '';
6669    event.dataTransfer.effectAllowed = 'move';
6670    event.dataTransfer.setData('application/x-microsite-share-ids', JSON.stringify(ids));
6671    event.dataTransfer.setData('text/plain', ids.join(','));
6672  }
6673
6674  function setNavFolderDragData(event, folderId) {
6675    if (!folderId || !event.dataTransfer) return;
6676    navDraggingFolderId = folderId;
6677    navDraggingShareIds = [];
6678    event.dataTransfer.effectAllowed = 'move';
6679    event.dataTransfer.setData('application/x-microsite-folder-id', folderId);
6680    event.dataTransfer.setData('text/plain', folderId);
6681  }
6682
6683  function navFolderDragIdFromEvent(event) {
6684    if (!event.dataTransfer) return navDraggingFolderId;
6685    return event.dataTransfer.getData('application/x-microsite-folder-id') || navDraggingFolderId || '';
6686  }
6687
6688  function navShareDragIdsFromEvent(event) {
6689    if (!event.dataTransfer) return navDraggingShareIds.slice();
6690    var raw = event.dataTransfer.getData('application/x-microsite-share-ids') || event.dataTransfer.getData('text/plain');
6691    if (!raw) return navDraggingShareIds.slice();
6692    try {
6693      var parsed = JSON.parse(raw);
6694      if (Array.isArray(parsed)) return parsed.filter(Boolean);
6695    } catch (e) {}
6696    return raw.split(',').map(function (id) { return id.trim(); }).filter(Boolean);
6697  }
6698
6699  async function moveNavSharesToFolder(shareIds, folderId) {
6700    var accountId = getStoredAccountId();
6701    if (!accountId || !shareIds || !shareIds.length) return;
6702    try {
6703      var response = await fetch('/account/stuff/folders/move', {
6704        method: 'POST',
6705        headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
6706        body: JSON.stringify({ shareIds: shareIds, folderId: folderId || '' }),
6707      });
6708      var data = await response.json().catch(function () { return {}; });
6709      if (!response.ok) {
6710        if (typeof window.micrositeToast === 'function') window.micrositeToast(data.error || 'Could not move the item.');
6711        return;
6712      }
6713      renderNavLibrary(data);
6714      window.dispatchEvent(new CustomEvent('microsite-library-nav-updated', { detail: data }));
6715      if (typeof window.micrositeToast === 'function') {
6716        var folder = navFolderById(folderId);
6717        window.micrositeToast('Moved ' + shareIds.length + ' item' + (shareIds.length === 1 ? '' : 's') + ' to ' + (folder ? folder.name : 'Library') + '.');
6718      }
6719    } catch (error) {
6720      if (typeof window.micrositeToast === 'function') window.micrositeToast('Could not move the item. Check your connection.');
6721    }
6722  }
6723
6724  async function moveNavFolderToParent(folderId, parentFolderId) {
6725    if (!folderId) return;
6726    if (parentFolderId) navExpandedFolderIds.add(parentFolderId);
6727    var data = await postNavFolderUpdate(folderId, { parentFolderId: parentFolderId || '' });
6728    if (data && typeof window.micrositeToast === 'function') {
6729      var parent = navFolderById(parentFolderId);
6730      window.micrositeToast('Folder moved to ' + (parent ? parent.name : 'Library') + '.');
6731    }
6732  }
6733
6734  function navFolderById(folderId) {
6735    return (navLibraryData && navLibraryData.folders || []).find(function (folder) {
6736      return folder.folderId === folderId;
6737    }) || null;
6738  }
6739
6740  function navFolderIsDescendant(folderId, possibleAncestorId) {
6741    var folder = navFolderById(folderId);
6742    var seen = {};
6743    while (folder && folder.parentFolderId) {
6744      if (folder.parentFolderId === possibleAncestorId) return true;
6745      if (seen[folder.parentFolderId]) return false;
6746      seen[folder.parentFolderId] = true;
6747      folder = navFolderById(folder.parentFolderId);
6748    }
6749    return false;
6750  }
6751
6752  function navValidFolderDrop(folderId, parentFolderId) {
6753    if (!folderId) return false;
6754    if (folderId === parentFolderId) return false;
6755    if (parentFolderId && navFolderIsDescendant(parentFolderId, folderId)) return false;
6756    var folder = navFolderById(folderId);
6757    if (!folder) return false;
6758    return (folder.parentFolderId || '') !== (parentFolderId || '');
6759  }
6760
6761  function navDropTarget(event) {
6762    return event.target.closest('[data-nav-folder-drop-id], #navStuffLink');
6763  }
6764
6765  function onNavLibraryDragStart(event) {
6766    var item = event.target.closest('[data-nav-share-id]');
6767    if (item) {
6768      setNavShareDragData(event, [item.getAttribute('data-nav-share-id') || '']);
6769      return;
6770    }
6771    var folder = event.target.closest('[data-nav-folder]');
6772    if (!folder) return;
6773    setNavFolderDragData(event, folder.getAttribute('data-nav-folder') || '');
6774    folder.classList.add('is-folder-dragging');
6775  }
6776
6777  function onNavLibraryDragOver(event) {
6778    var target = navDropTarget(event);
6779    if (!target) return;
6780    var draggedFolderId = navFolderDragIdFromEvent(event);
6781    if (draggedFolderId) {
6782      var parentFolderId = target.getAttribute('data-nav-folder-drop-id') || '';
6783      if (!navValidFolderDrop(draggedFolderId, parentFolderId)) return;
6784      event.preventDefault();
6785      if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
6786      target.classList.add('is-drop-target');
6787      return;
6788    }
6789    var ids = navShareDragIdsFromEvent(event);
6790    if (!ids.length) return;
6791    event.preventDefault();
6792    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
6793    target.classList.add('is-drop-target');
6794  }
6795
6796  function onNavLibraryDragLeave(event) {
6797    var target = navDropTarget(event);
6798    if (!target || target.contains(event.relatedTarget)) return;
6799    target.classList.remove('is-drop-target');
6800  }
6801
6802  function onNavLibraryDrop(event) {
6803    var target = navDropTarget(event);
6804    if (!target) return;
6805    var draggedFolderId = navFolderDragIdFromEvent(event);
6806    if (draggedFolderId) {
6807      var parentFolderId = target.getAttribute('data-nav-folder-drop-id') || '';
6808      if (!navValidFolderDrop(draggedFolderId, parentFolderId)) return;
6809      event.preventDefault();
6810      target.classList.remove('is-drop-target');
6811      moveNavFolderToParent(draggedFolderId, parentFolderId);
6812      return;
6813    }
6814    var ids = navShareDragIdsFromEvent(event);
6815    if (!ids.length) return;
6816    event.preventDefault();
6817    target.classList.remove('is-drop-target');
6818    var folderId = target.getAttribute('data-nav-folder-drop-id') || '';
6819    moveNavSharesToFolder(ids, folderId);
6820  }
6821
6822  function onNavLibraryDragEnd(event) {
6823    navDraggingFolderId = '';
6824    navDraggingShareIds = [];
6825    var folder = event.target.closest('[data-nav-folder]');
6826    if (folder) folder.classList.remove('is-folder-dragging');
6827    document.querySelectorAll('.is-drop-target').forEach(function (node) {
6828      node.classList.remove('is-drop-target');
6829    });
6830  }
6831
6832
6833  if (navLibraryNewFolder) navLibraryNewFolder.addEventListener('click', function () { createNavFolder(null, ''); });
6834  [navLibraryFolders, navLibraryFavorites].forEach(function (wrap) {
6835    if (!wrap) return;
6836    wrap.addEventListener('click', function (event) {
6837      if (event.target.closest('[data-nav-folder-name-form]')) {
6838        if (event.target.closest('[data-nav-folder-name-cancel]')) {
6839          event.preventDefault();
6840          cancelNavFolderNameEditor();
6841        }
6842        return;
6843	      }
6844      var addChildBtn = event.target.closest('[data-nav-folder-add-child]');
6845      if (addChildBtn) {
6846        event.preventDefault();
6847        event.stopPropagation();
6848        var parentId = addChildBtn.getAttribute('data-nav-folder-add-child') || '';
6849        navExpandedFolderIds.add(parentId);
6850        navCollapsedFolderIds.delete(parentId);
6851        openNavFolderNameEditor(parentId);
6852        return;
6853      }
6854      var toggleBtn = event.target.closest('[data-nav-folder-toggle]');
6855      if (toggleBtn) {
6856        event.preventDefault();
6857        event.stopPropagation();
6858        var toggleFolderId = toggleBtn.getAttribute('data-nav-folder-toggle') || '';
6859        var willCollapse = navExpandedFolderIds.has(toggleFolderId) || (navCurrentFolderId() === toggleFolderId && !navCollapsedFolderIds.has(toggleFolderId));
6860        if (willCollapse) {
6861          navExpandedFolderIds.delete(toggleFolderId);
6862          navCollapsedFolderIds.add(toggleFolderId);
6863        } else {
6864          navExpandedFolderIds.add(toggleFolderId);
6865          navCollapsedFolderIds.delete(toggleFolderId);
6866        }
6867        if (!willCollapse && isLibraryPage()) {
6868          setNavCurrentFolder(toggleFolderId);
6869          return;
6870        }
6871        renderNavLibrary(navLibraryData || { folders: [], items: [] });
6872        return;
6873      }
6874      var folderLink = event.target.closest('[data-nav-folder-open]');
6875      if (folderLink) {
6876        var openFolderId = folderLink.getAttribute('data-nav-folder-open') || '';
6877        event.preventDefault();
6878        setNavCurrentFolder(openFolderId);
6879        return;
6880      }
6881      var favoriteBtn = event.target.closest('[data-nav-folder-favorite]');
6882      if (!favoriteBtn) return;
6883      event.preventDefault();
6884      event.stopPropagation();
6885      var folderId = favoriteBtn.getAttribute('data-nav-folder-favorite') || '';
6886      var folder = (navLibraryData && navLibraryData.folders || []).find(function (row) {
6887        return row.folderId === folderId;
6888      });
6889      if (!folder) return;
6890      postNavFolderUpdate(folderId, { favorite: !folder.favorite });
6891    });
6892    wrap.addEventListener('submit', function (event) {
6893      var form = event.target.closest('[data-nav-folder-name-form]');
6894      if (!form) return;
6895      event.preventDefault();
6896      var input = form.querySelector('[name="folderName"]');
6897      var name = input ? input.value.trim() : '';
6898      if (!name) {
6899        if (input) input.focus();
6900        return;
6901      }
6902      createNavFolder(name, form.getAttribute('data-parent-folder-id') || '');
6903    });
6904    wrap.addEventListener('keydown', function (event) {
6905      var treeItem = event.target.closest('[role="treeitem"][data-nav-folder]');
6906      if (!treeItem) return;
6907      var folderId = treeItem.getAttribute('data-nav-folder') || '';
6908      if (event.key === 'Enter' || event.key === ' ') {
6909        event.preventDefault();
6910        setNavCurrentFolder(folderId);
6911        return;
6912      }
6913      if (event.key === 'ArrowRight') {
6914        event.preventDefault();
6915        navExpandedFolderIds.add(folderId);
6916        navCollapsedFolderIds.delete(folderId);
6917        renderNavLibrary(navLibraryData || { folders: [], items: [] });
6918        return;
6919      }
6920      if (event.key === 'ArrowLeft') {
6921        event.preventDefault();
6922        navExpandedFolderIds.delete(folderId);
6923        navCollapsedFolderIds.add(folderId);
6924        renderNavLibrary(navLibraryData || { folders: [], items: [] });
6925      }
6926    });
6927    wrap.addEventListener('dragstart', onNavLibraryDragStart);
6928    wrap.addEventListener('dragover', onNavLibraryDragOver);
6929    wrap.addEventListener('dragleave', onNavLibraryDragLeave);
6930    wrap.addEventListener('drop', onNavLibraryDrop);
6931    wrap.addEventListener('dragend', onNavLibraryDragEnd);
6932  });
6933  var navStuffLink = document.getElementById('navStuffLink');
6934  if (navStuffLink) {
6935    navStuffLink.addEventListener('dragover', onNavLibraryDragOver);
6936    navStuffLink.addEventListener('dragleave', onNavLibraryDragLeave);
6937    navStuffLink.addEventListener('drop', onNavLibraryDrop);
6938  }
6939  window.addEventListener('popstate', function () { renderNavLibrary(navLibraryData); });
6940  // Library page refreshes (imports, deletes, plan changes) publish the fresh
6941  // payload — mirror it here so the sidebar never needs its own fetch.
6942  window.addEventListener('microsite-library-stuff-loaded', function (event) {
6943    if (!event || !event.detail) return;
6944    renderNavLibrary(event.detail);
6945    navLibraryLoadedAt = Date.now();
6946  });
6947
6948
6949  window.addEventListener('microsite-library-data', function (event) {
6950    if (event && event.detail) renderNavLibrary(event.detail);
6951  });
6952  window.addEventListener('microsite-library-nav-refresh', function () { loadNavLibrary({ force: true }); });
6953
6954  (function initSessionUi() {
6955    var accountId = getStoredAccountId();
6956    if (!accountId) {
6957      setSignedOutUi();
6958      return;
6959    }
6960    if (isSessionExpired()) {
6961      clearStoredSession();
6962      setSignedOutUi();
6963      return;
6964    }
6965    restoreCachedSignedInUi(localStorage.getItem(ACCOUNT_EMAIL_KEY) || '');
6966    restoreAccountSession();
6967  })();
6968
6969  window.addEventListener('microsite-open-account', function (event) {
6970    openAuthEntry((event && event.detail) || 'login');
6971  });
6972
6973  const authParam = new URLSearchParams(location.search).get('auth');
6974  if (authParam === 'login' || authParam === 'signup') openAuthEntry(authParam);
6975})();
6976</script>
6976
6977  
6977<script>
6978(function () {
6979  const ACCOUNT_ID_KEY = 'microsite_account_id';
6980  const STRIPE_ENABLED = true;
6981  const btn = document.getElementById('upgradeProBtn');
6982  const manageBtn = document.getElementById('manageBillingBtn');
6983  const statusEl = document.getElementById('upgradeProStatus');
6984  const checkoutButtons = Array.from(document.querySelectorAll('[data-checkout-plan], [data-credit-pack]'));
6985  const cadenceButtons = Array.from(document.querySelectorAll('[data-pricing-cadence]'));
6986  const proPriceValue = document.getElementById('proPriceValue');
6987  const proPricePeriod = document.getElementById('proPricePeriod');
6988  const proBillingNote = document.getElementById('proBillingNote');
6989  const proSavingsNote = document.getElementById('proSavingsNote');
6990  const teamPriceValue = document.getElementById('teamPriceValue');
6991  const teamPricePeriod = document.getElementById('teamPricePeriod');
6992  const teamBillingNote = document.getElementById('teamBillingNote');
6993  const teamSavingsNote = document.getElementById('teamSavingsNote');
6994  const billingPanel = document.getElementById('pricingBillingPanel');
6995  const billingTitle = document.getElementById('pricingBillingTitle');
6996  const billingMsg = document.getElementById('pricingBillingMsg');
6997  const billingHint = document.getElementById('pricingBillingHint');
6998  const restoreBtn = document.getElementById('restoreProBtn');
6999  const syncBillingBtn = document.getElementById('syncBillingBtn');
7000  if (!btn) return;
7001  var selectedCadence = 'monthly';
7002
7003  function setCadence(cadence) {
7004    selectedCadence = cadence === 'yearly' ? 'yearly' : 'monthly';
7005    cadenceButtons.forEach(function (button) {
7006      button.setAttribute('aria-pressed', button.getAttribute('data-pricing-cadence') === selectedCadence ? 'true' : 'false');
7007    });
7008    if (proPriceValue) {
7009      proPriceValue.textContent = selectedCadence === 'yearly'
7010        ? (proPriceValue.getAttribute('data-yearly-price') || proPriceValue.textContent)
7011        : (proPriceValue.getAttribute('data-monthly-price') || proPriceValue.textContent);
7012    }
7013    if (proPricePeriod) {
7014      proPricePeriod.textContent = selectedCadence === 'yearly'
7015        ? (proPricePeriod.getAttribute('data-yearly-period') || '')
7016        : (proPricePeriod.getAttribute('data-monthly-period') || '');
7017    }
7018    if (proBillingNote) {
7019      proBillingNote.textContent = selectedCadence === 'yearly'
7020        ? (proBillingNote.getAttribute('data-yearly-note') || '')
7021        : (proBillingNote.getAttribute('data-monthly-note') || '');
7022    }
7023    if (proSavingsNote) {
7024      proSavingsNote.textContent = selectedCadence === 'yearly'
7025        ? (proSavingsNote.getAttribute('data-yearly-savings') || '')
7026        : '';
7027    }
7028    if (teamPriceValue) {
7029      teamPriceValue.textContent = selectedCadence === 'yearly'
7030        ? (teamPriceValue.getAttribute('data-yearly-price') || teamPriceValue.textContent)
7031        : (teamPriceValue.getAttribute('data-monthly-price') || teamPriceValue.textContent);
7032    }
7033    if (teamPricePeriod) {
7034      teamPricePeriod.textContent = selectedCadence === 'yearly'
7035        ? (teamPricePeriod.getAttribute('data-yearly-period') || '')
7036        : (teamPricePeriod.getAttribute('data-monthly-period') || '');
7037    }
7038    if (teamBillingNote) {
7039      teamBillingNote.textContent = selectedCadence === 'yearly'
7040        ? (teamBillingNote.getAttribute('data-yearly-note') || '')
7041        : (teamBillingNote.getAttribute('data-monthly-note') || '');
7042    }
7043    if (teamSavingsNote) {
7044      teamSavingsNote.textContent = selectedCadence === 'yearly'
7045        ? (teamSavingsNote.getAttribute('data-yearly-savings') || '')
7046        : '';
7047    }
7048  }
7049
7050  cadenceButtons.forEach(function (button) {
7051    button.addEventListener('click', function () {
7052      setCadence(button.getAttribute('data-pricing-cadence'));
7053    });
7054  });
7055
7056  function setProActiveUi(message) {
7057    btn.textContent = 'Paid plan active';
7058    btn.disabled = true;
7059    if (manageBtn && STRIPE_ENABLED) {
7060      manageBtn.classList.remove('hidden');
7061    }
7062    if (statusEl) statusEl.textContent = message || 'Your account is on a paid plan.';
7063    if (typeof window.micrositeApplyPlanState === 'function') window.micrositeApplyPlanState('pro');
7064    else if (typeof window.micrositeSyncProUpsell === 'function') window.micrositeSyncProUpsell(true);
7065    var activeNote = document.getElementById('pricingProActiveNote');
7066    if (activeNote) activeNote.classList.remove('hidden');
7067    if (billingPanel) billingPanel.classList.add('hidden');
7068  }
7069
7070  function showProBillingNotice(billing) {
7071    if (!billing || !billing.notice) return;
7072    applyBillingUi(billing, 'pro');
7073  }
7074
7075  function applyBillingUi(billing, plan) {
7076    if (!billingPanel || !STRIPE_ENABLED) return;
7077    var notice = billing && billing.notice;
7078    var isPro = plan === 'pro' || billing?.proAccess;
7079    if (isPro && !notice && !billing?.needsRestore) {
7080      billingPanel.classList.add('hidden');
7081      return;
7082    }
7083    var showPanel = !!(notice || billing?.needsRestore || (!isPro && billing?.stripeLinked));
7084    if (!showPanel) {
7085      billingPanel.classList.add('hidden');
7086      return;
7087    }
7088    billingPanel.classList.remove('hidden');
7089    billingPanel.classList.remove('pricing-billing-panel--info', 'pricing-billing-panel--warning');
7090    if (notice && notice.level === 'warning') billingPanel.classList.add('pricing-billing-panel--warning');
7091    else billingPanel.classList.add('pricing-billing-panel--info');
7092
7093    if (billingTitle) billingTitle.textContent = (notice && notice.title) || 'Billing';
7094    if (billingMsg) {
7095      billingMsg.textContent = (notice && notice.message)
7096        || (billing?.needsRestore
7097          ? 'We can match your Stripe subscription to this account using the email on your receipt.'
7098          : 'Link your Stripe subscription to unlock your paid plan.');
7099    }
7100    if (billingHint) {
7101      if (billing?.needsRestore) {
7102        billingHint.textContent = 'Use the same email here as on your Stripe receipt, then tap Restore Pro access or Sync from Stripe.';
7103        billingHint.classList.remove('hidden');
7104      } else {
7105        billingHint.classList.add('hidden');
7106      }
7107    }
7108    if (restoreBtn) {
7109      restoreBtn.classList.toggle('hidden', !billing?.needsRestore || isPro);
7110    }
7111    if (syncBillingBtn) {
7112      syncBillingBtn.classList.toggle('hidden', !STRIPE_ENABLED || isPro);
7113    }
7114  }
7115
7116  async function syncBillingFromStripe(messagePrefix) {
7117    const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
7118    if (!accountId || !STRIPE_ENABLED) {
7119      if (statusEl) statusEl.textContent = 'Sign in to sync billing.';
7120      return null;
7121    }
7122    if (statusEl) statusEl.textContent = (messagePrefix || 'Syncing') + ' from Stripe\u2026';
7123    const res = await fetch('/account/sync-billing', {
7124      method: 'POST',
7125      headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
7126      body: '{}',
7127    });
7128    const data = await res.json().catch(function () { return {}; });
7129    if (!res.ok) {
7130      if (statusEl) statusEl.textContent = data.error || 'Could not sync billing.';
7131      return null;
7132    }
7133    return data;
7134  }
7135
7136  async function restoreProAccess() {
7137    const data = await syncBillingFromStripe('Restoring billing access');
7138    if (!data) return;
7139    if (data.plan === 'pro' || (data.billing && data.billing.proAccess)) {
7140      setProActiveUi('Paid access restored from your Stripe subscription.');
7141      window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' }));
7142      return;
7143    }
7144    applyBillingUi(data.billing, data.plan);
7145    if (statusEl) {
7146      statusEl.textContent = data.billing?.notice?.message
7147        || 'No active paid subscription found for this account email. Check Stripe uses the same address.';
7148    }
7149  }
7150
7151  async function startCheckout(button) {
7152    const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
7153    if (!accountId) {
7154      window.dispatchEvent(new CustomEvent('microsite-open-account', { detail: 'signup' }));
7155      if (statusEl) statusEl.textContent = 'Sign in or create an account first.';
7156      return;
7157    }
7158    const creditPack = button?.getAttribute('data-credit-pack') || '';
7159    const buttonCadence = button?.getAttribute('data-checkout-cadence') || selectedCadence;
7160    const checkoutPlan = button?.getAttribute('data-checkout-plan') || 'personal';
7161    const checkoutKind = button?.getAttribute('data-checkout-kind') || (checkoutPlan.indexOf('clips_') === 0 ? 'clips' : 'base');
7162    const seats = Number(button?.getAttribute('data-checkout-seats')) || 0;
7163    if (typeof window.micrositePiqo === 'function') {
7164      window.micrositePiqo('checkout_started', { plan: checkoutPlan, cadence: buttonCadence, kind: checkoutKind });
7165    }
7166    if (STRIPE_ENABLED) {
7167      if (statusEl) statusEl.textContent = 'Redirecting to secure checkout\u2026';
7168      const res = await fetch(creditPack ? '/billing/credits-checkout' : '/billing/create-checkout', {
7169        method: 'POST',
7170        headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
7171        body: JSON.stringify(creditPack
7172          ? { pack: creditPack }
7173          : { kind: checkoutKind, plan: checkoutPlan, cadence: buttonCadence, seats: seats }),
7174      });
7175      const data = await res.json().catch(function () { return {}; });
7176      if (!res.ok || !data.url) {
7177        if (data.manageBilling && typeof window.micrositeOpenBillingPortal === 'function') {
7178          try { await window.micrositeOpenBillingPortal(); } catch (error) { if (statusEl) statusEl.textContent = error.message || data.error; }
7179          return;
7180        }
7181        if (statusEl) statusEl.textContent = data.error || 'Could not start checkout.';
7182        return;
7183      }
7184      window.location.href = data.url;
7185      return;
7186    }
7187    if (statusEl) statusEl.textContent = 'Upgrading\u2026';
7188    const res = await fetch('/account/upgrade-pro', {
7189      method: 'POST',
7190      headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
7191      body: JSON.stringify({ cadence: buttonCadence, plan: checkoutPlan }),
7192    });
7193    const data = await res.json().catch(function () { return {}; });
7194    if (!res.ok) {
7195      if (statusEl) statusEl.textContent = data.error || 'Upgrade failed.';
7196      return;
7197    }
7198    setProActiveUi('You\u2019re on a paid plan. Open Library or Branding to customise share pages.');
7199  }
7200
7201  async function openBillingPortal() {
7202    const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
7203    if (!accountId) return;
7204    if (statusEl) statusEl.textContent = 'Opening billing portal\u2026';
7205    const res = await fetch('/billing/portal', {
7206      method: 'POST',
7207      headers: { 'Content-Type': 'application/json', 'x-account-id': accountId },
7208      body: '{}',
7209    });
7210    const data = await res.json().catch(function () { return {}; });
7211    if (!res.ok || !data.url) {
7212      if (statusEl) statusEl.textContent = data.error || 'Could not open billing portal.';
7213      return;
7214    }
7215    window.location.href = data.url;
7216  }
7217
7218  checkoutButtons.forEach(function (button) {
7219    button.addEventListener('click', function () { startCheckout(button); });
7220  });
7221  if (manageBtn) manageBtn.addEventListener('click', openBillingPortal);
7222  if (restoreBtn) restoreBtn.addEventListener('click', restoreProAccess);
7223  if (syncBillingBtn) {
7224    syncBillingBtn.addEventListener('click', function () {
7225      syncBillingFromStripe('Syncing').then(function (data) {
7226        if (!data) return;
7227        if (data.plan === 'pro' || (data.billing && data.billing.proAccess)) {
7228          setProActiveUi('Billing synced — you are on a paid plan.');
7229          window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' }));
7230        } else {
7231          applyBillingUi(data.billing, data.plan);
7232          if (statusEl) statusEl.textContent = 'Sync complete. See billing details below.';
7233        }
7234      });
7235    });
7236  }
7237
7238  const checkout = new URLSearchParams(location.search).get('checkout');
7239  if (checkout === 'cancelled' && statusEl) {
7240    statusEl.textContent = 'Checkout cancelled. You can subscribe whenever you\u2019re ready.';
7241  }
7242
7243  function applyAccountBilling(data) {
7244    if (!data) return;
7245    if (data.plan === 'pro') {
7246      setProActiveUi(checkout === 'success' ? 'Your paid plan is active. Thanks for subscribing!' : 'Your account is on a paid plan.');
7247      if (checkout === 'clips_success' && statusEl) statusEl.textContent = 'Clips add-on 
7247is active. Thanks for subscribing!';
7248      if (checkout === 'credits_success' && statusEl) statusEl.textContent = 'AI credits added. Thanks!';
7249      showProBillingNotice(data.billing);
7250      window.dispatchEvent(new CustomEvent('microsite-plan-updated', { detail: 'pro' }));
7251    } else {
7252      applyBillingUi(data.billing, data.plan);
7253      if ((checkout === 'success' || checkout === 'clips_success') && statusEl && (!data.billing || !data.billing.proAccess)) {
7254        statusEl.textContent = 'Payment received. Tap Restore access if your paid plan is not active yet.';
7255      }
7256    }
7257  }
7258
7259  const accountId = localStorage.getItem(ACCOUNT_ID_KEY) || '';
7260  if (accountId) {
7261    const afterCheckout = (checkout === 'success' || checkout === 'clips_success') && STRIPE_ENABLED;
7262    const syncPromise = afterCheckout
7263      ? syncBillingFromStripe('Confirming payment')
7264      : Promise.resolve(null);
7265    syncPromise.then(function (syncData) {
7266      if (syncData) applyAccountBilling(syncData);
7267      return fetch('/account/ping', {
7268        method: 'POST',
7269        headers: { 'Content-Type': 'application/json' },
7270        body: JSON.stringify({ accountId: accountId }),
7271      });
7272    }).then(function (r) { return r && r.json ? r.json() : {}; }).then(function (data) {
7273      if (!data || !data.plan) return;
7274      if (data.plan === 'pro') {
7275        applyAccountBilling(data);
7276      } else {
7277        applyBillingUi(data.billing, data.plan);
7278      }
7279      if (typeof window.micrositeRenderReferralPanel === 'function') {
7280        window.micrositeRenderReferralPanel(data.referral || null);
7281      }
7282      if (typeof window.micrositeApplyEmailPrefs === 'function') {
7283        window.micrositeApplyEmailPrefs(data.emailPrefs || null, data.plan);
7284      }
7285    }).catch(function () {});
7286  }
7287})();
7288</script>
7288
7289  
7289<script>
7290(function(){
7291  var steps=['record','studio','share','analytics'];
7292  var reduce=window.matchMedia&&window.matchMedia('(prefers-reduced-motion: reduce)').matches;
7293  document.querySelectorAll('[data-product-demo]').forEach(function(root){
7294    if(root.dataset.demoReady==='1')return;
7295    root.dataset.demoReady='1';
7296    var timer=null;
7297    function activate(step,userAction){
7298      if(steps.indexOf(step)<0)return;
7299      root.dataset.active=step;
7300      root.querySelectorAll('[data-demo-step]').forEach(function(btn){
7301        var active=btn.dataset.demoStep===step;
7302        btn.classList.toggle('is-active',active);
7303        btn.setAttribute('aria-pressed',active?'true':'false');
7304      });
7305      root.querySelectorAll('[data-demo-pane]').forEach(function(pane){pane.setAttribute('aria-hidden',pane.dataset.demoPane===step?'false':'true');});
7306      if(step==='share'&&!userAction&&root.dataset.playing!=='false')root.classList.add('is-video-playing');
7307      else if(step!=='share')root.classList.remove('is-video-playing');
7308    }
7309    function stop(){if(timer){clearInterval(timer);timer=null;}}
7310    function start(){
7311      stop();
7312      if(reduce||root.dataset.playing==='false')return;
7313      timer=setInterval(function(){var at=steps.indexOf(root.dataset.active);activate(steps[(at+1)%steps.length],false);},4200);
7314    }
7315    root.querySelectorAll('[data-demo-step]').forEach(function(btn){btn.addEventListener('click',function(){activate(btn.dataset.demoStep,true);start();});});
7316    var autoplay=root.querySelector('[data-demo-autoplay]');
7317    if(autoplay)autoplay.addEventListener('click',function(){
7318      var playing=root.dataset.playing!=='false';
7319      root.dataset.playing=playing?'false':'true';
7320      autoplay.setAttribute('aria-pressed',playing?'false':'true');
7321      autoplay.setAttribute('aria-label',playing?'Play product tour':'Pause product tour');
7322      playing?stop():start();
7323    });
7324    var zoom=root.querySelector('[data-demo-zoom]');
7325    if(zoom)zoom.addEventListener('click',function(){var on=root.classList.toggle('is-zoomed');zoom.setAttribute('aria-pressed',on?'true':'false');zoom.firstChild.nodeValue=on?'Reset zoom ':'Zoom UI ';});
7326    var video=root.querySelector('[data-demo-video]');
7327    if(video)video.addEventListener('click',function(){root.classList.toggle('is-video-playing');});
7328    root.addEventListener('mouseenter',stop);
7329    root.addEventListener('mouseleave',start);
7330    root.addEventListener('focusin',stop);
7331    root.addEventListener('focusout',function(event){if(!root.contains(event.relatedTarget))start();});
7332    activate(root.dataset.active,false);
7333    if(reduce){root.dataset.playing='false';if(autoplay){autoplay.setAttribute('aria-pressed','false');autoplay.setAttribute('aria-label','Play product tour');}}
7334    start();
7335  });
7336})();
7337</script>
7337
7338  
7338<script>
7339(function () {
7340  document.querySelectorAll('[data-aha-cta]').forEach(function (link) {
7341    link.addEventListener('click', function () {
7342      try { sessionStorage.setItem('microsite_aha_started_at', String(Date.now())); } catch (e) {}
7343      try {
7344        if (typeof window.gtag === 'function') {
7345          window.gtag('event', 'record_aha_step', {
7346            funnel_step: 'home_cta_clicked',
7347            cta: link.getAttribute('data-aha-cta') || 'record',
7348          });
7349        } else if (Array.isArray(window.dataLayer)) {
7350          window.dataLayer.push({
7351            event: 'record_aha_step',
7352            funnel_step: 'home_cta_clicked',
7353            cta: link.getAttribute('data-aha-cta') || 'record',
7354          });
7355        }
7356      } catch (e) {}
7357    });
7358  });
7359})();
7360</script>
7360
7361  
7361<script>
7362(function () {
7363  var track = document.querySelector('.mh-marquee-track');
7364  if (!track || !('IntersectionObserver' in window)) return;
7365  new IntersectionObserver(function (entries) {
7366    track.style.animationPlayState = entries[0].isIntersecting ? 'running' : 'paused';
7367    track.querySelectorAll('.mh-marquee-run').forEach(function (run) {
7368      run.style.animationPlayState = entries[0].isIntersecting ? 'running' : 'paused';
7369    });
7370  }).observe(track);
7371})();
7372</script>
7372
7373  
7373<script>
7374(function () {
7375  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
7376  var revealTargets = Array.prototype.slice.call(document.querySelectorAll('[data-mk-reveal]'));
7377  if (!revealTargets.length) return;
7378
7379  function showAll() {
7380    revealTargets.forEach(function (el) { el.classList.add('is-visible'); });
7381  }
7382
7383  if (reduceMotion) {
7384    showAll();
7385    return;
7386  }
7387
7388  document.documentElement.classList.add('mk-motion-ready');
7389  
7390
7391  function loadScript(src, done) {
7392    var script = document.createElement('script');
7393    script.src = src;
7394    script.defer = true;
7395    script.onload = done;
7396    script.onerror = showAll;
7397    document.head.appendChild(script);
7398  }
7399
7400  loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js', function () {
7401    loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js', function () {
7402      if (!window.gsap || !window.ScrollTrigger) {
7403        showAll();
7404        return;
7405      }
7406      window.gsap.registerPlugin(window.ScrollTrigger);
7407      revealTargets.forEach(function (el) {
7408        window.gsap.to(el, {
7409          autoAlpha: 1,
7410          y: 0,
7411          duration: 0.72,
7412          ease: 'power3.out',
7413          scrollTrigger: {
7414            trigger: el,
7415            start: 'top 86%',
7416            once: true
7417          },
7418          onComplete: function () {
7419            el.classList.add('is-visible');
7420          }
7421        });
7422      });
7423      document.querySelectorAll('[data-mk-parallax]').forEach(function (el) {
7424        window.gsap.to(el, {
7425          yPercent: Number(el.getAttribute('data-mk-parallax')) || -8,
7426          ease: 'none',
7427          scrollTrigger: {
7428            trigger: el,
7429            start: 'top bottom',
7430            end: 'bottom top',
7431            scrub: 0.65
7432          }
7433        });
7434      });
7435    });
7436  });
7437})();
7438</script>
vendor: 1 bytes, line 7438
7438
7439<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>
7439
7440</body>
7441</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.