SaaS Landing Page HTML Template — Free CSS & JS Snippet
SaaS Landing Page template · 13 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
13 ready-made website sections assembled into one finished saas landing page page: Simple Sticky Navbar, SaaS Split Hero, Scrolling Logo Cloud, Icon Grid Features, Alternating Feature Rows, Video Section with Poster, Testimonial Wall, Three-Tier Pricing, Pricing Comparison Table, FAQ Accordion, Gradient CTA Banner, Popup & Promo Modal, Multi-Column 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 10-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
Anatomy of a SaaS Landing Page That Converts: Why Each Section Sits Where It Does
A software visitor decides in seconds whether your product is for them, so this page is ordered by the doubts a stranger has, in the order they have them. First "what is this?" (the split hero with a product screenshot), then "do other people trust it?" (the logo strip), then "what does it do for me?" (an icon grid for skimmers and alternating rows for readers), then "who else uses it?" (the testimonial wall), and finally "what will it cost, and what if I change my mind?" (pricing, comparison table and FAQ).
Two details are easy to miss. The pricing toggle and the comparison table sit on the same page on purpose: the cards answer "which plan?" in five seconds and the table answers "does the middle plan include SSO?" for the buyer who needs to justify it to someone else. And the call to action is repeated three times (hero, mid-page, closing banner) with the same wording, so a visitor never has to scroll back to act.
To make it yours, keep the order and replace the content: write the hero headline as the outcome your customer gets, put real customer logos in the strip, and name the plans exactly as your app does. This is the same page as the SaaS Landing Page website template; open it in the Website Builder to change colours, fonts and copy with forms, add the Pricing, Blog, About and Contact pages, and export the site.
Built from website section templates
The 13 Sections Behind This SaaS Landing Page 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 that keeps the sign-up button one click away at every scroll depth
- SaaS Split Herostates the outcome in the headline and shows the product in a glowing frame, with a social-proof line under the buttons
- Scrolling Logo Clouda quiet strip of customer logos that borrows trust before the visitor has read a word
- Icon Grid Featuresthe skim layer: six short benefits a visitor can absorb in ten seconds
- Alternating Feature Rowsthe read layer: three features given a screenshot and a paragraph each for people who want detail
- Video Section with Postera poster-frame product tour for visitors who would rather watch than read
- Testimonial Wallreal customer quotes in a wall, placed just before the price so the cost lands with proof behind it
- Three-Tier Pricingmonthly/yearly toggle with a highlighted default plan so the choice is made in five seconds
- Pricing Comparison Tablethe table for buyers who must justify the purchase: every plan limit side by side
- FAQ Accordionanswers security, billing and cancellation worries right where they would stop a sign-up
- Gradient CTA Bannera gradient banner that repeats the one action after the last objection is answered
- Popup & Promo Modalan optional promo modal for a launch offer or webinar, triggered once and dismissable
- Multi-Column Footerthe sitemap in miniature: product, company and legal links for visitors and for search engines
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the SaaS Landing Page in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Rewrite the hero around one outcomeReplace the headline with the result a customer gets in numbers or time ("Ship the report in minutes, not Mondays"), swap the screenshot for a real one of your product, and keep the badge above it for news or a launch.
- 3Match the pricing to your real plansEdit the three tiers and the comparison table so the plan names, limits and prices match your billing system exactly, and set the highlighted plan to the one you want most people to pick.
- 4Replace the proof with real proofPut your own customer logos in the strip, use real names, roles and photos in the testimonial wall, and add a real FAQ about the objections your sales emails hear most.
- 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
Launch a new product or feature
Use the page as the home for a product launch: the hero announces it, the feature rows explain it and the pricing section turns interest into trials on day one.
Pitch a SaaS idea before you build it
Validate demand with a real-looking page and a sign-up button before writing a line of product code, then measure how many visitors click through.
Study the structure of a converting B2B page
Read how container queries keep every section responsive, how the pricing toggle swaps values with a few lines of JS and how GSAP reveals are scoped to each section.
Got questions?
Frequently Asked Questions
Follow the visitor's questions: what is it (hero), can I trust it (logos), what does it do (features), who uses it (testimonials), what does it cost (pricing), what if (FAQ), then one last call to action. This page uses exactly that order.
They answer different readers. The cards let a quick decision-maker pick a plan in seconds; the table lets someone who has to justify the purchase check every limit side by side.
Every button is a plain link. Point the hero, pricing and banner buttons at your sign-up or checkout URL; no script change is needed.
It is assembled from 13 templates in the free Website Section Templates library: Simple Sticky Navbar, SaaS Split Hero, Scrolling Logo Cloud, Icon Grid Features, Alternating Feature Rows, Video Section with Poster, Testimonial Wall, Three-Tier Pricing, Pricing Comparison Table, FAQ Accordion, Gradient CTA Banner, Popup & Promo Modal, Multi-Column 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
Requires
<section class="st st-navbar-simple" data-uid="smvnkxd41an1k">
<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="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" /><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" /><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" /></svg></span><span>Acme</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>Features</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="#customers"><span>Customers</span></a></li>
<li data-menu-item><a class="nb-link" href="#faq"><span>FAQ</span></a></li>
<li data-menu-item><a class="nb-link" href="/blog/"><span>Blog</span></a></li>
</ul>
<div class="nb-actions" data-menu-item>
<a class="nb-login" href="https://webdevpuneet.com/login"><span>Log in</span></a>
<a class="st-btn nb-cta" href="https://webdevpuneet.com/signup"><span>Start free trial</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="smvnkxd42sqf6">
<div class="sh st-wrap">
<div class="sh-copy">
<a class="st-pill sh-badge" data-anim="item" href="https://webdevpuneet.com/changelog"><span>New: Automations are here →</span></a>
<h1 class="sh-title" data-anim="item" data-anim-text>Plan, ship and report <span class="hl">without the chaos</span></h1>
<p class="st-lead sh-lead" data-anim="item">Acme brings your roadmap, tasks and reports into one calm workspace, so your team spends less time updating tools and more time building.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="https://webdevpuneet.com/signup"><span>Start free trial</span></a>
<a class="st-btn st-btn--ghost" href="https://webdevpuneet.com/demo"><span>Book a demo</span></a>
</div>
<p class="sh-proof" data-anim="item">★★★★★ Loved by 2,000+ teams · No credit card required</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/hero-dashboard.png" alt="Acme dashboard showing project progress charts"></div>
</div>
</div>
</section>
<section class="st st-logo-cloud" data-uid="smvnkxd42oz41">
<div class="st-wrap">
<p class="lc-title" data-anim="item">Trusted by <span class="hl">2,000+ teams</span> at fast-growing companies</p>
</div>
<div class="lc-row" data-anim="item" role="region" aria-label="Customer logos" tabindex="0">
<ul class="lc-track" data-marquee data-speed="45">
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="12" cy="12" r="10" /><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" /><path d="M2 12h20" /></svg></span><span>Northwind</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" /><path d="M9 18h6" /><path d="M10 22h4" /></svg></span><span>Lumen</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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><span>Quill</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" /><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" /><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" /><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" /></svg></span><span>Brightpath</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg></span><span>Kestrel</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg></span><span>Orbit</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z" /><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12" /></svg></span><span>Tidewater</span></span>
</li>
<li class="st-logo">
<span class="st-logo-mark"><span class="st-logo-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="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" /><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" /><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" /></svg></span><span>Fernhill</span></span>
</li>
</ul>
</div>
</section>
<section id="features" class="st st-features-icon-grid" data-uid="smvnkxd42dix8">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Features</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Everything your team needs to <span class="hl">ship faster</span></h2>
<p class="st-lead" data-anim="item">One workspace for planning, building and reporting, with the integrations and controls growing teams rely on.</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"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" /></svg></span>
<h3 class="fg-title">Lightning fast</h3>
<p class="fg-text">Pages load in under a second and every action feels instant, even with thousands of tasks.</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="8" height="8" x="3" y="3" rx="2" /><path d="M7 11v4a2 2 0 0 0 2 2h4" /><rect width="8" height="8" x="13" y="13" rx="2" /></svg></span>
<h3 class="fg-title">Automations</h3>
<p class="fg-text">Move cards, assign owners and send updates automatically when work changes state.</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="M3 3v16a2 2 0 0 0 2 2h16" /><path d="M18 17V9" /><path d="M13 17V5" /><path d="M8 17v-3" /></svg></span>
<h3 class="fg-title">Live reports</h3>
<p class="fg-text">Progress, velocity and workload charts update in real time, ready to share with stakeholders.</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.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" /></svg></span>
<h3 class="fg-title">100+ integrations</h3>
<p class="fg-text">Connect GitHub, Slack, Figma and the rest of your stack in a couple of clicks.</p>
<a class="fg-link" href="https://webdevpuneet.com/integrations"><span>See integrations</span> <span aria-hidden="true">→</span></a>
</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="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" /><path d="m9 12 2 2 4-4" /></svg></span>
<h3 class="fg-title">Secure by default</h3>
<p class="fg-text">SSO, audit logs and encryption at rest and in transit on every plan.</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="M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3" /></svg></span>
<h3 class="fg-title">Human support</h3>
<p class="fg-text">Real people answer within hours, with onboarding help for every new team.</p>
</article>
</div>
</div>
</section>
<section id="features-2" class="st st-features-alternating" data-uid="smvnkxd420913">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">How it helps</p>
<h2 class="st-h2" data-anim="item" data-anim-text>From messy backlog to <span class="hl">shipped</span>, in one place</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">Plan</span>
<h3 class="fa-title">Boards that keep <span class="hl">everyone aligned</span></h3>
<p class="fa-text">Turn ideas into scoped work with boards, owners and due dates your whole team can see.</p>
<ul class="fa-bullets"><li>Drag-and-drop kanban and list views</li><li>Owners, estimates and due dates</li><li>Templates for sprints and launches</li></ul>
<a class="fa-link" href="https://webdevpuneet.com/planning"><span>Explore planning</span> <span aria-hidden="true">→</span></a>
</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="Kanban board with tasks in three columns"></div>
</div>
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Automate</span>
<h3 class="fa-title">Let the busywork <span class="hl">run itself</span></h3>
<p class="fa-text">Build automations visually: when something changes, the right people are told and the next step starts.</p>
<ul class="fa-bullets"><li>Triggers for status, dates and fields</li><li>Slack, email and webhook actions</li><li>Run history for every rule</li></ul>
<a class="fa-link" href="https://webdevpuneet.com/automations"><span>See automations</span> <span aria-hidden="true">→</span></a>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-automation.png" alt="Workflow canvas with connected automation steps"></div>
</div>
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Report</span>
<h3 class="fa-title">Progress reports that <span class="hl">write themselves</span></h3>
<p class="fa-text">Live dashboards and weekly summaries built from the work itself, ready to share with stakeholders.</p>
<ul class="fa-bullets"><li>Velocity, burndown and workload charts</li><li>Scheduled reports by email</li><li>Share links with view-only access</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="Analytics dashboard with a rising line chart"></div>
</div>
</div>
</div>
</section>
<section id="gallery" class="st st-video-section" data-uid="smvnkxd42isi1">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Product tour</p>
<h2 class="st-h2" data-anim="item" data-anim-text>See Acme in <span class="hl">two minutes</span></h2>
<p class="st-lead" data-anim="item">A quick walk through the roadmap, the task board and the weekly report, using a real team’s workspace.</p>
</header>
<div class="vs-box" data-anim="media" data-video-box data-title="Acme product tour: roadmaps, tasks and reports">
<img class="vs-poster" width="1280" height="720" loading="lazy" src="https://webdevpuneet.com/images/section-templates/hero-dashboard.png" alt="The Acme workspace showing a roadmap and a task board">
<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 product tour">
<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 product tour</span><span class="vs-dur">2:05</span></span>
</a>
</div>
<ul class="vs-points">
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">One workspace</h3>
<p class="vs-point-text">Roadmap, tasks and reports live together, so nothing is copied between tools.</p>
</li>
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">Ready in minutes</h3>
<p class="vs-point-text">Import from a spreadsheet or another tool and invite your team the same day.</p>
</li>
<li class="vs-point" data-anim="item">
<h3 class="vs-point-title">Reports that write themselves</h3>
<p class="vs-point-text">Every Friday a summary of what shipped and what slipped is ready to send.</p>
</li>
</ul>
</div>
</section>
<section id="customers" class="st st-testimonials-grid" data-uid="smvnkxd42u0iy">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Wall of love</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Loved by <span class="hl">teams everywhere</span></h2>
<p class="tg-summary" data-anim="item">★ 4.9 out of 5 from 2,300+ reviews</p>
</header>
<div class="tg-wall">
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>We moved four tools into one and our weekly status meeting went from an hour to fifteen minutes. The reports alone paid for it.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div><p class="st-person-name">Maya Chen</p><p class="st-person-role">Head of Product, Northwind</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Setup took one afternoon.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
<div><p class="st-person-name">Daniel Okafor</p><p class="st-person-role">CTO, Brightpath</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>The automations are the real magic. New requests get triaged, assigned and announced in Slack without anyone touching them. I honestly don’t know how we worked before.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div><p class="st-person-name">Sofia Martins</p><p class="st-person-role">Engineering Manager, Lumen</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Clean, fast and our designers actually enjoy using it. That has never happened with a project tool.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div><p class="st-person-name">James Patel</p><p class="st-person-role">Design Lead, Fieldnote</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>Support answered in under an hour, on a Sunday.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-5.jpg" alt="">
<div><p class="st-person-name">Emma Larsen</p><p class="st-person-role">Founder, Tidewater</p></div>
</div></figcaption>
</figure>
<figure class="tg-card" data-anim="item">
<p class="st-stars" role="img" aria-label="Rated 5 out of 5"><span aria-hidden="true">★★★★★</span></p>
<blockquote class="tg-quote"><p>We onboarded 80 people in a week. The templates meant every team started with a sensible setup instead of a blank page.</p></blockquote>
<figcaption><div class="st-person">
<img class="st-avatar" width="96" height="96" loading="lazy" src="https://webdevpuneet.com/images/section-templates/avatar-6.jpg" alt="">
<div><p class="st-person-name">Aisha Bello</p><p class="st-person-role">Operations Director, Kestrel</p></div>
</div></figcaption>
</figure>
</div>
</div>
</section>
<section id="pricing" class="st st-pricing-three-tier" data-uid="smvnkxd42sn5v">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Pricing</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Simple pricing that <span class="hl">grows with you</span></h2>
<p class="st-lead" data-anim="item">Start free, upgrade when your team is ready. Every plan includes unlimited projects and our core features.</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>
</header>
<div class="p3-grid">
<article class="p3-card" data-anim="item">
<h3 class="p3-name">Starter</h3>
<p class="p3-desc">For individuals and small side projects.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">$0</b><span class="p3-per">free forever</span></span>
<span class="st-py"><b class="p3-amt">$0</b><span class="p3-per">free forever</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Start for free</span></a>
<ul class="st-checks p3-list"><li>Up to 3 members</li><li>5 active projects</li><li>Boards and lists</li><li>Community support</li></ul>
</article>
<article class="p3-card" data-anim="item">
<span class="p3-badge">Most popular</span>
<h3 class="p3-name">Pro</h3>
<p class="p3-desc">For growing teams that ship every week.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">$24</b><span class="p3-per">/month</span></span>
<span class="st-py"><b class="p3-amt">$19</b><span class="p3-per">/month, billed yearly</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Start free trial</span></a>
<ul class="st-checks p3-list"><li>Unlimited members</li><li>Unlimited projects</li><li>Automations and reports</li><li>Integrations with Slack and GitHub</li><li>Priority email support</li></ul>
</article>
<article class="p3-card" data-anim="item">
<h3 class="p3-name">Business</h3>
<p class="p3-desc">For larger teams that need control.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">$49</b><span class="p3-per">/month</span></span>
<span class="st-py"><b class="p3-amt">$39</b><span class="p3-per">/month, billed yearly</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/contact"><span>Contact sales</span></a>
<ul class="st-checks p3-list"><li>Everything in Pro</li><li>SSO and SCIM</li><li>Advanced permissions</li><li>Audit log</li><li>Dedicated success manager</li></ul>
</article>
</div>
<p class="p3-note" data-anim="item">All paid plans include a 14-day free trial. Prices in USD, taxes may apply.</p>
</div>
</section>
<section id="pricing-2" class="st st-pricing-comparison" data-uid="smvnkxd42i6k6">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Compare plans</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Everything in <span class="hl">every Acme plan</span></h2>
<p class="st-lead" data-anim="item">Compare what each plan includes, from projects and people to support and security.</p>
</header>
<div class="pc-scroll" data-anim="media" tabindex="0" role="region" aria-label="Plan comparison table">
<div class="pc-table" role="table">
<div class="pc-head" role="row">
<div class="pc-corner" role="columnheader">Features</div>
<ul class="pc-plans">
<li class="pc-plan" role="columnheader" data-badge="">
<span class="pc-name">Starter</span>
<span class="pc-price"><strong>$0</strong><span class="pc-per">free forever</span></span>
<a class="st-btn pc-btn" href="#get-started"><span>Start free</span></a>
</li>
<li class="pc-plan" role="columnheader" data-badge="Most popular">
<span class="pc-badge">Most popular</span>
<span class="pc-name">Pro</span>
<span class="pc-price"><strong>$19</strong><span class="pc-per">/month</span></span>
<a class="st-btn pc-btn" href="#get-started"><span>Start Pro trial</span></a>
</li>
<li class="pc-plan" role="columnheader" data-badge="">
<span class="pc-name">Business</span>
<span class="pc-price"><strong>$49</strong><span class="pc-per">/month</span></span>
<a class="st-btn pc-btn" href="#contact"><span>Talk to sales</span></a>
</li>
</ul>
</div>
<ul class="pc-body">
<li class="pc-row" role="row" data-group="Core">
<span class="pc-group" role="rowheader">Core</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Projects</span>
<span class="pc-cell" role="cell">3</span>
<span class="pc-cell" role="cell">Unlimited</span>
<span class="pc-cell" role="cell">Unlimited</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Team members</span>
<span class="pc-cell" role="cell">1</span>
<span class="pc-cell" role="cell">10</span>
<span class="pc-cell" role="cell">Unlimited</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Storage</span>
<span class="pc-cell" role="cell">1 GB</span>
<span class="pc-cell" role="cell">100 GB</span>
<span class="pc-cell" role="cell">1 TB</span>
</li>
<li class="pc-row" role="row" data-group="Features">
<span class="pc-group" role="rowheader">Features</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Custom domain</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">✓</span>
<span class="pc-cell" role="cell">✓</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Analytics</span>
<span class="pc-cell" role="cell">Basic</span>
<span class="pc-cell" role="cell">Advanced</span>
<span class="pc-cell" role="cell">Advanced + export</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">API access</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">✓</span>
<span class="pc-cell" role="cell">✓</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Single sign-on (SSO)</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">✓</span>
</li>
<li class="pc-row" role="row" data-group="Support">
<span class="pc-group" role="rowheader">Support</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Email support</span>
<span class="pc-cell" role="cell">✓</span>
<span class="pc-cell" role="cell">✓</span>
<span class="pc-cell" role="cell">✓</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Priority support</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">✓</span>
<span class="pc-cell" role="cell">✓</span>
</li>
<li class="pc-row" role="row" data-group="">
<span class="pc-feature" role="rowheader">Dedicated manager</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">—</span>
<span class="pc-cell" role="cell">✓</span>
</li>
</ul>
</div>
</div>
<p class="st-form-note pc-note">Prices are per month, billed yearly. Cancel any time.</p>
</div>
</section>
<section id="faq" class="st st-faq-accordion" data-uid="smvnkxd42q6yh">
<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? <span class="hl">We’ve got answers</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>Is there a free plan?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. The Starter plan is free forever for up to three people, with no credit card required. Upgrade any time when your team grows.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Can I change plans later?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Of course. Upgrade or downgrade from your billing settings at any time. Changes apply immediately and we prorate the difference.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>How does the free trial work?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Paid plans include a 14-day free trial with every feature unlocked. If you don’t add a payment method, your workspace simply moves to the free plan.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Can I import from another tool?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. One-click importers bring in projects, tasks and comments from the most popular tools, and a CSV import covers everything else.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Is my data secure?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Your data is encrypted in transit and at rest, backed up daily and hosted in SOC 2 certified data centres. Business plans add SSO and audit logs.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Do you offer discounts for non-profits?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. Registered non-profits and schools get 50% off any paid plan. Contact us with proof of status to apply.</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 id="get-started" class="st st-cta-gradient-banner" data-uid="smvnkxd42soe7">
<div class="st-wrap">
<div class="cb" data-spotlight data-anim="media">
<h2 class="st-h2 cb-title" data-anim="item" data-anim-text>Ready to ship your best work yet?</h2>
<p class="cb-lead" data-anim="item">Join 12,000+ teams who plan, build and launch faster. Set up in minutes, free for small teams.</p>
<div class="st-btns cb-btns" data-anim="item">
<a class="st-btn" data-magnetic href="https://webdevpuneet.com/signup"><span>Start for free</span></a>
<a class="st-btn st-btn--ghost" data-magnetic href="https://webdevpuneet.com/contact"><span>Talk to sales</span></a>
</div>
<p class="cb-note" data-anim="item">No credit card required · Cancel any time</p>
</div>
</div>
</section>
<section class="st st-popup-modal" data-uid="smvnkxd422bfn">
<div class="pu" data-pu data-trigger="exit" data-delay="8" data-scroll="50" data-days="7" data-pos="center" data-layout="left" data-autoplay="0" data-pu-id="hrcwe3">
<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/hero-dashboard.png" alt="The Acme roadmap view">
</div>
<div class="pu-body">
<p class="st-eyebrow">Before you go</p>
<h2 class="pu-h" id="pu-heading">Get the free <span class="hl">quarterly roadmap template</span></h2>
<p class="pu-lead">Plan your next quarter in minutes. We will email the template and a short guide to using it.</p>
<form class="pu-form" data-form method="post" action="https://webdevpuneet.com/subscribe">
<div class="pu-row" data-form-fields>
<input class="pu-input" type="email" required autocomplete="email" name="email" placeholder="you@example.com" aria-label="you@example.com">
<button class="st-btn pu-btn" type="submit"><span>Send me the template</span></button>
</div>
<p class="pu-note" data-form-fields>We respect your inbox.</p>
<p class="pu-ok" data-form-success hidden tabindex="-1" role="status">Thanks! The template is on its way.</p>
<p class="pu-err" data-form-error hidden role="alert">Something went wrong. Please try again.</p>
</form>
<button type="button" class="pu-no" data-pu-close><span>No thanks</span></button>
</div>
</div>
</div>
</section>
<section class="st st-footer-columns" data-uid="smvnkxd42r47w">
<footer class="st-wrap fo">
<div class="fo-top">
<div class="fo-brand" 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="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z" /><path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65" /><path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65" /></svg></span><span>Acme</span></span>
</a>
<p class="fo-tagline">The calm workspace for planning, building and shipping great products.</p>
<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>
<li><a class="st-social" href="https://www.youtube.com/" aria-label="YouTube"><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="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" /><path d="m10 15 5-3-5-3z" /></svg></span></a></li>
</ul></div>
</div>
<div class="fo-cols">
<nav class="fo-col" data-anim="item" aria-label="Product">
<h2 class="fo-col-title">Product</h2>
<ul class="fo-links"><li><a href="/features/">Features</a></li><li><a href="/pricing/">Pricing</a></li><li><a href="/integrations/">Integrations</a></li><li><a href="/changelog/">Changelog</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Company">
<h2 class="fo-col-title">Company</h2>
<ul class="fo-links"><li><a href="/about/">About</a></li><li><a href="/careers/">Careers</a></li><li><a href="/customers/">Customers</a></li><li><a href="/contact/">Contact</a></li></ul>
</nav>
<nav class="fo-col" data-anim="item" aria-label="Resources">
<h2 class="fo-col-title">Resources</h2>
<ul class="fo-links"><li><a href="/blog/">Blog</a></li><li><a href="/guides/">Guides</a></li><li><a href="/help/">Help centre</a></li><li><a href="https://status.webdevpuneet.com">Status</a></li></ul>
</nav>
</div>
</div>
<div class="fo-bottom">
<p class="fo-copy">© 2026 Acme Inc. All rights reserved.</p>
<ul class="fo-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/terms/">Terms</a></li><li><a href="/cookies/">Cookies</a></li></ul>
<a class="fo-totop" href="#" data-totop><span>Back to top</span> <span aria-hidden="true">↑</span></a>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#ffffff}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#4f46e5;--st-btn-text:#ffffff;--st-bg:#ffffff;--st-surface:#f4f4f8;--st-text:#0f172a;--st-muted:#475569;--st-radius:14;--st-max:1200;--st-font-heading:"Plus Jakarta Sans", sans-serif;--st-font-body:"Inter", 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}}
/* Scrolling Logo Cloud */
.st-logo-cloud{padding:clamp(40px,5cqi,64px) 0}
.st-logo{display:flex;align-items:center;justify-content:center;flex:none}
.st-logo-img{height:30px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .3s ease,opacity .3s ease}
.st-logo:hover .st-logo-img{filter:none;opacity:1}
.st-logo-mark{display:inline-flex;align-items:center;gap:8px;color:var(--st-muted);font:800 21px/1 var(--st-font-heading);letter-spacing:-.03em;white-space:nowrap;opacity:.8;transition:color .3s ease,opacity .3s ease}
.st-logo:hover .st-logo-mark{color:var(--st-text);opacity:1}
.st-logo-icon svg{width:24px;height:24px;display:block}
.lc-title{text-align:center;color:var(--st-muted);font-size:15px;font-weight:600;margin-bottom:28px}
.lc-title .hl{font-weight:800}
.lc-row{overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lc-row::-webkit-scrollbar{display:none}
.lc-row.is-looping{overflow:hidden}
.lc-row:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:-3px}
.lc-track{list-style:none;display:flex;align-items:center;gap:clamp(40px,5cqi,72px);padding-right:clamp(40px,5cqi,72px);width:max-content}
.lc-row:not(.is-looping) .lc-track{padding-left:var(--st-pad)}
/* 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}}
/* 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}}
/* 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}}
/* Testimonial Wall */
.st-testimonials-grid{padding:clamp(64px,8cqi,112px) 0}
.st-stars{color:#f59e0b;font-size:16px;letter-spacing:2px;line-height:1}
.st-person{display:flex;align-items:center;gap:12px}
.st-avatar{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:var(--st-surface)}
.st-person-name{font-weight:700;font-size:15.5px;line-height:1.3}
.st-person-role{color:var(--st-muted);font-size:14px;line-height:1.4}
.st-person-role:empty{display:none}
.tg-summary{padding:6px 14px;border-radius:999px;background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent);color:var(--st-muted);font-size:14.5px;font-weight:600}
.tg-summary:empty{display:none}
.tg-wall{columns:3 300px;column-gap:clamp(16px,2cqi,22px)}
.tg-card{break-inside:avoid;display:flex;flex-direction:column;gap:16px;margin:0 0 clamp(16px,2cqi,22px);padding:clamp(22px,2.4cqi,28px);border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 7%,transparent);box-shadow:0 10px 30px -22px color-mix(in srgb,var(--st-text) 40%,transparent)}
.tg-quote{font-size:16.5px;line-height:1.65}
.tg-card:nth-child(3n+2){background:color-mix(in srgb,var(--st-brand) 6%,var(--st-surface))}
/* Three-Tier Pricing */
.st-pricing-three-tier{padding:clamp(64px,8cqi,112px) 0}
.st-pricing-three-tier .st-billing{margin-top:10px}
.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}
.p3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2cqi,24px);align-items:stretch}
.p3-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(26px,2.6cqi,34px);border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-surface);border:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.p3-card:has(.p3-badge){background:var(--st-bg);border:2px solid var(--st-brand);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--st-brand) 55%,transparent)}
.p3-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px;background:var(--st-brand);color:var(--st-btn-text);font-size:12.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.p3-name{font-size:21px;letter-spacing:-.01em}
.p3-desc{color:var(--st-muted);font-size:15.5px;min-height:3.2em}
.p3-price{min-height:64px;display:flex;align-items:flex-end;margin:6px 0 4px}
.p3-amt{font:800 clamp(40px,3cqi + 18px,52px)/1 var(--st-font-heading);letter-spacing:-.03em}
.p3-per{color:var(--st-muted);font-size:14.5px}
.p3-card .st-btn{width:100%}
.p3-card:not(:has(.p3-badge)) .st-btn{background:transparent;color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 22%,transparent)}
.p3-card:not(:has(.p3-badge)) .st-btn:hover{box-shadow:none;border-color:var(--st-text)}
.p3-list{margin-top:10px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.p3-note{margin-top:clamp(28px,3cqi,40px);text-align:center;color:var(--st-muted);font-size:14.5px}
@container st (max-width:640px){.p3-grid{grid-template-columns:1fr}.p3-card:has(.p3-badge){margin-top:8px}}
/* Pricing Comparison Table */
.st-pricing-comparison{padding:clamp(56px,7cqi,104px) 0}
.pc-scroll{overflow-x:auto;border-radius:calc(var(--st-radius) * 1.2px);border:1px solid color-mix(in srgb,var(--st-text) 9%,transparent);background:var(--st-bg)}
.pc-scroll:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 55%,transparent);outline-offset:3px}
.pc-table{min-width:720px}
.pc-head,.pc-row{display:grid;grid-template-columns:minmax(200px,1.3fr) 3fr;align-items:stretch}
.pc-plans,.pc-row-cells{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}
.pc-corner{display:flex;align-items:flex-end;padding:22px 24px;font-weight:700;color:var(--st-muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase;position:sticky;left:0;background:var(--st-bg)}
.pc-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 18px 24px;text-align:center;border-left:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.pc-plan[data-badge]:not([data-badge=""]){background:color-mix(in srgb,var(--st-brand) 7%,var(--st-bg));box-shadow:inset 0 3px 0 var(--st-brand)}
.pc-badge{position:absolute;top:-1px;left:50%;transform:translateX(-50%);padding:4px 12px;border-radius:0 0 10px 10px;background:var(--st-brand);color:var(--st-btn-text);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.pc-name{font:800 20px/1.2 var(--st-font-heading);letter-spacing:-.02em}
.pc-price{display:flex;align-items:baseline;gap:6px}
.pc-price strong{font:800 32px/1 var(--st-font-heading);letter-spacing:-.03em}
.pc-per{color:var(--st-muted);font-size:14px}
.pc-btn{margin-top:6px;min-height:44px;padding:0 20px;font-size:15px}
.pc-body{list-style:none}
.pc-row{border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.pc-row .pc-feature{padding:15px 24px;font-weight:600;font-size:15.5px;position:sticky;left:0;background:var(--st-bg)}
.pc-row{grid-template-columns:minmax(200px,1.3fr) repeat(3,minmax(0,1fr))}
.pc-head{grid-template-columns:minmax(200px,1.3fr) 3fr}
.pc-cell{display:flex;align-items:center;justify-content:center;padding:15px 12px;color:var(--st-muted);font-size:15.5px;text-align:center;border-left:1px solid color-mix(in srgb,var(--st-text) 6%,transparent)}
.pc-row:hover .pc-cell,.pc-row:hover .pc-feature{background:color-mix(in srgb,var(--st-text) 3%,var(--st-bg))}
.pc-row[data-group]:not([data-group=""]){display:block;background:var(--st-surface)}
.pc-group{display:block;padding:13px 24px;font:800 13px/1 var(--st-font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--st-brand)}
.pc-note{margin-top:16px;text-align:center}
.pc-note:empty{display:none}
/* 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}
/* Gradient CTA Banner */
.st-cta-gradient-banner{padding:clamp(48px,7cqi,96px) 0}
.cb{--mx:50%;--my:30%;position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(48px,7cqi,96px) clamp(24px,5cqi,72px);text-align:center;border-radius:calc(var(--st-radius) * 1px);color:#fff;background:linear-gradient(135deg,var(--st-brand),color-mix(in srgb,var(--st-brand) 55%,#0f172a));box-shadow:0 40px 80px -40px color-mix(in srgb,var(--st-brand) 70%,transparent)}
.cb::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.28),transparent 60%)}
.cb::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.cb .hl{color:color-mix(in srgb,#fff 72%,var(--st-brand))}
.cb .cb-title{color:#fff;max-width:18em;font-size:clamp(32px,3.2cqi + 14px,54px)}
.cb-lead{max-width:36em;font-size:clamp(17px,1cqi + 13px,20px);color:rgba(255,255,255,.85)}
.cb-btns{justify-content:center;margin-top:8px}
.cb .st-btn{background:#fff;border-color:#fff;color:var(--st-brand)}
.cb .st-btn:hover{box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cb .st-btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);color:#fff}
.cb .st-btn--ghost:hover{border-color:#fff;box-shadow:none}
.cb-note{font-size:14px;color:rgba(255,255,255,.72)}
/* 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}}
/* Multi-Column Footer */
.st-footer-columns{padding:clamp(56px,7cqi,88px) 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}
.fo-top{display:grid;grid-template-columns:minmax(220px,1.1fr) 2fr;gap:clamp(36px,5cqi,80px)}
.fo-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fo-tagline{color:var(--st-muted);font-size:15.5px;max-width:24em}
.fo-tagline:empty{display:none}
.fo-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:28px}
.fo-col-title{font:700 14px/1.2 var(--st-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--st-text);margin-bottom:16px}
.fo-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.fo-links a,.fo-legal a{color:var(--st-muted);font-size:15px;text-decoration:none;transition:color .2s ease}
.fo-links a:hover,.fo-legal a:hover{color:var(--st-brand)}
.fo-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(40px,5cqi,64px);padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 8%,transparent)}
.fo-copy{color:var(--st-muted);font-size:14px;margin-right:auto}
.fo-legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.fo-legal a{font-size:14px}
.fo-totop{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--st-text) 6%,transparent);color:var(--st-text);font-size:14px;font-weight:600;text-decoration:none}
.fo-totop:hover{background:var(--st-brand);color:var(--st-btn-text)}
@container st (max-width:820px){.fo-top{grid-template-columns:1fr}}
@container st (max-width:520px){.fo-cols{grid-template-columns:1fr 1fr}.fo-copy{margin-right:0;flex-basis:100%}}
(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 G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!G || reduce || window.ST_STILL) return;
document.querySelectorAll('.st [data-marquee]').forEach(function (track) {
var items = Array.prototype.slice.call(track.children);
if (!items.length) return;
items.forEach(function (el) {
var c = el.cloneNode(true);
c.setAttribute('aria-hidden', 'true');
c.querySelectorAll('a, button').forEach(function (a) { a.setAttribute('tabindex', '-1'); });
track.appendChild(c);
});
track.parentElement.classList.add('is-looping');
var rev = track.getAttribute('data-marquee') === 'reverse';
var speed = parseFloat(track.getAttribute('data-speed')) || 40; // pixels per second
var tween = G.fromTo(track, { xPercent: rev ? -50 : 0 }, { xPercent: rev ? 0 : -50, ease: 'none', repeat: -1, duration: (track.scrollWidth / 2) / speed });
var slow = function (to) { G.to(tween, { timeScale: to, duration: 0.6, ease: 'power2.out', overwrite: true }); };
var row = track.parentElement;
row.addEventListener('mouseenter', function () { slow(0); });
row.addEventListener('mouseleave', function () { slow(1); });
row.addEventListener('focusin', function () { slow(0); });
row.addEventListener('focusout', function () { slow(1); });
});
})();
(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 G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st [data-spotlight]').forEach(function (el) {
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
G.to(el, { '--mx': ((e.clientX - r.left) / r.width * 100) + '%', '--my': ((e.clientY - r.top) / r.height * 100) + '%', duration: 0.6, ease: 'power3.out', overwrite: 'auto' });
});
el.addEventListener('pointerleave', function () {
G.to(el, { '--mx': '50%', '--my': '50%', duration: 1, ease: 'power3.out', overwrite: 'auto' });
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
if (!G || reduce || !fine) return;
document.querySelectorAll('.st [data-magnetic]').forEach(function (el) {
var x = G.quickTo(el, 'x', { duration: 0.5, ease: 'power3.out' });
var y = G.quickTo(el, 'y', { duration: 0.5, ease: 'power3.out' });
el.addEventListener('pointermove', function (e) {
var r = el.getBoundingClientRect();
x((e.clientX - r.left - r.width / 2) * 0.3);
y((e.clientY - r.top - r.height / 2) * 0.4);
});
el.addEventListener('pointerleave', function () { x(0); y(0); });
});
})();
(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 () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
document.querySelectorAll('.st [data-totop]').forEach(function (a) {
a.addEventListener('click', function (e) {
e.preventDefault();
if (G && window.ScrollToPlugin && !reduce) G.to(window, { scrollTo: 0, duration: 1, ease: 'power3.inOut' });
else window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
});
});
})();
(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();
})();