/* ==========================================================================
   The DarkRay II visual page (mm/pages/instruments/custom/darkray-ii)
   --------------------------------------------------------------------------
   Dark mode, with the bass's two LED rings, orange and purple, as the
   accent. Loads after instrument-detail.css: the standard page's buy box,
   dealers, specs and related sections take this palette through their
   --mm-* tokens, and the few colors they hard-code are overridden below.
   The site header and footer go dark too, on this page only (body:has(.dr2),
   so nothing leaks if the stylesheet outlives a PJAX swap).
   ========================================================================== */

.dr2,
.dr2-lightbox {
    --bg: #07080b;
    --bg-2: #0d0f14;
    --panel: #12151c;
    --panel-2: #181c25;
    --line: #262b37;
    --text: #eceef3;
    --muted: #aab0be;
    --orange: #ff5a1f;
    --orange-text: #ff8754;
    --orange-glow: rgba(255, 90, 31, 0.55);
    --purple: #8a63ff;
    --purple-text: #ab8fff;
    --purple-glow: rgba(138, 99, 255, 0.55);
    --header: 72px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cond: "Avenir Next Condensed", Bahnschrift, "Roboto Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
}

.dr2 {
    /* The standard page's tokens, in the dark palette. */
    --mm-ink: var(--text);
    --mm-ink-2: var(--muted);
    --mm-line: var(--line);
    --mm-alt: var(--panel);
    --mm-control-edge: #4a5060;

    position: relative;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
}

body:has(.dr2) {
    background: #07080b;
}

.dr2 img {
    max-width: 100%;
}

.dr2-section-head h2,
.dr2-bleed__title,
.dr2-features__title,
.dr2-readout h3,
.dr2-card h3,
.dr2-feature h3,
.dr2-strip__head h3,
.dr2-eyebrow,
.dr2-btn,
.dr2-subnav,
.dr2-knob__label,
.dr2-lever__name,
.dr2-lab__signal-label,
.dr2-lab__signal-value,
.dr2-feature__num,
.dr2-bar__name,
.dr2-gallery__caption {
    font-family: var(--cond);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dr2-section-head h2,
.dr2-bleed__title,
.dr2-features__title {
    margin: 0 0 0.3em;
    color: #fff;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 0.95;
}

.dr2-readout h3,
.dr2-card h3,
.dr2-feature h3,
.dr2-strip__head h3 {
    margin: 0 0 0.5em;
    color: #fff;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
}

.dr2 :focus-visible {
    outline: 2px solid var(--purple-text);
    outline-offset: 3px;
}

.dr2-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.dr2-eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.22em;
}

/* "Interactive" on the Light it up panel (2026-11-09): the same orange-to-purple
   edge as the glowing buttons, so it reads as one of the controls. */
.dr2-interactive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 14px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(90deg, var(--orange), var(--purple)) border-box;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dr2-interactive svg {
    flex: 0 0 auto;
}

.dr2-lede {
    max-width: 640px;
    color: var(--muted);
    font-size: 1.05rem;
}

.dr2-section-head {
    margin-bottom: 48px;
}

/* -- Buttons ------------------------------------------------------------------ */

.dr2-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(7, 8, 11, 0.55);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

/* Frosted only over the hero photo, which scrolls with the page; never in the
   sticky nav or the buy bar (see .dr2-subnav). */
.dr2-hero .dr2-btn {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* No hover underline on the page's buttons and menus (Jesse, 2026-11-11);
   the site's a:hover rule (global.css) would otherwise add one. */
.dr2 :is(.dr2-btn, .dr2-hero__scroll, .dr2-subnav a, .dr2-bar a):is(:hover, :focus) {
    text-decoration: none;
}

.dr2-btn:hover,
.dr2-btn:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.dr2-btn--glow {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        linear-gradient(90deg, var(--orange), var(--purple)) border-box;
    box-shadow: -8px 0 24px -6px var(--orange-glow), 8px 0 24px -6px var(--purple-glow);
}

.dr2-btn--glow:hover,
.dr2-btn--glow:focus-visible {
    border-color: transparent;
    background:
        linear-gradient(var(--bg), var(--bg)) padding-box,
        linear-gradient(90deg, var(--orange), var(--purple)) border-box;
    box-shadow: -10px 0 34px -4px var(--orange-glow), 10px 0 34px -4px var(--purple-glow);
}

.dr2-btn--small {
    min-height: 40px;
    padding: 0 20px;
    font-size: 1rem;
}

/* -- Hero ---------------------------------------------------------------------- */

.dr2-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 920px);
    overflow: hidden;
    isolation: isolate;
}

.dr2-hero__media,
.dr2-hero__media img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}

.dr2-hero__media img {
    object-fit: cover;
    object-position: 60% center;
    transform: scale(1.04);
    animation: dr2-hero-in 2.4s var(--ease) both;
}

@keyframes dr2-hero-in {
    from { transform: scale(1.12); filter: brightness(0.3); }
    to { transform: scale(1.04); filter: brightness(1); }
}

.dr2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7, 8, 11, 0.15) 0%, rgba(7, 8, 11, 0.1) 40%, rgba(7, 8, 11, 0.92) 88%, var(--bg) 100%),
        linear-gradient(90deg, rgba(7, 8, 11, 0.85) 0%, rgba(7, 8, 11, 0.25) 55%, transparent 100%);
}

.dr2-hero__content {
    position: relative;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px 72px;
}

.dr2-hero__title {
    margin: 0 0 32px;
    color: #fff;
}

.dr2-logo {
    display: block;
    width: clamp(240px, 34vw, 460px);
    height: auto;
    /* The logo art is mid-gray; lift it to near-white with a soft two-color glow. */
    filter: brightness(0) invert(1) drop-shadow(-6px 0 18px var(--orange-glow)) drop-shadow(6px 0 18px var(--purple-glow));
}

.dr2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Two buttons (Marketing, 2026-11-11): buy and the videos, side by side on
   a computer and on a phone. */
.dr2-hero__actions .dr2-btn {
    min-height: 44px;
    padding: 0 22px;
    font-size: 0.95rem;
}

.dr2-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 28px;
    height: 44px;
    margin-left: -14px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
}

.dr2-hero__scroll span {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: #fff;
    animation: dr2-scroll 1.8s ease-in-out infinite;
}

@keyframes dr2-scroll {
    0% { opacity: 0; transform: translateY(0); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateY(14px); }
}

/* -- Section nav --------------------------------------------------------------- */

.dr2-subnav {
    position: sticky;
    top: var(--header);
    z-index: 50;
    border-bottom: 1px solid var(--line);
    /* Solid, no backdrop blur: a blurred translucent bar that stays put while
       the page scrolls flashed see-through for a frame on this glow-heavy page
       (Jesse, 2026-11-09). Same for the site header and the buy bar. */
    background: #07080b;
}

.dr2-subnav__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1240px;
    min-height: 56px;
    margin: 0 auto;
    padding: 0 24px;
}

.dr2-subnav__name {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
}

.dr2-subnav__links {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.dr2-subnav ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.dr2-subnav ul::-webkit-scrollbar {
    display: none;
}

/* Swiper (2026-11-11): the links drag left and right as one free strip;
   Swiper moves the list, so the list itself no longer scrolls. */
.dr2-subnav__links.swiper-initialized ul {
    gap: 0;
    overflow: visible;
}

.dr2-subnav__links .swiper-slide {
    width: auto;
}

.dr2-subnav__links.swiper-initialized {
    cursor: grab;
}

/* A fade at whichever edge has more links past it. */
.dr2-subnav__links.has-more-end {
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.dr2-subnav__links.has-more-start {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%);
    mask-image: linear-gradient(90deg, transparent, #000 15%);
}

.dr2-subnav__links.has-more-start.has-more-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.dr2-subnav ul a {
    position: relative;
    display: block;
    padding: 16px 12px;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    white-space: nowrap;
}

.dr2-subnav ul a:hover,
.dr2-subnav ul a.is-current {
    color: #fff;
}

.dr2-subnav ul a.is-current::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--orange), var(--purple));
    box-shadow: 0 0 10px var(--orange-glow), 0 0 10px var(--purple-glow);
}

.dr2-subnav__buy {
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-decoration: none;
    white-space: nowrap;
}

.dr2-subnav__buy:hover,
.dr2-subnav__buy:focus-visible {
    border-color: #fff;
    color: #fff;
}

/* -- Buy box: the standard partials in the dark palette ------------------------ */

/* The shared wishlist heart and its message are inked for white pages (#222,
   #333): on the dark panel they take the page's own text, and the accent on
   hover or once saved (2026-11-09, a WAVE contrast error). */
.dr2 .wishlist-heart {
    color: var(--text);
}

.dr2 .wishlist-heart:hover,
.dr2 .wishlist-heart.is-saved {
    color: var(--orange-text);
}

.dr2 .wishlist-heart__feedback {
    color: var(--muted);
}

.dr2 .wishlist-heart__feedback.is-error {
    color: var(--orange-text);
}

.dr2 .mm-instrument__buy.dr2-finish {
    max-width: none;
    padding: clamp(3rem, 7vw, 6rem) max(24px, calc((100% - 1192px) / 2)) 40px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 30%, var(--bg-2) 100%);
}

.dr2 .mm-instrument__logo {
    filter: brightness(0) invert(1);
}

.dr2 .mm-instrument__description {
    max-width: 52rem;
    color: #d5d8e0;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.dr2 .mm-instrument__configurator {
    gap: 24px;
}

.dr2 .mm-instrument__box {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--panel);
}

.dr2 .mm-instrument__options-heading,
.dr2 .mm-instrument__summary-heading,
.dr2 .mm-instrument__facts dt,
.dr2 .mm-instrument__code-label {
    color: #fff;
}

.dr2 .mm-instrument__colors {
    border: 0;
    border-radius: 16px;
    background: #0a0b0f;
}

.dr2 .mm-instrument__swatch {
    color: var(--muted);
}

.dr2 .mm-instrument__swatch:hover,
.dr2 .mm-instrument__swatch[aria-current="true"] {
    color: #fff;
}

/* Dark chips (Black) need an edge on the dark panel; the selected one is
   ringed in the LED colors instead of the standard page's black. */
.dr2 .mm-instrument__swatch-chip {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.dr2 .mm-instrument__swatch:hover .mm-instrument__swatch-chip {
    box-shadow: 0 0 0 2px #0a0b0f, 0 0 0 3px var(--muted);
}

.dr2 .mm-instrument__swatch[aria-current="true"] .mm-instrument__swatch-chip {
    box-shadow: 0 0 0 2px #0a0b0f, 0 0 0 4px var(--purple), 0 0 16px 2px var(--purple-glow);
}

.dr2 .mm-instrument__choice {
    border-color: var(--mm-control-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
}

.dr2 .mm-instrument__choice[aria-current="true"] {
    border-color: var(--purple);
    box-shadow: inset 0 0 0 1px var(--purple);
    color: #fff;
}

.dr2 .mm-instrument__swatch:focus-visible,
.dr2 .mm-instrument__choice:focus-visible {
    outline-color: var(--purple-text);
}

.dr2 .mm-instrument__price {
    color: #fff;
}

.dr2 .mm-instrument__buy-button.mm-btn,
.dr2 .mm-instrument__dealer-cta.mm-btn {
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(var(--panel), var(--panel)) padding-box,
        linear-gradient(90deg, var(--orange), var(--purple)) border-box;
    color: #fff;
    box-shadow: -8px 0 24px -10px var(--orange-glow), 8px 0 24px -10px var(--purple-glow);
}

.dr2 .mm-instrument__buy-button.mm-btn:hover,
.dr2 .mm-instrument__buy-button.mm-btn:focus-visible,
.dr2 .mm-instrument__dealer-cta.mm-btn:hover,
.dr2 .mm-instrument__dealer-cta.mm-btn:focus-visible {
    box-shadow: -10px 0 30px -6px var(--orange-glow), 10px 0 30px -6px var(--purple-glow);
    outline-color: var(--purple-text);
}

/* A dealer-exclusive finish: the dealer's name in the LED gradient where the
   price would be, and the swatch tag in the ring purple. */
.dr2 .mm-instrument__exclusive-dealer {
    background: linear-gradient(90deg, var(--orange-text), var(--purple-text));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dr2 .mm-instrument__swatch-tag {
    color: var(--purple-text);
}

.dr2 .mm-instrument__sold-out {
    border-color: var(--line);
    border-radius: 999px;
}

.dr2 .mm-instrument__affirm-terms,
.dr2 .mm-instrument__note {
    color: var(--muted);
}

.dr2 .mm-instrument__affirm a,
.dr2 .mm-instrument__note a {
    color: #fff;
}

/* Affirm writes its own line and logo for a white page; brighten them. */
.dr2 .affirm-as-low-as,
.dr2 .affirm-as-low-as a {
    color: var(--text);
}

.dr2 .mm-instrument__affirm .affirm-as-low-as {
    background: var(--panel-2);
    border-color: var(--line);
}

.dr2 .affirm-as-low-as .__affirm-logo,
.dr2 .affirm-as-low-as img {
    filter: brightness(0) invert(1);
}

.dr2 .mm-instrument__notice {
    border-left-color: var(--purple);
    background: var(--panel-2);
    color: var(--text);
}

/* -- The finish gallery -------------------------------------------------------- */

.dr2-gallery {
    margin: 2.5rem 0 2rem;
}

.dr2-gallery:focus {
    outline: none;
}

.dr2-gallery__stage {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 100px rgba(0, 0, 0, 0.65);
}

.dr2-gallery__zoom {
    display: block;
    width: 100%;
    height: clamp(300px, 50vh, 600px);
    padding: 16px 64px 48px;
    border: 0;
    background: #fff;
    cursor: zoom-in;
}

.dr2-gallery__zoom img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s;
}

.dr2-gallery__zoom img.is-loading {
    opacity: 0;
}

/* Desktop: the portrait front and back shots lie on their side (90° clockwise)
   to fill the wide stage. The image box takes the stage's content box with
   width and height swapped, then turns; top is offset by half the 16/48px
   padding difference so it centers in the content box. */
@media (min-width: 768px) {
    @supports (width: 1cqh) {
        .dr2-gallery__zoom {
            position: relative;
            container-type: size;
        }

        .dr2-gallery__zoom img.is-rotated {
            position: absolute;
            top: calc(50% - 16px);
            left: 50%;
            width: 100cqh;
            height: 100cqw;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }

    .dr2-thumb {
        position: relative;
    }

    .dr2-thumb.is-rotated img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 64px;
        height: 84px;
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .dr2-lightbox img.is-rotated {
        max-width: calc(100vh - 80px);
        max-height: calc(100vw - 176px);
        transform: rotate(90deg);
    }
}

.dr2-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: rgba(12, 13, 17, 0.88);
    cursor: pointer;
    transition: box-shadow 0.25s;
}

.dr2-gallery__nav span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.dr2-gallery__nav--prev { left: 16px; }
.dr2-gallery__nav--next { right: 16px; }
.dr2-gallery__nav--prev span { transform: translate(-30%, -50%) rotate(-135deg); }
.dr2-gallery__nav--next span { transform: translate(-70%, -50%) rotate(45deg); }
.dr2-gallery__nav--prev:hover { box-shadow: 0 0 18px var(--orange-glow); }
.dr2-gallery__nav--next:hover { box-shadow: 0 0 18px var(--purple-glow); }

.dr2-gallery__caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    margin: 0;
    color: #1b1d22;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    pointer-events: none;
}

.dr2-gallery__count {
    color: #4a4f5a;
}

.dr2 .dr2-gallery__notice {
    margin: 0;
    max-width: none;
}

.dr2-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin: 16px 0 0;
    padding: 4px 2px 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: #333846 transparent;
    scrollbar-width: thin;
}

.dr2-gallery__thumbs li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.dr2-thumb {
    display: block;
    width: 92px;
    height: 72px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dr2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dr2-thumb:hover {
    opacity: 1;
}

.dr2-thumb[aria-current="true"] {
    border-color: var(--purple);
    box-shadow: 0 0 14px var(--purple-glow);
    opacity: 1;
}

/* -- Lightbox ------------------------------------------------------------------- */

.dr2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 88px;
    background: rgba(4, 5, 7, 0.96);
}

.dr2-lightbox[hidden] {
    display: none;
}

.dr2-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    background: #fff;
}

.dr2-lightbox__close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* -- Dealers -------------------------------------------------------------------- */

.dr2 .mm-instrument__dealers {
    max-width: none;
    padding-inline: max(24px, calc((100% - 1192px) / 2));
    background: var(--bg-2);
}

.dr2 .mm-instrument__section-heading {
    color: #fff;
}

.dr2 .mm-instrument__dealer {
    border: 1px solid var(--line);
    border-radius: 20px;
}

/* Dealer logos are drawn for white: they keep a white plate. */
.dr2 .mm-instrument__dealer-logo-box {
    border-radius: 12px;
    background: #fff;
}

.dr2 .mm-instrument__more-dealers summary {
    border-radius: 999px;
}

.dr2 .mm-instrument__more-dealers a {
    color: var(--purple-text);
}

/* -- Highlights and the detail strip ------------------------------------------- */

.dr2-highlights {
    padding: 120px 0 100px;
    background: var(--bg-2);
}

.dr2-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dr2-card {
    position: relative;
    padding: 0 0 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel);
    transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
}

.dr2-card:nth-child(odd):hover {
    border-color: rgba(255, 90, 31, 0.6);
    box-shadow: 0 0 40px -10px var(--orange-glow);
    transform: translateY(-4px);
}

.dr2-card:nth-child(even):hover {
    border-color: rgba(138, 99, 255, 0.6);
    box-shadow: 0 0 40px -10px var(--purple-glow);
    transform: translateY(-4px);
}

.dr2-card__media {
    aspect-ratio: 906 / 540;
    overflow: hidden;
    background: #fff;
}

.dr2-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.dr2-card:hover .dr2-card__media img {
    transform: scale(1.04);
}

.dr2-card h3,
.dr2-card p {
    padding: 0 24px;
}

.dr2-card h3 {
    margin-top: 24px;
    font-size: 1.6rem;
}

.dr2-card p {
    margin: 0;
    color: var(--muted);
}

.dr2-strip {
    margin-top: 100px;
}

.dr2-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.dr2-strip__head h3 {
    margin: 0;
}

.dr2-strip__controls {
    display: flex;
    gap: 12px;
}

.dr2-strip__controls .dr2-gallery__nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0;
    border-color: var(--line);
}

.dr2-strip__track {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px)) 12px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px));
    scrollbar-color: #333846 transparent;
    scrollbar-width: thin;
}

.dr2-strip__track li {
    flex: 0 0 min(78vw, 980px);
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    scroll-snap-align: start;
}

.dr2-strip__photo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.dr2-strip__track img {
    display: block;
    width: 100%;
    aspect-ratio: 2560 / 1057;
    object-fit: cover;
}

/* Desktop: the strip sits inside the content width, lined up with its
   heading, with the next photo peeking in at the right. Phones keep the
   full-width swipe. */
@media (min-width: 992px) {
    .dr2-strip__track {
        width: min(1192px, calc(100% - 48px));
        margin: 0 auto;
        padding: 0 0 12px;
        border-radius: 18px;
        scroll-padding: 0;
    }

    .dr2-strip__track li {
        flex-basis: 86%;
    }
}

.dr2-videos {
    background: var(--bg);
}

/* The shared video block (pdp-media.css) is colored for a white page: its
   hidden "See & hear it" heading failed contrast on this one, and the demo
   titles and cards under the film would have too (2026-11-11). */
.dr2 .mm-instrument__videos {
    --pdp-ink: var(--text);
    --pdp-ink-2: var(--muted);
    --pdp-ink-3: var(--muted);
    --pdp-card: var(--panel);
    --pdp-line: var(--line);
    --pdp-line-2: #3a4050;
    --pdp-shadow: none;
    --pdp-focus: var(--purple-text);
}

/* -- The players (2026-11-11) -----------------------------------------------------
   Slanted bars like a versus screen, one per photo in the players folder; the
   open one is wide and in color, the rest dark. A click opens one, and the
   script moves on to the next every few seconds while the section is on
   screen. (It first held the page still and stepped through them on scroll;
   Jesse found that annoying, 2026-11-11.) Phones stack the bars. */

.dr2-players {
    position: relative;
    padding: 72px 0;
}

.dr2-players__stage {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dr2-players__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.dr2-players__head h2 {
    margin: 0;
    color: #fff;
    font-family: var(--cond);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dr2-players__head .dr2-eyebrow {
    margin-bottom: 6px;
}

.dr2-players__meta {
    flex: 0 0 auto;
    text-align: right;
}

.dr2-players__count {
    margin: 0 0 8px;
    color: var(--muted);
    font-family: var(--cond);
    font-weight: 700;
    letter-spacing: 0.14em;
}

.dr2-players__progress {
    display: flex;
    gap: 6px;
    margin: 0;
}

.dr2-players__progress span {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background: var(--line);
    transition: background 0.3s;
}

.dr2-players__progress span.is-on {
    background: var(--acc, var(--orange));
}

.dr2-players__list {
    display: flex;
    gap: 8px;
    margin: 0 auto;
    padding-right: 60px;
    padding-left: 60px;
    list-style: none;
}

.dr2-players__list {
    height: min(640px, 75vh);
}

.dr2-player {
    --acc: var(--orange);
    --acc-glow: var(--orange-glow);

    position: relative;
    flex: 1 1 0;
    min-width: 0;
    transform: skewX(-8deg);
    transition: flex-grow 0.6s var(--ease);
}

.dr2-player--purple {
    --acc: var(--purple);
    --acc-glow: var(--purple-glow);
}

.dr2-player.is-on {
    flex-grow: 3.4;
}

.dr2-player__button {
    -webkit-user-select: none;
    user-select: none;
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: #000;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.4s;
}

.dr2-player.is-on .dr2-player__button {
    box-shadow: 0 0 0 2px var(--acc), 0 0 40px -6px var(--acc-glow);
}

.dr2-player__button img {
    position: absolute;
    top: 0;
    left: -80px;
    width: calc(100% + 160px);
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: grayscale(1) brightness(0.45);
    /* A mouse drag on a bar should not pick up the photo (2026-11-11). */
    -webkit-user-drag: none;
    user-select: none;
    transform: skewX(8deg);
    transition: filter 0.5s, transform 0.6s var(--ease);
}

.dr2-player.is-on .dr2-player__button img {
    filter: none;
    transform: skewX(8deg) scale(1.04);
}

.dr2-player__button::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.85));
    content: "";
    pointer-events: none;
}

.dr2-player__num {
    position: absolute;
    top: 14px;
    left: 18px;
    z-index: 2;
    color: transparent;
    font-family: var(--cond);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    transform: skewX(8deg);
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.35);
}

.dr2-player.is-on .dr2-player__num {
    -webkit-text-stroke-color: var(--acc);
}

.dr2-player__bar-name {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 2;
    font-family: var(--cond);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: translateX(-50%) skewX(8deg) rotate(180deg);
    transition: opacity 0.3s;
}

.dr2-player.is-on .dr2-player__bar-name {
    opacity: 0;
}

.dr2-player__info {
    position: absolute;
    right: 20px;
    bottom: 26px;
    left: 32px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: skewX(8deg) translateY(20px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.dr2-player.is-on .dr2-player__info {
    opacity: 1;
    transform: skewX(8deg);
}

.dr2-player__name {
    font-family: var(--cond);
    font-size: clamp(2.4rem, 4.6vw, 4.5rem);
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
    white-space: nowrap;
}

.dr2-player__band {
    margin-top: 6px;
    color: var(--muted);
}

.dr2-player__info::after {
    width: 0;
    height: 4px;
    margin-top: 14px;
    background: var(--acc);
    box-shadow: 0 0 18px var(--acc-glow);
    content: "";
    transition: width 0.6s 0.15s var(--ease);
}

.dr2-player.is-on .dr2-player__info::after {
    width: 160px;
}

@media (max-width: 767.98px) {
    .dr2-players__head h2 {
        font-size: 1.9rem;
    }

    .dr2-players__list {
        flex-direction: column;
        gap: 6px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .dr2-players__list {
        height: auto;
    }

    .dr2-player,
    .dr2-player__button img,
    .dr2-player.is-on .dr2-player__button img,
    .dr2-player__num,
    .dr2-player__info,
    .dr2-player.is-on .dr2-player__info {
        transform: none;
    }

    .dr2-player {
        flex: 0 0 64px;
        transition: flex-basis 0.6s var(--ease);
    }

    .dr2-player.is-on {
        flex-basis: min(440px, 62vh);
    }

    .dr2-player__button img {
        left: 0;
        width: 100%;
    }

    .dr2-player__num {
        top: 12px;
        font-size: 2.1rem;
    }

    .dr2-player__bar-name {
        top: 50%;
        bottom: auto;
        left: 72px;
        font-size: 0.95rem;
        writing-mode: horizontal-tb;
        transform: translateY(-50%);
    }

    .dr2-player__info {
        left: 20px;
    }

    .dr2-player__name {
        font-size: 2.4rem;
        white-space: normal;
    }
}

/* -- LED line and the knob lab ------------------------------------------------- */

.dr2-ledline {
    max-width: 1240px;
    height: 2px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent, var(--orange) 25%, var(--purple) 75%, transparent);
    box-shadow: 0 0 18px var(--orange-glow), 0 0 18px var(--purple-glow);
    opacity: 0.8;
}

.dr2-lab {
    --g-dist: var(--orange-glow);
    --g-oct: var(--purple-glow);

    position: relative;
    padding: 120px 0 72px;
    overflow: hidden;
    isolation: isolate;
}

.dr2[data-k-dist="off"] .dr2-lab { --g-dist: transparent; }
.dr2[data-k-dist="purple"] .dr2-lab { --g-dist: var(--purple-glow); }
.dr2[data-k-oct="off"] .dr2-lab { --g-oct: transparent; }
.dr2[data-k-oct="orange"] .dr2-lab { --g-oct: var(--orange-glow); }

.dr2-lab__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40% 55% at 30% 60%, var(--g-dist), transparent 70%),
        radial-gradient(40% 55% at 70% 60%, var(--g-oct), transparent 70%);
    opacity: 0.35;
    transition: background 0.6s;
}

.dr2-lab .dr2-section-head {
    text-align: center;
}

.dr2-lab .dr2-lede {
    margin: 0 auto;
}

.dr2-lab__try {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    margin-bottom: -8px;
}

.dr2-lab__try-text {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.dr2-lab__plate {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 32px;
    border-radius: 48px;
    background: radial-gradient(120% 140% at 50% 0%, #1a1d26 0%, #0b0d12 60%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -20px 40px rgba(0, 0, 0, 0.5), 0 40px 80px rgba(0, 0, 0, 0.55);
}

.dr2-knob-unit,
.dr2-lever-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dr2-knob-unit {
    --led: transparent;
    --led-glow: transparent;
}

.dr2-knob-unit[data-state="orange"] {
    --led: var(--orange);
    --led-glow: var(--orange-glow);
}

.dr2-knob-unit[data-state="purple"] {
    --led: var(--purple);
    --led-glow: var(--purple-glow);
}

.dr2-knob {
    width: clamp(150px, 22vw, 230px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dr2-knob svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dr2-knob__halo {
    fill: var(--led-glow);
    opacity: 0.25;
    filter: blur(18px);
    transition: fill 0.4s;
}

.dr2-knob__track {
    fill: none;
    stroke: #1d2029;
    stroke-width: 12;
}

.dr2-knob__led {
    fill: none;
    stroke: var(--led);
    stroke-width: 9;
    filter: drop-shadow(0 0 4px var(--led)) drop-shadow(0 0 14px var(--led));
    transition: stroke 0.35s;
}

.dr2-knob__knurl {
    fill: #0c0d11;
    stroke: #2b2f3a;
    stroke-width: 12;
    stroke-dasharray: 2 3;
}

.dr2-knob__cap {
    fill: #16181f;
    stroke: #000;
    stroke-width: 2;
}

.dr2-knob__text {
    fill: #c9ccd4;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.dr2-knob:hover .dr2-knob__track {
    stroke: #2a2e3a;
}

.dr2-knob:active svg {
    transform: scale(0.98);
}

/* Not engaged by the switch: unlit and not pressable. */
.dr2-knob-unit.is-off .dr2-knob,
.dr2-knob-unit.is-off .dr2-state {
    cursor: default;
}

.dr2-knob-unit.is-off .dr2-knob:active svg {
    transform: none;
}

.dr2-knob-unit.is-off .dr2-state[aria-pressed="true"] {
    background: transparent;
    color: var(--muted);
}

.dr2-knob-unit.is-off .dr2-state[aria-pressed="true"] .dr2-state__dot {
    background: transparent;
    box-shadow: none;
}

/* The 3-way lever: position 3 leans left, 2 stands up, 1 leans right (as in
   the controls diagram). */
.dr2-lever-btn {
    margin-top: 40px;
    padding: 8px;
    border: 0;
    border-radius: 16px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dr2-lever-btn:hover .dr2-lever__paddle {
    fill: #fff;
}

.dr2-lever {
    display: block;
    width: clamp(130px, 16vw, 180px);
    height: auto;
    overflow: visible;
}

.dr2-lever__base {
    stroke: #3a4050;
    stroke-width: 3;
    stroke-linecap: round;
}

.dr2-lever__boot {
    fill: #2a2e38;
}

.dr2-lever__paddle {
    fill: #c9ccd4;
    transform: rotate(0deg);
    transform-origin: 80px 92px;
    transition: transform 0.4s var(--ease);
}

.dr2[data-lever="3"] .dr2-lever__paddle { transform: rotate(-50deg); }
.dr2[data-lever="1"] .dr2-lever__paddle { transform: rotate(50deg); }

.dr2-lever-unit .dr2-state {
    justify-content: center;
    min-width: 48px;
    font-size: 1.05rem;
}

.dr2-lever__name {
    margin: 18px 0 0;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
}

.dr2-knob__label {
    margin: 18px 0 14px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.24em;
}

.dr2-states {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #0a0b0f;
}

.dr2-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.dr2-state__dot {
    width: 10px;
    height: 10px;
    border: 2px solid #6b7285;
    border-radius: 50%;
}

.dr2-state--orange .dr2-state__dot { border-color: var(--orange); }
.dr2-state--purple .dr2-state__dot { border-color: var(--purple); }

.dr2-state[aria-pressed="true"] {
    background: var(--panel-2);
    color: #fff;
}

.dr2-state--orange[aria-pressed="true"] .dr2-state__dot {
    background: var(--orange);
    box-shadow: 0 0 10px var(--orange);
}

.dr2-state--purple[aria-pressed="true"] .dr2-state__dot {
    background: var(--purple);
    box-shadow: 0 0 10px var(--purple);
}

.dr2-readout {
    max-width: 320px;
    min-height: 150px;
    margin-top: 24px;
}

.dr2-readout h3 {
    margin-bottom: 6px;
    font-size: 1.7rem;
}

.dr2-readout__knob {
    display: none;
}

.dr2-knob-unit[data-state="orange"] .dr2-readout h3 { color: var(--orange-text); text-shadow: 0 0 18px var(--orange-glow); }
.dr2-knob-unit[data-state="purple"] .dr2-readout h3 { color: var(--purple-text); text-shadow: 0 0 18px var(--purple-glow); }

.dr2-readout p {
    margin: 0;
    color: var(--muted);
}

.dr2-readout__state:not([hidden]) {
    animation: dr2-fade-up 0.4s var(--ease);
}

@keyframes dr2-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.dr2-lab__signal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    margin: 48px 0 0;
    text-align: center;
}

.dr2-lab__signal-label {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.24em;
}

.dr2-lab__signal-value {
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.dr2-lab__cfd {
    margin: 32px 0 0;
    text-align: center;
}

/* -- Features (the story) ------------------------------------------------------ */

.dr2-bleed {
    position: relative;
    isolation: isolate;
}

.dr2-bleed img,
.dr2-lineup img {
    display: block;
    width: 100%;
}

.dr2-bleed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 55%, rgba(7, 8, 11, 0.9) 100%);
}

.dr2-bleed__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    z-index: 1;
    margin: 0;
    padding: 0 24px;
    font-size: clamp(2.6rem, 8vw, 7rem);
    text-align: center;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.dr2-features__title {
    padding: 96px 24px 0;
    text-align: center;
}

.dr2-feature {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 90px 0;
}

.dr2-feature--flip .dr2-feature__media {
    order: 2;
}

.dr2-feature__media {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
}

.dr2-feature__media img {
    display: block;
    width: 100%;
}

.dr2-feature--orange .dr2-feature__media {
    box-shadow: 0 0 0 1px rgba(255, 90, 31, 0.35), 0 0 60px -14px var(--orange-glow);
}

.dr2-feature--purple .dr2-feature__media {
    box-shadow: 0 0 0 1px rgba(138, 99, 255, 0.35), 0 0 60px -14px var(--purple-glow);
}

.dr2-feature__num {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.3em;
}

.dr2-feature--orange .dr2-feature__num { color: var(--orange-text); }
.dr2-feature--purple .dr2-feature__num { color: var(--purple-text); }

.dr2-feature__copy p:not(.dr2-feature__num) {
    color: #cfd2da;
    font-size: 1.1rem;
}

/* -- The standard sections below, in the dark palette -------------------------- */

.dr2 .mm-instrument__specs {
    background: var(--bg-2);
}

.dr2 .mm-instrument__tabs [role="tab"] {
    border-color: var(--mm-control-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
}

.dr2 .mm-instrument__tabs [role="tab"]:hover {
    border-color: var(--muted);
    color: #fff;
}

.dr2 .mm-instrument__tabs [role="tab"][aria-selected="true"] {
    border-color: var(--purple);
    background: var(--panel-2);
    color: #fff;
}

.dr2 .mm-instrument__panel-heading,
.dr2 .mm-instrument__spec-table caption,
.dr2 .mm-instrument__spec-table th {
    color: #fff;
}

.dr2 .mm-instrument__spec-table {
    border-radius: 16px;
    background: var(--panel);
}

.dr2 .mm-instrument__spec-table td {
    color: #d5d8e0;
}

.dr2 .mm-instrument__spec-pick .form-select {
    border-color: var(--mm-control-edge);
    background-color: var(--panel);
    color: var(--text);
}

/* The diagrams are drawn on white: they keep a white plate. */
.dr2 .mm-instrument__control img {
    border-radius: 12px;
    background: #fff;
}

.dr2 .mm-instrument__control .btn-outline {
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
}

.dr2 .mm-instrument__panel .btn-outline {
    border-radius: 999px;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.dr2 .mm-instrument__prop65 {
    color: var(--muted);
}

.dr2 .mm-instrument__prop65 a {
    color: #fff;
}

.dr2 .mm-instrument__related {
    background: var(--bg);
}

.dr2 .mm-instrument__related-item a {
    color: var(--text);
}

.dr2 .mm-instrument__related-item img {
    border-radius: 16px;
    background: #fff;
}

.dr2 .mm-instrument__related-name {
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
}

.dr2 .mm-instrument__related-item a:hover .mm-instrument__related-name,
.dr2 .mm-instrument__related-item a:focus-visible .mm-instrument__related-name {
    border-color: var(--purple);
    background: var(--panel-2);
    color: #fff;
}

.dr2 .mm-join__cell {
    background: var(--panel);
    color: var(--text);
}

.dr2 .mm-join__cell--dark {
    background: #050608;
}

.dr2 .mm-join .mm-btn {
    border-color: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    color: #fff;
}

.dr2 .mm-join .mm-btn:hover,
.dr2 .mm-join .mm-btn:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline-color: #fff;
}

.dr2 .mm-tour .mm-btn--light {
    border-radius: 999px;
}

/* -- Sticky buy bar ------------------------------------------------------------- */

.dr2-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    border-top: 1px solid var(--line);
    background: #0a0b0f;
    transform: translateY(110%);
    transition: transform 0.45s var(--ease);
}

.dr2-bar.is-visible {
    transform: none;
}

.dr2-bar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--orange), var(--purple), transparent);
}

.dr2-bar__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 24px;
}

.dr2-bar__name {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.dr2-bar__finish {
    color: var(--muted);
}

/* The chosen finish, small, on a light plate so a Black bass still shows
   against the dark bar (Jesse, 2026-11-11). */
.dr2-bar__thumb {
    flex: none;
    display: flex;
    align-items: center;
    height: 36px;
    padding: 3px 8px;
    border-radius: 8px;
    background: #eceef3;
}

.dr2-bar__thumb[hidden] {
    display: none;
}

.dr2-bar__thumb img {
    display: block;
    width: auto;
    max-width: 104px;
    height: 30px;
    object-fit: contain;
}

.dr2-bar__price {
    margin-left: auto;
    color: #fff;
    font-weight: 700;
}

/* -- Scroll reveal, only once the script runs ---------------------------------- */

.dr2.is-ready .dr2-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.dr2.is-ready .dr2-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* -- Smaller screens ------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .dr2-feature {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .dr2-feature--flip .dr2-feature__media {
        order: 0;
    }

    .dr2-cards {
        grid-template-columns: 1fr;
        max-width: 560px;
    }

    .dr2-subnav__name {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .dr2-wrap,
    .dr2-hero__content,
    .dr2-subnav__inner,
    .dr2-bar__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dr2 .mm-instrument__buy.dr2-finish,
    .dr2 .mm-instrument__dealers {
        padding-inline: 16px;
    }

    /* The options box and the dark swatch panel inside it each padded 20px,
       leaving the swatches ~270px on a phone (Jesse, 2026-11-11). */
    .dr2 .mm-instrument__options {
        padding-inline: 14px;
    }

    .dr2 .mm-instrument__colors {
        padding-inline: 12px;
    }

    .dr2 .mm-instrument__swatch-chip {
        width: 42px;
        height: 42px;
    }

    /* The first screen exactly, its buttons clear of the cookie and country
       bubbles that float at the bottom left of a phone (Jesse, 2026-11-11). */
    .dr2-hero {
        min-height: calc(100svh - var(--hero-top, var(--header)));
    }

    .dr2-hero__content {
        padding-bottom: 96px;
    }

    /* The scroll-mouse cue reads as a mouse on a phone, where nobody needs
       telling to scroll (Jesse, 2026-11-11). Computers keep it. */
    .dr2-hero__scroll {
        display: none;
    }

    .dr2-hero__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dr2-hero__actions .dr2-btn {
        min-height: 44px;
        padding: 0 10px;
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        text-align: center;
    }

    /* An odd count (no videos, or no Buy) lets the last one span the row. */
    .dr2-hero__actions .dr2-btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .dr2-subnav__buy {
        display: none;
    }

    .dr2-lab,
    .dr2-highlights {
        padding: 72px 0;
    }

    /* One-screen deck (Jesse, 2026-11-11): stacked, the switch sat ~900px
       above the knobs it changes. Now the switch is one compact row, the two
       knobs sit side by side, and one readout under them follows the knob
       last touched (the script's .is-focus). The knob units dissolve into the
       plate's grid so their parts can line up across the two columns. */
    .dr2-lab__plate {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "try try"
            "lever lever"
            "dk ok"
            "dl ol"
            "ds os"
            "rd rd";
        gap: 0 10px;
        padding: 24px 12px 20px;
        border-radius: 28px;
    }

    .dr2-lab__try {
        grid-area: try;
        margin-bottom: 12px;
    }

    .dr2-lab__try-text {
        display: none;
    }

    .dr2-lever-unit {
        grid-area: lever;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "btn states"
            "btn name";
        align-items: center;
        justify-items: start;
        column-gap: 14px;
        margin-bottom: 14px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--line);
        text-align: left;
    }

    .dr2-lever-btn {
        grid-area: btn;
        margin: 0;
        padding: 4px;
    }

    .dr2-lever {
        width: 76px;
    }

    /* The 1 2 3 group names itself (aria-label); the lever drawing says switch. */
    .dr2-lever-unit .dr2-knob__label {
        display: none;
    }

    .dr2-lever-unit .dr2-states {
        grid-area: states;
    }

    .dr2-lever-unit .dr2-state {
        min-width: 44px;
        min-height: 36px;
    }

    .dr2-lever__name {
        grid-area: name;
        margin: 6px 0 0 4px;
        font-size: 1.05rem;
    }

    .dr2-knob-unit {
        display: contents;
    }

    .dr2-knob {
        width: min(116px, 100%);
        justify-self: center;
    }

    .dr2-knob-unit[data-knob="dist"] > .dr2-knob { grid-area: dk; }
    .dr2-knob-unit[data-knob="oct"] > .dr2-knob { grid-area: ok; }
    .dr2-knob-unit[data-knob="dist"] > .dr2-knob__label { grid-area: dl; }
    .dr2-knob-unit[data-knob="oct"] > .dr2-knob__label { grid-area: ol; }
    .dr2-knob-unit[data-knob="dist"] > .dr2-states { grid-area: ds; }
    .dr2-knob-unit[data-knob="oct"] > .dr2-states { grid-area: os; }

    .dr2-knob__label {
        justify-self: center;
        margin: 8px 0 6px;
        font-size: 0.95rem;
        letter-spacing: 0.18em;
    }

    .dr2-knob-unit > .dr2-states {
        justify-self: center;
        gap: 2px;
        padding: 3px;
    }

    .dr2-knob-unit .dr2-state {
        gap: 6px;
        min-height: 36px;
        padding: 0 9px;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
    }

    .dr2-knob-unit .dr2-state__dot {
        width: 8px;
        height: 8px;
    }

    /* Both readouts share one row; only the focused knob's shows. */
    .dr2-readout {
        grid-area: rd;
        max-width: none;
        min-height: 104px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        text-align: center;
    }

    .dr2-readout .dr2-readout__knob {
        display: block;
        margin: 0 0 2px;
        color: var(--muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .dr2-knob-unit:not(.is-focus) > .dr2-readout {
        display: none;
    }

    .dr2-readout h3 {
        margin-bottom: 4px;
        font-size: 1.25rem;
    }

    .dr2-readout p {
        font-size: 0.95rem;
        line-height: 1.45;
    }

    .dr2-lab__signal {
        gap: 4px 12px;
        margin-top: 16px;
    }

    .dr2-gallery__zoom {
        height: 62vh;
        padding: 16px 16px 48px;
    }

    /* The close-ups fill the tall phone stage instead of sitting in it as a
       thin band (Jesse, 2026-11-11). The whole-bass front and back
       (.is-rotated, turned on desktop only) are already the stage's shape and
       stay whole; the zoom button shows any photo in full. */
    .dr2-gallery__zoom img:not(.is-rotated) {
        object-fit: cover;
        object-position: var(--phone-focus, 50%) 50%;
        border-radius: 10px;
    }

    .dr2-gallery__nav {
        width: 40px;
        height: 40px;
        margin-top: -20px;
    }

    .dr2-gallery__nav--prev { left: 8px; }
    .dr2-gallery__nav--next { right: 8px; }

    .dr2-lightbox {
        padding: 72px 12px;
    }

    /* A whole-bass detail photo (phone_rotate) turns 90 degrees clockwise,
       headstock up, to fill an upright phone; held sideways it shows as
       shot. Other photos never turn (Jesse, 2026-11-11). */
    @media (orientation: portrait) {
        .dr2-lightbox img.is-turned {
            max-width: calc(100svh - 144px);
            max-height: calc(100vw - 24px);
            transform: rotate(90deg);
        }
    }

    .dr2-feature {
        padding: 56px 0;
    }

    .dr2-strip__track li {
        flex-basis: 86vw;
    }

    /* Square cards (Jesse, 2026-11-11): the 2.4:1 photos were 140px tall
       here. Each crops around its --phone-focus; a whole-bass shot turns
       90 degrees clockwise to stand upright. No scrollbar: the cards swipe. */
    .dr2-strip__track {
        scrollbar-width: none;
    }

    .dr2-strip__track::-webkit-scrollbar {
        display: none;
    }

    .dr2-strip__track img {
        aspect-ratio: 1;
        object-position: var(--phone-focus, 50%) 50%;
    }

    .dr2-strip__track li.is-turned img {
        object-fit: contain;
        transform: rotate(90deg);
    }

    .dr2-bar__name {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr2 *,
    .dr2 *::before,
    .dr2 *::after {
        animation: none !important;
        transition: none !important;
    }

    .dr2.is-ready .dr2-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   The site header and footer, dark on this page only
   ========================================================================== */

body:has(.dr2) .mms-chrome {
    --mms-ink: #e6e8ee;
    --mms-rule: #23272f;
    --mms-dark: #8a63ff;
    --mms-panel-bg: #12151c;
    --mms-panel-link: #aab0be;
    --mms-panel-title: #ffffff;
    --mms-focus: #ab8fff;
}

body:has(.dr2) .mms-strip,
body:has(.dr2) .mms-strip__countries {
    background: #050608;
    color: #aab0be;
}

body:has(.dr2) .mms-strip__countries a,
body:has(.dr2) .mms-strip__countries button,
body:has(.dr2) .mms-strip__country-toggle {
    color: #aab0be;
}

/* The brand logos are gray art for white: flip them light. */
body:has(.dr2) .mms-strip__brand img {
    filter: invert(1) brightness(1.15);
}

body:has(.dr2) .mms-header {
    background: #07080b;
    box-shadow: 0 1px 0 #1d2029, 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Black logo art, turned white with a faint two-LED glow. */
body:has(.dr2) .mms-header__logo img {
    filter: brightness(0) invert(1) drop-shadow(-3px 0 8px rgba(255, 90, 31, 0.35)) drop-shadow(3px 0 8px rgba(138, 99, 255, 0.35));
}

body:has(.dr2) .mms-nav__links a:hover {
    color: #fff;
}

body:has(.dr2) .mms-nav__mobile-head,
body:has(.dr2) .mms-nav__close {
    background: #0b0c10;
    color: #e6e8ee;
}

@media (max-width: 992px) {
    body:has(.dr2) .mms-nav__item > .mms-nav__link,
    body:has(.dr2) .mms-nav__control,
    body:has(.dr2) .mms-nav__panel {
        border-color: #1d2029 !important;
    }

    body:has(.dr2) .mms-nav__control > .mms-nav__toggle:not(.mms-nav__link) {
        border-left-color: #1d2029 !important;
    }
}

body:has(.dr2) .mms-footer {
    background: #0b0c10;
    color: #aab0be;
}

body:has(.dr2) .mms-footer__heading {
    color: #fff;
}

body:has(.dr2) .mms-footer a,
body:has(.dr2) .mms-footer__col button,
body:has(.dr2) .mms-footer__copyright {
    color: #aab0be;
}

body:has(.dr2) .mms-footer a:hover,
body:has(.dr2) .mms-footer__col button:hover {
    color: #fff;
}

body:has(.dr2) .mms-footer__social-tile,
body:has(.dr2) .mms-footer__social li:nth-child(even) .mms-footer__social-tile {
    background: #12151c;
    color: #aab0be;
    box-shadow: inset 0 0 0 1px #1d2029;
}

body:has(.dr2) .mms-footer__social li:nth-child(even) .mms-footer__social-tile {
    background: #161922;
}

body:has(.dr2) .mms-footer__social-tile:hover {
    color: #fff;
    box-shadow: inset 0 0 0 1px #262b37, inset 0 0 40px rgba(138, 99, 255, 0.18);
}

body:has(.dr2) .mms-footer__tile {
    background-color: #12151c;
    color: #e6e8ee;
    box-shadow: inset 0 0 0 1px #1d2029;
}

/* The store-locator map stays, dimmed under a dark wash; its label keeps a
   dark plate so it still reads. */
body:has(.dr2) .mms-footer__tile--locator {
    box-shadow: inset 0 0 0 999px rgba(7, 8, 11, 0.7);
}

/* A soft plate, not a black slab (Jesse, 2026-11-09): translucent over the
   already-dimmed map, rounded, with a hairline. White stays above 12:1 on it. */
body:has(.dr2) .mms-footer__tile-label {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(18, 21, 28, 0.6);
    color: #fff;
}

/* -- Sticky chrome on phones (Jesse, 2026-11-11) ---------------------------------
   The site header, section menu and buy bar held ~181px of a ~700px screen.
   The header slides away while the page scrolls down and comes back on any
   scroll up or when keyboard focus reaches it (the script's
   html.dr2-header-away); the section menu takes its place. Menu links and
   the bar's button keep 44px touch targets. */
@media (max-width: 767.98px) {
    body:has(.dr2) .mms-header {
        transition: transform 0.25s var(--ease, ease);
    }

    html.dr2-header-away body:has(.dr2) .mms-header {
        transform: translateY(-100%);
    }

    .dr2-subnav {
        transition: top 0.25s var(--ease, ease);
    }

    html.dr2-header-away .dr2-subnav {
        top: 0;
    }

    .dr2-subnav__inner {
        min-height: 44px;
    }

    .dr2-subnav ul a {
        padding: 13px 10px;
        font-size: 0.875rem;
        letter-spacing: 0.12em;
        line-height: 18px;
    }

    .dr2-subnav ul a.is-current::after {
        left: 10px;
        right: 10px;
        bottom: 5px;
    }

    .dr2-bar__inner {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .dr2-bar .dr2-btn--small {
        min-height: 44px;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    body:has(.dr2) .mms-header,
    .dr2-subnav {
        transition: none;
    }
}