/* Pro extends the current page; original layout, type and motion are in style.css. */
html{scroll-padding-top:90px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero h1{font-size:clamp(44px,5.6vw,80px)}
.hero-heading p{padding-inline:8px}
.hero-toolbar .primary{grid-column:2;white-space:nowrap}
.kit-intro span{white-space:normal}
.kit-preview .kit-total{font-size:11px}
.kit-preview .kit-name{min-height:2.3em;display:block;line-height:1.2}
.pro-label{font:11px/1.6 Monoblock,monospace;letter-spacing:.06em;color:var(--accent);display:block;margin-bottom:18px}
.story-step h2{white-space:normal;text-wrap:balance}
.pro-section-sticker{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:8px 12px;border-radius:4px;background:var(--accent);color:#13272f;font:700 12px/1.2 Monoblock,monospace;letter-spacing:.06em;transform:rotate(-4deg)}
.story-step>.pro-section-sticker{align-self:flex-start;margin-bottom:20px}
.bonus-container>.pro-section-sticker{margin-bottom:22px}
@media(max-width:800px){.story-step>.pro-section-sticker{align-self:center}.bonus-container>.pro-section-sticker{display:flex;margin:0 auto 22px}}

.story-picture.pro-skins,.story-picture.pro-texture,.story-picture.pro-stems{display:flex;align-items:center;justify-content:center;flex-direction:column}
.pro-skins>img{display:block;width:115%;max-width:none;height:auto}
.pro-texture picture{display:block;width:118%;max-width:none}
.pro-texture img{display:block;width:100%;height:auto}
.story-picture figcaption{font-size:11px;line-height:1.6;color:#c1d0d3;text-align:center}
.pro-skins figcaption,.pro-texture figcaption,.pro-stems figcaption{position:static;inset:auto;margin-top:25px}
.pro-bonuses{max-width:none;padding:80px max(36px,calc((100vw - 1128px)/2));background:#f5f4ef;color:#15262d;border-top:1px solid #c3cccd}
.pro-bonuses .pro-label{color:#287b96}
.pro-bonuses h2 em{font-style:normal;color:#287b96}
.pro-bonuses .section-heading p{color:#354c54;max-width:34ch;font:14px/1.8 Monoblock,monospace}
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:45px}
.bonus-grid article{border-top:1px solid #9aacb1;padding-top:25px}
.bonus-quantity{font:800 44px/1.1 var(--font);letter-spacing:-.03em;display:block;margin-bottom:22px}
.bonus-quantity small{font:11px Monoblock,monospace;letter-spacing:0;color:#287b96}
.bonus-grid h3{font-size:24px;line-height:1.2;max-width:18ch}
.bonus-grid p{color:#354c54;font:12px/1.8 Monoblock,monospace;margin-top:13px}
.bonus-note{color:#354c54;font:11px/1.8 Monoblock,monospace;margin-top:30px}
@media(max-width:800px){
.hero h1{font-size:clamp(36px,6.8vw,56px)}.hero h1 span{white-space:nowrap}.hero-benefits{flex-wrap:wrap;gap:5px 15px}.hero-toolbar{margin-bottom:2px}
.kit-preview .kit-name{min-height:2.6em}.kit-auditions h2{font-size:clamp(23px,5.7vw,32px);white-space:normal;text-wrap:balance}.kit-total,.kit-control{font-size:11px}
.story-step h2{font-size:clamp(29px,7.8vw,40px);white-space:normal;text-wrap:balance}.story-step>.pro-skins,.story-step>.pro-texture,.story-step>.pro-stems{height:auto;min-height:0;aspect-ratio:auto;width:100%;margin:0 0 30px}
.pro-skins>img{width:112%;margin:0 -6%}.pro-texture picture{width:100%}.pro-texture img{width:100%;aspect-ratio:840/490;object-fit:contain}.pro-skins figcaption,.pro-texture figcaption,.pro-stems figcaption{margin-top:14px;font-size:11px}.pro-label{margin-bottom:13px}
.pro-bonuses{padding:50px 24px}.pro-bonuses .section-heading{display:block;margin-bottom:28px}.pro-bonuses .section-heading p{margin-top:24px;font-size:13px}.pro-bonuses h2{font-size:38px}.bonus-grid{grid-template-columns:1fr;gap:28px;margin-top:0}.bonus-grid article{display:grid;grid-template-columns:90px 1fr;column-gap:15px;padding-top:24px}.bonus-quantity{font-size:35px;grid-row:span 2;margin:0}.bonus-quantity small{display:block;font-size:10px;margin-top:8px}.bonus-grid h3{font-size:24px}.bonus-grid p{font-size:11px;margin-top:8px}.pro-offer h2{font-size:38px}.pro-offer .pro-label{font-size:10px}.pro-offer .offer-inclusions{font-size:12px}
}
@media(max-width:350px){.hero{padding-inline:16px}.hero h1{font-size:34px}.pro-bonuses h2,.pro-offer h2{font-size:33px}.kit-name{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.hero-toolbar{display:flex;justify-content:center}.toolbar-volume{display:none}
/* The original three benefits accompany the free instrument invitation. */
.hero .hero-benefits{flex-wrap:wrap;gap:9px 20px;font-size:12px;line-height:1.5;white-space:normal}
.hero-benefits li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hero-benefits li::before{margin-right:0}
@media(max-width:600px){.hero .hero-benefits{gap:9px 14px;font-size:11px;margin-top:16px}}
/* Equal introductions for the original and Pro walkthroughs. */
.walkthrough-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.walkthrough-panel{min-width:0}
.walkthrough-panel h2{margin-bottom:24px;font-size:clamp(25px,2.8vw,34px);line-height:1.15;letter-spacing:-.025em}
.walkthrough-section .walkthrough-panel .walkthrough{width:100%;aspect-ratio:16/9;border-radius:12px;background:#11191d;border:1px solid #b8c8cd24}
.walkthrough-section .walkthrough-placeholder>img{width:86%;height:auto;left:7%;top:50%;transform:translateY(-50%);opacity:.48}
.walkthrough-placeholder::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0b121600 25%,#0b1216e6 100%);pointer-events:none}
.walkthrough-placeholder-copy{position:absolute;inset:auto 24px 24px;z-index:1;text-align:center}
.walkthrough-placeholder-copy span{display:block;color:#bfd0d7;font:12px/1.5 Monoblock,monospace}
.walkthrough-placeholder-copy strong{display:block;margin-top:6px;color:#edf3f4;font:650 23px/1.2 var(--font);letter-spacing:-.02em}
@media(max-width:700px){.walkthrough-grid{grid-template-columns:1fr;gap:38px}.walkthrough-panel h2{font-size:26px;margin-bottom:20px}.walkthrough-placeholder-copy{inset:auto 20px 20px}.walkthrough-placeholder-copy strong{font-size:21px}}
.walkthrough-launch{position:absolute;inset:0;z-index:1;width:100%;height:100%;background:#111a1c;border:0;color:#f3eee3;overflow:hidden}
.walkthrough-launch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.walkthrough-launch::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#080b0abf,transparent 40%)}
.walkthrough-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:grid;place-items:center;width:76px;height:76px;border:1px solid #c7ecf7;border-radius:50%;background:#163b46df}
.walkthrough-play svg{width:30px;height:30px;fill:currentColor;stroke:none}
.walkthrough-label{position:absolute;bottom:27px;left:0;right:0;z-index:1;font:12px Monoblock,monospace}
.walkthrough-launch:hover .walkthrough-play{background:#8bd8ef;color:#182127}
@media(max-width:800px){.hero h1{font-size:clamp(40px,11.8vw,60px)}.hero h1>span{display:block}.hero-heading p{font-size:12px;line-height:1.65;max-width:34ch;margin-inline:auto}.hero-heading p>span{display:block}.hero-benefits{font-size:10px;line-height:1.6}.walkthrough-play{width:52px;height:52px}.walkthrough-play svg{width:23px}.walkthrough-label{font-size:10px;bottom:15px}}
@media(min-width:701px) and (max-width:800px){.pro-skins>img{width:100%;margin:0}}
/* The Chrome hero is now the actual playable native assembly. */
.native-chrome{aspect-ratio:3840/2160;background:transparent}
.instrument-stage .native-chrome{width:125%;margin-left:-12.5%}
.native-chrome .native-plate{mask-image:none}
.native-chrome .native-text,.native-chrome .native-value,.native-chrome .native-sprite[data-speed]{font-size:.66cqw;color:#25343b}
.native-chrome .native-value{font-size:.63cqw}
.native-chrome #preset,.native-chrome .native-bank{color:#e7e9df}
.native-chrome .native-sprite[data-speed]{font-size:.66cqw}
.native-chrome .native-scope-plate{pointer-events:none;border-radius:50%!important;z-index:2}
.native-chrome .native-fader::-webkit-slider-thumb{width:1.52cqw;height:1.52cqw}
.native-chrome .native-fader::-moz-range-thumb{width:1.52cqw;height:1.52cqw}
.native-demo-mount{aspect-ratio:3840/2160}
.native-demo-mount .native-chrome{background:transparent}
@media(max-width:700px){.instrument-stage .native-chrome{width:125%;margin-left:-12.5%}}
.instrument-stage .instrument-viewport{overflow:visible}

/* Three authentic finishes arc around the playable Chrome instrument. */
.hero{padding-top:40px}
.instrument-stage{position:relative;min-width:0;width:min(54vw,calc((100svh - 430px)*1.4074),720px)}
.hero-skin-stage{position:relative;isolation:isolate}
.hero-skin-stage .instrument-viewport{position:relative;z-index:2}
.hero-skin-wing{position:absolute;top:12%;width:72%;aspect-ratio:1.56;z-index:1;pointer-events:none;filter:drop-shadow(0 20px 24px #0009)}
.hero-skin-wing img{display:block;user-select:none}
.hero-skin-matte{left:-43%;transform:perspective(1400px) rotateY(18deg) rotateZ(-3deg)}
.hero-skin-matte img{position:absolute;width:130%;max-width:none;height:auto;left:-15%;top:-5%}
.hero-skin-dark{right:-43%;transform:perspective(1400px) rotateY(-18deg) rotateZ(3deg)}
.hero-skin-dark img{width:100%;height:100%;object-fit:cover;border-radius:3px}
@media(max-width:700px){
 .hero{padding-top:59px}
 .instrument-stage{width:100%}
 .hero-skin-stage{padding-top:25%}
 .hero-skin-wing{top:2%;width:60%}
 .hero-skin-matte{left:-3%;transform:perspective(900px) rotateY(18deg) rotateZ(-6deg)}
 .hero-skin-dark{right:-3%;transform:perspective(900px) rotateY(-18deg) rotateZ(6deg)}
}

/* A single, clearly priced upgrade offer. */
.pro-offer{padding:82px 24px 70px;background:#080b0a}
.pro-offer .download-inner{max-width:620px;margin:auto}
.pro-offer h2{font-size:clamp(38px,4.4vw,60px);line-height:1.06;letter-spacing:-.035em}
.pro-offer .offer-price{margin:22px 0 0;font:800 96px/1 var(--font);letter-spacing:-.04em;color:#8bd8ef}
.pro-offer .offer-deadline{margin:12px 0 0;font:13px/1.5 Monoblock,monospace;color:#8bd8ef}
.pro-offer .offer-summary{margin:27px 0 0;font:16px/1.75 var(--font);color:#e0e8e6}
.pro-offer .button{min-height:56px;min-width:300px;margin-top:28px;font-size:14px}
.pro-offer .offer-audience{margin:15px 0 0;font:11px/1.5 Monoblock,monospace;color:#b5c4c1}
.pro-offer .release-note{min-height:0;margin:0 auto;max-width:40ch;font:11px/1.6 Monoblock,monospace}
.pro-offer .release-note:not(:empty){margin-top:18px}
@media(max-width:700px){
 .pro-offer{padding:56px 24px 52px}
 .pro-offer h2{font-size:clamp(32px,8.8vw,42px)}
 .pro-offer .offer-price{font-size:80px;margin-top:22px}
 .pro-offer .offer-deadline{font-size:12px}
 .pro-offer .offer-summary{font-size:15px;margin-top:23px}
 .pro-offer .button{width:100%;min-width:0;font-size:13px}
}

/* October release preview — full library, real bonus covers and a complete offer. */
.sp-site-header__brand img{filter:grayscale(1) brightness(1.12)}
.hero-backdrop{overflow:hidden}
.hero-backdrop img{filter:grayscale(1) brightness(.57) blur(1.6px);object-position:50% 48%;transform:scale(1.015)}
.hero-backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/hero-film-grain.svg") repeat 0 0/180px 180px;mix-blend-mode:soft-light;opacity:.8}
.hero:after{background:linear-gradient(180deg,#080a0bd9 0%,#080a0b4d 45%,#080a0b88 100%)}


.kit-auditions{position:relative;isolation:isolate;padding-top:64px;padding-bottom:70px;background-image:url('assets/hero-film-grain.svg');background-repeat:repeat;background-size:150px 150px}
.kit-auditions::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('assets/kit-background-4k-still.webp') center 64%/cover no-repeat;filter:grayscale(1) blur(5px);opacity:.16;mix-blend-mode:multiply;clip-path:inset(0)}
.kit-auditions .section-heading{align-items:flex-start;margin-bottom:38px;gap:30px}
.kit-auditions h2{font-size:clamp(31px,3.35vw,48px);white-space:normal;text-wrap:balance}
.kit-auditions .kit-intro{font:14px/1.8 Monoblock,monospace!important;max-width:34ch!important;margin-top:7px}
.library-group h3{font:600 22px/1.25 var(--font);letter-spacing:-.02em}
.library-group>h3{margin-bottom:20px}
.library-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:20px}
.library-group-heading p{font:12px/1.6 Monoblock,monospace}
.library-original{margin-top:38px;padding-top:36px;border-top:1px solid #24434d66}
.library-group .kit-preview{padding:20px 0 0;border-top:1px solid #24434d55}
.library-group .kit-title{align-items:flex-start;flex-wrap:nowrap;gap:12px}
.library-group .kit-name{font:650 26px/1.12 var(--font);letter-spacing:-.025em;min-height:2.24em;flex:1}
.new-sticker,.library-new .kit-total{display:inline-block;flex:none;padding:5px 8px;background:#17313a;color:#fff;font:11px/1.1 Monoblock,monospace;letter-spacing:.02em;vertical-align:middle;transform:rotate(-4deg)}
.library-group .kit-wave-wrap{margin:20px 0 17px;height:64px}
.library-original .kit-name{font-size:24px}
.library-original .kit-total{display:none}
.library-original .kit-wave{opacity:.8}
.library-group .kit-control{font-size:12px;padding-bottom:5px}
.pro-bonuses .section-heading{align-items:flex-start;gap:40px}
.pro-bonuses .section-heading p{font-size:14px;margin-top:6px}
.bonus-grid{gap:32px;margin-top:42px}
.bonus-grid article{padding:0;border:0;display:block}
.bonus-cover{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 14px 28px #15262d22}
.bonus-copy{padding-top:25px}
.bonus-grid h3{font-size:clamp(23px,2.3vw,31px);line-height:1.15;letter-spacing:-.025em;min-height:2.3em;max-width:none}
.bonus-grid p{font:13px/1.7 Monoblock,monospace;margin-top:10px}
.bonus-grid p strong{font-weight:500;color:#15262d}
.bonus-note{margin-top:38px;font-size:12px}
.pro-offer{padding:88px 36px 90px;background:#090b0c}
.pro-offer .download-inner{max-width:1128px}
.pro-offer h2{font-size:clamp(38px,4.4vw,60px);text-wrap:balance}
.pro-offer h2 em{font-style:normal;color:#8bd8ef}
.pro-offer .offer-intro{font:14px/1.7 Monoblock,monospace;color:#c3d2d7;margin:22px 0 0}
/* Keep the plugin clear, with a matching-height vertical bonus column. */
.bundle-cluster{display:grid;grid-template-columns:minmax(0,1fr) 18%;grid-template-rows:repeat(3,minmax(0,1fr));gap:3%;width:min(900px,100%);aspect-ratio:1.78;margin:44px auto 54px}
.bundle-plugin{grid-column:1;grid-row:1 / 4;align-self:center;width:100%;height:auto;filter:drop-shadow(0 22px 28px #0007)}
.bundle-bonus{grid-column:2;width:auto;height:100%;max-width:100%;aspect-ratio:1;justify-self:end;object-fit:cover;border-radius:10px;box-shadow:0 16px 30px #0006}
.bundle-drums{grid-row:1}
.bundle-archetone{grid-row:2}
.bundle-midi{grid-row:3}
.offer-details{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;max-width:960px;margin:0 auto;text-align:left;align-items:center}
.offer-inclusions h3{font:600 26px/1.25 var(--font);letter-spacing:-.02em;margin-bottom:27px;color:#eef1f1}
.offer-inclusions ul{padding:0;margin:0;list-style:none}
.offer-inclusions li{position:relative;padding:0 0 0 25px;margin:0 0 20px}
.offer-inclusions li::before{content:'';position:absolute;left:1px;top:8px;width:7px;height:7px;background:#8bd8ef;border-radius:50%}
.offer-inclusions li strong{display:block;font:600 17px/1.35 var(--font);color:#eef1f1}
.offer-inclusions li span{display:block;font:12px/1.65 Monoblock,monospace;margin-top:4px;color:#b8c8cd}
.offer-purchase{border-left:1px solid #b8c8cd33;padding-left:48px}
.offer-purchase h3{font:600 27px/1.2 var(--font);letter-spacing:-.025em;color:#eef1f1}
.pro-offer .offer-price{font-size:90px;margin-top:20px}
.pro-offer .offer-deadline{font-size:12px;color:#c3d2d7}
.pro-offer .button{width:100%;min-width:0;margin-top:28px;min-height:58px;font-size:13px}
.pro-offer .offer-audience{font-size:11px;margin-top:17px;line-height:1.6}
.pro-offer .release-note{margin-left:0}
@media(max-width:1100px){.library-group .kit-name{font-size:23px}.library-group .kit-title{display:block}.library-new .kit-total{margin-top:10px}.offer-details{gap:40px}.offer-purchase{padding-left:35px}}
@media(max-width:800px){
 .kit-auditions{padding:44px 24px 48px}.kit-auditions .section-heading{margin-bottom:30px}.kit-auditions h2{font-size:clamp(29px,5.9vw,42px);white-space:normal}.kit-auditions .kit-intro{margin-top:20px;font-size:12px!important}
 .library-group h3{font-size:21px}.library-group-heading{display:block}.library-group-heading p{font-size:11px;margin-top:10px}.library-group .kit-name,.library-original .kit-name{font-size:22px;min-height:2.24em}.library-group .kit-preview-grid{gap:28px 24px}.library-group .kit-wave-wrap{height:52px;margin-top:16px}.library-original{margin-top:32px;padding-top:30px}
 .pro-bonuses{padding:50px 24px}.pro-bonuses .section-heading p{font-size:12px;max-width:36ch;margin-top:22px}.bonus-grid{grid-template-columns:repeat(3,1fr);gap:20px}.bonus-copy{padding-top:18px}.bonus-grid h3{font-size:21px}.bonus-grid p{font-size:11px}.bonus-note{font-size:11px}
 .pro-offer{padding:60px 24px}.pro-offer .offer-intro{font-size:12px;max-width:34ch;margin:20px auto 0}.bundle-cluster{margin:32px auto 48px}.offer-details{grid-template-columns:1fr;gap:28px;max-width:520px}.offer-inclusions h3{font-size:24px}.offer-inclusions li strong{font-size:16px}.offer-inclusions li span{font-size:12px}.offer-purchase{border-left:0;border-top:1px solid #b8c8cd33;padding:30px 0 0;text-align:center}.offer-purchase h3{font-size:27px}.pro-offer .offer-price{font-size:80px}.pro-offer .button{max-width:400px}.pro-offer .release-note{margin-inline:auto}
}
@media(max-width:600px){
 .hero-backdrop img{object-position:44% 50%}
 .bonus-grid{grid-template-columns:1fr;gap:36px}.bonus-grid article{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:22px;align-items:center}.bonus-copy{padding-top:0}.bonus-grid h3{font-size:24px;min-height:0;line-height:1.15}.bonus-grid p{font-size:12px;margin-top:15px}.bonus-note{margin-top:32px}
 .bundle-cluster{width:calc(100% + 20px);margin-left:-10px}.pro-offer h2{font-size:clamp(34px,8.4vw,46px)}
}
@media(max-width:360px){.library-group .kit-name,.library-original .kit-name{font-size:20px}.bonus-grid article{gap:17px}.bonus-grid h3{font-size:21px}.bonus-grid p{font-size:11px}}
/* Readability in both layouts, retaining the page's established type voices. */
.kit-auditions h2 em{color:#1d4c5d}
.pro-bonuses h2 em{color:#24718b}
.hero .format-icon,.hero-benefits,.reroll-hint,.walkthrough-label,.feature-tags,.source-packs{font-size:11px}
/* The hero invitation leads down to the complete bundle and price. */
.hero-toolbar>.primary{min-height:50px;gap:18px;box-shadow:0 0 0 1px #c2efff55,0 0 24px #8bd8ef55,0 8px 44px #8bd8ef33;transition:background .2s,transform .2s,box-shadow .2s}
.hero-toolbar>.primary:hover{box-shadow:0 0 0 1px #c2efff75,0 0 32px #8bd8ef70,0 8px 48px #8bd8ef40}
.hero-toolbar>.primary svg{flex:none;width:19px;height:19px}
@media(max-width:600px){.hero-toolbar>.primary{gap:12px;padding-inline:17px;font-size:12px}}
.reroll-hint,.pro-offer .offer-audience,.pro-offer .release-note,.library-group-heading p,.bonus-grid p,.bonus-note{font-size:12px}
.pro-bonuses .pro-label{color:#287b96}
.pro-offer .button{border:0}
/* Smaller, softly rounded pack covers in both bonus presentations. */
.bonus-cover{width:88%;max-width:300px;border-radius:12px}
/* Platform marks and brighter, clearly playable library cards. */
.platform-icons{display:flex;align-items:center;gap:11px;padding-left:11px;margin-left:3px;border-left:1px solid #ffffff55}
.hero-formats .platform-icon{display:block;width:23px;height:23px;object-fit:contain}
.hero-formats .platform-icon-windows{width:21px;height:21px}
.library-group .kit-preview{padding:20px 18px 18px;border:1px solid #fff;border-radius:14px;background:#f8fcfc;box-shadow:0 5px 15px #153e4e14;transition:background .2s,box-shadow .2s,transform .2s,border-color .2s}
.library-group .kit-wave{color:#28556a;opacity:1;stroke-width:2}
.library-group .kit-preview:hover{background:#fff;box-shadow:0 8px 22px #153e4e24;transform:translateY(-2px)}
.library-group .kit-preview:hover .kit-wave{color:#123e52}
.library-group .kit-preview[aria-pressed=true]{background:#fff;border-color:#176a89;box-shadow:0 0 0 1px #176a89,0 8px 22px #153e4e20}
.library-group .kit-control>svg{width:32px;height:32px;border:0;background:#193f50;color:#fff;padding:9px}
.library-group .kit-control,.library-group .kit-control small{color:#193f50}
.library-group .kit-wave-wrap{margin:16px 0 20px}
@media(max-width:800px){.library-group .kit-preview{padding:18px 12px 16px}.library-group .kit-preview-grid{gap:20px 16px}.library-group .kit-name,.library-original .kit-name{font-size:21px}.library-group .kit-wave-wrap{margin:15px 0 18px}.platform-icons{gap:8px;padding-left:9px;margin-left:2px}.hero-formats .platform-icon{width:21px;height:21px}.hero-formats .platform-icon-windows{width:19px;height:19px}}

/* Rendering a new arrangement locks input without dimming the native controls. */
.instrument-stage #instrument [data-preparing]:disabled,
.instrument-stage #instrument #dice[data-preparing]:disabled,
.instrument-stage #play[data-preparing]:disabled,
.instrument-stage #reroll-control[data-preparing]:disabled{opacity:1}

/* A single inset bonus collection separates it from the real-synth story. */
.pro-bonuses{padding:12px max(36px,calc((100vw - 1200px)/2)) 76px;border-top:0;background:#f5f4ef}
.bonus-container{max-width:1200px;margin:auto;padding:52px 48px 40px;border-radius:16px;background:#25282b;color:#f3f1eb}
.bonus-container .section-heading{gap:44px;margin-bottom:36px}
.bonus-container h2{font-size:clamp(34px,3.5vw,48px)}
.bonus-container h2 em{color:#8bd8ef}
.bonus-container .section-heading p,.bonus-container .bonus-grid p,.bonus-container .bonus-note{color:#cbd4d6}
.bonus-container .bonus-grid p strong{color:#f3f1eb}
.bonus-container .bonus-grid{gap:34px;margin-top:0}
.bonus-container .bonus-grid article{display:block;text-align:center}
.bonus-container .bonus-cover{margin-inline:auto;width:100%;max-width:280px;box-shadow:0 14px 28px #0003}
.bonus-container .bonus-copy{padding-top:24px}
.bonus-container .bonus-grid h3{font-size:26px;line-height:1.18;min-height:2.36em}
.bonus-container .bonus-grid p{font-size:12px;max-width:27ch;margin:12px auto 0}
.bonus-container .bonus-note{text-align:center;margin-top:34px}
.pro-offer .offer-price{display:flex;align-items:center;gap:20px}
.offer-price del{font:500 30px/1 var(--font);letter-spacing:-.02em;color:#aebcc1;text-decoration-thickness:2px}
.offer-countdown{margin-top:22px}
.countdown-values{display:flex;gap:22px}
.countdown-values>span{display:flex;flex-direction:column;gap:6px;min-width:38px}
.countdown-values b{font:600 29px/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:#edf3f4}
.countdown-values small{font:12px/1.4 Monoblock,monospace;color:#b8c8cd}
.offer-countdown time{display:block;margin-top:14px;font:12px/1.6 Monoblock,monospace;color:#b8c8cd}
.offer-countdown [hidden],.offer-price [hidden]{display:none}
@media(max-width:800px){
 .pro-bonuses{padding:8px 20px 48px}
 .bonus-container{padding:36px 26px 30px}
 .bonus-container .section-heading{text-align:center;display:block;margin-bottom:30px}
 .bonus-container .section-heading p{margin:20px auto 0}
 .bonus-container .bonus-grid{gap:24px}
 .bonus-container .bonus-grid h3{font-size:22px}
 .offer-purchase .offer-price,.countdown-values{justify-content:center}
}
@media(max-width:600px){
 .pro-bonuses{padding-inline:16px}
 .bonus-container{padding:32px 22px 28px}
 .bonus-container h2{font-size:34px}
 .bonus-container .bonus-grid{grid-template-columns:1fr;gap:36px}
 .bonus-container .bonus-cover{max-width:240px;width:90%}
 .bonus-container .bonus-grid h3{font-size:25px;min-height:0}
 .bonus-container .bonus-copy{padding-top:20px}
 .bonus-container .bonus-grid p{margin-top:10px}
 .offer-price del{font-size:28px}
 .countdown-values{gap:20px}
}

/* Keep the free instrument within reach beside the Pro upgrade. */
.offer-actions{display:flex;justify-content:center;align-items:stretch;gap:16px;max-width:760px;margin:40px auto 0}
.pro-offer .offer-actions .button{flex:1;width:auto;max-width:none;min-height:64px;margin:0;padding:18px 24px;gap:16px;font:750 17px/1.35 var(--font);letter-spacing:-.01em;justify-content:center}
.offer-actions .button svg{flex:none;stroke-width:2}
.offer-actions #pro-checkout{color:#10262e;background:var(--accent);box-shadow:0 8px 28px #8bd8ef30}
.offer-actions #pro-checkout:hover{background:#b9eaff;transform:translateY(-2px)}
.offer-actions .free-download{background:#f6f6f3;color:#162126}
.offer-actions .free-download:hover{background:#fff;transform:translateY(-2px)}
.hero-toolbar>.primary{font-family:var(--font);font-weight:750;font-size:16px;color:#10262e}
.pro-offer>.download-inner>.release-note{margin-inline:auto;text-align:center}
@media(max-width:640px){.offer-actions{flex-direction:column;max-width:400px;margin-top:30px;gap:12px}.pro-offer .offer-actions .button{width:100%;min-height:60px;font-size:16px}.hero-toolbar>.primary{font-size:14px}}

/* A centred product above the Lite / Pro comparison, followed by the offer. */
.pro-offer .bundle-cluster{display:block;width:min(560px,88%);aspect-ratio:auto;margin:28px auto 32px}
.bundle-cluster .bundle-plugin{display:block;width:100%;height:auto;margin:auto}
.offer-comparison{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:0 auto;padding:36px 32px;background:#f6f6f3 url('assets/comparison/grain-light.png') repeat;color:#18272d;border-radius:16px;text-align:left;scroll-margin-top:6px}
.comparison-column{min-width:0;padding-right:24px}
.comparison-column+ .comparison-column{border-left:1px solid #23394024;padding:0 0 0 24px}
.comparison-column h3{font:750 clamp(25px,2.5vw,32px)/1.15 var(--font);letter-spacing:-.025em;color:#18272d}
.comparison-pro h3{color:#226980}
.pro-offer .comparison-intro{margin:12px 0 28px;font:14px/1.55 var(--font);color:#485b63}
.comparison-list{display:grid;gap:27px;list-style:none;padding:0;margin:0}
.comparison-list li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center;min-height:100px}
.comparison-list strong{display:block;font:750 19px/1.25 var(--font);letter-spacing:-.018em;color:#18272d}
.comparison-list li div>span{display:block;margin-top:7px;font:13px/1.6 var(--font);color:#485b63}
.comparison-art{position:relative;display:flex;align-items:center;justify-content:center;width:76px;height:80px;min-width:0;border-radius:9px;background:#202426;overflow:hidden}
.comparison-art>img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}
.comparison-dice>img{width:78%;height:78%;object-fit:contain}
/* Native die sprite, resting frame, placed inside the unchanged scope artwork. */
.comparison-dice::after{content:'';position:absolute;left:50%;top:50.9%;width:30.8%;height:31.6%;transform:translate(-50%,-50%);background:url('assets/native/crt-dice-roll-blue.webp') center top/100% 6400% no-repeat;pointer-events:none}

.comparison-controls>img{position:absolute;width:360%;max-width:none;max-height:none;left:50%;top:50%;transform:translate(-20%,-35%)}
.comparison-skins>img{position:absolute;width:95%;max-height:none;left:-15%;top:6%;transform:rotate(-6deg)}
.comparison-skins>img+img{left:15%;top:36%;transform:rotate(6deg)}
.comparison-kit-cards{background:transparent;overflow:visible}
.comparison-kit-cards>img{position:absolute;width:61%;height:75%;object-fit:cover;border-radius:6px;box-shadow:0 4px 8px #18272d20}
.comparison-kit-cards>img:nth-child(1){left:0;top:3%;transform:rotate(-9deg)}
.comparison-kit-cards>img:nth-child(2){left:22%;top:15%;transform:rotate(2deg)}
.comparison-kit-cards>img:nth-child(3){left:43%;top:29%;transform:rotate(10deg)}
.comparison-bonus-cards{background:transparent;overflow:visible}
.comparison-bonus-cards>img{position:absolute;width:57%;height:auto;border-radius:6px;box-shadow:0 4px 8px #18272d20}
.comparison-bonus-cards>img:nth-child(1){left:0;top:0;transform:rotate(-8deg)}
.comparison-bonus-cards>img:nth-child(2){left:22%;top:23%;transform:rotate(0)}
.comparison-bonus-cards>img:nth-child(3){left:43%;top:47%;transform:rotate(8deg)}
.pro-offer .offer-purchase{border:0;padding:0;margin:44px auto 0;text-align:center}
.pro-offer .offer-purchase h3{font-size:clamp(38px,5.5vw,64px);font-weight:750;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.pro-offer .offer-purchase .offer-price{font-size:clamp(96px,10vw,128px);margin-top:24px;gap:24px}
.pro-offer .offer-purchase .offer-price del{font-size:clamp(30px,3vw,38px)}
.pro-offer .offer-deadline{font-size:14px}
.pro-offer .offer-countdown{margin-top:28px}
.pro-offer .countdown-values{gap:clamp(16px,3vw,32px)}
.pro-offer .countdown-values>span{min-width:clamp(48px,5vw,64px);gap:8px}
.pro-offer .countdown-values b{font-size:clamp(36px,4vw,48px);font-weight:700}
.pro-offer .offer-purchase .offer-price,.pro-offer .countdown-values{justify-content:center}
.pro-offer .offer-actions{margin-top:28px}
@media(max-width:900px){.offer-comparison{padding:32px 26px}.comparison-column{padding-right:24px}.comparison-column+ .comparison-column{padding-left:24px}.comparison-list li{grid-template-columns:72px minmax(0,1fr);gap:14px;min-height:125px}.comparison-art{width:72px;height:76px}.comparison-list strong{font-size:18px}}
@media(max-width:640px){.offer-comparison{grid-template-columns:1fr;padding:28px 24px;scroll-margin-top:0}.comparison-column{padding:0}.comparison-column+ .comparison-column{padding:30px 0 0;margin-top:30px;border-left:0;border-top:1px solid #23394024}.comparison-column h3{font-size:28px}.comparison-list{gap:24px}.comparison-list li{grid-template-columns:76px minmax(0,1fr);min-height:0;gap:16px}.comparison-art{width:76px;height:80px}.pro-offer .comparison-intro{margin-bottom:25px}.pro-offer .bundle-cluster{margin:24px auto 28px}.pro-offer .offer-purchase{margin-top:36px}}

/* A compact phone layout, with the playable Chrome unit as the hero. */
@media(max-width:800px){
 .hero{padding:24px 12px 30px}
 .hero-formats,.hero-skin-wing{display:none}
 .hero-heading{margin-bottom:20px}
 .hero h1{font-size:clamp(30px,10.8vw,72px);line-height:1.05;white-space:nowrap}
 .hero h1>span,.hero-heading p>span{display:inline}
 .hero-heading p{max-width:none;padding:0;font-size:clamp(11px,2.7vw,16px);line-height:1.5;white-space:nowrap}
 .hero .hero-benefits{margin-top:16px;gap:8px 14px}
 .hero-toolbar{margin:0 0 10px}
 .instrument-stage{width:100%;max-width:640px}
 .hero-skin-stage{padding-top:0}
 .feature-story{padding-inline:16px}
 .story-step{padding:32px 0}
 .story-step h2{width:100%;font-size:clamp(25px,6.8vw,36px);line-height:1.12;text-wrap:balance;white-space:normal}
 .story-step h2 br,.recordings h2 br{display:none}
 .story-step p{width:100%;max-width:none;font-size:13px;line-height:1.6;margin-top:14px}
 .story-step>.story-picture{margin-bottom:22px}
 .story-step>.pro-skins>img{width:100%;margin-inline:0}
 .story-step>.pro-section-sticker{margin-bottom:16px}
 .story-step .feature-tags{margin-top:18px}
 .recordings{padding:40px 16px}
 .recordings h2{font-size:clamp(24px,6.8vw,34px);line-height:1.12;text-wrap:balance}
 .recordings-copy{margin-top:22px}
 .recordings-copy p{font-size:13px;line-height:1.6}
 .recordings-copy p+p{margin-top:14px}
 .pro-bonuses{padding:8px 12px 40px}
 .bonus-container{padding:28px 16px 24px}
 .bonus-container h2{font-size:clamp(27px,7vw,36px)}
 .bonus-container .section-heading{margin-bottom:26px}
 .bonus-container .section-heading p{font-size:12px;line-height:1.6;margin-top:16px}
 .bonus-container .bonus-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .bonus-container .bonus-grid article{min-width:0}
 .bonus-container .bonus-cover{width:100%;max-width:200px;border-radius:12px}
 .bonus-container .bonus-copy{padding-top:14px}
 .bonus-container .bonus-grid h3{font-size:clamp(13px,3.5vw,20px);line-height:1.25;min-height:2.5em}
 .bonus-container .bonus-grid p{font-size:11px;line-height:1.5;margin-top:8px}
 .bonus-container .bonus-note{font-size:11px;line-height:1.6;margin-top:24px}
}