PageSourceSearch

https://handlane.com/pricing

html handlane.com collected 2026-10-02 01:31:05 UTC 85,123 bytes, 1,336 lines download raw bytes

1<!doctype html>
2<html lang="ar" dir="rtl">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6    <meta name="theme-color" content="#eef6ff" media="(prefers-color-scheme: light)">
7    <meta name="theme-color" content="#0d1320" media="(prefers-color-scheme: dark)">
8    <meta name="apple-mobile-web-app-capable" content="yes">
9    <meta name="mobile-web-app-capable" content="yes">
10    <meta name="format-detection" content="telephone=no">
11    <meta name="description" content="Handlane مشاركة ملفات مؤقتة وآمنة بين أجهزتك عبر WebRTC بدون رفع الملفات إلى الخادم.">
12    <title>Handlane</title>
13    <link rel="icon" href="data:,">
14    <link rel="stylesheet" href="/styles.css?v=20260514-panelheight">
15    <link rel="icon" href="/favicon.ico" sizes="any">
16    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
17    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
18    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
19    <link rel="manifest" href="/site.webmanifest">
20    <meta name="theme-color" content="#0f172a">
21  </head>
22  <body>
23    <main>
24      <div class="maintenance-banner hidden" id="maintenanceBanner" role="status" aria-live="polite"></div>
25
26      <!-- Side-margin floating decoration. Pure CSS shapes that drift slowly,
27           never overlap the centered content (pointer-events: none, behind
28           the main shell). Hidden inside the admin app and on small screens. -->
29      <aside class="side-flair side-flair-left" aria-hidden="true">
30        <span class="flair flair-image" data-kind="IMG"></span>
31        <span class="flair flair-video" data-kind="MP4"></span>
32        <span class="flair flair-pdf" data-kind="PDF"></span>
33        <span class="flair flair-archive" data-kind="ZIP"></span>
34      </aside>
35      <aside class="side-flair side-flair-right" aria-hidden="true">
36        <span class="flair flair-doc" data-kind="DOC"></span>
37        <span class="flair flair-audio" data-kind="MP3"></span>
38        <span class="flair flair-image" data-kind="PNG"></span>
39        <span class="flair flair-text" data-kind="TXT"></span>
40      </aside>
41
42      <section class="landing-view" id="landingView">
43        <!--
44          Site-wide floating-file backdrop. Sits BEHIND every section
45          of the landing page (z-index:0 on the wrapper, content
46          floats above via z-index:1 on the inner sections through
47          .reveal etc). Each tile is positioned in pixels from the
48          top of the landing view so the extensions are scattered
49          throughout the page (hero, between sections, near plans,
50          near footer) — not clustered in one band. pointer-events
51          stays `none` on every tile so the CTAs and links underneath
52          remain fully clickable.
53        -->
54        <div class="page-tiles" aria-hidden="true">
55          <!-- Hero region (y: 60–600px) — corners and edges -->
56          <div class="file-tile tile-pdf"><strong>PDF</strong><span>.pdf</span></div>
57          <div class="file-tile tile-doc"><strong>DOC</strong><span>.docx</span></div>
58          <div class="file-tile tile-xls"><strong>XLS</strong><span>.xlsx</span></div>
59          <div class="file-tile tile-ppt"><strong>PPT</strong><span>.pptx</span></div>
60          <div class="file-tile tile-jpg"><strong>JPG</strong><span>.jpg</span></div>
61          <div class="file-tile tile-psd"><strong>PSD</strong><span>.psd</span></div>
62          <div class="file-tile tile-svg"><strong>SVG</strong><span>.svg</span></div>
63          <div class="file-tile tile-gif"><strong>GIF</strong><span>.gif</span></div>
64
65          <!-- Strip / Storyboard region (y: 700–1300px) -->
66          <div class="file-tile tile-ai"><strong>AI</strong><span>.ai</span></div>
67          <div class="file-tile tile-eps"><strong>EPS</strong><span>.eps</span></div>
68          <div class="file-tile tile-png"><strong>PNG</strong><span>.png</span></div>
69          <div class="file-tile tile-heic"><strong>HEIC</strong><span>.heic</span></div>
70
71          <!-- Why-Handlane region (y: 1300–1900px) -->
72          <div class="file-tile tile-mp3"><strong>MP3</strong><span>.mp3</span></div>
73          <div class="file-tile tile-wav"><strong>WAV</strong><span>.wav</span></div>
74          <div class="file-tile tile-mp4"><strong>MP4</strong><span>.mp4</span></div>
75          <div class="file-tile tile-mov"><strong>MOV</strong><span>.mov</span></div>
76
77          <!-- Plans region (y: 1900–2500px) -->
78          <div class="file-tile tile-zip"><strong>ZIP</strong><span>.zip</span></div>
79          <div class="file-tile tile-rar"><strong>RAR</strong><span>.rar</span></div>
80          <div class="file-tile tile-7z"><strong>7Z</strong><span>.7z</span></div>
81          <div class="file-tile tile-txt"><strong>TXT</strong><span>.txt</span></div>
82
83          <!-- Code / footer region (y: 2500+px) -->
84          <div class="file-tile tile-html"><strong>HTML</strong><span>.html</span></div>
85          <div class="file-tile tile-css"><strong>CSS</strong><span>.css</span></div>
86          <div class="file-tile tile-js"><strong>JS</strong><span>.js</span></div>
87          <div class="file-tile tile-json"><strong>JSON</strong><span>.json</span></div>
88        </div>
89
90        <header class="site-nav">
91          <a class="nav-brand" href="/" aria-label="Handlane">
92            <span class="logo" aria-hidden="true">
93              <span class="blue"></span>
94              <span class="red"></span>
95              <span class="yellow"></span>
96              <span class="green"></span>
97            </span>
98            <span>Handlane</span>
99          </a>
100          <div class="nav-controls">
101            <label class="language-select" aria-label="Language">
102              <select id="languageSelect">
103                <option value="ar">العربية</option>
104                <option value="en">English</option>
105                <option value="zh">中文</option>
106                <option value="hi">हिन्दी</option>
107                <option value="es">Español</option>
108                <option value="fr">Français</option>
109                <option value="pt">Português</option>
110                <option value="ru">Русский</option>
111                <option value="id">Indonesia</option>
112                <option value="de">Deutsch</option>
113                <option value="ja">日本語</option>
114                <option value="tr">Türkçe</option>
115                <option value="ko">한국어</option>
116                <option value="it">Italiano</option>
117                <option value="vi">Tiếng Việt</option>
118                <option value="pl">Polski</option>
119                <option value="nl">Nederlands</option>
120                <option value="uk">Українська</option>
121                <option value="th">ไทย</option>
122                <option value="bn">বাংলা</option>
123                <option value="ur">اردو</option>
124                <option value="fa">فارسی</option>
125                <option value="sv">Svenska</option>
126                <option value="no">Norsk</option>
127                <option value="da">Dansk</option>
128                <option value="fi">Suomi</option>
129                <option value="el">Ελληνικά</option>
130                <option value="cs">Čeština</option>
131                <option value="hu">Magyar</option>
132                <option value="ro">Română</option>
133                <option value="he">עברית</option>
134                <option value="ms">Bahasa Melayu</option>
135              </select>
136            </label>
137            <a class="nav-link" href="/pricing" data-route-link data-i18n="pricingButton">Pricing</a>
138            <a class="nav-link" href="/account" data-route-link data-i18n="accountButton">Account</a>
139            <button class="nav-action" type="button" data-start-tool data-i18n="startButton">Get Started</button>
140          </div>
141        </header>
142
143        <section class="hero">
144          <div class="hero-aurora" aria-hidden="true"></div>
145          <div class="brand-orbit" aria-hidden="true">
146            <span class="blue"></span>
147            <span class="red"></span>
148            <span class="yellow"></span>
149            <span class="green"></span>
150          </div>
151          <div class="hero-scene" aria-hidden="true">
152            <div class="signal-map">
153              <span class="node desktop"></span>
154              <span class="node phone"></span>
155              <span class="node tablet"></span>
156              <span class="line one"></span>
157              <span class="line two"></span>
158              <span class="packet p1"></span>
159              <span class="packet p2"></span>
160              <span class="packet p3"></span>
161            </div>
162            <!--
163              The hero scene now holds only the signal-map illustration
164              and the abstract floating shapes. The labelled file-tiles
165              (PDF / DOC / MP4 / …) were moved up to .page-tiles at the
166              landing-view level so they scatter across the WHOLE page
167              rather than clustering inside the hero.
168            -->
169            <div class="floating-file image-file"></div>
170            <div class="floating-file stack-file">
171              <span></span>
172              <span></span>
173              <span></span>
174            </div>
175            <div class="floating-qr">
176              <span></span><span></span><span></span><span></span>
177              <span></span><span></span><span></span><span></span>
178              <span></span><span></span><span></span><span></span>
179              <span></span><span></span><span></span><span></span>
180            </div>
181          </div>
182
183          <div class="hero-copy">
184            <p class="hero-kicker" data-i18n="heroKicker">Private WebRTC sharing</p>
185            <h1>Handlane</h1>
186            <p class="hero-lead" data-i18n="heroLead">انقل الصور والملفات بين أجهزتك مباشرة، بجلسة مؤقتة ومفتاح خاص لا يرسل إلى الخادم.</p>
187            <div class="hero-actions">
188              <button class="hero-primary" type="button" data-start-tool data-i18n="startButton">Get Started</button>
189            </div>
190            <div class="hero-metrics" aria-label="Handlane capabilities">
191              <article>
192                <strong data-i18n="metricDirectTitle">Direct</strong>
193                <span data-i18n="metricDirectText">Device to device</span>
194              </article>
195              <article>
196                <strong data-i18n="metricPrivateTitle">Private</strong>
197                <span data-i18n="metricPrivateText">Key stays with you</span>
198              </article>
199              <article>
200                <strong data-i18n="metricFastTitle">Instant</strong>
201                <span data-i18n="metricFastText">Scan and send</span>
202              </article>
203            </div>
204          </div>
205        </section>
206
207        <section class="landing-strip reveal" aria-label="Handlane highlights">
208          <article>
209            <strong data-i18n="stripWebrtcTitle">WebRTC</strong>
210            <span data-i18n="stripWebrtc">نقل مباشر بين الأجهزة</span>
211          </article>
212          <article>
213            <strong data-i18n="stripNoUploadsTitle">No Uploads</strong>
214            <span data-i18n="stripNoUploads">الخادم للإشارة فقط</span>
215          </article>
216          <article>
217            <strong data-i18n="stripTemporaryTitle">Temporary</strong>
218            <span data-i18n="stripTemporary">جلسات سريعة وآمنة</span>
219          </article>
220        </section>
221
222        <!--
223          "Handlane vs Cloud Upload" comparison section.
224          The hero sells the abstract idea (private, direct, instant);
225          this section grounds it in a concrete side-by-side: what
226          happens when you send a 500 MB video via email/Drive/WeTransfer
227          versus Handlane. Each row maps a typical pain point to how
228          Handlane avoids it, so visitors immediately see WHY they'd
229          switch instead of just being told "we're better".
230        -->
231        <section class="why-handlane reveal" aria-labelledby="whyTitle">
232          <div class="section-copy">
233            <p data-i18n="whyKicker">Why Handlane</p>
234            <h2 id="whyTitle" data-i18n="whyTitle">The cloud upload that doesn't actually upload.</h2>
235            <span data-i18n="whyCopy">Most "cloud transfers" hold a copy of your file on someone else's server, charge for storage, and slow you down. Handlane skips the middleman.</span>
236          </div>
237          <div class="why-grid">
238            <article class="why-card why-card-cloud">
239              <header>
240                <span class="why-tag" data-i18n="cloudWayTag">Cloud upload</span>
241                <strong data-i18n="cloudWayTitle">Email / Drive / WeTransfer</strong>
242              </header>
243              <ul>
244                <li><span class="why-x" aria-hidden="true">×</span><span data-i18n="cloudWayConOne">25 MB attachment caps, 2 GB free-tier limits</span></li>
245                <li><span class="why-x" aria-hidden="true">×</span><span data-i18n="cloudWayConTwo">Upload to server, wait, then recipient downloads</span></li>
246                <li><span class="why-x" aria-hidden="true">×</span><span data-i18n="cloudWayConThree">Your file lives on their disk indefinitely</span></li>
247                <li><span class="why-x" aria-hidden="true">×</span><span data-i18n="cloudWayConFour">Links can be guessed, scraped, or forwarded</span></li>
248              </ul>
249            </article>
250            <article class="why-card why-card-handlane">
251              <header>
252                <span class="why-tag is-primary" data-i18n="handlaneWayTag">Handlane</span>
253                <strong data-i18n="handlaneWayTitle">Direct WebRTC, key in the link</strong>
254              </header>
255              <ul>
256                <li><span class="why-y" aria-hidden="true">✓</span><span data-i18n="handlaneWayProOne">Any file size — limited only by your network</span></li>
257                <li><span class="why-y" aria-hidden="true">✓</span><span data-i18n="handlaneWayProTwo">Device → device, no detour through storage</span></li>
258                <li><span class="why-y" aria-hidden="true">✓</span><span data-i18n="handlaneWayProThree">The room ends when you end it — nothing kept</span></li>
259                <li><span class="why-y" aria-hidden="true">✓</span><span data-i18n="handlaneWayProFour">Private key lives in the URL fragment, not on us</span></li>
260              </ul>
261            </article>
262          </div>
263          <div class="why-stats" aria-label="Handlane at a glance">
264            <article>
265              <strong>0</strong>
266              <span data-i18n="whyStatStored">files stored on our servers</span>
267            </article>
268            <article>
269              <strong>∞</strong>
270              <span data-i18n="whyStatSize">file size limit</span>
271            </article>
272            <article>
273              <strong>E2E</strong>
274              <span data-i18n="whyStatEncryption">key never leaves your devices</span>
275            </article>
276            <article>
277              <strong>&lt;1s</strong>
278              <span data-i18n="whyStatHandshake">connection handshake</span>
279            </article>
280          </div>
281        </section>
282
283        <section class="storyboard reveal" aria-labelledby="storyTitle">
284          <div class="section-copy">
285            <p data-i18n="storyKicker">How it works</p>
286            <h2 id="storyTitle" data-i18n="storyTitle">One clean flow, from any device.</h2>
287            <span data-i18n="storyCopy">Handlane keeps the server out of your files. It only helps devices find each other, then WebRTC carries the transfer.</span>
288          </div>
289          <div class="story-grid">
290            <article>
291              <span>01</span>
292              <strong data-i18n="storyOneTitle">Start a room</strong>
293              <p data-i18n="storyOneText">Create a temporary session from the website or the extension.</p>
294            </article>
295            <article>
296              <span>02</span>
297              <strong data-i18n="storyTwoTitle">Scan the key</strong>
298              <p data-i18n="storyTwoText">Join through a QR code with a private key that stays in the link fragment.</p>
299            </article>
300            <article>
301              <span>03</span>
302              <strong data-i18n="storyThreeTitle">Send directly</strong>
303              <p data-i18n="storyThreeText">Files move through a WebRTC DataChannel, not through storage.</p>
304            </article>
305            <article>
306              <span>04</span>
307              <strong data-i18n="storyFourTitle">Close cleanly</strong>
308              <p data-i18n="storyFourText">The room is temporary, and the signal server cleans up after the session.</p>
309            </article>
310          </div>
311        </section>
312
313        <section class="plans reveal landing-plans" aria-labelledby="plansTitle">
314          <div class="section-copy">
315            <p data-i18n="plansKicker">Plans</p>
316            <h2 id="plansTitle" data-i18n="plansHomeTitle">Free for quick transfers. Plus &amp; Pro when you need more room.</h2>
317            <span data-i18n="plansHomeCopy">Every plan keeps WebRTC direct-transfer at the core. Upgrades unlock more sessions, more devices, and longer rooms — never more cloud storage, because Handlane never stores your files.</span>
318          </div>
319          <!--
320            Plans grid — INTENTIONALLY uses the exact same markup the
321            /pricing page uses (`plan-grid pricing-grid pricing-grid-4`,
322            same `data-plan-card`, same `data-popular-label`, same
323            `.plan-features` with `.strike` rows, same `.plan-primary` /
324            `.plan-ghost` buttons). That way the visual language is
325            identical across the two pages and the comparison columns
326            line up feature-by-feature. The only thing the landing
327            page omits is the monthly/yearly toggle (this is a tease;
328            the toggle lives on /pricing).
329          -->
330          <div class="plan-grid pricing-grid pricing-grid-4 landing-pricing-grid">
331
332            <article class="plan-card" data-plan-card="free">
333              <span data-i18n="freePlan">Free</span>
334              <div class="plan-price">
335                <strong class="plan-price-value">$0</strong>
336                <span class="plan-price-cycle" data-i18n="planForever">forever</span>
337              </div>
338              <ul class="plan-features">
339                <li data-i18n="featSessions10">10 sessions / month</li>
340                <li data-i18n="featDevice1">1 receiving device per session</li>
341                <li data-i18n="featDuration10">10-minute sessions</li>
342                <li data-i18n="featNoAccount">No account required</li>
343                <li class="strike" data-i18n="featSessionsUnlimited">Unlimited sessions</li>
344                <li class="strike" data-i18n="featDevices5">Up to 5 receiving devices</li>
345                <li class="strike" data-i18n="featAdvanced">Advanced transfer features</li>
346                <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
347              </ul>
348              <button class="plan-ghost" type="button" data-start-tool data-i18n="planCtaFree">Start with Free</button>
349            </article>
350
351            <article class="plan-card" data-plan-card="plus">
352              <span data-i18n="plusPlan">Plus</span>
353              <div class="plan-price">
354                <strong class="plan-price-value">$3.99</strong>
355                <span class="plan-price-cycle" data-i18n="perMonth">/ month</span>
356              </div>
357              <ul class="plan-features">
358                <li data-i18n="featSessionsUnlimited">Unlimited sessions</li>
359                <li data-i18n="featDevice1">1 receiving device per session</li>
360                <li data-i18n="featDuration30">30-minute sessions</li>
361                <li data-i18n="featGoogleSync">Google sign-in &amp; sync</li>
362                <li data-i18n="featEmailSupport">Email support</li>
363                <li class="strike" data-i18n="featDevices5">Up to 5 receiving devices</li>
364                <li class="strike" data-i18n="featAdvanced">Advanced transfer features</li>
365                <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
366              </ul>
367              <a class="plan-primary" href="/pricing" data-route-link data-i18n="subscribeShort">Subscribe</a>
368            </article>
369
370            <article class="plan-card featured" data-plan-card="pro" data-popular-label="Most popular">
371              <span data-i18n="proPlan">Pro</span>
372              <div class="plan-price">
373                <strong class="plan-price-value">$7.99</strong>
374                <span class="plan-price-cycle" data-i18n="perMonth">/ month</span>
375              </div>
376              <ul class="plan-features">
377                <li data-i18n="featEverythingPlus">Everything in Plus</li>
378                <li data-i18n="featDevices5">Up to 5 receiving devices</li>
379                <li data-i18n="featDuration90">90-minute sessions</li>
380                <li data-i18n="featAdvanced">Advanced transfer features</li>
381                <li data-i18n="featPrioritySignaling">Priority signaling</li>
382                <li data-i18n="featPrioritySupport">Priority support</li>
383                <li class="strike" data-i18n="featDevices10">Up to 10 receiving devices</li>
384                <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
385              </ul>
386              <a class="plan-primary" href="/pricing" data-route-link data-i18n="subscribeShort">Subscribe</a>
387            </article>
388
389            <article class="plan-card" data-plan-card="team">
390              <span data-i18n="teamPlan">Team</span>
391              <div class="plan-price">
392                <strong class="plan-price-value">$20</strong>
393                <span class="plan-price-cycle" data-i18n="perUserMonth">/ user / month</span>
394              </div>
395              <ul class="plan-features">
396                <li data-i18n="featEverythingPro">Everything in Pro</li>
397                <li data-i18n="featDevices10">Up to 10 receiving devices</li>
398                <li data-i18n="featDuration120">120-minute sessions</li>
399                <li data-i18n="featTeamRoles">Roles, members &amp; invites</li>
400                <li data-i18n="featMemberQuotas">Per-member quotas &amp; policies</li>
401                <li data-i18n="featCentralBilling">Centralized billing</li>
402                <li data-i18n="featTeamUsage">Shared usage analytics</li>
403                <li data-i18n="featMinSeats">Minimum 2 seats</li>
404              </ul>
405              <a class="plan-primary" href="/pricing" data-route-link data-i18n="subscribeShort">Subscribe</a>
406            </article>
407          </div>
408
409          <!-- Link to the full /pricing page for the monthly/yearly toggle,
410               currency switch, etc. The landing page deliberately omits
411               those controls so visitors see one clean comparison and
412               only click through when they're ready to commit. -->
413          <a class="plans-see-full" href="/pricing" data-route-link data-i18n="seeFullPricing">See yearly pricing &amp; details →</a>
414        </section>
415
416        <!--
417          Landing-page footer. Carries the trust links (Privacy,
418          Pricing, Account) and a copyright line. Kept slim
419          intentionally — not a wall of marketing links. Privacy lives
420          here because it's the most common reason users scroll all
421          the way down on a privacy-forward product like ours.
422        -->
423        <footer class="site-footer">
424          <div class="site-footer-row">
425            <a class="site-footer-link" href="/privacy" data-route-link data-i18n="footerPrivacy">Privacy</a>
426            <a class="site-footer-link" href="/pricing" data-route-link data-i18n="footerPricing">Pricing</a>
427            <a class="site-footer-link" href="/account" data-route-link data-i18n="footerAccount">Account</a>
428            <a class="site-footer-link" href="/cdn-cgi/l/email-protection#ff96919990bf979e919b939e919ad19c9092" data-i18n="footerContact">Contact</a>
429          </div>
430          <p class="site-footer-copy" data-i18n="footerCopy">© 2026 Handlane · Private WebRTC file sharing</p>
431        </footer>
432      </section>
433
434      <section class="page-view pricing-view hidden" id="pricingView">
435        <header class="site-nav page-nav">
436          <a class="nav-brand" href="/" data-route-link aria-label="Handlane">
437            <span class="logo" aria-hidden="true">
438              <span class="blue"></span>
439              <span class="red"></span>
440              <span class="yellow"></span>
441              <span class="green"></span>
442            </span>
443            <span>Handlane</span>
444          </a>
445          <div class="nav-controls">
446            <label class="language-select" aria-label="Language">
447              <select class="languageSelectMirror" name="langMirror1" aria-label="Language"></select>
448            </label>
449            <a class="nav-link" href="/" data-route-link data-i18n="homeButton">Home</a>
450            <a class="nav-link" href="/account" data-route-link data-i18n="accountButton">Account</a>
451            <button class="nav-action" type="button" data-start-tool data-i18n="startButton">Get Started</button>
452          </div>
453        </header>
454        <div class="page-hero pricing-hero">
455          <p data-i18n="pricingKicker">Plans</p>
456          <h1 data-i18n="pricingTitle">Pick the plan that fits your transfers.</h1>
457        </div>
458
459        <div class="pricing-toggle" role="tablist" aria-label="Billing cycle">
460          <button class="pricing-toggle-button is-active" type="button" id="pricingToggleMonthly" role="tab" aria-selected="true" data-cycle="monthly" data-i18n="billingMonthly">Monthly</button>
461          <button class="pricing-toggle-button" type="button" id="pricingToggleYearly" role="tab" aria-selected="false" data-cycle="yearly" data-i18n="billingYearly">Yearly</button>
462          <span class="pricing-toggle-savings" data-i18n="yearlySavings">Save up to 27%</span>
463        </div>
464
465        <!-- Pricing cards. Each card lists the SAME features in the same
466             order so users can scan column-by-column. Items unavailable on
467             a plan get .strike (struck-through + dimmed) so the comparison
468             is visible at a glance. -->
469        <div class="plan-grid pricing-grid pricing-grid-4" data-pricing-grid>
470
471          <article class="plan-card" data-plan-card="free">
472            <span data-i18n="freePlan">Free</span>
473            <div class="plan-price">
474              <strong class="plan-price-value">$0</strong>
475              <span class="plan-price-cycle" data-i18n="planForever">forever</span>
476            </div>
477            <ul class="plan-features">
478              <li data-i18n="featSessions10">10 sessions / month</li>
479              <li data-i18n="featDevice1">1 receiving device per session</li>
480              <li data-i18n="featDuration10">10-minute sessions</li>
481              <li data-i18n="featNoAccount">No account required</li>
482              <li class="strike" data-i18n="featSessionsUnlimited">Unlimited sessions</li>
483              <li class="strike" data-i18n="featDevices5">Up to 5 receiving devices</li>
484              <li class="strike" data-i18n="featAdvanced">Advanced transfer features</li>
485              <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
486            </ul>
487            <button class="plan-ghost" type="button" data-start-tool data-i18n="planCtaFree">Start with Free</button>
488          </article>
489
490          <article class="plan-card" data-plan-card="plus">
491            <span data-i18n="plusPlan">Plus</span>
492            <div class="plan-price">
493              <strong class="plan-price-value" data-price-monthly="$3.99" data-price-yearly="$35">$3.99</strong>
494              <span class="plan-price-cycle" data-cycle-label data-i18n="perMonth">/ month</span>
495            </div>
496            <ul class="plan-features">
497              <li data-i18n="featSessionsUnlimited">Unlimited sessions</li>
498              <li data-i18n="featDevice1">1 receiving device per session</li>
499              <li data-i18n="featDuration30">30-minute sessions</li>
500              <li data-i18n="featGoogleSync">Google sign-in &amp; sync</li>
501              <li data-i18n="featEmailSupport">Email support</li>
502              <li class="strike" data-i18n="featDevices5">Up to 5 receiving devices</li>
503              <li class="strike" data-i18n="featAdvanced">Advanced transfer features</li>
504              <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
505            </ul>
506            <button class="plan-primary" type="button" id="pricingPlus" data-i18n="subscribeShort">Subscribe</button>
507          </article>
508
509          <article class="plan-card featured" data-plan-card="pro" data-popular-label="Most popular">
510            <span data-i18n="proPlan">Pro</span>
511            <div class="plan-price">
512              <strong class="plan-price-value" data-price-monthly="$7.99" data-price-yearly="$69">$7.99</strong>
513              <span class="plan-price-cycle" data-cycle-label data-i18n="perMonth">/ month</span>
514            </div>
515            <ul class="plan-features">
516              <li data-i18n="featEverythingPlus">Everything in Plus</li>
517              <li data-i18n="featDevices5">Up to 5 receiving devices</li>
518              <li data-i18n="featDuration90">90-minute sessions</li>
519              <li data-i18n="featAdvanced">Advanced transfer features</li>
520              <li data-i18n="featPrioritySignaling">Priority signaling</li>
521              <li data-i18n="featPrioritySupport">Priority support</li>
522              <li class="strike" data-i18n="featDevices10">Up to 10 receiving devices</li>
523              <li class="strike" data-i18n="featTeam">Team management &amp; roles</li>
524            </ul>
525            <button class="plan-primary" type="button" id="pricingPro" data-i18n="subscribeShort">Subscribe</button>
526          </article>
527
528          <article class="plan-card" data-plan-card="team">
529            <span data-i18n="teamPlan">Team</span>
530            <div class="plan-price">
531              <strong class="plan-price-value" data-price-monthly="$20" data-price-yearly="$199">$20</strong>
532              <span class="plan-price-cycle" data-cycle-label data-i18n="perUserMonth">/ user / month</span>
533            </div>
534            <ul class="plan-features">
535              <li data-i18n="featEverythingPro">Everything in Pro</li>
536              <li data-i18n="featDevices10">Up to 10 receiving devices</li>
537              <li data-i18n="featDuration120">120-minute sessions</li>
538              <li data-i18n="featTeamRoles">Roles, members &amp; invites</li>
539              <li data-i18n="featMemberQuotas">Per-member quotas &amp; policies</li>
540              <li data-i18n="featCentralBilling">Centralized billing</li>
541              <li data-i18n="featTeamUsage">Shared usage analytics</li>
542              <li data-i18n="featMinSeats">Minimum 2 seats</li>
543            </ul>
544            <button class="plan-primary" type="button" id="pricingTeam" data-i18n="subscribeShort">Subscribe</button>
545          </article>
546        </div>
547      </section>
548
549      <!-- Post-payment landing page. Shown when Lemon Squeezy redirects
550           the user back from the hosted checkout. Polls /api/account/status
551           until the subscription is visible (the webhook usually lands
552           within 2-5 seconds), then lets the user continue to /account. -->
553      <section class="page-view success-view hidden" id="successView">
554        <!--
555          role=status + aria-live=polite makes screen readers announce
556          the polling state transitions (pending → ready / network_error
557          / timeout). Without this, NVDA/VoiceOver users see only the
558          initial "Finalizing..." text and never learn when activation
559          completes. aria-atomic=true means the title+body+meta are
560          read as a single update rather than fragment-by-fragment.
561        -->
562        <div class="success-card" role="status" aria-live="polite" aria-atomic="true">
563          <div class="success-icon-wrap" aria-hidden="true">
564            <svg class="success-icon" id="successIcon" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
565              <circle cx="12" cy="12" r="9"></circle>
566              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" id="successCheckPath"></path>
567              <polyline points="22 4 12 14.01 9 11.01" class="success-check-tick"></polyline>
568            </svg>
569          </div>
570          <h1 class="success-title" id="successTitle" data-i18n="successPendingTitle">Finalizing your subscription…</h1>
571          <p class="success-body" id="successBody" data-i18n="successPendingBody">We're confirming your payment with Lemon Squeezy. This usually takes a few seconds.</p>
572          <div class="success-meta hidden" id="successMeta">
573            <span class="success-meta-row"><span data-i18n="successPlanLabel">Plan</span><strong id="successPlanValue">—</strong></span>
574            <span class="success-meta-row"><span data-i18n="successCycleLabel">Billing</span><strong id="successCycleValue">—</strong></span>
575            <span class="success-meta-row"><span data-i18n="successRenewsLabel">Renews on</span><strong id="successRenewsValue">—</strong></span>
576          </div>
577          <div class="success-actions">
578            <a href="/account" class="success-cta hidden" id="successGoAccount" data-route-link data-i18n="successGoAccount">Go to account</a>
579            <button type="button" class="success-cta-ghost hidden" id="successRetry" data-i18n="successRetryButton">Refresh</button>
580          </div>
581          <p class="success-foot hidden" id="successFoot" data-i18n="successFootHint">If activation takes longer than expected, refresh the page or contact support.</p>
582        </div>
583      </section>
584
585      <!--
586        Privacy policy page. Rendered inside the SPA so it inherits the
587        site's translation system, theme, and navigation. Reached via
588        /privacy (see _redirects + setRoute in host.js) or from the
589        landing-page footer link.
590
591        Sections are short on purpose — each one is a single concrete
592        promise so the page reads as a list of commitments, not a
593        wall of legalese. Translations live in the main `translations`
594        object (en + ar) plus the privacy-translations pack for the
595        other 30 languages.
596      -->
597      <section class="page-view privacy-view hidden" id="privacyView">
598        <header class="site-nav page-nav">
599          <a class="nav-brand" href="/" data-route-link aria-label="Handlane">
600            <span class="logo" aria-hidden="true">
601              <span class="blue"></span>
602              <span class="red"></span>
603              <span class="yellow"></span>
604              <span class="green"></span>
605            </span>
606            <span>Handlane</span>
607          </a>
608          <div class="nav-controls">
609            <label class="language-select" aria-label="Language">
610              <select class="languageSelectMirror" name="langMirror4" aria-label="Language"></select>
611            </label>
612            <a class="nav-link" href="/" data-route-link data-i18n="homeButton">Home</a>
613            <a class="nav-link" href="/pricing" data-route-link data-i18n="pricingButton">Pricing</a>
614            <a class="nav-link" href="/account" data-route-link data-i18n="accountButton">Account</a>
615            <button class="nav-action" type="button" data-start-tool data-i18n="startButton">Get Started</button>
616          </div>
617        </header>
618
619        <article class="privacy-content">
620          <header class="privacy-head">
621            <p class="privacy-kicker" data-i18n="privacyKicker">Trust</p>
622            <h1 data-i18n="privacyTitle">Privacy Policy</h1>
623            <p class="privacy-updated"><span data-i18n="privacyLastUpdatedLabel">Last updated:</span> <time datetime="2026-05-17" data-i18n="privacyLastUpdatedDate">May 17, 2026</time></p>
624            <p class="privacy-intro" data-i18n="privacyIntro">Handlane lets you share files directly between your own devices using temporary WebRTC sessions. This page explains exactly what data we handle — and what we don't.</p>
625          </header>
626
627          <div class="privacy-sections">
628            <section class="privacy-card" aria-labelledby="privacySec1Title">
629              <h2 id="privacySec1Title" data-i18n="privacySection1Title">Files never reach our servers</h2>
630              <p data-i18n="privacySection1Body">Your files travel device-to-device via WebRTC. Handlane's servers only help your devices discover each other — they never see, store, or proxy file contents.</p>
631            </section>
632
633            <section class="privacy-card" aria-labelledby="privacySec2Title">
634              <h2 id="privacySec2Title" data-i18n="privacySection2Title">What we do collect</h2>
635              <ul class="privacy-list">
636                <li data-i18n="privacySection2ItemAccount">Account: your Google email and display name when you sign in.</li>
637                <li data-i18n="privacySection2ItemSessions">Sessions: a temporary session id, device type, and duration so we can enforce the per-plan quota.</li>
638                <li data-i18n="privacySection2ItemBilling">Billing: a Lemon Squeezy customer id and subscription state when you subscribe.</li>
639                <li data-i18n="privacySection2ItemLogs">Logs: standard request logs with peppered IP hashes, retained for 30 days for abuse detection.</li>
640              </ul>
641            </section>
642
643            <section class="privacy-card" aria-labelledby="privacySec3Title">
644              <h2 id="privacySec3Title" data-i18n="privacySection3Title">What we never collect</h2>
645              <ul class="privacy-list">
646                <li data-i18n="privacySection3ItemFiles">File names, file contents, or transfer history.</li>
647                <li data-i18n="privacySection3ItemRecipients">
647Recipient identities — we don't know who you shared with.</li>
648                <li data-i18n="privacySection3ItemBrowsing">Browsing history outside Handlane.</li>
649                <li data-i18n="privacySection3ItemAds">Anything for advertising, profiling, or resale.</li>
650              </ul>
651            </section>
652
653            <section class="privacy-card" aria-labelledby="privacySec4Title">
654              <h2 id="privacySec4Title" data-i18n="privacySection4Title">End-to-end keys</h2>
655              <p data-i18n="privacySection4Body">Session encryption keys live in the URL fragment (the part after the # symbol). Browsers do not send URL fragments to servers, so only your own devices ever see them.</p>
656            </section>
657
658            <section class="privacy-card" aria-labelledby="privacySec5Title">
659              <h2 id="privacySec5Title" data-i18n="privacySection5Title">Cookies &amp; local storage</h2>
660              <ul class="privacy-list">
661                <li data-i18n="privacySection5ItemSession">A session cookie (HttpOnly, Secure, SameSite) keeps you signed in.</li>
662                <li data-i18n="privacySection5ItemLocale">Local storage remembers your language and theme preferences.</li>
663                <li data-i18n="privacySection5ItemNoTracking">No analytics, advertising, or third-party tracking cookies.</li>
664              </ul>
665            </section>
666
667            <section class="privacy-card" aria-labelledby="privacySec6Title">
668              <h2 id="privacySec6Title" data-i18n="privacySection6Title">Third-party services</h2>
669              <ul class="privacy-list">
670                <li data-i18n="privacySection6ItemGoogle">Google OAuth — sign-in only. Google receives your sign-in click.</li>
671                <li data-i18n="privacySection6ItemLemon">Lemon Squeezy — handles payments. Receives your name, email, and payment method.</li>
672                <li data-i18n="privacySection6ItemCloudflare">Cloudflare — hosts the website, signal worker, and database. Sees standard request metadata.</li>
673              </ul>
674              <p data-i18n="privacySection6Foot">Each provider receives only the minimum data their service needs to function.</p>
675            </section>
676
677            <section class="privacy-card" aria-labelledby="privacySec7Title">
678              <h2 id="privacySec7Title" data-i18n="privacySection7Title">Subscriptions &amp; payments</h2>
679              <p data-i18n="privacySection7Body">We never see your card number. Lemon Squeezy is the merchant of record — receipts, refunds, and chargebacks all flow through them. You can manage your subscription anytime from the Account page.</p>
680            </section>
681
682            <section class="privacy-card" aria-labelledby="privacySec8Title">
683              <h2 id="privacySec8Title" data-i18n="privacySection8Title">Your rights</h2>
684              <ul class="privacy-list">
685                <li data-i18n="privacySection8ItemAccess">Access: download everything we hold about you from Account → Export.</li>
686                <li data-i18n="privacySection8ItemDelete">Delete: wipe your account permanently from Account → Delete account.</li>
687                <li data-i18n="privacySection8ItemCorrect">Correct: update your name or email any time from Account settings.</li>
688              </ul>
689            </section>
690
691            <section class="privacy-card" aria-labelledby="privacySec9Title">
692              <h2 id="privacySec9Title" data-i18n="privacySection9Title">Data retention</h2>
693              <ul class="privacy-list">
694                <li data-i18n="privacySection9ItemAccount">Account data: kept until you delete your account.</li>
695                <li data-i18n="privacySection9ItemSessions">Session metadata: 90 days.</li>
696                <li data-i18n="privacySection9ItemLogs">Request logs: 30 days.</li>
697                <li data-i18n="privacySection9ItemAudit">Admin audit logs: 365 days.</li>
698              </ul>
699            </section>
700
701            <section class="privacy-card" aria-labelledby="privacySec10Title">
702              <h2 id="privacySec10Title" data-i18n="privacySection10Title">Security</h2>
703              <p data-i18n="privacySection10Body">All traffic uses HTTPS/TLS. Webhooks are verified with HMAC-SHA256. Sessions are signed with a server-side secret. We can't promise perfect security — no service can — but we apply the standard protections you'd expect.</p>
704            </section>
705
706            <section class="privacy-card" aria-labelledby="privacySec11Title">
707              <h2 id="privacySec11Title" data-i18n="privacySection11Title">Children</h2>
708              <p data-i18n="privacySection11Body">Handlane is not intended for children under 13. We do not knowingly collect personal information from anyone in that age group.</p>
709            </section>
710
711            <section class="privacy-card" aria-labelledby="privacySec12Title">
712              <h2 id="privacySec12Title" data-i18n="privacySection12Title">Changes to this policy</h2>
713              <p data-i18n="privacySection12Body">When we update this policy, the date at the top changes and signed-in users receive an email summary of what changed.</p>
714            </section>
715          </div>
716
717          <aside class="privacy-contact" aria-labelledby="privacyContactTitle">
718            <h2 id="privacyContactTitle" data-i18n="privacyContactTitle">Contact</h2>
719            <p data-i18n="privacyContactBody">For privacy or support questions, reach us at:</p>
720            <a class="privacy-contact-link" href="/cdn-cgi/l/email-protection#8de4e3ebe2cde5ece3e9e1ece3e8a3eee2e0"><span class="__cf_email__" data-cfemail="3f565159507f575e515b535e515a115c5052">[email&#160;protected]</span></a>
721          </aside>
722        </article>
723      </section>
724
725      <section class="page-view account-view hidden" id="accountView">
726        <header class="site-nav page-nav">
727          <a class="nav-brand" href="/" data-route-link aria-label="Handlane">
728            <span class="logo" aria-hidden="true">
729              <span class="blue"></span>
730              <span class="red"></span>
731              <span class="yellow"></span>
732              <span class="green"></span>
733            </span>
734            <span>Handlane</span>
735          </a>
736          <div class="nav-controls">
737            <label class="language-select" aria-label="Language">
738              <select class="languageSelectMirror" name="langMirror2" aria-label="Language"></select>
739            </label>
740            <a class="nav-link" href="/" data-route-link data-i18n="homeButton">Home</a>
741            <a class="nav-link" href="/pricing" data-route-link data-i18n="pricingButton">Pricing</a>
742            <button class="nav-action" type="button" data-start-tool data-i18n="startButton">Get Started</button>
743          </div>
744        </header>
745        <div class="account-shell">
746          <!-- Signed-out: Google sign-in card -->
747          <section class="account-card account-signed-out hidden" id="accountSignedOut">
748            <div class="account-heading">
749              <span data-i18n="accountKicker">Account</span>
750              <h1 data-i18n="accountSignInTitle">Sign in to manage your plan</h1>
751            </div>
752            <p data-i18n="accountSignInCopy">Sign in with your Google account to upgrade to Pro and sync your usage across devices.</p>
753            <div class="account-actions">
754              <a class="google-signin" id="googleSigninButton" href="#" data-i18n="googleSignIn">
755                <span class="google-mark" aria-hidden="true">
756                  <svg viewBox="0 0 48 48" width="20" height="20"><path fill="#4285F4" d="M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z"/><path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z"/><path fill="#FBBC05" d="M11.69 28.18c-.44-1.32-.69-2.73-.69-4.18s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z"/><path fill="#EA4335" d="M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z"/></svg>
757                </span>
758                <span data-i18n="googleSignInLabel">Continue with Google</span>
759              </a>
760              <button class="ghost-lite refresh-auth-status-btn" type="button" id="refreshAuthStatus">↻ Refresh sign-in status</button>
761            </div>
762          </section>
763
764          <!-- Signed-in: full profile dashboard. Two-column on desktop:
765               left column = identity hero + tabs (sticky), right column = panels. -->
766          <section class="account-signed-in account-dashboard hidden" id="accountSignedIn">
767
768            <!-- ============= Hero strip (identity + plan) ============= -->
769            <header class="profile-hero">
770              <div class="profile-hero-bg" aria-hidden="true">
771                <span></span><span></span><span></span><span></span>
772              </div>
773              <div class="profile-hero-inner">
774                <div class="profile-identity" id="accountIdentity">
775                  <div class="profile-avatar" aria-hidden="true">G</div>
776                  <div class="profile-meta">
777                    <strong>Member</strong>
778                    <span></span>
779                  </div>
780                </div>
781                <div class="profile-plan-block">
782                  <span class="profile-plan-kicker" data-i18n="accountTitle">Your current plan</span>
783                  <strong class="profile-plan-badge" id="accountPlanBadge" data-plan="free">Free</strong>
784                  <p class="profile-plan-copy" id="accountPlanCopy" data-i18n="freeAccountCopy">Free is active automatically. You have 10 sessions per month.</p>
785                  <!-- Banner that appears only when a downgrade is scheduled.
786                       Filled by renderAccount() from accountState.subscription.scheduledPlan. -->
787                  <div class="profile-scheduled-banner hidden" id="accountScheduledBanner" role="status" aria-l
787ive="polite">
788                    <div class="profile-scheduled-text">
789                      <strong data-i18n="scheduledChangeTitle">Plan change scheduled</strong>
790                      <span id="accountScheduledLine"></span>
791                    </div>
792                    <button type="button" class="profile-scheduled-cancel" id="accountScheduledCancel" data-i18n="cancelScheduledChange">Cancel scheduled change</button>
793                  </div>
794                  <!-- Red banner shown when subscription is past_due —
795                       Lemon Squeezy is retrying a failed charge. Filled
796                       by renderAccount() from accountState.subscription.paymentStatus. -->
797                  <div class="profile-payment-banner hidden" id="accountPaymentBanner" role="alert" aria-live="polite">
798                    <div class="profile-payment-text">
799                      <strong data-i18n="paymentFailedTitle">Payment failed</strong>
800                      <span data-i18n="paymentFailedBody">Your last charge didn't go through. Update your payment method to keep your subscription.</span>
801                    </div>
802                    <a href="#" target="_blank" rel="noopener" class="profile-payment-fix" id="accountPaymentFix" data-i18n="updatePaymentMethod">Update payment method</a>
803                  </div>
804                </div>
805              </div>
806            </header>
807
808            <!-- ============= Tab bar ============= -->
809            <nav class="account-tabs" role="tablist" aria-label="Account sections">
810              <button class="account-tab is-active" type="button" role="tab" data-account-tab="overview" data-i18n="accountTabOverview">
811                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>
812                <span data-i18n="accountTabOverview">Overview</span>
813              </button>
814              <button class="account-tab" type="button" role="tab" data-account-tab="usage">
815                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18M7 14l4-4 4 3 5-7"/></svg>
816                <span data-i18n="accountTabUsage">Usage</span>
817              </button>
818              <button class="account-tab hidden" type="button" role="tab" data-account-tab="team">
819                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5M14 20c0-2 2-4 4-4s3 2 3 4"/></svg>
820                <span data-i18n="accountTabTeam">Team</span>
821              </button>
822              <button class="account-tab" type="button" role="tab" data-account-tab="devices">
823                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="14" height="10" rx="1"/><rect x="16" y="9" width="5" height="11" rx="1"/></svg>
824                <span data-i18n="accountTabDevices">Devices</span>
825              </button>
826              <button class="account-tab" type="button" role="tab" data-account-tab="settings">
827                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4.9a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.5a7 7 0 0 0-2 1.2l-2.4-.9-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-.9c.6.5 1.3.9 2 1.2L10 21h4l.5-2.5c.7-.3 1.4-.7 2-1.2l2.4.9 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"/></svg>
828                <span data-i18n="accountTabSettings">Settings</span>
829              </button>
830            </nav>
831
832            <!-- ============= Panels ============= -->
833            <div class="account-panels">
834
835              <!-- =================== Overview tab =================== -->
836              <div class="account-tab-panel" data-account-panel="overview">
837
838                <!-- Pending team invitations (cards). Shown at top of
839                     Overview when the user has any. Auto-hidden otherwise. -->
840                <div class="pending-invites-stack hidden" id="pendingInvitesStack" aria-l
840ive="polite"></div>
841
842                <!-- Quick stats grid (replaces old separated stats) -->
843                <div class="profile-stats-grid" id="accountQuickStats">
844                  <div class="profile-stat" data-tone="blue">
845                    <div class="profile-stat-icon" aria-hidden="true">
846                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
847                    </div>
848                    <strong id="quickStatSessions">—</strong>
849                    <span data-i18n="accountStatsSessionsLabel">Sessions 30d</span>
850                  </div>
851                  <div class="profile-stat" data-tone="green">
852                    <div class="profile-stat-icon" aria-hidden="true">
853                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>
854                    </div>
855                    <strong id="quickStatFiles">—</strong>
856                    <span data-i18n="accountStatsFilesLabel">Files 30d</span>
857                  </div>
858                  <div class="profile-stat" data-tone="yellow">
859                    <div class="profile-stat-icon" aria-hidden="true">
860                      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
861                    </div>
862                    <strong id="quickStatBytes">—</strong>
863                    <span data-i18n="accountStatsBytesLabel">Sent 30d</span>
864                  </div>
865                </div>
866
867                <!-- Free quota gauge (only when on free) -->
868                <section class="profile-section" id="usageCard">
869                  <header class="profile-section-head">
870                    <h3 data-i18n="usageTodayLabel">Usage today</h3>
871                    <strong id="usageToday">0 / 10</strong>
872                  </header>
873                  <div class="usage-track" aria-hidden="true"><span id="usageFill"></span></div>
874                  <span id="usageReset" class="usage-reset hidden"></span>
875                </section>
876
877                <!-- Quick actions: practical buttons replace the "benefits"
878                     list which was just static info. -->
879                <section class="profile-section">
880                  <header class="profile-section-head">
881                    <h3 data-i18n="quickActionsTitle">Quick actions</h3>
882                  </header>
883                  <div class="quick-actions-grid">
884                    <button type="button" class="quick-action" data-quick-action="start-session">
885                      <span class="quick-action-icon" aria-hidden="true">
886                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 3l14 9-14 9V3z"/></svg>
887                      </span>
888                      <span class="quick-action-label" data-i18n="quickActionStart">Start a transfer</span>
889                    </button>
890                    <button type="button" class="quick-action hidden" data-quick-action="invite-member" id="quickActionInvite">
891                      <span class="quick-action-icon" aria-hidden="true">
892                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M19 8v6M22 11h-6"/></svg>
893                      </span>
894                      <span class="quick-action-label" data-i18n="quickActionInvite">Invite a member</span>
895                    </button>
896                    <button type="button" class="quick-action" data-quick-action="open-settings">
897                      <span class="quick-action-icon" aria-hidden="true">
898                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4.9a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.5a7 7 0 0 0-2 1.2l-2.4-.9-2 3.4 2 1.6c-.1.4-.1.8-.1 1.2"/></svg>
899                      </span>
900                      <span class="quick-action-label" data-i18n="quickActionSettings">Open settings</span>
901                    </button>
902                    <a class="quick-action hidden" id="accountUpgrade" href="/pricing" data-route-link data-quick-action="upgrade">
903                      <span class="quick-action-icon" aria-hidden="true">
904                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l4 8h-3v8h-2v-8H8z"/></svg>
905                      </span>
906                      <span class="quick-action-label" data-i18n="upgradeAccountButton">Upgrade plan</span>
907                    </a>
908                  </div>
909                </section>
910
911                <!-- Recent activity timeline replaces the static benefits
912                     list. Real signal — what the user actually did lately. -->
913                <section class="profile-section">
914                  <header class="profile-section-head">
915                    <h3 data-i18n="recentActivityTitle">Recent activity</h3>
916                    <div class="profile-section-actions">
917                      <button class="profile-refresh" type="button" id="activityRefresh" aria-label="Refresh">
918                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4"/></svg>
919                      </button>
920                    </div>
921                  </header>
922                  <div class="activity-timeline profile-scroll" id="activityTimeline">
923                    <p class="account-empty">…</p>
924                  </div>
925                </section>
926              </div>
927
928              <!-- =================== Usage tab =================== -->
929              <div class="account-tab-panel hidden" data-account-panel="usage">
930                <section class="profile-section">
931                  <header class="profile-section-head">
932                    <h3 data-i18n="accountSectionLast30">Last 30 days</h3>
933                    <div class="profile-section-actions">
934                      <button class="profile-refresh" type="button" id="usageRefresh" aria-label="Refresh">
935                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4"/></svg>
936                      </button>
937                    </div>
938                  </header>
939                  <div class="account-totals-grid" id="accountTotalsGrid">
940                    <div class="account-total" data-tone="blue"><strong id="totalSessions">—</strong><span data-i18n="accountStatsSessions">Sessions</span></div>
941                    <div class="account-total" data-tone="green"><strong id="totalFiles">—</strong><span data-i18n="accountStatsFiles">Files</span></div>
942                    <div class="account-total" data-tone="yellow"><strong id="totalBytes">—</strong><span data-i18n="accountStatsBytes">Transferred</span></div>
943                  </div>
944                </section>
945
946                <section class="profile-section">
947                  <header class="profile-section-head"><h3 data-i18n="accountSectionByType">By file type</h3></header>
948                  <div class="account-kind-list profile-scroll" id="accountKindList">
949                    <p class="account-empty">…</p>
950                  </div>
951                </section>
952
953                <section class="profile-section">
954                  <header class="profile-section-head"><h3 data-i18n="accountSectionDailyActivity">Daily activity</h3></header>
955                  <div class="account-daily-bars" id="accountDailyBars" role="img" aria-label="Daily file transfers"></div>
956                </section>
957
958                <section class="profile-section">
959                  <header class="profile-section-head"><h3 data-i18n="accountSectionRecentSessions">Recent sessions</h3></header>
960                  <div class="profile-filter-bar" id="sessionsFilterBar">
961                    <button type="button" class="profile-filter-chip is-active" data-se
961ssion-filter="all" data-i18n="sessionsAll">All</button>
962                    <button type="button" class="profile-filter-chip" data-session-filter="today" data-i18n="sessionsToday">Today</button>
963                    <button type="button" class="profile-filter-chip" data-session-filter="week" data-i18n="sessionsWeek">This week</button>
964                    <button type="button" class="profile-filter-chip" data-session-filter="completed" data-i18n="sessionsCompleted">Completed</button>
965                    <button type="button" class="profile-filter-chip" data-session-filter="failed" data-i18n="sessionsFailed">Failed</button>
966                  </div>
967                  <div class="account-sessions-list profile-scroll" id="accountSessionsList">
968                    <p class="account-empty">…</p>
969                  </div>
970                </section>
971              </div>
972
973              <!-- =================== Team tab =================== -->
974              <div class="account-tab-panel hidden" data-account-panel="team">
975                <div id="teamPanelBody">
976                  <p class="account-empty">…</p>
977                </div>
978              </div>
979
980              <!-- =================== Devices tab =================== -->
981              <div class="account-tab-panel hidden" data-account-panel="devices">
982                <section class="profile-section">
983                  <header class="profile-section-head">
984                    <h3 data-i18n="accountSectionDevicesTitle">Devices used in last 30 days</h3>
985                    <div class="profile-section-actions">
986                      <button class="profile-refresh" type="button" id="devicesRefresh" aria-label="Refresh">
987                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16M3 20v-4h4"/></svg>
988                      </button>
989                    </div>
990                  </header>
991                  <p class="profile-section-hint" data-i18n="accountSectionDevicesHint">Each row is a unique device fingerprint. Identifiers are hashed; we never store IPs in plain text.</p>
992                  <div class="account-devices-list profile-scroll" id="accountDevicesList">
993                    <p class="account-empty">…</p>
994                  </div>
995                </section>
996              </div>
997
998              <!-- =================== Settings tab =================== -->
999              <div class="account-tab-panel hidden" data-account-panel="settings">
1000
1001                <section class="profile-section">
1002                  <header class="profile-section-head"><h3 data-i18n="accountSectionPreferences">Preferences</h3></header>
1003
1004                  <div class="profile-pref-row">
1005                    <div class="profile-pref-label">
1006                      <strong data-i18n="accountSettingsLanguage">Language</strong>
1007                    </div>
1008                    <select class="profile-pref-control languageSelectMirror" name="langMirror3" aria-label="Language"></select>
1009                  </div>
1010
1011                  <!-- Light/Dark/Auto toggle replaces the theme swatches.
1012                       Three-state segmented control for the most common choice. -->
1013                  <div class="profile-pref-row">
1014                    <div class="profile-pref-label">
1015                      <strong data-i18n="accountSettingsAppearance">Appearance</strong>
1016                      <span data-i18n="accountSettingsAppearanceHint">Match your system, or pick light/dark.</span>
1017                    </div>
1018                    <div class="profile-segmented" role="radiogroup" aria-label="Appearance">
1019                      <button type="button" class="is-active" data-appearance="auto" role="radio" aria-checked="true">
1020                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 3v18M3 12h18"/></svg>
1021                        <span data-i18n="appearanceAuto">Auto</span>
1022                      </button>
1023                      <button type="button" data-appearance="light" role="radio" aria-checked="false">
1024                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4"/></svg>
1025                        <span data-i18n="appearanceLight">Light</span>
1026                      </button>
1027                      <button type="button" data-appearance="dark" role="radio" aria-checked="false">
1028                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
1029                        <span data-i18n="appearanceDark">Dark</span>
1030                      </button>
1031                    </div>
1032                  </div>
1033
1034                  <div class="profile-pref-row">
1035                    <div class="profile-pref-label">
1036                      <strong data-i18n="accountSettingsNotifications">Email notifications</strong>
1037                      <span data-i18n="accountSettingsNotificationsHint">Receive updates about your account and security events.</span>
1038                    </div>
1039                    <label class="profile-toggle" for="accountNotifEmail">
1040                      <input type="checkbox" id="accountNotifEmail" checked>
1041                      <span class="profile-toggle-track"><span class="profile-toggle-thumb"></span></span>
1042                    </label>
1043                  </div>
1044                </section>
1045
1046                <section class="profile-section">
1047                  <header class="profile-section-head"><h3 data-i18n="accountSectionPrivacy">Privacy</h3></header>
1048                  <p class="profile-fine-print" data-i18n="accountPrivacyCopy">Handlane transfers files peer-to-peer. We log only privacy-safe metadata (file size + kind, never names or content). See our privacy policy for full detail.</p>
1049                </section>
1050
1051                <!-- Renamed "Danger zone" → "Account management" with a
1052                     warning sub-heading on destructive rows. -->
1053                <section class="profile-section profile-section-danger">
1054                  <header class="profile-section-head">
1055                    <h3 data-i18n="accountSectionAccountManagement">Account management</h3>
1056                  </header>
1057                  <div class="profile-account-row">
1058                    <div>
1059                      <strong data-i18n="logoutButton">Sign out</strong>
1060                      <span data-i18n="signOutOfDevice">Sign out of this device.</span>
1061                    </div>
1062                    <button class="ghost-lite" id="accountLogout" type="button" data-i18n="logoutButton">Sign out</button>
1063                  </div>
1064                  <div class="profile-account-row hidden" id="accountLeaveTeamRow">
1065                    <div>
1066                      <strong data-i18n="accountDangerLeaveTeam">Leave team</strong>
1067                      <span data-i18n="leaveTeamHint">Stop being a member of this team.</span>
1068                    </div>
1069                    <button class="ghost-lite danger" id="accountLeaveTeam" type="button" data-i18n="accountDangerLeaveTeam">Leave team</button>
1070                  </div>
1071                  <div class="profile-account-row hidden" id="accountChangePlanRow">
1072                    <div>
1073                      <strong data-i18n="planChangeButton">Change plan</strong>
1074                      <span data-i18n="planChangeCopy">Switch your plan immediately.</span>
1075                    </div>
1076                    <button class="ghost-lite" id="accountChangePlan" type="button" data-i18n="planChangeButton">Change plan</button>
1077                  </div>
1078                  <div class="profile-account-row hidden" id="accountResumeRow">
1079                    <div>
1080                      <strong data-i18n="resumeSubButton">Resume subscription</strong>
1081                      <span data-i18n="cancelSubCopyEnd">Your plan benefits remain active until the period ends.</span>
1082                    </div>
1083                    <button class="ghost-lite" id="accountResume" type="button" data-i18n="resumeSubButton">Resume subscription</button>
1084                  </div>
1085                  <div class="profile-account-row hidden" id="accountCancelRow">
1086                    <div>
1087                      <strong data-i18n="accountDangerCancelSub">Cancel subscription</strong>
1088                      <span data-i18n="cancelSubHint">Your plan stays active until the end of the period.</span>
1089                    </div>
1090                    <button class="ghost-lite danger" id="accountCancel" type="button" data-i18n="cancelButton">Cancel subscription</button>
1091                  </div>
1092                  <div class="profile-account-row is-destructive">
1093                    <div>
1094                      <strong data-i18n="accountDangerDeleteAccount">Delete account</strong>
1095                      <span data-i18n="accountDangerDeleteHint">Permanently delete your account. Historical usage data is kept anonymized for billing integrity.</span>
1096                    </div>
1097                    <button class="ghost-lite danger" id="accountDelete" type="button" data-i18n="accountDangerDeleteAccount">Delete account</button>
1098                  </div>
1099                </section>
1100              </div>
1101            </div>
1102
1103            <div class="license-message hidden" id="licenseMessage"></div>
1104          </section>
1105        </div>
1106      </section>
1107
1108      <!-- =================== Per-member limits inline modal =================== -->
1109      <div class="account-modal hidden" id="memberLimitsModal" role="dialog" aria-modal="true" aria-labelledby="memberLimitsModalTitle">
1110        <div class="account-modal-card">
1111          <header class="account-modal-head">
1112            <h2 id="memberLimitsModalTitle" data-i18n="limitsModalTitle">Member limits</h2>
1113            <button class="account-modal-close" type="button" id="memberLimitsClose" aria-label="Close">×</button>
1114          </header>
1115          <div class="account-modal-body" id="memberLimitsBody"></div>
1116          <footer class="account-modal-foot">
1117            <button type="button" id="memberLimitsCancel" data-i18n="cancel">Cancel</button>
1118            <button type="button" id="memberLimitsSave" data-i18n="limitsSaveButton">Save limits</button>
1119          </footer>
1120        </div>
1121      </div>
1122
1123      <section class="tool-view hidden" id="toolView">
1124        <div class="app-shell">
1125          <header class="topbar">
1126            <div class="identity">
1127              <div class="logo" aria-hidden="true">
1128                <span class="blue"></span>
1129                <span class="red"></span>
1130                <span class="yellow"></span>
1131                <span class="green"></span>
1132              </div>
1133              <div class="brand-copy">
1134                <p class="eyebrow" data-i18n="eyebrow">مشاركة مؤقتة آمنة</p>
1135                <h1>Handlane</h1>
1136              </div>
1137            </div>
1138            <div class="top-actions">
1139              <label class="language-select" aria-label="Language">
1140                <select class="languageSelectMirror" name="langMirror4" aria-label="Language"></select>
1141              </label>
1142              <button class="home-link" type="button" data-show-home data-i18n="homeButton">الرئيسية</button>
1143              <a class="home-link" href="/account" data-route-link data-i18n="accountButton">Account</a>
1144            </div>
1145          </header>
1146
1147          <!-- ============================================================
1148               Session metrics bar: plan badge + live stats. Shows always.
1149          ============================================================= -->
1150          <div class="session-meter" id="sessionMeter">
1151            <div class="session-meter-item" data-tone="plan">
1152              <span class="session-meter-icon" aria-hidden="true">
1153                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>
1154              </span>
1155              <div>
1156                <span class="session-meter-label" data-i18n="meterPlan">Plan</span>
1157                <strong class="session-meter-value" id="meterPlan" data-plan="free">Free</strong>
1158              </div>
1159            </div>
1160            <div class="session-meter-item" data-tone="time" id="meterTimeWrap">
1161              <span class="session-meter-icon" aria-hidden="true">
1162                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
1163              </span>
1164              <div>
1165                <span class="session-meter-label" data-i18n="meterTime">Time left</span>
1166                <strong class="session-meter-value" id="meterTime">—</strong>
1167              </div>
1168            </div>
1169            <div class="session-meter-item" data-tone="devices" id="meterDevicesWrap">
1170              <span class="session-meter-icon" aria-hidden="true">
1171                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="M8 21h8M12 17v4"/><circle cx="18" cy="9" r="1.5" fill="currentColor"/></svg>
1172              </span>
1173              <div>
1174                <span class="session-meter-label" data-i18n="meterDevices">Devices</span>
1175                <strong class="session-meter-value" id="meterDevices">0 / 1</strong>
1176              </div>
1177            </div>
1178            <div class="session-meter-item" data-tone="quota" id="meterQuotaWrap">
1179              <span class="session-meter-icon" aria-hidden="true">
1180                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>
1181              </span>
1182              <div>
1183                <span class="session-meter-label" data-i18n="meterQuota">Sessions this month</span>
1184                <strong class="session-meter-value" id="meterQuota">0 / 10</strong>
1185              </div>
1186            </div>
1187            <div class="session-meter-item" data-tone="transferred" id="meterTransferredWrap">
1188              <span class="session-meter-icon" aria-hidden="true">
1189                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
1190              </span>
1191              <div>
1192                <span class="session-meter-label" data-i18n="meterTransferred">Transferred</span>
1193                <strong class="session-meter-value" id="meterTransferred">0 B</strong>
1194              </div>
1195            </div>
1196            <button class="session-meter-upgrade hidden" type="button" id="meterUpgradeButton">
1197              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
1198              <span data-i18n="upgradeButton">Upgrade</span>
1199            </button>
1200          </div>
1201
1202          <!-- Time/quota progress bar (only when relevant) -->
1203          <div class="session-progress hidden" id="sessionProgress">
1204            <div class="session-progress-track" aria-hidden="true">
1205              <span id="sessionProgressFill"></span>
1206            </div>
1207            <div class="session-progress-hint" id="sessionProgressHint"></div>
1208          </div>
1209
1210          <section class="workspace">
1211            <aside class="panel setup-panel">
1212              <div class="mode-view">
1213                <div class="setup-panel-head">
1214                  <h2 data-i18n="createTitle">أنشئ جلسة</h2>
1215                  <div class="status-pill" id="statusPill" data-i18n="offline">غير متصل</div>
1216                </div>
1217                <p data-i18n="createCopy">ابدأ جلسة من المتصفح، ثم امسح رمز QR من هاتفك للانضمام مباشرة.</p>
1218                <div class="notice hidden" id="notice"></div>
1219                <button class="primary" id="createOffer" type="button" data-i18n="createButton">بدء جلسة</button>
1220                <div class="host-device-card hidden" id="hostDeviceCard" aria-live="polite"></div>
1221
1222                <div class="device-panel hidden" id="devicePanel">
1223                  <div class="device-header">
1224                    <span data-i18n="connectedDevices">الأجهزة المتصلة</span>
1225                    <strong id="deviceCount">0</strong>
1226                  </div>
1227                  <div class="device-list" id="deviceList" aria-live="polite"></div>
1228                </div>
1229
1230                <div class="join-card hidden" id="joinCard">
1231                  <img id="qrImage" alt="">
1232                  <div class="join-info">
1233                    <span data-i18n="sessionToken">توكن الجلسة</span>
1234                    <strong id="sessionToken">—</strong>
1235                  </div>
1236                </div>
1237
1238                <div class="session-actions hidden" id="sessionActions">
1239                  <button class="secondary" id="copyJoinLink" type="button" data-i18n="copyLink">نسخ الرابط</button>
1240                  <button class="danger" id="endSession" type="button" data-i18n="endSession">إنهاء الجلسة</button>
1241                </div>
1242              </div>
1243            </aside>
1244
1245            <section class="panel transfer-panel">
1246              <!-- Legacy quota-card kept hidden so any old JS hooks that
1247                   read #quotaCount don't crash. The visible UI is the
1248                   session-meter at the top. -->
1249              <div class="quota-card hidden" id="quotaCard" aria-hidden="true">
1250                <strong id="quotaCount">0 / 10</strong>
1251                <span id="quotaFill"></span>
1252                <button type="button" id="upgradeButton">Upgrade</button>
1253              </div>
1254              <div class="dropzone" id="dropzone">
1255                <input id="fileInput" type="file" multiple>
1256                <div class="drop-icon" aria-hidden="true">
1257                  <svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
1258                    <path d="M12 4v12"></path>
1259                    <path d="M6 10l6-6 6 6"></path>
1260                    <path d="M4 18h16"></path>
1261                  </svg>
1262                </div>
1263                <div class="drop-copy">
1264                  <strong data-i18n="dropTitle">اختر ملفات أو اسحبها هنا</strong>
1265                  <span data-i18n="dropCopy">تظهر الملفات مباشرة، ويتم إرسالها إلى الأجهزة المتصلة عبر WebRTC.</span>
1266                </div>
1267              </div>
1268
1269              <div class="queue-header">
1270                <h2 data-i18n="filesTitle">الملفات</h2>
1271                <span id="fileCount">0</span>
1272                <div class="files-tools" id="filesTools">
1273                  <button type="button" id="selectAllReceivedBtn" class="files-tool" data-i18n="selectAllReceived">Select all received</button>
1274                  <button type="button" id="downloadSelectedBtn" class="files-tool files-tool-primary hidden" data-i18n="downloadSelected">Download selected</button>
1275                  <button type="button" id="clearSelectionBtn" class="files-tool hidden" data-i18n="clearSelection">Clear</button>
1276                </div>
1277              </div>
1278              <div class="file-list" id="fileList" aria-live="polite"></div>
1279            </section>
1280          </section>
1281        </div>
1282      </section>
1283
1284      <!-- ============================================================
1285           Inline test checkout. Replaces the /checkout page navigation
1286           so there is NO redirect — kills any chance of an ERR_TOO_MANY_REDIRECTS
1287           loop coming from Cloudflare/DNS configuration.
1288      ============================================================= -->
1289      <section class="checkout-modal hidden" id="checkoutModal" aria-live="polite" aria-modal="true" role="dialog">
1290        <div class="checkout-modal-panel">
1291          <button class="checkout-modal-close" id="checkoutModalClose" type="button" aria-label="Close">×</button>
1292          <span class="checkout-modal-tag" data-i18n="testModeTag">Test Mode — لن يتم خصم أي مبلغ</span>
1293          <h2 data-i18n="checkoutTitle">إتمام الاشتراك</h2>
1294          <p data-i18n="checkoutCopy">صفحة دفع وهمية للاختبار. ستصدر رخصة Pro بعد التأكيد.</p>
1295          <div class="checkout-modal-lines">
1296            <div><span data-i18n="checkoutPlanLabel">الخطة</span><strong id="checkoutModalPlan">Pro</strong></div>
1297            <div><span data-i18n="checkoutDurationLabel">المدة</span><strong>30 يوم</strong></div>
1298            <div><span data-i18n="checkoutPriceLabel">السعر (وهمي)</span><strong>$0.00</strong></div>
1299            <div><span data-i18n="checkoutOrderLabel">رقم الطلب</span><strong id="checkoutModalOrder">—</strong></div>
1300          </div>
1301          <div class="checkout-modal-actions">
1302            <button class="primary-lite" id="checkoutModalConfirm" type="button" data-i18n="checkoutConfirm">تأكيد الدفع الوهمي</button>
1303            <button class="ghost-lite" id="checkoutModalCancel" type="button" data-i18n="checkoutCancel">إلغاء</button>
1304          </div>
1305          <div class="checkout-modal-result hidden" id="checkoutModalResult"></div>
1306        </div>
1307      </section>
1308
1309      <section class="paywall hidden" id="paywall" aria-live="polite">
1310        <div class="paywall-panel">
1311          <button class="paywall-close" id="paywallClose" type="button" aria-label="Close">×</button>
1312          <span data-i18n="paywallKicker">Free limit reached</span>
1313          <h2 data-i18n="paywallTitle">Upgrade to continue transferring.</h2>
1314          <p data-i18n="paywallCopy">The free plan is intentionally limited. Connect billing later to unlock Pro from this exact surface.</p>
1315          <div class="paywall-actions">
1316            <button type="button" id="paywallUpgrade" data-i18n="paywallUpgradeButton">Upgrade to Pro</button>
1317            <button type="button" class="paywall-secondary" id="paywallLater" data-i18n="paywallLaterButton">Maybe later</button>
1318          </div>
1319        </div>
1320      </section>
1321    </main>
1322
1323    <!--
1324      Billing translations pack — 30 non-English languages × 102 billing
1325      keys. Loaded BEFORE host.js so host.js can read window.billingTranslationsPack
1326      and merge it into its translations object during initialization.
1327    -->
vendor: 113 bytes, lines 1327-1328
1327
1328    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1328<script src="/translations-billing-pack.js?v=20260522-i18n"></script>
1328
1329    
1329<script src="/translations-privacy-pack.js?v=20260522-i18n"></script>
1329
1330    
1330<script src="/translations-account-pack.js?v=20260522-i18n"></script>
1330
1331    
1331<script src="/translations-extra-pack.js?v=20260522-i18n"></script>
1331
1332    
1332<script src="/qr.js?v=20260522-i18n"></script>
1332
1333    
1333<script src="/host.js?v=20260522-i18n"></script>
1333
1334  
1334<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":"995bf3acc96f4e299b9cadb048f6d2ce","r":1,"spa":2}' crossorigin="anonymous"></script>
1334
1335</body>
1336</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.