/* The floor spans the page; its vertical position follows the product layout. */
#main-bg {
    background: linear-gradient(to bottom, #f8f9fb 0.000%, #f8f9fb 4.583%, #f8fafb 9.167%, #f8fafb 13.750%, #f8fafc 18.333%, #f9fafc 22.917%, #fafafc 27.500%, #fafbfc 32.083%, #fafcfc 36.667%, #fbfcfd 41.250%, #fbfcfd 45.833%, #fcfcfd 50.417%, #fcfcfd 55.000%, #fcfcfd 58.750%, #fcfcfe 62.500%, #fcfcfe 66.250%, #fcfdfe 70.000%, #fdfdfe 73.750%, #fefefe 77.500%, #fefefe 81.250%, #fefefe 85.000%, #fefefe 88.750%, #fefefe 92.500%, #ffffff 96.250%, #fff 100%);
    overflow-x: clip;
    isolation: isolate;
}
#main-bg::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    left: 0;
    top: var(--stage-top, 0px);
    width: 100%;
    height: var(--stage-height, 900px);
    background: url('../images/product-stage.svg?v=13') center / 100% 100% no-repeat;
}
/* Keep the player unisolated so its screen glow blends with the stage. */
#main > :not(#coverclip):not(.mejs__container) {
    position: relative;
    z-index: 1;
}

/* A filled light source directly behind the cover, sharing its perspective.
   The opaque interior is hidden by the cover; only its outward falloff shows. */
#covermain::before {
    content: '';
    position: absolute;
    inset: -60%;
    z-index: -1;
    pointer-events: none;
    background: url('../images/cover-halo.svg?v=2') center / 100% 100% no-repeat;
}

/* Broad edge shading spans the product details through the live demo. */
#product-scene {
    position: relative;
    isolation: isolate;
}
#product-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.962) 69.375%, rgba(0,0,0,.854) 73.75%, rgba(0,0,0,.691) 78.125%, rgba(0,0,0,.5) 82.5%, rgba(0,0,0,.309) 86.875%, rgba(0,0,0,.146) 91.25%, rgba(0,0,0,.038) 95.625%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, rgba(0,0,0,.962) 69.375%, rgba(0,0,0,.854) 73.75%, rgba(0,0,0,.691) 78.125%, rgba(0,0,0,.5) 82.5%, rgba(0,0,0,.309) 86.875%, rgba(0,0,0,.146) 91.25%, rgba(0,0,0,.038) 95.625%, transparent 100%);
    background: radial-gradient(ellipse 15% 150% at 0% 20%, rgba(65,82,106,0.02400) 0%, rgba(65,82,106,0.02380) 6.25%, rgba(65,82,106,0.02305) 12.5%, rgba(65,82,106,0.02200) 18.75%, rgba(65,82,106,0.02050) 25%, rgba(65,82,106,0.01870) 31.25%, rgba(65,82,106,0.01660) 37.5%, rgba(65,82,106,0.01435) 43.75%, rgba(65,82,106,0.01200) 50%, rgba(65,82,106,0.00965) 56.25%, rgba(65,82,106,0.00740) 62.5%, rgba(65,82,106,0.00530) 68.75%, rgba(65,82,106,0.00350) 75%, rgba(65,82,106,0.00200) 81.25%, rgba(65,82,106,0.00095) 87.5%, rgba(65,82,106,0.00020) 93.75%, rgba(65,82,106,0.00000) 100%),
                radial-gradient(ellipse 15% 150% at 100% 20%, rgba(65,82,106,0.02400) 0%, rgba(65,82,106,0.02380) 6.25%, rgba(65,82,106,0.02305) 12.5%, rgba(65,82,106,0.02200) 18.75%, rgba(65,82,106,0.02050) 25%, rgba(65,82,106,0.01870) 31.25%, rgba(65,82,106,0.01660) 37.5%, rgba(65,82,106,0.01435) 43.75%, rgba(65,82,106,0.01200) 50%, rgba(65,82,106,0.00965) 56.25%, rgba(65,82,106,0.00740) 62.5%, rgba(65,82,106,0.00530) 68.75%, rgba(65,82,106,0.00350) 75%, rgba(65,82,106,0.00200) 81.25%, rgba(65,82,106,0.00095) 87.5%, rgba(65,82,106,0.00020) 93.75%, rgba(65,82,106,0.00000) 100%);
}

/* Let the existing cover reflection fade naturally past the waveform. */
#coverclip { clip-path: none; }

#description {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 714px;
    padding: 16px clamp(20px, 3vw, 32px) 24px;
    border-radius: 0;
    background: transparent;
}

@media (min-width: 650px) {
    #description {
        margin-top: -40px;
        padding-top: 48px;
    }
}

/* The mobile waveform stays above the footer, without a reflected copy. */
@media (max-width: 649px) {
    #main > #title { margin-top: .4em; }
    .mejs__container.audio-mobile-docked {
        position: sticky;
        bottom: env(safe-area-inset-bottom, 0px);
        width: calc(100% - 40px) !important;
        margin: 12px auto 0;
        z-index: 900;
    }
    .audio-mobile-docked .audio-waveform-reflection { display: none !important; }
}

@media (max-width: 649px) {
    /* Clip decorative spill at the viewport, without creating a scroll container
       that would interfere with the bottom-sticky player or vertical scrolling. */
    html.product-page { overflow-x: clip; }
    #livedemo { grid-template-columns: minmax(0, 1fr); }
    #livedemo > *, #video > * { min-width: 0; }
    #livedemo #form {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    #livedemo #form form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #thumbnail { max-width: 100%; }
}