/* Shared responsive and browser compatibility layer. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word}
img,video{max-width:100%;height:auto}
main,section,article,header,footer,nav,main div{min-width:0}
a,button,summary{-webkit-tap-highlight-color:rgba(200,247,134,.25);touch-action:manipulation}
button,input,select,textarea{font:inherit}
a:focus,button:focus,summary:focus{outline:2px solid #c8f786;outline-offset:4px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none}
.header{-webkit-backdrop-filter:blur(18px)}
.button,.navcta{min-height:44px;justify-content:center;text-align:center;max-width:100%}
.header nav a,footer a,.experience-back a{display:inline-flex;align-items:center;min-height:44px}
.role-switch{flex-wrap:wrap}.role-switch button{min-height:44px;min-width:44px;font-size:12px;padding:10px 12px}
.faq-list summary{min-height:44px;align-items:center}.faq-list summary::-webkit-details-marker{display:none}
.lyrics-demo.group{color:#c8f786}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.lyrics-demo.group{-webkit-background-clip:text;background-clip:text;color:transparent}}
.library-story p+p,.library-story .story-pills+p{margin-top:20px}
.story-pills,.color-chips{flex-wrap:wrap}
footer{flex-wrap:wrap}footer .business-notice{flex-basis:100%;max-width:900px;line-height:1.7}
.experience-title{font-size:12px!important;letter-spacing:2px!important;line-height:1.6}
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.feature p,.library-story p,.steps p,.faq-list p{font-size:16px}
.feature-footer,footer p,footer>div a,footer small,.demo-note{font-size:12px}
@media(max-width:1050px){
 .header{height:auto;min-height:80px;flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:10px}
 .header nav{display:flex;order:3;flex:0 0 100%;flex-wrap:wrap;gap:4px 18px;overflow:visible;padding:0;font-size:14px}
 .header nav a{flex-shrink:0;padding:6px 0}.header .navcta{margin-left:auto;font-size:14px}
 html{scroll-padding-top:185px}.feature-grid{gap:12px}.feature{padding:22px 16px}
}
@media(max-width:760px){
 .hero{padding:40px 6% 55px;gap:36px}.hero h1{font-size:clamp(42px,10vw,62px);letter-spacing:-2px}
 .intro,.section-heading>p:last-child,.how>div>p:last-child,.access p:not(.eyebrow){font-size:16px}
 .hero .eyebrow,.access .eyebrow,.story-label{font-size:11px;letter-spacing:1px;flex-wrap:wrap}
 .feature-grid{grid-template-columns:minmax(0,1fr)}.feature{padding:25px}
 .section-heading h2,.faq h2,.library-story h2{font-size:clamp(30px,8vw,40px);letter-spacing:-1px}
 .access h2{font-size:clamp(34px,9vw,46px)}.how h2{font-size:clamp(42px,11vw,57px)}
 .stage{transform:none;padding:18px 14px}.stage-wrap{padding-left:0;padding-right:0}.floating-tag{font-size:8px;right:0;transform:none}
 .record{width:140px;height:140px}.code-card{transform:none;left:0}.hero .textlink{margin:12px 0 0;display:table;font-size:14px}
 .story-pills span{font-size:12px}.library-story .button{margin:6px 0;width:100%}
 .shortcut-art{gap:4px}.shortcut-art span{padding:6px clamp(4px,2vw,10px);font-size:24px}
 .color-chips span{font-size:11px}.faq-list summary{font-size:16px}.faq-list p{margin-right:0}
 footer{align-items:flex-start}footer>div{width:100%;align-items:flex-start;margin-left:0;gap:4px}
 footer p{font-size:14px}footer>div a{font-size:14px}footer small{font-size:12px}
 header:not(.header) nav{flex-wrap:wrap;gap:8px 20px}header:not(.header) nav a{min-height:44px;display:inline-flex;align-items:center}
 .legal{padding-top:35px}.legal h1{font-size:clamp(30px,8vw,38px)}.legal a{overflow-wrap:anywhere}
}
@media(max-width:380px){.header{padding-left:16px;padding-right:16px}.header nav{gap:2px 14px;font-size:13px}.brand .brand-logo{width:135px}.role-switch{gap:5px}.role-switch button{font-size:11px;padding:8px}.feature{padding:22px 18px}}
@media(max-height:500px) and (orientation:landscape){.header{position:relative}html{scroll-padding-top:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip-link{position:absolute;top:-100px;left:16px;background:#c8f786;color:#172111;padding:12px 18px;z-index:100}.skip-link:focus{top:12px}