Online Course Sales Page HTML Template — Free Snippet
Online Course Website template · 10 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
10 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, Testimonial Spotlight, Single Plan Pricing, FAQ Accordion, Popup & Promo Modal, Minimal Footer
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
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.
Built from website section templates
The 10 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
- 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
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 is assembled from 10 templates in the free Website Section Templates library: Simple Sticky Navbar, SaaS Split Hero, Icon Grid Features, Video Section with Poster, Alternating Feature Rows, Testimonial Spotlight, Single Plan Pricing, FAQ Accordion, Popup & Promo Modal, Minimal Footer. 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.
Source Code
<section class="st st-navbar-simple" data-uid="smvnkxdb5j0on">
<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="smvnkxdb51p16">
<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="smvnkxdb5iygk">
<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="smvnkxdb5ytlk">
<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="smvnkxdb5t7ul">
<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="customers" class="st st-testimonial-spotlight" data-uid="smvnkxdb5nw1s">
<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="smvnkxdb5eztq">
<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="smvnkxdb5k8w0">
<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:hello@webdevpuneet.com"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
</div>
</section>
<section class="st st-popup-modal" data-uid="smvnkxdb5pcnh">
<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="smvnkxdb6xc5t">
<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>@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}}
/* 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}}
(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 () {
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);
}
});
if (inline) {
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 (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 = [];
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');
if (modal) {
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) localStorage.setItem(KEY, String(Date.now())); } catch (e) {}
}
function hide() {
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 (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 () {
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%', 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();
})();