/* V13 KlangFormer product page ----------------------------------------- */

.klangformer-product-page {
    --l1p-nav-height: 3.35rem;
    --l1p-nav-edge-gap: clamp(1.6rem, 2.8vw, 3.25rem);
    --l1p-anchor-depth: 1.5rem;
    --l1p-anchor-scroll-shift: 3.125rem;
    background: #05090e;
}

.klangformer-product-page .site-header {
    position: relative;
}

.klangformer-product-page .l1p-product-nav {
    border-bottom-color: rgba(113, 194, 218, 0.28);
    background: rgba(9, 18, 27, 0.84);
    color: #f6fbff;
}

.klangformer-product-page .l1p-product-nav.is-stuck {
    border-bottom-color: rgba(132, 207, 229, 0.48);
    background: rgba(6, 14, 22, 0.79);
}

.klangformer-product-page .l1p-product-nav__top {
    color: rgba(242, 249, 252, 0.68);
}

.klangformer-product-page .l1p-product-nav__link {
    color: rgba(246, 251, 255, 0.9);
}

.klangformer-product-page .l1p-product-nav__link:hover,
.klangformer-product-page .l1p-product-nav__link:focus-visible,
.klangformer-product-page .l1p-product-nav__link.is-active,
.klangformer-product-page .l1p-product-nav__top:hover,
.klangformer-product-page .l1p-product-nav__top:focus-visible {
    color: #78c8e1;
}

.klangformer-product-page .l1p-product-nav__purchase {
    background: #176da7;
}

.klangformer-product-page .l1p-product-nav__purchase:hover,
.klangformer-product-page .l1p-product-nav__purchase:focus-visible {
    background: #105984;
}

.kf-page {
    overflow: clip;
    background: #05090e;
    color: #ffffff;
}

.kf-hero {
    position: relative;
    height: calc(100svh - var(--header-height) - var(--l1p-nav-height));
    min-height: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 12%, rgba(62, 185, 210, 0.13), transparent 30rem),
        linear-gradient(90deg, rgba(2, 7, 12, 0.92) 0%, rgba(3, 9, 15, 0.67) 34%, rgba(4, 10, 16, 0.19) 67%, rgba(3, 8, 13, 0.08) 100%),
        url("../images/kfhero.jpg") 58% center / cover no-repeat;
}

.kf-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 13rem;
    background: linear-gradient(180deg, transparent, rgba(2, 7, 12, 0.3));
    content: "";
    pointer-events: none;
}

.kf-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    justify-content: space-between;
    padding-block: clamp(2.25rem, 6vh, 4.25rem) clamp(1.5rem, 3vh, 2.5rem);
}

.kf-hero__content {
    width: min(100%, 65rem);
    opacity: 0;
    transform: translateY(1.35rem);
    animation: kf-hero-content-in 900ms 120ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kf-hero__logo {
    display: block;
    width: clamp(17rem, 27vw, 31rem);
    height: auto;
}

.kf-hero h1 {
    display: grid;
    gap: clamp(0.4rem, 1vw, 0.85rem);
    margin: clamp(4.9rem, 9.7vh, 7.5rem) 0 0;
    line-height: 0.98;
}

.kf-hero h1 span,
.kf-hero h1 strong {
    display: block;
}

.kf-hero h1 span {
    color: #ffffff;
    font-size: clamp(3.15rem, 5.5vw, 6.25rem);
    font-weight: 250;
    letter-spacing: 0.01em;
}

.kf-hero h1 strong {
    width: fit-content;
    max-width: 100%;
    padding-block: 0.08em;
    background: linear-gradient(96deg, #ffffff 0%, #cbeef5 38%, #a7c8e7 68%, #d4c5ea 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2rem, 3.1vw, 3.8rem);
    font-weight: 500;
    letter-spacing: -0.035em;
}

.kf-hero__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 5rem);
    opacity: 0;
    transform: translateY(1rem);
    animation: kf-hero-footer-in 820ms 430ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kf-hero__awards {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: clamp(1.25rem, 2.3vw, 2.5rem);
}

.kf-hero__awards a {
    display: block;
    flex: 0 0 auto;
    text-decoration: none;
}

.kf-hero__award {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.kf-hero__award--gearspace {
    height: clamp(2.5rem, 3.8vw, 3.6rem);
}

.kf-hero__award--professional-audio {
    height: clamp(2.1rem, 3vw, 2.8rem);
}

.kf-hero__award--amazona {
    height: clamp(1.9rem, 3vw, 2.8rem);
}

.kf-hero__award--bonedo {
    height: clamp(2.4rem, 3.5vw, 3.25rem);
}

.kf-hero__awards a:hover .kf-hero__award,
.kf-hero__awards a:focus-visible .kf-hero__award {
    opacity: 1;
    filter: none;
    transform: none;
}

.kf-hero__systems {
    display: block;
    width: clamp(3.9rem, 5.2vw, 5.15rem);
    height: auto;
    flex: 0 0 auto;
}

@keyframes kf-hero-content-in {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes kf-hero-footer-in {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 63.999rem) {
    .klangformer-product-page {
        --l1p-nav-height: 3.15rem;
        --l1p-nav-edge-gap: 1.35rem;
    }

    .kf-hero {
        background-position: 61% center;
    }

    .kf-hero__inner {
        padding-block-start: clamp(2.25rem, 5vh, 3.5rem);
    }

    .kf-hero__logo {
        width: clamp(16rem, 39vw, 24rem);
    }

    .kf-hero__footer {
        gap: 2rem;
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem),
    (min-width: 64rem) and (max-width: 74.999rem) and (hover: none) and (pointer: coarse) {
    .klangformer-product-page .kf-hero {
        height: clamp(31rem, 55svh, 36rem);
        min-height: 31rem;
    }

    .klangformer-product-page .kf-hero__award--gearspace {
        height: 3rem;
    }

    .klangformer-product-page .kf-hero__award--professional-audio {
        height: 2.33rem;
    }

    .klangformer-product-page .kf-hero__award--amazona {
        height: 2.33rem;
    }

    .klangformer-product-page .kf-hero__award--bonedo {
        height: 2.71rem;
    }
}

@media (max-width: 47.999rem) {
    .klangformer-product-page {
        --l1p-nav-height: 0rem;
        --l1p-nav-edge-gap: 1rem;
    }

    .klangformer-product-page .site-header {
        position: sticky;
        top: 0;
    }

    .kf-hero {
        height: calc(100svh - var(--header-height));
        min-height: 0;
        background-position: 61% center;
    }

    .kf-hero::before {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2, 7, 12, 0.78) 0%, rgba(2, 7, 12, 0.43) 52%, rgba(2, 7, 12, 0.73) 100%);
        content: "";
        pointer-events: none;
    }

    .kf-hero__inner {
        padding-block: clamp(1.9rem, 5.5vh, 2.75rem) 1.15rem;
    }

    .kf-hero__logo {
        width: min(78vw, 17rem);
    }

    .kf-hero h1 {
        gap: 0.55rem;
        margin-top: clamp(3.85rem, 9.5vh, 5.1rem);
    }

    .kf-hero h1 span {
        font-size: clamp(3rem, 15vw, 4.15rem);
    }

    .kf-hero h1 strong {
        font-size: clamp(1.7rem, 7.8vw, 2.35rem);
        line-height: 1.08;
    }

    .kf-hero__footer {
        gap: 0.85rem;
    }

    .kf-hero__awards {
        width: min(76%, 17rem);
        gap: clamp(0.65rem, 3vw, 0.95rem);
    }

    .kf-hero__award--gearspace {
        height: clamp(1.8rem, 7.8vw, 2.25rem);
    }

    .kf-hero__award--professional-audio {
        height: clamp(1.55rem, 6.8vw, 1.95rem);
    }

    .kf-hero__award--amazona {
        height: clamp(1.35rem, 5.7vw, 1.65rem);
    }

    .kf-hero__award--bonedo {
        height: clamp(1.7rem, 7.3vw, 2.1rem);
    }

    .kf-hero__systems {
        width: min(14%, 3.35rem);
    }
}

/* Desktop: constrain the complete KlangFormer introduction to the viewport. */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
    .klangformer-product-page .kf-hero {
        height: calc(100svh - var(--header-height) - var(--l1p-nav-height));
        min-height: 0;
        max-height: calc(100svh - var(--header-height) - var(--l1p-nav-height));
    }

    .klangformer-product-page .kf-hero__inner {
        height: 100%;
        min-height: 0;
        padding-block: clamp(4.25rem, 11svh, 7rem) clamp(1.25rem, 2.5svh, 2rem);
    }

    .klangformer-product-page .kf-hero__logo {
        width: clamp(14rem, min(25vw, 42svh), 28rem);
    }

    .klangformer-product-page .kf-hero h1 {
        gap: clamp(0.35rem, min(0.8vw, 1.4svh), 0.7rem);
        margin-top: clamp(2.25rem, 7svh, 5.25rem);
    }

    .klangformer-product-page .kf-hero h1 span {
        font-size: clamp(2.5rem, min(5vw, 9svh), 5.5rem);
    }

    .klangformer-product-page .kf-hero h1 strong {
        font-size: clamp(1.75rem, min(2.8vw, 5.5svh), 3.4rem);
    }

    .klangformer-product-page .kf-hero__footer {
        gap: clamp(1.5rem, min(4vw, 6svh), 4rem);
    }

    .klangformer-product-page .kf-hero__awards {
        gap: clamp(0.8rem, min(1.8vw, 3svh), 2rem);
    }

    .klangformer-product-page .kf-hero__award--gearspace {
        height: clamp(2.1rem, min(3.2vw, 5svh), 3.25rem);
    }

    .klangformer-product-page .kf-hero__award--professional-audio,
    .klangformer-product-page .kf-hero__award--amazona {
        height: clamp(1.8rem, min(2.6vw, 4.2svh), 2.5rem);
    }

    .klangformer-product-page .kf-hero__award--bonedo {
        height: clamp(2rem, min(3vw, 4.7svh), 3rem);
    }

    .klangformer-product-page .kf-hero__systems {
        width: clamp(3.3rem, min(4.7vw, 8svh), 4.7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-hero__content,
    .kf-hero__footer {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

.kf-intro {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 88% 16%, rgba(105, 188, 214, 0.17), transparent 29rem),
        radial-gradient(circle at 72% 78%, rgba(142, 117, 188, 0.11), transparent 34rem),
        linear-gradient(135deg, #f8fafb 0%, #eef3f5 52%, #f6f7fa 100%);
    color: #11191e;
}

.kf-intro::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    height: 0.125rem;
    background: linear-gradient(90deg, #55bad5 0%, #91dce9 42%, #a590d3 73%, transparent 100%);
    content: "";
}

.kf-intro__number {
    position: absolute;
    z-index: -1;
    top: 0.035em;
    right: 0.01em;
    display: flex;
    align-items: flex-start;
    color: rgba(77, 125, 146, 0.055);
    font-size: clamp(16rem, 31vw, 35rem);
    font-weight: 200;
    letter-spacing: -0.09em;
    line-height: 1;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
    pointer-events: none;
    user-select: none;
}

.kf-intro__number span {
    display: block;
    font: inherit;
    line-height: 1;
}

.kf-intro__inner {
    position: relative;
    z-index: 2;
    padding-block: clamp(6rem, 10vw, 10.5rem) clamp(5.5rem, 9vw, 9rem);
}

.kf-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(27rem, 1.08fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 10rem);
}

.kf-intro__copy,
.kf-intro__visual,
.kf-intro__journey {
    opacity: 0;
    transition:
        opacity 760ms ease,
        transform 960ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-intro__copy {
    transform: translateY(1.5rem);
}

.kf-intro__visual {
    transform: translateX(2.25rem);
    transition-delay: 120ms;
}

.kf-intro__journey {
    transform: translateY(1.25rem);
    transition-delay: 180ms;
}

.kf-intro__copy.is-visible,
.kf-intro__visual.is-visible,
.kf-intro__journey.is-visible {
    opacity: 1;
    transform: none;
}

.kf-intro__welcome {
    margin: 0;
    color: #24343c;
    line-height: 1;
}

.kf-intro__welcome span,
.kf-intro__welcome strong {
    display: block;
}

.kf-intro__welcome span {
    font-size: clamp(1.45rem, 2.25vw, 2.65rem);
    font-weight: 350;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.kf-intro__welcome strong {
    width: max-content;
    max-width: none;
    margin-top: 0.2em;
    padding: 0.03em 0.14em 0.11em 0;
    background: linear-gradient(102deg, #111416 0%, #353a40 34%, #4d668a 67%, #1c2228 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2.65rem, 3.5vw, 4.15rem);
    font-weight: 600;
    letter-spacing: -0.052em;
    line-height: 0.98;
    white-space: nowrap;
}

.kf-intro h2 {
    margin: 0;
    font-size: clamp(1.8rem, 3.1vw, 3.6rem);
    letter-spacing: 0.035em;
    line-height: 1.08;
}

.kf-intro h2 span,
.kf-intro h2 strong {
    display: block;
}

.kf-intro h2 span {
    color: #182126;
    font-weight: 420;
}

.kf-intro h2 strong {
    width: fit-content;
    max-width: 100%;
    padding: 0.06em 0.04em 0.12em 0;
    background: linear-gradient(96deg, #3f93b1 0%, #61bad1 42%, #786caf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 650;
}

.kf-intro__lead {
    width: min(100%, 49rem);
    margin-top: clamp(2.4rem, 4vw, 3.75rem);
}

.kf-intro__lead p {
    margin: 0;
    color: #455158;
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    font-weight: 400;
    letter-spacing: 0.006em;
    line-height: 1.78;
}

.kf-intro__lead p + p {
    margin-top: 1.3em;
}

.kf-intro__compatibility {
    margin: clamp(1.5rem, 2.5vw, 2.15rem) 0 0;
    color: #6b777d;
    font-size: clamp(0.72rem, 0.9vw, 0.84rem);
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.55;
}

.kf-intro__visual {
    position: relative;
    width: 100%;
    margin: 0;
    align-self: center;
    isolation: isolate;
}

.kf-intro__visual-ui {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}

.kf-intro__visual-shadow {
    position: absolute;
    z-index: 1;
    top: 83.5%;
    left: 50%;
    display: block;
    width: 113.5%;
    max-width: none;
    height: auto;
    opacity: 0.78;
    pointer-events: none;
    transform: translateX(-50%);
}

.kf-intro__journey {
    position: relative;
    margin: clamp(5rem, 9vw, 8.5rem) 0 0;
    padding-top: clamp(2.35rem, 4.5vw, 4.25rem);
    border-block: 0.0625rem solid rgba(35, 75, 90, 0.15);
}

.kf-intro__journey h2 {
    letter-spacing: 0.012em;
    text-align: center;
}

.kf-intro__journey h2 strong {
    margin-inline: auto;
    background: linear-gradient(96deg, #667e9d 0%, #5f605f 50%, #4c6589 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kf-intro__journey-visual {
    display: block;
    width: clamp(21rem, 36vw, 34rem);
    max-width: 100%;
    height: auto;
    margin: clamp(4.5rem, 7.5vw, 7rem) auto clamp(5rem, 8.5vw, 8rem);
}

.kf-intro__signal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.kf-intro__signal::before {
    position: absolute;
    top: 2.15rem;
    right: 12.5%;
    left: 12.5%;
    height: 0.0625rem;
    background: linear-gradient(90deg, #67bdd5, #8895cd 56%, #796aab);
    content: "";
}

.kf-intro__signal li {
    position: relative;
    min-width: 0;
    padding: clamp(3.5rem, 5vw, 4.75rem) clamp(1rem, 2.2vw, 2.3rem) clamp(1.6rem, 3vw, 2.5rem);
    text-align: center;
}

.kf-intro__signal li::before {
    position: absolute;
    z-index: 1;
    top: 1.82rem;
    left: 50%;
    width: 0.72rem;
    height: 0.72rem;
    border: 0.16rem solid #f2f6f8;
    background: #5faecb;
    box-shadow: 0 0 0 0.0625rem rgba(61, 130, 155, 0.4);
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.kf-intro__signal li:nth-child(3)::before {
    background: #7d8bc5;
}

.kf-intro__signal li:nth-child(4)::before {
    width: 1.05rem;
    height: 1.05rem;
    border-width: 0.19rem;
    border-color: #eef7f3;
    background: #61bea0;
    box-shadow:
        0 0 0 0.0625rem rgba(67, 145, 119, 0.48),
        0 0 1.2rem rgba(97, 190, 160, 0.34);
}

.kf-intro__signal strong {
    display: block;
    color: #293940;
    font-size: clamp(0.83rem, 1.08vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.025em;
    line-height: 1.45;
}

@media (max-width: 75rem) {
    .kf-intro__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 1.05fr);
        gap: clamp(3rem, 5vw, 5rem);
    }
}

@media (max-width: 63.999rem) {
    .kf-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(4rem, 8vw, 6rem);
    }

    .kf-intro__copy {
        width: min(100%, 48rem);
    }

    .kf-intro__visual {
        width: min(92%, 48rem);
        justify-self: end;
    }

    .kf-intro__journey {
        margin-top: clamp(4rem, 8vw, 6rem);
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem),
    (min-width: 64rem) and (max-width: 74.999rem) and (hover: none) and (pointer: coarse) {
    .klangformer-product-page .kf-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .klangformer-product-page .kf-intro__visual {
        width: min(60%, 30rem);
        grid-row: 1;
        justify-self: center;
        margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
    }

    .klangformer-product-page .kf-intro__copy {
        width: min(100%, 48rem);
        grid-row: 2;
        margin-top: clamp(4.75rem, 7vw, 5.75rem);
    }

    .klangformer-product-page .kf-intro__journey {
        margin-top: clamp(5rem, 8vw, 6.5rem);
        padding-top: clamp(4.5rem, 7vw, 5.5rem);
        border-bottom: 0;
    }

    .klangformer-product-page .kf-intro__journey h2 {
        font-size: clamp(2.75rem, 5vw, 4rem);
    }
}

@media (max-width: 47.999rem) {
    .kf-intro__number {
        top: 0.08em;
        right: -0.025em;
        font-size: 13.5rem;
    }

    .kf-intro__inner {
        padding-block: 4.75rem 4.25rem;
    }

    .kf-intro__grid {
        gap: 3.75rem;
    }

    .kf-intro h2 {
        font-size: clamp(1.55rem, 7.2vw, 2.2rem);
        line-height: 1.12;
    }

    .kf-intro__journey-visual {
        width: min(84vw, 27rem);
        margin-block: 3.75rem 4.25rem;
    }

    .kf-intro__welcome span {
        font-size: clamp(1.35rem, 6.4vw, 1.9rem);
    }

    .kf-intro__welcome strong {
        max-width: 100%;
        font-size: clamp(2.1rem, 10.2vw, 3rem);
    }

    .kf-intro__lead {
        margin-top: 2.35rem;
    }

    .kf-intro__lead p {
        font-size: 0.96rem;
        line-height: 1.72;
    }

    .kf-intro__visual {
        width: 100%;
        justify-self: stretch;
    }

    .kf-intro__visual-shadow {
        top: 84%;
        width: 117%;
    }

    .kf-intro__signal {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2.5rem;
        padding-block: 1rem;
    }

    .kf-intro__signal::before {
        top: 2.3rem;
        bottom: 2.3rem;
        left: 1.62rem;
        width: 0.0625rem;
        height: auto;
    }

    .kf-intro__signal li {
        padding: 1.3rem 1rem 1.3rem 3.6rem;
        text-align: left;
    }

    .kf-intro__signal li::before {
        top: 50%;
        left: 1.62rem;
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-intro__copy,
    .kf-intro__visual,
    .kf-intro__journey {
        opacity: 1;
        transition: none;
        transform: none;
    }
}

/* KlangFormer sound colors -------------------------------------------- */

.kf-section-anchor {
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
}

.kf-colors {
    position: relative;
    overflow: hidden;
    border-top: 0.0625rem solid rgba(126, 198, 219, 0.24);
    background:
        radial-gradient(circle at 12% 8%, rgba(62, 127, 157, 0.2), transparent 32rem),
        radial-gradient(circle at 91% 45%, rgba(90, 79, 137, 0.17), transparent 38rem),
        linear-gradient(145deg, #091016 0%, #101921 48%, #070b0f 100%);
    color: #ffffff;
}

.kf-colors::before {
    position: absolute;
    top: 0;
    right: 8%;
    width: min(42rem, 58vw);
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, rgba(101, 194, 219, 0.72), rgba(109, 98, 163, 0.68), transparent);
    content: "";
}

.kf-colors__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(6rem, 10vw, 11rem) clamp(6rem, 11vw, 12rem);
}

.kf-colors__heading {
    width: min(100%, 70rem);
    margin-inline: auto;
    text-align: center;
}

.kf-colors__heading h2 {
    margin: 0;
    color: #eef5f7;
    font-size: clamp(2.8rem, 5.1vw, 5.8rem);
    font-weight: 250;
    letter-spacing: 0.045em;
    line-height: 0.95;
}

.kf-colors__heading h2 span {
    background: linear-gradient(98deg, #6ec1e4 0%, #9cd6e3 42%, #7b719f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 650;
}

.kf-colors__claim {
    display: block;
    margin-top: clamp(2rem, 3.5vw, 3.5rem);
    color: rgba(226, 235, 238, 0.72);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 300;
    letter-spacing: 0.035em;
    line-height: 1.6;
}

.kf-colors__claim strong {
    color: #eef5f7;
    font-weight: 650;
}

.kf-colors__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.75rem);
    margin-top: clamp(5rem, 8vw, 8.5rem);
}

.kf-tone-card {
    --tone-rgb: 110, 193, 228;
    --tone-secondary-rgb: 77, 102, 138;
    position: relative;
    display: flex;
    min-height: clamp(20rem, 27vw, 25rem);
    overflow: hidden;
    flex-direction: column;
    padding: clamp(2rem, 3.5vw, 3.5rem);
    border: 0.0625rem solid rgba(var(--tone-rgb), 0.22);
    background:
        radial-gradient(circle at 87% 12%, rgba(var(--tone-rgb), 0.2), transparent 13rem),
        radial-gradient(circle at 18% 100%, rgba(var(--tone-secondary-rgb), 0.13), transparent 18rem),
        linear-gradient(145deg, rgba(22, 31, 39, 0.98), rgba(7, 12, 17, 0.99));
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.035);
    isolation: isolate;
    opacity: 0;
    transform: translateY(1.8rem);
    transition:
        opacity 720ms ease,
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 320ms ease,
        box-shadow 320ms ease;
}

.kf-tone-card.is-visible {
    opacity: 1;
    transform: none;
}

.kf-tone-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(115deg, rgba(var(--tone-rgb), 0.08), transparent 44%);
    content: "";
    opacity: 0;
    transition: opacity 320ms ease;
}

.kf-tone-card::after {
    position: absolute;
    z-index: -1;
    right: -0.04em;
    bottom: -0.17em;
    color: rgba(var(--tone-rgb), 0.022);
    content: attr(data-tone);
    font-size: clamp(5.5rem, 9vw, 10rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.kf-tone-card:hover,
.kf-tone-card:focus-within {
    border-color: rgba(var(--tone-rgb), 0.52);
    box-shadow:
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.055),
        0 1.5rem 4rem rgba(0, 0, 0, 0.18);
}

.kf-tone-card:hover::before,
.kf-tone-card:focus-within::before {
    opacity: 1;
}

.kf-tone-card header {
    position: relative;
    z-index: 2;
    max-width: calc(100% - 6.5rem);
}

.kf-tone-card header p,
.kf-tone-card h3,
.kf-tone-card__copy {
    margin: 0;
}

.kf-tone-card header p {
    color: rgba(var(--tone-rgb), 0.92);
    font-size: clamp(0.68rem, 0.88vw, 0.8rem);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kf-tone-card h3 {
    margin-top: 0.45rem;
    color: #f4f7f8;
    font-size: clamp(2.4rem, 4vw, 4.6rem);
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1;
}

.kf-tone-card__dial {
    position: absolute;
    z-index: 2;
    top: calc(clamp(3rem, 4.15vw, 4.35rem) + 3px);
    right: clamp(1.8rem, 3vw, 3rem);
    width: clamp(4rem, 5.7vw, 5.7rem);
    aspect-ratio: 1;
    background: url("../images/presetmouseoff.png") center / contain no-repeat;
}

.kf-tone-card__dial::before {
    position: absolute;
    inset: 0;
    background: url("../images/presetmouseon.png") center / contain no-repeat;
    content: "";
    opacity: 0;
    transition: opacity 260ms ease;
}

.kf-tone-card:hover .kf-tone-card__dial::before,
.kf-tone-card:focus-within .kf-tone-card__dial::before {
    opacity: 1;
}

.kf-tone-card__copy {
    position: relative;
    z-index: 2;
    width: min(100%, 38rem);
    margin-top: clamp(3.25rem, 5.5vw, 5.5rem);
    color: rgba(224, 232, 235, 0.76);
    font-size: clamp(0.93rem, 1.15vw, 1.08rem);
    font-weight: 300;
    letter-spacing: 0.008em;
    line-height: 1.72;
}

.kf-tone-card__players {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(100%, 38rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(5.5rem, 0.75fr);
    gap: clamp(0.55rem, 1vw, 0.85rem);
    margin-top: auto;
    padding-top: clamp(2rem, 3.5vw, 3rem);
}

.kf-tone-player {
    appearance: none;
    display: inline-flex;
    min-width: 0;
    min-height: clamp(3rem, 4.2vw, 3.6rem);
    align-items: center;
    justify-content: flex-start;
    gap: clamp(0.65rem, 1.1vw, 0.95rem);
    padding: 0.65rem clamp(0.9rem, 1.45vw, 1.3rem);
    border: 0.0625rem solid rgba(181, 198, 205, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(226, 234, 237, 0.64);
    cursor: pointer;
    font: inherit;
    font-size: clamp(0.68rem, 0.86vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.115em;
    line-height: 1;
    text-align: left;
    transition:
        border-color 260ms ease,
        background-color 260ms ease,
        color 260ms ease;
}

.kf-tone-player--preset {
    border-color: rgba(var(--tone-rgb), 0.46);
    background:
        linear-gradient(112deg, rgba(var(--tone-rgb), 0.2), rgba(var(--tone-secondary-rgb), 0.12)),
        rgba(5, 10, 14, 0.72);
    color: rgba(var(--tone-rgb), 0.98);
    font-weight: 600;
}

.kf-tone-player__icon {
    position: relative;
    display: grid;
    width: 1.6rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    place-items: center;
    border: 0.0625rem solid currentColor;
    border-radius: 50%;
    opacity: 0.88;
}

.kf-tone-player__icon::before {
    width: 0;
    height: 0;
    margin-left: 0.12rem;
    border-top: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    border-left: 0.38rem solid currentColor;
    content: "";
}

.kf-tone-player--off {
    border-color: rgba(195, 208, 214, 0.32);
    background: rgba(255, 255, 255, 0.052);
    color: rgba(220, 229, 232, 0.74);
    font-weight: 400;
}

.kf-tone-player:hover,
.kf-tone-player:focus-visible {
    border-color: rgba(220, 232, 236, 0.48);
    background-color: rgba(255, 255, 255, 0.075);
    color: #f3f7f8;
}

.kf-tone-player--preset:hover,
.kf-tone-player--preset:focus-visible {
    border-color: rgba(var(--tone-rgb), 0.82);
    background:
        linear-gradient(112deg, rgba(var(--tone-rgb), 0.31), rgba(var(--tone-secondary-rgb), 0.17)),
        rgba(5, 10, 14, 0.82);
    color: #ffffff;
}

.kf-tone-player:focus-visible {
    outline: 0.125rem solid rgba(var(--tone-rgb), 0.72);
    outline-offset: 0.18rem;
}

.kf-tone-player.is-playing {
    border-color: rgba(var(--tone-rgb), 0.92);
    background-color: rgba(var(--tone-rgb), 0.16);
    color: #ffffff;
}

.kf-tone-player--preset.is-playing {
    background:
        linear-gradient(112deg, rgba(var(--tone-rgb), 0.36), rgba(var(--tone-secondary-rgb), 0.22)),
        rgba(5, 10, 14, 0.88);
}

.kf-tone-player.is-playing .kf-tone-player__icon {
    background: rgba(var(--tone-rgb), 0.16);
    opacity: 1;
}

.kf-tone-player.is-playing .kf-tone-player__icon::before {
    width: 0.5rem;
    height: 0.64rem;
    margin-left: 0;
    border: 0;
    background: linear-gradient(
        90deg,
        currentColor 0 31%,
        transparent 31% 69%,
        currentColor 69% 100%
    );
}

.kf-tone-player.is-loading {
    cursor: progress;
}

.kf-tone-player.is-loading .kf-tone-player__icon {
    opacity: 1;
}

.kf-tone-player.is-loading .kf-tone-player__icon::before {
    width: 0.58rem;
    height: 0.58rem;
    margin-left: 0;
    border: 0.1rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: kf-tone-player-loading 760ms linear infinite;
}

.kf-tone-player.is-paused {
    border-color: rgba(var(--tone-rgb), 0.58);
    color: rgba(239, 246, 248, 0.86);
}

.kf-tone-player.is-unavailable,
.kf-tone-player:disabled {
    opacity: 0.46;
    cursor: not-allowed;
}

.kf-tone-player.is-unavailable .kf-tone-player__icon::before {
    width: 0.65rem;
    height: 0.075rem;
    margin-left: 0;
    border: 0;
    background: currentColor;
    transform: rotate(-45deg);
}

@keyframes kf-tone-player-loading {
    to {
        transform: rotate(1turn);
    }
}

.kf-tone-card--modern {
    --tone-rgb: 102, 199, 222;
    --tone-secondary-rgb: 77, 102, 138;
}

.kf-tone-card--vintage {
    --tone-rgb: 205, 150, 92;
    --tone-secondary-rgb: 122, 75, 53;
}

.kf-tone-card--classic {
    --tone-rgb: 205, 184, 139;
    --tone-secondary-rgb: 117, 94, 69;
}

.kf-tone-card--tube {
    --tone-rgb: 208, 120, 86;
    --tone-secondary-rgb: 122, 53, 45;
}

.kf-tone-card--ribbon {
    --tone-rgb: 154, 143, 178;
    --tone-secondary-rgb: 70, 64, 91;
}

.kf-tone-card--vienna {
    --tone-rgb: 148, 180, 205;
    --tone-secondary-rgb: 92, 75, 137;
}

.kf-tone-card--velvet {
    --tone-rgb: 178, 120, 166;
    --tone-secondary-rgb: 87, 55, 104;
}

.kf-tone-card--diamond {
    --tone-rgb: 152, 218, 229;
    --tone-secondary-rgb: 61, 120, 142;
}

.kf-tone-card--aurora {
    --tone-rgb: 114, 190, 177;
    --tone-secondary-rgb: 101, 78, 143;
}

.kf-tone-card--legend {
    --tone-rgb: 111, 149, 199;
    --tone-secondary-rgb: 151, 117, 75;
}

.kf-tone-card--iron {
    --tone-rgb: 174, 111, 91;
    --tone-secondary-rgb: 71, 88, 105;
    grid-column: 1 / -1;
    min-height: clamp(18rem, 23vw, 22rem);
}

.kf-tone-card--iron .kf-tone-card__copy {
    width: min(72%, 55rem);
}

.kf-tone-card--iron .kf-tone-card__players {
    width: min(58%, 38rem);
}

@media (max-width: 63.999rem) {
    .kf-colors__grid {
        gap: 1rem;
    }

    .kf-tone-card {
        min-height: 22rem;
    }

    .kf-tone-card--iron {
        min-height: 20rem;
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem),
    (min-width: 64rem) and (max-width: 74.999rem) and (hover: none) and (pointer: coarse) {
    .klangformer-product-page .kf-colors__heading h2 {
        font-size: clamp(3.5rem, 6.4vw, 5rem);
    }

    .klangformer-product-page .kf-colors__claim {
        font-size: clamp(1.25rem, 2vw, 1.55rem);
    }

    .klangformer-product-page .kf-tone-card {
        --kf-tone-card-padding: clamp(2rem, 3.2vw, 2.75rem);
        --kf-tone-eyebrow-line: 0.95rem;
        --kf-tone-heading-gap: 0.55rem;
        --kf-tone-heading-size: clamp(2.5rem, 4.2vw, 3.35rem);
        --kf-tone-heading-half: clamp(1.25rem, 2.1vw, 1.675rem);
        --kf-tone-dial-size: clamp(4rem, 5.5vw, 4.75rem);
        --kf-tone-dial-half: clamp(2rem, 2.75vw, 2.375rem);
        padding: var(--kf-tone-card-padding);
    }

    .klangformer-product-page .kf-tone-card header {
        max-width: 100%;
    }

    .klangformer-product-page .kf-tone-card header p {
        overflow: visible;
        font-size: clamp(0.64rem, 1.05vw, 0.76rem);
        line-height: var(--kf-tone-eyebrow-line);
        white-space: nowrap;
    }

    .klangformer-product-page .kf-tone-card h3 {
        max-width: calc(100% - 4.75rem);
        margin-top: var(--kf-tone-heading-gap);
        font-size: var(--kf-tone-heading-size);
        line-height: 1;
    }

    .klangformer-product-page .kf-tone-card__dial {
        top: calc(
            var(--kf-tone-card-padding) +
            var(--kf-tone-eyebrow-line) +
            var(--kf-tone-heading-gap) +
            var(--kf-tone-heading-half) -
            var(--kf-tone-dial-half)
        );
        right: var(--kf-tone-card-padding);
        width: var(--kf-tone-dial-size);
    }
}

@media (max-width: 47.999rem) {
    .kf-colors__inner {
        padding-block: 5.25rem 5.75rem;
    }

    .kf-colors__heading h2 {
        font-size: clamp(2.45rem, 12.2vw, 3.7rem);
        letter-spacing: 0.018em;
    }

    .kf-colors__claim {
        width: min(100%, 24rem);
        margin-inline: auto;
        font-size: 0.94rem;
    }

    .kf-colors__grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 4.25rem;
    }

    .kf-tone-card,
    .kf-tone-card--iron {
        grid-column: auto;
        min-height: 22rem;
        padding: 1.7rem;
    }

    .kf-tone-card header {
        max-width: calc(100% - 5rem);
    }

    .kf-tone-card h3 {
        font-size: clamp(2.25rem, 12vw, 3.25rem);
    }

    .kf-tone-card__dial {
        top: calc(2.65rem + 3px);
        right: 1.55rem;
        width: 3.75rem;
    }

    .kf-tone-card__copy,
    .kf-tone-card--iron .kf-tone-card__copy {
        width: 100%;
        margin-top: 4rem;
        font-size: 0.93rem;
    }

    .kf-tone-card__players,
    .kf-tone-card--iron .kf-tone-card__players {
        width: 100%;
        grid-template-columns: minmax(0, 1.3fr) minmax(4.9rem, 0.7fr);
        gap: 0.55rem;
        padding-top: 2rem;
    }

    .kf-tone-player {
        min-height: 3.1rem;
        gap: 0.55rem;
        padding-inline: 0.75rem;
        font-size: 0.66rem;
    }

    .kf-tone-player__icon {
        width: 1.45rem;
    }

    .kf-tone-card::after {
        font-size: clamp(4.2rem, 22vw, 6.2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-tone-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .kf-tone-card__dial::before {
        transition: none;
    }

    .kf-tone-player {
        transition: none;
    }

    .kf-tone-player.is-loading .kf-tone-player__icon::before {
        border-right-color: currentColor;
        animation: none;
        opacity: 0.58;
    }
}

/* KlangFormer fine controls ------------------------------------------- */

.kf-controls {
    position: relative;
    overflow: hidden;
    border-top: 0.0625rem solid rgba(49, 73, 91, 0.14);
    background:
        radial-gradient(circle at 11% 14%, rgba(110, 193, 228, 0.15), transparent 28rem),
        radial-gradient(circle at 92% 86%, rgba(98, 88, 132, 0.12), transparent 30rem),
        linear-gradient(135deg, #eef1f2 0%, #f8f9f9 48%, #e9edef 100%);
    color: #11171c;
}

.kf-controls::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(53, 76, 92, 0.035) 0.0625rem, transparent 0.0625rem),
        linear-gradient(90deg, rgba(53, 76, 92, 0.035) 0.0625rem, transparent 0.0625rem);
    background-size: 3.5rem 3.5rem;
    content: "";
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.66), transparent 78%);
    pointer-events: none;
}

.kf-controls__inner {
    position: relative;
    z-index: 1;
    padding-block: clamp(5.5rem, 8vw, 8.5rem) clamp(6rem, 9vw, 9.5rem);
}

.kf-controls__heading {
    width: min(100%, 64rem);
    margin-inline: auto;
    text-align: center;
}

.kf-controls__heading h2 {
    margin: 0;
}

.kf-controls__heading h2 {
    color: #252c31;
    font-size: clamp(2.15rem, 4.25vw, 4.8rem);
    font-weight: 260;
    letter-spacing: 0.025em;
    line-height: 1.18;
    padding-bottom: 0.12em;
}

.kf-controls__heading-line {
    display: block;
    white-space: nowrap;
}

.kf-controls__heading h2 strong {
    color: #252c31;
    font-weight: 570;
}

.kf-controls__heading p {
    margin: clamp(1rem, 1.5vw, 1.4rem) 0 0;
    color: rgba(37, 44, 49, 0.62);
    font-size: clamp(0.82rem, 1.05vw, 0.98rem);
    font-weight: 300;
    letter-spacing: 0.025em;
    line-height: 1.5;
}

.kf-controls__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.85rem, 1.5vw, 1.35rem);
    margin-top: clamp(4rem, 6vw, 6.5rem);
}

.kf-control-card {
    --control-rgb: 110, 193, 228;
    --control-angle: 36deg;
    --control-spot-x: 0%;
    --control-spot-y: 34%;
    position: relative;
    display: flex;
    min-height: clamp(28rem, 35vw, 34rem);
    overflow: hidden;
    flex-direction: column;
    padding: clamp(2rem, 3.1vw, 3.1rem);
    border: 0.0625rem solid rgba(var(--control-rgb), 0.28);
    background: linear-gradient(145deg, #192128 0%, #10161b 58%, #0a0f13 100%);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.045);
    color: #ffffff;
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
        opacity 720ms ease,
        transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 280ms ease;
}

.kf-control-card:nth-child(2) {
    transition-delay: 90ms;
}

.kf-control-card:nth-child(3) {
    transition-delay: 180ms;
}

.kf-control-card.is-visible {
    opacity: 1;
    transform: none;
}

.kf-control-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, rgba(var(--control-rgb), 0.94), transparent);
    content: "";
}

.kf-control-card::after {
    position: absolute;
    z-index: 0;
    inset: -22%;
    background: radial-gradient(
        circle,
        rgba(var(--control-rgb), 0.24) 0%,
        rgba(var(--control-rgb), 0.13) 24%,
        rgba(var(--control-rgb), 0.045) 48%,
        transparent 70%
    );
    content: "";
    pointer-events: none;
    transform: translate3d(var(--control-spot-x), var(--control-spot-y), 0);
}

.kf-control-card.is-scroll-spot-active::after {
    will-change: transform;
}

.kf-control-card > * {
    position: relative;
    z-index: 1;
}

.kf-control-card:hover,
.kf-control-card:focus-within {
    border-color: rgba(var(--control-rgb), 0.52);
}

.kf-control-card--intensity {
    --control-rgb: 110, 193, 228;
    --control-angle: 38deg;
}

.kf-control-card--air {
    --control-rgb: 152, 193, 223;
    --control-angle: 21deg;
    background: linear-gradient(145deg, #1c252c 0%, #111a20 58%, #0b1116 100%);
}

.kf-control-card--proximity {
    --control-rgb: 157, 130, 166;
    --control-angle: -24deg;
    background: linear-gradient(145deg, #211d26 0%, #17141c 58%, #0d0c11 100%);
}

.kf-control-card__head h3,
.kf-control-card > p {
    margin: 0;
}

.kf-control-card__head h3 {
    color: #f1f5f6;
    font-size: clamp(1.85rem, 3vw, 3.35rem);
    font-weight: 560;
    letter-spacing: 0.075em;
    line-height: 1;
}

.kf-control-card > p {
    margin-top: clamp(1.5rem, 2.5vw, 2.2rem);
    color: rgba(226, 234, 237, 0.74);
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 300;
    line-height: 1.72;
}

.kf-control-card__visual {
    width: min(100%, 15rem);
    margin-top: auto;
    margin-inline: auto;
    padding-top: clamp(2.5rem, 4vw, 4rem);
}

.kf-control-card__dial {
    position: relative;
    width: clamp(7.5rem, 10.5vw, 10rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    filter: drop-shadow(0 1.15rem 1.6rem rgba(0, 0, 0, 0.36));
}

.kf-control-card__dial::before {
    position: absolute;
    inset: -0.7rem;
    border-radius: 50%;
    background: repeating-conic-gradient(from 220deg, rgba(var(--control-rgb), 0.48) 0 0.7deg, transparent 0.7deg 10deg);
    content: "";
    mask: radial-gradient(circle, transparent 0 66%, #000 67% 70%, transparent 71%);
    opacity: 0.72;
    z-index: 0;
}

.kf-control-card__dial img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: block;
    width: 78%;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
}

.kf-control-card__scale {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    margin-top: 1.4rem;
    color: rgba(208, 218, 223, 0.5);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

.kf-control-card__scale span:last-child {
    text-align: right;
}

.kf-control-card__scale strong {
    color: rgba(var(--control-rgb), 0.92);
    font-weight: 550;
}

@media (max-width: 63.999rem) {
    .kf-controls__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .kf-control-card {
        min-height: 19rem;
        padding-right: clamp(14rem, 34vw, 19rem);
    }

    .kf-control-card__visual {
        position: absolute;
        right: clamp(2rem, 6vw, 4.5rem);
        bottom: 50%;
        width: clamp(10rem, 24vw, 14rem);
        margin: 0;
        padding: 0;
        transform: translateY(50%);
    }
}

@media (min-width: 48rem) and (max-width: 63.999rem),
    (min-width: 64rem) and (max-width: 74.999rem) and (hover: none) and (pointer: coarse) {
    .klangformer-product-page .kf-controls__heading h2 {
        font-size: clamp(2.8rem, 4.5vw, 3.6rem);
        line-height: 1.12;
    }

    .klangformer-product-page .kf-controls__heading-line:first-child {
        font-size: clamp(3.5rem, 6vw, 4.75rem);
        line-height: 1.02;
    }

    .klangformer-product-page .kf-controls__heading h2 strong {
        font-size: clamp(2.8rem, 4.5vw, 3.6rem);
    }

    .klangformer-product-page .kf-controls__heading p {
        margin-top: clamp(1.35rem, 2.2vw, 1.8rem);
        font-size: clamp(1.05rem, 1.65vw, 1.3rem);
    }
}

@media (max-width: 47.999rem) {
    .kf-controls__inner {
        padding-block: 5.25rem 5.75rem;
    }

    .kf-controls__heading h2 {
        font-size: clamp(1.45rem, 6.9vw, 2.35rem);
    }

    .kf-controls__heading p {
        margin-top: 0.9rem;
        font-size: 0.78rem;
    }

    .kf-controls__grid {
        margin-top: 3.75rem;
    }

    .kf-control-card {
        min-height: 26rem;
        padding: 1.75rem;
    }

    .kf-control-card:nth-child(n) {
        transition-delay: 0ms;
    }

    .kf-control-card__head h3 {
        font-size: clamp(1.75rem, 8.5vw, 2.6rem);
    }

    .kf-control-card__visual {
        position: static;
        width: min(100%, 13rem);
        margin-top: auto;
        margin-inline: auto;
        padding-top: 2.5rem;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-control-card {
        --control-spot-x: 0%;
        --control-spot-y: 0%;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .kf-control-card::after {
        will-change: auto;
    }
}

/* KlangFormer linear preamp banner ------------------------------------ */

.kf-preamp {
    position: relative;
    display: grid;
    min-height: clamp(16rem, 19vw, 19rem);
    overflow: hidden;
    border-top: 0.0625rem solid rgba(128, 157, 178, 0.2);
    background: #10090e url("../images/kffallback.jpg") center / cover no-repeat;
    color: #ffffff;
    isolation: isolate;
}

.kf-preamp__media,
.kf-preamp__shade {
    position: absolute;
    inset: 0;
}

.kf-preamp__media {
    z-index: -3;
    background: #10090e url("../images/kffallback.jpg") center / cover no-repeat;
}

.kf-preamp__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 700ms ease;
}

.kf-preamp__media.is-video-ready .kf-preamp__video {
    opacity: 1;
}

.kf-preamp__shade {
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(8, 7, 10, 0.91) 0%, rgba(8, 7, 10, 0.78) 44%, rgba(8, 7, 10, 0.26) 74%, rgba(8, 7, 10, 0.08) 100%),
        linear-gradient(180deg, rgba(4, 5, 8, 0.16), rgba(4, 5, 8, 0.5));
}

.kf-preamp__inner {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-height: inherit;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
    gap: clamp(2rem, 5vw, 6rem);
    padding-block: clamp(2.35rem, 3.5vw, 3.75rem);
}

.kf-preamp__copy {
    width: min(100%, 50rem);
}

.kf-preamp__copy h2,
.kf-preamp__copy p {
    margin: 0;
}

.kf-preamp__copy h2 {
    color: rgba(245, 247, 249, 0.96);
    font-size: clamp(1.65rem, 2.7vw, 2.75rem);
    font-weight: 300;
    letter-spacing: 0.035em;
    line-height: 1.08;
}

.kf-preamp__copy p {
    width: min(100%, 47rem);
    margin-top: clamp(1rem, 1.7vw, 1.5rem);
    color: rgba(228, 234, 238, 0.78);
    font-size: clamp(0.9rem, 1.08vw, 1.02rem);
    font-weight: 300;
    letter-spacing: 0.008em;
    line-height: 1.68;
}

.kf-preamp__interface {
    display: block;
    width: min(100%, 20rem);
    height: auto;
    justify-self: end;
    filter: drop-shadow(0 1.5rem 2.2rem rgba(0, 0, 0, 0.42));
}

@media (max-width: 63.999rem) {
    .kf-preamp {
        min-height: 18rem;
    }

    .kf-preamp__inner {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem);
        gap: 2rem;
    }
}

@media (max-width: 47.999rem) {
    .kf-preamp {
        min-height: 20rem;
        background-position: 58% center;
    }

    .kf-preamp__media {
        background-position: 58% center;
    }

    .kf-preamp__video {
        object-position: 58% center;
    }

    .kf-preamp__shade {
        background:
            linear-gradient(90deg, rgba(8, 7, 10, 0.92) 0%, rgba(8, 7, 10, 0.72) 68%, rgba(8, 7, 10, 0.36) 100%),
            linear-gradient(180deg, rgba(4, 5, 8, 0.14), rgba(4, 5, 8, 0.62));
    }

    .kf-preamp__inner {
        grid-template-columns: minmax(0, 1fr) minmax(4.75rem, 6.25rem);
        gap: 0.5rem;
        padding-block: 2.4rem;
    }

    .kf-preamp__copy h2 {
        font-size: clamp(1.35rem, 6vw, 1.75rem);
        line-height: 1.12;
    }

    .kf-preamp__copy p {
        margin-top: 0.9rem;
        font-size: clamp(0.77rem, 3.15vw, 0.88rem);
        line-height: 1.58;
    }

    .kf-preamp__interface {
        width: min(100%, 6.25rem);
        align-self: end;
        margin-bottom: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-preamp__video {
        display: none;
        transition: none;
    }
}

/* KlangFormer specifications ----------------------------------------- */

.kf-specs {
    position: relative;
    overflow: hidden;
    border-top: 0.0625rem solid rgba(50, 65, 75, 0.12);
    background:
        radial-gradient(circle at 92% 10%, rgba(77, 102, 138, 0.13), transparent 34rem),
        radial-gradient(circle at 6% 82%, rgba(110, 193, 228, 0.11), transparent 30rem),
        #f2f0ed;
    color: #182026;
}

.kf-specs__inner {
    position: relative;
    padding-block: clamp(6rem, 9vw, 10rem) clamp(4.5rem, 7vw, 7rem);
}

.kf-specs__heading h2,
.kf-specs__heading > span,
.kf-specs__features h3,
.kf-specs__panel h3,
.kf-specs__host p,
.kf-specs__footer p {
    margin: 0;
}

.kf-specs__heading {
    width: min(100%, 65rem);
}

.kf-specs__heading h2 {
    background: linear-gradient(98deg, #1c252b 0%, #4d668a 54%, #6eacc5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(2.25rem, 4.25vw, 4.75rem);
    font-weight: 560;
    letter-spacing: 0.055em;
    line-height: 0.95;
}

.kf-specs__heading > span {
    display: block;
    margin-top: clamp(1.6rem, 2.6vw, 2.4rem);
    color: rgba(38, 48, 55, 0.68);
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.015em;
}

@media (min-width: 64rem) {
    .klangformer-product-page .kf-specs__mobile-visual {
        position: relative;
        display: block;
        width: min(50%, 34rem);
        margin: clamp(9rem, 12vw, 12rem) auto 0;
        isolation: isolate;
    }

    .klangformer-product-page .kf-specs__mobile-screen {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 1.15rem 2.6rem rgba(33, 41, 48, 0.18);
    }

    .klangformer-product-page .kf-specs__mobile-shadow {
        position: absolute;
        z-index: 1;
        top: 84%;
        left: 50%;
        display: block;
        width: 118%;
        max-width: none;
        height: auto;
        opacity: 0.68;
        transform: translateX(-50%);
    }

    .klangformer-product-page .kf-specs__layout {
        margin-top: clamp(6rem, 8vw, 8rem);
    }

    .klangformer-product-page .kf-reviews .v13-reviews__heading h2 {
        font-size: clamp(1.8rem, 3.35vw, 3.65rem);
    }
}

.kf-specs__layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(4.75rem, 7vw, 7.5rem);
}

.kf-specs__content {
    display: grid;
    gap: clamp(1rem, 1.5vw, 1.35rem);
}

.kf-specs__features,
.kf-specs__panel,
.kf-specs__host {
    border: 0.0625rem solid rgba(51, 68, 79, 0.15);
}

.kf-specs__features {
    padding: clamp(2.25rem, 3.5vw, 3.5rem);
    background:
        radial-gradient(circle at 90% 10%, rgba(110, 193, 228, 0.18), transparent 18rem),
        linear-gradient(145deg, #182128 0%, #0d1318 100%);
    color: #ffffff;
}

.kf-specs__features header,
.kf-specs__panel header {
    display: flex;
    align-items: baseline;
}

.kf-specs__features h3,
.kf-specs__panel h3 {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 540;
    letter-spacing: 0.035em;
}

.kf-specs__features ul {
    display: grid;
    margin: clamp(2.2rem, 3.5vw, 3.2rem) 0 0;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    list-style: none;
}

.kf-specs__features li {
    position: relative;
    padding: 1rem 0 1rem 1.45rem;
    border-top: 0.0625rem solid rgba(191, 211, 219, 0.16);
    color: rgba(228, 235, 238, 0.78);
    font-size: clamp(0.86rem, 1.02vw, 0.98rem);
    font-weight: 300;
    line-height: 1.55;
}

.kf-specs__features li::before {
    position: absolute;
    top: calc(1rem + 0.775em);
    left: 0;
    width: 0.34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #6ec1e4;
    content: "";
    transform: translateY(-50%);
}

.kf-specs__data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.5vw, 1.35rem);
}

.kf-specs__panel {
    min-height: 26rem;
    padding: clamp(1.8rem, 2.8vw, 2.7rem);
    background: rgba(255, 255, 255, 0.62);
}

.kf-specs__panel--technical {
    background:
        linear-gradient(135deg, rgba(77, 102, 138, 0.08), transparent 55%),
        rgba(255, 255, 255, 0.7);
}

.kf-specs__panel dl {
    margin: clamp(2rem, 3.2vw, 3rem) 0 0;
}

.kf-specs__panel dl > div {
    padding-block: 1.15rem;
    border-top: 0.0625rem solid rgba(45, 62, 73, 0.15);
}

.kf-specs__panel dt,
.kf-specs__panel dd {
    margin: 0;
}

.kf-specs__panel dt {
    color: rgba(54, 66, 74, 0.58);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kf-specs__panel dd {
    margin-top: 0.42rem;
    color: #20292f;
    font-size: clamp(0.92rem, 1.12vw, 1.04rem);
    font-weight: 520;
    line-height: 1.4;
}

.kf-specs__host {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.4vw, 2.4rem);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    border-color: rgba(91, 145, 171, 0.25);
    background: rgba(110, 193, 228, 0.1);
}

.kf-specs__host strong {
    align-self: center;
    color: #4e829d;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kf-specs__host p {
    color: rgba(35, 47, 54, 0.72);
    font-size: clamp(0.84rem, 1vw, 0.94rem);
    font-weight: 300;
    line-height: 1.65;
}

@media (min-width: 64rem) {
    .kf-specs__host-second {
        display: block;
    }
}

.kf-specs__footer {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(6rem, 9rem);
    gap: clamp(2rem, 5vw, 6rem);
    margin-top: clamp(4.5rem, 7vw, 7.5rem);
    padding-top: clamp(2.5rem, 4vw, 4rem);
    border-top: 0.0625rem solid rgba(48, 63, 72, 0.15);
}

.kf-specs__footer p {
    color: rgba(44, 55, 62, 0.54);
    font-size: clamp(0.7rem, 0.82vw, 0.78rem);
    font-weight: 300;
    line-height: 1.65;
}

.kf-specs__footer img {
    display: block;
    width: min(100%, 8rem);
    height: auto;
    justify-self: end;
}

@media (max-width: 63.999rem) {
    .kf-specs__layout {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (min-width: 48rem) and (max-width: 63.999rem),
    (min-width: 64rem) and (max-width: 74.999rem) and (hover: none) and (pointer: coarse) {
    .klangformer-product-page .kf-specs__mobile-visual {
        position: relative;
        display: block;
        width: min(48%, 26rem);
        margin: clamp(4.75rem, 7vw, 6rem) auto 0;
        isolation: isolate;
    }

    .klangformer-product-page .kf-specs__mobile-screen {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1085 / 676;
        object-fit: contain;
        box-shadow: 0 1.15rem 2.6rem rgba(33, 41, 48, 0.18);
    }

    .klangformer-product-page .kf-specs__mobile-shadow {
        position: absolute;
        z-index: 1;
        top: 84%;
        left: 50%;
        display: block;
        width: 118%;
        max-width: none;
        height: auto;
        opacity: 0.68;
        transform: translateX(-50%);
    }

    .klangformer-product-page .kf-specs__layout {
        margin-top: clamp(5rem, 7.5vw, 6.5rem);
    }

    .klangformer-product-page .kf-specs__panel--system dl > div:first-child,
    .klangformer-product-page .kf-specs__panel--technical dl > div:first-child {
        border-top: 0;
    }
}

@media (max-width: 47.999rem) {
    .kf-specs__inner {
        padding-block: 5.5rem 4.5rem;
    }

    .kf-specs__heading h2 {
        font-size: clamp(1.85rem, 8.4vw, 2.55rem);
        letter-spacing: 0.035em;
    }

    .kf-specs__layout {
        margin-top: 4rem;
    }

    .kf-specs__features ul,
    .kf-specs__data-grid,
    .kf-specs__host,
    .kf-specs__footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .kf-specs__features {
        padding: 1.75rem;
    }

    .kf-specs__panel {
        min-height: 0;
        padding: 1.75rem;
    }

    .kf-specs__host {
        gap: 0.85rem;
        padding: 1.5rem;
    }

    .kf-specs__footer {
        justify-items: start;
        gap: 2rem;
        margin-top: 4.25rem;
    }

    .kf-specs__footer img {
        width: min(100%, 7.5rem);
        justify-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-specs [data-l1p-reveal-stage] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* KlangFormer reviews and download ----------------------------------- */

.klangformer-product-page .kf-reviews .v13-reviews__positions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.klangformer-product-page .kf-reviews {
    background:
        radial-gradient(circle at 88% 12%, rgba(77, 102, 138, 0.3), transparent 30rem),
        radial-gradient(circle at 10% 90%, rgba(139, 113, 128, 0.22), transparent 32rem),
        linear-gradient(118deg, #20252a 0%, #292c30 52%, #1c2228 100%);
}

.kf-download {
    position: relative;
    overflow: hidden;
    border-top: 0.0625rem solid rgba(130, 154, 184, 0.22);
    background: #11121a url("../images/kfdownload.jpg") center / cover no-repeat;
    color: #ffffff;
    isolation: isolate;
}

.kf-download::before,
.kf-download::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
}

.kf-download::before {
    background:
        linear-gradient(90deg, rgba(9, 10, 18, 0.3), rgba(9, 10, 18, 0.1) 50%, rgba(9, 10, 18, 0.24)),
        rgba(8, 9, 16, 0.12);
}

.kf-download::after {
    background:
        radial-gradient(circle at 14% 40%, rgba(76, 101, 137, 0.22), transparent 29rem),
        radial-gradient(circle at 87% 68%, rgba(93, 96, 95, 0.19), transparent 28rem);
}

.kf-download__inner {
    padding-block: clamp(6rem, 10vw, 10rem) clamp(7rem, 11vw, 11rem);
}

.kf-download__intro,
.kf-download-card {
    opacity: 0;
    transform: translateY(1.6rem);
    transition: opacity 720ms ease, transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}

.kf-download__intro {
    transition-delay: 80ms;
}

.kf-download-card:nth-child(1) {
    transition-delay: 100ms;
}

.kf-download-card:nth-child(2) {
    transition-delay: 180ms;
}

.kf-download__intro.is-visible,
.kf-download-card.is-visible {
    opacity: 1;
    transform: none;
}

.kf-download__product {
    position: relative;
    width: min(72%, 39rem);
    margin: 0 auto clamp(2.4rem, 4vw, 3.8rem);
    transform: translateY(clamp(2rem, 2.8vw, 2.75rem));
}

.kf-download__screen-wrap {
    position: relative;
    z-index: 1;
}

.kf-download__screen {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);
}

.kf-download__badge {
    position: absolute;
    top: clamp(-4rem, -4.5vw, -2.25rem);
    right: clamp(-3.25rem, -3.5vw, -1.5rem);
    z-index: 2;
    display: block;
    width: clamp(4.6rem, 7vw, 6.8rem);
    height: auto;
    filter: drop-shadow(0 1rem 1.7rem rgba(8, 10, 18, 0.26));
}

.kf-download__shadow {
    display: block;
    width: 112%;
    max-width: none;
    height: auto;
    margin: clamp(-0.65rem, -0.7vw, -0.25rem) 0 0 50%;
    opacity: 0.74;
    transform: translateX(-50%);
}

.kf-download__intro {
    position: relative;
    width: min(100%, 76rem);
    margin: 0 auto;
    padding: clamp(2.3rem, 4.5vw, 4.5rem);
    border: 0.0625rem solid rgba(181, 197, 214, 0.2);
    background:
        radial-gradient(circle at 92% 7%, rgba(77, 102, 138, 0.3), transparent 30rem) padding-box,
        radial-gradient(circle at 7% 94%, rgba(105, 80, 115, 0.24), transparent 28rem) padding-box,
        linear-gradient(138deg, rgba(23, 28, 38, 0.94), rgba(12, 16, 24, 0.91) 56%, rgba(19, 17, 27, 0.93)) padding-box;
    box-shadow:
        0 2rem 5rem rgba(0, 0, 0, 0.3),
        0 0 1.15rem rgba(99, 153, 190, 0.16),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
    color: #f3f6f8;
    text-align: center;
    backdrop-filter: blur(1.1rem) saturate(116%);
}

.kf-download__logo {
    display: block;
    width: min(66%, 22rem);
    height: auto;
    margin-inline: auto;
}

.kf-download__intro h2 {
    margin: clamp(2.2rem, 4vw, 3.6rem) 0 0;
    color: #f4f7f9;
    font-size: clamp(1.7rem, 3.2vw, 3.4rem);
    font-weight: 520;
    letter-spacing: 0.025em;
    line-height: 1.08;
}

.kf-download__intro > p {
    width: min(100%, 49rem);
    margin: clamp(1.4rem, 2.4vw, 2.1rem) auto 0;
    color: rgba(221, 230, 235, 0.72);
    font-size: clamp(0.92rem, 1.15vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
}

.kf-download__credentials {
    display: grid;
    width: min(100%, 46rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: clamp(2.5rem, 4.5vw, 4rem) auto 0;
    border-block: 0.0625rem solid rgba(151, 179, 199, 0.2);
}

.kf-download__credentials > div {
    padding: clamp(1.35rem, 2.4vw, 2rem);
}

.kf-download__credentials > div + div {
    border-left: 0.0625rem solid rgba(151, 179, 199, 0.2);
}

.kf-download__credentials dt,
.kf-download__credentials dd {
    margin: 0;
}

.kf-download__credentials dt {
    color: rgba(174, 199, 216, 0.58);
    font-size: 0.68rem;
    font-weight: 520;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.kf-download__credentials dd {
    margin-top: 0.5rem;
    color: #f0f4f6;
    font-size: clamp(0.9rem, 1.15vw, 1.02rem);
    font-weight: 570;
}

.kf-download__forgot {
    position: relative;
    margin-top: clamp(1.7rem, 3vw, 2.5rem);
    padding: 0.25rem 0 0.45rem;
    border: 0;
    background: transparent;
    color: #8abbd5;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 380;
    letter-spacing: 0.02em;
}

.kf-download__forgot::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.0625rem;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 280ms ease;
}

.kf-download__forgot:hover::after,
.kf-download__forgot:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.kf-download__platforms {
    display: grid;
    width: min(100%, 76rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin: clamp(4rem, 7vw, 7rem) auto 0;
}

.kf-download-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: clamp(2.5rem, 4vw, 4rem);
    border: 0.0625rem solid rgba(181, 197, 214, 0.2);
    background:
        radial-gradient(circle at 88% 8%, rgba(102, 126, 157, 0.16), transparent 18rem),
        rgba(16, 20, 29, 0.78);
    box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.04);
    text-align: center;
    backdrop-filter: blur(0.85rem);
}

.kf-download-card--mac {
    background:
        radial-gradient(circle at 88% 8%, rgba(118, 105, 139, 0.16), transparent 18rem),
        rgba(16, 20, 29, 0.78);
}

.kf-download-card > img {
    display: block;
    width: clamp(3.5rem, 5.8vw, 5rem);
    height: clamp(3.5rem, 5.8vw, 5rem);
    object-fit: contain;
}

.kf-download-card h3,
.kf-download-card > p {
    margin: 0;
}

.kf-download-card h3 {
    margin-top: clamp(1.4rem, 2.5vw, 2rem);
    color: #f5f7f9;
    font-size: clamp(1.75rem, 3vw, 2.8rem);
    font-weight: 580;
    letter-spacing: 0.035em;
    line-height: 1;
}

.kf-download-card > p {
    margin-top: 0.8rem;
    color: rgba(218, 227, 233, 0.6);
    font-size: clamp(0.78rem, 0.92vw, 0.86rem);
    font-weight: 300;
}

.kf-download-card__button {
    position: relative;
    display: inline-flex;
    width: min(100%, 21rem);
    min-height: 3.65rem;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: clamp(2.4rem, 4vw, 3.5rem);
    padding-inline: 2rem;
    border: 0.0625rem solid rgba(157, 189, 217, 0.32);
    background: linear-gradient(100deg, #435d80 0%, #667e9d 50%, #4c6589 100%);
    box-shadow: 0 0.8rem 2.5rem rgba(37, 55, 79, 0.28);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: border-color 280ms ease, box-shadow 280ms ease, filter 280ms ease;
}

.kf-download-card__button:hover,
.kf-download-card__button:focus-visible {
    border-color: rgba(176, 209, 235, 0.62);
    box-shadow: 0 1rem 3rem rgba(42, 66, 99, 0.4);
    filter: brightness(1.08);
}

.kf-download-card__button-icon {
    position: relative;
    width: 0.78rem;
    height: 0.9rem;
    border-bottom: 0.1rem solid currentColor;
}

.kf-download-card__button-icon::before,
.kf-download-card__button-icon::after {
    position: absolute;
    content: "";
}

.kf-download-card__button-icon::before {
    top: 0;
    left: 50%;
    width: 0.1rem;
    height: 0.62rem;
    background: currentColor;
    transform: translateX(-50%);
}

.kf-download-card__button-icon::after {
    top: 0.3rem;
    left: 50%;
    width: 0.38rem;
    height: 0.38rem;
    border-right: 0.1rem solid currentColor;
    border-bottom: 0.1rem solid currentColor;
    transform: translateX(-50%) rotate(45deg);
}

.kf-download-card__links {
    display: grid;
    width: min(100%, 17rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.35rem;
}

.kf-download-card__links a {
    padding: 0.35rem 0.85rem;
    color: rgba(208, 218, 225, 0.56);
    font-size: 0.68rem;
    font-weight: 300;
    text-decoration: none;
    transition: color 240ms ease;
}

.kf-download-card__links a:first-child {
    text-align: right;
}

.kf-download-card__links a:last-child {
    text-align: left;
}

.kf-download-card__links a + a {
    border-left: 0.0625rem solid rgba(188, 204, 216, 0.17);
}

.kf-download-card__links a:hover,
.kf-download-card__links a:focus-visible {
    color: #8eb9d2;
}

.kf-access-dialog {
    width: min(calc(100% - 2rem), 38rem);
    max-width: none;
    max-height: calc(100dvh - 2rem);
    overflow: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f4f7f9;
}

.kf-access-dialog::backdrop {
    background: rgba(5, 7, 12, 0.82);
    backdrop-filter: blur(0.8rem) saturate(112%);
}

.kf-access-dialog__panel {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 5vw, 4.25rem);
    border: 0.0625rem solid rgba(181, 197, 214, 0.2);
    background:
        radial-gradient(circle at 100% 0%, rgba(77, 102, 138, 0.34), transparent 21rem) padding-box,
        radial-gradient(circle at 0% 100%, rgba(117, 86, 128, 0.22), transparent 19rem) padding-box,
        linear-gradient(145deg, rgba(24, 29, 39, 0.98), rgba(11, 15, 22, 0.98)) padding-box;
    box-shadow:
        0 2.5rem 7rem rgba(0, 0, 0, 0.5),
        0 0 1.25rem rgba(93, 164, 208, 0.17),
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.07);
}

.kf-access-dialog__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.kf-access-dialog__close::before,
.kf-access-dialog__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2rem;
    height: 0.0625rem;
    background: rgba(239, 245, 248, 0.82);
    content: "";
    transition: background 220ms ease;
}

.kf-access-dialog__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.kf-access-dialog__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.kf-access-dialog__close:hover::before,
.kf-access-dialog__close:hover::after,
.kf-access-dialog__close:focus-visible::before,
.kf-access-dialog__close:focus-visible::after {
    background: #5da4d0;
}

.kf-access-dialog h2,
.kf-access-dialog__panel > p {
    margin: 0;
}

.kf-access-dialog h2 {
    width: min(100%, 29rem);
    margin-top: 0;
    font-size: clamp(1.7rem, 4vw, 2.7rem);
    font-weight: 560;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.kf-access-dialog__panel > p {
    margin-top: 1.1rem;
    color: rgba(218, 228, 233, 0.65);
    font-size: 0.92rem;
    font-weight: 300;
}

.kf-access-dialog form {
    margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.kf-access-dialog label {
    display: block;
    color: rgba(174, 199, 216, 0.64);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.kf-access-dialog input {
    width: 100%;
    min-height: 3.5rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 0.0625rem solid rgba(151, 179, 199, 0.22);
    border-radius: 0;
    outline: 0;
    background: rgba(7, 11, 17, 0.56);
    color: #f3f7f9;
    font: inherit;
    font-size: 0.92rem;
    transition: border-color 240ms ease, box-shadow 240ms ease;
}

.kf-access-dialog input:focus {
    border-color: #79b8d8;
    box-shadow: 0 0 0 0.18rem rgba(93, 164, 208, 0.14), 0 0 1.2rem rgba(77, 102, 138, 0.18);
}

.kf-access-dialog input[aria-invalid="true"] {
    border-color: #a34f55;
}

.kf-access-dialog form > button {
    display: inline-flex;
    width: min(100%, 14rem);
    min-height: 3.5rem;
    margin-top: 1.25rem;
    padding: 0.95rem 1.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    border: 0;
    background: var(--color-primary);
    color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-align: center;
    transition: background-color var(--transition), color var(--transition);
}

.kf-access-dialog form > button:hover,
.kf-access-dialog form > button:focus-visible {
    background: var(--color-primary-hover);
}

.kf-access-dialog__submit img {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
    object-fit: contain;
    transition: transform var(--transition);
}

.kf-access-dialog__submit:hover img,
.kf-access-dialog__submit:focus-visible img {
    transform: translateX(0.15rem);
}

.kf-access-dialog__status {
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 0.0625rem solid rgba(151, 179, 199, 0.18);
    color: #79c7a0;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.55;
}

.kf-access-dialog__status.is-error {
    color: #e58b93;
}

body.kf-access-open {
    overflow: hidden;
    padding-right: var(--scrollbar-compensation, 0);
}

@media (max-width: 63.999rem) {
    .kf-download__product {
        width: min(76%, 36rem);
    }

    .kf-download__intro,
    .kf-download__platforms {
        width: min(100%, 60rem);
    }
}

@media (max-width: 47.999rem) {
    .kf-download {
        background-position: 58% center;
    }

    .kf-download__inner {
        padding-block: 5.75rem 6rem;
    }

    .kf-download__product {
        width: min(82%, 25rem);
        transform: translateY(1.35rem);
    }

    .kf-download__badge {
        top: -2.65rem;
        right: -1.15rem;
        width: 4.25rem;
    }

    .kf-download__shadow {
        width: 116%;
        margin-top: -0.2rem;
    }

    .kf-download__intro {
        margin-top: 0;
        padding: 2.25rem 1.4rem;
    }

    .kf-download__logo {
        width: min(72%, 18rem);
    }

    .kf-download__credentials,
    .kf-download__platforms {
        grid-template-columns: minmax(0, 1fr);
    }

    .kf-download__credentials > div {
        padding-block: 1.25rem;
    }

    .kf-download__credentials > div + div {
        border-top: 0.0625rem solid rgba(151, 179, 199, 0.2);
        border-left: 0;
    }

    .kf-download__platforms {
        margin-top: 3.25rem;
    }

    .kf-download-card {
        padding: 2.5rem 1.4rem;
    }

    .kf-download-card__button {
        width: 100%;
    }

    .kf-download-card__links {
        width: min(100%, 17rem);
    }

    .kf-access-dialog {
        width: calc(100% - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .kf-access-dialog__panel {
        padding: 3.5rem 1.35rem 2rem;
    }

    .kf-access-dialog__close {
        top: 0.75rem;
        right: 0.75rem;
    }

    .kf-access-dialog form > button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kf-download__intro,
    .kf-download-card {
        opacity: 1;
        transform: none;
        transition: none;
    }

}

@media (max-width: 47.999rem) {
    /* KlangFormer smartphone layout restoration. */
    .klangformer-product-page .kf-hero__awards {
        width: min(86%, 20rem);
        gap: clamp(0.45rem, 2.2vw, 0.75rem);
    }

    .klangformer-product-page .kf-hero__award--gearspace {
        height: clamp(2.12rem, 9.1vw, 2.65rem);
    }

    .klangformer-product-page .kf-hero__award--professional-audio {
        height: clamp(1.82rem, 7.9vw, 2.28rem);
    }

    .klangformer-product-page .kf-hero__award--amazona {
        height: clamp(1.59rem, 6.9vw, 1.96rem);
    }

    .klangformer-product-page .kf-hero__award--bonedo {
        height: clamp(2.02rem, 8.6vw, 2.5rem);
    }

    .klangformer-product-page .kf-intro__grid {
        gap: 0;
    }

    .klangformer-product-page .kf-intro__visual {
        grid-row: 1;
        width: min(100%, 32rem);
        margin-inline: auto;
    }

    .klangformer-product-page .kf-intro__copy {
        grid-row: 2;
        margin-top: clamp(5.25rem, 20vw, 6.75rem);
    }

    .klangformer-product-page .kf-intro__copy > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .klangformer-product-page .kf-intro__journey {
        margin-top: clamp(5.5rem, 19vw, 7rem);
        padding-top: clamp(3.25rem, 12vw, 4.5rem);
        padding-bottom: 0;
        border-bottom: 0;
    }

    .klangformer-product-page .kf-intro__journey-visual {
        margin-block: clamp(4.25rem, 15vw, 5.5rem) clamp(4.5rem, 16vw, 6rem);
    }

    .klangformer-product-page .kf-intro__signal {
        width: min(100%, 20rem);
        margin: 0 auto;
        padding-block: 1.25rem;
    }

    .klangformer-product-page .kf-intro__signal::before {
        top: 2.55rem;
        bottom: 2.55rem;
        left: 2rem;
    }

    .klangformer-product-page .kf-intro__signal li {
        min-height: 4.75rem;
        padding: 1.5rem 0.5rem 1.5rem 4.25rem;
    }

    .klangformer-product-page .kf-intro__signal li::before {
        left: 2rem;
        width: 0.86rem;
        height: 0.86rem;
        border-width: 0.18rem;
    }

    .klangformer-product-page .kf-intro__signal li:nth-child(4)::before {
        width: 1.2rem;
        height: 1.2rem;
    }

    .klangformer-product-page .kf-intro__signal strong {
        font-size: clamp(0.98rem, 4.5vw, 1.12rem);
        line-height: 1.42;
    }

    .klangformer-product-page .kf-tone-card--vintage header {
        max-width: 100%;
    }

    .klangformer-product-page .kf-tone-card--vintage header > p {
        max-width: calc(100% - 5rem);
    }

    .klangformer-product-page .kf-tone-card--vintage h3 {
        position: relative;
        padding-right: 5rem;
    }

    .klangformer-product-page .kf-tone-card--vintage h3::before,
    .klangformer-product-page .kf-tone-card--vintage h3::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 3.75rem;
        aspect-ratio: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        pointer-events: none;
        transform: translateY(-50%);
    }

    .klangformer-product-page .kf-tone-card--vintage h3::before {
        background-image: url("../images/presetmouseoff.png");
    }

    .klangformer-product-page .kf-tone-card--vintage h3::after {
        background-image: url("../images/presetmouseon.png");
        opacity: 0;
        transition: opacity 260ms ease;
    }

    .klangformer-product-page .kf-tone-card--vintage:hover h3::after,
    .klangformer-product-page .kf-tone-card--vintage:focus-within h3::after {
        opacity: 1;
    }

    .klangformer-product-page .kf-tone-card--vintage > .kf-tone-card__dial {
        display: none;
    }

    .klangformer-product-page .kf-controls__heading h2 {
        font-size: clamp(1.45rem, 6.9vw, 2.15rem);
        line-height: 1.12;
    }

    .klangformer-product-page .kf-controls__heading-line:first-child {
        font-size: clamp(2.25rem, 11vw, 3.1rem);
    }

    .klangformer-product-page .kf-controls__grid {
        gap: 1.4rem;
        margin-top: 4.25rem;
    }

    .klangformer-product-page .kf-control-card {
        min-height: 29rem;
        padding: 2.6rem 1.9rem;
    }

    .klangformer-product-page .kf-control-card > p {
        margin-top: 1.85rem;
    }

    .klangformer-product-page .kf-control-card__visual {
        padding-top: 3.25rem;
    }

    .klangformer-product-page .kf-preamp {
        min-height: 0;
    }

    .klangformer-product-page .kf-preamp__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
        padding-block: 3.25rem 3.75rem;
    }

    .klangformer-product-page .kf-preamp__interface {
        grid-row: 1;
        width: min(52vw, 12.5rem);
        margin: 0 auto;
        align-self: auto;
        justify-self: center;
    }

    .klangformer-product-page .kf-preamp__copy {
        grid-row: 2;
    }

    .klangformer-product-page .kf-preamp__copy p {
        margin-top: 1.15rem;
        font-size: clamp(0.88rem, 3.8vw, 1rem);
        line-height: 1.66;
    }

    .klangformer-product-page .kf-specs__mobile-visual {
        position: relative;
        display: block;
        width: min(62%, 16rem);
        margin: clamp(3.25rem, 12vw, 4.25rem) auto 0;
        isolation: isolate;
    }

    .klangformer-product-page .kf-specs__mobile-screen {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 1.4rem 3.2rem rgba(33, 41, 48, 0.2);
    }

    .klangformer-product-page .kf-specs__mobile-shadow {
        position: absolute;
        z-index: 1;
        top: 84%;
        left: 50%;
        display: block;
        width: 118%;
        max-width: none;
        height: auto;
        opacity: 0.72;
        transform: translateX(-50%);
    }

    .klangformer-product-page .kf-specs__layout {
        margin-top: clamp(4.75rem, 17vw, 6rem);
    }

    .klangformer-product-page .kf-specs__features,
    .klangformer-product-page .kf-specs__panel {
        padding-block: 2.25rem;
    }

    .klangformer-product-page .kf-specs__features header,
    .klangformer-product-page .kf-specs__panel header {
        padding-block: 0.35rem 0.6rem;
    }

    .klangformer-product-page .kf-specs__features ul,
    .klangformer-product-page .kf-specs__panel dl {
        margin-top: 1.7rem;
    }

    .klangformer-product-page .kf-specs__features li:first-child,
    .klangformer-product-page .kf-specs__panel dl > div:first-child {
        border-top: 0;
    }

    .klangformer-product-page .kf-specs__footer {
        gap: 1.5rem;
        margin-top: 4.5rem;
        padding-top: 0;
        border-top: 0;
    }

    .klangformer-product-page .kf-specs__footer img {
        grid-row: 1;
        width: min(100%, 8.5rem);
        justify-self: start;
    }

    .klangformer-product-page .kf-specs__footer p {
        grid-row: 2;
        width: 100%;
        padding-top: 1.75rem;
        border-top: 0.0625rem solid rgba(48, 63, 72, 0.15);
    }

    .klangformer-product-page .kf-reviews .v13-reviews__inner {
        padding-block: clamp(5.5rem, 19vw, 7rem) clamp(5rem, 17vw, 6.5rem);
    }

    .klangformer-product-page .kf-reviews .v13-reviews__stage {
        margin-top: clamp(3.25rem, 12vw, 4.25rem);
    }

    .klangformer-product-page .kf-reviews .v13-reviews__slides {
        min-height: clamp(28rem, 118vw, 32rem);
    }

    .klangformer-product-page .kf-reviews .v13-review-slide {
        gap: 0.8rem;
    }

    .klangformer-product-page .kf-reviews .v13-review-slide__logo {
        min-height: 0;
        padding: 0;
        border-bottom: 0;
    }

    .klangformer-product-page .kf-download__credentials {
        border-block: 0;
    }
}