<!-- Device languages (Accept-Language): (none) -> (no supported match) -->
<!-- Checking geolocation-based language (no manual override detected) -->
<!-- No language detected, defaulting to English -->
<!-- Page generator initialized with security layer -->
<!-- Generating page: Follow Us -->
<!-- Device languages (Accept-Language): (none) -> (no supported match) -->
<!-- Checking geolocation-based language (no manual override detected) -->
<!-- No language detected, defaulting to English -->
<!-- Current language: en -->
<!-- Session language: not set -->
<!-- Cookie language: not set -->
<!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: GlobalSettings -->
<!-- With params: [] -->
<!-- SQL: SELECT * FROM `cms_global_settings` -->
<!-- MySQL returned 15 records -->
<!-- GlobalSettings retrieved from MySQL. Environment: Staging -->
<!-- Using Google Analytics ID: G-EJYKYQFD43 -->
<!-- Generating content for page: Follow Us, language: en, params: [] -->
<!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: Content -->
<!-- With params: {"view":"Follow Us"} -->
<!-- SQL: SELECT * FROM `cms_content` WHERE `staging_active` = 1 AND `theme_id` = 5 AND `page` = &#039;Follow Us&#039; ORDER BY (CASE WHEN TRIM(`position`) = &#039;Footer&#039; THEN 1 ELSE 0 END) ASC, COALESCE(`staging_sort_order`, `sort_order`) ASC, `id` ASC -->
<!-- MySQL returned 20 records -->
<!-- CONTENT FILTERING DEBUG: Starting filtering for Content -->
<!-- User country: US -->
<!-- INCLUDE Join Our Community -->
<!-- INCLUDE Item -->
<!-- INCLUDE Item -->
<!-- INCLUDE Connect With Us -->
<!-- INCLUDE Facebook -->
<!-- INCLUDE Visit Now -->
<!-- INCLUDE X -->
<!-- INCLUDE Visit Now -->
<!-- INCLUDE Instagram -->
<!-- INCLUDE Visit Now -->
<!-- INCLUDE LinkedIn -->
<!-- INCLUDE Visit Now -->
<!-- EXCLUDE Instagram -->
<!-- EXCLUDE Visit Now -->
<!-- EXCLUDE Facebook -->
<!-- EXCLUDE Visit Now -->
<!-- INCLUDE Why Follow Chord Hero? -->
<!-- INCLUDE YouTube -->
<!-- INCLUDE Visit Now -->
<!-- INCLUDE Get Music Learning Tips in Your Inbox -->
<!-- FILTERING SUMMARY for Content: 20 → 16 -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- Preprocessed CustomSettings with language: en -->
<!-- Processing WebElement_Lookup: Statement with item Name: Hero (themed) -->
<!-- Params being passed: Array
(
    [contents] => [16 rows omitted from debug output]
    [buttonsByParent] => [5 rows omitted from debug output]
)
 -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Subtitle, language=en -->
<!-- Using en content for Subtitle (matched key: en_Subtitle) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- Preprocessed CustomSettings with language: en -->
<!-- Processing WebElement_Lookup: SocialGrid with item Name: no name -->
<!-- Params being passed: Array
(
    [contents] => [16 rows omitted from debug output]
    [buttonsByParent] => [5 rows omitted from debug output]
)
 -->
<!-- getContentField: field=Subtitle, language=en -->
<!-- Using en content for Subtitle (matched key: en_Subtitle) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- Processing WebElement_Lookup: SpecSheet with item Name: Why follow -->
<!-- Params being passed: Array
(
    [contents] => [16 rows omitted from debug output]
    [buttonsByParent] => [5 rows omitted from debug output]
)
 -->
<!-- getContentField: field=Subtitle, language=en -->
<!-- Using en content for Subtitle (matched key: en_Subtitle) -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- No content found for Description in en or fallbacks -->
<!-- getContentField: field=Title, language=en -->
<!-- No content found for Title in en or fallbacks -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- getContentField: field=Title, language=en -->
<!-- No content found for Title in en or fallbacks -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- Preprocessed CustomSettings with language: en -->
<!-- Processing WebElement_Lookup: Newsletter with item Name: Newsletter -->
<!-- Params being passed: Array
(
    [contents] => [16 rows omitted from debug output]
    [buttonsByParent] => [5 rows omitted from debug output]
)
 -->
<!-- getContentField: field=Title, language=en -->
<!-- Using en content for Title (matched key: en_Title) -->
<!-- getContentField: field=Description, language=en -->
<!-- Using en content for Description (matched key: en_Description) -->
<!-- Page content generation complete -->
<!-- SEO Handler initialized -->
<!-- Generating meta tags for page -->
<!-- Generated meta tags successfully -->
<!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: Languages -->
<!-- With params: {"view":"Active"} -->
<!-- SQL: SELECT * FROM `cms_languages` WHERE `staging_active` = 1 -->
<!-- MySQL returned 9 records -->
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <meta http-equiv="Permissions-Policy" content="payment=*">
        <meta name="facebook-domain-verification" content="hokgbdhb19bwgif5lu5hxii4lzu6nk">
        <title>Chord Hero - Follow Us - Chord Hero</title>
        <meta name="description" content="Learn music through gamification with Chord Hero&#039;s innovative products.">
<meta name="keywords" content="music learning, ukulele, guitar, DIY instruments, music education">
<meta name="robots" content="noindex, nofollow">
<meta property="og:title" content="Chord Hero - Follow Us">
<meta property="og:description" content="Learn music through gamification with Chord Hero&#039;s innovative products.">
<meta property="og:url" content="https://makerukuleleset.com/followus/">
<meta property="og:locale" content="en_EN">
<meta property="og:image" content="/images/chord-hero-social.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="/images/chord-hero-social.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ChordHero">
<link rel="canonical" href="https://makerukuleleset.com/followus/">

        <link rel="icon" type="image/x-icon" href="/favicon.ico">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="manifest" href="/site.webmanifest">
        <link rel="stylesheet" href="/theme-lab.css?v=1789148226">
        
        <script src="/load_scripts.php?v=1789148226"></script>
    </head>
    <body>
        <!-- Rendering navigation for language: en -->
<!-- Fetching navigation items for language: en -->
<!-- nav_gen: trying live source -->
<!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: Navigation -->
<!-- With params: {"sort":[{"field":"Order","direction":"asc"}]} -->
<!-- SQL: SELECT * FROM `cms_navigation` WHERE `staging_active` = 1 ORDER BY `sort_order` ASC -->
<!-- MySQL returned 64 records -->
<!-- CONTENT FILTERING DEBUG: Starting filtering for Navigation -->
<!-- User country: US -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- INCLUDE No Title -->
<!-- FILTERING SUMMARY for Navigation: 64 → 64 -->
<!-- Found 64 visible navigation items (live) -->
<!-- Generating navigation for language: en -->
<!-- Current page: index.php, Current path: /followus/ -->
<!-- Generated 8 top-level menu items -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous"><style>/* Header and Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
}
/* Base navbar styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: auto;
    width: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Hairline gap fix — Brave / Firefox Focus / Safari on iOS show a strip
   of page content above a position:fixed navbar during URL-bar collapse
   animations because the layout viewport and the visual viewport are
   briefly out of sync. The ::before paints the navbar's background-color
   ALL THE WAY UP off-screen, so any gap iOS leaves is painted over by
   the same colour the navbar is showing. inherit means it follows the
   .scrolled / .no-hero variants automatically — no separate rules needed. */
.navbar::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: inherit;
    pointer-events: none;
}
/* Scrolled state */
.navbar.scrolled {
    background-color: rgba(255, 87, 51, 1);
}
/* Solid nav background on pages without a Hero image — mirrors .scrolled styles */
body.no-hero .navbar {
    background-color: rgba(255, 87, 51, 1);
}
body.no-hero .navbar a,
body.no-hero .navbar .navbar-links a {
    color: #fff;
}
body.no-hero .navbar .navbar-links a:hover {
    color: rgba(255, 255, 255, 0.8);
}
/* Desktop only. Under 768px .submenu is an accordion inside the open panel,
   not a floating dropdown, and this selector outranks the mobile
   `.submenu { background-color: transparent }` — (0,3,1) against (0,1,0) —
   so on a phone it painted a grey box around every collapsed submenu. */
@media (min-width: 769px) {
    body.no-hero .navbar .submenu {
        background-color: rgba(96, 96, 96, 0.95);
    }
}
body.no-hero .navbar .submenu a:hover {
    color: #FF5733;
    background-color: rgba(255, 255, 255, 0.1);
}
/* Link colors */
.navbar a {
    color: #fff;
    transition: color 0.3s ease;
}
.navbar.scrolled .navbar-links a {
    color: #fff;
}
.navbar.scrolled a {
    color: #fff;
}

.navbar-container {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
    max-width: 100%;
    margin: 0 auto;
}
.logo-container {
    margin-right: 2rem;
}
.navbar-logo {
    height: 40px;
    width: auto;
}
.navbar-left {
    flex: 1;
}
.navbar-links .main-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    text-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
.navbar-links .main-menu > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.navbar-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    position: relative;
    display: inline-block;
    line-height: 1.5;
    vertical-align: middle;
}

/* Desktop only, same reason as body.no-hero above: (0,3,0) beats the mobile
   transparent rule, so a scrolled navbar drew a grey box behind each collapsed
   accordion section. */
@media (min-width: 769px) {
    .navbar.scrolled .submenu {
        background-color: rgba(96, 96, 96, 0.95); /* Dark grey background */
    }
}

.navbar.scrolled .submenu a {
    color: #fff; /* White text */
}

.navbar.scrolled .submenu a:hover {
    color: #FF5733; /* Orange color on hover */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle highlight effect */
}

/* Hover effect */
.navbar-links a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #FF5733;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}
.navbar-links a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
.navbar-links a:hover {
    color: #FF5733;
    font-weight: bold;
}

/* Submenu styles */
.submenu {
    position: absolute;
    top: 100%; /* Position right below the parent */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(96, 96, 96, 0.95);
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    overflow: hidden;
    z-index: 1000;
    padding: 8px 0 12px 0;
    margin: 0;
}
/* Bridge element to prevent gap between menu item and submenu */
.has-submenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 20px; /* Bridge the gap */
    background: transparent;
}
.submenu a {
    padding: 12px 20px;
    display: block;
    text-align: center;
    position: relative;
    width: 100%;
    margin-left: 0;
    text-indent: 0;
    line-height: 1.2;
    text-decoration: none;
}
.submenu a:hover {
    color: #FF5733;
    background-color: rgba(255, 255, 255, 0.1);
}
.has-submenu {
    position: relative;
    padding-bottom: 20px; /* Increased padding to create hover area */
    margin-bottom: -20px; /* Compensate for the padding */
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto;
}
.has-submenu .submenu {
    transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
}

.submenu ul {
    margin: 0;
    padding: 0;
    width: 100%;
}
 
.submenu li {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}
.submenu a {
    position: relative; /* Ensure positioned for the :after pseudo-element */
}
.submenu a:after {
    content: '';
    position: absolute;
    width: 80%; /* Desktop width */
    height: 2px;
    bottom: 0;
    left: 50%; /* Center on desktop */
    transform: translateX(-50%) scaleX(0); /* Center the line */
    transform-origin: center;
    background-color: #FF5733;
    transition: transform 0.3s ease-out;
}
.submenu a:hover:after {
    transform: translateX(-50%) scaleX(1); /* Keep centered during animation */
}
/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Hidden by default, shown on mobile */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    margin-left: auto;
    z-index: 1001;
    pointer-events: auto; /* Enable interaction */
}
.hamburger-menu span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: white;
    margin: 5px 0;
    transition: all 0.3s ease;
}
/* Shopping cart */
.cart-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    cursor: pointer;
    padding: 8px;
    transition: transform 0.2s ease;
}
.cart-container:hover {
    transform: scale(1.1);
}
.cart-icon-right {
    font-size: 22px;
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: #d9421e;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 0 4px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.cart-count:not(:empty) {
    display: flex;
}
.cart-container.has-items {
    animation: cartBounce 0.3s ease;
}
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Navbar right — language + cart on same line */
.navbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Language selector */
.language-selector {
    margin-left: 2rem;
}
#language-select {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    color: white;
}
.navbar.scrolled #language-select {
    border-color: rgba(255, 255, 255, 0.5);
}

/* Mobile-specific navigation (touch devices) */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .navbar {
        height: 60px; /* Reduced from 80px */
    }
    .navbar-container {
        padding: 0.3rem 1.5rem; /* Reduced from 0.5rem 2rem */
    }
    .navbar-logo {
        height: 30px; /* Reduced from 40px */
    }
    .logo-container {
        margin-right: 1.5rem; /* Reduced from 2rem */
    }
    .cart-container {
        margin-right: 0.5rem;
    }
    .cart-icon-right {
        font-size: 20px;
    }
    .cart-count {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }
}

/* Fallback for small screens */
@media (max-width: 768px) {
    .navbar {
        height: 60px; /* Reduced from 80px */
    }
    .navbar-container {
        padding: 0.3rem 1.5rem;
    }
    .navbar-logo {
        height: 30px;
    }
    .logo-container {
        margin-right: 1.5rem;
    }
    .cart-container {
        margin-right: 0.5rem;
    }
    .cart-icon-right {
        font-size: 20px;
    }
    .cart-count {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }
    
    .hamburger-menu {
        display: block;
        padding: 0.3rem; /* Reduced from 0.5rem */
    }
    .hamburger-menu span {
        width: 20px; /* Reduced from 25px */
        height: 1.5px; /* Reduced from 2px */
        margin: 4px 0; /* Reduced from 5px 0 */
    }
    .navbar {
        background-color: rgba(0, 0, 0, 0); /* Use transparent background on mobile too */
    }
    /* Add a fading background transition on mobile too */
    .navbar.scrolled {
        background-color: rgba(255, 87, 51, 1);
    }
    .navbar-links {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background-color: rgba(51, 51, 51, 0.95);
        padding: 1rem 1.5rem;
        pointer-events: auto;
        text-align: left;
    }
    .navbar-links.active {
        display: block;
    }
    .navbar-links .main-menu {
        flex-direction: column;
        gap: 0.75rem;
        text-align: left;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }
    .navbar-links .main-menu > li {
        width: 100%;
        display: block;
        text-align: left;
    }
    .navbar-links .main-menu > li > a {
        display: block;
        padding: 0.5rem 0;
        text-align: left;
        width: 100%;
    }
    .navbar-links .submenu {
        position: static;
        transform: none;
        left: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .nav-item.active > a,
    .nav-item.submenu-open > a {
        color: #FF5733; 
    }
    .submenu {
        position: static;
        margin-top: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        min-width: unset;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding-left: 1.25rem;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        text-align: left;
        width: 100%;
    }
    .submenu ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }
    .submenu li {
        text-align: left;
        width: 100%;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
        list-style: none;
    }
    .submenu a {
        width: 100%;
        display: block;
        text-align: left;
        padding: 0.4rem 0 0.4rem 1rem;
        margin: 0;
        position: relative;
        box-sizing: border-box;
    }
    /* Add dash line in the bullet position for mobile */
    .submenu a:before {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        background-color: #FF5733;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: width 0.3s ease;
    }
    /* Animate the dash line on active state */
    .submenu a.active:before,
    .submenu a:active:before {
        width: 8px; /* Short dash line */
    }
    /* Hide the desktop underline animation on mobile */
    .submenu a:after {
        display: none;
    }
    .has-submenu.active .submenu li {
        opacity: 1;
        transform: translateX(0);
    }
    .has-submenu {
        position: relative;
        padding-bottom: 0;
        margin: 0;
        padding: 0;
    }
    .has-submenu::before {
        display: none; /* Hide the bridge element on mobile */
    }
    .has-submenu > a {
        padding-right: 0;
    }
    .has-submenu > a::after {
        content: none;
    }
    .has-submenu:hover .submenu {
        max-height: 0;
    }
    .has-submenu.active .submenu {
        max-height: 300px;
        transition: max-height 0.3s ease-in;
        background-color: transparent;
        margin: 0;
        padding-top: 0;
    }
    .has-submenu.active > a {  
        color: #FF5733;
    }
    .has-submenu.active {
        padding-bottom: 0;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .navbar {
        height: 50px; /* Further reduced for very small screens */
    }
    /* The open panel is positioned from the top of the viewport, so its offset
       has to track the bar's height. The 768px block sets both to 60px; this
       block shrank the bar to 50px and left the panel at 60px, so a 10px band
       of page background showed between the bar and the menu — a white stripe
       on any page with a light hero. */
    .navbar-links {
        top: 50px;
    }
    .navbar-container {
        padding: 0.25rem 1rem; /* Further reduced padding */
    }
    .navbar-logo {
        height: 24px; /* Further reduced from 30px */
    }
    .logo-container {
        margin-right: 1rem; /* Further reduced from 1.5rem */
    }
    #language-select {
        min-width: 75px; /* Further reduced from 90px */
        padding: 0.4rem 0.6rem; /* Further reduced padding */
        font-size: 12px; /* Smaller font size */
    }
    .hamburger-menu {
        padding: 0.25rem; /* Further reduced from 0.3rem */
    }
    .hamburger-menu span {
        width: 18px; /* Further reduced from 20px */
        height: 1.2px; /* Further reduced from 1.5px */
        margin: 3px 0; /* Further reduced from 4px 0 */
    }
}

/* Mobile: Move hamburger to left of logo */
@media (max-width: 768px) {
    .navbar-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .hamburger-menu {
        order: 1; /* Hamburger first (left) */
        margin-left: 0;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    .logo-container {
        order: 2; /* Logo second (after hamburger) */
        margin-right: auto; /* Push remaining items to right */
        flex-shrink: 0;
    }
    .navbar-left {
        order: 3;
    }
    .navbar-right {
        order: 4; /* Cart stays on right */
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-right: 0;
    }
    .cart-container {
        margin-right: 0; /* Remove right margin on mobile since it's at edge */
    }
}

/* ===== Language Selector (Dynamic Island style) ===== */

/* Wrapper – positions the dropdown relative to the trigger */
.cls-wrap {
    position: relative;
    margin-right: 0;
}

/* Trigger pill */
.cls-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.3s ease, border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    position: relative;
    z-index: 10002;
}
.cls-trigger:hover {
    background: rgba(0, 0, 0, 0.35);
}
.cls-globe-icon {
    font-size: 16px;
    color: #fff;
}
.cls-trigger-label {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

/* Dropdown – the expanding island */
.cls-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    width: max-content;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 22px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform-origin: top right;
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    pointer-events: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.cls-dropdown.cls-open {
    max-height: 400px;
    opacity: 1;
    padding: 44px 6px 8px 6px;
    border-radius: 18px;
    pointer-events: auto;
}

/* Language items */
.cls-lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: #fff;
    white-space: nowrap;
}
.cls-lang-item:hover {
    background: rgba(255, 255, 255, 0.1);
}
.cls-lang-item.cls-lang-active {
    background: rgba(255, 87, 51, 0.2);
}
.cls-lang-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.cls-lang-active .cls-lang-name {
    color: #FF5733;
    font-weight: 600;
}
.cls-lang-check {
    color: #FF5733;
    font-size: 14px;
    margin-left: 12px;
}

/* Footer trigger + dropdown */
.cls-footer-wrap {
    position: relative;
    display: inline-block;
}
.cls-footer-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #ecf0f1;
    padding: 8px 14px;
    border: 1px solid #7f8c8d;
    border-radius: 20px;
    background: #34495e;
    transition: background 0.2s;
    font-size: 14px;
    position: relative;
    z-index: 10002;
}
.cls-footer-trigger:hover {
    background: #3d566e;
}
.cls-footer-trigger i {
    font-size: 16px;
}
.cls-footer-dropdown {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 100%;
    width: max-content;
    background: rgba(30, 30, 30, 0.95);
    border-radius: 20px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform-origin: bottom right;
    transition:
        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease,
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
    pointer-events: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
}
.cls-footer-dropdown.cls-open {
    max-height: 400px;
    opacity: 1;
    padding: 8px 6px 44px 6px;
    border-radius: 18px;
    pointer-events: auto;
}

@media (max-width: 768px) {
    .cls-wrap {
        margin-right: 8px;
    }
    .cls-trigger {
        padding: 6px;
    }
    .cls-trigger-label {
        display: none;
    }
    .cls-globe-icon {
        font-size: 18px;
    }
    .cls-dropdown.cls-open {
        padding-top: 38px;
    }
}</style><!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: Languages -->
<!-- With params: {"view":"Active"} -->
<!-- SQL: SELECT * FROM `cms_languages` WHERE `staging_active` = 1 -->
<!-- MySQL returned 9 records -->
<!-- ==================== DATABASE API CALL ==================== -->
<!-- MySQL query for table: Languages -->
<!-- With params: {"view":"Active"} -->
<!-- SQL: SELECT * FROM `cms_languages` WHERE `staging_active` = 1 -->
<!-- MySQL returned 9 records -->
<header class="site-header">
            <nav class="navbar">
                <div class="navbar-container">
                    <div class="logo-container">
                        <a href="/index.php">
                            <img src="/images/ch_logo.png" alt="Chord Hero Logo" class="navbar-logo">
                        </a>
                    </div>
                    <div class="navbar-left">
                        <nav class="navbar-links"><ul class="main-menu"><li class="active" data-cms-id="1" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="2"><a href="/../index.php" class="active">Home</a></li><li class="" data-cms-id="60" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="61"><a href="https://chordspheres.com/" class="">ChordSpheres</a></li><li class="has-submenu" data-cms-id="3" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="4"><a href="/../instruments/" class="">Instruments</a><ul class="submenu"><li class="" data-cms-id="56" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="57"><a href="/../instruments/" class=""><span class="submenu__label">All instruments</span><span class="submenu__desc">Compare the range</span></a></li><li class="" data-cms-id="5" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="6"><a href="/../maker-ukulele-set/" class=""><span class="submenu__label">Maker Ukulele Set</span><span class="submenu__desc">Build it, paint it, play it</span></a></li><li class="" data-cms-id="7" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="8"><a href="/../strummer/" class=""><span class="submenu__label">Strummer</span><span class="submenu__desc">A first guitar you won&#039;t outgrow</span></a></li></ul></li><li class="has-submenu" data-cms-id="48" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="49"><a href="/../chordventures/" class="">Apps &amp; games</a><ul class="submenu"><li class="" data-cms-id="11" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="12"><a href="/../chordventures/" class=""><span class="submenu__label">ChordVentures</span><span class="submenu__desc">Practice, disguised as play</span></a></li><li class="" data-cms-id="31" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="32"><a href="/../slashy-chords/" class=""><span class="submenu__label">Slashy Chords</span><span class="submenu__desc">Your guitar is the weapon</span></a></li><li class="" data-cms-id="33" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="34"><a href="/../xylofun/" class=""><span class="submenu__label">XyloFun</span><span class="submenu__desc">The toy becomes the lesson</span></a></li></ul></li><li class="has-submenu" data-cms-id="50" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="51"><a href="/../explorer-collections/" class="">Explore</a><ul class="submenu"><li class="" data-cms-id="81" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="82"><a href="/../van-gogh-explorer-set/" class=""><span class="submenu__label">Van Gogh Explorer Set</span><span class="submenu__desc">Paint like a master</span></a></li><li class="" data-cms-id="58" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="59"><a href="/../explorer-collections/" class=""><span class="submenu__label">Explorer Collections</span><span class="submenu__desc">One kit, many doors</span></a></li><li class="" data-cms-id="15" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="16"><a href="/../explorer-collections/mental-wellness" class=""><span class="submenu__label">Mental Wellness &amp; Music</span><span class="submenu__desc">Harmony for mind and spirit</span></a></li><li class="" data-cms-id="17" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="18"><a href="/../sandbox-experience/" class=""><span class="submenu__label">Sandbox Experience</span><span class="submenu__desc">Physical to digital</span></a></li><li class="" data-cms-id="19" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="20"><a href="/../music_gallery/" class=""><span class="submenu__label">Chord Hero Music Gallery</span><span class="submenu__desc">Where the work goes on show</span></a></li></ul></li><li class="" data-cms-id="23" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="24"><a href="/../newsroom/news.php" class="">Newsroom</a></li><li class="has-submenu" data-cms-id="52" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="53"><a href="/../about-chord-hero/" class="">About</a><ul class="submenu"><li class="" data-cms-id="27" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="28"><a href="/../about-chord-hero/van-gogh-site-foundation.php" class=""><span class="submenu__label">Van Gogh Site Foundation</span><span class="submenu__desc">An official partnership</span></a></li><li class="" data-cms-id="29" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="30"><a href="/../about-chord-hero/b-lab-hong-kong.php" class=""><span class="submenu__label">B Lab Hong Kong</span><span class="submenu__desc">Who vouches for us</span></a></li><li class="" data-cms-id="38" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="39"><a href="/../followus/" class=""><span class="submenu__label">Follow Us</span><span class="submenu__desc">Say hello</span></a></li><li class="" data-cms-id="40" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="41"><a href="/../survey/" class=""><span class="submenu__label">Exhibition Survey</span></a></li><li class="" data-cms-id="45" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="46"><a href="/../payment/" class=""><span class="submenu__label">Invoice Payment</span></a></li></ul></li><li class="" data-cms-id="42" data-cms-table="cms_navigation" data-cms-element="NavItem" data-cms-paired-id="43"><a href="/../upcoming/" class="">Events &amp; Promotions</a></li></ul></nav>
                    </div>
                    <div class="hamburger-menu" id="ch-hamburger-menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="navbar-right">
                        <div class="cls-wrap" id="cls-wrap">
                            <div class="cls-trigger" id="cls-trigger" title="English">
                                <i class="fas fa-globe cls-globe-icon"></i>
                                <span class="cls-trigger-label">English</span>
                            </div>
                            <div class="cls-dropdown" id="cls-dropdown">
                                <button class="cls-lang-item cls-lang-active" data-lang="en"><span class="cls-lang-name">English</span><i class="fas fa-check cls-lang-check"></i></button><button class="cls-lang-item" data-lang="zh_Hant"><span class="cls-lang-name">Chinese (Traditional)</span></button><button class="cls-lang-item" data-lang="zh_Hans"><span class="cls-lang-name">Chinese (Simplified)</span></button><button class="cls-lang-item" data-lang="ja"><span class="cls-lang-name">Japanese</span></button><button class="cls-lang-item" data-lang="fr"><span class="cls-lang-name">French</span></button><button class="cls-lang-item" data-lang="es"><span class="cls-lang-name">Spanish</span></button><button class="cls-lang-item" data-lang="kr"><span class="cls-lang-name">Korean</span></button><button class="cls-lang-item" data-lang="de"><span class="cls-lang-name">German</span></button><button class="cls-lang-item" data-lang="nl"><span class="cls-lang-name">Dutch</span></button>
                            </div>
                        </div>
                        <div class="cart-container" onclick="openCartSlider()">
                            <i class="fas fa-shopping-cart cart-icon-right"></i>
                            <span id="cart-count" class="cart-count">0</span>
                        </div>
                    </div>
                </div>
            </nav>
        </header><script>// Navbar scroll handler - centralized implementation
function ch_handleNavbarScroll() {
    const navbar = document.querySelector('.navbar');
    if (!navbar) return;
    
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
}

// Wait for DOM to be fully loaded before initializing
document.addEventListener('DOMContentLoaded', function() {
    // Cache navbar element
    const navbar = document.querySelector('.navbar');
    
    // Attach scroll event listener
    window.addEventListener('scroll', ch_handleNavbarScroll, { passive: true });
    
    // Initial check
    ch_handleNavbarScroll();
    
    // Also check on window load to ensure all assets are loaded
    window.addEventListener('load', ch_handleNavbarScroll);
    
    // Navigation elements - use more specific selectors with IDs where possible
    const hamburgerMenu = document.getElementById('ch-hamburger-menu') || document.querySelector('.hamburger-menu');
    const navbarLinks = document.querySelector('.navbar-links');
    const navbarLeft = document.querySelector('.navbar-left');
    const submenuParents = document.querySelectorAll('.has-submenu');
    
    if (hamburgerMenu && navbarLinks) {
        // Define the toggle function
        function toggleMenu() {
            navbarLinks.classList.toggle('active');
            if (navbarLeft) navbarLeft.classList.toggle('active');
            
            if (!navbarLinks.classList.contains('active')) {
                submenuParents.forEach(parent => parent.classList.remove('active'));
            }
        }
        
        // Add the event listener
        hamburgerMenu.addEventListener('click', toggleMenu);
    }

    // Submenu handling
    submenuParents.forEach(parent => {
        const link = parent.querySelector('a');
        if (link) {
            link.addEventListener('click', function(e) {
                if (window.innerWidth <= 768) {
                    e.preventDefault();
                    submenuParents.forEach(other => {
                        if (other !== parent) other.classList.remove('active');
                    });
                    parent.classList.toggle('active');
                }
            });
        }
    });
    
    // Mobile submenu item active state for animation
    if (window.innerWidth <= 768) {
        const submenuItems = document.querySelectorAll('.submenu a');
        submenuItems.forEach(item => {
            item.addEventListener('click', function(e) {
                // First remove active class from all other submenu items
                submenuItems.forEach(other => {
                    if (other !== item) other.classList.remove('active');
                });
                // Toggle active class on this item
                item.classList.toggle('active');
            });
        });
    }

    // Outside click handling
    document.addEventListener('click', function(e) {
        if (navbarLinks && hamburgerMenu && 
            !navbarLinks.contains(e.target) && 
            !hamburgerMenu.contains(e.target)) {
            navbarLinks.classList.remove('active');
            submenuParents.forEach(parent => parent.classList.remove('active'));
        }
    });
    
    // Dispatch event to notify other scripts
    document.dispatchEvent(new CustomEvent('navigationInitialized'));

    // ===== Language Selector (Dynamic Island) =====
    var clsDropdown = document.getElementById('cls-dropdown');
    var clsTrigger = document.getElementById('cls-trigger');
    var clsFooterDropdowns = document.querySelectorAll('.cls-footer-dropdown');

    function toggleNavDropdown(e) {
        e.preventDefault();
        e.stopPropagation();
        // Close any open footer dropdowns
        clsFooterDropdowns.forEach(function(d) { d.classList.remove('cls-open'); });
        if (clsDropdown) clsDropdown.classList.toggle('cls-open');
    }

    function toggleFooterDropdown(e, dropdown) {
        e.preventDefault();
        e.stopPropagation();
        // Close nav dropdown
        if (clsDropdown) clsDropdown.classList.remove('cls-open');
        // Close other footer dropdowns
        clsFooterDropdowns.forEach(function(d) {
            if (d !== dropdown) d.classList.remove('cls-open');
        });
        dropdown.classList.toggle('cls-open');
    }

    if (clsTrigger) clsTrigger.addEventListener('click', toggleNavDropdown);

    document.querySelectorAll('.cls-footer-trigger').forEach(function(el) {
        var dropdown = el.parentElement.querySelector('.cls-footer-dropdown');
        if (dropdown) {
            el.addEventListener('click', function(e) { toggleFooterDropdown(e, dropdown); });
        }
    });

    // Close on outside click
    document.addEventListener('click', function(e) {
        if (clsDropdown && !clsDropdown.contains(e.target) && clsTrigger && !clsTrigger.contains(e.target)) {
            clsDropdown.classList.remove('cls-open');
        }
        clsFooterDropdowns.forEach(function(d) {
            var wrap = d.parentElement;
            if (wrap && !wrap.contains(e.target)) {
                d.classList.remove('cls-open');
            }
        });
    });

    // ESC key closes
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (clsDropdown) clsDropdown.classList.remove('cls-open');
            clsFooterDropdowns.forEach(function(d) { d.classList.remove('cls-open'); });
        }
    });

    // Language item click → POST to language_handler.php
    document.querySelectorAll('.cls-lang-item').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            var lang = btn.getAttribute('data-lang');
            if (!lang) return;

            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/language_handler.php';
            form.style.display = 'none';

            var langInput = document.createElement('input');
            langInput.type = 'hidden';
            langInput.name = 'language';
            langInput.value = lang;
            form.appendChild(langInput);

            document.body.appendChild(form);
            form.submit();
        });
    });
});</script>
        <main>
            <div class="page-content"><div class="content-position position-main"><section class="statement statement--hero" data-cms-id="6330" data-cms-element="Statement"><img class="statement__bg" src="/images/followus.webp" alt=""><div class="statement__inner"><p class="eyebrow statement__eyebrow">Follow us</p><h1 class="display">Join Our Community</h1><p class="lede">Follow us on social media for the latest music learning tips, product updates, and community stories.</p></div></section><section class="fu" data-cms-id="3420" data-cms-element="SocialGrid"><div class="fu__head"><p class="eyebrow">Follow us on your favorite platform</p><h2 class="headline">Connect With Us</h2></div><div class="fu__grid"><a class="fu__card" href="https://www.facebook.com/chordheromusic/" target="_blank" rel="noopener"><span class="fu__platform">Facebook</span><span class="fu__handle">/chordheromusic</span><span class="fu__region">Worldwide</span></a><a class="fu__card" href="https://www.x.com/chordheromusic" target="_blank" rel="noopener"><span class="fu__platform">X</span><span class="fu__handle">@chordheromusic</span></a><a class="fu__card" href="https://www.instagram.com/chordheromusic" target="_blank" rel="noopener"><span class="fu__platform">Instagram</span><span class="fu__handle">@chordheromusic</span><span class="fu__region">Worldwide</span></a><a class="fu__card" href="https://www.linkedin.com/company/chordhero" target="_blank" rel="noopener"><span class="fu__platform">LinkedIn</span><span class="fu__handle">/company/chordhero</span></a><a class="fu__card" href="https://www.youtube.com/@chordheromusic" target="_blank" rel="noopener"><span class="fu__platform">YouTube</span><span class="fu__handle">@chordheromusic</span></a></div></section><section class="specs" data-cms-id="6335" data-cms-element="SpecSheet"><div class="specs__head"><p class="eyebrow">Why follow</p><h2 class="headline">Why Follow Chord Hero?</h2></div><div class="specs__grid"><div class="specs__col"><dl><dt>Community Stories</dt><dd>Real student success stories.</dd><dt>Product Updates</dt><dd>First to know about new features.</dd></dl></div><div class="specs__col"><dl><dt>Exclusive Content</dt><dd>Behind-the-scenes looks.</dd><dt>Special Offers</dt><dd>Subscriber-only discounts and early access.</dd></dl></div></div></section><div class="section newsletter-section" data-section-id="Newsletter" data-cms-id="6331" data-cms-element="Newsletter">
            <div class="newsletter-content">
                <h2>Get Music Learning Tips in Your Inbox</h2>
                <p>Sign up for music learning tips, product updates, and exclusive offers.</p>
                <form class="newsletter-form">
                    <input type="email" name="EMAIL" id="mce-EMAIL" required="" value="" placeholder="Enter your email" required>
                    <button type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
                </form>
            </div>
        </div></div></div>
        </main>
        <footer class="site-footer">
        <div class="footer-container">
            <div class="footer-content">
                <div class="footer-copyright">
                    © 2026 Chord Hero. All rights reserved.
                </div>
                <div class="footer-language">
                    <div class="cls-footer-wrap">
                        <div class="cls-footer-dropdown">
                            <button class="cls-lang-item cls-lang-active" data-lang="en"><span class="cls-lang-name">English</span><i class="fas fa-check cls-lang-check"></i></button><button class="cls-lang-item" data-lang="zh_Hant"><span class="cls-lang-name">Chinese (Traditional)</span></button><button class="cls-lang-item" data-lang="zh_Hans"><span class="cls-lang-name">Chinese (Simplified)</span></button><button class="cls-lang-item" data-lang="ja"><span class="cls-lang-name">Japanese</span></button><button class="cls-lang-item" data-lang="fr"><span class="cls-lang-name">French</span></button><button class="cls-lang-item" data-lang="es"><span class="cls-lang-name">Spanish</span></button><button class="cls-lang-item" data-lang="kr"><span class="cls-lang-name">Korean</span></button><button class="cls-lang-item" data-lang="de"><span class="cls-lang-name">German</span></button><button class="cls-lang-item" data-lang="nl"><span class="cls-lang-name">Dutch</span></button>
                        </div>
                        <div class="cls-footer-trigger">
                            <i class="fas fa-globe"></i>
                            <span>English</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <style>
            .site-footer {
                background: #2c3e50;
                color: #ecf0f1;
                padding: 2rem 0;
                margin-top: 4rem;
            }
            .footer-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
            }
            .footer-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 1rem;
            }
            .footer-copyright {
                font-size: 14px;
            }
            .footer-language {
                display: flex;
                align-items: center;
            }
            @media (max-width: 768px) {
                .footer-content {
                    flex-direction: column;
                    text-align: center;
                }
            }
        </style>
    </footer>
        <!-- The floating AR trigger that used to sit here (a fixed circle
             linking to /activate/) was removed in Aug 2026 at the request of
             the site owner: there are easier routes into the AR experience
             now, and a permanent overlay in the corner of every page covered
             content. /activate/ still works when linked directly. See git
             history to restore. -->
    <link rel="stylesheet" href="/visual-editor/assets/editor.css?v=1788959305">
<script src="/visual-editor/assets/editor.js?v=1788959305" defer></script>
</body>
    </html>
<!-- Page generation complete -->