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 & 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 & 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 & 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 & 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 & 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 & 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 & 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) & <strong style="color:var(--ink-2)">Paddle</strong> (International · cards, PayPal). Region auto-detected. · <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.