@font-face{font-family:"Interstate";src:url("../fonts/InterstateLight.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Interstate";src:url("../fonts/InterstateRegular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Interstate";src:url("../fonts/InterstateBold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:"Lucida Grande","Helvetica Neue",Helvetica,Arial,sans-serif;background:#ffffff;color:#4d4d4d;font-size:14px}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

.utilitybar{background:linear-gradient(#8f8f8f,#7a7a7a);font-size:12px;width:100%;border-bottom:1px solid #666}
.utilitybar-inner{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:28px}
.utilitybar a{color:#f2f2f2;font-weight:700}
.utilitybar a:hover{color:#ffffff;text-decoration:underline}
.utilitybar .sep{color:#cccccc;margin:0 8px;font-weight:400}

.navbar{background:linear-gradient(#f9f9f9,#e8e8e8);border-bottom:1px solid #ccc;height:45px;box-shadow:0 1px 2px rgba(0,0,0,0.05)}
.navbar-inner{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:flex-end;height:100%}
.brand{margin-top:-22px;margin-right:20px;z-index:10;display:flex;align-items:center}
.brand-icon{height:52px;width:auto}

.navtab{position:relative;font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;color:#333;padding:0 14px;background:#e5f0f9;border-radius:4px 4px 0 0;margin-right:2px;height:34px;display:flex;align-items:center}
.navtab-active{border-bottom:3px solid #ff5500;font-weight:700;background:#e5f0f9;color:#333}
.navtab:not(.navtab-active):hover{border-bottom:3px solid #ff5500}
.navtab-pill{background:linear-gradient(#fdfdfd,#e4e4e4);border:1px solid #c9c9c9;border-radius:15px;padding:5px 14px;font-size:13px;margin-left:12px;margin-bottom:8px;font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;color:#333;box-shadow:0 1px 1px rgba(0,0,0,0.05)}
.navtab-pill:hover{background:linear-gradient(#ffffff,#dcdcdc)}

.searchbar{margin-left:auto;display:flex;margin-bottom:10px;height:24px}
.searchbar input{width:220px;padding:0 8px;border:1px solid #cfcfcf;border-radius:3px 0 0 3px;font-size:12px;font-family:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-right:none;height:100%}
.searchbar button{padding:0 8px;border:1px solid #cfcfcf;background:linear-gradient(#f7f7f7,#e4e4e4);font-size:10px;cursor:pointer;border-radius:0 3px 3px 0;height:100%;color:#555}

.hero{padding:56px 20px 44px}
.hero-inner{max-width:1040px;margin:0 auto;display:flex;align-items:flex-start;gap:44px}
.hero-copy{flex:1;max-width:480px;min-width:260px}
.hero-copy h1{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:44px;color:#3f8fd2;font-weight:300;margin-bottom:20px;letter-spacing:-1px}
.hero-copy p{font-size:16px;color:#5a5a5a;margin-bottom:6px;line-height:1.4;font-weight:300}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero-media{flex:1;padding-top:6px;min-width:240px}
.hero-media img{max-width:90%}

.btn{display:inline-block;border-radius:6px;font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;cursor:pointer;border:none}
.btn-solid{background:linear-gradient(#ffb27a 0%,#fa8142 8%,#ee5c22 50%,#e2500f 52%,#d1450f 100%);border:1px solid #b23a0c;box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.2);color:#ffffff}
.btn-solid:hover{background:linear-gradient(#ffc696 0%,#fb9257 8%,#f16c33 50%,#e65f1f 52%,#d94f17 100%)}
.btn-ghost{background:linear-gradient(#ffffff 0%,#f4f4f4 8%,#e0e0e0 50%,#d2d2d2 52%,#c4c4c4 100%);border:1px solid #a8a8a8;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.15);color:#333333}
.btn-ghost:hover{background:linear-gradient(#ffffff 0%,#fafafa 8%,#e8e8e8 50%,#dadada 52%,#cccccc 100%)}
.btn-hero{padding:11px 24px;font-size:15px}
.btn-pill{background:linear-gradient(#ffffff 0%,#f4f4f4 8%,#e0e0e0 50%,#d2d2d2 52%,#c4c4c4 100%);border:1px solid #a8a8a8;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 1px 2px rgba(0,0,0,0.12);border-radius:16px;padding:8px 18px;font-size:13px;color:#333333}
.btn-pill:hover{background:linear-gradient(#ffffff,#dadada)}
.btn-small{padding:4px 14px;font-size:11px}

.features{padding:50px 20px 24px}
.features-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:60px}
.feature h2{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:18px;color:#3f8fd2;font-weight:400;margin-bottom:10px}
.feature p{font-size:13px;color:#5a5a5a;line-height:1.6;margin-bottom:14px}
.feature a{color:#3f8fd2}
.feature img{height:80px;width:auto;margin-top:6px}
.feature img.icon-guitar{height:120px}

.newsbar{max-width:1040px;margin:6px auto 30px;padding:14px 20px;border:1px solid #e0e0e0;border-radius:3px}
.newsbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.newsbar-tag{color:#ff5500;font-weight:700}
.newsbar-sep{color:#cccccc;margin:0 8px}
.newsbar-text a{color:#3f8fd2}
.newsbar-social{display:flex;align-items:center;gap:8px;font-size:12px;color:#5a5a5a}
.newsbar-social img{height:20px;width:20px}

.promo{padding:0 20px 44px}
.promo-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.promo-card{background:#f6f6f6;border-radius:4px;padding:18px;display:flex;gap:14px;flex-wrap:wrap}
.promo-icon img{width:70px;height:70px}
.promo-body{flex:1;min-width:160px}
.promo-body h3{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;color:#3f8fd2;font-weight:400;margin-bottom:8px}
.promo-body p{font-size:12px;color:#5a5a5a;margin-bottom:12px;line-height:1.6}

.sitefooter{background:#7d7d7d;padding-top:30px;position:relative}
.sitefooter-inner{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:0 20px 24px}
.footcol h4{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;color:#ffffff;font-size:13px;margin-bottom:10px;font-weight:700}
.footcol a,.footcol p{display:block;color:#e0e0e0;font-size:11px;margin-bottom:7px}
.footcol a:hover{color:#ffffff}
.sitefooter-bottom{background:#6f6f6f;padding:12px 20px;font-size:11px;color:#dcdcdc;position:relative}
.sitefooter-bottom a{color:#dcdcdc}
.sitefooter-bottom a:hover{color:#ffffff}
.footer-logo{position:absolute;right:20px;bottom:8px;height:44px;width:auto;opacity:0.5}

.status-page{max-width:600px;margin:80px auto;padding:0 20px;text-align:center}
.status-page h1{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:32px;color:#3f8fd2;font-weight:300;margin-bottom:16px}
.status-page p{font-size:15px;color:#5a5a5a;margin-bottom:10px}
.status-login-link{color:#3f8fd2;font-weight:700;font-size:18px}
.status-warning{font-size:12px;color:#b3261e;margin-top:20px}

.signup-wrap{position:relative}

.auth-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);width:360px;background:#ffffff;border:2px solid #1a1a1a;border-radius:6px;padding:24px;box-shadow:0 10px 24px rgba(0,0,0,0.35);z-index:200;opacity:0;visibility:hidden;transition:opacity 0.2s ease-out,transform 0.2s ease-out;pointer-events:none;max-height:80vh;overflow-y:auto}
.auth-dropdown.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.auth-dropdown::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:11px solid #1a1a1a}
.auth-dropdown::after{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:10px solid #ffffff}

.auth-dropdown.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.96)}
.auth-dropdown.centered.open{transform:translate(-50%,-50%) scale(1)}
.auth-dropdown.centered::before,.auth-dropdown.centered::after{display:none}

.modal-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:20px;color:#999999;cursor:pointer;line-height:1}
.modal-close:hover{color:#333333}
.auth-dropdown h2{font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:400;margin-bottom:16px;color:#333333}

.modal-tabs{display:flex;border-bottom:1px solid #e0e0e0;margin-bottom:14px}
.modal-tab{background:none;border:none;padding:8px 4px;margin-right:20px;font-size:13px;color:#999999;cursor:pointer;font-family:"Interstate","Helvetica Neue",Helvetica,Arial,sans-serif;border-bottom:2px solid transparent}
.modal-tab-active{color:#ff5500;border-bottom-color:#ff5500;font-weight:700}
.modal-pane{display:none;flex-direction:column;gap:10px}
.modal-pane-active{display:flex}
.modal-pane label{font-size:11px;color:#5a5a5a;margin-bottom:2px;display:block}
.modal-pane input{width:100%;padding:8px 9px;border:1px solid #cccccc;border-radius:3px;font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

.modal-error{display:none;background:#fdecea;border:1px solid #e57373;color:#b3261e;font-size:11px;padding:7px 9px;border-radius:3px;margin-bottom:2px}
.modal-error-visible{display:block}

.wizard{display:flex !important;flex-direction:column}
.wizard-step{display:none;flex-direction:column;gap:10px}
.wizard-step-active{display:flex}
.wizard-step label{font-size:11px;color:#5a5a5a;margin-bottom:2px;display:block}
.wizard-step input{width:100%;padding:8px 9px;border:1px solid #cccccc;border-radius:3px;font-size:13px}
.charcount{float:right;color:#999999;font-weight:400}
.status-link{color:#3f8fd2;font-size:12px;word-break:break-all}

@media(max-width:900px){
.hero-inner{flex-direction:column}
.features-inner{grid-template-columns:1fr;gap:30px}
.promo-inner{grid-template-columns:1fr}
.sitefooter-inner{grid-template-columns:repeat(3,1fr)}
.searchbar{display:none}
.hero-copy h1{font-size:34px}
}

@media(max-width:600px){
.utilitybar-inner{flex-wrap:wrap;height:auto;padding:4px 12px}
.hero{padding:40px 16px}
.hero-copy h1{font-size:30px}
.features{padding:30px 16px}
.newsbar{margin:16px;padding:14px}
.promo{padding:0 16px 30px}
.sitefooter-inner{grid-template-columns:1fr;text-align:center;padding:0 16px 16px}
.footer-logo{display:none}
.auth-dropdown{width:88vw;left:50%}
.auth-dropdown.centered{width:88vw}
}