@import url('/drumflx/fonts.css');
/* The source still includes a white export margin; crop it at display time. */
.render-stage img,.download-art img,.full-demo>img{clip-path:inset(4.62% 2.72% round 4px)}
.hero .plugin-window{border:0}
:root{color-scheme:dark;--bg:#030305;--paper:#fcfcfc;--muted:#a8a8b0;--line:#ffffff24;--green:#b4e600;--violet:#3b19ff;--display:'Clash Display',sans-serif;--mono:'Chivo Mono',monospace;--label:'Chakra Petch',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;background:var(--bg);color:var(--paper);font:400 15px/1.65 var(--mono);-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{outline-offset:5px}button{cursor:pointer}button:disabled{cursor:default}img{max-width:100%;display:block}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--green)}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.035em}h2{font-size:clamp(38px,4.4vw,66px)}h3{font-size:27px}p{color:var(--muted)}.wrap{width:min(1320px,calc(100% - 96px));margin:auto}.eyebrow{color:var(--green);font:700 13px/1.4 var(--label);letter-spacing:.13em;text-transform:uppercase}.mono{font-family:var(--mono)}.skip{position:fixed;left:16px;top:-100px;z-index:100;background:var(--green);color:black;padding:12px}.skip:focus{top:10px}
.announcement{height:34px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--green);color:#000;font:700 12px var(--label);letter-spacing:.025em}.pulse{width:10px;height:10px;background:var(--violet);border-radius:50%;box-shadow:0 0 0 6px #3b19ff19}.navigation{height:84px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:#000;position:relative;z-index:15;border-bottom:1px solid #ffffff08}.brand img{width:108px;height:auto;filter:invert(1)}.nav-links{display:flex;align-items:center;gap:34px;font:700 14px var(--label);letter-spacing:.07em;color:#cfcfcf}.nav-links a:hover,.nav-links a.active{color:var(--green)}.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:14px 24px;border:1px solid transparent;border-radius:7px;background:var(--violet);color:#fff;font:600 14px/1.25 var(--mono);text-transform:uppercase;transition:background .18s,transform .18s,box-shadow .18s}.btn:hover{background:#4c2cff;box-shadow:0 5px 25px #3b19ff35;transform:translateY(-2px)}.btn .arrow{font-size:20px;line-height:1}.btn.large{padding:18px 30px;min-width:244px;font-size:16px}.btn.ghost{background:transparent;border-color:#ffffff80}.btn.ghost:hover{background:#ffffff0d}.btn.green{background:var(--green);color:#000}.btn.green:hover{background:#c5ff00}.nav-cta{min-height:39px;font-size:12px;padding:12px 18px}.mobile-menu{display:none;background:none;border:0;width:44px;height:44px;padding:9px}.mobile-menu span{display:block;height:1px;background:white;margin:7px 0}
.hero{position:relative;overflow:hidden;text-align:center;padding:65px 0 0;background:#010104}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#030305 0%,transparent 45%),url('/drumflx/assets/8c28f8bf7043fda205.jpg') center top/cover no-repeat;opacity:.75;pointer-events:none}.hero>.wrap{position:relative}.hero h1{font-size:clamp(78px,11.6vw,164px);letter-spacing:-.055em;line-height:.92;margin:22px 0 16px}.hero h1 .x{color:var(--green)}.hero-subtitle{font:500 clamp(25px,3vw,38px)/1.15 var(--display);letter-spacing:-.025em;color:#fcfcfc}.hero-copy{max-width:640px;margin:18px auto 24px;font-size:14px;line-height:1.8;color:#b9b7c2}.cta-note{font-size:11px;color:#a39fae;margin-top:12px}.plugin-wrap{max-width:1120px;margin:42px auto 0;position:relative}.plugin-header{padding:11px 18px;border:1px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:space-between;background:#111115e8;font:10px var(--mono);color:#aaa;letter-spacing:.04em}.plugin-header span:first-child{color:var(--green)}.plugin-window{position:relative;width:100%;aspect-ratio:1176/780;border:1px solid #ffffff30;border-radius:0 0 14px 14px;background:#08080a;overflow:hidden;box-shadow:0 35px 100px #000a,0 0 85px #3b19ff0d}.plugin-window iframe{display:block;border:0;width:1176px;height:780px;transform-origin:top left;background:#08080a}.plugin-caption{font-size:11px;margin:16px auto 0;color:#8c889a;max-width:780px;padding:0 15px}.plugin-caption strong{color:#cac7d0;font-weight:400}.hero-bottom{margin:36px auto 0;display:flex;justify-content:center;gap:36px;padding:26px;border-top:1px solid var(--line);font:700 12px var(--label);letter-spacing:.07em;color:#d1cfd7}.hero-bottom span::before{content:'+';color:var(--green);margin-right:10px}
.credit-band{padding:64px 0;border-top:1px solid #ffffff0c;border-bottom:1px solid var(--line);background:#08080b}.credit-band .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.credit-band h2{font-size:39px;margin-top:12px}.credit-copy{max-width:540px;font-size:13px}.credit-copy p+p{margin-top:16px}.credit-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.credit-tags a{padding:7px 12px;border:1px solid #ffffff25;border-radius:4px;color:#c5c3ce;font:600 12px var(--label);letter-spacing:.07em}.credit-tags a:hover{border-color:var(--green)}
.section{padding:120px 0}.section-heading{max-width:760px}.section-heading h2{margin:17px 0 24px}.section-heading p{max-width:620px;font-size:14px;line-height:1.85}.modes-intro{text-align:center;margin:0 auto 80px}.modes-intro p{margin-inline:auto}.mode{display:grid;grid-template-columns:1.04fr 1fr;gap:90px;align-items:center}.mode+.mode{margin-top:145px}.mode.reverse{grid-template-columns:1fr 1.04fr}.mode h2{font-size:clamp(40px,4.4vw,64px);margin:18px 0 20px}.mode .body-copy{font-size:13px;line-height:1.9;max-width:490px}.render-stage{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative;perspective:1100px;background:radial-gradient(ellipse at 55% 50%,#3b19ff30,transparent 66%);border-radius:16px;isolation:isolate}.render-stage:before{content:'';position:absolute;inset:16%;border:1px solid #6859bb2b;border-radius:50%;transform:rotateX(64deg) translateY(70px);box-shadow:0 0 65px #3b19ff20}.render-stage img{width:100%;max-width:100%;border-radius:15px;transform:rotateY(14deg) rotateX(6deg) rotateZ(-5deg);filter:drop-shadow(0 35px 22px #000c);position:relative}.reverse .render-stage{background:radial-gradient(ellipse at 45% 50%,#af422128,transparent 66%)}.reverse .render-stage:before{border-color:#b060352b;box-shadow:0 0 65px #90352018}.reverse .render-stage img{transform:rotateY(-14deg) rotateX(6deg) rotateZ(5deg)}.render-label{position:absolute;bottom:22px;left:0;right:0;text-align:center;font:10px var(--mono);color:#6f6c7b;letter-spacing:.04em}.mode-number{position:absolute;top:0;left:0;color:#ffffff08;font:500 130px var(--display);line-height:1}.demo-list{margin-top:28px;border-top:1px solid var(--line)}.demo-row{display:grid;grid-template-columns:34px 1fr 1.2fr auto;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.demo-row button{border:1px solid #ffffff36;border-radius:50%;width:31px;height:31px;background:#ffffff05;color:#92909c;font-size:9px;padding:0}.demo-row b{font:400 12px var(--mono);color:#d0cdd9}.demo-row small{font:10px var(--mono);color:#777480}.wave{height:25px;display:flex;gap:3px;align-items:center;overflow:hidden;opacity:.25}.wave i{display:block;width:2px;flex-shrink:0;background:#a49dba;height:var(--h)}.demos-note{font-size:10px;color:#75717f;margin-top:12px}.feature-section{background:linear-gradient(120deg,#0c0819,#050507);border-block:1px solid #ffffff13}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;gap:26px}.feature{padding:25px 0;border-top:1px solid #ffffff36}.feature .n{color:var(--green);font-size:11px;margin-bottom:24px}.feature h3{font-size:26px;line-height:1.15;margin-bottom:15px}.feature p{font-size:12px;line-height:1.85}.feature svg{width:30px;height:30px;stroke:var(--green);margin-bottom:22px}
.requirements{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-bottom:90px;border-bottom:1px solid var(--line)}.requirements h2{font-size:45px}.requirements .eyebrow{margin-bottom:18px}.requirements-copy{margin-top:22px;font-size:12px;max-width:450px}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.spec{border:1px solid var(--line);border-radius:10px;padding:24px;background:#ffffff03}.spec h3{font-size:24px;margin-bottom:18px}.spec ul{list-style:none;padding:0;margin:0;font-size:12px;color:#b4b0bf}.spec li+li{margin-top:10px}.spec small{display:block;margin-top:20px;color:#726e7c;font-size:10px}.faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px;padding-top:90px}.faq-wrap h2{font-size:45px}.faq-wrap .eyebrow{margin-bottom:18px}details{border-bottom:1px solid var(--line)}details:first-child{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:22px 35px 22px 0;font:500 20px var(--display);letter-spacing:-.01em;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:4px;color:var(--green);font-family:var(--mono);font-size:22px}details[open] summary:after{content:'−'}details p{font-size:12px;line-height:1.9;padding:0 25px 23px 0}details a{color:var(--green);text-decoration:underline}.final-cta{text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 110%,#3b19ff40,transparent 65%);padding:95px 0 105px;border-top:1px solid var(--line)}.final-cta h2{font-size:clamp(44px,6vw,80px);margin:20px 0 30px}.final-cta p{margin:14px 0 25px;font-size:13px}.footer{border-top:1px solid var(--line);background:#030304;padding:55px 0 75px}.footer-top{display:flex;justify-content:space-between;gap:60px}.footer h3{font-size:29px}.footer p{font-size:12px;max-width:400px;margin-top:16px}.footer-links{display:flex;gap:40px;font:600 13px var(--label)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:55px;font-size:10px;color:#65616e}.footer-bottom div{display:flex;gap:20px}.preview-rail{position:fixed;bottom:10px;left:10px;z-index:35;display:flex;gap:14px;align-items:center;border:1px solid #ffffff2b;border-radius:999px;background:#08080cee;padding:7px 13px;font:10px var(--mono);color:#8f8a9d;backdrop-filter:blur(12px)}.preview-rail a{color:var(--green)}
.modal-shade{position:fixed;inset:0;background:#000b;backdrop-filter:blur(13px);z-index:50;display:grid;place-items:center;padding:24px}.modal{position:relative;width:min(520px,100%);max-height:90dvh;overflow:auto;border:1px solid #ffffff30;border-radius:16px;padding:42px;background:radial-gradient(ellipse at 100% 0%,#25115b,#101014 60%);box-shadow:0 30px 120px #000b}.modal h2{font-size:43px;margin:15px 0}.modal p{font-size:13px;line-height:1.8}.modal-close{position:absolute;right:16px;top:12px;background:none;border:0;color:#bdb8ca;font-size:28px;font-weight:200;line-height:1;padding:6px}.modal form{margin-top:28px}.field-label{display:block;font:700 12px var(--label);letter-spacing:.08em;margin-bottom:9px}.modal input[type=email]{width:100%;background:#07070b;border:1px solid #ffffff3a;color:#fff;padding:16px;border-radius:7px;font-size:14px}.consent{display:flex;gap:12px;align-items:flex-start;margin:18px 0 22px;font-size:11px;color:#a8a3b2;line-height:1.7}.consent input{accent-color:var(--green);width:16px;height:16px;margin:3px 0 0;flex-shrink:0}.consent a{color:#d5d1de;text-decoration:underline}.modal .btn{width:100%;margin-top:2px}.form-error{color:#ff9cba!important;font-size:11px!important;margin-bottom:12px!important}.preview-note{font-size:10px!important;color:#817a91!important;margin-top:15px!important}.modal .icon-envelope{color:var(--green);font-size:32px}.status-page{min-height:530px;position:relative;text-align:center;padding:90px 0 80px;background:radial-gradient(ellipse at 50% 0%,#1c0b45,transparent 65%)}.status-page h1{font-size:clamp(44px,5vw,72px);max-width:830px;margin:23px auto}.status-page .copy{max-width:550px;margin:auto;font-size:14px}.status-page .email-output{color:white;overflow-wrap:anywhere}.status-page .reminder{font-size:12px;margin-top:22px}.status-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 22px;border:1px solid #b4e60077;border-radius:50%;font-size:26px;color:var(--green)}.status-page .btn{margin-top:26px}.tone-block{padding:80px 0;border-top:1px solid var(--line);background:radial-gradient(ellipse at 10% 100%,#4214153b,transparent 70%)}.tone-inner{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center;max-width:1120px;margin:auto}.tone-inner img{width:90%;margin:auto;filter:drop-shadow(0 25px 25px #000b)}.tone-inner h2{margin:17px 0 22px;font-size:54px}.tone-inner p{font-size:13px;margin-bottom:24px}.download-hero{padding:65px 0;background:radial-gradient(ellipse at 20% 30%,#221052,transparent 55%)}.download-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:75px;align-items:center}.download-art img{border-radius:12px;filter:drop-shadow(0 25px 25px #0009)}.download-art p{font-size:10px;text-align:center;margin-top:15px}.download-grid h1{font-size:75px;margin:16px 0}.download-grid .body-copy{font-size:13px;max-width:450px}.platforms{display:flex;gap:12px;margin:27px 0 16px}.platforms .btn{flex:1;gap:12px}.support-buttons{display:flex;gap:22px;margin-top:22px}.text-button{font:600 11px var(--mono);color:#c7c1d3;border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:5px}.mobile-panel{position:absolute;top:84px;left:0;right:0;background:#0a0a0f;padding:25px;border-bottom:1px solid var(--line);display:grid;gap:22px;font-family:var(--label)}.mobile-panel[hidden]{display:none}
@media(min-width:1600px){.hero{padding-top:90px}.hero-copy{margin-bottom:28px}.plugin-wrap{margin-top:55px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.mode,.mode.reverse{gap:45px}.nav-links{gap:22px}.feature-grid{gap:20px}.requirements,.faq-wrap{gap:55px}.hero{padding-top:55px}.credit-band .wrap{gap:40px}.tone-inner{gap:30px}.download-grid{gap:35px}.download-grid h1{font-size:60px}.demo-row{grid-template-columns:31px 1fr auto}.wave{display:none}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.announcement{font-size:10px;height:30px}.navigation{padding:0 18px;height:74px}.brand img{width:90px}.nav-links,.navigation>.nav-cta{display:none}.mobile-menu{display:block}.mobile-panel{top:74px}.hero{padding-top:45px}.hero h1{font-size:clamp(76px,17vw,126px);margin:20px 0 16px}.hero-subtitle{font-size:28px}.hero-copy{font-size:12px;max-width:460px;margin:17px auto 23px}.btn.large{font-size:13px;padding:16px 24px;min-width:225px}.cta-note{font-size:10px}.plugin-wrap{margin-top:30px}.plugin-header{font-size:8px;padding:10px}.plugin-header span:last-child{display:none}.plugin-caption{font-size:9px;margin-top:12px;line-height:1.7}.hero-bottom{margin-top:28px;padding:22px 0;gap:15px;flex-wrap:wrap;font-size:10px}.hero-bottom span::before{margin-right:5px}.credit-band{padding:42px 0}.credit-band .wrap{grid-template-columns:1fr;gap:24px}.credit-band h2{font-size:34px}.credit-copy{font-size:12px}.credit-tags{gap:8px}.credit-tags a{font-size:10px}.section{padding:74px 0}.section-heading h2{font-size:39px;margin-top:14px}.section-heading p{font-size:12px}.modes-intro{margin-bottom:40px}.mode,.mode.reverse{display:flex;flex-direction:column;gap:14px}.mode.reverse .render-stage{order:-1}.mode+.mode{margin-top:75px}.render-stage{width:100%;max-width:500px;aspect-ratio:1.25/1}.render-stage img{width:95%;max-width:95%}.render-label{bottom:0;font-size:9px}.mode-number{font-size:85px;top:0}.mode-copy{width:100%}.mode h2{font-size:43px;margin:15px 0}.mode .body-copy{font-size:12px;max-width:none}.demo-list{margin-top:22px}.demo-row{padding:15px 0;grid-template-columns:31px 1fr .8fr auto}.wave{display:flex}.demo-row b{font-size:11px}.demo-row small{font-size:9px}.feature-grid{grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}.feature{padding:20px 0}.feature h3{font-size:23px}.feature p{font-size:11px}.feature .n{margin-bottom:15px}.requirements,.faq-wrap{display:block}.requirements{padding-bottom:55px}.requirements h2,.faq-wrap h2{font-size:38px}.requirements-copy{margin:18px 0 26px}.spec-grid{gap:12px}.spec{padding:20px 16px}.spec h3{font-size:23px}.spec ul{font-size:11px}.faq-wrap{padding-top:60px}.faq-list{margin-top:32px}summary{font-size:20px;padding:20px 30px 20px 0}.final-cta{padding:70px 0}.final-cta h2{font-size:49px}.footer{padding:38px 0 75px}.footer-top{display:block}.footer-links{gap:22px;margin-top:30px;font-size:12px}.footer-bottom{display:block;margin-top:35px}.footer-bottom div{margin-top:12px;flex-wrap:wrap}.preview-rail{font-size:8px;gap:10px}.modal-shade{padding:16px}.modal{padding:34px 24px}.modal h2{font-size:37px}.modal p{font-size:12px}.status-page{padding:65px 0;min-height:0}.status-page h1{font-size:43px}.status-page .copy{font-size:12px}.tone-block{padding:60px 0}.tone-inner{grid-template-columns:1fr;gap:35px}.tone-inner img{width:80%;max-width:430px}.tone-inner h2{font-size:42px}.download-grid{grid-template-columns:1fr;gap:36px}.download-hero{padding:38px 0 55px}.download-art{max-width:520px;margin:auto}.download-grid h1{font-size:58px}.download-grid .body-copy{font-size:12px}.platforms{gap:10px}.platforms .btn{padding:14px 12px;font-size:11px}.support-buttons{gap:20px}.text-button{font-size:10px}}
.modal input[type=email]:focus{outline:2px solid var(--green);outline-offset:3px;border-color:var(--green)}
.credit-tags span{font:600 11px var(--label);letter-spacing:.1em;color:#7d7889}.full-demo-section{padding-bottom:0}.full-demo-section h2{font-size:54px}.full-demo{display:grid;grid-template-columns:110px 55px 1fr auto;align-items:center;gap:25px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(120deg,#14111e,#08080b);padding:28px;margin-top:38px}.full-demo>img{border-radius:5px}.full-demo>button{width:48px;height:48px;border-radius:50%;border:1px solid #5a506d;background:#ffffff08;color:#8d829d;font-size:14px}.full-demo p{font:600 12px var(--mono);color:#cac5d5}.full-demo small,.full-demo>span{font-size:10px;color:#756c82}.long-wave{height:35px;width:100%;margin:13px 0;background:repeating-linear-gradient(90deg,#8b769240 0 2px,transparent 2px 5px);clip-path:polygon(0 45%,5% 10%,10% 40%,15% 20%,20% 36%,25% 0,30% 40%,35% 12%,40% 35%,45% 8%,50% 40%,55% 30%,60% 8%,65% 28%,70% 38%,75% 5%,80% 33%,85% 20%,90% 40%,95% 28%,100% 46%,100% 55%,95% 72%,90% 60%,85% 80%,80% 67%,75% 95%,70% 62%,65% 72%,60% 92%,55% 70%,50% 60%,45% 92%,40% 65%,35% 88%,30% 60%,25% 100%,20% 64%,15% 80%,10% 60%,5% 90%,0 55%)}
@media(max-width:760px){.full-demo-section h2{font-size:39px}.full-demo{grid-template-columns:34px 1fr;gap:16px;padding:20px;margin-top:25px}.full-demo>img,.full-demo>span{display:none}.full-demo>button{width:32px;height:32px;font-size:10px}.full-demo p{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Kavi's credentials and selected records are the page's social proof. */
.download-grid h1 .x{color:var(--green)}
.hero-subtitle{text-wrap:balance}
.credit-band{padding:88px 0;background:#08080b}
.credit-band .wrap{grid-template-columns:.82fr 1.18fr;gap:76px}
.credit-band .producer-intro h2{font-size:clamp(43px,4.25vw,62px);margin:18px 0 12px}
.producer-alias{font:600 12px var(--mono);letter-spacing:.17em;color:#777582}
.producer-credentials{margin-top:28px;font:500 clamp(21px,2.1vw,29px)/1.4 var(--display);letter-spacing:-.02em;color:var(--paper)}
.producer-credentials span{color:var(--green)}
.producer-story{font-size:12px;line-height:1.9;max-width:390px;margin-top:22px;color:#aaa6b4}
.credit-lineup{min-width:0}
.credit-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font:500 10px var(--mono);letter-spacing:.12em;color:#9d97ac}
.credit-heading span{font-size:22px;color:var(--green)}
.credit-records{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.credit-record{display:block;min-width:0}
.credit-cover{position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#15151a}
.credit-cover img{width:100%;height:100%;object-fit:cover;transition:transform .22s}
.credit-cover span{position:absolute;right:9px;bottom:9px;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#0009;color:white;font-size:15px}
.credit-record:hover .credit-cover img{transform:scale(1.035)}
.credit-record h3{font-size:24px;line-height:1.1;margin-top:18px;letter-spacing:-.025em}
.credit-track{font:500 11px/1.5 var(--mono);color:#d1cdd8;margin-top:7px}
.credit-feature{font-size:9px;line-height:1.6;color:#8f899c;min-height:29px;margin-top:3px}
.credit-role{font:500 9px var(--label);letter-spacing:.13em;color:var(--green);margin-top:13px;padding-top:12px;border-top:1px solid #ffffff1c}
@media(max-width:1000px){.credit-band .wrap{grid-template-columns:1fr;gap:42px}.producer-story{max-width:560px}.credit-records{gap:22px}.credit-band .producer-intro h2{font-size:48px}.producer-credentials{font-size:27px}}
@media(max-width:600px){.credit-band{padding:55px 0}.credit-band .wrap{gap:32px}.credit-band .producer-intro h2{font-size:43px}.producer-credentials{font-size:24px;margin-top:22px}.producer-story{font-size:12px;margin-top:17px}.credit-records{gap:11px}.credit-heading{font-size:9px;letter-spacing:.07em;margin-bottom:16px}.credit-record h3{font-size:18px;margin-top:12px}.credit-track{font-size:9px;line-height:1.5}.credit-feature{font-size:8px;min-height:38px}.credit-role{font-size:8px;letter-spacing:.07em;margin-top:8px;padding-top:10px}}

/* A continuous, browsable record strip contained in the right proof column. */
.hero-subtitle{max-width:920px;margin-inline:auto}
.credit-heading{gap:16px}
.credit-heading>span{font-size:10px;color:#9d97ac}
.credit-controls{display:flex;align-items:center;gap:5px}
.credit-controls button{display:grid;place-items:center;width:27px;height:27px;border:1px solid #ffffff24;border-radius:50%;background:transparent;color:#bdb6cb;font:13px var(--mono);padding:0}
.credit-controls button:hover{color:var(--green);border-color:#b4e60070}
.credit-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:4px 25px 7px;mask-image:linear-gradient(90deg,transparent,#000 25px,#000 calc(100% - 25px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25px,#000 calc(100% - 25px),transparent)}
.credit-viewport::-webkit-scrollbar{display:none}
.credit-viewport:focus-visible{outline:1px solid var(--green);outline-offset:5px}
.credit-records{display:flex;width:max-content;gap:0}
.credit-group{display:flex;gap:18px;padding-right:18px;flex:none}
.credit-record{width:clamp(175px,15.2vw,220px);flex:none}
.credit-record h3{font-size:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit-track{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit-feature{height:14px;min-height:0;line-height:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.credit-role{margin-top:5px;padding-top:8px;text-transform:uppercase}
@media(max-width:600px){.credit-record{width:158px}.credit-record h3{font-size:21px}.credit-track{font-size:10px}.credit-feature{font-size:9px;height:14px;min-height:0;line-height:14px}.credit-role{font-size:9px;margin-top:5px;padding-top:7px}.credit-heading>span{font-size:9px}.credit-viewport{padding-inline:18px;mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)}}

/* ---- Signup form, delivery states, download page (2026-09-15) ---- */
.field{margin-top:16px}.field:first-child{margin-top:0}
.modal input[type=text],.modal input[type=email],.modal input[type=tel],.resend-form input[type=email]{width:100%;background:#07070b;border:1px solid #ffffff3a;color:#fff;padding:16px;border-radius:7px;font-size:14px}
.modal input[type=text]:focus,.modal input[type=tel]:focus,.resend-form input[type=email]:focus{outline:2px solid var(--green);outline-offset:3px;border-color:var(--green)}
.modal input[aria-invalid=true]{border-color:#ff9cba}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.delivery-note{font-size:11px!important;color:#a8a3b2!important;line-height:1.7!important;margin-top:18px!important}.delivery-note a{color:#d5d1de;text-decoration:underline}
.consent{margin:14px 0 20px}
.status-page .copy strong{color:var(--paper);font-weight:600}.status-page .copy a{color:var(--green);text-decoration:underline}
.marketing-note{font-size:11px;color:#8f8a9d;max-width:520px;margin:18px auto 0;line-height:1.7}
.resend-wrap{margin-top:30px}.resend-wrap.left{text-align:left;max-width:460px}.resend-wrap .btn{margin-top:0}
.resend-form{max-width:520px;margin:0 auto;text-align:left}.resend-row{display:flex;gap:10px}.resend-row .btn{flex-shrink:0;white-space:nowrap}
.form-msg{font-size:11px;color:#cfcbd8;min-height:18px;margin-top:12px}.form-msg a{color:var(--green);text-decoration:underline}
.wrong-address{font-size:11px;color:#75717f;margin-top:16px}.wrong-address a{color:#cfcbd8;text-decoration:underline}
.status-page .preview-note a{color:var(--green)}
.version-line{font:600 11px var(--mono);color:#cfcbd8;letter-spacing:.03em;margin-top:2px}.file-line{font-size:10px;color:#75717f;margin-top:6px}
.platforms .btn{text-align:center}
.install-section{padding-top:0}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.install-col{border:1px solid var(--line);border-radius:10px;padding:26px;background:#ffffff03}.install-col h3{font-size:24px;margin-bottom:16px}
.install-col ol{margin:0;padding-left:20px;font-size:12px;line-height:1.85;color:#b4b0bf}.install-col li+li{margin-top:8px}.install-col li::marker{color:var(--green)}
.support-section{padding-bottom:110px}.support-card{display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:44px;background:radial-gradient(ellipse at 100% 0%,#1c0b45,#0a0a0f 65%)}
.support-card h2{font-size:40px;margin:16px 0 18px}.support-card p{font-size:12px;line-height:1.85;max-width:520px}.support-card p a{color:var(--green);text-decoration:underline}
.support-actions{display:grid;gap:12px}.support-actions .btn{width:100%}
.demo-row.has-audio button{border-color:#b4e60080;color:var(--green);background:#b4e60010}.demo-row.has-audio b,.full-demo.has-audio p{color:var(--paper)}
.wave.live{opacity:.55}.playing .wave i{background:var(--green)}.long-wave.live{background:repeating-linear-gradient(90deg,#b4e60080 0 2px,transparent 2px 5px)}.full-demo.has-audio>button{border-color:#b4e60080;color:var(--green)}
.demo-time{font:10px var(--mono);color:#a29db0;white-space:nowrap}
@media(max-width:760px){.install-grid{grid-template-columns:1fr;gap:12px;margin-top:26px}.install-col{padding:20px 16px}.install-col h3{font-size:22px}.support-card{grid-template-columns:1fr;gap:26px;padding:26px 20px}.support-card h2{font-size:32px}.support-section{padding-bottom:70px}.resend-row{flex-direction:column}.resend-row .btn{width:100%}.resend-wrap.left{max-width:none}.status-page .resend-wrap .btn{width:100%}}

/* ---- Three-mode scroll section (sticky product visual + steps) ---- */
.modes-scroll{padding:120px 0 30px;border-top:1px solid var(--line)}
.modes-scroll .modes-intro{margin-bottom:20px}
.modes-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:start;margin-top:40px}
.modes-visual{min-width:0}.visual-sticky{position:sticky;top:104px}
.stage3d{position:relative;aspect-ratio:1440/1000;border-radius:18px;background:radial-gradient(ellipse at 50% 62%,#3b19ff26,transparent 62%);isolation:isolate}
.stage3d canvas{width:100%;height:100%;display:block;border-radius:18px}
.stage3d .stage-flat{position:absolute;left:7%;top:8%;width:86%;height:auto;display:none;border-radius:10px;filter:drop-shadow(0 45px 40px #000c);transform-origin:50% 55%;transition:transform .08s linear;will-change:transform}
.stage3d.flat canvas{display:none}.stage3d.flat .stage-flat{display:block}
.visual-label{margin-top:16px;text-align:center;font:600 11px var(--mono);letter-spacing:.14em;color:#8f8a9d}.visual-style{color:var(--green)}
.modes-steps{min-width:0}
.mode-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:36px 0;opacity:.32;transition:opacity .45s}
.mode-step.is-active{opacity:1}
.mode-step h2{font-size:clamp(38px,3.6vw,56px);margin:16px 0 18px}
.mode-step .body-copy{font-size:13px;line-height:1.9;max-width:520px}
.controls-line{font:700 10px var(--label);letter-spacing:.14em;color:var(--green);margin-top:18px}
.demo-hint{font-size:10px;color:#75717f;margin:0 0 4px;letter-spacing:.06em;text-transform:uppercase}
.credit-footnote{margin-top:14px;font-size:9px;color:#6f6c7b;line-height:1.6}
.faq-list details p strong{color:var(--paper);font-weight:600}
@media(max-width:1000px){.modes-layout{gap:36px}}
@media(max-width:900px){.modes-scroll{padding:74px 0 20px}.modes-layout{display:block;margin-top:24px}.visual-sticky{position:sticky;top:74px;z-index:3;background:linear-gradient(180deg,var(--bg) 88%,transparent);padding-bottom:12px}.stage3d{max-width:560px;margin:auto}.visual-label{margin-top:8px}.mode-step{min-height:0;padding:34px 0;opacity:1}.mode-step h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){.stage3d .stage-flat{transition:none}.mode-step{transition:none}}
.modes-layout{align-items:stretch}.modes-visual{align-self:stretch}

/* ---- 2026-09-15 evening pass: frameless hero instrument, bigger modes visual, feature crops ---- */
.hero .plugin-wrap{max-width:1060px;margin:14px auto 0}
.plugin-try{font:700 12px var(--label);letter-spacing:.13em;color:var(--green);margin:0 0 4px}
.hero .plugin-window{aspect-ratio:auto;height:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;filter:drop-shadow(0 40px 70px #000c)}
.hero .plugin-window iframe{position:absolute;left:0;top:0;height:960px;background:transparent;-webkit-mask:url('/drumflx/assets/instrument-mask.png?v=3') 0 0/100% 100% no-repeat;mask:url('/drumflx/assets/instrument-mask.png?v=3') 0 0/100% 100% no-repeat}
.hero .plugin-caption{margin-top:-1%;padding-bottom:54px;font:600 12px var(--label);letter-spacing:.1em;text-transform:uppercase;color:#b9b7c2}
@media(max-width:760px){.hero .plugin-wrap{margin-top:26px}.plugin-try{font-size:9px;letter-spacing:.1em}.hero .plugin-caption{margin-top:0}}
.feature svg{display:none}
.feature{border-top:0;padding:0}
.feature-art{aspect-ratio:16/11;overflow:hidden;border-radius:10px;background:#0a0a0e;margin-bottom:24px;position:relative;isolation:isolate}
.feature-art img{width:100%;height:100%;object-fit:cover;transform-origin:0 0;position:absolute;left:0;top:0}
.feature-art:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14;border-radius:10px;pointer-events:none}
.feature-art[data-crop=pads] img{transform:scale(2.4) translate(-7.5%,-64%)}
.feature-art[data-crop=loop] img{transform:scale(3.2) translate(-8%,-19%)}
.feature-art[data-crop=fx] img{transform:scale(2.6) translate(-26%,-13%)}
.feature-art[data-crop=bank] img{transform:scale(2.2) translate(-10%,-32%)}
.stage3d{background:none;border-radius:0}
.stage3d canvas{border-radius:0}
.visual-sticky{top:96px}
.stage3d .stage-flat{transition:transform .08s linear,opacity .35s}
.stage3d .stage-flat.is-switching{opacity:.35}
.modes-scroll[data-variant=b] .stage3d .stage-flat{left:4%;top:2%;width:92%;clip-path:inset(8.5% 7.1% 7.4% 7.1% round 10px);filter:none}
@media(max-width:900px){.modes-layout{width:calc(100% - 36px)}}
/* Mobile: keep the product visual pinned above the mode copy (both share one grid cell so the sticky column spans the steps). */
@media(max-width:900px){.modes-layout{display:grid;grid-template-columns:minmax(0,1fr);width:calc(100% - 36px)}.modes-visual{grid-area:1/1;align-self:stretch}.modes-steps{grid-area:1/1;padding-top:calc(min(100vw - 36px,560px) * .72 + 44px)}.visual-sticky{background:var(--bg);padding-bottom:10px;border-bottom:1px solid var(--line)}.mode-step{padding:28px 0 40px}}


/* ---- Compatibility strip (lime band under the hero) and section order tweaks ---- */
.compat{background:var(--green);color:#000;padding:22px 0}
.compat-inner{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap}
.compat-lead,.compat-os{margin:0;font:700 13px var(--label);letter-spacing:.12em;text-transform:uppercase;color:#000}
.compat-os{padding-left:34px;border-left:1px solid #00000033}
.compat-daws{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.compat-daws li{display:flex;align-items:center;gap:10px;font:600 13px var(--label);letter-spacing:.02em;color:#000}
.compat-daws img{width:40px;height:40px;border-radius:9px;box-shadow:0 6px 16px #0000002e}
.compat-more span{font:500 13px var(--mono);color:#1e2600;text-transform:none;letter-spacing:0}
.requirements-section{padding-top:80px}
.credit-band{border-top:1px solid var(--line)}
@media(max-width:760px){.compat{padding:18px 0}.compat-inner{gap:14px 18px}.compat-lead,.compat-os{font-size:11px}.compat-os{padding-left:0;border-left:0;width:100%;text-align:center}.compat-daws{gap:14px;flex-wrap:wrap;justify-content:center}.compat-daws img{width:32px;height:32px;border-radius:7px}.compat-daws li{font-size:11px}.compat-more span{font-size:11px}.requirements-section{padding-top:60px}}

/* ---- Sept 17 pass: hero feature row, tighter hero rhythm, compat strip size, one-line section heading, no wrapping CTAs ---- */
.hero h1{margin:18px 0 8px}
.hero-features{list-style:none;margin:20px auto 26px;padding:0;display:flex;justify-content:center;gap:34px;flex-wrap:wrap;font:700 12px var(--label);letter-spacing:.08em;text-transform:uppercase;color:#d1cfd7}
.hero-features li::before{content:'+';color:var(--green);margin-right:10px}
.btn{white-space:nowrap}
.compat{padding:30px 0}.compat-inner{gap:40px}.compat-daws{gap:30px}.compat-daws img{width:48px;height:48px;border-radius:11px}.compat-daws li,.compat-lead,.compat-os{font-size:14px}.compat-more span{font-size:14px}
.section-heading-line{max-width:none}.section-heading-line h2{margin:17px 0 0;white-space:nowrap;font-size:clamp(34px,4.4vw,66px)}
.final-cta h2{margin:20px 0 30px}
.consent input:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:760px){.hero h1{margin:16px 0 6px}.hero-features{gap:10px 16px;font-size:10px;margin:16px auto 22px}.hero-features li::before{margin-right:6px}.hero .plugin-caption{padding-bottom:34px}.compat{padding:20px 0}.compat-daws img{width:36px;height:36px;border-radius:8px}.compat-daws li,.compat-lead,.compat-os,.compat-more span{font-size:11px}.section-heading-line h2{white-space:normal;font-size:38px}.btn.large{min-width:0;padding:16px 22px;font-size:12px}.modal .btn{font-size:12px;padding:14px 12px;gap:12px}}

/* ---- Sept 17, round two ---- */
.hero-features{margin:20px auto 38px}
.hero .plugin-caption{padding-bottom:84px}
.btn .arrow{display:inline-flex;align-items:center;line-height:0}.btn .arrow svg{display:block}
.modes-scroll{overflow-x:clip}
@media(min-width:901px){.modes-layout{grid-template-columns:1.18fr .82fr;gap:56px}}
.stage3d{overflow:visible}.stage3d canvas{transform:scale(1.1);transform-origin:100% 50%;will-change:transform}
.credit-band .wrap{grid-template-columns:.7fr 1.3fr;gap:60px}
.faq-wrap{padding-top:0;padding-bottom:90px;border-bottom:1px solid var(--line)}
.requirements{padding-top:90px;padding-bottom:0;border-bottom:0}
.modal h2{font-size:clamp(30px,8.2vw,40px);white-space:nowrap}
@media(max-width:760px){.hero-features{margin:16px auto 30px}.hero .plugin-caption{padding-bottom:56px}.stage3d canvas{transform:scale(1.04)}.faq-wrap{padding-bottom:55px}.requirements{padding-top:60px}.modal h2{font-size:clamp(26px,7.4vw,34px)}}
.hero h1{margin-top:0}

/* ---- Sept 17, round three ---- */
.hero .plugin-caption{padding-bottom:110px}
.modes-scroll .modes-intro{margin-bottom:0}
.modes-layout{margin-top:72px}
.visual-sticky{top:120px}
.modes-scroll{padding-bottom:140px}
@media(max-width:900px){.modes-layout{margin-top:32px}.visual-sticky{top:74px}.modes-scroll{padding-bottom:40px}}
@media(max-width:760px){.hero .plugin-caption{padding-bottom:64px}}

/* ---- Genre wall: three slow rows of oversized names, filled and outlined, drifting in alternate directions ---- */
.genres{padding:120px 0 110px;overflow:hidden;border-top:1px solid var(--line);background:#050507}
.genres h2{margin-top:17px}
.genre-wall{margin-top:56px;display:grid;gap:6px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.genre-row{display:flex;width:max-content;white-space:nowrap;will-change:transform;animation:genre-drift var(--dur,60s) linear infinite}
.genre-row.reverse{animation-direction:reverse}
.genre-wall:hover .genre-row{animation-play-state:paused}
.genre-track{display:flex;align-items:baseline;padding-right:38px;gap:38px;font:500 clamp(44px,6.4vw,92px)/1.08 var(--display);letter-spacing:-.035em;color:var(--paper)}
.genre-track span.outline{color:transparent;-webkit-text-stroke:1.5px #ffffff9a}
.genre-track i{font:600 clamp(14px,1.4vw,20px) var(--label);color:var(--green);letter-spacing:.12em;align-self:center;transform:translateY(-.15em)}
@keyframes genre-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.genre-row{animation:none}.genre-wall{mask-image:none;-webkit-mask-image:none}}
@media(max-width:760px){.genres{padding:74px 0 70px}.genre-wall{margin-top:32px;gap:2px}.genre-track{gap:22px;padding-right:22px;font-size:40px}.genre-track span.outline{-webkit-text-stroke-width:1px}}
.modes-scroll{padding-top:135px}.modes-layout{margin-top:88px}
@media(max-width:900px){.modes-scroll{padding-top:74px}.modes-layout{margin-top:32px}}
.genres h2{white-space:nowrap;font-size:clamp(30px,4.4vw,66px)}
.genre-track{font-size:clamp(28px,4vw,56px);gap:30px;padding-right:30px}.genre-track i{font-size:clamp(11px,1vw,14px)}.genre-wall{margin-top:44px;gap:10px}
@media(max-width:760px){.genres h2{white-space:normal;font-size:38px}.genre-track{font-size:30px;gap:18px;padding-right:18px}}
.genres h2{color:var(--green);margin-top:0}
.genres .wrap{text-align:center}

.platforms{flex-wrap:wrap}.platforms .btn{flex:1 1 220px;text-align:center}.file-list{list-style:none;padding:0;margin:8px 0 0;font-size:10px;color:#8f8a9d;line-height:1.7;overflow-wrap:anywhere}.file-list .sha{font-family:var(--mono);color:#6f6c7b}
/* Confirm page: address line, three steps, quiet tip, actions */
.status-page .copy{max-width:640px;font-size:15px;color:var(--muted)}
.confirm-steps{list-style:none;margin:40px auto 0;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:14px;background:#ffffff06;text-align:left;counter-reset:none}
.confirm-steps li{display:flex;gap:16px;align-items:center;padding:22px 24px}
.confirm-steps li+li{border-left:1px solid var(--line)}
.step-n{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #b4e60077;color:var(--green);font:600 14px/1 var(--display)}
.confirm-steps p{margin:0;color:var(--paper);font:500 14px/1.45 var(--label);letter-spacing:.02em}
.confirm-steps b{font-weight:700;color:var(--paper)}
.confirm-tip{font-size:11px;color:#75717f;margin:16px auto 0}.confirm-tip a{color:#cfcbd8;text-decoration:underline}
.confirm-actions{margin-top:28px}
.confirm-actions .wrong-address{margin:0}
@media(max-width:760px){
.status-page .copy{font-size:13px}
.confirm-steps{grid-template-columns:1fr;margin-top:30px}
.confirm-steps li{padding:16px 18px;align-items:center}
.confirm-steps li+li{border-left:0;border-top:1px solid var(--line)}
}
.navigation.logo-only{justify-content:center}
.status-page.confirm-page{padding-top:80px}
@media(max-width:760px){.status-page.confirm-page{padding-top:56px}}
/* Demo rows: title hugs the button, waveform takes the rest, played bars turn lime */
.demo-row,.demo-row.has-audio{grid-template-columns:34px auto 1fr auto;gap:0 16px}
.demo-row b{white-space:nowrap}
.wave.live{opacity:1;gap:2px;justify-content:space-between;height:28px;cursor:pointer;padding-left:6px}
.wave.live i{flex:1 1 0;min-width:1px;max-width:3px;border-radius:1px;background:#5d5a68;height:var(--h)}
.wave.live i.on,.playing .wave.live i.on{background:var(--green)}
.playing .wave.live i{background:#77738a}
.demo-row .demo-time{min-width:34px;text-align:right}
@media(max-width:760px){.demo-row,.demo-row.has-audio{grid-template-columns:31px minmax(0,auto) 1fr auto;gap:0 12px}.demo-row b{overflow:hidden;text-overflow:ellipsis}.wave.live{display:flex;height:24px;padding-left:2px}}
/* Player buttons: drawn icons, optically centred, same size for play and pause */
.demo-row button,.full-demo>button{display:grid;place-items:center;padding:0;line-height:0}
.demo-row button svg{width:11px;height:11px;fill:currentColor}
.full-demo>button svg{width:14px;height:14px;fill:currentColor}
.wave.live i{max-width:none}
.demo-row .demo-time{min-width:3.2em;font-variant-numeric:tabular-nums}
/* Download page: transparent render, three stacked installers with the version on the button */
.download-art img{clip-path:none;border-radius:0;filter:drop-shadow(0 40px 60px #000c);width:112%;max-width:none;margin-left:-6%}
.dl-stack{display:grid;gap:12px;margin-top:30px;max-width:520px}
.dl-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:19px 22px}
.dl-btn .dl-meta{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;opacity:.85;font-variant-numeric:tabular-nums}
.dl-btn.ghost{cursor:pointer}
.dl-btn.ghost .dl-meta{opacity:.6}
.download-faq .faq-wrap{border-bottom:0}
.install-section .section-heading h2{white-space:normal}
.support-card h2{max-width:none}
/* TONEFLX sales page, framed full width */
/* TONEFLX offer hero under the confirm and download pages: the mode left/right frame, warm stage. */

@media(max-width:760px){.download-art img{width:100%;margin-left:0}.dl-stack{margin-top:24px;max-width:none}.dl-btn{padding:16px 16px;font-size:11px}.dl-btn .dl-meta{gap:8px}}
.dl-btn .dl-meta{text-transform:none;letter-spacing:.04em}
.install-section{padding-bottom:40px}
.section.download-faq{padding-top:40px}
@media(max-width:760px){.install-section{padding-bottom:20px}.section.download-faq{padding-top:20px}}
/* Front-elevated render, trimmed, fills its column */
.download-grid{grid-template-columns:1.25fr 1fr;gap:64px}
.download-art img{width:100%;margin:0;display:block}
@media(max-width:760px){.download-grid{grid-template-columns:1fr;gap:28px}}
.section-heading p.install-line{max-width:none;white-space:nowrap}
.support-section,.support-section{padding-bottom:120px}
@media(max-width:760px){.section-heading p.install-line{white-space:normal}.support-section{padding-bottom:80px}}
.download-faq .faq-wrap{padding-bottom:0}.section.download-faq{padding-bottom:70px}
/* Download spacing pass: text column sits higher, FAQ gets more air, support comes up */
.download-grid>div:last-child{margin-top:-72px}
.section.download-faq{padding-top:110px;padding-bottom:10px}
@media(max-width:760px){.download-grid>div:last-child{margin-top:0}.section.download-faq{padding-top:60px;padding-bottom:0}}
.section.download-faq{padding-bottom:56px}@media(max-width:760px){.section.download-faq{padding-bottom:40px}}

/* ---- Sept 18: sticky nav, hero cue, modes size + position, heading CTA, readable FAQ + install, narrower installers, TONEFLX offer unit ---- */
/* Landing nav sticks and goes charcoal once scrolled; section anchors land just under it. */
.navigation{position:sticky;top:0;transition:background .3s,border-color .3s,box-shadow .3s}
.navigation.logo-only{position:relative}
.tfx-grid[hidden]{display:none}
.navigation.is-scrolled{background:linear-gradient(180deg,#17161c,#0c0b10);border-bottom-color:#ffffff14;box-shadow:0 10px 30px #00000066}
#modes,#inside,#faq{scroll-margin-top:84px}
/* Hero cue: white caption with a small bracket chevron bobbing above it. */
.hero .plugin-caption{margin-top:8px;color:var(--paper);display:flex;flex-direction:column;align-items:center;gap:11px}
.caption-arrow{display:block;width:18px;height:10px;color:var(--green);animation:cue-bob 1.7s ease-in-out infinite}
.caption-arrow svg{display:block;width:100%;height:100%}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* Modes: render 10% larger (JS scrubs 1.21→1.36, right edge anchored), sits lower in the viewport, more room below; Modern copy starts higher. */
.stage3d canvas{transform:scale(1.21)}
.visual-sticky{top:max(150px,calc(50vh - 300px))}
.modes-scroll{padding-bottom:230px}
.modes-layout{margin-top:40px}
.mode-step:first-child{min-height:64vh;padding-top:0}
/* How-it-works heading row carries the CTA, flush with the grid's right edge. */
.section-heading-line{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.section-heading-line .heading-cta{flex-shrink:0;margin-bottom:6px}
/* FAQ answers and install steps at body size instead of footnote size. */
summary{font-size:22px}
details p{font-size:15px;line-height:1.75;color:#c9c6d2}
.install-col ol{font-size:14px;line-height:1.85}
@media(min-width:761px){.dl-stack{max-width:416px}}
/* TONEFLX offer: the demo unit (frame image with a live screen over the faceplate) left, copy + countdown right. */
.offer-section{border-block:1px solid #ffffff13;background:linear-gradient(120deg,#1a0b0b,#050507);padding:110px 0}
.offer-inner{display:grid;grid-template-columns:1.18fr .82fr;gap:70px;align-items:center}
.offer-stage{position:relative;isolation:isolate}
.offer-stage:before{content:'';position:absolute;inset:-8% -5%;background:radial-gradient(ellipse at 50% 55%,#e0261c38,transparent 68%);z-index:-1;filter:blur(12px)}
.offer-copy h2{font-size:clamp(40px,4.4vw,64px);margin:18px 0 20px}
.offer-copy .body-copy{font-size:13px;line-height:1.9;max-width:460px}
.offer-timer{display:flex;align-items:baseline;gap:14px;margin:30px 0 0;font:700 12px var(--label);letter-spacing:.12em;color:#8c889a}
.offer-timer b{font:600 30px/1 var(--mono);color:var(--paper);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.offer-cta{margin-top:30px}
.offer-code{margin:16px 0 0;font:12px var(--mono);color:#8c889a;letter-spacing:.04em}.offer-code b{color:var(--paper);font-weight:600}
.tfx-unit{position:relative;width:100%;font-family:var(--label)}
.tfx-unit>img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #000c)}
.tfx-screen{position:absolute;left:4.6%;top:6%;width:90.8%;height:87%;background:linear-gradient(180deg,#1c1c1c,#0f0f0f);border-radius:14px;box-shadow:inset 0 0 0 1px #ffffff10,inset 0 24px 60px #000a;padding:3.6% 4.2%;display:flex;flex-direction:column;color:#fff;overflow:hidden}
.tfx-top{display:flex;justify-content:space-between;align-items:center;font:700 9px var(--label);letter-spacing:.16em;color:#ff3b30}
.tfx-active i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;margin-right:7px;vertical-align:-1px;animation:tfx-blink 1.6s ease-in-out infinite}
@keyframes tfx-blink{50%{opacity:.3}}
.tfx-label{margin:2.4% 0 1.6%;text-align:center;font:700 clamp(10px,1.05vw,14px)/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:#fff}.tfx-label b{color:#ff3b30;font-weight:700}
.tfx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tfx-tab{padding:clamp(8px,1.3vw,14px) 6px;border:1px solid #ffffff1c;border-radius:5px;background:#242424;color:#9c9c9c;font:700 clamp(9px,.92vw,13px) var(--label);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.tfx-tab:hover{color:#fff;background:#2c2c2c}
.tfx-tab.is-on{background:#ff1a0e;color:#fff;border-color:#ff6a60;box-shadow:0 0 22px #ff1a0e80}
.tfx-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px;flex:1;min-height:0}
.tfx-demo{position:relative;display:flex;align-items:center;text-align:left;padding:clamp(10px,1.5vw,18px) clamp(10px,1.5vw,20px);border:1px solid #ffffff12;border-radius:6px;background:#202020;color:#fff;font:700 clamp(9px,.86vw,12px)/1.3 var(--label);letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:background .2s,box-shadow .2s,border-color .2s;min-height:0}
.tfx-demo:hover{background:#2a2a2a;border-color:#ffffff28}
.tfx-demo i{position:absolute;top:10px;right:10px;width:0;height:0;border-left:8px solid #ff3b30;border-top:5px solid transparent;border-bottom:5px solid transparent}
.tfx-demo.is-on{background:radial-gradient(ellipse at 50% 60%,#ff2a1e,#c8140b 75%);border-color:#ff7a70;box-shadow:0 0 28px #ff1a0e80}
.tfx-demo.is-on i{border-left-color:#000}
@media(max-width:1100px){.offer-inner{gap:40px}}
@media(max-width:900px){.offer-inner{grid-template-columns:1fr;gap:40px}.offer-copy .body-copy{max-width:none}}
@media(max-width:760px){#modes,#inside,#faq{scroll-margin-top:74px}.section-heading-line{display:block}.section-heading-line .heading-cta{margin-top:22px;width:100%}summary{font-size:20px}details p{font-size:14px}.offer-section{padding:74px 0}.offer-cta{width:100%}.offer-timer b{font-size:26px}
  .tfx-unit>img{display:none}.tfx-screen{position:static;width:auto;height:auto;border:10px solid #cf2419;border-radius:16px;padding:14px 12px 12px;box-shadow:inset 0 0 0 1px #ffffff10,0 24px 50px #000b}.tfx-label{margin:14px 0 8px;font-size:11px}.tfx-tab{font-size:9px;padding:10px 4px}.tfx-grid{grid-template-columns:repeat(2,1fr)}.tfx-demo{font-size:10px;padding:14px 26px 14px 12px}}
@media(prefers-reduced-motion:reduce){.caption-arrow,.tfx-active i{animation:none}}
/* Phones: static render per mode inside each step (no sticky swap), CTA under each mode's demos. Desktop keeps the scrubbed canvas. */
.mode-static,.mode-cta{display:none}
@media(max-width:900px){.modes-visual{display:none}.modes-steps{padding-top:0}.mode-static{display:block;width:100%;max-width:520px;margin:0 auto 26px;border-radius:12px;filter:drop-shadow(0 30px 30px #000b)}.mode-cta{display:inline-flex;margin-top:26px;width:100%}.mode-step{padding:44px 0 34px}.mode-step+.mode-step{border-top:1px solid var(--line)}}
/* Demo rows: fixed name column so every waveform is the same width; more air between the modes heading and the layout. */
@media(min-width:761px){.demo-row,.demo-row.has-audio{grid-template-columns:34px 184px 1fr auto}.demo-row b{overflow:hidden;text-overflow:ellipsis}}
.modes-layout{margin-top:120px}
.visual-sticky{top:max(170px,calc(50vh - 290px))}
/* How-it-works cards use the rendered close-ups (Sept 18): no skin crops, just cover-fit. */
.feature-art[data-crop] img{transform:none;object-position:50% 50%}
.feature-art[data-crop=loop] img{object-position:40% 50%}
.feature-art[data-crop=bank] img{object-position:55% 50%}
/* Scrolled nav: shorter, smaller mark, no rule line, just a soft shadow. */
.navigation{transition:background .3s,box-shadow .3s,height .25s}
.brand img{transition:width .25s}
.navigation.is-scrolled{height:64px;border-bottom-color:transparent;box-shadow:0 8px 28px #00000073}
.navigation.is-scrolled .brand img{width:88px}
#modes,#inside,#faq{scroll-margin-top:64px}
@media(max-width:760px){.navigation.is-scrolled{height:60px}.navigation.is-scrolled .brand img{width:76px}#modes,#inside,#faq{scroll-margin-top:60px}}
/* Hero cue now sits under the CTA, chevron below it pointing down at the instrument. */
.hero .plugin-caption{margin:30px auto 0;padding-bottom:0;gap:12px}
.hero .plugin-wrap{margin-top:22px;margin-bottom:96px}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-width:760px){.hero .plugin-caption{margin-top:24px;padding-bottom:0;line-height:1.6}.hero .plugin-wrap{margin-top:18px;margin-bottom:60px}}
/* Hero cue: more air above, tighter to the instrument below, back to the quiet grey. */
.hero .plugin-caption{margin-top:52px;color:#b9b7c2;gap:10px}
.hero .plugin-wrap{margin-top:8px}
@media(max-width:760px){.hero .plugin-caption{margin-top:40px}.hero .plugin-wrap{margin-top:6px}}
/* Hero cue: smaller text; the chevron sits ~10px above the visible machine (the cut-out has 84/1176 of clear space above the body, so the wrap pulls up by that much). */
.hero .plugin-caption{font-size:10.5px;gap:8px}
.hero .plugin-wrap{margin-top:calc(10px - min(100vw - 36px, 1060px) * 0.0714)}
@media(max-width:760px){.hero .plugin-caption{font-size:10px}.hero .plugin-wrap{margin-top:calc(10px - min(100vw - 36px, 1060px) * 0.0714)}}
/* Mobile sweep (Sept 18 night): the desktop modes spacing must not leak onto phones; tighter hero cue; credit band off; works-with strip evened out. */
@media(max-width:900px){.modes-layout{margin-top:26px}.modes-scroll{padding-bottom:30px}.mode-step:first-child{min-height:0;padding-top:20px}.mode-step{padding:36px 0 30px}.mode-step:last-child{padding-bottom:10px}}
@media(max-width:760px){.hero .plugin-caption{margin-top:26px}.credit-band{display:none}
 .compat{padding:20px 0}.compat-inner{display:grid;grid-template-columns:1fr;justify-items:center;gap:12px}.compat-daws{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:10px 18px}.compat-daws li{font-size:12px;gap:7px}.compat-more{grid-column:1/-1;justify-content:center}.compat-os{width:auto}}
@media(max-width:900px){.mode-step,.mode-step.is-active{opacity:1}}
/* Phones: cue breaks after "Texture)"; works-with strip loses the OS line and gets air above the DAW line; page gutter is 5% a side. */
.cue-br{display:none}
@media(max-width:760px){.cue-br{display:inline}.hero .plugin-caption{display:block;text-align:center}.hero .plugin-caption .caption-arrow{margin:10px auto 0}
 .compat-os{display:none}.compat-more{margin-top:8px}}
@media(max-width:760px){.hero .plugin-wrap{margin-top:calc(24px - min(100vw - 36px, 1060px) * 0.0714)}}
@media(min-width:761px){.hero .plugin-wrap{margin-top:calc(26px - min(100vw - 36px, 1060px) * 0.0714)}}
/* Windows how-to dialog: numbered steps in the confirm-page style, download button inside. */
.modal-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:12px;background:#ffffff06;text-align:left}
.modal-steps li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.modal-steps li+li{border-top:1px solid var(--line)}
.modal-steps p{margin:0;font:500 13px/1.55 var(--label);letter-spacing:.02em;color:var(--paper)}
.modal-steps b{font-weight:700}
.modal-steps .step-n{flex-shrink:0}
.modal-actions{margin:24px 0 0}.modal-actions .btn{width:100%}
.modal h2.wrap{white-space:normal;font-size:clamp(24px,3vw,32px);line-height:1.12}
/* Phone-only third cue line: iOS mutes Web Audio while the ring switch is on silent. */
.cue-mobile{display:none}
@media(max-width:760px){.cue-mobile{display:block}}

/* Platinum uses the existing post-opt-in offer layout with its published product artwork. */
.offer-platinum{background:linear-gradient(120deg,#17191c,#050507)}
.offer-platinum .offer-stage:before{background:radial-gradient(ellipse at 50% 55%,#c8d0df26,transparent 68%)}
.offer-product{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #0008)}

.modal #phone-help{display:block;margin-top:8px;color:#a8a3b2;font-size:11px;line-height:1.5}

/* Let the download hero and labels shrink on narrow phones without hiding content. */
.download-grid>*,.dl-stack,.dl-btn,.dl-btn>span:first-child{min-width:0}
.download-art{max-width:100%}
.dl-btn>span:first-child{white-space:normal;overflow-wrap:anywhere}
@media(max-width:380px){.dl-btn{flex-wrap:wrap;gap:10px}.dl-btn>span:first-child{flex:1 1 180px}.dl-btn .dl-meta{flex:0 0 auto}}