:root{--color-sky-blue: #5FBCD4;--color-sky-blue-light: #E8F6FA;--color-sky-blue-dark: #3FA0BA;--color-gold: #F7C664;--color-gold-dark: #E5B040;--color-warm-bg: #FAF6EF;--color-warm-bg-mid: #F2EBE0;--color-grey-0: #FFFFFF;--color-grey-50: #F8F9FA;--color-grey-100: #F1F3F4;--color-grey-300: #DADCE0;--color-grey-500: #9AA0A6;--color-grey-700: #5F6368;--color-grey-900: #202124;--color-charcoal: #1E2A35;--color-bg-base: var(--color-grey-0);--color-bg-warm: var(--color-warm-bg);--color-bg-hero: var(--color-sky-blue);--color-bg-dark: var(--color-charcoal);--color-text-primary: var(--color-grey-900);--color-text-secondary: var(--color-grey-700);--color-text-on-dark: rgba(255, 255, 255, 0.95);--color-text-on-dark-muted: rgba(255, 255, 255, 0.72);--color-border: var(--color-grey-300);--color-interactive-primary: var(--color-gold);--color-interactive-primary-hover: var(--color-gold-dark);--font-heading: ui-rounded, "Hiragino Maru Gothic ProN", Nunito, "Trebuchet MS", sans-serif;--font-body: ui-rounded, "Hiragino Maru Gothic ProN", Nunito, "Trebuchet MS", sans-serif;--type-display-sm: 2.25rem;--type-headline-lg: 2rem;--type-headline-md: 1.75rem;--type-headline-sm: 1.5rem;--type-title-lg: 1.375rem;--type-title-md: 1rem;--type-body-lg: 1rem;--type-body-md: 0.875rem;--type-label-lg: 0.875rem;--lh-display: 1.15;--lh-heading: 1.25;--lh-body: 1.6;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);--shadow-md: 0 2px 6px rgba(0,0,0,0.10);--shadow-lg: 0 4px 12px rgba(0,0,0,0.12);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--max-width: 1120px;--nav-height: 64px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:var(--type-body-lg);line-height:var(--lh-body);color:var(--color-text-primary);background-color:var(--color-bg-base);-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}ul{list-style:none}.container{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-4)}@media(min-width: 768px){.container{padding-inline:var(--space-6)}}@media(min-width: 1024px){.container{padding-inline:var(--space-8)}}.section-heading{font-family:var(--font-heading);font-size:var(--type-headline-sm);font-weight:800;line-height:var(--lh-heading);color:var(--color-text-primary);margin-bottom:var(--space-4)}.section-heading--centered{text-align:center}@media(min-width: 768px){.section-heading{font-size:var(--type-headline-md)}}.body-text{color:var(--color-text-secondary);line-height:var(--lh-body)}.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:var(--type-body-lg);border-radius:var(--radius-full);padding:var(--space-3) var(--space-6);cursor:pointer;transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease;border:none;text-align:center;white-space:nowrap}.btn:focus-visible{outline:3px solid var(--color-sky-blue-dark);outline-offset:3px}.btn--primary{background-color:var(--color-interactive-primary);color:var(--color-grey-900);box-shadow:var(--shadow-md);padding:var(--space-4) var(--space-8);font-size:1.0625rem}.btn--primary:hover{background-color:var(--color-interactive-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn--primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn--large{padding:var(--space-5) var(--space-10);font-size:1.125rem}.btn--nav{background-color:var(--color-interactive-primary);color:var(--color-grey-900);padding:var(--space-2) var(--space-5);font-size:var(--type-body-md);font-weight:700}.btn--nav:hover{background-color:var(--color-interactive-primary-hover)}.nav{position:sticky;top:0;z-index:100;height:var(--nav-height);background-color:rgba(255, 255, 255, 0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}.nav__inner{display:flex;align-items:center;justify-content:space-between;height:100%}.nav__logo{font-family:var(--font-heading);font-size:1.375rem;font-weight:800;letter-spacing:-0.01em;text-decoration:none}.nav__logo-uke{color:var(--color-sky-blue-dark)}.nav__logo-along{color:var(--color-grey-900)}.hero{background-color:var(--color-bg-hero);padding-block:var(--space-16) var(--space-20);overflow:hidden}.hero__inner{display:flex;flex-direction:column;gap:var(--space-10);align-items:flex-start}@media(min-width: 900px){.hero__inner{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--space-12)}}.hero__content{flex:1;min-width:0}.hero__eyebrow{font-family:var(--font-heading);font-size:var(--type-body-md);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255, 255, 255, 0.85);margin-bottom:var(--space-3)}.hero__headline{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:var(--lh-display);color:var(--color-grey-0);margin-bottom:var(--space-5)}.hero__sub{font-size:1.0625rem;line-height:var(--lh-body);color:rgba(255, 255, 255, 0.9);max-width:520px;margin-bottom:var(--space-8)}.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}.hero__microcopy{font-size:var(--type-body-md);color:rgba(255, 255, 255, 0.75)}.hero__visual{display:none;flex-shrink:0;flex-direction:row;align-items:flex-end;gap:var(--space-4)}@media(min-width: 900px){.hero__visual{display:flex}}.hero__chord-img{width:120px;height:auto;border-radius:var(--radius-lg)}.hero__chord-img--secondary{opacity:.7;transform:translateY(12px)}.what-it-is{background-color:var(--color-bg-warm);padding-block:var(--space-16)}.what-it-is__inner{display:flex;flex-direction:column;gap:var(--space-10)}@media(min-width: 768px){.what-it-is__inner{flex-direction:row;align-items:flex-start;gap:var(--space-12)}.what-it-is__text{flex:1.2}.what-it-is__modes{flex:1}}.what-it-is__modes{display:flex;flex-direction:column;gap:var(--space-4)}.mode-card{background:var(--color-grey-0);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.mode-card__title{font-family:var(--font-heading);font-size:var(--type-title-md);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-1)}.mode-card__body{font-size:var(--type-body-md);color:var(--color-text-secondary);line-height:var(--lh-body)}.screenshots{background-color:var(--color-bg-base);padding-block:var(--space-16)}.screenshots .section-heading{margin-bottom:var(--space-10)}.screenshots__row{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}@media(min-width: 600px){.screenshots__row{flex-direction:row;justify-content:center;align-items:flex-end;gap:var(--space-6)}}.phone-frame{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);flex:1;max-width:220px}.phone-frame--featured{max-width:260px}@media(min-width: 600px){.phone-frame--featured{transform:translateY(-16px)}}.phone-frame__screen{width:100%;aspect-ratio:9/16;background:var(--color-grey-100);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg),0 0 0 6px var(--color-grey-900),0 0 0 8px var(--color-grey-500);position:relative}.phone-frame__img{width:100%;height:100%;object-fit:cover;object-position:top}.phone-frame__caption{font-family:var(--font-heading);font-size:var(--type-body-md);font-weight:600;color:var(--color-text-secondary);text-align:center}.video-section{background-color:var(--color-bg-warm);padding-block:var(--space-16)}.video-section .section-heading{margin-bottom:var(--space-3)}.video-section__sub{text-align:center;color:var(--color-text-secondary);margin-bottom:var(--space-8)}.video-section__embed{max-width:360px;margin-inline:auto}.video-section__embed iframe{width:100%;aspect-ratio:9/16;border-radius:var(--radius-lg);overflow:hidden}.features{background-color:var(--color-bg-base);padding-block:var(--space-16)}.features .section-heading{margin-bottom:var(--space-10)}.features__grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width: 600px){.features__grid{grid-template-columns:repeat(2, 1fr)}}@media(min-width: 960px){.features__grid{grid-template-columns:repeat(3, 1fr)}.features__grid .feature-card:nth-child(4){grid-column:1/2;margin-left:auto;width:100%}.features__grid .feature-card:nth-child(5){grid-column:2/3;margin-right:auto;width:100%}}.feature-card{background:var(--color-bg-warm);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm);border:1px solid var(--color-warm-bg-mid);transition:box-shadow .18s ease,transform .18s ease}.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-card__icon{font-size:2rem;margin-bottom:var(--space-3);display:block}.feature-card__title{font-family:var(--font-heading);font-size:var(--type-title-md);font-weight:700;color:var(--color-text-primary);margin-bottom:var(--space-2)}.feature-card__body{font-size:var(--type-body-md);color:var(--color-text-secondary);line-height:var(--lh-body)}.stat-band{background-color:var(--color-sky-blue-light);padding-block:var(--space-12);border-top:1px solid rgba(95, 188, 212, 0.25);border-bottom:1px solid rgba(95, 188, 212, 0.25)}.stat-band__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}@media(min-width: 768px){.stat-band__inner{flex-direction:row;text-align:left;gap:var(--space-10)}}.stat-band__number{font-family:var(--font-heading);font-size:clamp(3rem,8vw,4.5rem);font-weight:800;color:var(--color-sky-blue-dark);line-height:1;flex-shrink:0}.stat-band__heading{font-family:var(--font-heading);font-size:var(--type-headline-sm);font-weight:800;color:var(--color-text-primary);margin-bottom:var(--space-2)}.stat-band__body{color:var(--color-text-secondary);line-height:var(--lh-body)}.stat-band__link{color:var(--color-sky-blue-dark);text-decoration:underline;text-underline-offset:2px;font-weight:600}.stat-band__link:hover{color:var(--color-charcoal)}.beta{background-color:var(--color-bg-warm);padding-block:var(--space-16) var(--space-20)}.beta__inner{display:flex;flex-direction:column;gap:var(--space-10)}@media(min-width: 768px){.beta__inner{flex-direction:row;align-items:flex-start;gap:var(--space-12)}.beta__explainer{flex:1.2}.beta__cta{flex:1}}.beta__list{margin-block:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.beta__list li{display:flex;align-items:flex-start;gap:var(--space-3);color:var(--color-text-secondary);font-size:var(--type-body-lg);line-height:var(--lh-body)}.beta__list li::before{content:"";display:block;width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-sky-blue);flex-shrink:0;margin-top:8px}.beta__requirement{font-size:var(--type-body-md);color:var(--color-charcoal);background:rgba(95, 188, 212, 0.15);border-left:3px solid var(--color-sky-blue);border-radius:0 var(--radius-xs) var(--radius-xs) 0;padding:var(--space-3) var(--space-4);margin-top:var(--space-4);font-weight:600}.beta__cta-card{background:var(--color-grey-0);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md);border:1px solid var(--color-border);text-align:center}.beta__cta-eyebrow{font-family:var(--font-heading);font-size:var(--type-body-md);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-sky-blue-dark);margin-bottom:var(--space-2)}.beta__cta-title{font-family:var(--font-heading);font-size:var(--type-headline-sm);font-weight:800;color:var(--color-text-primary);margin-bottom:var(--space-3)}.beta__cta-body{font-size:var(--type-body-md);color:var(--color-text-secondary);margin-bottom:var(--space-6);line-height:var(--lh-body)}.beta__cta-microcopy{font-size:var(--type-body-md);color:var(--color-grey-500);margin-top:var(--space-3)}.footer{background-color:var(--color-bg-dark);padding-block:var(--space-8)}.footer__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}@media(min-width: 600px){.footer__inner{flex-direction:row;justify-content:space-between;text-align:left}}.footer__tagline{font-family:var(--font-heading);font-size:var(--type-body-md);font-weight:600;color:var(--color-text-on-dark-muted)}.footer__link{font-size:var(--type-body-md);color:var(--color-sky-blue);text-decoration:underline;text-underline-offset:2px;font-weight:600}.footer__link:hover{color:var(--color-sky-blue-light)}.nav--scrolled{box-shadow:var(--shadow-md)}
