PageSourceSearch

https://explainly-ai.netlify.app/

html explainly-ai.netlify.app collected 2026-10-03 10:42:57 UTC 31,139 bytes, 531 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" data-theme="dark" data-accent="indigo" data-hero="split" data-font="techy">
3<head>
4  <meta charset="UTF-8" />
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=4ef755cc-f491-47e9-aa70-2db5b14bb1d0
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8  <link rel="icon" href="/icons/icon-192.png" type="image/png" />
9  <meta name="viewport" content="width=device-width, initial-scale=1" />
10  <title>Explainly — Understand anything you read</title>
11  <meta name="description" content="Highlight any text on the web and get instant AI explanations in four depths: ELI5, Normal, Deep, and Why? A cognitive support layer for difficult reading." />
12  <link rel="preconnect" href="https://fonts.googleapis.com" />
13  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Bricolage+Grotesque:opsz,[email protected],500;12..96,600;12..96,700&family=Sora:wght@500;600;700&display=swap" rel="stylesheet" />
15  <link rel="stylesheet" href="/css/landing.css" />
16</head>
17<body>
18<canvas id="starfield"></canvas>
19<div class="bg-aura"></div>
20
21<!-- ============ HEADER ============ -->
22<header>
23  <div class="wrap nav">
24    <a class="brand" href="/" aria-label="Explainly home">
25      <img class="logo" src="/icons/logo-indigo.png" alt="Explainly logo" />
26      <span>Explainly</span>
27    </a>
28    <nav class="nav-links" id="navLinks">
29      <a href="#how">How it works</a>
30      <a href="#modes">Modes</a>
31      <a href="#features">Features</a>
32      <a href="#pricing">Pricing</a>
33    </nav>
34    <div class="nav-right">
35      <a class='nav-signin' href='/app/login' id='nav-signin'>Sign in</a>
36      <button class="theme-btn" id="themeToggle" aria-label="Toggle dark / light mode">
37        <svg class="ic-moon" viewBox="0 0 24 24" fill="none"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
38        <svg class="ic-sun" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9 5.3 5.3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
39      </button>
40      <a class="btn btn-primary btn-sm" href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">
41        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 8.8h8M9.1 13.5 5 20.4M14.9 13.5 19 20.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
42        Add to Chrome
43      </a>
44      <button class="menu-btn" id="menuBtn" aria-label="Menu">
45        <svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
46      </button>
47    </div>
48  </div>
49</header>
50
51<main id="top">
52
53<!-- ============ HERO ============ -->
54<section class="hero wrap">
55
56  <!-- Variant: SPLIT (default) -->
57  <div class="hero-variant" id="hv-split">
58    <div class="hero-copy">
59      <span class="pill"><span class="dot"></span>Cognitive support for difficult reading</span>
60      <h1 class="hero-h">Understand <span class="grad-text">anything</span> you read.</h1>
61      <p class="hero-sub">Highlight text on any webpage and Explainly streams a clear explanation — at the exact depth you need.</p>
62      <div class="hero-cta">
63        <a class="btn btn-primary btn-lg" href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">
64          <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 8.8h8M9.1 13.5 5 20.4M14.9 13.5 19 20.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
65          Add to Chrome — Free
66        </a>
67        <a class="btn btn-ghost btn-lg" href="#pricing">See pricing</a>
68      </div>
69      <div class="hero-meta">
70        <span><span class="stars">★★★★★</span> Loved on the Chrome Web Store</span>
71        <span>•</span>
72        <span>Free plan, no card</span>
73      </div>
74    </div>
75    <div class="hero-art">
76      <div class="orb-wrap">
77        <div class="orb-glow"></div>
78        <div class="orb-ring r1"></div>
79        <div class="orb-ring r2"></div>
80        <img class="orb-img logo" src="/icons/logo-indigo.png" alt="Explainly" />
81        <div class="orb-badge b1"><span class="k"></span>ELI5 · Normal</div>
82        <div class="orb-badge b2"><span class="k"></span>Deep · Why?</div>
83      </div>
84    </div>
85  </div>
86
87  <!-- Variant: ORB centered (mobile fallback) -->
88  <div class="hero-variant" id="hv-orb">
89    <div class="orb-wrap sm">
90      <div class="orb-glow"></div>
91      <div class="orb-ring r1"></div>
92      <div class="orb-ring r2"></div>
93      <img class="orb-img logo" src="/icons/logo-indigo.png" alt="Explainly" />
94    </div>
95    <span class="pill"><span class="dot"></span>Powered by streaming AI</span>
96    <h1 class="hero-h">Understand <span class="grad-text">anything</span> you read.</h1>
97    <p class="hero-sub">Highlight any text on the web and get an instant explanation in four depths — ELI5, Normal, Deep, and Why? Your personal reading companion, everywhere you browse.</p>
98    <div class="hero-cta">
99      <a class="btn btn-primary btn-lg" href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">Add to Chrome — Free</a>
100      <a class="btn btn-ghost btn-lg" href="#pricing">See pricing</a>
101    </div>
102    <div class="hero-meta">
103      <span><span class="stars">★★★★★</span> On the Chrome Web Store</span>
104      <span>•</span><span>Works on any webpage</span>
105    </div>
106  </div>
107
108</section>
109
110<!-- ============ HOW IT WORKS ============ -->
111<section class="sec" id="how">
112  <div class="wrap">
113    <div class="sec-head reveal">
114      <span class="eyebrow">How it works</span>
115      <h2 class="title">Three steps. Zero friction.</h2>
116      <p class="lead">No new tabs, no copy-paste. Explainly lives right inside the page you're reading.</p>
117    </div>
118    <div class="how-grid">
119      <div class="steps">
120        <article class="step reveal" data-d="1">
121          <span class="step-n">01</span>
122          <div class="step-ic">
123            <svg viewBox="0 0 24 24" fill="none"><path d="M4 5h10M4 10h7M4 15h12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><rect x="9" y="11.5" width="9" height="4" rx="1" fill="currentColor" opacity=".25"/><path d="M9 11.5h9v4H9z" stroke="currentColor" stroke-width="1.8"/></svg>
124          </div>
125          <h3>Highlight any text</h3>
126          <p>Select a word, sentence, or whole paragraph on any site — articles, docs, PDFs, research papers.</p>
127        </article>
128        <article class="step reveal" data-d="2">
129          <span class="step-n">02</span>
130          <div class="step-ic">
131            <svg viewBox="0 0 24 24" fill="none"><path d="M12 3v3M12 18v3M5 12H2M22 12h-3M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="12" r="3.4" stroke="currentColor" stroke-width="1.8"/></svg>
132          </div>
133          <h3>Pick a depth</h3>
134          <p>Tap ELI5, Normal, Deep, or Why? — switch modes anytime to go shallower or deeper.</p>
135        </article>
136        <article class="step reveal" data-d="3">
137          <span class="step-n">03</span>
138          <div class="step-ic">
139            <svg viewBox="0 0 24 24" fill="none"><path d="M3 12h4l2 6 4-12 2 6h6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
140          </div>
141          <h3>Read it stream in</h3>
142          <p>A clear explanation appears in a popup, streaming word-by-word. Save it, hear it, or move on.</p>
143        </article>
144      </div>
145
146      <div class="mock reveal" data-sim style="max-width:680px;margin-inline:auto;width:100%">
147        <div class="mock-bar">
148          <div class="mock-dots"><i></i><i></i><i></i></div>
149          <div class="mock-url">
150            <svg viewBox="0 0 24 24" width="13" fill="none" style="opacity:.6"><path d="M7 11V8a5 5 0 0 1 10 0v3M5 11h14v9H5z" stroke="currentColor" stroke-width="1.8"/></svg>
151            nature.com/articles/biology-of-aging
152          </div>
153        </div>
154        <div class="mock-body">
155          <p>Senescent cells accumulate with age and secrete a cocktail of inflammatory signals known as <span class="hl">the senescence-associated secretory phenotype</span>, which can drive tissue dysfunction in nearby healthy cells.</p>
156          <div class="exp-launch"><img src="/icons/icon16.png" alt="" /></div>
157          <div class="exp-pop" data-cycle='[{"mode":"ELI5 mode","i":0,"text":"Old, worn-out cells start shouting alarm signals. Those signals stress out the healthy cells around them — like one grumpy neighbor upsetting the whole street."},{"mode":"Normal mode","i":1,"text":"As cells get old and stop dividing, they don’t go quiet — they release inflammatory molecules that damage healthy neighbors and speed up aging in the surrounding tissue."},{"mode":"Deep mode","i":2,"text":"Senescent cells adopt the SASP: a pro-inflammatory secretome of cytokines, chemokines and proteases that remodels the tissue microenvironment and spreads senescence to bystander cells."},{"mode":"Why? mode","i":3,"text":"This phrase is hard because the jargon ‘senescence-associated secretory phenotype’ is crammed into one noun, and it assumes you know aged cells stay active and harmful instead of just dying off."}]'>
158            <div class="exp-head">
159              <img class="logo" src="/icons/logo-indigo.png" alt="" />
160              <b>Explainly</b>
161              <span class="exp-tabs"><i class="on"></i><i></i><i></i><i></i></span>
162            </div>
163            <div class="exp-mode">ELI5 mode</div>
164            <div class="exp-text" data-text="Old, worn-out cells start shouting alarm signals. Those signals stress out the healthy cells around them — like one grumpy neighbor upsetting the whole street."></div>
165          </div>
166        </div>
167      </div>
168    </div>
169  </div>
170</section>
171
172<!-- ============ MODES ============ -->
173<section class="sec" id="modes">
174  <div class="wrap">
175    <div class="sec-head center reveal">
176      <span class="eyebrow">Four explanation modes</span>
177      <h2 class="title">One highlight, <span class="grad-text">four depths</span>.</h2>
178      <p class="lead">The same sentence, explained for whoever you are right now — a curious beginner or a careful researcher. Try it live.</p>
179    </div>
180
181    <div class="modes-panel reveal">
182      <div class="modes-tabs" id="modeTabs" role="tablist" aria-label="Explanation modes">
183        <button class="mode-tab" role="tab" data-mode="eli5" aria-selected="false">
184          <span class="mt-top">
185            <span class="mt-ic">
186              <svg viewBox="0 0 24 24"><path d="M12 2v6M12 16v6M2 12h6M16 12h6M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" fill="none"/></svg>
187            </span>
188            <b>ELI5</b>
189          </span>
190          <small>Explain like I'm 5 — simple, playful analogies.</small>
191        </button>
192        <button class="mode-tab" role="tab" data-mode="normal" aria-selected="true">
193          <span class="mt-top">
194            <span class="mt-ic">
195              <svg viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-8.5 8.5 8.6 8.6 0 0 1-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 1 1 21 11.5Z" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linejoin="round"/></svg>
196            </span>
197            <b>Normal</b>
198          </span>
199          <small>Clear, everyday language for a quick grasp.</small>
200        </button>
201        <button class="mode-tab" role="tab" data-mode="deep" aria-selected="false">
202          <span class="mt-top">
203            <span class="mt-ic">
204              <svg viewBox="0 0 24 24"><path d="M12 3 2 8l10 5 10-5-10-5ZM2 13l10 5 10-5M2 17.5l10 5 10-5" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linejoin="round" stroke-linecap="round"/></svg>
205            </span>
206            <b>Deep</b>
207          </span>
208          <small>Rigorous, technical, no hand-waving.</small>
209        </button>
210        <button class="mode-tab" role="tab" data-mode="why" aria-selected="false">
211          <span class="mt-top">
212            <span class="mt-ic">
213              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7" fill="none"/><path d="M9.2 9.3a2.8 2.8 0 0 1 5.4 1c0 1.8-2.6 2.2-2.6 4M12 17.2h.01" stroke="currentColor" stroke-width="1.7" fill="none" stroke-linecap="round"/></svg>
214            </span>
215            <b>Why?</b>
216          </span>
217          <small>Why is the passage hard to understand?</small>
218        </button>
219      </div>
220
221      <div class="modes-stage">
222        <div class="modes-src">
223          <div class="lbl">You highlighted</div>
224          <p class="src-quote">"The measurement of one entangled particle <span class="sel">instantaneously influences the state of its partner</span>, regardless of the distance between them."</p>
225        </div>
226        <div class="modes-out">
227          <div class="out-head">
228            <span class="oh-ic" id="ohIc"></span>
229            <span class="oh-t"><b id="ohName">Normal</b><span id="ohTag">Clear, everyday language</span></span>
230          </div>
231          <div class="out-stream" id="outStream" aria-live="polite"></div>
232          <div class="out-foot">
233            <span class="chip">
234              <svg viewBox="0 0 24 24" width="13" fill="none"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
235              Streaming
236            </span>
237            <span class="chip">Adapts to page theme</span>
238            <button class="tts-btn" id="ttsBtn">
239              <svg viewBox="0 0 24 24" fill="none"><path d="M11 5 6 9H3v6h3l5 4V5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
239<path d="M16 9a3.5 3.5 0 0 1 0 6M18.5 6.5a7 7 0 0 1 0 11" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
240              Listen
241            </button>
242          </div>
243        </div>
244      </div>
245    </div>
246  </div>
247</section>
248
249<!-- ============ FEATURES ============ -->
250<section class="sec" id="features">
251  <div class="wrap">
252    <div class="sec-head center reveal">
253      <span class="eyebrow">Features</span>
254      <h2 class="title">Built for serious reading.</h2>
255      <p class="lead">Intellectually deep, operationally lightweight — everything you need to stay in flow.</p>
256    </div>
257    <div class="feat-grid">
258      <article class="feat reveal" data-d="1">
259        <div class="feat-ic">
260          <svg viewBox="0 0 24 24" fill="none"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>
261        </div>
262        <h3>Streaming AI</h3>
263        <p>Explanations appear word-by-word the instant you ask — no spinners, no waiting for the whole answer.</p>
264        <span class="tag">Real-time</span>
265      </article>
266      <article class="feat reveal" data-d="2">
267        <div class="feat-ic">
268          <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.7"/><path d="M12 3a9 9 0 0 0 0 18Z" fill="currentColor" opacity=".25"/><path d="M12 3v18" stroke="currentColor" stroke-width="1.7"/></svg>
269        </div>
270        <h3>Theme adaptive</h3>
271        <p>Explainly reads the page around it and matches — light, dark, or anything in between. Always legible, never jarring.</p>
272        <span class="tag">Light · Dark</span>
273      </article>
274      <article class="feat reveal" data-d="3">
275        <div class="feat-ic">
276          <svg viewBox="0 0 24 24" fill="none"><path d="M6 3h9l4 4v14H6z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M15 3v4h4M9 13l2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
277        </div>
278        <h3>Saved library</h3>
279        <p>Keep the explanations worth remembering. Build a personal library you can search and revisit anytime.</p>
280        <span class="tag">Searchable</span>
281      </article>
282      <article class="feat reveal" data-d="1">
283        <div class="feat-ic">
284          <svg viewBox="0 0 24 24" fill="none"><rect x="4" y="3" width="16" height="18" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M8 8h8M8 12h8M8 16h5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
285        </div>
286        <h3>Built-in PDF viewer</h3>
287        <p>Open PDFs right inside Explainly and highlight to explain — the same flow that works everywhere else on the web.</p>
288        <span class="tag">PDF-native</span>
289      </article>
290      <article class="feat reveal" data-d="2">
291        <div class="feat-ic">
292          <svg viewBox="0 0 24 24" fill="none"><path d="M11 5 6 9H3v6h3l5 4V5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M16 9a3.5 3.5 0 0 1 0 6M18.5 6.5a7 7 0 0 1 0 11" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
293        </div>
294        <h3>Text-to-speech</h3>
295        <p>Prefer to listen? Have any explanation read aloud in a natural voice — perfect for long sessions and resting your eyes.</p>
296        <span class="tag">Natural voice</span>
297      </article>
298      <article class="feat reveal" data-d="3">
299        <div class="feat-ic">
300          <svg viewBox="0 0 24 24" fill="none"><path d="M12 3 4 6v6c0 4.5 3.2 7.6 8 9 4.8-1.4 8-4.5 8-9V6l-8-3Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>
301        </div>
302        <h3>Private by design</h3>
303        <p>Explainly never stores what you highlight — only the explanations you choose to save. Everything is encrypted in transit, never sold, and deletable anytime.</p>
304        <span class="tag">Nothing stored by default</span>
305      </article>
306    </div>
307  </div>
308</section>
309
310<!-- ============ PRICING ============ -->
311<section class="sec" id="pricing">
312  <div class="wrap">
313    <div class="sec-head center reveal">
314      <span class="eyebrow">Pricing</span>
315      <h2 class="title">Start free. Upgrade when it clicks.</h2>
316      <p class="lead">Every plan includes the highlight-to-explain core. Pay only when you want more depth and room.</p>
317      <div style="margin-top:28px">
318        <div class="price-toggle" id="priceSeg">
319          <span class="thumb"></span>
320          <button data-period="monthly" class="on">Monthly</button>
321          <button data-period="annual">Annual</button>
322        </div>
323        <div class="save-tag">Save up to 37% with annual billing</div>
324      </div>
325    </div>
326
327    <div class="tiers">
328
329      <!-- FREE -->
330      <article class="tier reveal" data-d="1">
331        <h3>Free</h3>
332        <p class="desc">For casual reading and trying things out.</p>
333        <div class="price"><span class="cur">₹</span><span class="amt">0</span><span class="per">/forever</span></div>
334        <div class="price-sub">No card required</div>
335        <a class="btn btn-ghost" href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">Add to Chrome</a>
336        <ul>
337          <li>
338            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
339            ELI5 &amp; Normal: 15 explains/day
340          </li>
341          <li>
342            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
343            2 Deep · 1 Why? per day (sign-in)
344          </li>
345          <li>
346            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
347            5 anonymous uses before sign-in
348          </li>
349          <li>
350            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
351            Auto dark / light theme
352          </li>
353          <li>
354            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
355            Local library (50 saves)
356          </li>
357          <li class="off">
358            <svg viewBox="0 0 24 24" fill="none"><path d="M7 7l10 10M17 7 7 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
359            Cloud saves &amp; PDF viewer
360          </li>
361        </ul>
362      </article>
363
364      <!-- PRO -->
365      <article class="tier pop reveal" data-d="2">
366        <span class="tier-badge">Most popular</span>
367        <h3>Pro</h3>
368        <p class="desc">For everyday learners and curious minds.</p>
369        <div class="price"><span class="cur">₹</span><span class="amt" data-m="149" data-a="120">149</span><span class="per">/mo</span></div>
370        <div class="price-sub" data-sub-m="₹149/mo · $4.99/mo" data-sub-a="₹1,440 billed yearly">₹149/mo · $4.99/mo</div>
371        <a class='btn btn-primary' href='/app/upgrade'>Get Pro</a>
372        <ul>
373          <li>
374            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
375            All four modes (ELI5, Normal, Deep, Why?)
376          </li>
377          <li>
378            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
379            100 explains/day + 10 Deep &amp; Why?/day
380          </li>
381          <li>
382            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
383            PDF viewer included
384          </li>
385          <li>
386            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
387            Cloud saves (up to 500)
388          </li>
389          <li>
390            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
391            Text-to-speech
392          </li>
393          <li class="off">
394            <svg viewBox="0 0 24 24" fill="none"><path d="M7 7l10 10M17 7 7 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
395            Priority queue &amp; premium AI
396          </li>
397        </ul>
398      </article>
399
400      <!-- PREMIUM -->
401      <article class="tier reveal" data-d="3">
402        <h3>Premium</h3>
403        <p class="desc">For power readers, students &amp; researchers.</p>
404        <div class="price"><span class="cur">₹</span><span class="amt" data-m="399" data-a="250">399</span><span class="per">/mo</span></div>
405        <div class="price-sub" data-sub-m="₹399/mo · $11.99/mo" data-sub-a="₹2,999 billed yearly">₹399/mo · $11.99/mo</div>
406        <a class='btn btn-ghost' href='/app/upgrade'>Get Premium</a>
407        <ul>
408          <li>
409            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
410            Everything in Pro
411          </li>
412          <li>
413            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
414            500 explains/day + 75 Deep &amp; Why?/day
415          </li>
416          <li>
417            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
418            PDF viewer (large context)
419          </li>
420          <li>
421            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
422            Priority queue
423          </li>
424          <li>
425            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
426            Future premium AI models
427          </li>
428          <li>
429            <svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4L19 7" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
430            Priority support
431          </li>
432        </ul>
433      </article>
434    </div>
435
436    <!-- Comparison table -->
437    <div class="compare reveal open" id="compare">
438      <div class="cmp-toggle" id="cmpToggle">
439        <span>Compare all features</span>
440        <svg viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
441      </div>
442      <div class="cmp-wrap"><div class="cmp-inner"><div class="cmp-scroll">
443        <table class="cmp">
444          <thead>
445            <tr><th>Feature</th><th>Free</th><th class="colpop">Pro</th><th>Premium</th></tr>
446          </thead>
447          <tbody>
448            <tr><th scope="row">Price (monthly)</th><td>₹0 / $0</td><td class="colpop">₹149/mo · $4.99</td><td>₹399/mo · $11.99</td></tr>
449            <tr><th scope="row">Price (annual)</th><td>—</td><td class="colpop">₹1,440/yr · ₹120/mo</td><td>₹2,999/yr · ₹250/mo</td></tr>
450            <tr><th scope="row">ELI5 &amp; Normal/day</th><td>15</td><td class="colpop">100</td><td>500</td></tr>
451            <tr><th scope="row">Deep mode</th><td>2/day <small style="opacity:.7">(sign-in)</small></td><td class="colpop">10/day</td><td>75/day</td></tr>
452            <tr><th scope="row">Why? mode</th><td>1/day <small style="opacity:.7">(sign-in)</small></td><td class="colpop">10/day</td><td>75/day</td></tr>
453            <tr><th scope="row">PDF viewer</th><td class="no">—</td><td class="colpop yes">✓</td><td class="yes">✓ Large context</td></tr>
454            <tr><th scope="row">Cloud saves</th><td class="no">—</td><td class="colpop yes">✓ 500 saves</td><td class="yes">✓ 2,500 saves</td></tr>
455            <tr><th scope="row">Local library</th><td>50 saves</td><td class="colpop yes">✓</td><td class="yes">✓</td></tr>
456            <tr><th scope="row">Priority queue</th><td class="no">—</td><td class="colpop no">—</td><td class="yes">✓</td></tr>
457            <tr><th scope="row">Premium AI models</th><td class="no">—</td><td class="colpop no">—</td><td class="yes">✓ As released</td></tr>
458            <tr><th scope="row">Streaming AI</th><td class="yes">✓</td><td class="colpop yes">✓</td><td class="yes">✓</td></tr>
459            <tr><th scope="row">Text-to-speech</th><td class="yes">✓</td><td class="colpop yes">✓</td><td class="yes">✓</td></tr>
460            <tr><th scope="row">Theme adaptive</th><td class="yes">✓</td><td class="colpop yes">✓</td><td class="yes">✓</td></tr>
461            <tr><th scope="row">Support</th><td>Community</td><td class="colpop">Email</td><td>Priority</td></tr>
462          </tbody>
463        </table>
464      </div></div></div>
465    </div>
466
467    <p style="text-align:center;margin-top:28px;font-size:13.5px;color:var(--ink-3)">
468      Payments via <strong style="color:var(--ink-2)">Razorpay</strong> (India · UPI, cards, net banking) &amp; <strong style="color:var(--ink-2)">Paddle</strong> (International · cards, PayPal). Region auto-detected. &nbsp;·&nbsp; <a href='/pricing' style='color:var(--a-glow)'>Full pricing page →</a>
469    </p>
470  </div>
471</section>
472
473<!-- ============ CTA ============ -->
474<section class="sec" style="padding-top:0">
475  <div class="wrap">
476    <div class="cta-band reveal">
477      <span class="eyebrow" style="justify-content:center">Ready when you are</span>
478      <h2>Stop re-reading. <span class="grad-text">Start understanding.</span></h2>
479      <p>Add Explainly to Chrome and turn every difficult page into a conversation you can actually follow.</p>
480      <div class="hero-cta">
481        <a class="btn btn-primary btn-lg" href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">
482          <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="1.8"/><path d="M12 8.8h8M9.1 13.5 5 20.4M14.9 13.5 19 20.4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
483          Add to Chrome — Free
484        </a>
485        <a class="btn btn-ghost btn-lg" href="#pricing">See pricing</a>
486      </div>
487    </div>
488  </div>
489</section>
490
491</main>
492
493<!-- ============ FOOTER ============ -->
494<footer>
495  <div class="wrap">
496    <div class="foot-grid">
497      <div class="foot-brand">
498        <a class="brand" href="/"><img class="logo" src="/icons/logo-indigo.png" alt="Explainly" /><span>Explainly</span></a>
499        <p>A cognitive support layer for difficult reading. Highlight anything, understand everything.</p>
500      </div>
501      <div class="foot-col">
502        <h4>Product</h4>
503        <a href="#how">How it works</a>
504        <a href="#modes">Modes</a>
505        <a href="#features">Features</a>
506        <a href="#pricing">Pricing</a>
507      </div>
508      <div class="foot-col">
509        <h4>Legal</h4>
510        <a href='/privacy'>Privacy</a>
511        <a href='/terms'>Terms</a>
512        <a href='/refund'>Refund</a>
513        <a href='/pricing'>Full pricing</a>
514      </div>
515      <div class="foot-col">
516        <h4>Links</h4>
517        <a href="https://chromewebstore.google.com/detail/explainly/fbajmbncecpiklnaekpfpkcmieimfcpb" target="_blank" rel="noopener">Chrome Web Store ↗</a>
518        <a href='/app/login' id='foot-signin'>Sign in</a>
519        <a href='/app/library'>My Library</a>
520      </div>
521    </div>
522    <div class="foot-bottom">
523      <span class="made">© 2026 Unproton Labs · Explainly</span>
524      <span>Built with ♥ for curious minds everywhere.</span>
525    </div>
526  </div>
527</footer>
528
529<script src="/js/landing.js"></script>
529
530</body>
531</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.