Online Course Sales Page HTML Template — Free Snippet
Online Course Website template · 12 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
Copy & paste
Source Code
<section class="st st-navbar-simple" data-uid="smvw6s7tin1nc">
<header class="st-wrap nb">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span><span>Design Academy</span></span>
</a>
<nav class="nb-nav" data-menu aria-label="Main">
<ul class="nb-links">
<li data-menu-item><a class="nb-link" href="#features"><span>Curriculum</span></a></li>
<li data-menu-item><a class="nb-link" href="#customers"><span>Reviews</span></a></li>
<li data-menu-item><a class="nb-link" href="#pricing"><span>Pricing</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>FAQ</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="nb-login" href="https://webdevpuneet.com/login"><span>Student login</span></a>
<a class="st-btn nb-cta" href="#pricing"><span>Enrol now</span></a>
</div>
</nav>
<button type="button" class="st-burger" data-menu-toggle aria-expanded="false" aria-label="Open menu"><span></span><span></span><span></span></button>
</header>
<i hidden data-sticky-flag></i>
</section>
<section class="st st-saas-split-hero" data-uid="smvw6s7tinutw">
<div class="sh st-wrap">
<div class="sh-copy">
<a class="st-pill sh-badge" data-anim="item" href="#pricing"><span>New cohort starts 4 November</span></a>
<h1 class="sh-title" data-anim="item" data-anim-text>Learn UI design <span class="hl">in 8 weeks</span></h1>
<p class="st-lead sh-lead" data-anim="item">A practical, project-based course that takes you from first sketch to a portfolio-ready app design, with feedback from working designers.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#pricing"><span>Enrol now</span></a>
<a class="st-btn st-btn--ghost" href="#features"><span>Watch a free lesson</span></a>
</div>
<p class="sh-proof" data-anim="item">★★★★★ 4.9 from 3,200+ students</p>
</div>
<div class="sh-media" data-anim="media">
<div class="sh-frame"><img width="1200" height="820" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="Course lesson player with a list of lessons"></div>
</div>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvw6s7tibwri">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">What you’ll learn</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Skills you’ll <span class="hl">actually use</span></h2>
<p class="st-lead" data-anim="item">Every module ends with a real project for your portfolio.</p>
</header>
<div class="fg-grid">
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg></span>
<h3 class="fg-title">Visual design</h3>
<p class="fg-text">Colour, type, spacing and hierarchy that look professional.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="9" x="14" y="12" rx="1" /><rect width="7" height="5" x="3" y="16" rx="1" /></svg></span>
<h3 class="fg-title">UI patterns</h3>
<p class="fg-text">Navigation, forms, cards and dashboards that work.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" /><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" /><path d="m2.3 2.3 7.286 7.286" /><circle cx="11" cy="11" r="2" /></svg></span>
<h3 class="fg-title">Figma mastery</h3>
<p class="fg-text">Components, auto layout and variants like a pro.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span>
<h3 class="fg-title">User research</h3>
<p class="fg-text">Interviews and tests that shape better decisions.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" /></svg></span>
<h3 class="fg-title">Responsive design</h3>
<p class="fg-text">Designs that work from phone to desktop.</p>
</article>
<article class="fg-card" data-anim="item">
<span class="st-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /><rect width="20" height="14" x="2" y="6" rx="2" /></svg></span>
<h3 class="fg-title">Portfolio & job prep</h3>
<p class="fg-text">Case studies and interview practice to get hired.</p>
</article>
</div>
</div>
</section>
<section id="gallery" class="st st-video-section" data-uid="smvw6s7tiwo6a">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Course preview</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Watch <span class="hl">the first lesson</span></h2>
<p class="st-lead" data-anim="item">Sit in on lesson one: how a good interface starts as a sketch, and what you will build in week one.</p>
</header>
<div class="vs-box" data-anim="media" data-video-box data-title="Design Academy preview lesson: from sketch to interface">
<img class="vs-poster" width="1280" height="720" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="A course lesson on screen with a list of modules">
<a class="vs-play" target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=aqz-KE-bpKQ" data-video="https://www.youtube.com/watch?v=aqz-KE-bpKQ" aria-label="Play the preview lesson">
<span class="vs-btn" aria-hidden="true"><svg viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z"/></svg></span>
<span class="vs-meta"><span class="vs-label">Play the preview lesson</span><span class="vs-dur">6:40</span></span>
</a>
</div>
<ul class="vs-points">
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">Learn by building</h3>
<p class="vs-point-text">Every module ends with a real project for your portfolio.</p>
</li>
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">Feedback from a pro</h3>
<p class="vs-point-text">Submit work every week and get notes from your tutor.</p>
</li>
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">Learn at your pace</h3>
<p class="vs-point-text">Lessons are short, with lifetime access to replay them.</p>
</li>
</ul>
</div>
</section>
<section id="features-2" class="st st-features-alternating" data-uid="smvw6s7tjakwm">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Curriculum</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Eight weeks, <span class="hl">step by step</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<div class="fa-rows">
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Weeks 1–2</span>
<h3 class="fa-title">Foundations of <span class="hl">visual design</span></h3>
<p class="fa-text">Learn the principles that make interfaces feel clear and calm.</p>
<ul class="fa-bullets"><li>12 video lessons</li><li>2 design exercises</li><li>Weekly live Q&A</li></ul>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="Lesson player"></div>
</div>
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Weeks 3–5</span>
<h3 class="fa-title">Design a <span class="hl">real app</span></h3>
<p class="fa-text">Plan, wireframe and design a complete mobile app with feedback at every step.</p>
<ul class="fa-bullets"><li>Project brief</li><li>Mentor reviews</li><li>Component library</li></ul>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-collab.png" alt="Project board"></div>
</div>
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Weeks 6–8</span>
<h3 class="fa-title">Portfolio and <span class="hl">job ready</span></h3>
<p class="fa-text">Turn your project into a case study and prepare for interviews.</p>
<ul class="fa-bullets"><li>Case study template</li><li>Portfolio review</li><li>Mock interviews</li></ul>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-analytics.png" alt="Progress dashboard"></div>
</div>
</div>
</div>
</section>
<section id="timeline" class="st st-timeline-horizontal" data-uid="smvw6s7tjc7eb">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">The syllabus</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Your 8-week <span class="hl">learning path</span></h2>
<p class="st-lead" data-anim="item">Keep scrolling to follow the course from your first layout to a finished portfolio project.</p>
</header>
<div class="tlh" data-tlh data-layout="alternate" data-marker="icon" data-width="contained" data-start="1" data-mode="pin">
<button type="button" class="tlh-nav tlh-prev" data-tlh-prev disabled aria-label="Show earlier events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<div class="tlh-track" data-tlh-track role="region" tabindex="0" aria-label="Company timeline">
<ol class="tlh-list">
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Week 1</p>
<h3 class="tlh-title">Visual design basics</h3>
<p class="tlh-text">Colour, type, spacing and hierarchy, practised on real screens from day one.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Visual design basics"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Week 2</p>
<h3 class="tlh-title">Figma mastery</h3>
<p class="tlh-text">Components, auto layout and variants, so your files stay tidy and fast.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Figma mastery"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" /><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" /><path d="m2.3 2.3 7.286 7.286" /><circle cx="11" cy="11" r="2" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Weeks 3 and 4</p>
<h3 class="tlh-title">UI patterns</h3>
<p class="tlh-text">Navigation, forms, cards and dashboards that work for real users.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="UI patterns"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="7" height="9" x="3" y="3" rx="1" /><rect width="7" height="5" x="14" y="3" rx="1" /><rect width="7" height="9" x="14" y="12" rx="1" /><rect width="7" height="5" x="3" y="16" rx="1" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Week 5</p>
<h3 class="tlh-title">Responsive design</h3>
<p class="tlh-text">Designs that hold up from the smallest phone to a wide desktop.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Responsive design"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2" /><path d="M12 18h.01" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Week 6</p>
<h3 class="tlh-title">User research</h3>
<p class="tlh-text">Interviews and quick tests that turn opinions into decisions.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="User research"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg></span></button>
</li>
<li class="tlh-item" data-anim="item">
<div class="tlh-card">
<p class="tlh-date">Weeks 7 and 8</p>
<h3 class="tlh-title">Portfolio and job prep</h3>
<p class="tlh-text">Finish a case study, polish your portfolio and practise the interview.</p>
</div>
<button type="button" class="tlh-dot" data-tlh-dot aria-label="Portfolio and job prep"><span class="tlh-num" aria-hidden="true"></span><span class="tlh-ico st-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" /><rect width="20" height="14" x="2" y="6" rx="2" /></svg></span></button>
</li>
</ol>
</div>
<button type="button" class="tlh-nav tlh-next" data-tlh-next aria-label="Show later events"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
</div>
</section>
<section id="customers" class="st st-testimonial-spotlight" data-uid="smvw6s7tjxlk8">
<div class="st-wrap">
<figure class="ts-card">
<span class="ts-mark" aria-hidden="true">“</span>
<p class="ts-company" data-anim="item">COHORT 12</p>
<blockquote class="ts-quote" data-anim="item" data-anim-text><p>Three months after the course I landed my first design job. The feedback from mentors <span class="hl">changed how I work</span>.</p></blockquote>
<figcaption class="ts-person" data-anim="item">
<img class="ts-photo" width="160" height="160" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div><p class="ts-name">Priya Raman</p><p class="ts-role">Product Designer, Orbit</p></div>
</figcaption>
<dl class="ts-stats">
<div class="ts-stat" data-anim="item"><dt class="ts-label">students</dt><dd class="ts-value">3,200+</dd></div>
<div class="ts-stat" data-anim="item"><dt class="ts-label">changed careers</dt><dd class="ts-value">74%</dd></div>
<div class="ts-stat" data-anim="item"><dt class="ts-label">average rating</dt><dd class="ts-value">4.9/5</dd></div>
</dl>
<a class="ts-link" data-anim="item" href="https://webdevpuneet.com/customers/northwind"><span>Read the full case study</span> <span aria-hidden="true">→</span></a>
</figure>
</div>
</section>
<section id="pricing" class="st st-pricing-single-plan" data-uid="smvw6s7tj69s8">
<div class="st-wrap ps">
<div class="ps-copy">
<header class="st-head st-head--left ps-head">
<p class="st-eyebrow" data-anim="item">Enrol</p>
<h2 class="st-h2" data-anim="item" data-anim-text>One price, <span class="hl">everything included</span></h2>
<p class="st-lead" data-anim="item">Lifetime access to all lessons, projects and community.</p>
</header>
<div class="ps-included" data-anim="item">
<h3 class="ps-inc-title">Everything included</h3>
<ul class="st-checks ps-list"><li>48 video lessons</li><li>6 portfolio projects</li><li>Mentor feedback</li><li>Weekly live Q&A</li><li>Private community</li><li>Certificate</li><li>Lifetime updates</li><li>Career guidance</li></ul>
</div>
</div>
<div class="ps-card" data-anim="media">
<h3 class="ps-plan">UI Design Course</h3>
<p class="ps-plan-note">Next cohort: 4 November</p>
<div class="st-billing" data-anim="item" role="group" aria-label="Billing period">
<button type="button" class="st-bill-btn" data-billing="monthly" aria-pressed="true"><span class="st-bill-pill" aria-hidden="true"></span><span>Monthly</span></button>
<button type="button" class="st-bill-btn" data-billing="yearly" aria-pressed="false"><span>Yearly</span><span class="st-save">Save 20%</span></button>
</div>
<p class="ps-price">
<span class="st-pm"><b class="ps-amt">$497</b><span class="ps-per">one-time</span></span>
<span class="st-py"><b class="ps-amt">$397</b><span class="ps-per">early-bird price</span></span>
</p>
<a class="st-btn" href="https://webdevpuneet.com/checkout"><span>Enrol now</span></a>
<p class="ps-guarantee"><span class="ps-shield" aria-hidden="true"></span><span>30-day money-back guarantee</span></p>
</div>
</div>
</section>
<section id="faq" class="st st-faq-accordion" data-uid="smvw6s7tjrgcr">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">FAQ</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Questions about <span class="hl">the course</span></h2>
<p class="st-lead" data-anim="item">Everything you need to know about plans, billing and getting started.</p>
</header>
<div class="fq-list" data-accordion="single first">
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do I need any experience?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>No. The course starts from the basics; all you need is a computer and the free version of Figma.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How much time does it take?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Around 6–8 hours a week for eight weeks. Lessons are recorded, so you can learn at your own pace.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>What if it’s not for me?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>You’re covered by a 30-day money-back guarantee, no questions asked.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do I get a certificate?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes, a certificate of completion you can add to LinkedIn.</p></div>
</details>
</div>
<p class="fq-contact" data-anim="item"><span>Still have a question?</span> <a href="mailto:[email protected]"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
</div>
</section>
<section class="st st-popup-modal" data-uid="smvw6s7tjysrr">
<div class="pu" data-pu data-trigger="scroll" data-delay="8" data-scroll="50" data-days="7" data-pos="bottom-right" data-layout="left" data-autoplay="0" data-pu-id="1kxmbuq">
<div class="pu-backdrop" data-pu-close hidden></div>
<div class="pu-dialog" role="dialog" aria-modal="true" aria-labelledby="pu-heading" tabindex="-1" hidden>
<button type="button" class="pu-x" data-pu-close aria-label="Close popup"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
<div class="pu-media">
<img class="pu-img" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-course.png" alt="A Design Academy lesson on screen">
</div>
<div class="pu-body">
<p class="st-eyebrow">Free lesson</p>
<h2 class="pu-h" id="pu-heading">Try the first <span class="hl">lesson free</span></h2>
<p class="pu-lead">Watch lesson one and see how we teach. No payment, no card.</p>
<div class="pu-ctas">
<a class="st-btn pu-cta" href="#pricing"><span>Watch the free lesson</span></a>
<a class="st-btn st-btn--ghost pu-cta" href="#features"><span>See the syllabus</span></a>
</div>
<button type="button" class="pu-no" data-pu-close><span>No thanks</span></button>
</div>
</div>
</div>
</section>
<section class="st st-footer-minimal" data-uid="smvw6s7tjjqx5">
<footer class="st-wrap fm">
<div class="fm-row" data-anim="item">
<a class="st-brand" href="#">
<span class="st-brand-mark"><span class="st-brand-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z" /><path d="M22 10v6" /><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" /></svg></span><span>Design Academy</span></span>
</a>
<nav aria-label="Footer"><ul class="fm-links"><li><a href="#features">Features</a></li><li><a href="#pricing">Pricing</a></li><li><a href="#faq">FAQ</a></li><li><a href="/contact/">Contact</a></li><li><a href="/privacy/">Privacy</a></li></ul></nav>
<div><ul class="st-socials">
<li><a class="st-social" href="https://x.com/" aria-label="X (Twitter)"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" /></svg></span></a></li>
<li><a class="st-social" href="https://www.linkedin.com/" aria-label="LinkedIn"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" /><rect width="4" height="12" x="2" y="9" /><circle cx="4" cy="4" r="2" /></svg></span></a></li>
<li><a class="st-social" href="https://github.com/" aria-label="GitHub"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg></span></a></li>
</ul></div>
</div>
<p class="fm-copy">© 2026 Design Academy</p>
</footer>
</section>
<section class="st st-back-to-top" data-uid="smvw6s7tjf5gt">
<div class="btt" data-btt data-enabled="on" data-distance="500" data-pos="right" data-appear="fade" data-speed="0.8" data-mobile="on" data-shadow="on" style="--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:0.8s">
<div class="btt-demo" aria-hidden="true">
<span class="btt-bar btt-bar--lg"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--md"></span><span class="btt-bar"></span><span class="btt-bar btt-bar--sm"></span>
<span class="btt-note">The button appears here once the page has scrolled</span>
</div><!--/btt-demo-->
<button type="button" class="btt-btn" aria-label="Back to top" title="Back to top"><svg class="btt-svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2.400" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#fffcf8}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#f97316;--st-btn-text:#ffffff;--st-bg:#fffcf8;--st-surface:#fff1e6;--st-text:#1c1917;--st-muted:#57534e;--st-radius:14;--st-max:1200;--st-font-heading:"Plus Jakarta Sans", sans-serif;--st-font-body:"DM Sans", sans-serif}
.st{--st-pad:clamp(20px,5cqi,56px);container:st/inline-size;position:relative;overflow:hidden;background:var(--st-bg);color:var(--st-text);font-family:var(--st-font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.st) *,:where(.st) *::before,:where(.st) *::after{box-sizing:border-box;margin:0;padding:0}
:where(.st img){display:block;max-width:100%;height:auto}
:where(.st a){color:inherit}
:where(.st h1,.st h2,.st h3){font-family:var(--st-font-heading);line-height:1.08;letter-spacing:-.025em;font-weight:800;color:var(--st-text)}
.st .hl{color:var(--st-brand)}
.st [data-edit]:empty,.st [data-i-edit]:empty{display:none}
.st-wrap{width:100%;max-width:calc(var(--st-max) * 1px);margin:0 auto;padding-left:var(--st-pad);padding-right:var(--st-pad)}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-brand)}
.st-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand);font-size:13.5px;font-weight:700}
.st-btns{display:flex;flex-wrap:wrap;gap:12px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:calc(var(--st-radius) * 1px);border:2px solid var(--st-brand);background:var(--st-brand);color:var(--st-btn-text);font:700 16px/1 var(--st-font-body);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.st-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px color-mix(in srgb,var(--st-brand) 35%,transparent)}
.st-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:3px}
.st-btn--ghost{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.st-btn--ghost:hover{box-shadow:none;border-color:var(--st-text)}
.st-lead{font-size:clamp(17px,1.2cqi + 12px,20px);line-height:1.65;color:var(--st-muted)}
.st-head{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:46em;margin:0 auto clamp(36px,5cqi,64px);text-align:center}
.st-head--left{align-items:flex-start;margin-left:0;text-align:left}
.st-h2{font-size:clamp(30px,2.6cqi + 16px,48px)}
.st-icon{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:calc(var(--st-radius) * .85px);background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.st-icon svg{width:24px;height:24px}
.st-icon:empty{display:none}
.st-checks{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-checks li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5}
.st-checks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 15%,transparent)}
.st-checks li::after{content:"";position:absolute;left:5px;top:calc(.12em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.st *{transition:none!important;animation:none!important}}
/* Simple Sticky Navbar */
.st-navbar-simple{overflow:visible;background:color-mix(in srgb,var(--st-bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st:has([data-sticky-flag]){position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
.st.is-scrolled{box-shadow:0 10px 30px -18px rgba(15,23,42,.35)}
.st-burger{display:none;position:relative;flex:none;width:44px;height:44px;border:0;border-radius:calc(var(--st-radius) * .7px);background:color-mix(in srgb,var(--st-text) 7%,transparent);color:var(--st-text);cursor:pointer}
.st-burger span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.st-burger span:nth-child(1){top:15px}.st-burger span:nth-child(2){top:21px}.st-burger span:nth-child(3){top:27px}
.st-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.st-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.st-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.st-burger:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.nb{position:relative;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-height:72px}
.nb-nav{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto}
.nb-link{display:block;padding:8px 14px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);font-weight:600;font-size:15.5px;text-decoration:none;transition:color .2s ease,background .2s ease}
.nb-link:hover{color:var(--st-text);background:color-mix(in srgb,var(--st-text) 6%,transparent)}
.nb-link[aria-current="page"]{color:var(--st-brand);background:color-mix(in srgb,var(--st-brand) 11%,transparent)}
.nb-actions{display:flex;align-items:center;gap:18px}
.nb-login{color:var(--st-text);font-weight:600;font-size:15.5px;text-decoration:none}
.nb-login:hover{color:var(--st-brand)}
.nb .nb-cta{min-height:44px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.nb .st-burger{display:inline-block;margin-left:auto}
.nb-nav{position:absolute;left:var(--st-pad);right:var(--st-pad);top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);box-shadow:0 24px 60px -24px rgba(15,23,42,.35)}
.nb-links{flex-direction:column;align-items:stretch;gap:2px;margin:0}
.nb-link{padding:12px 14px;font-size:16.5px;color:var(--st-text)}
.nb-actions{flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.nb-login{padding:8px 10px}
.nb .nb-cta{width:100%;min-height:48px}
.has-menu:not(.menu-open) .nb-nav{display:none}
.st:not(.has-menu) .nb{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.st:not(.has-menu) .nb-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
}
/* SaaS Split Hero */
.st-saas-split-hero{padding:clamp(56px,8cqi,112px) 0}
.sh{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(32px,5cqi,72px)}
.sh-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.sh-badge{text-decoration:none}
.sh-title{font-size:clamp(38px,4.6cqi + 12px,64px)}
.sh-lead{max-width:34em}
.sh-proof{font-size:14.5px;color:var(--st-muted)}
.sh-media{position:relative}
.sh-media::before{content:"";position:absolute;inset:8% -6% -8% 8%;background:radial-gradient(closest-side,color-mix(in srgb,var(--st-brand) 35%,transparent),transparent);filter:blur(30px)}
.sh-frame{position:relative;padding:10px;border-radius:calc(var(--st-radius) * 1.6px);background:color-mix(in srgb,var(--st-surface) 80%,var(--st-bg));border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);box-shadow:0 30px 80px -30px color-mix(in srgb,var(--st-text) 35%,transparent)}
.sh-frame img{width:100%;border-radius:calc(var(--st-radius) * 1px)}
@container st (max-width:820px){.sh{grid-template-columns:1fr}.sh-copy{align-items:center;text-align:center}.sh-copy .st-btns{justify-content:center}}
/* Icon Grid Features */
.st-features-icon-grid{padding:clamp(64px,8cqi,112px) 0}
.fg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2cqi,24px)}
.fg-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4cqi,30px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);transition:transform .2s ease,box-shadow .2s ease}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.fg-card .st-icon{margin-bottom:6px}
.fg-title{font-size:19px;letter-spacing:-.01em}
.fg-text{color:var(--st-muted);font-size:16px}
.fg-link{margin-top:auto;padding-top:4px;color:var(--st-brand);font-weight:700;font-size:15px;text-decoration:none}
.fg-link:hover{text-decoration:underline}
@container st (max-width:960px){.fg-grid{grid-template-columns:repeat(2,1fr)}}
@container st (max-width:600px){.fg-grid{grid-template-columns:1fr}}
/* Video Section with Poster */
.st-video-section{padding:clamp(56px,7cqi,104px) 0}
.vs-box{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:calc(var(--st-radius) * 1.3px);background:#0b1020;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--st-text) 55%,transparent)}
.vs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.vs-box:hover .vs-poster{transform:scale(1.03)}
.vs-play{position:absolute;inset:0;display:flex;align-items:flex-end;gap:16px;padding:clamp(16px,3cqi,32px);color:#fff;text-decoration:none;background:linear-gradient(to top,rgba(8,10,20,.65),rgba(8,10,20,.05) 55%);cursor:pointer}
.vs-btn{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:clamp(64px,9cqi,92px);height:clamp(64px,9cqi,92px);margin:calc(clamp(64px,9cqi,92px) / -2) 0 0 calc(clamp(64px,9cqi,92px) / -2);border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 0 0 0 color-mix(in srgb,var(--st-brand) 55%,transparent);transition:transform .25s ease}
.vs-btn svg{margin-left:4px}
.vs-play:hover .vs-btn{transform:scale(1.08)}
.vs-play:focus-visible{outline:4px solid var(--st-brand);outline-offset:-4px}
.vs-meta{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.vs-dur{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.2);font-size:13px;font-variant-numeric:tabular-nums}
.vs-dur:empty{display:none}
.vs-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vs-box.is-playing .vs-poster,.vs-box.is-playing .vs-play{display:none}
.vs-points{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.6cqi,36px);margin-top:clamp(28px,3.4cqi,48px)}
.vs-point{padding-top:18px;border-top:2px solid color-mix(in srgb,var(--st-brand) 70%,transparent)}
.vs-point-title{margin-bottom:6px;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.vs-point-text{color:var(--st-muted);font-size:15.5px}
@media (prefers-reduced-motion:no-preference){.vs-btn{animation:vs-pulse 2.6s ease-out infinite}}
@keyframes vs-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-brand) 55%,transparent)}70%,100%{box-shadow:0 0 0 22px transparent}}
@container st (max-width:560px){.vs-meta{font-size:13.5px}}
/* Alternating Feature Rows */
.st-features-alternating{padding:clamp(64px,8cqi,112px) 0}
.fa-rows{display:flex;flex-direction:column;gap:clamp(56px,8cqi,112px)}
.fa-row{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(32px,5cqi,80px)}
.fa-row:nth-child(even) .fa-media{order:-1}
.fa-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.fa-title{font-size:clamp(26px,1.8cqi + 14px,36px)}
.fa-text{color:var(--st-muted)}
.fa-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px}
.fa-bullets li{position:relative;padding-left:32px;font-weight:500}
.fa-bullets li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 14%,transparent)}
.fa-bullets li::after{content:"";position:absolute;left:5px;top:calc(.2em + 5px);width:10px;height:10px;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.fa-link{color:var(--st-brand);font-weight:700;text-decoration:none}
.fa-link:hover{text-decoration:underline}
.fa-media{padding:clamp(14px,2cqi,28px);border-radius:calc(var(--st-radius) * 1.5px);background:var(--st-surface)}
.fa-media img{width:100%;border-radius:calc(var(--st-radius) * .9px);box-shadow:0 24px 60px -30px color-mix(in srgb,var(--st-text) 45%,transparent)}
@container st (max-width:860px){.fa-row{grid-template-columns:1fr}.fa-row .fa-media,.fa-row:nth-child(even) .fa-media{order:-1}}
/* Horizontal Timeline */
.st-timeline-horizontal{padding:clamp(64px,8cqi,112px) 0}
.tlh{position:relative;display:flex;align-items:center;gap:8px}
.tlh-track{flex:1;min-width:0;padding-block:14px 46px;margin-block:-14px -46px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;outline:none;border-radius:calc(var(--st-radius) * 1px)}
.tlh-track::-webkit-scrollbar{display:none}
.tlh-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tlh-track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-list{--tl-card-h:158px;--tl-item-w:240px;position:relative;display:flex;width:max-content;min-width:100%;margin:0;padding:0 28px;list-style:none;counter-reset:tl}
.tlh-list::before{content:"";position:absolute;left:0;right:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;background:color-mix(in srgb,var(--st-text) 14%,transparent)}
.tlh-list::after{content:"";position:absolute;left:0;top:calc(var(--tl-card-h) + 22px);height:4px;margin-top:-2px;border-radius:2px;width:var(--tl-fill,0px);background:linear-gradient(90deg,color-mix(in srgb,var(--st-brand) 55%,transparent),var(--st-brand));transition:width .7s cubic-bezier(.4,0,.2,1)}
.tlh-item{counter-increment:tl;position:relative;display:flex;flex:1 0 var(--tl-item-w);flex-direction:column;align-items:center;justify-content:flex-start;min-width:var(--tl-item-w);height:calc(var(--tl-card-h) * 2 + 44px);scroll-snap-align:center}
.tlh-dot{position:absolute;top:calc(var(--tl-card-h) + 22px);left:50%;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:3px solid var(--st-bg);border-radius:50%;background:var(--st-surface);color:var(--st-brand);font:800 15px/1 var(--st-font-heading);box-shadow:0 0 0 2px color-mix(in srgb,var(--st-brand) 45%,transparent);cursor:pointer;transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.tlh-dot:hover{transform:scale(1.1)}
.tlh-dot:focus-visible{outline:3px solid var(--st-brand);outline-offset:3px}
.tlh-num::before{content:counter(tl)}
.tlh-ico{display:none;width:20px;height:20px}
.tlh-dot .tlh-ico{background:none;border-radius:0;color:inherit}
.tlh-ico svg{width:20px;height:20px}
.tlh[data-marker=icon] .tlh-num{display:none}
.tlh[data-marker=icon] .tlh-ico{display:inline-grid}
.tlh-item.is-active .tlh-dot{background:var(--st-brand);color:var(--st-btn-text);transform:scale(1.18);box-shadow:0 0 0 5px color-mix(in srgb,var(--st-brand) 24%,transparent)}
.tlh-card{box-sizing:border-box;position:absolute;left:8px;right:8px;bottom:0;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;height:var(--tl-card-h);padding:14px 16px;border-radius:calc(var(--st-radius) * .8px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.tlh-card::after{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;margin-left:-6px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-bottom:0;border-right:0;transform:rotate(45deg);transition:border-color .4s ease}
@container st (min-width:641px){
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card,.tlh[data-layout=above] .tlh-card{top:0;bottom:auto}
.tlh[data-layout=alternate] .tlh-item:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-card::after{top:auto;bottom:-7px;border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);border-top:0;border-left:0}
.tlh[data-layout=alternate] .tlh-item.is-active:nth-child(odd) .tlh-card::after,.tlh[data-layout=above] .tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
}
.tlh-item.is-active .tlh-card::after{border-color:color-mix(in srgb,var(--st-brand) 50%,transparent)}
.tlh-item.is-active .tlh-card{transform:translateY(0);border-color:color-mix(in srgb,var(--st-brand) 50%,transparent);box-shadow:0 18px 40px -18px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.tlh-date{color:var(--st-brand);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.tlh-title{font-size:17px;letter-spacing:-.01em}
.tlh-text{color:var(--st-muted);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.tlh-text:empty{display:none}
.tlh-nav{flex:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid color-mix(in srgb,var(--st-text) 14%,transparent);border-radius:50%;background:var(--st-bg);color:var(--st-text);cursor:pointer;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--st-text) 40%,transparent);transition:background .2s ease,color .2s ease,opacity .2s ease}
.tlh-nav:hover:not(:disabled){background:var(--st-brand);color:var(--st-btn-text);border-color:var(--st-brand)}
.tlh-nav:focus-visible{outline:3px solid var(--st-brand);outline-offset:2px}
.tlh-nav:disabled{opacity:.35;cursor:default}
.is-tl-pinned .tlh-track{overflow:hidden;cursor:default}
.is-tl-pinned .tlh-nav{display:none}
.is-tl-pinned .tlh-list{will-change:transform}
.is-tl-pinned .tlh-list::after{transition:none}
.tlh.is-fit .tlh-nav{display:none}
.tlh[data-width=full]{width:100cqi;margin-inline:calc(50% - 50cqi);gap:0}
.tlh[data-width=full] .tlh-track{border-radius:0}
.tlh[data-width=full] .tlh-list{padding-inline:max(28px,var(--st-pad))}
.tlh[data-width=full] .tlh-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
.tlh[data-width=full] .tlh-prev{left:12px}
.tlh[data-width=full] .tlh-next{right:12px}
@container st (max-width:640px){
.tlh[data-width=full] .tlh-nav{top:22px}
.tlh-list{--tl-item-w:230px;--tl-card-h:172px}
.tlh-list::before,.tlh-list::after{top:22px}
.tlh-item{height:calc(var(--tl-card-h) + 44px)}
.tlh-dot{top:22px}
.tlh-nav{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.tlh-list::after,.tlh-dot,.tlh-card{transition:none}}
/* Testimonial Spotlight */
.st-testimonial-spotlight{padding:clamp(64px,8cqi,112px) 0}
.ts-card{position:relative;max-width:980px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px;padding:clamp(36px,6cqi,72px) clamp(22px,6cqi,80px);text-align:center;border-radius:calc(var(--st-radius) * 1.4px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 6%,transparent);box-shadow:0 40px 90px -50px color-mix(in srgb,var(--st-brand) 50%,transparent)}
.ts-mark{position:absolute;top:-34px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);font:800 64px/1 Georgia,serif;padding-top:22px}
.ts-company{font:800 15px/1 var(--st-font-heading);letter-spacing:.3em;color:var(--st-muted)}
.ts-quote{font:600 clamp(22px,1.6cqi + 14px,32px)/1.45 var(--st-font-heading);letter-spacing:-.01em;max-width:30em}
.ts-person{display:flex;align-items:center;gap:16px;text-align:left}
.ts-photo{width:60px;height:60px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.ts-name{font-weight:800;font-size:17px}
.ts-role{color:var(--st-muted);font-size:15px}
.ts-stats{display:flex;flex-wrap:wrap;justify-content:center;width:100%;padding-top:28px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.ts-stat{flex:1 1 160px;display:flex;flex-direction:column-reverse;gap:4px;padding:6px 16px}
.ts-stat + .ts-stat{border-left:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.ts-value{font:800 clamp(30px,2.4cqi + 14px,42px)/1.1 var(--st-font-heading);color:var(--st-brand);letter-spacing:-.02em}
.ts-label{color:var(--st-muted);font-size:15px}
.ts-link{color:var(--st-brand);font-weight:700;text-decoration:none}
.ts-link:hover{text-decoration:underline}
@container st (max-width:600px){.ts-stat + .ts-stat{border-left:0;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);padding-top:14px}.ts-stats{flex-direction:column;gap:10px}.ts-stat{flex:none}}
/* Single Plan Pricing */
.st-pricing-single-plan{padding:clamp(64px,8cqi,112px) 0}
.st-billing{display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 7%,transparent);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-bill-btn{position:relative;z-index:0;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--st-muted);font:700 14.5px/1 var(--st-font-body);cursor:pointer;transition:color .2s ease}
.st-bill-btn[aria-pressed="true"]{color:var(--st-btn-text)}
.st-bill-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px}
.st-bill-pill{position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--st-brand);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--st-brand) 70%,transparent)}
.st-save{padding:3px 8px;border-radius:999px;background:color-mix(in srgb,#16a34a 16%,transparent);color:#15803d;font-size:12px;font-weight:800}
.st-bill-btn[aria-pressed="true"] .st-save{background:color-mix(in srgb,var(--st-btn-text) 22%,transparent);color:inherit}
.st-pm,.st-py{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.st-py,.st.is-yearly .st-pm{display:none}
.st.is-yearly .st-py{display:inline-flex}
.ps{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(36px,5cqi,80px)}
.ps-copy{display:flex;flex-direction:column;gap:32px}
.ps-head{margin-bottom:0}
.ps-inc-title{font-size:15px;font-family:var(--st-font-body);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--st-muted);margin-bottom:16px}
.ps-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.ps-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(28px,3.4cqi,44px);text-align:center;border-radius:calc(var(--st-radius) * 1.3px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--st-brand) 45%,transparent),0 0 0 6px color-mix(in srgb,var(--st-brand) 7%,transparent)}
.ps-plan{font-size:24px}
.ps-plan-note{color:var(--st-muted);font-size:15px;margin-top:-8px}
.ps-card .st-billing{margin:6px 0}
.ps-price{min-height:72px;display:flex;align-items:center;justify-content:center}
.ps-amt{font:800 clamp(52px,4cqi + 22px,68px)/1 var(--st-font-heading);letter-spacing:-.04em}
.ps-per{color:var(--st-muted);font-size:15px}
.ps-card .st-btn{width:100%;min-height:56px;font-size:17px}
.ps-guarantee{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--st-muted);font-size:14px}
.ps-shield{width:16px;height:16px;flex:none;background:var(--st-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
@container st (max-width:860px){.ps{grid-template-columns:1fr}}
@container st (max-width:520px){.ps-list{grid-template-columns:1fr}}
/* FAQ Accordion */
.st-faq-accordion{padding:clamp(64px,8cqi,112px) 0}
.st-acc{border-bottom:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.st-acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:700 clamp(17px,.6cqi + 14px,19px)/1.4 var(--st-font-heading);letter-spacing:-.01em}
.st-acc-q::-webkit-details-marker{display:none}
.st-acc-q:hover{color:var(--st-brand)}
.st-acc-q:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px;border-radius:6px}
.st-acc-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 11%,transparent);transition:transform .3s ease,background .3s ease}
.st-acc-icon::before,.st-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--st-brand);transform:translate(-50%,-50%)}
.st-acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.st-acc[open]:not(.is-closing) .st-acc-icon{transform:rotate(180deg);background:var(--st-brand)}
.st-acc[open]:not(.is-closing) .st-acc-icon::before,.st-acc[open]:not(.is-closing) .st-acc-icon::after{background:var(--st-btn-text)}
.st-acc[open]:not(.is-closing) .st-acc-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.st-acc-a{overflow:hidden}
.st-acc-a p{padding:0 48px 24px 2px;color:var(--st-muted);font-size:16.5px;line-height:1.7}
.fq-list{max-width:820px;margin:0 auto;border-top:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.fq-contact{max-width:820px;margin:clamp(32px,4cqi,48px) auto 0;padding:20px 24px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);text-align:center;color:var(--st-muted)}
.fq-contact a{color:var(--st-brand);font-weight:700;text-decoration:none}
.fq-contact a:hover{text-decoration:underline}
/* Popup & Promo Modal */
.st-popup-modal{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.st-popup-modal:has(.pu.is-preview){height:auto;padding:clamp(24px,4vw,48px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 8%,var(--st-bg))}
.pu-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease}
.pu-backdrop[hidden],.pu-dialog[hidden]{display:none}
.pu-dialog{position:fixed;z-index:1001;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);--pu-wd:780px;width:min(var(--pu-w,var(--pu-wd)),calc(100vw - 32px));height:var(--pu-h,auto);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);color:var(--st-text);box-shadow:0 40px 90px -20px rgba(15,23,42,.55);font-family:var(--st-font-body);opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.pu[data-pos=center] .pu-dialog{top:50%;left:50%;transform:translate(-50%,-46%) scale(.97)}
.pu:not([data-pos=center]) .pu-dialog{--pu-wd:400px;grid-template-columns:1fr;box-shadow:0 24px 60px -16px rgba(15,23,42,.5),0 0 0 1px color-mix(in srgb,var(--st-text) 8%,transparent)}
.pu:not([data-pos=center]) .pu-backdrop{display:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:20px;transform:translateY(24px)}
.pu[data-pos^=top] .pu-dialog{top:20px;transform:translateY(-24px)}
.pu[data-pos$=right] .pu-dialog{right:20px}
.pu[data-pos$=left] .pu-dialog{left:20px}
.pu[data-pos=bottom-center] .pu-dialog{left:50%;--pu-wd:460px;transform:translate(-50%,24px)}
.pu.is-open .pu-backdrop{opacity:1}
.pu.is-open .pu-dialog{opacity:1}
.pu[data-pos=center].is-open .pu-dialog{transform:translate(-50%,-50%)}
.pu[data-pos=bottom-center].is-open .pu-dialog{transform:translateX(-50%)}
.pu:not([data-pos=center]):not([data-pos=bottom-center]).is-open .pu-dialog{transform:none}
.pu-media{position:relative;min-height:220px;background:var(--st-surface)}
.pu-media:not(:has(.pu-img,.pu-car,.pu-video)){display:none}
.pu-dialog:not(:has(.pu-img,.pu-car,.pu-video)){grid-template-columns:1fr}
.pu-body:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){display:none}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){grid-template-columns:1fr}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))) .pu-media{min-height:clamp(240px,40vw,380px)}
.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pu[data-pos=center][data-layout=right] .pu-media{order:2}
.pu[data-pos=center][data-layout=top] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=top] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-pos=center][data-layout=bottom] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=bottom] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-layout=bottom] .pu-media{order:2}
.pu:not([data-pos=center]) .pu-media{min-height:150px;aspect-ratio:16/9}
.pu-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-car{position:absolute;inset:0}
.pu-video{position:absolute;inset:0;z-index:1;background:#0b1020;overflow:hidden}
.pu-video .vs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-video .vs-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(8,10,20,.55),rgba(8,10,20,.08) 65%);color:#fff;text-decoration:none}
.pu-video .vs-btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s ease}
.pu-video .vs-btn svg{margin-left:3px}
.pu-video .vs-play:hover .vs-btn{transform:scale(1.08)}
.pu-video .vs-play:focus-visible{outline:4px solid var(--st-brand);outline-offset:-4px}
.pu-video .vs-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.pu-video.is-playing .vs-poster,.pu-video.is-playing .vs-play{display:none}
.pu-html-wrap{width:100%;min-width:0}
.pu-html{min-width:0;color:var(--st-text);font-size:15px;line-height:1.6}
.pu-html iframe,.pu-html img,.pu-html video{max-width:100%}
.pu-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pu-track::-webkit-scrollbar{display:none}
.pu-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center}
.pu-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-slide-link{position:absolute;inset:0}
.pu-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 38px;background:linear-gradient(to top,rgba(8,10,20,.72),transparent);color:#fff;font-weight:700;font-size:15px;line-height:1.3;pointer-events:none}
.pu-cap:empty{display:none}
.pu-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#0f172a;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.3)}
.pu-nav:hover{background:#fff}
.pu-prev{left:10px}
.pu-next{right:10px}
.pu-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:7px}
.pu-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s ease,transform .2s ease}
.pu-dot[aria-current=true]{background:#fff;transform:scale(1.25)}
.pu-car.is-single .pu-nav,.pu-car.is-single .pu-dots{display:none}
.pu-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:safe center;padding:clamp(24px,4vw,40px)}
.pu:not([data-pos=center]) .pu-body{padding:20px 22px 22px;gap:10px}
.pu-h{font-size:clamp(24px,2vw + 14px,34px)}
.pu:not([data-pos=center]) .pu-h{font-size:clamp(20px,1vw + 14px,26px)}
.pu-lead{color:var(--st-muted);font-size:16px}
.pu:not([data-pos=center]) .pu-lead{font-size:14.5px}
.pu-form{width:100%}
.pu-row{display:flex;flex-direction:column;gap:10px}
.pu-input{width:100%;min-height:50px;padding:0 16px;border:1.5px solid color-mix(in srgb,var(--st-text) 18%,transparent);border-radius:calc(var(--st-radius) * .7px);background:var(--st-bg);color:var(--st-text);font:500 16px/1 var(--st-font-body);outline:none}
.pu-input:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.pu-btn{width:100%}
.pu-ctas{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.pu-ctas .pu-cta{flex:1 1 auto}
.pu-note{margin-top:8px;font-size:13px;color:var(--st-muted)}
.pu-note:empty,.pu-ok:empty,.pu-err:empty{display:none}
.pu-ok{padding:12px 14px;border-radius:calc(var(--st-radius) * .6px);background:color-mix(in srgb,#16a34a 14%,transparent);color:var(--st-text);font-weight:600}
.pu-err{margin-top:8px;color:#b91c1c;font-size:14px;font-weight:600}
.pu-no{align-self:center;padding:6px 10px;border:0;background:none;color:var(--st-muted);font:600 14px/1 var(--st-font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pu-no:hover{color:var(--st-text)}
.pu-no:has(span:empty){display:none}
.pu-x{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:color-mix(in srgb,var(--st-bg) 88%,transparent);color:var(--st-text);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.18);transition:background .2s ease,transform .2s ease}
.pu-x:hover{background:var(--st-bg);transform:scale(1.06)}
.pu-x:focus-visible,.pu-no:focus-visible,.pu-input:focus-visible,.pu-nav:focus-visible,.pu-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 55%,transparent);outline-offset:2px}
.pu.is-preview .pu-backdrop{display:none}
.pu.is-preview .pu-dialog{position:relative;inset:auto;transform:none;margin:0 auto;opacity:1;max-height:none}
@media (max-width:640px){
.pu[data-pos=center] .pu-dialog,.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:1fr}
.pu[data-pos=center][data-layout=right] .pu-media{order:0}
.pu-media{min-height:150px;max-height:220px}
.pu:not([data-pos=center]) .pu-dialog{left:12px;right:12px;width:auto}
.pu[data-pos=bottom-center] .pu-dialog,.pu[data-pos=bottom-center].is-open .pu-dialog{left:12px;transform:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:12px}
.pu[data-pos^=top] .pu-dialog{top:12px}
.pu-body{padding:22px}
}
@media print{.pu{display:none}}
/* Minimal Footer */
.st-footer-minimal{padding:36px 0 28px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.st-brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:var(--st-text)}
.st-brand-img{height:32px;width:auto;max-width:180px;object-fit:contain}
.st-brand-mark{display:inline-flex;align-items:center;gap:10px;font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em}
.st-brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:calc(var(--st-radius) * .7px);background:var(--st-brand);color:var(--st-btn-text)}
.st-brand-icon svg{width:19px;height:19px}
.st-socials{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.st-social{display:grid;place-items:center;width:40px;height:40px;border-radius:calc(var(--st-radius) * .7px);color:var(--st-muted);background:color-mix(in srgb,var(--st-text) 6%,transparent);transition:color .2s ease,background .2s ease,transform .2s ease}
.st-social:hover{color:var(--st-btn-text);background:var(--st-brand);transform:translateY(-2px)}
.st-social > span{display:block;line-height:0}
.st-social svg{display:block;width:19px;height:19px}
.fm .st-brand-mark{font-size:19px}
.fm .st-brand-icon{width:30px;height:30px}
.fm-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 32px;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fm-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px}
.fm-links a{color:var(--st-muted);font-size:15px;font-weight:500;text-decoration:none}
.fm-links a:hover{color:var(--st-brand)}
.fm .st-social{width:36px;height:36px;background:none}
.fm .st-social:hover{background:color-mix(in srgb,var(--st-brand) 12%,transparent);color:var(--st-brand)}
.fm-copy{padding-top:20px;color:var(--st-muted);font-size:14px;text-align:center}
@container st (max-width:760px){.fm-row{flex-direction:column;text-align:center}.fm-links{justify-content:center}.fm .st-socials{justify-content:center}}
/* Back to Top Button */
.st-back-to-top{overflow:visible;container-type:normal;height:0;min-height:0;padding:0;background:transparent}
.st-back-to-top:has(.btt.is-preview){height:auto;padding:clamp(20px,3vw,40px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 6%,var(--st-bg))}
.btt{--btt-size:52px;--btt-off:24px;--btt-radius:50%;--btt-speed:.8s;--btt-bg:var(--st-brand);--btt-fg:var(--st-btn-text)}
.btt-btn{position:fixed;bottom:var(--btt-off);z-index:2147482500;display:grid;place-items:center;width:var(--btt-size);height:var(--btt-size);padding:0;border:0;border-radius:var(--btt-radius);background:var(--btt-bg);color:var(--btt-fg);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s,box-shadow .2s ease,background .2s ease}
.btt[data-pos=right] .btt-btn{right:var(--btt-off)}
.btt[data-pos=left] .btt-btn{left:var(--btt-off)}
.btt[data-appear=slide] .btt-btn{transform:translateY(28px)}
.btt[data-appear=zoom] .btt-btn{transform:scale(.5)}
.btt[data-shadow=on] .btt-btn{box-shadow:0 12px 28px -8px rgba(15,23,42,.45)}
.btt.is-visible .btt-btn{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .3s ease,transform .3s ease,visibility 0s,box-shadow .2s ease,background .2s ease}
.btt.is-visible .btt-btn:hover{transform:translateY(-3px)}
.btt.is-visible .btt-btn:active{transform:translateY(0) scale(.96)}
.btt-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--btt-bg) 55%,#fff);outline-offset:3px}
.btt-svg{width:calc(var(--btt-size) * .46);height:calc(var(--btt-size) * .46)}
@media (max-width:899px){.btt[data-mobile=off] .btt-btn{display:none}}
.btt[data-enabled=off] .btt-btn{display:none}
.btt-demo{display:none}
.btt.is-preview .btt-demo{position:relative;display:flex;flex-direction:column;gap:14px;min-height:320px;padding:34px 30px;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--st-text) 40%,transparent)}
.btt-bar{display:block;height:14px;width:100%;border-radius:7px;background:color-mix(in srgb,var(--st-text) 12%,transparent)}
.btt-bar--lg{height:22px;width:62%;background:color-mix(in srgb,var(--st-text) 22%,transparent)}
.btt-bar--md{width:84%}.btt-bar--sm{width:46%}
.btt-note{margin-top:auto;font-size:13px;color:var(--st-muted)}
.btt.is-preview .btt-btn{position:absolute;right:calc(var(--st-pad) + 18px);bottom:calc(clamp(20px,3vw,40px) + 18px);opacity:1;visibility:visible;pointer-events:auto;transform:none}
.btt.is-preview[data-pos=left] .btt-btn{right:auto;left:calc(var(--st-pad) + 18px)}
@media (prefers-reduced-motion:reduce){.btt-btn{transition:none}}
@media print{.btt{display:none}}
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st').forEach(function (sec) {
var btn = sec.querySelector('[data-menu-toggle]');
var panel = sec.querySelector('[data-menu]');
if (btn && panel) {
sec.classList.add('has-menu');
var isOpen = false;
var mobile = function () { return getComputedStyle(btn).display !== 'none'; };
// The toggle and the panel's controls, in document order (the toggle may come after the panel)
var focusables = function () {
return Array.prototype.filter.call(sec.querySelectorAll('a[href], button'), function (el) { return el === btn || panel.contains(el); });
};
var open = function () {
isOpen = true;
sec.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
if (anim) {
G.fromTo(panel, { opacity: 0, y: -12 }, { opacity: 1, y: 0, duration: 0.35, ease: 'power3.out', clearProps: 'transform,opacity' });
G.fromTo(panel.querySelectorAll('[data-menu-item]'), { opacity: 0, y: -8 }, { opacity: 1, y: 0, duration: 0.3, stagger: 0.04, delay: 0.05, ease: 'power2.out', clearProps: 'transform,opacity' });
}
var first = panel.querySelector('a[href], button');
if (first) first.focus();
};
var close = function (returnFocus) {
if (!isOpen) return;
isOpen = false;
btn.setAttribute('aria-expanded', 'false');
var done = function () { sec.classList.remove('menu-open'); };
if (anim) G.to(panel, { opacity: 0, y: -8, duration: 0.2, ease: 'power2.in', onComplete: function () { done(); G.set(panel, { clearProps: 'transform,opacity' }); } });
else done();
if (returnFocus) btn.focus();
};
btn.addEventListener('click', function () { if (isOpen) close(false); else open(); });
document.addEventListener('keydown', function (e) {
if (!isOpen) return;
if (e.key === 'Escape') { close(true); return; }
if (e.key === 'Tab') {
var f = focusables(), first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
});
document.addEventListener('click', function (e) { if (isOpen && !sec.contains(e.target)) close(false); });
panel.addEventListener('click', function (e) { if (e.target.closest('a')) close(false); });
window.addEventListener('resize', function () { if (isOpen && !mobile()) close(false); });
}
sec.querySelectorAll('[data-dismiss]').forEach(function (x) {
x.addEventListener('click', function () {
var box = x.closest('[data-dismissable]');
if (!box) return;
if (anim) G.to(box, { height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0, duration: 0.35, ease: 'power2.inOut', onComplete: function () { box.remove(); } });
else box.remove();
});
});
if (sec.querySelector('[data-sticky-flag]')) {
var hideOn = !!sec.querySelector('[data-hide-flag]');
var last = window.scrollY, hidden = false;
var onScroll = function () {
var y = window.scrollY;
sec.classList.toggle('is-scrolled', y > 8);
if (hideOn && !sec.classList.contains('menu-open')) {
var down = y > last && y > 120;
if (down !== hidden) {
hidden = down;
if (anim) G.to(sec, { yPercent: down ? -100 : 0, duration: 0.35, ease: 'power2.out' });
else sec.style.transform = down ? 'translateY(-100%)' : '';
}
}
last = y;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
}
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
function embed(url) {
var m;
// Character classes instead of backslashes: this code lives inside a template literal
if ((m = url.match(/(?:youtube[.]com[/](?:watch[?](?:.*&)?v=|embed[/]|shorts[/])|youtu[.]be[/])([A-Za-z0-9_-]{11})/))) return { type: 'iframe', src: 'https://www.youtube-nocookie.com/embed/' + m[1] + '?autoplay=1&rel=0' };
if ((m = url.match(/vimeo[.]com[/](?:video[/])?([0-9]+)/))) return { type: 'iframe', src: 'https://player.vimeo.com/video/' + m[1] + '?autoplay=1&dnt=1' };
if (/[.](mp4|webm|ogg)([?].*)?$/i.test(url)) return { type: 'video', src: url };
return null;
}
document.querySelectorAll('.st [data-video-box]').forEach(function (box) {
var btn = box.querySelector('[data-video]');
if (!btn) return;
function start(e) {
var info = embed(btn.getAttribute('data-video') || '');
if (!info) return;
e.preventDefault();
// In the editor the click also selects the section, so the editor still gets it
if (!editing) e.stopPropagation();
var title = box.getAttribute('data-title') || 'Video';
var el;
if (info.type === 'iframe') {
el = document.createElement('iframe');
el.src = info.src;
el.title = title;
el.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
el.allowFullscreen = true;
el.referrerPolicy = 'strict-origin-when-cross-origin';
} else {
el = document.createElement('video');
el.src = info.src;
el.controls = true;
el.autoplay = true;
el.setAttribute('playsinline', '');
el.setAttribute('aria-label', title);
}
el.className = 'vs-embed';
box.appendChild(el);
box.classList.add('is-playing');
if (el.focus) el.focus();
}
btn.addEventListener('click', start);
});
})();
(function () {
var G = window.gsap, reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var canPin = !!(G && window.ScrollTrigger && !reduce && !(window.ST_STILL && !window.ST_SCROLL_FX));
if (canPin) G.registerPlugin(ScrollTrigger);
document.querySelectorAll('.st [data-tlh]').forEach(function (root) {
if (root.getAttribute('data-tlh-ready')) return;
root.setAttribute('data-tlh-ready', '1');
var track = root.querySelector('[data-tlh-track]');
var list = root.querySelector('.tlh-list');
var prev = root.querySelector('[data-tlh-prev]'), next = root.querySelector('[data-tlh-next]');
if (!track || !list) return;
var sec = root.closest('.st');
var items = Array.prototype.slice.call(list.children).filter(function (c) { return c.classList.contains('tlh-item'); });
var active = -1, pinned = false, smooth = reduce ? 'auto' : 'smooth';
var mid = function (it) { return it.offsetLeft + it.offsetWidth / 2; };
function mark(i) {
active = i;
items.forEach(function (it, k) {
it.classList.toggle('is-active', k === i);
var d = it.querySelector('[data-tlh-dot]');
if (d) { if (k === i) d.setAttribute('aria-current', 'true'); else d.removeAttribute('aria-current'); }
});
}
function centre(i, behavior) {
var it = items[i]; if (!it) return;
track.scrollTo({ left: Math.max(0, mid(it) - track.clientWidth / 2), behavior: behavior || smooth });
}
function setActive(i, scroll) {
if (!items[i]) return;
mark(i);
list.style.setProperty('--tl-fill', mid(items[i]) + 'px');
if (scroll) centre(i);
}
function update() {
if (pinned) return;
var max = track.scrollWidth - track.clientWidth;
if (prev) prev.disabled = track.scrollLeft <= 2;
if (next) next.disabled = track.scrollLeft >= max - 2;
root.classList.toggle('is-fit', max <= 2);
if (active > -1) list.style.setProperty('--tl-fill', mid(items[active]) + 'px');
}
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; update(); }); }, { passive: true });
if (window.ResizeObserver) new ResizeObserver(update).observe(track); else window.addEventListener('resize', update);
var step = function () { var w = items[0] ? items[0].offsetWidth : 240; return Math.max(w, Math.floor(track.clientWidth * 0.8 / w) * w); };
if (prev) prev.addEventListener('click', function () { track.scrollBy({ left: -step(), behavior: smooth }); });
if (next) next.addEventListener('click', function () { track.scrollBy({ left: step(), behavior: smooth }); });
var trigger = null;
items.forEach(function (it, k) {
var d = it.querySelector('[data-tlh-dot]');
if (!d) return;
d.addEventListener('click', function () {
if (root.getAttribute('data-moved')) return;
if (pinned && trigger) {
var p = items.length > 1 ? k / (items.length - 1) : 0;
window.scrollTo({ top: trigger.start + p * (trigger.end - trigger.start), behavior: smooth });
} else setActive(k, true);
});
});
track.addEventListener('keydown', function (e) {
if (pinned) return;
var w = items[0] ? items[0].offsetWidth : 240;
if (e.key === 'ArrowRight') { e.preventDefault(); track.scrollBy({ left: w, behavior: smooth }); }
else if (e.key === 'ArrowLeft') { e.preventDefault(); track.scrollBy({ left: -w, behavior: smooth }); }
else if (e.key === 'Home') { e.preventDefault(); track.scrollTo({ left: 0, behavior: smooth }); }
else if (e.key === 'End') { e.preventDefault(); track.scrollTo({ left: track.scrollWidth, behavior: smooth }); }
});
var down = false, sx = 0, sl = 0, moved = 0;
track.addEventListener('pointerdown', function (e) {
if (pinned || e.pointerType !== 'mouse' || e.button !== 0) return;
down = true; moved = 0; sx = e.clientX; sl = track.scrollLeft; root.removeAttribute('data-moved');
});
window.addEventListener('pointermove', function (e) {
if (!down) return;
var dx = e.clientX - sx; moved = Math.max(moved, Math.abs(dx));
if (moved > 5) { track.classList.add('is-dragging'); track.scrollLeft = sl - dx; }
});
window.addEventListener('pointerup', function () {
if (!down) return;
down = false; track.classList.remove('is-dragging');
if (moved > 5) { root.setAttribute('data-moved', '1'); setTimeout(function () { root.removeAttribute('data-moved'); }, 0); }
});
var start = parseInt(root.getAttribute('data-start'), 10);
setActive(isNaN(start) ? 0 : Math.min(items.length - 1, Math.max(0, start - 1)), false);
update();
if (canPin && root.getAttribute('data-mode') !== 'free' && sec) {
G.matchMedia().add('(min-width: 768px)', function () {
var dist = function () { return Math.max(0, list.scrollWidth - track.clientWidth); };
if (dist() < 24) return;
// A sticky header stays on screen, so the section pins just below it instead of under it
var head = function () { var h = 0; document.querySelectorAll('.st').forEach(function (n) { if (n !== sec && n.querySelector('[data-sticky-flag]')) h = Math.max(h, n.offsetHeight); }); return h; };
pinned = true;
sec.classList.add('is-tl-pinned');
track.scrollLeft = 0;
var first = function () { return mid(items[0]); }, last = function () { return mid(items[items.length - 1]); };
var tw = G.timeline({
scrollTrigger: {
trigger: sec, start: function () { return 'top ' + head(); }, end: function () { return '+=' + Math.round(Math.max(dist() * 1.1, items.length * 170)); },
pin: true, scrub: 0.6, anticipatePin: 1, invalidateOnRefresh: true,
onUpdate: function (self) {
trigger = self;
var p = Math.min(1, self.progress / 0.91);
var f = first() + (last() - first()) * p;
list.style.setProperty('--tl-fill', f + 'px');
var idx = 0;
for (var k = 0; k < items.length; k++) { if (mid(items[k]) <= f + 2) idx = k; }
if (idx !== active) mark(idx);
}
}
});
// The row travels for 91% of the scroll, then rests on the last event for the last 9%
tw.to(list, { x: function () { return -dist(); }, ease: 'none', duration: 0.91 }).to({}, { duration: 0.09 });
trigger = tw.scrollTrigger;
return function () {
pinned = false; trigger = null;
if (tw.scrollTrigger) tw.scrollTrigger.kill(); tw.kill();
G.set(list, { clearProps: 'transform' });
sec.classList.remove('is-tl-pinned');
setActive(active > -1 ? active : 0, false);
update();
};
});
}
});
})();
(function () {
if (window.gsap && window.Flip) gsap.registerPlugin(Flip);
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st').forEach(function (sec) {
var btns = sec.querySelectorAll('[data-billing]');
if (!btns.length) return;
var pill = sec.querySelector('.st-bill-pill');
Array.prototype.forEach.call(btns, function (b) {
b.addEventListener('click', function () {
var yearly = b.getAttribute('data-billing') === 'yearly';
if (sec.classList.contains('is-yearly') === yearly) return;
var state = !reduce && window.Flip && pill ? Flip.getState(pill) : null;
if (pill) b.appendChild(pill);
sec.classList.toggle('is-yearly', yearly);
Array.prototype.forEach.call(btns, function (x) { x.setAttribute('aria-pressed', String(x === b)); });
if (reduce || !window.gsap) return;
if (state) Flip.from(state, { duration: 0.45, ease: 'power3.inOut' });
gsap.fromTo(sec.querySelectorAll(yearly ? '.st-py' : '.st-pm'),
{ yPercent: 40, opacity: 0 },
{ yPercent: 0, opacity: 1, duration: 0.4, stagger: 0.05, ease: 'power3.out', clearProps: 'transform,opacity' });
});
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st [data-accordion]').forEach(function (list) {
var mode = list.getAttribute('data-accordion') || '';
var items = Array.prototype.slice.call(list.querySelectorAll('details'));
var body = function (d) { return d.querySelector('.st-acc-a'); };
var close = function (d) {
if (!d.open || d.classList.contains('is-closing')) return;
if (!anim) { d.open = false; return; }
d.classList.add('is-closing');
G.to(body(d), { height: 0, duration: 0.32, ease: 'power2.inOut', onComplete: function () {
d.open = false; d.classList.remove('is-closing'); G.set(body(d), { clearProps: 'height' });
} });
};
var open = function (d) {
d.open = true;
if (!anim) return;
var b = body(d);
G.fromTo(b, { height: 0 }, { height: 'auto', duration: 0.4, ease: 'power2.out', clearProps: 'height' });
G.fromTo(b.children, { y: -8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, delay: 0.06, ease: 'power2.out', clearProps: 'transform,opacity' });
};
items.forEach(function (d) {
d.querySelector('summary').addEventListener('click', function (e) {
e.preventDefault();
if (d.open && !d.classList.contains('is-closing')) { close(d); return; }
if (/single/.test(mode)) items.forEach(function (o) { if (o !== d) close(o); });
open(d);
});
});
if (/first/.test(mode) && items[0]) items[0].open = true;
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
document.querySelectorAll('.st [data-pu]').forEach(function (root) {
var dlg = root.querySelector('.pu-dialog');
var back = root.querySelector('.pu-backdrop');
if (!dlg || root.getAttribute('data-pu-ready')) return;
root.setAttribute('data-pu-ready', '1');
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
root.querySelectorAll('[data-pu-carousel]').forEach(function (car) {
var track = car.querySelector('.pu-track');
if (!track) return;
var slides = track.children, n = slides.length;
if (n < 2) { car.classList.add('is-single'); return; }
var mk = function (cls, label, svg) { var b = document.createElement('button'); b.type = 'button'; b.className = cls; b.setAttribute('aria-label', label); if (svg) b.innerHTML = svg; return b; };
var arrow = function (d) { return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + d + '"/></svg>'; };
var prev = mk('pu-nav pu-prev', 'Previous slide', arrow('m15 18-6-6 6-6'));
var next = mk('pu-nav pu-next', 'Next slide', arrow('m9 18 6-6-6-6'));
var dots = document.createElement('div'); dots.className = 'pu-dots';
var dotEls = [];
for (var i = 0; i < n; i++) { (function (k) { var d = mk('pu-dot', 'Go to slide ' + (k + 1)); d.addEventListener('click', function () { go(k); stop(); }); dots.appendChild(d); dotEls.push(d); })(i); }
car.appendChild(prev); car.appendChild(next); car.appendChild(dots);
var idx = function () { return Math.round(track.scrollLeft / Math.max(1, track.clientWidth)); };
var mark = function () { var c = idx(); dotEls.forEach(function (d, k) { d.setAttribute('aria-current', k === c ? 'true' : 'false'); }); };
var go = function (k) { k = (k + n) % n; track.scrollTo({ left: k * track.clientWidth, behavior: reduce ? 'auto' : 'smooth' }); };
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; mark(); }); }, { passive: true });
prev.addEventListener('click', function () { go(idx() - 1); stop(); });
next.addEventListener('click', function () { go(idx() + 1); stop(); });
mark();
var secs = parseFloat(root.getAttribute('data-autoplay')) || 0;
var timer = 0, paused = false;
var stop = function () { clearInterval(timer); timer = 0; };
if (secs > 0 && !reduce) {
car.addEventListener('mouseenter', function () { paused = true; });
car.addEventListener('mouseleave', function () { paused = false; });
car.addEventListener('focusin', function () { paused = true; });
car.addEventListener('focusout', function () { paused = false; });
timer = setInterval(function () { var d = root.querySelector('.pu-dialog'); if (!paused && d && !d.hidden && !document.hidden) go(idx() + 1); }, secs * 1000);
}
});
var btnMode = !!window.ST_POPUP_BUTTON; // Website Builder preview: a floating button opens the popup instead of showing it inline
if (inline && !btnMode) {
root.classList.add('is-preview');
dlg.hidden = false;
if (back) back.hidden = true;
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', function (e) { e.preventDefault(); }); });
return;
}
var trigger = root.getAttribute('data-trigger') || 'delay';
var delay = Math.max(0, parseFloat(root.getAttribute('data-delay')) || 0);
var pct = Math.min(100, Math.max(1, parseFloat(root.getAttribute('data-scroll')) || 50));
var days = parseFloat(root.getAttribute('data-days')) || 0;
var KEY = 'pu-' + (root.getAttribute('data-pu-id') || 'x');
try {
var seen = parseInt(localStorage.getItem(KEY), 10);
if (!btnMode && days > 0 && seen && Date.now() - seen < days * 86400000) return;
} catch (e) {}
var modal = (root.getAttribute('data-pos') || 'center') === 'center'; // only the centre popup dims the page and traps focus
dlg.setAttribute('aria-modal', modal ? 'true' : 'false');
var shown = false, last = null, undo = [], quiet = btnMode; // in the builder preview the popup never pulls focus out of the side panel
var setOpenFlag = function (v) { if (!btnMode) return; try { if (v) window.parent.__wbPuOpen = KEY; else if (window.parent.__wbPuOpen === KEY) window.parent.__wbPuOpen = ''; } catch (e) {} };
var focusables = function () { return Array.prototype.filter.call(dlg.querySelectorAll('a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])'), function (el) { return el.offsetParent !== null; }); };
var onKey = function (e) {
if (e.key === 'Escape') { e.preventDefault(); hide(); return; }
if (e.key !== 'Tab' || !modal) return;
var f = focusables();
if (!f.length) return;
var first = f[0], end = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); end.focus(); }
else if (!e.shiftKey && document.activeElement === end) { e.preventDefault(); first.focus(); }
};
function show() {
if (shown) return;
shown = true;
undo.forEach(function (fn) { fn(); });
last = document.activeElement;
dlg.hidden = false;
if (back) back.hidden = false;
void dlg.offsetWidth;
root.classList.add('is-open');
setOpenFlag(true);
if (modal && !quiet) {
var f = focusables();
var target = dlg.querySelector('input') || f[1] || f[0] || dlg;
try { target.focus({ preventScroll: true }); } catch (e) {}
}
document.addEventListener('keydown', onKey);
try { if (days > 0 && !btnMode) localStorage.setItem(KEY, String(Date.now())); } catch (e) {}
}
function hide() {
setOpenFlag(false);
root.classList.remove('is-open');
root.querySelectorAll('.vs-embed').forEach(function (v) { var box = v.parentNode; v.remove(); if (box) box.classList.remove('is-playing'); });
document.removeEventListener('keydown', onKey);
setTimeout(function () { dlg.hidden = true; if (back) back.hidden = true; }, 320);
if (last && last.focus) { try { last.focus({ preventScroll: true }); } catch (e) {} }
}
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', hide); });
var on = function (target, ev, fn, opts) { target.addEventListener(ev, fn, opts); undo.push(function () { target.removeEventListener(ev, fn, opts); }); };
var started = Date.now();
if (btnMode) {
// The popup follows its own trigger (delay, exit intent, scroll) exactly like the published page; a floating
// button also opens and closes it on demand, and it stays open across preview reloads while it is being edited
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'wb-pu-btn';
btn.textContent = 'Popup preview';
btn.setAttribute('aria-label', 'Open the popup');
btn.style.cssText = 'position:fixed;left:16px;bottom:' + (16 + document.querySelectorAll('.wb-pu-btn').length * 48) + 'px;z-index:999;padding:0 16px;height:38px;border:0;border-radius:999px;background:#4f46e5;color:#fff;font:700 13px/1 system-ui,sans-serif;box-shadow:0 8px 22px rgba(15,23,42,.35);cursor:pointer';
btn.addEventListener('click', function () { if (root.classList.contains('is-open')) hide(); else { shown = false; show(); } });
document.body.appendChild(btn);
try { if (window.parent.__wbPuOpen === KEY) show(); } catch (e) {}
}
if (trigger === 'scroll') {
var check = function () {
var h = document.documentElement.scrollHeight - window.innerHeight;
var p = h > 0 ? (window.scrollY / h) * 100 : 100;
if (p >= pct) show();
};
on(window, 'scroll', check, { passive: true });
} else if (trigger === 'exit' && window.matchMedia && window.matchMedia('(pointer: fine)').matches) {
on(document, 'mouseout', function (e) { if (!e.relatedTarget && e.clientY <= 0 && Date.now() - started > 2000) show(); });
} else {
var timer = setTimeout(show, Math.max(delay, trigger === 'exit' ? 10 : 0) * 1000);
undo.push(function () { clearTimeout(timer); });
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st form[data-form]').forEach(function (form) {
var ok = form.querySelector('[data-form-success]');
var bad = form.querySelector('[data-form-error]');
var btn = form.querySelector('[type="submit"]');
var done = function () {
var fields = form.querySelectorAll('[data-form-fields]');
var show = function () {
Array.prototype.forEach.call(fields, function (f) { f.hidden = true; });
if (ok) { ok.hidden = false; ok.focus && ok.focus(); if (G && !reduce) G.from(ok, { y: 16, opacity: 0, duration: 0.5, ease: 'power3.out', clearProps: 'transform,opacity' }); }
};
if (G && !reduce && fields.length) G.to(fields, { opacity: 0, y: -10, duration: 0.25, onComplete: show }); else show();
};
form.addEventListener('submit', function (e) {
if (!window.fetch) return;
e.preventDefault();
if (bad) bad.hidden = true;
if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); }
var finish = function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); } };
if (window.ST_PREVIEW) { setTimeout(function () { finish(); done(); }, 600); return; }
fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
.then(function (r) { finish(); if (r.ok) done(); else if (bad) bad.hidden = false; })
.catch(function () { finish(); if (bad) bad.hidden = false; });
});
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st [data-btt]').forEach(function (root) {
if (root.getAttribute('data-btt-ready')) return;
root.setAttribute('data-btt-ready', '1');
var btn = root.querySelector('.btt-btn');
var demo = root.querySelector('.btt-demo');
if (!btn || root.getAttribute('data-enabled') === 'off') { if (demo && !inline) demo.parentNode.removeChild(demo); return; }
if (!inline && demo) demo.parentNode.removeChild(demo);
if (inline) {
root.classList.add('is-preview', 'is-visible');
btn.addEventListener('click', function (e) { e.preventDefault(); });
return;
}
var dist = parseFloat(root.getAttribute('data-distance')) || 0;
var secs = parseFloat(root.getAttribute('data-speed'));
if (isNaN(secs)) secs = 0.8;
var ticking = false;
function check() { ticking = false; root.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop) > dist); }
window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(check); } }, { passive: true });
check();
var stopped = false;
['wheel', 'touchstart', 'keydown'].forEach(function (ev) { window.addEventListener(ev, function () { stopped = true; }, { passive: true }); });
btn.addEventListener('click', function () {
var from = window.pageYOffset || document.documentElement.scrollTop;
if (reduce || secs <= 0 || from < 2) { window.scrollTo({ top: 0, left: 0, behavior: 'instant' }); return; }
stopped = false;
var t0 = performance.now(), dur = secs * 1000;
(function step(t) {
var p = Math.min(1, (t - t0) / dur);
var e = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
window.scrollTo({ top: from * (1 - e), left: 0, behavior: 'instant' });
if (p < 1 && !stopped) requestAnimationFrame(step);
})(t0);
});
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', end: function () { var pin = ScrollTrigger.getAll().filter(function (t) { return t.pin === section; })[0]; return pin ? pin.end + section.offsetHeight : 'bottom top'; }, toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();
Extend with AI
Take This Template Further With AI
Give this prompt to an AI assistant to generate your own version of the Online Course Website template: swap in your business name, services and tone, add or remove sections, translate it, or turn the page into a Next.js project or a WordPress theme. Use the template above as the visual reference, so you and the AI start from a design that already works.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
text
Build a complete online course website for “Design Academy” as clean HTML, CSS and a little JavaScript.
Page structure, top to bottom:
1. Simple Sticky Navbar
2. SaaS Split Hero: “Learn UI design in 8 weeks”
3. Icon Grid Features: “Skills you’ll actually use”
4. Video Section with Poster: “Watch the first lesson”
5. Alternating Feature Rows: “Eight weeks, step by step”
6. Horizontal Timeline: “Your 8-week learning path”
7. Testimonial Spotlight: “Priya Raman”
8. Single Plan Pricing: “One price, everything included”
9. FAQ Accordion: “Questions about the course”
10. Popup & Promo Modal
11. Minimal Footer
12. Back to Top Button
Look and feel:
- Colours as CSS custom properties: brand #f97316, page background #fffcf8, cards #fff1e6, text #1c1917, muted text #57534e. Corner radius 14px, content width 1200px.
- Headings in Plus Jakarta Sans, body text in DM Sans (load both from Google Fonts with display=swap).
- Mobile first. Sections use CSS grid or flexbox and stack cleanly below 700px.
Content:
- Write real, believable education copy for every section instead of lorem ipsum: specific offers, numbers, names and calls to action.
- One clear primary action in the hero and again near the end.
Quality:
- Semantic HTML (header, main, section, footer) with exactly one h1, the hero headline, and one h2 per section.
- Accessible: alt text on every image, visible focus states, labelled form fields, buttons and links with clear text, and prefers-reduced-motion respected.
- SEO: title “Online Course Landing Page Template — Free HTML Template”, a meta description of 150 to 160 characters, Open Graph tags and JSON-LD that suits a education business.
- Optional: a subtle GSAP ScrollTrigger fade-up on section headings, with content visible without JavaScript.
Also create these pages with the same navbar, footer and theme, and link them from the menu:
- Pricing (pricing.html)
- FAQ (faq.html)
- Log in (login.html)
- Sign up (register.html)
- Journal (blog.html)
- Article (article.html)
- Privacy (privacy.html)Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
12 ready-made website sections assembled into one finished online course website page: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, Video Section with Poster, Alternating Feature Rows, Horizontal Timeline, Testimonial Spotlight, Single Plan Pricing, FAQ Accordion, Popup & Promo Modal, Minimal Footer, Back to Top Button
Every section links to its own page in the Website Section Templates library, where you can edit it on its own
One theme drives the whole page (colours, fonts, corner radius, width), so changing the brand takes a minute
Container-query responsive: each section adapts to the width it is placed in, from phone to desktop
GSAP entrance animations and scroll effects load from a CDN, and switch off for visitors who prefer reduced motion
Also available as a 9-page website in the builder, sharing one navbar, footer and theme
A pinned horizontal timeline (GSAP ScrollTrigger) that slides along as you scroll, with a growing progress line
A floating back to top button that appears as visitors scroll, on every page of the multi-page version
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A Course Sales Page Structure: Promise, Preview, Curriculum, Proof and One Price
Buying a course is a bet on a stranger, so a good sales page reduces risk at every step. This layout does it in order. The hero makes a specific promise and shows a lesson preview so people can sample the teaching, the icon grid lists what students will be able to do afterwards (outcomes, not topics), and alternating feature rows walk through the curriculum module by module so a buyer can see how it is built.
A video section lets the instructor speak directly, a spotlight testimonial shows a result from a real student, and a single plan price keeps the decision simple, with the money-back guarantee next to the button where doubt peaks. The FAQ ends the objections: how long, what level, what if I get stuck.
Keep the single-price layout unless you really have tiers. It is the layout of the Online Course Website template; open it in the Website Builder to edit the curriculum, price and copy and export.
Interactive extras built in
Beyond the core sections, this template adds a pinned horizontal syllabus that walks through the eight weeks of the course; and a floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return. Each one has its own page in the Website Section Templates library (Horizontal Timeline, Back to Top Button), where you can try its settings on their own, and you can edit, move or remove any of them in the Website Builder.
Built from website section templates
The 12 Sections Behind This Online Course Website Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Simple Sticky Navbara sticky bar with an Enrol button that stays reachable throughout a long page
- SaaS Split Heroa specific promise and a lesson preview, so buyers can sample the teaching before paying
- Icon Grid Featuresoutcomes: what students will be able to do afterwards, not a list of topics
- Video Section with Posteran instructor video that lets buyers judge whether they like learning from you
- Alternating Feature Rowsthe curriculum, module by module, so a buyer can see how it is built and what it covers
- Horizontal Timelinea pinned horizontal syllabus that walks through the eight weeks of the course
- Testimonial Spotlightone student's result in detail, more persuasive than a row of short quotes
- Single Plan Pricinga single price with the guarantee next to the button, where doubt peaks
- FAQ Accordionanswers on level, time commitment and what happens if a student gets stuck
- Popup & Promo Modalan optional popup for an early-bird price or a free lesson
- Minimal Footera minimal footer with terms, refund policy and support contact
- Back to Top Buttona floating back to top button that appears after the visitor scrolls, so a long page is easy to leave and return
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Online Course Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Write outcomes instead of topicsRewrite the grid so each item starts with "You will be able to…", describing what a student can do after finishing, not what is covered.
- 3Lay out the curriculum honestlyList the modules in order with the length of each and what a student builds or achieves, so buyers can judge the course's depth.
- 4Set the price and the guaranteeEnter the price, what is included and the length of your money-back guarantee, and link the button to your checkout (Stripe, Gumroad or similar).
- 5Export and publishDownload one HTML file or a ZIP (or one HTML file per page for the multi-page version) and upload it to Netlify, Vercel, Cloudflare Pages, GitHub Pages or your own host. Or copy the code from this page and export it to React, Vue, Angular or Tailwind with the buttons above the editor.
Real-world uses
Common Use Cases
Selling a video course or cohort
Give a course a dedicated sales page instead of listing it on a marketplace with other courses.
A workshop, ebook or membership
Swap the curriculum for a table of contents or member benefits; the promise, proof and price structure still works.
Learn a high-converting long-form layout
See how sections, a single-plan price and a spotlight testimonial are put together and animated.
Got questions?
Frequently Asked Questions
A specific promise, a preview, outcomes, a curriculum, the instructor, student results, a clear price with a guarantee and answers to common objections.
One price keeps the decision simple. Add tiers only when the products really differ, such as a self-paced course versus one with coaching.
Link the main button to a checkout from Stripe, Gumroad, Paddle or your course platform; this page handles the selling, the checkout handles the payment.
It adds a pinned horizontal timeline and a floating back to top button. Each is a section you can edit, move or remove in the Website Builder, and each has its own page in the Website Section Templates library.
It is assembled from 12 templates in the free Website Section Templates library: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, Video Section with Poster, Alternating Feature Rows, Horizontal Timeline, Testimonial Spotlight, Single Plan Pricing, FAQ Accordion, Popup & Promo Modal, Minimal Footer, Back to Top Button. Each one has its own page where you can edit it separately.
It is the same page. Here you read and edit the HTML, CSS and JavaScript directly with a live preview; in the Website Builder you edit it with forms, change the theme once for the whole page, add pages and export a finished site.