/*
 * Digitlix v5 page furniture: the homepage sections and the shared
 * ink-band / paper-section system every template composes from.
 *
 * Loads after beat-store.css. Layout only -- colour and type come from the
 * tokens in theme.css, which this file never redefines. The store rows,
 * player, drawers and modal live in beat-store.css.
 */

/* ------------------------------------------------------------ Headings */

/* V10.7 section head: title left, one short copy line right, aligned to the
   baseline, with a hairline that draws in under the pair on reveal. */
.dlx-section-heading {
    display: grid;
    grid-template-columns: 1fr minmax(250px, 500px);
    gap: 56px;
    align-items: end;
    margin-bottom: 48px;
    position: relative;
}
.dlx-section-heading h2 {
    margin: 0;
    font-size: clamp(2.625rem, 5vw, 4.25rem);
    font-weight: 580;
    letter-spacing: -.047em;
    line-height: .99;
    max-width: 820px;
    text-wrap: pretty;
}
.dlx-section-heading > p {
    color: var(--dlx-muted);
    margin: 0;
    font-size: 1rem;
    line-height: 1.62;
    letter-spacing: -.006em;
    max-width: 500px;
    text-wrap: pretty;
}
.dlx-section-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -18px;
    height: 1px;
    background: rgba(11, 11, 13, .12);
    transition: right .72s .11s var(--dlx-ease);
}
.dlx-reveal.is-in.dlx-section-heading::after,
.dlx-section-heading.is-in::after { right: 0; }
.dlx-on-ink .dlx-section-heading::after { background: rgba(255, 255, 255, .16); }

/* The quiet text action: a line under a label. */
.dlx-line-button {
    border: 0;
    background: none;
    padding: 10px 0;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-md);
    border-bottom: 1px solid var(--dlx-border-strong);
    cursor: pointer;
    transition: color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear;
}
.dlx-line-button:hover { color: var(--dlx-text); border-color: currentColor; }

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

.dlx-hero {
    position: relative;
    /* The black stage. V10.4's refined pass: 82px under the grid, and the
       shell starts 38px below the header. */
    padding: 0 0 82px;
    background: #08080a;
    color: #f5f5f7;
    border: 0;
    overflow: hidden;
}
.dlx-hero > .dlx-shell { padding-top: 38px; }

.dlx-hero__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--dlx-space-md);
    padding: 0 0 17px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #a5a7ad;
    font-size: 0.6875rem;
    font-weight: 540;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.dlx-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.11fr) minmax(420px, .79fr);
    gap: 70px;
    align-items: center;
    min-height: 650px;
    padding-top: 58px;
}
.dlx-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 3;
}
/* Never let a child's min-content widen the column past the container. */
.dlx-hero__grid > * { min-width: 0; }

/* The hero kicker whispers under the meta bar. #848892 rather than the
   reference's #5d6470: same register on screen, but it clears contrast on
   the black stage. It was #777b82, which measured 4.33:1 against the stage
   and so missed 4.5:1 by a hair; this reads the same and clears it at 5.1. */
.dlx-hero .dlx-eyebrow { color: #848892; }

.dlx-hero__title {
    font-size: clamp(4.5rem, 8.45vw, 7.875rem);
    font-weight: 590;
    line-height: .875;
    letter-spacing: -.059em;
    margin: 0;
    max-width: 850px;
    text-wrap: balance;
}
/* Each headline line clips its riser; the padding/margin pair keeps the
   descender of one line from shaving the ascender of the next. On first
   paint the lines rise into place, one beat apart. */
.dlx-hero__line {
    display: block;
    overflow: clip;
    padding: .02em .035em .14em 0;
    margin: 0 -.035em -.105em 0;
}
.dlx-hero__line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
    .dlx-hero__line > span {
        transform: translateY(115%);
        animation: dlx-hero-line .68s var(--dlx-ease) forwards;
    }
    .dlx-hero__line:nth-child(2) > span { animation-delay: .05s; }
}
@keyframes dlx-hero-line { to { transform: none; } }
/* The second clause steps back to slate -- the prototype's only two-tone
   headline, and the reason the line reads as an instruction after a promise. */
.dlx-hero__title em,
.dlx-hero__title .dlx-hero__title-soft {
    color: #aeb6c3;
    font-style: normal;
}

.dlx-hero__sub {
    max-width: 590px;
    color: #bec0c5;
    font-size: 1.125rem;
    line-height: 1.58;
    letter-spacing: -.012em;
    margin: 31px 0 30px;
}

.dlx-hero__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
}

.dlx-hero__proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    margin-top: 44px;
    padding-top: 17px;
}
.dlx-hero__proof > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.dlx-hero__proof strong {
    font-size: 0.75rem;
    font-weight: 570;
    color: #e9e9eb;
    letter-spacing: -.01em;
}
.dlx-hero__proof span {
    font-size: 0.6875rem;
    font-weight: 540;
    color: #a3a5ab;
}

/*
 * The featured release: a physical record object on the black stage.
 * V10.4 proportions (576px, radius 13) with V10.6's album-sleeve response --
 * on hover the artwork shifts up-left off a hard offset shadow.
 */
.dlx-featured-card {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 576px;
    background: #15171b;
    color: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 13px;
    box-shadow: 0 28px 76px rgba(0, 0, 0, .31);
    overflow: hidden;
    padding: 0;
    width: 100%;
    justify-self: stretch;
    isolation: isolate;
    transition: border-color .3s ease, box-shadow .4s var(--dlx-ease);
}
.dlx-featured-card:hover {
    box-shadow: 0 32px 88px rgba(0, 0, 0, .36);
    border-color: rgba(255, 255, 255, .21);
}

.dlx-featured-card__art {
    position: relative;
    overflow: hidden;
    min-height: 388px;
    background: #1a1d22;
    isolation: isolate;
    transition: transform .46s var(--dlx-ease), box-shadow .46s var(--dlx-ease);
}
.dlx-featured-card__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (hover: hover) {
    .dlx-featured-card:hover .dlx-featured-card__art {
        transform: translate3d(-3px, -3px, 0);
        box-shadow: 8px 10px 0 rgba(0, 0, 0, .18);
    }
}

/* The quiet sampler playhead: a hairline that walks the sleeve while the
   featured beat is the one playing. stage.js publishes the position. */
.dlx-featured-card__playhead {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: var(--dlx-feature-progress, 0%);
    width: 1px;
    background: rgba(236, 239, 243, .58);
    opacity: 0;
    pointer-events: none;
    transition: left .34s linear, opacity .18s ease;
    mix-blend-mode: screen;
}
.dlx-featured-card__playhead::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(238, 241, 245, .72);
    border-radius: 50%;
    background: #181a1f;
    transform: translateY(12px);
}
.dlx-featured-card__playhead::after {
    content: "PLAY";
    position: absolute;
    bottom: 14px;
    left: 8px;
    color: rgba(242, 244, 247, .72);
    font: 560 0.625rem/1 var(--dlx-font);
    letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.dlx-featured-card.is-playing .dlx-featured-card__playhead { opacity: .78; }

/* Five measure bars, top right of the sleeve. Live only while playing. */
.dlx-featured-card__bars {
    position: absolute;
    z-index: 3;
    right: 7%;
    top: 8%;
    display: grid;
    gap: 7px;
    width: 25%;
}
.dlx-featured-card__bars i {
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.dlx-featured-card__bars i:nth-child(2) { width: 72%; }
.dlx-featured-card__bars i:nth-child(3) { width: 48%; }
.dlx-featured-card__bars i:nth-child(4) { width: 88%; }
.dlx-featured-card__bars i:nth-child(5) { width: 59%; }
.dlx-featured-card.is-playing .dlx-featured-card__bars i {
    animation: dlx-deck-bars .72s ease-in-out infinite alternate;
}
.dlx-featured-card.is-playing .dlx-featured-card__bars i:nth-child(2) { animation-delay: .11s; }
.dlx-featured-card.is-playing .dlx-featured-card__bars i:nth-child(3) { animation-delay: .165s; }
.dlx-featured-card.is-playing .dlx-featured-card__bars i:nth-child(4) { animation-delay: .22s; }
.dlx-featured-card.is-playing .dlx-featured-card__bars i:nth-child(5) { animation-delay: .275s; }
@keyframes dlx-deck-bars { to { transform: scaleY(.55); opacity: .55; } }

/* The pressing stamp. Text-shadow is ours: the reference stamps flat art,
   this one has to hold over a real photograph. */
.dlx-featured-card__stamp {
    position: absolute;
    z-index: 3;
    right: 7%;
    bottom: 8%;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(255, 255, 255, .28);
    display: grid;
    place-items: center;
    text-align: center;
    color: #d9dade;
    font-size: 0.5rem;
    font-weight: 650;
    letter-spacing: .14em;
    line-height: 1.5;
    transform: rotate(-4deg);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.dlx-featured-card.is-playing .dlx-featured-card__stamp::after {
    content: "LIVE";
    display: block;
    margin-top: 8px;
    color: #c7cfdb;
    font: 650 0.625rem/1 var(--dlx-font);
    letter-spacing: .16em; font-variant-numeric: tabular-nums;
}

.dlx-featured-card__play {
    position: absolute;
    z-index: 5;
    left: 24px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #f5f5f7;
    color: #0b0b0d;
    display: grid;
    place-items: center;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .24);
    transition: transform .28s var(--dlx-ease), background .2s ease, box-shadow .28s ease;
}
.dlx-featured-card__play:hover { transform: scale(1.025); background: #fff; }
.dlx-featured-card__play:active { transform: scale(.96); }
.dlx-featured-card.is-playing .dlx-featured-card__play { box-shadow: 0 14px 34px rgba(0, 0, 0, .34); }

/* The cue flash: a single light sweep when a record catches. */
.dlx-featured-card.dlx-cue-flash .dlx-featured-card__art::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .13) 49%, transparent 62%);
    transform: translateX(-120%);
    animation: dlx-sleeve-cue .62s var(--dlx-ease) both;
}
@keyframes dlx-sleeve-cue { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
    .dlx-featured-card.dlx-cue-flash .dlx-featured-card__art::after { animation: none; content: none; }
}

.dlx-featured-card__info {
    position: relative;
    background: #121419;
    padding: 23px 25px 25px;
}
.dlx-featured-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}
.dlx-featured-card__top > div { min-width: 0; }
.dlx-featured-card__kicker { margin-bottom: 7px; }
.dlx-featured-card__title {
    font-size: 2.4375rem;
    font-weight: 580;
    letter-spacing: -.045em;
    line-height: 1.04;
    margin: 0;
}
.dlx-featured-card__title a { color: inherit; }
.dlx-featured-card__style {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    line-height: 1.38;
    color: #a9abb1;
}
.dlx-featured-card__price { text-align: right; flex: none; }
.dlx-featured-card__price small {
    display: block;
    text-transform: uppercase;
    letter-spacing: .095em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94969d;
}
.dlx-featured-card__price strong { font-size: 1.3125rem; font-weight: 600; }

.dlx-featured-card__wave {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 14px;
    overflow: hidden;
    opacity: .7;
}
.dlx-featured-card__wave i {
    display: block;
    width: 2px;
    flex: none;
    background: #707784;
    transform-origin: center;
}
.dlx-featured-card.is-playing .dlx-featured-card__wave i,
.dlx-featured-card__wave.is-playing i {
    background: #b8c0cc;
    animation: dlx-wave-play .68s ease-in-out infinite alternate;
}
.dlx-featured-card.is-playing .dlx-featured-card__wave i:nth-child(3n),
.dlx-featured-card__wave.is-playing i:nth-child(3n) { animation-delay: -.25s; }
.dlx-featured-card.is-playing .dlx-featured-card__wave i:nth-child(5n),
.dlx-featured-card__wave.is-playing i:nth-child(5n) { animation-delay: -.45s; }
@keyframes dlx-wave-play {
    from { transform: scaleY(.35); }
    to { transform: scaleY(1.18); }
}

.dlx-featured-card__spec {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 17px;
    padding-top: 15px;
    /* Reserve the right end of the strip for the Add action, which sits on
       the same line but outside this element (stage.js owns its innerHTML). */
    padding-right: 64px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: #a4a6ad;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
/* stage.js can swap a dl of facts in here; read the same either way. */
.dlx-featured-card__spec div { display: flex; gap: 6px; }
.dlx-featured-card__spec dt { display: none; }
.dlx-featured-card__spec dd { margin: 0; }

/* Add: one quiet mono action at the right end of the spec strip, opening the
   same license chooser the player uses. Positioned outside the spec element
   because stage.js replaces that element's contents on track change. */
.dlx-featured-card__buy {
    position: absolute;
    right: 25px;
    bottom: 25px;
    border: 0;
    background: none;
    padding: 6px 0 0;
    color: #d7d7db;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--dlx-dur-fast) ease; font-variant-numeric: tabular-nums;
}
.dlx-featured-card__buy:hover { color: #fff; }

/*
 * Store at a glance: the manifest strip. It used to whisper -- 12px labels
 * at .faint over ink, values only 22px against 17px body copy, everything
 * vertically centred so nothing shared a line with anything else. Now the
 * cells are engineered: mono caps label pinned to the top, the figure in
 * display weight, the descriptor seated on a common baseline at the bottom,
 * and the hairlines read against the ink.
 */
/*
 * The manifest strip now lives inside the hero's left column rather than as a
 * full-width band under the whole row. Two things follow: the hero stops
 * being two stacked blocks and becomes one asymmetric composition, and the
 * surplus height left over from a tall card is filled with the facts a
 * first-time visitor actually wants. margin-top:auto is what lands this strip
 * on the same bottom line as the card.
 */
/*
 * The hero search, as the prototype draws it: a bare rule with the word
 * "Search" at its right end. No box, no glyph -- at this scale the underline
 * and the placeholder carry it, and a bordered field would compete with the
 * headline directly above.
 */
.dlx-hero-search {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    max-width: 640px;
    margin: 2px 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .34);
    transition: border-color .22s ease;
}
.dlx-hero-search:focus-within { border-bottom-color: rgba(255, 255, 255, .9); }
/* A second rule draws across the first on focus. */
.dlx-hero-search::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -1px;
    height: 1px;
    background: #f5f5f7;
    transition: right .42s var(--dlx-ease);
}
.dlx-hero-search:focus-within::after { right: 0; }
.dlx-hero-search input {
    width: 100%;
    min-height: 44px;
    background: none;
    border: 0;
    outline: 0;
    padding: 15px 0 13px;
    color: #f5f5f7;
    font-size: 1rem;
    letter-spacing: -.015em;
}
.dlx-hero-search input::placeholder { color: #a7aab1; opacity: 1; }
.dlx-hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.dlx-hero-search button {
    background: none;
    border: 0;
    padding: 0 0 0 24px;
    color: #e4e5e8;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -.012em;
    cursor: pointer;
    transition: color .18s ease, transform .22s var(--dlx-ease);
}
.dlx-hero-search button:hover { color: #cbd2dc; }
.dlx-hero-search:focus-within button { transform: translateX(2px); }
.dlx-hero-search button:active { transform: scale(.97); }

/* Quick search: plain words on a line, not pills. */
.dlx-hero-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 2px 0 24px;
    max-width: 640px;
    color: #9fa3aa;
    font-size: 0.6875rem;
}
.dlx-hero-quick__label {
    margin-right: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dlx-hero-quick__chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 4px 0;
    margin-right: 9px;
    color: #c9ccd1;
    font-size: 0.75rem;
    letter-spacing: -.006em;
    cursor: pointer;
    transition: color .18s, border-color .18s;
}
.dlx-hero-quick__chip:hover,
.dlx-hero-quick__chip:focus-visible { color: #fff; border-color: #fff; }
.dlx-hero-quick__chip.is-active { color: #fff; border-color: #fff; }
.dlx-hero-quick__chip:active { transform: scale(.985); }

/* Buttons, transcribed: 46px, 8px radius, a 1px lift on hover. */
.dlx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 580;
    letter-spacing: -.012em;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) ease, color var(--dlx-dur-fast) ease,
                border-color var(--dlx-dur-fast) ease, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-btn:hover { transform: translateY(-1px); }
.dlx-btn:active { transform: scale(.985); }
.dlx-btn--light { background: #f5f5f7; color: #0b0b0d; border-color: #f5f5f7; }
.dlx-btn--light:hover { background: #fff; border-color: #fff; }
.dlx-btn--ghost { color: #dadade; border-color: rgba(255, 255, 255, .22); background: none; }
.dlx-btn--ghost:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .32); }
.dlx-btn--dark { background: #111; color: #fff; border-color: #111; }
.dlx-btn--dark:hover { background: #222; border-color: #222; }
.dlx-btn__glyph { font-size: 0.625rem; margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .dlx-btn:hover { transform: none; } }

/* ----------------------------------------------------------- Signal rail */

/* Four store facts on ink, directly under the hero. */
.dlx-signal-rail {
    background: #08080a;
    color: #f5f5f7;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.dlx-signal-rail__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 92px;
}
.dlx-signal-rail__item {
    padding: 18px 24px;
    border-right: 1px solid rgba(255, 255, 255, .10);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dlx-signal-rail__item:first-child { padding-left: 0; }
.dlx-signal-rail__item:last-child { border-right: 0; }
.dlx-signal-rail__item small {
    font-size: 0.6875rem;
    font-weight: 560;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: #9ea1a8;
}
.dlx-signal-rail__item strong {
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: -.018em;
    margin-top: 5px;
    color: #e7e7ea;
}

/* ------------------------------------------------------ Paper sections */

.dlx-store-preview,
.dlx-license-guide,
.dlx-guides,
.dlx-faq { padding-block: var(--dlx-section-pad); }

/* V10.7's per-section rhythm: each block owns its own pair. */
.dlx-store-preview { padding: 106px 0 118px; }
.dlx-license-guide { padding: 112px 0 116px; }
.dlx-faq { padding: 108px 0 114px; }

/* ------------------------------------------------------- Store preview */

/* One centred door to the full store, under the homepage catalogue. */
.dlx-store-more {
    display: flex;
    justify-content: center;
    padding-top: 34px;
}
.dlx-store-more .dlx-btn span { margin-left: 8px; }

/* ------------------------------------------------- Curated band (ink) */

/* ---------------------------------------------------------- Studio band */

/*
 * The Studio's advertisement, in the ink slot the Most Played shelf held.
 *
 * Built from the workspace's own furniture -- ruler, lanes, clips, playhead
 * -- at homepage scale, so it advertises the product by showing it rather
 * than by decorating around it. Everything is flat: hairlines, no cards, no
 * gradients, no glow, and the only motion is the button's existing hover.
 */
.dlx-studio-band {
    background: #0d0e10;
    color: #f5f5f7;
    padding: 108px 0 112px;
}
.dlx-studio-band .dlx-section-heading > p { color: #b4b6bd; }
/* The block below owns the rule; the heading's would be a second line 48px
   above it. (Other sections keep theirs -- they were not in scope.) */
.dlx-studio-band .dlx-section-heading::after { content: none; }

.dlx-studio-band__body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 0;
    /*
     * This block draws its own top edge, and it has to: the column divider
     * between the preview and the steps must MEET something, or it hangs in
     * space 39px above the content. So the single rule under the headline is
     * this border, and the heading's own rule is suppressed just below --
     * one line, with proper corners.
     */
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/* ---- the workspace illustration ---- */
/* Centred in its column: the steps beside it are taller, and a timeline
   pinned to the top left a dead half-column underneath. */
.dlx-studio-band__stage {
    position: relative;
    padding: 30px 34px 30px 0;
    border-right: 1px solid rgba(255, 255, 255, .13);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* The picture is a picture: there is nothing in it worth selecting, and
       sweeping a cursor across it should not paint a selection. */
    -webkit-user-select: none;
    user-select: none;
}
/* Framed like the workspace's own surfaces, so it reads as a window into the
   Studio rather than a diagram drawn on the band. */
.dlx-studio-band__frame {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 3px;
    background: #101114;
    overflow: hidden;
}
.dlx-studio-band__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: #141519;
}
.dlx-studio-band__app { font-size: 0.65625rem; font-weight: 550; color: #b7bac1; letter-spacing: -.004em; }
.dlx-studio-band__project {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 0.65625rem;
    font-weight: 500;
    color: #83868d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dlx-studio-band__project b {
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #848892;
    font-variant-numeric: tabular-nums;
}
.dlx-studio-band__empty {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    color: #848892;
}
.dlx-studio-band__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.625rem;
    font-weight: 500;
    color: #83868d;
    white-space: nowrap;
}
.dlx-studio-band__dot { width: 6px; height: 6px; border-radius: 50%; background: #5f6670; }
.dlx-studio-band__status b { position: relative; display: inline-block; font-weight: 500; }
.dlx-studio-band__status .is-saved { position: absolute; left: 0; top: 0; }
/* Static truth: the session is saved. The scene overrides this while it runs. */
.dlx-studio-band__status .is-rec { opacity: 0; visibility: hidden; }

/*
 * The scene. When the band scrolls into view, theme.js puts .is-live on the
 * stage and the preview performs ONE session, then settles into the exact
 * static picture: the playhead makes a single pass; the beat brightens
 * behind it the way the player paints played audio; the Verse records
 * itself bar by bar under a red Recording state; the Hook snaps in like a
 * drag landing on the grid; the slice flashes the workspace's own cutline
 * and the tail nudges apart; the ad-lib pops in; the empty lane breathes
 * once; the chrome flips to Saved. It never loops, and without JavaScript
 * or with reduced motion none of it exists.
 */
@media (prefers-reduced-motion: no-preference) {
    .dlx-studio-band__stage.is-live .dlx-studio-band__playhead {
        animation: dlx-band-sweep 8s linear .4s both;
    }
    @keyframes dlx-band-sweep {
        0%    { left: calc(92px + (100% - 92px) * .02); opacity: 1; }
        87.5% { left: calc(92px + (100% - 92px) * .96); opacity: 1; }
        89.4% { left: calc(92px + (100% - 92px) * .96); opacity: 1; }
        93%   { left: calc(92px + (100% - 92px) * .96); opacity: 0; }
        94%   { left: calc(92px + (100% - 92px) * .43); opacity: 0; }
        100%  { left: calc(92px + (100% - 92px) * .43); opacity: 1; }
    }
    /* Unplayed audio sits behind a veil that retreats with the playhead. */
    .dlx-studio-band__stage.is-live .dlx-studio-band__clip.is-beat::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(13, 14, 16, .55);
        animation: dlx-band-veil 7s linear .4s both, dlx-band-veil-out .35s ease .4s both;
        animation-delay: .4s, 7.15s;
    }
    @keyframes dlx-band-veil { from { left: 2%; } to { left: 96%; } }
    @keyframes dlx-band-veil-out { to { opacity: 0; } }

    /* The Verse records itself: bars rise in order under the playhead. */
    .dlx-studio-band__stage.is-live .is-tracking i {
        animation: dlx-band-bar .34s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(1.1s + var(--i) * 52ms);
    }
    .dlx-studio-band__stage.is-live .is-slice-tail i {
        animation: dlx-band-bar .3s cubic-bezier(.2, .8, .2, 1) both;
        animation-delay: calc(2.75s + var(--i) * 45ms);
    }
    /* Lands on the bars' true resting opacity, so the played scene and the
       static picture are the same picture. */
    @keyframes dlx-band-bar {
        from { transform: scaleY(.08); opacity: .15; }
        to   { transform: none; opacity: .85; }
    }

    /* The Hook was arranged, not recorded: it arrives whole and snaps. */
    .dlx-studio-band__stage.is-live .is-arranged {
        animation: dlx-band-snap .5s cubic-bezier(.3, 1.4, .4, 1) 3.8s both;
    }
    @keyframes dlx-band-snap {
        0%   { opacity: 0; transform: translateX(-18px); }
        70%  { opacity: 1; transform: translateX(3px); }
        100% { opacity: 1; transform: none; }
    }

    /* The slice: the workspace's cutline flashes, the tail nudges apart. */
    .dlx-studio-band__stage.is-live .is-slice-tail {
        animation: dlx-band-slide .45s cubic-bezier(.2, .8, .2, 1) 4.65s both;
    }
    @keyframes dlx-band-slide { from { transform: translateX(-9px); } to { transform: none; } }
    .dlx-studio-band__stage.is-live .is-slice-tail::before {
        content: "";
        position: absolute;
        left: -3px;
        top: -3px;
        bottom: -3px;
        width: 1px;
        background: #d7a8a8;
        opacity: 0;
        z-index: 2;
        animation: dlx-band-cut .6s ease 4.5s both;
    }
    @keyframes dlx-band-cut { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

    .dlx-studio-band__stage.is-live .is-pop {
        animation: dlx-band-pop .4s cubic-bezier(.2, .8, .2, 1) 4.8s both;
    }
    @keyframes dlx-band-pop {
        from { opacity: 0; transform: scale(.92); }
        to   { opacity: 1; transform: none; }
    }

    /* The empty lane breathes once, an invitation rather than a beacon. */
    .dlx-studio-band__stage.is-live .dlx-studio-band__empty {
        animation: dlx-band-hint 1.1s ease-in-out 6s 1;
    }
    @keyframes dlx-band-hint { 50% { color: #9aa1aa; } }

    /* The narrator: red pulse while recording, Saved when the pass ends. */
    .dlx-studio-band__stage.is-live .dlx-studio-band__dot {
        animation: dlx-band-rec 1.26s ease-in-out .4s 5, dlx-band-dot-done .4s ease 6.7s both;
    }
    @keyframes dlx-band-rec {
        0%, 100% { background: #ad5353; box-shadow: 0 0 0 0 rgba(173, 83, 83, .35); }
        50%      { background: #ad5353; box-shadow: 0 0 0 4px rgba(173, 83, 83, 0); }
    }
    @keyframes dlx-band-dot-done { from { background: #ad5353; } to { background: #5f6670; } }
    .dlx-studio-band__stage.is-live .dlx-studio-band__status .is-rec {
        visibility: visible;
        animation: dlx-band-rec-label 7.1s linear both;
    }
    @keyframes dlx-band-rec-label {
        0%, 97% { opacity: 1; }
        100%    { opacity: 0; visibility: hidden; }
    }
    .dlx-studio-band__stage.is-live .dlx-studio-band__status .is-saved {
        animation: dlx-band-saved-label .35s ease 7.1s both;
    }
    @keyframes dlx-band-saved-label { from { opacity: 0; } to { opacity: 1; } }
}
.dlx-studio-band__ruler {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-left: 92px;
    background: #121317;
}
.dlx-studio-band__ruler span {
    padding: 0 0 7px 6px;
    border-left: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    font-weight: 500;
    color: #848892; font-variant-numeric: tabular-nums;
}
.dlx-studio-band__lanes { display: grid; position: relative; }
.dlx-studio-band__lane {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    min-height: 78px;
}
.dlx-studio-band__lane:last-child { border-bottom: 0; }
.dlx-studio-band__name {
    font-size: 0.6875rem;
    font-weight: 550;
    color: #b7bac1;
    letter-spacing: -.004em;
    padding: 0 12px;
}
.dlx-studio-band__name b {
    display: block;
    margin-top: 3px;
    font-family: var(--dlx-font);
    font-size: 0.625rem;
    font-weight: 500;
    color: #848892; font-variant-numeric: tabular-nums;
}
.dlx-studio-band__track { position: relative; height: 56px; min-width: 0; }
.dlx-studio-band__clip {
    position: absolute;
    top: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    overflow: hidden;
    border: 1px solid #574b59;
    border-radius: 2px;
    background: #2b282e;
}
.dlx-studio-band__clip.is-beat { border-color: #465360; background: #242b33; }
.dlx-studio-band__clip i {
    flex: 1 1 2px;
    max-width: 3px;
    height: var(--h, 50%);
    background: #a58ba3;
    border-radius: 1px;
    opacity: .85;
}
.dlx-studio-band__clip.is-beat i { background: #8492a2; opacity: .7; }
.dlx-studio-band__clip em {
    position: absolute;
    left: 7px;
    top: 5px;
    font-style: normal;
    font-size: 0.5625rem;
    font-weight: 550;
    color: #d8dce2;
    letter-spacing: -.002em;
}
.dlx-studio-band__clip em ~ i { align-self: flex-end; height: calc(var(--h, 50%) * .62); }
/* Spans the tracks it belongs to, with its marker poking up into the
   ruler -- it used to run on into the empty space below the last lane. */
.dlx-studio-band__playhead {
    position: absolute;
    top: -13px;
    bottom: 0;
    left: calc(92px + (100% - 92px) * .43);
    width: 1px;
    background: rgba(215, 220, 227, .75);
}
.dlx-studio-band__playhead::before {
    content: "";
    position: absolute;
    top: 0;
    left: -4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(215, 220, 227, .75);
}

/* ---- the three steps and the way in ---- */
.dlx-studio-band__copy {
    padding: 30px 0 30px 38px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dlx-studio-band__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}
.dlx-studio-band__steps li {
    display: grid;
    row-gap: 5px;
}
.dlx-studio-band__steps strong {
    font-size: 0.9375rem;
    font-weight: 570;
    letter-spacing: -.014em;
}
.dlx-studio-band__steps p {
    margin: 0;
    color: #a9acb3;
    font-size: 0.8125rem;
    line-height: 1.5;
}
.dlx-studio-band__actions {
    margin-top: auto;
    padding-top: 30px;
}
.dlx-studio-band__actions .dlx-btn { width: fit-content; }
.dlx-studio-band__note {
    margin: 14px 0 0;
    max-width: 40ch;
    color: #83868d;
    font-size: 0.71875rem;
    line-height: 1.5;
}
@media (max-width: 560px) {
    /* The chrome is a tight row on a phone; the record and its tempo win. */
    .dlx-studio-band__status { display: none; }
}


/* ----------------------------------------------------- License guide */

/* V10.7 licensing: a flat comparison grid, no cards. The featured tier
   (Trackout) takes a cool wash and a 2px top rule; nothing floats. */
.dlx-license-compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
    border-top: 1px solid rgba(11, 11, 13, .25);
    border-bottom: 1px solid rgba(11, 11, 13, .25);
}
.dlx-license-compare article {
    position: relative;
    padding: 32px 30px 34px;
    border-right: 1px solid var(--dlx-border);
    min-height: 438px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background .28s ease;
}
.dlx-license-compare article:first-child { padding-left: 0; }
.dlx-license-compare article:last-child { border-right: 0; }
.dlx-license-compare article.is-featured { background: #eef0f3; padding-left: 30px; }
.dlx-license-compare article.is-featured::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: #68768a;
}
.dlx-license-compare__flag {
    margin: 0;
    font-size: 0.5625rem;
    font-weight: 650;
    letter-spacing: .095em;
    text-transform: uppercase;
    color: #626a77;
}
.dlx-license-compare h3 {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -.032em;
    line-height: 1.08;
    margin: 13px 0 6px;
}
.dlx-license-compare strong { font-size: 2.1875rem; font-weight: 620; letter-spacing: -.038em; }
/* No live price to show. It steps down to body scale and muted, so the card
   still reads as a tier rather than as a number that failed to load. */
.dlx-license-compare strong.is-unpriced,
.dlx-license-card__price.is-unpriced {
    font-size: var(--dlx-fs-md);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--dlx-muted);
}
.dlx-license-compare strong .woocommerce-Price-amount,
.dlx-license-compare strong span { display: inline; font: inherit; }
.dlx-license-compare p {
    color: #606269;
    font-size: 0.8125rem;
    line-height: 1.58;
    max-width: 360px;
    text-wrap: pretty;
}
.dlx-license-compare__files {
    font-size: 0.75rem;
    font-weight: 560;
    color: #45464c;
}
.dlx-license-compare__features {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 11px 0 28px;
    padding: 20px 0 0;
    border-top: 1px solid var(--dlx-border);
    font-size: 0.75rem;
    line-height: 1.38;
}
.dlx-license-compare__features li { padding: 0; position: relative; padding-left: 20px; }
.dlx-license-compare__features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: #667387;
}
/*
 * The three tier buttons, as one system.
 *
 * The background is stated rather than left to the cascade. The exclusive
 * tier's CTA used to be a <button> sitting between two <a>s, and with no
 * background of its own it took the browser's own ButtonFace grey -- so the
 * top tier was the one that looked like a disabled control, and the row read
 * as three unrelated things. Every tier is an <a> now and every tier says
 * what it is filled with.
 */
.dlx-license-compare__cta {
    margin-top: auto;
    min-height: 45px;
    border-radius: 7px;
    border-color: var(--dlx-border-strong);
    background: transparent;
    color: var(--dlx-text);
}
.dlx-license-compare__cta:hover { background: rgba(11, 11, 13, .05); }
.dlx-license-compare__cta.dlx-btn--dark { background: #111; border-color: #111; color: #fff; }
.dlx-license-compare__cta.dlx-btn--dark:hover { background: #222; }

/*
 * Exclusive gets an ink edge instead of a hairline: a clear step above the
 * entry lease, and deliberately still an outline, because the recommended
 * tier keeps the only filled button on the row. Hover inverts it, which is
 * the strongest thing an outline can do without becoming a second solid.
 */
.dlx-license-compare article.is-exclusive .dlx-license-compare__cta {
    border-color: var(--dlx-text);
    font-weight: 620;
}
.dlx-license-compare article.is-exclusive .dlx-license-compare__cta:hover {
    background: var(--dlx-text);
    border-color: var(--dlx-text);
    color: var(--dlx-bg);
}

/* -------------------------------------------------- Recently played */

/* Today's cut: one beat, same for everyone, new tomorrow. A slim manifest
   row above the catalogue -- art, name, spec, one way in -- framed by
   hairlines rather than boxed, so it reads as the day's entry in a ledger. */
.dlx-daily {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0 18px;
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
    margin-bottom: var(--dlx-space-2xl);
}
.dlx-daily__art { width: 76px; height: 76px; object-fit: cover; flex: none; }
.dlx-daily__body { min-width: 0; flex: 1; }
.dlx-daily__kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    letter-spacing: var(--dlx-track-caps);
    color: var(--dlx-subtle);
}
.dlx-daily__kicker i {
    width: 7px; height: 7px;
    border-radius: var(--dlx-radius-pill);
    background: var(--dlx-signal);
    flex: none;
}
.dlx-daily__kicker span { font-family: var(--dlx-font); letter-spacing: 0; color: var(--dlx-faint); font-variant-numeric: tabular-nums;
}
.dlx-daily__title {
    margin: 0 0 3px;
    font-size: var(--dlx-fs-h4);
    letter-spacing: var(--dlx-track-display);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dlx-daily__title a { color: inherit; }
.dlx-daily__title a:hover { color: var(--dlx-signal-deep); }
.dlx-daily__spec {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    font-family: var(--dlx-font);
    font-size: 0.6875rem;
    color: var(--dlx-muted); font-variant-numeric: tabular-nums;
}
.dlx-daily__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.dlx-daily__play {
    width: 46px; height: 46px;
    border: 1px solid var(--dlx-border-strong);
    background: none;
    color: var(--dlx-text);
    font-size: 0.8125rem;
    display: grid;
    place-items: center;
    transition: background var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear;
}
.dlx-daily__play:hover,
.dlx-daily__play.is-playing { background: var(--dlx-signal); border-color: var(--dlx-signal); color: #fff; }
@media (max-width: 620px) {
    .dlx-daily { flex-wrap: wrap; }
    .dlx-daily__body { flex: 1 1 calc(100% - 94px); }
    .dlx-daily__actions { margin-left: 94px; }
}

/* ------------------------------------------- Your listening history */
/* Two quiet bands under the catalogue, both filled by theme.js from the
   listening log and hidden until they have something to show. The history
   is a numbered list -- the beat, when, play, license. The recommendations
   are three records on a shelf. Nothing here calls itself clever. */
.dlx-listening-band { padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--dlx-border); }
.dlx-listening-band[hidden] { display: none; }
.dlx-listening-band .dlx-release__buy-head { margin-bottom: clamp(18px, 2.5vw, 26px); }
.dlx-history__clear { border: 0; background: none; font-family: inherit; cursor: pointer; }

.dlx-history__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dlx-border); }
.dlx-history__row {
    display: grid;
    grid-template-columns: 48px 2.25rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 8px 0;
    border-bottom: 1px solid var(--dlx-border);
}
.dlx-history__play {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--dlx-surface);
    padding: 0;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08);
}
.dlx-history__play img,
.dlx-history__play i { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-history__key {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(11, 11, 13, .45);
    color: #fff;
    font-size: .7rem;
    opacity: 0;
    transition: opacity var(--dlx-dur-fast) linear;
}
.dlx-history__play:hover .dlx-history__key,
.dlx-history__play:focus-visible .dlx-history__key,
.dlx-history__row.is-playing .dlx-history__key { opacity: 1; }
.dlx-history__row.is-playing .dlx-history__key { background: rgba(88, 101, 121, .78); }
.dlx-history__play:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 2px; }
.dlx-history__n { color: var(--dlx-faint); font-size: var(--dlx-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.dlx-history__id { display: grid; min-width: 0; gap: 2px; }
.dlx-history__id a,
.dlx-history__id strong { color: var(--dlx-text); font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-history__id a:hover { color: var(--dlx-signal-deep); }
.dlx-history__id span { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-history__id em { font-style: normal; color: var(--dlx-signal-deep); font-weight: 600; margin-left: 6px; }
.dlx-history__row.is-playing .dlx-history__id a { color: var(--dlx-signal-deep); }
.dlx-history__when { color: var(--dlx-subtle); font-size: var(--dlx-fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dlx-history__license {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: transparent;
    color: var(--dlx-text);
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear;
}
.dlx-history__license:hover { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }

.dlx-you__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
.dlx-you-card { display: flex; flex-direction: column; min-width: 0; }
.dlx-you-card__art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface);
    box-shadow: 0 14px 34px -18px rgba(10, 13, 18, .4), 0 1px 3px rgba(10, 13, 18, .06);
}
.dlx-you-card__art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08); pointer-events: none; }
.dlx-you-card__art a { display: block; height: 100%; }
.dlx-you-card__art img,
.dlx-you-card__art i { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dlx-dur-slow) var(--dlx-ease-out); }
.dlx-you-card:hover .dlx-you-card__art img { transform: scale(1.025); }
.dlx-you-card__play {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 11, 13, .82);
    color: #fff;
    padding: 0 0 0 2px;
    font-size: .7rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: background var(--dlx-dur-fast) linear, transform var(--dlx-dur-fast) var(--dlx-ease);
}
.dlx-you-card__play:hover { background: var(--dlx-text); transform: scale(1.06); }
.dlx-you-card__play.is-playing { background: var(--dlx-signal-deep); }
.dlx-you-card__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dlx-you-card__body { flex: 1 1 auto; padding-top: 14px; }
.dlx-you-card__body h3 { margin: 0 0 3px; font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }
.dlx-you-card__body h3 a { color: var(--dlx-text); text-decoration: none; }
.dlx-you-card__body h3 a:hover { color: var(--dlx-signal-deep); }
.dlx-you-card__body p { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.45; }
.dlx-you-card__meta { display: block; margin-top: 8px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-variant-numeric: tabular-nums; }
.dlx-you-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dlx-border-soft); }
.dlx-you-card__price { font-size: var(--dlx-fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.dlx-you-card__price span { color: var(--dlx-muted); font-weight: 500; }
.dlx-you-card__license {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    border: 1px solid var(--dlx-border-strong);
    border-radius: var(--dlx-radius-control);
    background: transparent;
    color: var(--dlx-text);
    padding: 0 14px;
    font-family: inherit;
    font-size: var(--dlx-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear;
}
.dlx-you-card__license:hover { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }

@media (max-width: 900px) {
    .dlx-you__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dlx-you-card:nth-child(3) { display: none; }
    .dlx-history__row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
    .dlx-history__play { width: 44px; height: 44px; }
    .dlx-history__n,
    .dlx-history__when { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-you-card__art img,
    .dlx-you-card__play,
    .dlx-history__key { transition: none; }
    .dlx-you-card:hover .dlx-you-card__art img { transform: none; }
}

/* ------------------------------------------------------------ Credits */
/* Records made on these beats: a row of sleeves, each a link to the song.
   Same shelf vocabulary as everything else on the page -- the object, the
   words under it, a hairline -- with Spotify's mark on the sleeve so what
   the link does is never a surprise. */
.dlx-credits { padding-block: var(--dlx-section-pad); border-top: 1px solid var(--dlx-border); }
.dlx-credits__head { margin-bottom: clamp(22px, 3vw, 32px); }
/* One panel per artist: their picture, their name, how many records. The
   track cards this replaced listed songs; the credit is the artist. */
.dlx-credits__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.dlx-credits__grid--1 { max-width: 460px; }
.dlx-credits__grid--2 { max-width: 940px; }
.dlx-artist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    border: 1px solid var(--dlx-border);
    border-radius: var(--dlx-radius-lg);
    background: var(--dlx-surface-soft);
    padding: 16px;
    color: var(--dlx-text);
    text-decoration: none;
    transition: border-color var(--dlx-dur-fast) linear, transform var(--dlx-dur) var(--dlx-ease-out);
}
.dlx-artist:hover { border-color: var(--dlx-border-strong); transform: var(--dlx-lift); }
.dlx-artist:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 3px; }
.dlx-artist__art { display: block; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--dlx-surface-2); box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08); }
.dlx-artist__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-artist__art.is-blank { display: inline-flex; align-items: center; justify-content: center; background: var(--dlx-text); color: var(--dlx-bg); font-size: 1.75rem; font-weight: 650; letter-spacing: -.03em; }
.dlx-artist__body { display: grid; gap: 3px; min-width: 0; }
.dlx-artist__body strong { font-size: var(--dlx-fs-lg); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-artist:hover .dlx-artist__body strong { color: var(--dlx-signal-deep); }
.dlx-artist__body > span { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-artist__body em { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-style: normal; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.dlx-artist__body em i { font-style: normal; }
.dlx-artist__mark { display: inline-flex; flex: none; color: #1db954; }
.dlx-artist__mark svg { width: 14px; height: 14px; }
.dlx-credits__foot { margin: clamp(18px, 2.2vw, 26px) 0 0; color: var(--dlx-muted); font-size: var(--dlx-fs-md); }
/* A wall of credits reads as a roster, not a gallery: tighter panels,
   smaller pictures, more per row. */
.dlx-credits__grid.is-many { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; }
.dlx-credits__grid.is-many .dlx-artist { gap: 12px; padding: 12px 14px; border-radius: var(--dlx-radius-md); }
.dlx-credits__grid.is-many .dlx-artist__art { width: 52px; height: 52px; }
.dlx-credits__grid.is-many .dlx-artist__art.is-blank { font-size: 1.25rem; }
.dlx-credits__grid.is-many .dlx-artist__body { gap: 1px; }
.dlx-credits__grid.is-many .dlx-artist__body strong { font-size: var(--dlx-fs-md); }
.dlx-credits__grid.is-many .dlx-artist__body em { margin-top: 3px; }
@media (max-width: 620px) {
    .dlx-credits__grid.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dlx-credits__grid.is-many .dlx-artist { grid-template-columns: 1fr; gap: 8px; padding: 12px; text-align: left; }
    .dlx-credits__grid.is-many .dlx-artist__art { width: 44px; height: 44px; }
    .dlx-credits__grid.is-many .dlx-artist__body strong { white-space: normal; font-size: var(--dlx-fs-base); }
}
@media (max-width: 900px) {
    .dlx-credits__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
    .dlx-credits__head .dlx-release__buy-note { margin: 0; }
}
/* A phone is narrower than one panel's ideal width: let the column shrink
   with the screen instead of holding 300px and overflowing. */
@media (max-width: 620px) {
    .dlx-credits__grid { grid-template-columns: minmax(0, 1fr); }
    .dlx-artist { gap: 14px; padding: 14px; }
    .dlx-artist__art { width: 68px; height: 68px; }
    .dlx-artist__body strong { font-size: var(--dlx-fs-md); }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-artist:hover { transform: none; }
}

/* ------------------------------------------------------ Newsletter band */

/* Restrained and editorial: one line, one field, one button, on the cool
   grey wash the reference uses. */
.dlx-newsletter {
    background: #e9eaec;
    color: var(--dlx-text);
    border-top: 1px solid rgba(11, 11, 13, .08);
    border-bottom: 1px solid rgba(11, 11, 13, .08);
    padding: 82px 0;
}
.dlx-newsletter__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 94px;
    align-items: center;
}
.dlx-newsletter .dlx-eyebrow { color: #5b6470; }
.dlx-newsletter h2 {
    font-size: clamp(2.75rem, 5.2vw, 4.25rem);
    font-weight: 570;
    line-height: 1;
    letter-spacing: -.043em;
    margin: 0 0 16px;
    text-wrap: pretty;
}
.dlx-newsletter__grid > div > p:last-child {
    color: #555860;
    max-width: 560px;
    line-height: 1.6;
    margin: 0;
}
.dlx-newsletter__form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    border-bottom: 1px solid rgba(11, 11, 13, .45);
}
.dlx-newsletter__form input {
    border: 0;
    background: transparent;
    outline: 0;
    font-size: 1.1875rem;
    padding: 15px 0 14px;
    color: var(--dlx-text);
    min-width: 0;
}
.dlx-newsletter__form input::placeholder { color: #6a6c72; opacity: 1; }
.dlx-newsletter__form button {
    height: 42px;
    margin-bottom: 8px;
    border: 0;
    border-radius: 7px;
    background: #111;
    color: #fff;
    padding: 0 17px;
    font-size: 0.75rem;
    font-weight: 570;
    letter-spacing: -.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, transform .16s var(--dlx-ease);
}
.dlx-newsletter__form button::after {
    content: " \2197";
    display: inline-block;
    transition: transform .2s var(--dlx-ease);
}
.dlx-newsletter__form button:hover { background: #29292d; }
.dlx-newsletter__form button:hover::after { transform: translate(2px, -1px); }
.dlx-newsletter__form button:active { transform: scale(.975); }
.dlx-newsletter__note {
    margin: 11px 0 0;
    font-size: 0.6875rem;
    font-weight: 520;
    color: #5b5d64;
    letter-spacing: .005em;
}
.dlx-newsletter.is-sent .dlx-newsletter__form { opacity: .62; pointer-events: none; }
.dlx-newsletter.is-sent .dlx-newsletter__note { color: #2f343c; }
.dlx-newsletter.is-sent .dlx-newsletter__note::before { content: "\2713 "; color: #69798e; font-weight: 700; }
.dlx-newsletter__note.is-error { color: #a83a2c; }

/* ---------------------------------------------------------------- FAQ */

/* V10.7: a single-column list under the shared section head. */
.dlx-faq__inner { display: block; }
.dlx-faq__list { border-top: 1px solid rgba(11, 11, 13, .24); margin-top: 44px; }
.dlx-faq__list details { border-bottom: 1px solid var(--dlx-border); }
.dlx-faq__list summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dlx-space-md);
    padding: 24px 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.008em;
    line-height: 1.32;
    color: #242427;
    cursor: pointer;
}
.dlx-faq__list summary::-webkit-details-marker { display: none; }
.dlx-faq__list summary span {
    font-size: 1.25rem;
    font-weight: 400;
    color: #55575d;
    transition: transform .34s var(--dlx-ease), color .2s ease;
}
.dlx-faq__list details[open] summary span { transform: rotate(45deg); color: #111; }
.dlx-faq__list p {
    max-width: 790px;
    color: #5e6067;
    padding: 0 42px 24px 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.68;
    letter-spacing: -.003em;
}
@media (prefers-reduced-motion: reduce) {
    .dlx-faq__list summary span { transition: none; }
}

/* -------------------------------------------------------------- Closing */

/* Almost nothing, deliberately: left-aligned on near-black. */
.dlx-closing {
    background: #08090a;
    color: #f5f5f7;
    padding: 120px 0 116px;
    text-align: left;
}
.dlx-closing__label {
    margin: 0 0 24px;
    color: #a3a5ac;
    font-size: 0.6875rem;
    font-weight: 540;
    letter-spacing: .05em;
}
.dlx-closing h2 {
    font-size: clamp(4rem, 8.4vw, 7.75rem);
    font-weight: 570;
    line-height: .9;
    letter-spacing: -.054em;
    max-width: 1120px;
    margin: 0 0 34px;
    text-wrap: pretty;
}
.dlx-closing h2 em { color: #bcc3cd; font-style: normal; }
.dlx-closing__copy {
    margin: 0 0 28px;
    max-width: 520px;
    color: #b3b5bc;
    font-size: 1rem;
    line-height: 1.6;
}
.dlx-closing__actions { display: flex; align-items: center; gap: 28px; }

/* ------------------------------------------------------------ 404 page */

.dlx-404 {
    min-height: calc(100vh - var(--dlx-header-h) - var(--dlx-player-clearance, 130px));
    display: flex;
    align-items: center;
    padding-block: var(--dlx-section-pad);
}
.dlx-404 h1 {
    font-size: clamp(1.875rem, 6vw, 5.75rem);
    letter-spacing: var(--dlx-track-display);
    line-height: .94;
    margin: 0 0 22px;
}
.dlx-404__copy { color: var(--dlx-muted); max-width: 560px; margin: 0 0 30px; }
.dlx-404__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.dlx-404__hint { margin: 26px 0 0; font-size: var(--dlx-fs-sm); color: var(--dlx-subtle); }

/* ----------------------------------------------------- Dedicated store */

.dlx-dedicated-store {
    min-height: calc(100vh - var(--dlx-header-h));
    padding: 70px 0 var(--dlx-section-pad);
}
.dlx-dedicated-store__head h1 {
    margin: 0;
    font-size: var(--dlx-fs-h2);
    letter-spacing: -.04em;
    line-height: .98;
}

/* The release page lives in woocommerce.css with the rest of the product
   template; only the shelf head shared with other surfaces stays here. */
.dlx-shelf__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--dlx-space-lg);
    margin-bottom: var(--dlx-space-lg);
}
.dlx-shelf__head h2 { margin: 0; }

/* --------------------------------------------- Inner-page components */

/* License cards (Licensing page). */
.dlx-license-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--dlx-border);
    border-bottom: 1px solid var(--dlx-border);
    margin-bottom: var(--dlx-space-2xl);
}
.dlx-license-card {
    padding: 26px 28px 32px 0;
    border-right: 1px solid var(--dlx-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dlx-license-card + .dlx-license-card { padding-left: 28px; }
.dlx-license-card:last-child { border-right: 0; }
.dlx-license-card__head h2 { font-size: 1.75rem; letter-spacing: -.025em; margin: 0 0 2px; }
.dlx-license-card__head .dlx-status {
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    color: var(--dlx-subtle);
}
.dlx-license-card.is-featured .dlx-status { color: var(--dlx-signal-hover); }
.dlx-license-card__price { font-size: 2.625rem; font-weight: 600; letter-spacing: -.03em; margin: 16px 0 6px; }
.dlx-license-card__price span,
.dlx-license-card__price bdi { display: inline; font: inherit; }
.dlx-license-card > p { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-license-card ul {
    list-style: none;
    margin: 10px 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
}
.dlx-license-card ul li { padding-left: 16px; position: relative; }
.dlx-license-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 1px;
    background: var(--dlx-signal);
}

/* Tier label, quiet on the outer two and in the accent on the recommended
   one, matching how the licensing page marks its featured card. The ultramarine rule
   across the top is the only thing on this row that carries colour, so the
   eye lands on Trackout without the card needing a box around it. */
.dlx-license-compare__flag {
    margin: 0 0 6px;
    font-size: var(--dlx-fs-xs);
    font-weight: 560;
    letter-spacing: var(--dlx-track-caps);
    color: var(--dlx-subtle);
}
.dlx-license-compare article.is-featured { box-shadow: inset 0 2px 0 var(--dlx-signal); }
.dlx-license-compare article.is-featured .dlx-license-compare__flag { color: var(--dlx-signal-deep); }
.dlx-license-compare article.is-featured h3 { color: var(--dlx-text); }

/* The carousel does not scroll on wide screens, so the swipe hint theme.js
   appends stays hidden until the mobile breakpoint below turns it on. */
.dlx-swipe-hint { display: none; }

/* The homepage cards carry the same facts as the licensing page and are given
   the same treatment here, so the two surfaces read identically. The files
   line answers "what do I actually get", which is the question the tier names
   only half answer. */
.dlx-license-compare__files,
.dlx-license-card__files {
    margin: 14px 0 0;
    font-family: var(--dlx-font);
    font-size: var(--dlx-fs-xs);
    letter-spacing: var(--dlx-track-caps);
    color: var(--dlx-text); font-variant-numeric: tabular-nums;
}
.dlx-license-compare__features {
    list-style: none;
    margin: 12px 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
}
.dlx-license-compare__features li { padding-left: 16px; position: relative; }
.dlx-license-compare__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 7px;
    height: 1px;
    background: var(--dlx-signal);
}
.dlx-license-card > a {
    /* inline-flex, not just min-height: neither min-height nor align-items
       does anything to a non-replaced inline element, so the box has to be
       made first. */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: auto;
    border-bottom: 1px solid var(--dlx-text);
    padding: 7px 0;
    font-size: var(--dlx-fs-ui);
}
.dlx-license-card > a:hover { color: var(--dlx-signal-hover); border-color: currentColor; }
.dlx-licensing-notes { margin-bottom: var(--dlx-space-2xl); }
.dlx-store-browse { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dlx-store-browse span { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-store-browse__cta { flex: none; width: auto; }

/* About + contact. */
.dlx-about { display: grid; gap: var(--dlx-space-2xl); }
.dlx-about.has-image { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: start; }
.dlx-about__visual { aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
/*
 * Without a portrait the proof aside used to render first in source order as
 * two bare paragraphs floating above the h1 -- three claims run together with
 * no separators, in dead space, reading as a template accident. It is a side
 * rail: copy left, proof right behind a hairline, the same construction as
 * the contact page's panel so the two inner pages agree with each other.
 */
.dlx-about:not(.has-image) {
    grid-template-columns: 1.2fr minmax(260px, .8fr);
    align-items: start;
}
.dlx-about:not(.has-image) .dlx-about__proof {
    order: 2;
    border-left: 1px solid var(--dlx-border);
    padding-left: 28px;
}
.dlx-about:not(.has-image) .dlx-about__copy { order: 1; }
.dlx-about__proof {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    color: var(--dlx-muted);
    font-size: var(--dlx-fs-sm);
}
/* The thesis line leads in ink; the three claims sit under it as a divided
   stack, the same rhythm as the contact facts list. */
.dlx-about__proof > p {
    margin: 0;
    color: var(--dlx-text);
    font-size: var(--dlx-fs-md);
    line-height: 1.55;
}
.dlx-about__proof > div { display: flex; flex-direction: column; margin-top: 6px; }
.dlx-about__proof > div span {
    padding: 9px 0;
    border-bottom: 1px solid var(--dlx-border);
    font-size: var(--dlx-fs-sm);
}
.dlx-about__proof > div span:last-child { border-bottom: 0; }
.dlx-about__copy h1 { font-size: var(--dlx-fs-h2); letter-spacing: -.04em; }
.dlx-about__copy { max-width: var(--dlx-reading); }

.dlx-contact { display: grid; grid-template-columns: 1.2fr minmax(280px, .8fr); gap: var(--dlx-space-2xl); align-items: start; }
.dlx-contact__intro h1 { font-size: var(--dlx-fs-h2); letter-spacing: -.04em; }
.dlx-contact__facts { margin: var(--dlx-space-lg) 0 0; }
.dlx-contact__facts div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dlx-border); }
.dlx-contact__facts dt { font-size: var(--dlx-fs-xs); font-weight: 560; color: var(--dlx-faint); min-width: 110px; }
.dlx-contact__facts dd { margin: 0; font-size: var(--dlx-fs-sm); color: var(--dlx-muted); }
.dlx-contact__panel { border-left: 1px solid var(--dlx-border); padding-left: 28px; }
/* The panel's three ways out used to sit inline and fuse into one unreadable
   bar -- two buttons and the mail link shoulder to shoulder with no gap. In a
   narrow rail they stack, full width, one decision per line. */
.dlx-contact__panel .dlx-button,
.dlx-contact__panel .dlx-contact__mail {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 12px;
}
.dlx-contact__mail {
    display: inline-flex;
    align-items: center;
    min-height: var(--dlx-control);
    background: var(--dlx-accent);
    color: var(--dlx-accent-contrast);
    padding: 0 18px;
    font-size: var(--dlx-fs-md);
    font-weight: 650;
    margin-top: 14px;
}
.dlx-contact__mail:hover { background: var(--dlx-signal); color: #fff; }

/* Commerce intros (cart, checkout, account heads) and the assurance row. */
.dlx-commerce-intro { margin-bottom: var(--dlx-space-xl); }
.dlx-commerce-intro h1 { font-size: var(--dlx-fs-h2); letter-spacing: -.04em; margin: 0 0 8px; }
.dlx-commerce-intro p:last-child { color: var(--dlx-muted); margin: 0; }
.dlx-assurance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    border-top: 1px solid var(--dlx-border);
    margin-top: var(--dlx-space-2xl);
    padding-top: 16px;
}
.dlx-assurance span { font-size: var(--dlx-fs-sm); color: var(--dlx-subtle); }
.dlx-assurance strong { display: block; color: var(--dlx-text); font-weight: 650; font-size: var(--dlx-fs-ui); }

/* --------------------------------------- Legacy planes (inner pages) */

.dlx-plane { background: var(--dlx-bg); }
.dlx-plane--room, .dlx-plane--deck { background: var(--dlx-bg-2); }
.dlx-content-page .dlx-plane,
.dlx-content-page .dlx-plane--room,
.dlx-content-page .dlx-plane--deck { background: transparent; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1180px) {
    .dlx-hero__grid { grid-template-columns: 1fr .72fr; gap: 55px; }
    .dlx-hero__proof { grid-template-columns: 1fr; }
}

/* Reference 1020: the hero stacks, discovery and the shelf go single file,
   the signal rail folds to two columns. */
@media (max-width: 1020px) {
    .dlx-hero__grid { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding-top: 48px; }
    .dlx-hero__proof { grid-template-columns: repeat(3, 1fr); }
    .dlx-featured-card { justify-self: start; width: min(660px, 100%); }
    .dlx-signal-rail__grid { grid-template-columns: repeat(2, 1fr); }
    .dlx-signal-rail__item { padding: 16px 20px; }
    .dlx-signal-rail__item:nth-child(2) { border-right: 0; }
    .dlx-signal-rail__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .dlx-signal-rail__item:nth-child(3) { padding-left: 0; }
    /* The Studio band stacks: illustration first, then the steps. */
    .dlx-studio-band__body { grid-template-columns: 1fr; }
    .dlx-studio-band__stage {
        padding: 22px 0 26px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
    }
    .dlx-studio-band__copy { padding: 28px 0 4px; }
}

@media (max-width: 900px) {
    .dlx-faq__inner { grid-template-columns: 1fr; }
    .dlx-hero__grid { padding-bottom: 50px; }
    /* One column, so the search and its chips stop being held to the card's
       width and take the measure the copy above them already has. */
    .dlx-hero-search,
    .dlx-hero-quick { max-width: none; }
    .dlx-section-heading { grid-template-columns: 1fr; gap: 18px; }
    .dlx-newsletter__grid { grid-template-columns: 1fr; gap: 32px; }
    /* Three tiers stacked vertically pushed the third card two screens down
       before a buyer could compare it. A horizontal, snap-scrolling row
       keeps all three one swipe apart, each landing centred in the
       viewport with the neighbouring tiers peeking in either side. */
    .dlx-license-compare,
    .dlx-license-grid {
        /* One tier per slide. The clamp keeps a card readable on a small
           phone and stops it ballooning on a tablet, where the leftover
           width becomes a peek of the tiers either side instead. */
        --dlx-lic-card: clamp(260px, 76vw, 380px);
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: var(--dlx-lic-card);
        overflow-x: auto;
        /* Explicit, and load-bearing. With overflow-y left at its initial
           'visible' while overflow-x is 'auto', the spec computes the visible
           axis to 'auto' as well -- so the carousel silently became a vertical
           scroll container, and the few pixels of slack from the cards' own
           padding were enough for a touch to be captured vertically before it
           committed to a horizontal swipe. Pinning it to hidden removes the
           second axis entirely, so vertical pans chain up to the page where
           they belong. Not touch-action: pan-x, which would go too far and
           trap the page whenever a thumb happened to land on a card. */
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--dlx-gutter) * -1);
        /* Exactly the room left beside a centred card. Without it the first
           and last tier have nowhere to scroll to and jam against the ends
           while the middle one centres, so two of the three sit off-axis. */
        padding-inline: calc((100vw - var(--dlx-lic-card)) / 2);
    }
    .dlx-license-compare::-webkit-scrollbar,
    .dlx-license-grid::-webkit-scrollbar { display: none; }
    /* The desktop cards are columns in a row, so they carry asymmetric
       padding -- nothing on the left of the first, 28px on the others --
       and share dividers with their neighbours. Read one at a time that
       reads as every tier's text starting in a slightly different place,
       so each slide gets even padding instead. The adjacent-sibling
       selectors are repeated because the rules being overridden use them
       and would otherwise outrank a bare class here. */
    .dlx-license-compare article,
    .dlx-license-compare article + article,
    .dlx-license-card,
    .dlx-license-card + .dlx-license-card {
        scroll-snap-align: center;
        min-height: 0;
        padding: 26px 22px 30px;
    }

    /* A snap-scroll row with no scrollbar gives no clue it scrolls at all --
       theme.js wraps the carousel and appends a hint at each end, on every
       page that has one. Each sits over the sliver of the card peeking in on
       its side, and theme.js shows only the ones that lead somewhere: the
       back arrow is absent until you have actually scrolled away from the
       first card, and the forward one goes once you reach the last. */
    .dlx-license-carousel { position: relative; }
    /*
     * A real button. It was a span with pointer-events: none -- an arrow that
     * looked pressable and was not -- so the tap target is stated here along
     * with the browser button styling that has to be cleared for a <button>
     * to be a circle. 44px of touch target around a 34px face, because a
     * thumb is not a mouse pointer.
     */
    .dlx-swipe-hint {
        position: absolute;
        top: 50%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        padding: 0;
        -webkit-appearance: none;
        appearance: none;
        background: var(--dlx-text);
        color: var(--dlx-bg, #f5f2ec);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
        cursor: pointer;
        opacity: 1;
        /* Also the animation's resting position, so a reduced-motion visitor
           (no animation, no transform from it) still gets a centred arrow. */
        transform: translateY(-50%);
        transition: opacity var(--dlx-dur-fast) linear;
    }
    /* The touch target, grown outward without moving the circle. */
    .dlx-swipe-hint::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    .dlx-swipe-hint:active { transform: translateY(-50%) scale(.94); }
    .dlx-swipe-hint:focus-visible {
        outline: 2px solid var(--dlx-focus);
        outline-offset: 3px;
    }
    /* Gone means gone: at the end it points past, the arrow stops taking a
       tap and stops taking a tab stop, rather than sitting there invisible
       and still live. */
    .dlx-swipe-hint:disabled {
        opacity: 0;
        pointer-events: none;
        cursor: default;
    }
    .dlx-swipe-hint::before {
        content: "";
        width: 8px;
        height: 8px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
    }
    .dlx-swipe-hint--next { right: 2px; }
    .dlx-swipe-hint--next::before { margin-left: -3px; transform: rotate(45deg); }
    .dlx-swipe-hint--prev { left: 2px; }
    .dlx-swipe-hint--prev::before { margin-right: -3px; transform: rotate(-135deg); }

    .dlx-license-carousel.is-at-start .dlx-swipe-hint--prev,
    .dlx-license-carousel.is-at-end .dlx-swipe-hint--next { opacity: 0; }

    /* Only the untouched carousel nudges, and only three times. The comment
       under this rule already argued that a control which keeps waving after
       its point is taken is just movement on the page -- and then set the
       animation to infinite, so it waved forever whether the point was taken
       or not. Three passes make the invitation; after that the arrow is
       wayfinding and holds still. */
    .dlx-license-carousel.is-at-start .dlx-swipe-hint--next {
        animation: dlx-swipe-hint-nudge 1.6s ease-in-out 3;
    }
    @keyframes dlx-swipe-hint-nudge {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(5px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .dlx-license-carousel.is-at-start .dlx-swipe-hint--next { animation: none; }
    }
    .dlx-exclusive-strip__inner { grid-template-columns: 1fr; gap: 25px; }
    .dlx-faq__heading { position: static; }
    .dlx-contact,
    .dlx-about.has-image,
    .dlx-about:not(.has-image) { grid-template-columns: 1fr; }
    .dlx-contact__panel,
    .dlx-about:not(.has-image) .dlx-about__proof {
        border-left: 0;
        border-top: 1px solid var(--dlx-border);
        padding-left: 0;
        padding-top: 24px;
    }
    .dlx-assurance { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .dlx-hero { padding-top: 0; padding-bottom: 54px; }
    .dlx-hero > .dlx-shell { padding-top: 18px; }
    .dlx-hero__meta { display: none; }
    .dlx-hero__grid { gap: 36px; padding-top: 24px; }
    .dlx-hero__title {
        font-size: clamp(3.5rem, 15.5vw, 5.25rem);
        line-height: .94;
        letter-spacing: -.042em;
    }
    .dlx-hero__sub { font-size: 1rem; margin: 24px 0; color: #c2c4c9; }
    .dlx-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .dlx-hero__cta .dlx-btn { width: 100%; padding: 0 12px; }
    .dlx-hero__proof { grid-template-columns: 1fr; gap: 10px; margin-top: 34px; }
    .dlx-hero__proof > div {
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 9px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .dlx-featured-card { width: 100%; border-radius: 9px; min-height: 0; }
    .dlx-featured-card__art { min-height: 330px; }
    .dlx-featured-card__info { padding: 20px; }
    .dlx-featured-card__title { font-size: 2.125rem; }
    .dlx-featured-card__wave { display: none; }
    .dlx-featured-card__spec { gap: 9px; padding-right: 0; }
    .dlx-featured-card__buy { position: static; display: block; width: 100%; text-align: left; margin-top: 12px; padding: 8px 0; }
    /* The submit label goes; on a phone the keyboard's own Go key sends the
       form, and the row is tight enough that the word cost the field its
       last usable characters. */
    .dlx-hero-search { margin-top: 12px; }
    .dlx-hero-search button { display: none; }
    .dlx-hero-search input { font-size: 0.875rem; }
    .dlx-hero-quick { gap: 7px; margin: 0 0 20px; }
    .dlx-hero-quick__label { width: 100%; margin: 0 0 2px; }
    .dlx-signal-rail__grid { grid-template-columns: 1fr 1fr; }
    .dlx-signal-rail__item { padding: 14px 12px; }
    .dlx-signal-rail__item strong { font-size: 0.8125rem; }
    .dlx-store-preview,
    .dlx-studio-band,
    .dlx-license-guide,
    .dlx-faq { padding-top: 78px; padding-bottom: 80px; }
    .dlx-section-heading h2 { font-size: clamp(2.5rem, 11.5vw, 3.5rem); line-height: 1.03; letter-spacing: -.036em; }
    /* Phone: the lane labels move above their tracks so the waveforms keep
       a usable width instead of being squeezed into a sliver. */
    .dlx-studio-band__lane { grid-template-columns: 1fr; min-height: 0; padding: 12px 0; }
    .dlx-studio-band__track { margin: 0 10px; }
    @media (prefers-reduced-motion: no-preference) {
        @keyframes dlx-band-sweep {
            0%    { left: 3%; opacity: 1; }
            87.5% { left: 96%; opacity: 1; }
            89.4% { left: 96%; opacity: 1; }
            93%   { left: 96%; opacity: 0; }
            94%   { left: 43%; opacity: 0; }
            100%  { left: 43%; opacity: 1; }
        }
    }
    .dlx-studio-band__name { padding: 0 10px 6px; }
    .dlx-studio-band__name b { display: inline; margin: 0 0 0 6px; }
    .dlx-studio-band__ruler { margin-left: 0; padding-left: 10px; }
    .dlx-studio-band__track { height: 44px; }
    .dlx-studio-band__playhead { left: 43%; }
    .dlx-studio-band__steps p { font-size: 0.78125rem; }
    .dlx-newsletter { padding: 68px 0; }
    .dlx-newsletter h2 { font-size: 2.875rem; }
    .dlx-newsletter__form { grid-template-columns: 1fr; }
    .dlx-newsletter__form button { margin: 10px 0 7px; justify-self: start; }
    .dlx-faq__list summary { font-size: 0.9375rem; }
    .dlx-closing { padding: 90px 0; }
    .dlx-closing h2 { font-size: clamp(3rem, 14vw, 4.75rem); }
    .dlx-closing__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- Proof strip: one line on the homepage, linking to About ---- */
.dlx-proof { border-top: 1px solid var(--dlx-border); border-bottom: 1px solid var(--dlx-border); }
.dlx-proof__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-block: 18px; }
.dlx-proof__line { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); line-height: 1.5; }
.dlx-proof__line strong { color: var(--dlx-text); font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dlx-proof__line span { margin: 0 6px; color: var(--dlx-faint); }
.dlx-proof__link { display: inline-flex; align-items: baseline; gap: 6px; color: var(--dlx-text); font-size: var(--dlx-fs-sm); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--dlx-border-strong); padding-bottom: 2px; white-space: nowrap; }
.dlx-proof__link i { font-style: normal; transition: transform var(--dlx-dur-fast) var(--dlx-ease-out); }
.dlx-proof__link:hover { border-color: currentColor; }
.dlx-proof__link:hover i { transform: translateX(3px); }
@media (max-width: 640px) {
    .dlx-proof__inner { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 16px; }
    .dlx-proof__line span { margin: 0 4px; }
}

/* ---- Channels: the YouTube channel and the Spotify artist page ---- */
/* Two panels on paper under the credits: the channel with its latest
   videos as native cards, and the artist player. They share one head
   row -- mark, name, where -- with a follow link on the right. */
.dlx-channels { padding-block: var(--dlx-section-pad); border-top: 1px solid var(--dlx-border); }
.dlx-channels__head { margin-bottom: clamp(22px, 3vw, 32px); }
.dlx-channels__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.dlx-channels__grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.dlx-channel { display: grid; gap: 18px; min-width: 0; border: 1px solid var(--dlx-border); border-radius: var(--dlx-radius-lg); background: var(--dlx-surface-soft); padding: clamp(16px, 2vw, 22px); }
.dlx-channel__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlx-channel__head > div { display: grid; gap: 1px; min-width: 0; }
.dlx-channel__head strong { font-size: var(--dlx-fs-md); font-weight: 650; letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlx-channel__head > div > span { color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-channel__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; color: #fff; }
.dlx-channel__mark--youtube { background: #ff0033; }
.dlx-channel__mark--youtube svg { width: 22px; height: 22px; }
.dlx-channel__mark--spotify { background: #1db954; }
.dlx-channel__mark--spotify svg { width: 24px; height: 24px; }
.dlx-channel__mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dlx-channel__follow { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border: 1px solid var(--dlx-border-strong); border-radius: var(--dlx-radius-control); padding: 0 14px; color: var(--dlx-text); font-size: var(--dlx-fs-sm); font-weight: 600; text-decoration: none; transition: background var(--dlx-dur-fast) linear, color var(--dlx-dur-fast) linear, border-color var(--dlx-dur-fast) linear; }
.dlx-channel__follow i { font-style: normal; }
.dlx-channel__follow:hover { background: var(--dlx-text); border-color: var(--dlx-text); color: var(--dlx-bg); }
/* The channel's numbers, as a row of three figures: label above, figure
   below, in the display weight. They are the flex. */
.dlx-channel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid var(--dlx-border-soft); border-bottom: 1px solid var(--dlx-border-soft); }
.dlx-channel__stats > div { display: grid; gap: 2px; min-width: 0; }
.dlx-channel__stats dt { color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dlx-channel__stats dd { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dlx-channel__label { margin: 0; color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.dlx-channel__label + .dlx-channel__videos { margin-top: -6px; }
.dlx-channel__videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dlx-video { display: grid; gap: 8px; min-width: 0; color: var(--dlx-text); text-decoration: none; }
.dlx-video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--dlx-radius-md); overflow: hidden; background: var(--dlx-surface-2); }
.dlx-video__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(11, 11, 13, .08); pointer-events: none; }
.dlx-video__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dlx-dur-slow) var(--dlx-ease-out); }
.dlx-video:hover .dlx-video__thumb img { transform: scale(1.03); }
.dlx-video__play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(11, 11, 13, .78); color: #fff; font-size: 0.75rem; padding-left: 3px; transition: background var(--dlx-dur-fast) linear; }
.dlx-video:hover .dlx-video__play { background: #ff0033; }
.dlx-video__body { display: grid; gap: 2px; }
.dlx-video__body strong { font-size: var(--dlx-fs-sm); font-weight: 600; letter-spacing: -.008em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dlx-video:hover .dlx-video__body strong { color: var(--dlx-signal-deep); }
.dlx-video__meta { color: var(--dlx-subtle); font-size: var(--dlx-fs-xs); }
.dlx-video:focus-visible { outline: 2px solid var(--dlx-focus); outline-offset: 4px; border-radius: var(--dlx-radius-md); }
.dlx-channel__empty { margin: 0; color: var(--dlx-muted); font-size: var(--dlx-fs-sm); }
.dlx-channel__player { border-radius: 12px; overflow: hidden; background: var(--dlx-surface-2); }
.dlx-channel__player iframe { display: block; width: 100%; height: 352px; border: 0; }
@media (max-width: 900px) {
    .dlx-channels__grid { grid-template-columns: 1fr; }
    .dlx-channels__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
    .dlx-channels__head .dlx-release__buy-note { margin: 0; }
}
@media (max-width: 480px) {
    .dlx-channel__videos { grid-template-columns: 1fr 1fr; gap: 10px; }
    .dlx-channel__follow { padding: 0 11px; }
    .dlx-channel__player iframe { height: 352px; }
}
@media (prefers-reduced-motion: reduce) {
    .dlx-video__thumb img { transition: none; }
    .dlx-video:hover .dlx-video__thumb img { transform: none; }
}