Event & Conference Website HTML Template — Free Snippet
Event & Conference Website template · 10 website sections · Plain HTML, CSS & JS · Customise it in the Website Builder
CategoryLanding Pages
What's included
Features
10 ready-made website sections assembled into one finished event & conference website page: Navbar With Announcement Bar, Image Background Hero, Alternating Feature Rows, Team Carousel, Three-Tier Pricing, Scrolling Logo Cloud, FAQ Accordion, Popup & Promo Modal, Floating Social Share Bar, Big Wordmark 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 6-page website in the builder, sharing one navbar, footer and theme
Plain HTML, CSS and JavaScript: copy the code here or export it to React, Vue, Angular or Tailwind
About this UI Snippet
A Conference Website That Sells Tickets: Date, Speakers, Schedule and Three Ticket Tiers
An event page has a deadline and a capacity, so it needs to create a decision. The announcement bar and hero put the date, city and one button in front of the visitor straight away. The alternating feature blocks give reasons to attend, built around what attendees will take home, the speaker carousel gives the draw (people choose events for who is on stage), and the ticket tiers with a highlighted default plan make the choice easy, with the early-bird price creating urgency.
The page covers the practicalities too: a sponsor logo cloud shows who backs the event, the FAQ handles travel, refunds and accessibility, a promo popup can announce a speaker or a price change and a share bar makes it easy to pass the link to a colleague, which is how most conference tickets get bought.
Replace the sample event with yours, ideally with real speaker photos. It is the layout of the Event & Conference Website template; open it in the Website Builder to edit and export.
Built from website section templates
The 10 Sections Behind This Event & Conference Website Page
This page is not one big block of code: it is stacked from ready-made sections in the free Website Section Templates library, in this order. Open any of them to edit it on its own, or start with the whole page.
- Navbar With Announcement Bara bar announcing the date and early-bird deadline, creating the urgency an event needs
- Image Background Heroa stage photograph with the date, city and a Get tickets button
- Alternating Feature Rowsreasons to attend, framed as what an attendee takes home, in alternating rows
- Team Carouselthe speakers in a draggable carousel, because people choose events for who is on stage
- Three-Tier Pricingticket tiers with a highlighted default and an early-bird price
- Scrolling Logo Cloudsponsor logos that show who backs the event and add credibility
- FAQ Accordiontravel, refunds, accessibility and group discounts answered up front
- Popup & Promo Modala promo popup for a new speaker or a price change, easy to remove after
- Floating Social Share Bara floating share bar so attendees can pass the link to a colleague, how most tickets get bought
- Big Wordmark Footera giant wordmark footer that repeats the event name, date and a last ticket link
Step by step
How to Use
- 1Open the template in the Website BuilderPress "Start using this template" to open the Event & Conference Website in the Website Builder. Everything is edited with forms in a side panel; no code is needed.
- 2Set the date, city and early-bird deadlineEdit the announcement bar and hero with the real date and venue, and add the deadline for the cheapest tickets so there is a reason to buy now.
- 3Add real speakers with photos and talk titlesFill the carousel with each speaker's photo, role and talk title; a named talk is more persuasive than a name alone.
- 4Link the ticket buttons to your checkoutPoint each tier at your ticketing provider (Eventbrite, Tito or Stripe), and keep the highlighted plan as the one you want most attendees to buy.
- 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
Conferences, summits and meetups
Sell tickets and publish the programme from a page with the date, speakers and tiers up front.
Festivals and workshops
Swap speakers for artists or instructors and tiers for day passes.
Learn a draggable carousel and share bar
See how a drag-to-scroll carousel and a floating share bar work in plain JavaScript.
Got questions?
Frequently Asked Questions
The date and place, why to attend, speakers, a schedule, ticket options, sponsors and answers on travel and refunds.
Use an early-bird price with a real deadline in the announcement bar and ticket section, and update the page when the price changes.
Yes. Add a schedule section from the Website Section Templates library, or list sessions inside the feature rows.
It is assembled from 10 templates in the free Website Section Templates library: Navbar With Announcement Bar, Image Background Hero, Alternating Feature Rows, Team Carousel, Three-Tier Pricing, Scrolling Logo Cloud, FAQ Accordion, Popup & Promo Modal, Floating Social Share Bar, Big Wordmark 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-announcement" data-uid="smvnkxdbtb2e7">
<div class="na-bar" data-dismissable>
<p class="st-wrap na-bar-in"><span>🎟️ Early-bird tickets end 30 September</span> <a class="na-bar-link" href="#pricing"><span>Save 40%</span> <span aria-hidden="true">→</span></a></p>
<button type="button" class="na-close" data-dismiss aria-label="Dismiss announcement"><span aria-hidden="true">×</span></button>
</div>
<header class="st-wrap na">
<div class="na-left">
<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"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg></span><span>FRONTEND/26</span></span>
</a>
<nav class="na-nav" data-menu aria-label="Main">
<ul class="na-links">
<li data-menu-item><a class="na-link" href="#team"><span>Speakers</span></a></li>
<li data-menu-item><a class="na-link" href="#features"><span>Schedule</span></a></li>
<li data-menu-item><a class="na-link" href="#pricing"><span>Tickets</span></a></li>
<li data-menu-item><a class="na-link" href="#faq"><span>FAQ</span></a></li>
</ul>
<div class="na-actions na-actions--menu" data-menu-item>
<a class="st-btn" href="#pricing"><span>Get tickets</span></a>
</div>
</nav>
</div>
<div class="na-actions na-actions--bar">
<a class="st-btn" href="#pricing"><span>Get tickets</span></a>
</div>
<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-image-background-hero" data-uid="smvnkxdbu3pkn">
<div class="ib-bg" role="img" aria-label="Background photo" style="background-image:url('https://webdevpuneet.com/images/section-templates/tpl-event.jpg')"></div>
<div class="ib-shade" aria-hidden="true"></div>
<div class="ib st-wrap">
<div class="ib-copy">
<span class="st-eyebrow ib-eyebrow" data-anim="item">14–15 May 2026 · Amsterdam</span>
<h1 class="ib-title" data-anim="item" data-anim-text>Two days of <span class="hl">the future of the web</span></h1>
<p class="st-lead ib-lead" data-anim="item">Talks, workshops and parties with the people building the next generation of the web.</p>
<div class="st-btns" data-anim="item">
<a class="st-btn" href="#pricing"><span>Get your ticket</span></a>
<a class="st-btn st-btn--ghost ib-ghost" href="#team"><span>See speakers</span></a>
</div>
</div>
<div class="ib-stats" data-anim="media">
<div><strong>40</strong><span>speakers</span></div>
<div><strong>1,500</strong><span>attendees</span></div>
<div><strong>2</strong><span>days</span></div>
</div>
</div>
</section>
<section id="features" class="st st-features-alternating" data-uid="smvnkxdbu5njs">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Schedule</p>
<h2 class="st-h2" data-anim="item" data-anim-text>What’s <span class="hl">on stage</span></h2>
<p class="st-lead" data-anim="item"></p>
</header>
<div class="fa-rows">
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Day 1</span>
<h3 class="fa-title">Talks & <span class="hl">keynotes</span></h3>
<p class="fa-text">Twenty talks on performance, design systems, AI and the browser platform.</p>
<ul class="fa-bullets"><li>Opening keynote</li><li>3 talk tracks</li><li>Evening party</li></ul>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="Conference stage"></div>
</div>
<div class="fa-row">
<div class="fa-copy" data-anim="item">
<span class="st-pill fa-label">Day 2</span>
<h3 class="fa-title">Hands-on <span class="hl">workshops</span></h3>
<p class="fa-text">Small-group workshops with the speakers, from CSS to GSAP animation.</p>
<ul class="fa-bullets"><li>12 workshops</li><li>Max 25 people each</li><li>Lunch included</li></ul>
</div>
<div class="fa-media" data-anim="media"><img width="1200" height="900" loading="lazy" src="https://webdevpuneet.com/images/section-templates/feature-collab.png" alt="Workshop board"></div>
</div>
</div>
</div>
</section>
<section id="team" class="st st-team-carousel" data-uid="smvnkxdbubav3">
<div class="st-wrap">
<div class="tc2-top">
<header class="st-head st-head--left tc2-head">
<p class="st-eyebrow" data-anim="item">Speakers</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Learn from <span class="hl">the best</span></h2>
<p class="st-lead" data-anim="item">Engineers, designers and leaders from the teams behind tools you use every day.</p>
</header>
<div class="tc2-arrows" data-anim="item">
<button type="button" class="tc2-arrow" data-carousel-prev><span class="tc2-sr">Previous people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button>
<button type="button" class="tc2-arrow" data-carousel-next><span class="tc2-sr">Next people</span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button>
</div>
</div>
<ul class="tc2-track" data-carousel tabindex="0" role="region" aria-label="Team">
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-8.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Hana Sato</span></h3>
<p class="tc2-role">Creative Director</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-1.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Marcus Webb</span></h3>
<p class="tc2-role">Technical Lead</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-2.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Zara Ahmed</span></h3>
<p class="tc2-role">Brand Designer</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-7.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Ben Carter</span></h3>
<p class="tc2-role">Strategist</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-3.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Lena Fischer</span></h3>
<p class="tc2-role">Motion Designer</p>
</div>
</li>
<li class="tc2-card" data-anim="item">
<img width="420" height="560" loading="lazy" draggable="false" src="https://webdevpuneet.com/images/section-templates/avatar-4.jpg" alt="">
<div class="tc2-info">
<h3 class="tc2-name"><span>Omar Haddad</span></h3>
<p class="tc2-role">Front-end Developer</p>
</div>
</li>
</ul>
</div>
</section>
<section id="pricing" class="st st-pricing-three-tier" data-uid="smvnkxdbu84mt">
<div class="st-wrap">
<header class="st-head">
<p class="st-eyebrow" data-anim="item">Tickets</p>
<h2 class="st-h2" data-anim="item" data-anim-text>Get your <span class="hl">ticket</span></h2>
<p class="st-lead" data-anim="item">Prices rise as tiers sell out. Group discounts for 5+.</p>
</header>
<div class="p3-grid">
<article class="p3-card" data-anim="item">
<h3 class="p3-name">Conference</h3>
<p class="p3-desc">Day 1 talks and party.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">€399</b><span class="p3-per">early bird</span></span>
<span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">early bird</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Buy ticket</span></a>
<ul class="st-checks p3-list"><li>All talks</li><li>Evening party</li><li>Recordings</li></ul>
</article>
<article class="p3-card" data-anim="item">
<span class="p3-badge">Best value</span>
<h3 class="p3-name">Full pass</h3>
<p class="p3-desc">Talks, workshops and everything else.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">€699</b><span class="p3-per">early bird</span></span>
<span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">early bird</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Buy full pass</span></a>
<ul class="st-checks p3-list"><li>All talks</li><li>2 workshops</li><li>Party and lunch</li><li>Recordings</li></ul>
</article>
<article class="p3-card" data-anim="item">
<h3 class="p3-name">Online</h3>
<p class="p3-desc">Watch live from anywhere.</p>
<p class="p3-price">
<span class="st-pm"><b class="p3-amt">€99</b><span class="p3-per">per person</span></span>
<span class="st-py"><b class="p3-amt">$15</b><span class="p3-per">per person</span></span>
</p>
<a class="st-btn p3-btn" href="https://webdevpuneet.com/signup"><span>Get online pass</span></a>
<ul class="st-checks p3-list"><li>Live stream</li><li>Chat Q&A</li><li>Recordings</li></ul>
</article>
</div>
<p class="p3-note" data-anim="item">All prices exclude VAT. Tickets are transferable.</p>
</div>
</section>
<section class="st st-logo-cloud" data-uid="smvnkxdbuocia">
<div class="st-wrap">
<p class="lc-title" data-anim="item">Proudly supported by <span class="hl">our sponsors</span></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="faq" class="st st-faq-accordion" data-uid="smvnkxdbu5rvt">
<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>Practical <span class="hl">info</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>Where is the venue?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>At the Kromhout Hall in Amsterdam Noord, ten minutes by free ferry from Central Station.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Can I transfer my ticket?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes, free of charge until one week before the event.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Will talks be recorded?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. Every ticket includes access to all recordings after the event.</p></div>
</details>
<details class="st-acc" data-anim="item">
<summary class="st-acc-q"><span>Is there a code of conduct?</span><span class="st-acc-icon" aria-hidden="true"></span></summary>
<div class="st-acc-a"><p>Yes. We’re committed to a safe, welcoming event for everyone; read it on our website.</p></div>
</details>
</div>
<p class="fq-contact" data-anim="item"><span>Still have a question?</span> <a href="mailto:hello@webdevpuneet.com"><span>Talk to our team</span> <span aria-hidden="true">→</span></a></p>
</div>
</section>
<section class="st st-popup-modal" data-uid="smvnkxdbuh10g">
<div class="pu" data-pu data-trigger="delay" data-delay="10" data-scroll="50" data-days="7" data-pos="bottom-right" data-layout="left" data-autoplay="0" data-pu-id="qfowe4">
<div class="pu-backdrop" data-pu-close hidden></div>
<div class="pu-dialog" role="dialog" aria-modal="true" aria-labelledby="pu-heading" tabindex="-1" hidden>
<button type="button" class="pu-x" data-pu-close aria-label="Close popup"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
<div class="pu-media">
<img class="pu-img" loading="lazy" src="https://webdevpuneet.com/images/section-templates/tpl-event.jpg" alt="The main stage at FRONTEND/26">
</div>
<div class="pu-body">
<p class="st-eyebrow">Early bird</p>
<h2 class="pu-h" id="pu-heading">Early-bird tickets end <span class="hl">Friday</span></h2>
<p class="pu-lead">Save 30% on a full conference pass before prices go up.</p>
<div class="pu-ctas">
<a class="st-btn pu-cta" href="#pricing"><span>Get tickets</span></a>
</div>
<button type="button" class="pu-no" data-pu-close><span>No thanks</span></button>
</div>
</div>
</div>
</section>
<section class="st st-floating-social-share" data-uid="smvnkxdbufhqg">
<div class="ss" data-ss data-side="left" data-align="center" style="--ss-top:50%" data-mobile="bar" data-look="network" data-shape="attached" data-size="default" data-tips="on" data-start="open" data-copied="Link copied">
<div class="ss-panel" role="group" aria-label="Share this page">
<ul class="ss-list"><li class="ss-item"><a class="ss-btn" data-net="x" data-share="https://x.com/intent/post?url={url}&text={title}&via={via}&hashtags={tags}" href="https://x.com/intent/post" target="_blank" rel="noopener noreferrer" style="--c:#111111" aria-label="Share on X (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg><span class="ss-tip" aria-hidden="true">X</span></a></li><li class="ss-item"><a class="ss-btn" data-net="linkedin" data-share="https://www.linkedin.com/sharing/share-offsite/?url={url}" href="https://www.linkedin.com/sharing/share-offsite/" target="_blank" rel="noopener noreferrer" style="--c:#0A66C2" aria-label="Share on LinkedIn (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 class="ss-tip" aria-hidden="true">LinkedIn</span></a></li><li class="ss-item"><a class="ss-btn" data-net="whatsapp" data-share="https://wa.me/?text={text}" href="https://wa.me/" target="_blank" rel="noopener noreferrer" style="--c:#128C7E" aria-label="Share on WhatsApp (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21l1.7-5.1A9 9 0 1 1 8.1 19.3z"/><path d="M9 8.5c0 3.300 2.700 6 6 6l1.300-1.500-2.200-1.100-.9.900c-.9-.4-1.700-1.200-2.100-2.100l.9-.9-1.100-2.200z"/></svg><span class="ss-tip" aria-hidden="true">WhatsApp</span></a></li><li class="ss-item"><a class="ss-btn" data-net="facebook" data-share="https://www.facebook.com/sharer/sharer.php?u={url}" href="https://www.facebook.com/sharer/sharer.php" target="_blank" rel="noopener noreferrer" style="--c:#1877F2" aria-label="Share on Facebook (opens in a new tab)"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg><span class="ss-tip" aria-hidden="true">Facebook</span></a></li><li class="ss-item"><button type="button" class="ss-btn" data-net="copy" style="--c:#0F7B3F" aria-label="Copy link"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="13" x="8" y="8" rx="2.500"/><path d="M16 8V6.500A2.500 2.500 0 0 0 13.500 4h-7A2.500 2.500 0 0 0 4 6.500v7A2.500 2.500 0 0 0 6.500 16H8"/></svg><svg class="ss-ic ss-ic--done" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span class="ss-tip" aria-hidden="true">Copy link</span></button></li><li class="ss-item ss-item--hide"><button type="button" class="ss-hide" data-ss-hide aria-expanded="true" aria-label="Hide share buttons"><svg class="ss-ic ss-ic--hide" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg></button></li></ul>
</div>
<button type="button" class="ss-tab" data-ss-show aria-expanded="true" aria-label="Show share buttons"><svg class="ss-ic" viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.600 13.500 6.800 4M15.400 6.500l-6.800 4"/></svg><span class="ss-tab-text" aria-hidden="true">Share</span></button>
<span class="ss-live" role="status" aria-live="polite"></span>
</div>
</section>
<section id="contact" class="st st-footer-giant" data-uid="smvnkxdbu9p13">
<footer class="fgi">
<div class="st-wrap">
<div class="fgi-cta">
<h2 class="st-h2 fgi-title" data-anim="item">See you in <span class="hl">Amsterdam</span></h2>
<div class="fgi-cta-side" data-anim="item">
<a class="st-btn" href="#pricing"><span>Get your ticket</span> <span aria-hidden="true">→</span></a>
<p class="fgi-email">hello@frontend26.dev</p>
</div>
</div>
<div class="fgi-mid" data-anim="item">
<nav aria-label="Footer"><ul class="fgi-links"><li><a href="#team">Speakers</a></li><li><a href="#features">Schedule</a></li><li><a href="#pricing">Tickets</a></li><li><a href="#faq">FAQ</a></li></ul></nav>
<div><ul class="st-socials">
<li><a class="st-social" href="https://www.instagram.com/" aria-label="Instagram"><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"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg></span></a></li>
<li><a class="st-social" href="https://dribbble.com/" aria-label="Dribbble"><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"><circle cx="12" cy="12" r="10" /><path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" /><path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" /><path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" /></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>
</ul></div>
</div>
<p class="fgi-word" data-anim-text aria-hidden="true">FRONTEND/26</p>
<div class="fgi-bottom">
<p>© 2026 Frontend Conference</p>
<ul class="fgi-legal"><li><a href="/privacy/">Privacy</a></li><li><a href="/imprint/">Imprint</a></li></ul>
</div>
</div>
</footer>
</section>@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');
body{margin:0;background:#0f0a1f}
html{scroll-behavior:smooth}section[id]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.st{--st-brand:#e879f9;--st-btn-text:#1a0420;--st-bg:#0f0a1f;--st-surface:#1a1430;--st-text:#f5f3ff;--st-muted:#b7aed1;--st-radius:14;--st-max:1200;--st-font-heading:"Space Grotesk", 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}}
/* Navbar With Announcement Bar */
.st-navbar-announcement{overflow:visible;background:var(--st-bg);border-bottom:1px solid color-mix(in srgb,var(--st-text) 9%,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}
.na-bar{position:relative;overflow:hidden;background:var(--st-brand);color:var(--st-btn-text)}
.na-bar-in{padding-top:10px;padding-bottom:10px;padding-right:56px;text-align:center;font-size:14.5px;font-weight:500}
.na-bar-link{color:var(--st-btn-text);font-weight:800;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.na-close{position:absolute;right:max(8px,calc(var(--st-pad) - 12px));top:50%;transform:translateY(-50%);display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--st-btn-text);font-size:22px;line-height:1;cursor:pointer;opacity:.8}
.na-close:hover{opacity:1;background:color-mix(in srgb,var(--st-btn-text) 14%,transparent)}
.na{position:relative;display:flex;align-items:center;gap:24px;min-height:70px}
.na-left{flex:1;display:flex;align-items:center;gap:clamp(20px,3cqi,40px);min-width:0}
.na-nav{display:flex;align-items:center}
.na-links{list-style:none;display:flex;gap:2px}
.na-link{display:block;padding:8px 12px;color:var(--st-text);font-weight:600;font-size:15px;text-decoration:none;border-radius:calc(var(--st-radius) * 1px)}
.na-link:hover{color:var(--st-brand)}
.na-link[aria-current="page"]{color:var(--st-brand);box-shadow:inset 0 -2px 0 var(--st-brand);border-radius:0}
.na-actions{display:flex;align-items:center;gap:16px}
.na-actions--menu{display:none}
.na-login{color:var(--st-text);font-weight:600;font-size:15px;text-decoration:none}
.na-login:hover{color:var(--st-brand)}
.na .st-btn{min-height:42px;padding:0 20px;font-size:15px}
@container st (max-width:900px){
.na .st-burger{display:inline-block}
.na-actions--bar{display:none}
.na-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.4px);background:var(--st-bg);border:1px solid color-mix(in srgb,var(--st-text) 10%,transparent);box-shadow:0 24px 60px -24px rgba(31,26,23,.4)}
.na-links{flex-direction:column}
.na-link{padding:12px 14px;font-size:16.5px}
.na-actions--menu{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 4px 4px;border-top:1px solid color-mix(in srgb,var(--st-text) 9%,transparent)}
.na-actions--menu .na-login{padding:8px 10px}
.na-actions--menu .st-btn{width:100%;min-height:48px}
.has-menu:not(.menu-open) .na-nav{display:none}
.st:not(.has-menu) .na-left{flex-wrap:wrap;padding:10px 0}
.st:not(.has-menu) .na-nav{position:static;flex-basis:100%;box-shadow:none}
.st:not(.has-menu) .st-burger{display:none}
.na-bar-in{font-size:13.5px;text-align:left}
}
/* Image Background Hero */
.st-image-background-hero{min-height:min(88vh,760px);display:flex;align-items:stretch;background:var(--st-bg)}
.ib-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ib-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--st-bg) 88%,transparent) 0%,color-mix(in srgb,var(--st-bg) 55%,transparent) 55%,color-mix(in srgb,var(--st-bg) 15%,transparent) 100%),linear-gradient(0deg,color-mix(in srgb,var(--st-bg) 70%,transparent),transparent 45%)}
.ib{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(72px,10cqi,140px);padding-bottom:clamp(32px,4cqi,48px)}
.ib-copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:640px}
.ib-eyebrow{color:var(--st-brand)}
.ib-title{font-size:clamp(42px,5.6cqi + 10px,80px);line-height:1.02}
.ib-lead{color:var(--st-muted);max-width:32em}
.ib-ghost{color:var(--st-text);border-color:color-mix(in srgb,var(--st-text) 55%,transparent);backdrop-filter:blur(6px)}
.ib-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--st-text) 22%,transparent)}
.ib-stats div{display:flex;flex-direction:column;gap:2px}
.ib-stats strong{font-family:var(--st-font-heading);font-size:clamp(26px,2.6cqi + 8px,38px);line-height:1.1;color:var(--st-text)}
.ib-stats span{font-size:14px;color:var(--st-muted)}
@container st (max-width:640px){.ib-stats{grid-template-columns:1fr}.ib-shade{background:color-mix(in srgb,var(--st-bg) 72%,transparent)}}
/* 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}}
/* Team Carousel */
.st-team-carousel{padding:clamp(64px,8cqi,112px) 0}
.tc2-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.4cqi,44px)}
.tc2-head{margin:0}
.tc2-arrows{display:flex;gap:10px;flex:none}
.tc2-arrow{position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;border:1px solid color-mix(in srgb,var(--st-text) 18%,transparent);background:none;color:var(--st-text);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease}
.tc2-arrow:hover:not(:disabled){background:var(--st-brand);border-color:var(--st-brand);color:var(--st-btn-text)}
.tc2-arrow:disabled{opacity:.3;cursor:default}
.tc2-arrow:focus-visible,.tc2-track:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 50%,transparent);outline-offset:3px}
.tc2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tc2-track{list-style:none;display:flex;gap:clamp(14px,1.8cqi,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px}
.tc2-track::-webkit-scrollbar{display:none}
.tc2-track.is-draggable{scroll-snap-type:none;cursor:grab}
.tc2-track.is-draggable:active{cursor:grabbing}
.tc2-card{position:relative;flex:0 0 clamp(220px,24%,300px);aspect-ratio:3/4;overflow:hidden;scroll-snap-align:start;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);user-select:none}
.tc2-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tc2-card:hover img{transform:scale(1.05)}
.tc2-info{position:absolute;inset:auto 0 0;padding:48px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.78))}
.tc2-name{color:#fff;font-size:18px}
.tc2-name a{color:inherit;text-decoration:none}
.tc2-name a:hover{color:var(--st-brand)}
.tc2-role{color:var(--st-brand);font-size:14px;font-weight:600;margin-top:2px}
@container st (max-width:700px){.tc2-top{flex-direction:column;align-items:flex-start}.tc2-card{flex-basis:72%}}
/* 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}}
/* 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)}
/* FAQ Accordion */
.st-faq-accordion{padding:clamp(64px,8cqi,112px) 0}
.st-acc{border-bottom:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.st-acc-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 2px;cursor:pointer;list-style:none;font:700 clamp(17px,.6cqi + 14px,19px)/1.4 var(--st-font-heading);letter-spacing:-.01em}
.st-acc-q::-webkit-details-marker{display:none}
.st-acc-q:hover{color:var(--st-brand)}
.st-acc-q:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 45%,transparent);outline-offset:2px;border-radius:6px}
.st-acc-icon{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--st-brand) 11%,transparent);transition:transform .3s ease,background .3s ease}
.st-acc-icon::before,.st-acc-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--st-brand);transform:translate(-50%,-50%)}
.st-acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s ease}
.st-acc[open]:not(.is-closing) .st-acc-icon{transform:rotate(180deg);background:var(--st-brand)}
.st-acc[open]:not(.is-closing) .st-acc-icon::before,.st-acc[open]:not(.is-closing) .st-acc-icon::after{background:var(--st-btn-text)}
.st-acc[open]:not(.is-closing) .st-acc-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.st-acc-a{overflow:hidden}
.st-acc-a p{padding:0 48px 24px 2px;color:var(--st-muted);font-size:16.5px;line-height:1.7}
.fq-list{max-width:820px;margin:0 auto;border-top:1px solid color-mix(in srgb,var(--st-text) 11%,transparent)}
.fq-contact{max-width:820px;margin:clamp(32px,4cqi,48px) auto 0;padding:20px 24px;border-radius:calc(var(--st-radius) * 1px);background:var(--st-surface);text-align:center;color:var(--st-muted)}
.fq-contact a{color:var(--st-brand);font-weight:700;text-decoration:none}
.fq-contact a:hover{text-decoration:underline}
/* Popup & Promo Modal */
.st-popup-modal{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.st-popup-modal:has(.pu.is-preview){height:auto;padding:clamp(24px,4vw,48px) var(--st-pad);background:color-mix(in srgb,var(--st-text) 8%,var(--st-bg))}
.pu-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .3s ease}
.pu-backdrop[hidden],.pu-dialog[hidden]{display:none}
.pu-dialog{position:fixed;z-index:1001;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);--pu-wd:780px;width:min(var(--pu-w,var(--pu-wd)),calc(100vw - 32px));height:var(--pu-h,auto);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;border-radius:calc(var(--st-radius) * 1.2px);background:var(--st-bg);color:var(--st-text);box-shadow:0 40px 90px -20px rgba(15,23,42,.55);font-family:var(--st-font-body);opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.pu[data-pos=center] .pu-dialog{top:50%;left:50%;transform:translate(-50%,-46%) scale(.97)}
.pu:not([data-pos=center]) .pu-dialog{--pu-wd:400px;grid-template-columns:1fr;box-shadow:0 24px 60px -16px rgba(15,23,42,.5),0 0 0 1px color-mix(in srgb,var(--st-text) 8%,transparent)}
.pu:not([data-pos=center]) .pu-backdrop{display:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:20px;transform:translateY(24px)}
.pu[data-pos^=top] .pu-dialog{top:20px;transform:translateY(-24px)}
.pu[data-pos$=right] .pu-dialog{right:20px}
.pu[data-pos$=left] .pu-dialog{left:20px}
.pu[data-pos=bottom-center] .pu-dialog{left:50%;--pu-wd:460px;transform:translate(-50%,24px)}
.pu.is-open .pu-backdrop{opacity:1}
.pu.is-open .pu-dialog{opacity:1}
.pu[data-pos=center].is-open .pu-dialog{transform:translate(-50%,-50%)}
.pu[data-pos=bottom-center].is-open .pu-dialog{transform:translateX(-50%)}
.pu:not([data-pos=center]):not([data-pos=bottom-center]).is-open .pu-dialog{transform:none}
.pu-media{position:relative;min-height:220px;background:var(--st-surface)}
.pu-media:not(:has(.pu-img,.pu-car,.pu-video)){display:none}
.pu-dialog:not(:has(.pu-img,.pu-car,.pu-video)){grid-template-columns:1fr}
.pu-body:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){display:none}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))){grid-template-columns:1fr}
.pu-dialog:not(:has(.st-eyebrow:not(:empty),.pu-h:not(:empty),.pu-lead:not(:empty),.pu-form,.pu-ctas,.pu-html-wrap,.pu-no span:not(:empty))) .pu-media{min-height:clamp(240px,40vw,380px)}
.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.pu[data-pos=center][data-layout=right] .pu-media{order:2}
.pu[data-pos=center][data-layout=top] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=top] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-pos=center][data-layout=bottom] .pu-dialog{grid-template-columns:1fr;--pu-wd:520px}
.pu[data-pos=center][data-layout=bottom] .pu-media{min-height:0;aspect-ratio:16/9}
.pu[data-layout=bottom] .pu-media{order:2}
.pu:not([data-pos=center]) .pu-media{min-height:150px;aspect-ratio:16/9}
.pu-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-car{position:absolute;inset:0}
.pu-video{position:absolute;inset:0;z-index:1;background:#0b1020;overflow:hidden}
.pu-video .vs-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-video .vs-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(8,10,20,.55),rgba(8,10,20,.08) 65%);color:#fff;text-decoration:none}
.pu-video .vs-btn{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--st-brand);color:var(--st-btn-text);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .2s ease}
.pu-video .vs-btn svg{margin-left:3px}
.pu-video .vs-play:hover .vs-btn{transform:scale(1.08)}
.pu-video .vs-play:focus-visible{outline:4px solid var(--st-brand);outline-offset:-4px}
.pu-video .vs-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.pu-video.is-playing .vs-poster,.pu-video.is-playing .vs-play{display:none}
.pu-html-wrap{width:100%;min-width:0}
.pu-html{min-width:0;color:var(--st-text);font-size:15px;line-height:1.6}
.pu-html iframe,.pu-html img,.pu-html video{max-width:100%}
.pu-track{display:flex;height:100%;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pu-track::-webkit-scrollbar{display:none}
.pu-slide{position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center}
.pu-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pu-slide-link{position:absolute;inset:0}
.pu-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 38px;background:linear-gradient(to top,rgba(8,10,20,.72),transparent);color:#fff;font-weight:700;font-size:15px;line-height:1.3;pointer-events:none}
.pu-cap:empty{display:none}
.pu-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#0f172a;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.3)}
.pu-nav:hover{background:#fff}
.pu-prev{left:10px}
.pu-next{right:10px}
.pu-dots{position:absolute;left:0;right:0;bottom:12px;z-index:2;display:flex;justify-content:center;gap:7px}
.pu-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s ease,transform .2s ease}
.pu-dot[aria-current=true]{background:#fff;transform:scale(1.25)}
.pu-car.is-single .pu-nav,.pu-car.is-single .pu-dots{display:none}
.pu-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;justify-content:safe center;padding:clamp(24px,4vw,40px)}
.pu:not([data-pos=center]) .pu-body{padding:20px 22px 22px;gap:10px}
.pu-h{font-size:clamp(24px,2vw + 14px,34px)}
.pu:not([data-pos=center]) .pu-h{font-size:clamp(20px,1vw + 14px,26px)}
.pu-lead{color:var(--st-muted);font-size:16px}
.pu:not([data-pos=center]) .pu-lead{font-size:14.5px}
.pu-form{width:100%}
.pu-row{display:flex;flex-direction:column;gap:10px}
.pu-input{width:100%;min-height:50px;padding:0 16px;border:1.5px solid color-mix(in srgb,var(--st-text) 18%,transparent);border-radius:calc(var(--st-radius) * .7px);background:var(--st-bg);color:var(--st-text);font:500 16px/1 var(--st-font-body);outline:none}
.pu-input:focus{border-color:var(--st-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--st-brand) 18%,transparent)}
.pu-btn{width:100%}
.pu-ctas{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.pu-ctas .pu-cta{flex:1 1 auto}
.pu-note{margin-top:8px;font-size:13px;color:var(--st-muted)}
.pu-note:empty,.pu-ok:empty,.pu-err:empty{display:none}
.pu-ok{padding:12px 14px;border-radius:calc(var(--st-radius) * .6px);background:color-mix(in srgb,#16a34a 14%,transparent);color:var(--st-text);font-weight:600}
.pu-err{margin-top:8px;color:#b91c1c;font-size:14px;font-weight:600}
.pu-no{align-self:center;padding:6px 10px;border:0;background:none;color:var(--st-muted);font:600 14px/1 var(--st-font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pu-no:hover{color:var(--st-text)}
.pu-no:has(span:empty){display:none}
.pu-x{position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:color-mix(in srgb,var(--st-bg) 88%,transparent);color:var(--st-text);cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.18);transition:background .2s ease,transform .2s ease}
.pu-x:hover{background:var(--st-bg);transform:scale(1.06)}
.pu-x:focus-visible,.pu-no:focus-visible,.pu-input:focus-visible,.pu-nav:focus-visible,.pu-dot:focus-visible{outline:3px solid color-mix(in srgb,var(--st-brand) 55%,transparent);outline-offset:2px}
.pu.is-preview .pu-backdrop{display:none}
.pu.is-preview .pu-dialog{position:relative;inset:auto;transform:none;margin:0 auto;opacity:1;max-height:none}
@media (max-width:640px){
.pu[data-pos=center] .pu-dialog,.pu[data-pos=center][data-layout=right] .pu-dialog{grid-template-columns:1fr}
.pu[data-pos=center][data-layout=right] .pu-media{order:0}
.pu-media{min-height:150px;max-height:220px}
.pu:not([data-pos=center]) .pu-dialog{left:12px;right:12px;width:auto}
.pu[data-pos=bottom-center] .pu-dialog,.pu[data-pos=bottom-center].is-open .pu-dialog{left:12px;transform:none}
.pu[data-pos^=bottom] .pu-dialog{bottom:12px}
.pu[data-pos^=top] .pu-dialog{top:12px}
.pu-body{padding:22px}
}
@media print{.pu{display:none}}
/* Floating Social Share Bar */
.st-floating-social-share{overflow:visible;container-type:normal;height:0;min-height:0;background:transparent}
.ss{--ss-base:44px;--ss-size:var(--ss-base);--ss-r:min(calc(var(--st-radius) * 1px),14px);--ss-nudge:12px;position:fixed;z-index:900;top:var(--ss-top,50%);display:grid;pointer-events:none;font-family:var(--st-font-body)}
.ss[data-size=compact]{--ss-base:38px}
.ss[data-size=large]{--ss-base:52px}
.ss[data-side=left]{left:0}
.ss[data-side=right]{right:0;--ss-nudge:-12px}
.ss[data-align=center]{top:0;bottom:0;height:max-content;margin:auto 0}
.ss-panel,.ss-tab{grid-area:1/1;pointer-events:auto}
.ss-panel{transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s}
.ss-list{list-style:none;display:flex;flex-direction:column;flex-wrap:wrap;align-items:stretch;align-content:flex-start;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);filter:drop-shadow(0 10px 18px rgba(15,23,42,.22))}
.ss[data-align=custom] .ss-list{max-height:calc(100vh - var(--ss-top) - 12px);max-height:calc(100dvh - var(--ss-top) - 12px)}
.ss-item[hidden]{display:none}
.ss-btn{position:relative;flex:none;display:grid;place-items:center;width:var(--ss-size);height:var(--ss-size);border:0;background:var(--c,var(--st-brand));color:#fff;cursor:pointer;text-decoration:none;font:inherit;transition:width .25s cubic-bezier(.2,.8,.2,1),padding .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1),filter .25s ease,background .25s ease,color .25s ease,border-radius .25s ease}
.ss-item{display:flex;width:var(--ss-size)}
.ss-btn:hover,.ss-btn:focus-visible{filter:brightness(1.1)}
.ss:not([data-shape=attached]) .ss-btn:hover,.ss:not([data-shape=attached]) .ss-btn:focus-visible{transform:translateX(var(--ss-nudge))}
.ss[data-shape=attached] .ss-btn:hover,.ss[data-shape=attached] .ss-btn:focus-visible{width:calc(var(--ss-size) + 12px)}
.ss[data-side=left] .ss-item{justify-content:flex-start}
.ss[data-side=right] .ss-item{justify-content:flex-end}
.ss[data-side=left] .ss-btn:hover,.ss[data-side=left] .ss-btn:focus-visible{border-top-right-radius:var(--ss-r);border-bottom-right-radius:var(--ss-r)}
.ss[data-side=right] .ss-btn:hover,.ss[data-side=right] .ss-btn:focus-visible{border-top-left-radius:var(--ss-r);border-bottom-left-radius:var(--ss-r)}
.ss[data-shape=attached] .ss-list{gap:0}
.ss-btn:focus-visible,.ss-hide:focus-visible,.ss-tab:focus-visible{outline:3px solid var(--st-text);outline-offset:2px;z-index:2}
.ss-ic{display:block;width:calc(var(--ss-size) * .5);height:calc(var(--ss-size) * .5)}
.ss-ic--done{position:absolute;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
.ss-btn.is-done .ss-ic:not(.ss-ic--done){opacity:0}
.ss-btn.is-done .ss-ic--done{opacity:1;transform:none}
.ss[data-look=theme] .ss-btn{background:var(--st-brand);color:var(--st-btn-text)}
.ss[data-look=subtle] .ss-btn{background:var(--st-bg);color:var(--st-text)}
.ss[data-look=subtle] .ss-btn:hover,.ss[data-look=subtle] .ss-btn:focus-visible{background:var(--c,var(--st-brand));color:#fff;filter:none}
.ss[data-shape=attached][data-side=left] .ss-item:first-child .ss-btn{border-top-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=left] .ss-item:last-child .ss-btn{border-bottom-right-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:first-child .ss-btn{border-top-left-radius:var(--ss-r)}
.ss[data-shape=attached][data-side=right] .ss-item:last-child .ss-btn{border-bottom-left-radius:var(--ss-r)}
.ss:not([data-shape=attached]) .ss-list{gap:8px;margin:0 8px}
.ss[data-shape=rounded] .ss-btn{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-btn{border-radius:50%}
.ss[data-shape=circle] .ss-btn,.ss[data-shape=rounded] .ss-btn{box-shadow:none}
.ss-item--hide{display:block}
.ss-hide{display:grid;place-items:center;width:100%;height:calc(var(--ss-size) - 12px);border:0;background:#d4d7dd;color:#475569;cursor:pointer;transition:filter .2s ease}
.ss-hide:hover{filter:brightness(.94)}
.ss-hide .ss-ic{width:20px;height:20px}
.ss[data-side=right] .ss-ic--hide{transform:scaleX(-1)}
.ss[data-shape=rounded] .ss-hide{border-radius:var(--ss-r)}
.ss[data-shape=circle] .ss-hide{border-radius:999px}
.ss-tip{position:absolute;top:50%;display:block;padding:7px 11px;border-radius:8px;background:var(--st-text);color:var(--st-bg);font:600 13px/1 var(--st-font-body);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%);transition:opacity .15s ease,visibility 0s .15s}
.ss[data-side=left] .ss-tip{left:calc(100% + 10px)}
.ss[data-side=right] .ss-tip{right:calc(100% + 10px)}
.ss-btn.is-done .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}
@media (hover:hover){.ss[data-tips=on] .ss-btn:hover .ss-tip,.ss[data-tips=on] .ss-btn:focus-visible .ss-tip{opacity:1;visibility:visible;transition:opacity .15s ease}}
.ss-tab{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:center;width:var(--ss-size);padding:14px 0;border:0;background:var(--st-brand);color:var(--st-btn-text);cursor:pointer;font:700 12.5px/1 var(--st-font-body);letter-spacing:.08em;text-transform:uppercase;filter:drop-shadow(0 10px 18px rgba(15,23,42,.22));opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss-tab .ss-ic{width:calc(var(--ss-size) * .46);height:calc(var(--ss-size) * .46)}
.ss-tab-text{writing-mode:vertical-rl}
.ss-tab-text:empty{display:none}
.ss[data-side=left] .ss-tab{justify-self:start;border-radius:0 var(--ss-r) var(--ss-r) 0;transform:translateX(-100%)}
.ss[data-side=right] .ss-tab{justify-self:end;border-radius:var(--ss-r) 0 0 var(--ss-r);transform:translateX(100%)}
.ss.is-collapsed .ss-tab{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.12s,.12s,0s}
.ss.is-collapsed .ss-panel{opacity:0;visibility:hidden;pointer-events:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .4s}
.ss[data-side=left].is-collapsed .ss-panel{transform:translateX(-110%)}
.ss[data-side=right].is-collapsed .ss-panel{transform:translateX(110%)}
.ss-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:1024px){.ss{--ss-size:min(var(--ss-base),42px)}}
@media (max-width:640px){
.ss[data-mobile=side]{--ss-size:min(var(--ss-base),40px)}
.ss[data-mobile=side] .ss-tip{display:none}
.ss[data-mobile=bar]{top:auto!important;bottom:0;left:0;right:0;display:block;height:0;margin:0;transform:none!important}
.ss[data-mobile=bar] .ss-panel{position:absolute;left:0;right:0;bottom:0;background:var(--st-bg);box-shadow:0 -6px 20px rgba(15,23,42,.18);padding-bottom:env(safe-area-inset-bottom)}
.ss[data-mobile=bar] .ss-list{flex-direction:row;margin:0;gap:0;filter:none}
.ss[data-mobile=bar] .ss-item{flex:1 1 0;min-width:0;width:auto}
.ss[data-mobile=bar] .ss-btn,.ss[data-mobile=bar] .ss-btn:hover,.ss[data-mobile=bar] .ss-btn:focus-visible{width:100%;height:48px;border-radius:0!important;transform:none}
.ss[data-mobile=bar] .ss-item--hide{flex:0 0 48px}
.ss[data-mobile=bar] .ss-hide{height:48px;border-radius:0}
.ss[data-mobile=bar] .ss-ic--hide{transform:rotate(-90deg)!important}
.ss[data-mobile=bar] .ss-tip{display:none}
.ss[data-mobile=bar] .ss-tab{position:absolute;align-self:auto;bottom:calc(16px + env(safe-area-inset-bottom));flex-direction:row;width:auto;height:44px;padding:0 16px;gap:8px;border-radius:999px;transform:translateY(24px)}
.ss[data-mobile=bar][data-side=left] .ss-tab{left:12px;border-radius:999px}
.ss[data-mobile=bar][data-side=right] .ss-tab{right:12px;border-radius:999px}
.ss[data-mobile=bar] .ss-tab-text{writing-mode:horizontal-tb}
.ss[data-mobile=bar].is-collapsed .ss-tab{transform:none}
.ss[data-mobile=bar][data-side=left].is-collapsed .ss-panel,.ss[data-mobile=bar][data-side=right].is-collapsed .ss-panel{transform:translateY(110%)}
}
@media print{.ss{display:none}}
/* Big Wordmark Footer */
.st-footer-giant{padding:clamp(64px,8cqi,112px) 0 28px}
.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}
.fgi-cta{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:28px;padding-bottom:clamp(36px,5cqi,64px);border-bottom:1px solid color-mix(in srgb,var(--st-text) 12%,transparent)}
.fgi .fgi-title{max-width:14em;font-size:clamp(32px,3.6cqi + 12px,60px)}
.fgi-cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fgi-email{color:var(--st-muted);font-size:15px}
.fgi-email:empty{display:none}
.fgi-mid{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:28px 0}
.fgi-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px}
.fgi-links a{color:var(--st-text);font-weight:600;font-size:16px;text-decoration:none}
.fgi-links a:hover{color:var(--st-brand)}
.fgi .st-social{background:color-mix(in srgb,var(--st-text) 9%,transparent);border-radius:50%}
.fgi-word{margin:clamp(8px,2cqi,24px) 0 0;font:800 clamp(34px,14.6cqi,236px)/.82 var(--st-font-heading);letter-spacing:-.06em;text-align:center;white-space:nowrap;color:var(--st-text);-webkit-mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.08));mask:linear-gradient(180deg,#000 35%,rgba(0,0,0,.08));user-select:none}
.fgi-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:24px;color:var(--st-muted);font-size:14px}
.fgi-legal{list-style:none;display:flex;gap:20px}
.fgi-legal a{color:var(--st-muted);text-decoration:none}
.fgi-legal a:hover{color:var(--st-text)}
(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;
if (G && window.Draggable) G.registerPlugin(Draggable);
if (G && window.InertiaPlugin) G.registerPlugin(InertiaPlugin);
if (G && window.ScrollToPlugin) G.registerPlugin(ScrollToPlugin);
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
document.querySelectorAll('.st').forEach(function (sec) {
var track = sec.querySelector('[data-carousel]');
if (!track) return;
var prev = sec.querySelector('[data-carousel-prev]');
var next = sec.querySelector('[data-carousel-next]');
var max = function () { return Math.max(0, track.scrollWidth - track.clientWidth); };
var points = function () {
var first = track.children[0];
if (!first) return [0];
return Array.prototype.map.call(track.children, function (c) { return Math.min(max(), c.offsetLeft - first.offsetLeft); });
};
var nearest = function (x) { return points().reduce(function (a, p) { return Math.abs(p - x) < Math.abs(a - x) ? p : a; }, 0); };
var update = function () {
var x = track.scrollLeft;
if (prev) prev.disabled = x <= 2;
if (next) next.disabled = x >= max() - 2;
};
var go = function (dir) {
var ps = points(), x = track.scrollLeft, target = x;
if (dir > 0) { for (var i = 0; i < ps.length; i++) if (ps[i] > x + 4) { target = ps[i]; break; } }
else { for (var j = ps.length - 1; j >= 0; j--) if (ps[j] < x - 4) { target = ps[j]; break; } }
if (G && window.ScrollToPlugin && !reduce) G.to(track, { scrollTo: { x: target }, duration: 0.6, ease: 'power3.out', onUpdate: update });
else track.scrollTo({ left: target, behavior: reduce ? 'auto' : 'smooth' });
};
if (prev) prev.addEventListener('click', function () { go(-1); });
if (next) next.addEventListener('click', function () { go(1); });
track.addEventListener('scroll', update, { passive: true });
window.addEventListener('resize', update);
update();
// Mouse drag with momentum on desktop; touch keeps native scrolling and snap.
// An invisible proxy is dragged and its x is mapped onto the track's native scrollLeft,
// so the slides' markup and layout never change.
if (G && window.Draggable && fine) {
track.classList.add('is-draggable');
var proxy = document.createElement('div');
var start = 0;
var apply = function () { track.scrollLeft = start - this.x; update(); };
Draggable.create(proxy, {
type: 'x',
trigger: track,
inertia: !!window.InertiaPlugin && !reduce,
dragClickables: false,
onPress: function () { G.killTweensOf(track); start = track.scrollLeft; G.set(proxy, { x: 0 }); this.update(); },
onDrag: apply,
onThrowUpdate: apply,
snap: { x: function (v) { return start - nearest(Math.max(0, Math.min(max(), start - v))); } },
onRelease: function () { if (!this.tween) { G.to(track, { scrollTo: window.ScrollToPlugin ? { x: nearest(track.scrollLeft) } : undefined, duration: 0.4, ease: 'power3.out', onUpdate: update }); } }
});
}
});
})();
(function () {
if (window.gsap && window.Flip) gsap.registerPlugin(Flip);
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st').forEach(function (sec) {
var btns = sec.querySelectorAll('[data-billing]');
if (!btns.length) return;
var pill = sec.querySelector('.st-bill-pill');
Array.prototype.forEach.call(btns, function (b) {
b.addEventListener('click', function () {
var yearly = b.getAttribute('data-billing') === 'yearly';
if (sec.classList.contains('is-yearly') === yearly) return;
var state = !reduce && window.Flip && pill ? Flip.getState(pill) : null;
if (pill) b.appendChild(pill);
sec.classList.toggle('is-yearly', yearly);
Array.prototype.forEach.call(btns, function (x) { x.setAttribute('aria-pressed', String(x === b)); });
if (reduce || !window.gsap) return;
if (state) Flip.from(state, { duration: 0.45, ease: 'power3.inOut' });
gsap.fromTo(sec.querySelectorAll(yearly ? '.st-py' : '.st-pm'),
{ yPercent: 40, opacity: 0 },
{ yPercent: 0, opacity: 1, duration: 0.4, stagger: 0.05, ease: 'power3.out', clearProps: 'transform,opacity' });
});
});
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
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 G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var anim = G && !reduce;
document.querySelectorAll('.st [data-accordion]').forEach(function (list) {
var mode = list.getAttribute('data-accordion') || '';
var items = Array.prototype.slice.call(list.querySelectorAll('details'));
var body = function (d) { return d.querySelector('.st-acc-a'); };
var close = function (d) {
if (!d.open || d.classList.contains('is-closing')) return;
if (!anim) { d.open = false; return; }
d.classList.add('is-closing');
G.to(body(d), { height: 0, duration: 0.32, ease: 'power2.inOut', onComplete: function () {
d.open = false; d.classList.remove('is-closing'); G.set(body(d), { clearProps: 'height' });
} });
};
var open = function (d) {
d.open = true;
if (!anim) return;
var b = body(d);
G.fromTo(b, { height: 0 }, { height: 'auto', duration: 0.4, ease: 'power2.out', clearProps: 'height' });
G.fromTo(b.children, { y: -8, opacity: 0 }, { y: 0, opacity: 1, duration: 0.35, delay: 0.06, ease: 'power2.out', clearProps: 'transform,opacity' });
};
items.forEach(function (d) {
d.querySelector('summary').addEventListener('click', function (e) {
e.preventDefault();
if (d.open && !d.classList.contains('is-closing')) { close(d); return; }
if (/single/.test(mode)) items.forEach(function (o) { if (o !== d) close(o); });
open(d);
});
});
if (/first/.test(mode) && items[0]) items[0].open = true;
});
})();
(function () {
var inline = window.ST_STILL || window.ST_PREVIEW || window.ST_POPUP_INLINE;
document.querySelectorAll('.st [data-pu]').forEach(function (root) {
var dlg = root.querySelector('.pu-dialog');
var back = root.querySelector('.pu-backdrop');
if (!dlg || root.getAttribute('data-pu-ready')) return;
root.setAttribute('data-pu-ready', '1');
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
root.querySelectorAll('[data-pu-carousel]').forEach(function (car) {
var track = car.querySelector('.pu-track');
if (!track) return;
var slides = track.children, n = slides.length;
if (n < 2) { car.classList.add('is-single'); return; }
var mk = function (cls, label, svg) { var b = document.createElement('button'); b.type = 'button'; b.className = cls; b.setAttribute('aria-label', label); if (svg) b.innerHTML = svg; return b; };
var arrow = function (d) { return '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="' + d + '"/></svg>'; };
var prev = mk('pu-nav pu-prev', 'Previous slide', arrow('m15 18-6-6 6-6'));
var next = mk('pu-nav pu-next', 'Next slide', arrow('m9 18 6-6-6-6'));
var dots = document.createElement('div'); dots.className = 'pu-dots';
var dotEls = [];
for (var i = 0; i < n; i++) { (function (k) { var d = mk('pu-dot', 'Go to slide ' + (k + 1)); d.addEventListener('click', function () { go(k); stop(); }); dots.appendChild(d); dotEls.push(d); })(i); }
car.appendChild(prev); car.appendChild(next); car.appendChild(dots);
var idx = function () { return Math.round(track.scrollLeft / Math.max(1, track.clientWidth)); };
var mark = function () { var c = idx(); dotEls.forEach(function (d, k) { d.setAttribute('aria-current', k === c ? 'true' : 'false'); }); };
var go = function (k) { k = (k + n) % n; track.scrollTo({ left: k * track.clientWidth, behavior: reduce ? 'auto' : 'smooth' }); };
var ticking = false;
track.addEventListener('scroll', function () { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; mark(); }); }, { passive: true });
prev.addEventListener('click', function () { go(idx() - 1); stop(); });
next.addEventListener('click', function () { go(idx() + 1); stop(); });
mark();
var secs = parseFloat(root.getAttribute('data-autoplay')) || 0;
var timer = 0, paused = false;
var stop = function () { clearInterval(timer); timer = 0; };
if (secs > 0 && !reduce) {
car.addEventListener('mouseenter', function () { paused = true; });
car.addEventListener('mouseleave', function () { paused = false; });
car.addEventListener('focusin', function () { paused = true; });
car.addEventListener('focusout', function () { paused = false; });
timer = setInterval(function () { var d = root.querySelector('.pu-dialog'); if (!paused && d && !d.hidden && !document.hidden) go(idx() + 1); }, secs * 1000);
}
});
if (inline) {
root.classList.add('is-preview');
dlg.hidden = false;
if (back) back.hidden = true;
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', function (e) { e.preventDefault(); }); });
return;
}
var trigger = root.getAttribute('data-trigger') || 'delay';
var delay = Math.max(0, parseFloat(root.getAttribute('data-delay')) || 0);
var pct = Math.min(100, Math.max(1, parseFloat(root.getAttribute('data-scroll')) || 50));
var days = parseFloat(root.getAttribute('data-days')) || 0;
var KEY = 'pu-' + (root.getAttribute('data-pu-id') || 'x');
try {
var seen = parseInt(localStorage.getItem(KEY), 10);
if (days > 0 && seen && Date.now() - seen < days * 86400000) return;
} catch (e) {}
var modal = (root.getAttribute('data-pos') || 'center') === 'center'; // only the centre popup dims the page and traps focus
dlg.setAttribute('aria-modal', modal ? 'true' : 'false');
var shown = false, last = null, undo = [];
var focusables = function () { return Array.prototype.filter.call(dlg.querySelectorAll('a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])'), function (el) { return el.offsetParent !== null; }); };
var onKey = function (e) {
if (e.key === 'Escape') { e.preventDefault(); hide(); return; }
if (e.key !== 'Tab' || !modal) return;
var f = focusables();
if (!f.length) return;
var first = f[0], end = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); end.focus(); }
else if (!e.shiftKey && document.activeElement === end) { e.preventDefault(); first.focus(); }
};
function show() {
if (shown) return;
shown = true;
undo.forEach(function (fn) { fn(); });
last = document.activeElement;
dlg.hidden = false;
if (back) back.hidden = false;
void dlg.offsetWidth;
root.classList.add('is-open');
if (modal) {
var f = focusables();
var target = dlg.querySelector('input') || f[1] || f[0] || dlg;
try { target.focus({ preventScroll: true }); } catch (e) {}
}
document.addEventListener('keydown', onKey);
try { if (days > 0) localStorage.setItem(KEY, String(Date.now())); } catch (e) {}
}
function hide() {
root.classList.remove('is-open');
root.querySelectorAll('.vs-embed').forEach(function (v) { var box = v.parentNode; v.remove(); if (box) box.classList.remove('is-playing'); });
document.removeEventListener('keydown', onKey);
setTimeout(function () { dlg.hidden = true; if (back) back.hidden = true; }, 320);
if (last && last.focus) { try { last.focus({ preventScroll: true }); } catch (e) {} }
}
root.querySelectorAll('[data-pu-close]').forEach(function (b) { b.addEventListener('click', hide); });
var on = function (target, ev, fn, opts) { target.addEventListener(ev, fn, opts); undo.push(function () { target.removeEventListener(ev, fn, opts); }); };
var started = Date.now();
if (trigger === 'scroll') {
var check = function () {
var h = document.documentElement.scrollHeight - window.innerHeight;
var p = h > 0 ? (window.scrollY / h) * 100 : 100;
if (p >= pct) show();
};
on(window, 'scroll', check, { passive: true });
} else if (trigger === 'exit' && window.matchMedia && window.matchMedia('(pointer: fine)').matches) {
on(document, 'mouseout', function (e) { if (!e.relatedTarget && e.clientY <= 0 && Date.now() - started > 2000) show(); });
} else {
var timer = setTimeout(show, Math.max(delay, trigger === 'exit' ? 10 : 0) * 1000);
undo.push(function () { clearTimeout(timer); });
}
});
})();
(function () {
var G = window.gsap;
var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.st form[data-form]').forEach(function (form) {
var ok = form.querySelector('[data-form-success]');
var bad = form.querySelector('[data-form-error]');
var btn = form.querySelector('[type="submit"]');
var done = function () {
var fields = form.querySelectorAll('[data-form-fields]');
var show = function () {
Array.prototype.forEach.call(fields, function (f) { f.hidden = true; });
if (ok) { ok.hidden = false; ok.focus && ok.focus(); if (G && !reduce) G.from(ok, { y: 16, opacity: 0, duration: 0.5, ease: 'power3.out', clearProps: 'transform,opacity' }); }
};
if (G && !reduce && fields.length) G.to(fields, { opacity: 0, y: -10, duration: 0.25, onComplete: show }); else show();
};
form.addEventListener('submit', function (e) {
if (!window.fetch) return;
e.preventDefault();
if (bad) bad.hidden = true;
if (btn) { btn.disabled = true; btn.setAttribute('aria-busy', 'true'); }
var finish = function () { if (btn) { btn.disabled = false; btn.removeAttribute('aria-busy'); } };
if (window.ST_PREVIEW) { setTimeout(function () { finish(); done(); }, 600); return; }
fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
.then(function (r) { finish(); if (r.ok) done(); else if (bad) bad.hidden = false; })
.catch(function () { finish(); if (bad) bad.hidden = false; });
});
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
function embed(url) {
var m;
// Character classes instead of backslashes: this code lives inside a template literal
if ((m = url.match(/(?:youtube[.]com[/](?:watch[?](?:.*&)?v=|embed[/]|shorts[/])|youtu[.]be[/])([A-Za-z0-9_-]{11})/))) return { type: 'iframe', src: 'https://www.youtube-nocookie.com/embed/' + m[1] + '?autoplay=1&rel=0' };
if ((m = url.match(/vimeo[.]com[/](?:video[/])?([0-9]+)/))) return { type: 'iframe', src: 'https://player.vimeo.com/video/' + m[1] + '?autoplay=1&dnt=1' };
if (/[.](mp4|webm|ogg)([?].*)?$/i.test(url)) return { type: 'video', src: url };
return null;
}
document.querySelectorAll('.st [data-video-box]').forEach(function (box) {
var btn = box.querySelector('[data-video]');
if (!btn) return;
function start(e) {
var info = embed(btn.getAttribute('data-video') || '');
if (!info) return;
e.preventDefault();
// In the editor the click also selects the section, so the editor still gets it
if (!editing) e.stopPropagation();
var title = box.getAttribute('data-title') || 'Video';
var el;
if (info.type === 'iframe') {
el = document.createElement('iframe');
el.src = info.src;
el.title = title;
el.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
el.allowFullscreen = true;
el.referrerPolicy = 'strict-origin-when-cross-origin';
} else {
el = document.createElement('video');
el.src = info.src;
el.controls = true;
el.autoplay = true;
el.setAttribute('playsinline', '');
el.setAttribute('aria-label', title);
}
el.className = 'vs-embed';
box.appendChild(el);
box.classList.add('is-playing');
if (el.focus) el.focus();
}
btn.addEventListener('click', start);
});
})();
(function () {
var editing = window.ST_STILL || window.ST_PREVIEW;
var enc = encodeURIComponent;
function meta(sel) { var m = document.querySelector(sel); return m ? (m.getAttribute('content') || m.getAttribute('href') || '') : ''; }
function absolute(u) { try { return new URL(u, location.href).href; } catch (e) { return u; } }
document.querySelectorAll('.st [data-ss]').forEach(function (root) {
if (root.getAttribute('data-ss-ready')) return;
root.setAttribute('data-ss-ready', '1');
function vars() {
var url = root.getAttribute('data-url') || location.href.split('#')[0];
var title = root.getAttribute('data-title') || meta('meta[property="og:title"]') || document.title || '';
return {
url: url, title: title, text: (title ? title + ' ' : '') + url,
image: root.getAttribute('data-pin-image') || meta('meta[property="og:image"]'),
via: root.getAttribute('data-via') || '', tags: root.getAttribute('data-tags') || ''
};
}
function fill(tpl, v) {
var out = tpl.replace(/[{]([a-z]+)[}]/g, function (m, k) { return enc(v[k] || ''); });
var i = out.indexOf('?');
if (i < 1) return out;
var q = out.slice(i + 1).split('&').filter(function (p) { var e = p.indexOf('='); return e < 0 || p.slice(e + 1) !== ''; }).join('&');
return q ? out.slice(0, i) + '?' + q : out.slice(0, i);
}
function update() {
var v = vars();
root.querySelectorAll('a[data-share]').forEach(function (a) { a.href = fill(a.getAttribute('data-share'), v); });
}
update();
['pointerenter', 'focusin', 'touchstart'].forEach(function (ev) { root.addEventListener(ev, update, { passive: true }); });
var live = root.querySelector('.ss-live');
function flash(btn, msg) {
var tip = btn.querySelector('.ss-tip');
if (live) live.textContent = msg;
if (tip && !btn.classList.contains('is-done')) tip.setAttribute('data-was', tip.textContent);
btn.classList.add('is-done');
if (tip) tip.textContent = msg;
clearTimeout(btn._ssTimer);
btn._ssTimer = setTimeout(function () {
btn.classList.remove('is-done');
if (tip) tip.textContent = tip.getAttribute('data-was') || '';
if (live) live.textContent = '';
}, 2000);
}
root.querySelectorAll('[data-net="copy"]').forEach(function (btn) {
btn.addEventListener('click', function () {
var u = vars().url;
var msg = root.getAttribute('data-copied') || 'Link copied';
function fallback() {
var t = document.createElement('textarea');
t.value = u; t.setAttribute('readonly', ''); t.style.cssText = 'position:fixed;top:0;left:0;opacity:0';
document.body.appendChild(t); t.select();
try { if (document.execCommand('copy')) flash(btn, msg); } catch (e) {}
t.remove();
}
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(u).then(function () { flash(btn, msg); }, fallback);
else fallback();
});
});
var hide = root.querySelector('[data-ss-hide]'), tab = root.querySelector('[data-ss-show]');
if (!hide || !tab) return;
var KEY = 'ss-collapsed';
function store(v) { if (editing) return; try { sessionStorage.setItem(KEY, v ? '1' : '0'); } catch (e) {} }
function read() { if (editing) return null; try { return sessionStorage.getItem(KEY); } catch (e) { return null; } }
function set(collapsed, focus) {
root.classList.toggle('is-collapsed', collapsed);
hide.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
tab.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
if (focus) (collapsed ? tab : root.querySelector('.ss-btn')).focus({ preventScroll: true });
}
var saved = read();
set(saved === null ? root.getAttribute('data-start') === 'collapsed' : saved === '1', false);
hide.addEventListener('click', function () { set(true, true); store(true); });
tab.addEventListener('click', function () { set(false, true); store(false); });
});
})();
(function () {
if (!window.gsap) return;
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
if (window.ScrollTrigger) gsap.registerPlugin(ScrollTrigger);
var TEXT = window.SplitText ? {"split":"words","part":"words","mask":"words","vars":{"yPercent":110,"stagger":0.06,"duration":0.8}} : null;
if (TEXT) gsap.registerPlugin(SplitText);
function run() {
document.querySelectorAll('.st:not([data-scroll])').forEach(function (section) {
var heads = TEXT ? section.querySelectorAll('[data-anim-text]') : [];
var items = section.querySelectorAll(heads.length ? '[data-anim="item"]:not([data-anim-text])' : '[data-anim="item"]');
var media = section.querySelectorAll('[data-anim="media"]');
var tl = gsap.timeline({
defaults: { ease: 'power3.out', duration: 0.80 },
scrollTrigger: window.ScrollTrigger ? (window.ST_PREVIEW ? { trigger: section, start: 'top 80%', toggleActions: 'play reset play reset' } : { trigger: section, start: 'top 80%', once: true }) : undefined
});
Array.prototype.forEach.call(heads, function (el, i) {
var opts = { type: TEXT.split };
if (TEXT.mask) opts.mask = TEXT.mask;
var parts = SplitText.create(el, opts)[TEXT.part];
// The mask clips each line or word to its line box, which cuts off descenders (g, y, p):
// give the mask a little room below and take it back with a negative margin
if (TEXT.mask) Array.prototype.forEach.call(parts, function (p) { var m = p.parentElement; if (m && m !== el) { m.style.paddingBottom = '.22em'; m.style.marginBottom = '-.22em'; } });
tl.from(parts, Object.assign({}, TEXT.vars), i ? '<0.1' : 0);
});
if (items.length) tl.from(items, {"y":28,"opacity":0,"stagger":0.09,"clearProps":"transform,opacity"}, heads.length ? '<0.2' : 0);
if (media.length) tl.from(media, {"y":40,"opacity":0,"duration":1.1,"clearProps":"transform,opacity"}, items.length || heads.length ? '<0.15' : 0);
});
}
// Split text only after the fonts load, so lines break where they finally will
if (TEXT && document.fonts && document.fonts.ready) document.fonts.ready.then(run); else run();
})();