@font-face {
    font-family: Gotham;
    src: url('/v6/view/fonts/GothamBookRegular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Gotham;
    src: url('/v6/view/fonts/GB.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}
:root { color-scheme: light; --red: #c60000; --content-width: 1150px; }
* { box-sizing: border-box; }
body { margin: 0; color: #111; background: #fff; font-family: 'Segoe UI', Gotham, Arial, sans-serif; font-size: 13pt; line-height: 1.45; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #0089c4; outline-offset: 5px; }
p, h1, h2 { margin: 0; }
p { text-align: justify; }
h2 { font-size: 24.5px; line-height: 1.2; font-weight: 700; letter-spacing: -.4px; }
h2 span { color: var(--red); }
.content { width: min(var(--content-width), calc(100% - 48px)); margin-inline: auto; }
.partner-strip { min-height: 53px; display: flex; align-items: center; justify-content: center; padding: 7px 20px; background: #000; color: #fff; }
.partner-badge { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 38px; max-width: 100%; padding: 4px 12px; border: 1.5px solid #ff1717; border-radius: 17px; }
.partner-badge p { font-size: 19.2px; line-height: 1.25; font-weight: 700; letter-spacing: -.25px; text-align: center; text-shadow: 0 1px 1.5px #666; }
.partner-badge p span { color: #f41616; }
.musehub-brand { flex: 0 0 107.5px; width: 107.5px; }
.hero { color: #fff; background: #160000 url('hero-background.webp') center center / cover no-repeat; }
.hero-inner { padding-top: 15px; padding-bottom: 29px; text-align: center; }
.hero h1 { width: min(516.5px, 80%); margin: 0 auto -12px; }
.tagline { text-align: center; font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -.55px; text-shadow: 0 1px 2px #000; }
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: min(600px, 100%); margin: 46px auto 0; }
.button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 43px; padding: 8px 22px 8px 27px; border-radius: 24px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; text-shadow: 0 1px 2px #555; box-shadow: inset 0 1px 1px #ffffff26, 0 1px 2px #0006; transition: filter .15s, transform .15s; }
.button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.button-song-surgeon { background: linear-gradient(#c60000 0%, #a20e09 38%, #462e24 100%); }
.button-musehub { background: linear-gradient(#55e8e5, #20d2e7 47%, #009fe9); }
.button-icon { flex: 0 0 23px; width: 23px; height: 23px; }
.arrow { flex: 0 0 10px; width: 10px; height: 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.introduction { display: grid; grid-template-columns: 173px minmax(0, 1fr); gap: 25px; align-items: center; padding: 39px 0 66px; }
.product-box { width: 173px; filter: drop-shadow(4px 9px 6px #0005); }
.intro-copy { padding-top: 30px; }
.dropcap::first-letter { float: left; font-family: Georgia, 'Times New Roman', serif; font-size: 151px; line-height: .74; padding: 0 10px 6px 0; }
.platforms { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 25px; font-size: 12px; }
.platform { display: flex; align-items: center; gap: 16px; }
.platform span { text-decoration: underline; }
.platform img { width: 24px; max-height: 30px; filter: brightness(0) drop-shadow(2px 2px 3px #0005); }
.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 66px; }
.feature h2 { margin-bottom: 24px; }
.feature-image { width: 90%; justify-self: end; border: 2px solid #111; }
.comparison { align-items: start; margin-top: 80px; margin-bottom: 50px; }
.comparison-table { width: 90%; justify-self: end; align-self: center; }
table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #aaa; border-radius: 3px; overflow: hidden; table-layout: fixed; font-size: 12px; line-height: 1.18; color: #707070; }
th, td { border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; padding: 4px 8px; }
th { font-weight: 400; text-align: left; }
th:first-child { width: 46%; }
td, thead th:not(:first-child) { text-align: center; }
thead th { font-size: 16.5px; color: #111; padding-block: 5px; }
thead img { margin-inline: auto; object-fit: contain; max-height: 24px; width: auto; }
.table-logo { width: 80px; }
th:last-child, td:last-child { border-right: 0; }
tbody tr:last-child > * { border-bottom: 0; }
.check { display: inline-block; color: #111; font-size: 18px; font-weight: 700; line-height: .85; }
.closing-line { margin-bottom: 60px; color: #ff1323; font-size: 24.5px; line-height: 1.25; font-weight: 700; letter-spacing: -.3px; text-align: left; }
.upgrade { padding: 14px 18px 42px; background: #fcecef; border-radius: 3px 3px 0 0; }
.upgrade h2 { margin-bottom: 18px; }
.upgrade h2 span { color: #ff1323; }
.upgrade-content { display: grid; grid-template-columns: minmax(0, 1fr) 188px; gap: 28px; align-items: center; }
.upgrade-link { text-decoration: underline; text-underline-offset: 3px; }
.upgrade-button { justify-content: center; min-height: 46px; padding: 11px 18px; font-size: 13pt; }
.trust { color: #e3e3e3; background: #101010 url('/isolate-instrument-assets/backgrounds/black_background.png') center / cover no-repeat; padding: 48px 24px 26px; text-shadow: 0 1px 2px #000; }
.trust-content { max-width: var(--content-width); margin-inline: auto; }
.trust h2 { display: flex; align-items: center; justify-content: center; gap: 26px; max-width: 946px; margin: 0 auto 30px; font-size: 19px; font-weight: 400; letter-spacing: .3em; text-align: center; }
.trust h2::before, .trust h2::after { content: ''; height: 1px; background: #ddd; flex: 1 1 86px; }
.trust p { max-width: 1047px; margin: 0 auto 48px; font-size: 13pt; line-height: 1.45; text-align: justify; text-align-last: center; letter-spacing: .2px; }
.trust-badges { display: grid; grid-template-columns: 1.04fr 1.03fr 1.16fr 1.15fr; gap: 30px; align-items: center; }
.trust-badges img { width: 70%; max-height: 152px; justify-self: center; object-fit: contain; filter: drop-shadow(0 4px 6px #444); }
@media (max-width: 1300px) {
    .hero h1 { max-width: 450px; }
    .hero-actions { width: min(550px, 100%); margin-top: 31px; gap: 20px; }
    .hero-actions .button { font-size: 14px; min-height: 38px; padding-inline: 17px; }
    .partner-strip { min-height: 45px; }
    .partner-badge { min-height: 32px; }
    .partner-badge p { font-size: 15.6px; }
    .musehub-brand { flex-basis: 92.5px; width: 92.5px; }
}
@media (max-width: 1000px) {
    .introduction { grid-template-columns: 145px minmax(0, 1fr); padding-block: 32px 48px; gap: 24px; }
    .product-box { width: 145px; }
    .intro-copy { padding-top: 10px; }
    .dropcap::first-letter { font-size: 114px; }
    .feature { gap: 24px; margin-bottom: 48px; }
    .feature h2 { margin-bottom: 18px; }
    .comparison { margin-top: 50px; }
    .closing-line { margin-bottom: 42px; }
    .trust { padding-block: 36px 24px; }
    .trust h2 { font-size: 17px; letter-spacing: .2em; gap: 18px; }
    .trust p { margin-bottom: 36px; }
    .trust-badges { gap: 20px; }
}
@media (max-width: 720px) {
    .content { width: calc(100% - 36px); }
    h2 { font-size: 24px; }
    .partner-strip { padding: 6px 18px; }
    .partner-badge { flex-wrap: wrap; column-gap: 8px; row-gap: 4px; padding: 5px 8px; border-width: 1px; border-radius: 14px; }
    .partner-badge p { font-size: 14.4px; max-width: 290px; }
    .musehub-brand { flex-basis: 80px; width: 80px; }
    .hero { background-position: 42% center; }
    .hero-inner { padding-block: 18px 24px; }
    .hero h1 { width: min(360px, 85%); margin-bottom: 6px; }
    .tagline { line-height: 1.25; }
    .hero-actions { width: min(520px, 100%); margin-top: 24px; gap: 14px; }
    .hero-actions .button { min-height: 43px; padding-inline: 14px; font-size: 14px; }
    .introduction { grid-template-columns: 1fr; gap: 26px; padding-block: 30px 44px; }
    .product-box { width: 130px; margin-inline: auto; }
    .intro-copy { padding: 0; }
    .dropcap::first-letter { font-size: 95px; line-height: .84; padding-right: 8px; }
    .platforms { flex-wrap: wrap; gap: 16px; font-size: 12px; margin-top: 22px; }
    .platform { gap: 10px; }
    .platform img { width: 22px; max-height: 28px; }
    .feature { grid-template-columns: 1fr; gap: 20px; margin-bottom: 42px; }
    .feature h2 { margin-bottom: 16px; }
    .feature-image { width: 90%; max-width: 504px; justify-self: center; }
    .comparison { margin-top: 48px; }
    .comparison-table { width: min(100%, 504px); justify-self: center; }
    table { font-size: 12px; }
    th, td { padding: 6px; }
    .closing-line { font-size: 23px; margin-bottom: 32px; }
    .upgrade { padding: 18px 16px 24px; }
    .upgrade-content { grid-template-columns: 1fr; gap: 22px; }
    .upgrade-button { min-width: 188px; justify-self: center; }
    .trust { padding: 30px 18px 24px; }
    .trust h2 { font-size: 16px; gap: 12px; margin-bottom: 24px; letter-spacing: .15em; line-height: 1.5; }
    .trust h2::before, .trust h2::after { flex-basis: 20px; min-width: 14px; }
    .trust p { margin-bottom: 30px; letter-spacing: 0; }
    .trust-badges { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 520px) {
    .hero-actions { grid-template-columns: 1fr; width: min(265px, 100%); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:hover { transform: none; } }
