:root {
    --bg-color: #FAF9F6;
    --border-color: #21201E;
    --text-color: #21201E;
    --grey-1: #BFBFBF;
    --grey-2: #BFBFBF;
    --grey-3: #BFBFBF;
    --grey-4: #BFBFBF;
    --black: #21201E;
    --white: #FAF9F6;
    --border-width: 4px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    overflow-x: hidden;
    min-height: 200vh;
    overscroll-behavior-y: none;
    overflow-anchor: none;
    /* Allow scrolling for the animation */
}

html {
    overscroll-behavior-y: none;
}

/* Landing Page / Hero Section */
.hero-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    pointer-events: none;
    /* Let clicks pass through if needed, or handle in JS */
}

.stacked-container {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stacked-text {
    position: absolute;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(3rem, 15vw, 10rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out;
    will-change: transform, opacity;
}

.text-top {
    z-index: 4;
}

.text-top-2 {
    z-index: 5;
}

.text-middle {
    z-index: 3;
}

.text-bottom {
    z-index: 2;
}

.text-bottom-2 {
    z-index: 1;
}

.hero-border {
    position: absolute;
    border: 3px solid var(--border-color);
    border-radius: 500px;
    width: 200vw;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    /* Above text during move */
    transition: opacity 0.2s ease;
    will-change: transform, width, height, opacity;
}

.scroll-arrow {
    position: absolute;
    bottom: 3.5vh;
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    transition: opacity 0.25s ease;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.4rem 0.9rem;
    font-family: inherit;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.scroll-arrow:focus-visible {
    outline: 2px solid var(--text-color, #21201E);
    outline-offset: 4px;
    border-radius: 4px;
}

body.player-active .scroll-arrow {
    opacity: 0 !important;
    pointer-events: none;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Typography */
h2.title {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(3rem, 11vw, 7.5rem);
    /* Increased size */
    text-transform: lowercase;
    /* Back to lowercase to match original design */
    letter-spacing: -0.02em;
    line-height: 0.8;
    /* Even tighter to push characters down */
    margin-bottom: -0.12em; /* Original clean sitting position */
    user-select: none;
}


/* Navigation */
.top-nav {
    --c: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-top: calc(3rem - var(--c) * 2rem);
    padding-right: 2rem;
    padding-bottom: calc(1.5rem - var(--c) * 0.5rem);
    padding-left: 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    /* Hidden initially */
    transform: translateY(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.top-nav > #wtf-btn {
    justify-self: start;
}

.top-nav > #brand-target {
    justify-self: center;
}

.top-nav > .nav-pill.icons {
    justify-self: end;
}

.top-nav.visible {
    opacity: 1;
    transform: translateY(0);
}

.nav-pill.brand {
    font-size: 1rem;
    visibility: hidden;
    /* Hidden until the animation finishes */
}

.nav-pill {
    border: solid var(--border-color);
    border-width: calc(3px - var(--c, 0) * 1px);
    border-radius: 50px;
    padding: calc(0.4rem - var(--c, 0) * 0.1rem) calc(1.2rem - var(--c, 0) * 0.2rem);
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: calc(1rem - var(--c, 0) * 0.15rem);
    display: flex;
    align-items: center;
    gap: calc(1rem - var(--c, 0) * 0.2rem);
    background: var(--white);
    pointer-events: auto;
}

.nav-pill.brand {
    font-size: calc(1.4rem - var(--c, 0) * 0.3rem);
}

.nav-pill.icons {
    padding: calc(0.3rem - var(--c, 0) * 0.1rem) calc(0.9rem - var(--c, 0) * 0.2rem);
    gap: calc(0.6rem - var(--c, 0) * 0.1rem);
    background: var(--white);
}

.nav-pill.icons svg {
    width: calc(20px - var(--c, 0) * 3px);
    height: calc(20px - var(--c, 0) * 3px);
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.15s ease;
}

.brand-icon:hover {
    transform: translateY(-1px);
}

.brand-icon svg {
    display: block;
}

.clickable {
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.clickable:hover {
    background: var(--black);
    color: var(--white);
}

/* Container */
.container {
    max-width: 1400px;
    /* Wider container */
    margin: 0 auto;
    min-height: 100vh;
    /* Occupy full screen */
    padding: 0 4rem;
    margin-top: 210vh;
    /* Push after hero — must match hero scroll animation length (mergeScroll 1.4vh + moveScroll 0.7vh) */
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center the accordion vertically so it sits mid-viewport at max scroll */
    align-items: center;
    padding: 2rem;
}

.container.visible {
    opacity: 1;
}

.accordion {
    width: 100%;
    /* Ensure it takes full width of max-width container */
    border: var(--border-width) solid var(--border-color);
    /* Offset for sticky nav so top and bottom gaps look equal at max scroll */
    margin-top: 105px;
}

/* Accordion */
.accordion {
    border: var(--border-width) solid var(--border-color);
}

.accordion-item {
    border-bottom: var(--border-width) solid var(--border-color);
    overflow: hidden;
    position: relative;
    transition: background 0.3s ease;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    padding: 2rem 2rem 0 2rem;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    background-color: inherit;
    transition: padding-bottom 0.4s ease;
}

.accordion-item.active .accordion-header {
    padding-bottom: 1.5rem;
}

#beats .accordion-header {
    border-bottom: var(--border-width) solid var(--border-color);
    margin-bottom: calc(-1 * var(--border-width));
}

#beats.accordion-item.active .accordion-header {
    padding-bottom: 0.5rem;
}

.accordion-header::after {
    content: '+';
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%) scale(1);
    transform-origin: center;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 600;
    font-size: 2.5rem;
    /* Slightly smaller to fit better in the middle */
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.accordion-item:hover .accordion-header::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.45);
}

/* Pastel +/- per tab */
#beats   .accordion-header::after { color: #FFB3D9; }
#samples .accordion-header::after { color: #B3EAEA; }
#studio  .accordion-header::after { color: #FFF2B3; }
#work    .accordion-header::after { color: #C6F0B5; }
#account .accordion-header::after { color: #D9B3FF; }

.accordion-item.active .accordion-header::after {
    content: '−';
    /* Change to minus when open */
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
}

/* Backgrounds */
#beats {
    background-color: var(--grey-1);
}

#samples {
    background-color: var(--grey-2);
}

#studio {
    background-color: var(--grey-3);
}

#work {
    background-color: var(--grey-4);
}

/* Dark-themed tabs */
#beats.dark,
#samples.dark,
#studio.dark,
#work.dark {
    background-color: var(--black);
    color: var(--white);
}
.accordion-item.dark {
    border-bottom-color: var(--white);
    --border-color: var(--white);
}
#beats.dark .accordion-header {
    border-bottom-color: var(--white);
}
#studio.dark .studio-layout {
    background-color: var(--black);
}
#studio.dark .studio-book {
    color: var(--white);
}


#inner-circle {
    --accent: #D4B375;
    background-color: var(--black);
    color: var(--white);
    border-bottom: var(--border-width) solid var(--white);
    /* White line between black sections */
}

/* Premium accent: gold +/- indicator for inner circle */
#inner-circle .accordion-header::after {
    color: var(--accent);
}

/* ===== INNER CIRCLE STATES ===== */
#inner-circle .ic-content {
    padding: 0;
    position: relative;
}

/* Backdrop: cream surface with grey grid (visible behind the card) */
#inner-circle .ic-view {
    display: none;
    position: relative;
    background-color: var(--black);
    color: var(--white);
    min-height: 920px;
    padding: 4rem 2rem;
}
#inner-circle .ic-view-free { display: block; }

#inner-circle .ic-view-free .ic-stage {
    min-height: 820px;
}

#inner-circle .ic-view-free {
    min-height: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

#inner-circle .ic-view-free .ic-card-header {
    margin-bottom: 0.4rem;
    align-items: center;
}

#inner-circle .ic-view-free .ic-pill-brand {
    border-color: var(--white);
    color: var(--white);
}

#inner-circle .ic-view-free .ic-pill-sub {
    background: var(--white);
    color: var(--black);
}

#inner-circle .ic-view-free .ic-perks {
    align-items: center;
    text-align: center;
}

#inner-circle .ic-view-free .ic-perk {
    text-align: center;
}

#inner-circle .ic-view-free .ic-perk-title,
#inner-circle .ic-view-free .ic-perk-desc {
    color: var(--white);
}

#inner-circle .ic-view-free .ic-perk-title { font-size: 1.4rem; }
#inner-circle .ic-view-free .ic-perk-desc  { font-size: 1rem; }
#inner-circle .ic-view-free .ic-perk-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

#inner-circle .ic-view-free .ic-perk-spark {
    display: inline-flex;
    line-height: 0;
    will-change: transform, opacity;
    animation: icSparkTwinkle 2.4s ease-in-out infinite;
}

#inner-circle .ic-view-free .ic-perk-spark svg {
    display: block;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
    fill: currentColor;
}

#inner-circle .ic-view-free .ic-perk-spark--diamond { color: #00e5ff; }
#inner-circle .ic-view-free .ic-perk-spark--bolt    { color: #ffe600; animation-delay: 0.4s; }
#inner-circle .ic-view-free .ic-perk-spark--ring    { color: #ff2d95; animation-delay: 0.8s; }
#inner-circle .ic-view-free .ic-perk-spark--plus    { color: #39ff14; animation-delay: 1.2s; }

@keyframes icSparkTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg);    opacity: 1; }
    50%      { transform: scale(0.8) rotate(-12deg); opacity: 0.7; }
}

#inner-circle .ic-view-free .ic-perk {
    opacity: 0;
    transform: translateY(10px);
}

#inner-circle[data-ic-state="free"] .ic-view-free .ic-perk,
#inner-circle[data-ic-state="circle"] .ic-view-free .ic-perk {
    animation: icPerkIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

#inner-circle[data-ic-state="free"] .ic-view-free .ic-perk:nth-child(1),
#inner-circle[data-ic-state="circle"] .ic-view-free .ic-perk:nth-child(1) { animation-delay: 120ms; }
#inner-circle[data-ic-state="free"] .ic-view-free .ic-perk:nth-child(2),
#inner-circle[data-ic-state="circle"] .ic-view-free .ic-perk:nth-child(2) { animation-delay: 220ms; }
#inner-circle[data-ic-state="free"] .ic-view-free .ic-perk:nth-child(3),
#inner-circle[data-ic-state="circle"] .ic-view-free .ic-perk:nth-child(3) { animation-delay: 320ms; }
#inner-circle[data-ic-state="free"] .ic-view-free .ic-perk:nth-child(4),
#inner-circle[data-ic-state="circle"] .ic-view-free .ic-perk:nth-child(4) { animation-delay: 420ms; }

@keyframes icPerkIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger entry for PREMIUM view (mirrors the FREE perks animation) */
@keyframes icViewIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}


#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-premium-head,
#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-menu-options,
#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-premium-body {
    animation: icViewIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-premium-head { animation-delay: 120ms; }
#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-menu-options { animation-delay: 220ms; }
#inner-circle.active[data-ic-state="circle"] .ic-view-premium > .ic-premium-body { animation-delay: 320ms; }

#inner-circle .ic-view-free .ic-pill-cta {
    background: var(--white);
    color: var(--black);
    border: none;
    border-radius: 50px;
    padding: 0.85rem 2.6rem;
    font-size: 1.1rem;
    font-family: 'Syne', sans-serif;
    font-style: normal;
    font-weight: 700;
}

#inner-circle .ic-stage {
    position: relative;
    background-color: #2c2b29;
    background-image:
        linear-gradient(to right, rgba(250, 249, 246, 0.18) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(250, 249, 246, 0.18) 2px, transparent 2px);
    background-size: 33.3333% 50%;
    background-position: -1px -1px;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

#inner-circle .ic-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 2.5rem;
}

#inner-circle .ic-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--black);
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.15rem;
    background: transparent;
    color: var(--black);
    line-height: 1;
}

#inner-circle .ic-pill-brand {
    font-size: 1.35rem;
    letter-spacing: 0.01em;
}

#inner-circle .ic-pill-sub {
    margin-top: -0.6rem;
    margin-left: 1.2rem;
    background: var(--black);
    color: var(--white);
    font-style: italic;
    font-variation-settings: "wdth" 110, "wght" 700;
    font-size: 0.95rem;
    padding: 0.3rem 1rem;
}

#inner-circle .ic-pill-cta {
    cursor: pointer;
    background: var(--black);
    color: var(--white);
    font-style: italic;
    font-variation-settings: "wdth" 110, "wght" 700;
    padding: 0.45rem 1.4rem;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

#inner-circle .ic-pill-cta:hover { transform: translateY(-1px); }
#inner-circle .ic-pill-cta:active { transform: translateY(0); opacity: 0.9; }

#inner-circle .ic-perks {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin: 1.4rem 0 1.6rem;
}

#inner-circle .ic-perk-title {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1.25rem;
    color: var(--black);
    margin: 0 0 0.25rem;
    line-height: 1;
}

#inner-circle .ic-perk-desc {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: var(--black);
    margin: 0;
    line-height: 1.4;
}

/* Premium */
#inner-circle .ic-view-premium {
    padding: 5.5rem 3rem 3rem;
    min-height: 0;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

/* Persistent header at top of view */
#inner-circle .ic-view-premium > .ic-premium-head {
    margin-bottom: 3.5rem;
    /* Don't let flex shrink the head when the active pane suddenly grows
       — overflow:hidden lower in the file would otherwise allow it to collapse to 0. */
    flex-shrink: 0;
}

/* Persistent options row */
#inner-circle .ic-view-premium > .ic-menu-options {
    display: flex;
    gap: 5.5rem;
    align-items: center;
    justify-content: center;
    /* padding-bottom gives the absolute-positioned "new" pill room inside the row's
       overflow:hidden box. */
    padding-bottom: 2.4rem;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Body wraps swappable panes */
#inner-circle .ic-premium-body {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
}

/* Premium panes — active pane drives body height, others overlay absolutely during fade */
#inner-circle .ic-premium-pane {
    width: 100%;
    position: relative;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 450ms ease, visibility 0s linear 450ms;
}
#inner-circle .ic-view-premium:not([data-premium-view="menu"])    .ic-pane-menu,
#inner-circle .ic-view-premium:not([data-premium-view="beats"])   .ic-pane-beats,
#inner-circle .ic-view-premium:not([data-premium-view="samples"]) .ic-pane-samples,
#inner-circle .ic-view-premium:not([data-premium-view="kits"])    .ic-pane-kits {
    position: absolute;
    inset: 0;
}
#inner-circle .ic-view-premium[data-premium-view="menu"]    .ic-pane-menu,
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-pane-beats,
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-pane-samples,
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-pane-kits {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 450ms ease, visibility 0s linear 0s;
}

/* Menu pane (body content only): just the contact foot */
#inner-circle .ic-pane-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Direction-based fade of non-active options — keeps active option in place */
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-menu-opt[data-premium-go="samples"],
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-menu-opt[data-premium-go="kits"],
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-menu-opt[data-premium-go="kits"],
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-menu-opt[data-premium-go="beats"],
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-menu-opt[data-premium-go="samples"],
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-menu-opt[data-premium-go="beats"] {
    opacity: 0;
    pointer-events: none;
}
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-menu-opt[data-premium-go="samples"],
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-menu-opt[data-premium-go="kits"],
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-menu-opt[data-premium-go="kits"] {
    transform: translateX(40px);
}
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-menu-opt[data-premium-go="beats"],
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-menu-opt[data-premium-go="samples"],
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-menu-opt[data-premium-go="beats"] {
    transform: translateX(-40px);
}
#inner-circle .ic-menu-opt {
    position: relative;
    background: transparent;
    border: 0;
    padding: 0.8rem 0.6rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 2.4rem;
    color: var(--white);
    cursor: pointer;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: opacity 380ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#inner-circle .ic-menu-opt .ic-menu-label {
    position: relative;
    display: inline-block;
    transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#inner-circle .ic-menu-opt .ic-menu-label::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.55rem;
    height: 2px;
    background: var(--white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#inner-circle .ic-menu-opt:hover .ic-menu-label { transform: translateY(-3px); }
#inner-circle .ic-menu-opt:hover .ic-menu-label::after { transform: scaleX(1); }
#inner-circle .ic-menu-opt:hover { opacity: 1; }
#inner-circle .ic-menu-new {
    position: absolute;
    bottom: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: lowercase;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.2;
    letter-spacing: 0.04em;
}
#inner-circle .ic-menu-foot {
    margin-top: 3rem;
    padding-top: 2rem;
    padding-bottom: 0.4rem;
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.4);
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
    background: transparent;
    color: var(--white);
    font: inherit;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    box-shadow: none;
    transition: opacity 250ms ease, padding 450ms cubic-bezier(0.22,0.61,0.36,1), border-color 300ms ease;
}
#inner-circle .ic-menu-foot:focus,
#inner-circle .ic-menu-foot:focus-visible,
#inner-circle .ic-menu-foot:active { outline: none; box-shadow: none; }
#inner-circle .ic-menu-foot::-moz-focus-inner { border: 0; padding: 0; }
#inner-circle .ic-menu-foot:hover .ic-menu-contact-title,
#inner-circle .ic-menu-foot:hover .ic-menu-contact-sub { opacity: 0.75; }

/* Contact open/close: collapse head + options so the contact bar rises to the top,
   then reveal pills. Uses interpolate-size to animate height:auto natively. */
#inner-circle .ic-view-premium {
    interpolate-size: allow-keywords;
}
#inner-circle .ic-view-premium > .ic-premium-head,
#inner-circle .ic-view-premium > .ic-menu-options,
#inner-circle .ic-contact-pills {
    overflow: hidden;
    transition: height 640ms cubic-bezier(0.32, 0.72, 0, 1),
                margin 640ms cubic-bezier(0.32, 0.72, 0, 1),
                padding 640ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 380ms ease;
}
#inner-circle .ic-view-premium > .ic-premium-head,
#inner-circle .ic-view-premium > .ic-menu-options {
    height: auto;
    opacity: 1;
}
#inner-circle .ic-view-premium[data-contact-open="true"] > .ic-premium-head,
#inner-circle .ic-view-premium[data-contact-open="true"] > .ic-menu-options {
    height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
#inner-circle .ic-view-premium[data-contact-open="true"] .ic-menu-foot {
    padding-top: 0;
    padding-bottom: 1.2rem;
    border-top: 1px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,0.35);
}

/* Contact pills */
#inner-circle .ic-contact-pills {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    height: 0;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}
#inner-circle .ic-view-premium[data-contact-open="true"] .ic-contact-pills {
    height: auto;
    opacity: 1;
    pointer-events: auto;
    padding: 3.5rem 1rem 2rem;
}
#inner-circle .ic-contact-pill {
    background: var(--bg-color);
    color: var(--black);
    border: 2px solid var(--black);
    border-radius: 999px;
    padding: 1rem 2.4rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1.4rem;
    text-decoration: none;
    line-height: 1;
    position: relative;
    transition: transform 380ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 280ms ease;
    will-change: transform;
}
#inner-circle .ic-contact-pill + .ic-contact-pill {
    margin-left: -2.6rem;
}
#inner-circle .ic-contact-pill-email      { z-index: 1; }
#inner-circle .ic-contact-pill-instagram  { z-index: 2; }
#inner-circle .ic-contact-pill-whatsapp   { z-index: 3; }
#inner-circle .ic-contact-pill:hover {
    z-index: 10;
    transform: translateY(-0.6rem);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
#inner-circle .ic-contact-pill-email:hover    { transform: translate(-2.2rem, -0.6rem); }
#inner-circle .ic-contact-pill-instagram:hover { transform: translateY(-1.2rem); }
#inner-circle .ic-contact-pill-whatsapp:hover { transform: translate(2.2rem, -0.6rem); }
#inner-circle .ic-menu-contact-title {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1.8rem;
    color: var(--white);
    letter-spacing: -0.01em;
    transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 250ms ease;
}
#inner-circle .ic-menu-contact-sub {
    font-family: 'Space Mono', 'Inter', monospace;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--white);
    opacity: 0.7;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
#inner-circle .ic-menu-foot:hover .ic-menu-contact-title { transform: translateY(-2px); }

/* Kits coming-soon overlay */
#inner-circle .ic-coming-wrap {
    position: relative;
}
#inner-circle .ic-beats-grid-placeholder {
    filter: blur(6px);
    opacity: 0.35;
    pointer-events: none;
}
#inner-circle .ic-beat-placeholder {
    background: var(--black);
    border: 2px solid rgba(255,255,255,0.4);
}
#inner-circle .ic-coming-soon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 2.6rem;
    color: var(--white);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    pointer-events: none;
}

#inner-circle .ic-premium-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}

#inner-circle .ic-filter-btn {
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.4rem 0.6rem;
}
#inner-circle .ic-filter-btn span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--white);
}
#inner-circle .ic-filter-btn:hover span { background: var(--bg-color); }

#inner-circle .ic-premium-title {
    position: relative;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 3.2rem;
    color: var(--white);
    border-bottom: 4px solid var(--white);
    padding: 0 2rem 0.6rem;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.015em;
    text-transform: lowercase;
}
#inner-circle .ic-premium-title::before,
#inner-circle .ic-premium-title::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 4px;
    height: 14px;
    background: var(--white);
}
#inner-circle .ic-premium-title::before { left: 0; }
#inner-circle .ic-premium-title::after  { right: 0; }

#inner-circle .ic-beats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    max-width: 1100px;
    margin: 0 auto;
    transform: translateY(-12px);
    opacity: 0;
    transition: opacity 500ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#inner-circle .ic-view-premium[data-premium-view="beats"]   .ic-pane-beats   .ic-beats-grid,
#inner-circle .ic-view-premium[data-premium-view="samples"] .ic-pane-samples .ic-beats-grid,
#inner-circle .ic-view-premium[data-premium-view="kits"]    .ic-pane-kits    .ic-beats-grid {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 120ms;
}

@media (max-width: 900px) {
    #inner-circle .ic-beats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    #inner-circle .ic-beats-grid { grid-template-columns: 1fr; }
    #inner-circle .ic-view-premium { padding: 2rem 1.5rem 1.25rem; }
}

/* Inner Circle beat cards: square, dark theme, inherit slide behavior from .beat-card */
#inner-circle .ic-beat-card {
    aspect-ratio: 1 / 1;
    height: auto;
    min-height: 0;
    background: var(--black);
    border: 2px solid var(--white);
    color: var(--white);
    padding: 1.2rem;
}

/* Match meta font to artist/title (per request) */
#inner-circle .ic-beat-card > .card-meta {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    top: 1.2rem;
    left: 1.2rem;
}

/* IC card title/artist positioning.
   Uses `top` + `transform: translate(-100%)` for right/bottom anchoring
   instead of `right`/`bottom` with `auto`s on the opposite side. This
   matters because CSS cannot interpolate between `auto` and a length,
   and we want the hover slide between corner layouts to animate smoothly.
   Default (also used by L4 artist and the hover/playing state): title at
   bottom-left, artist 3rem above bottom. */
#inner-circle .ic-beat-card > .card-title,
#inner-circle .ic-beat-card > .card-artist {
    left: 1.2rem;
    right: auto;
    bottom: auto;
    transform: translateY(-100%);
    max-width: calc(100% - 2.4rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    padding-bottom: 0.15em;
}
#inner-circle .ic-beat-card > .card-title {
    top: calc(100% - 1.2rem);
}
#inner-circle .ic-beat-card > .card-artist {
    top: calc(100% - 3rem);
}

/* Hover / playing: snap back to the default left-edge stack. The properties
   below all interpolate against the layout-corner values set further down. */
#inner-circle .ic-beat-card:hover > .card-title,
#inner-circle .ic-beat-card:hover > .card-artist,
#inner-circle .ic-beat-card.playing > .card-title,
#inner-circle .ic-beat-card.playing > .card-artist {
    left: 1.2rem;
    right: auto;
    bottom: auto;
    writing-mode: horizontal-tb;
    text-align: left;
    font-style: normal;
    letter-spacing: normal;
    /* Reserve the right gutter occupied by the (now visible) genre block so a
       long artist/title line ellipsizes before crossing into it. */
    max-width: calc(100% - 2.4rem - 7rem);
}
#inner-circle .ic-beat-card:hover > .card-title,
#inner-circle .ic-beat-card.playing > .card-title {
    top: calc(100% - 1.2rem);
    transform: translateY(-100%);
}
#inner-circle .ic-beat-card:hover > .card-artist,
#inner-circle .ic-beat-card.playing > .card-artist {
    top: calc(100% - 3rem);
    transform: translateY(-100%);
}

/* ===== 4 IC LAYOUTS — title & artist in opposite corners =====
   L1: title BL, artist TR  |  L2: title TL, artist BR
   L3: title BR, artist TL  |  L4: title TR, artist BL
   Each corner is expressed via top + left + a translate so transitions
   between layouts and into the hover state always interpolate. */
#inner-circle .ic-beat-card.ic-layout-1:not(:hover):not(.playing) > .card-title {
    left: 1.2rem; top: calc(100% - 1.2rem); transform: translateY(-100%);
    text-align: left; font-size: 1.5rem;
}
#inner-circle .ic-beat-card.ic-layout-1:not(:hover):not(.playing) > .card-artist {
    left: calc(100% - 1.2rem); top: 1.2rem; transform: translateX(-100%);
    text-align: right; opacity: 0.7;
}

#inner-circle .ic-beat-card.ic-layout-2:not(:hover):not(.playing) > .card-title {
    left: 1.2rem; top: 1.2rem; transform: none;
    text-align: left; font-size: 1.5rem;
}
#inner-circle .ic-beat-card.ic-layout-2:not(:hover):not(.playing) > .card-artist {
    left: calc(100% - 1.2rem); top: calc(100% - 1.2rem); transform: translate(-100%, -100%);
    text-align: right; opacity: 0.7;
}

#inner-circle .ic-beat-card.ic-layout-3:not(:hover):not(.playing) > .card-title {
    left: calc(100% - 1.2rem); top: calc(100% - 1.2rem); transform: translate(-100%, -100%);
    text-align: right; font-size: 1.5rem;
}
#inner-circle .ic-beat-card.ic-layout-3:not(:hover):not(.playing) > .card-artist {
    left: 1.2rem; top: 1.2rem; transform: none;
    text-align: left; opacity: 0.7;
}

#inner-circle .ic-beat-card.ic-layout-4:not(:hover):not(.playing) > .card-title {
    left: calc(100% - 1.2rem); top: 1.2rem; transform: translateX(-100%);
    text-align: right; font-size: 1.5rem;
}
#inner-circle .ic-beat-card.ic-layout-4:not(:hover):not(.playing) > .card-artist {
    left: 1.2rem; top: calc(100% - 1.2rem); transform: translateY(-100%);
    text-align: left; opacity: 0.7;
}

/* On dark background, default state stays dark; hover keeps text white */
#inner-circle .ic-beat-card:hover,
#inner-circle .ic-beat-card.playing {
    background: var(--black);
    color: var(--white);
}
#inner-circle .ic-beat-card:hover > .card-meta,
#inner-circle .ic-beat-card:hover > .card-title,
#inner-circle .ic-beat-card:hover > .card-artist,
#inner-circle .ic-beat-card.playing > .card-meta,
#inner-circle .ic-beat-card.playing > .card-title,
#inner-circle .ic-beat-card.playing > .card-artist {
    color: var(--white);
}

/* Card actions: download (active) + request stems (active, no IC tag) */
#inner-circle .ic-beat-card .card-actions .ic-tag { display: none; }
#inner-circle .ic-beat-card .card-actions .stems-btn {
    background: var(--white);
    color: var(--black);
    border-style: solid;
    cursor: pointer;
}
#inner-circle .ic-beat-card .card-actions .stems-btn:hover {
    background: transparent;
    color: var(--white);
}

/* Mood dropdown */
#inner-circle .ic-mood-dropdown {
    position: absolute;
    top: 2.6rem;
    left: 0;
    z-index: 30;
    background: var(--bg-color);
    color: var(--black);
    border: 2px solid var(--black);
    padding: 1rem 1.2rem;
    min-width: 240px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
#inner-circle .ic-mood-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#inner-circle .ic-mood-dropdown label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1rem;
}
#inner-circle .ic-mood-tag {
    padding: 0.15rem 0.5rem;
}
#inner-circle .ic-mood-tag[data-mood="melancholic"] { background: #a9def9; }
#inner-circle .ic-mood-tag[data-mood="dark"]        { background: #e4c1f9; }
#inner-circle .ic-mood-tag[data-mood="chill"]       { background: #d0f4de; }
#inner-circle .ic-mood-tag[data-mood="hype"]        { background: #fcf6bd; }
#inner-circle .ic-mood-tag[data-mood="aggressive"]  { background: #ffadad; }
#inner-circle .ic-mood-tag[data-mood="mysterious"]  { background: #ffd6a5; }
#inner-circle .ic-mood-tag[data-mood="dreamy"]      { background: #ff99c8; }

#inner-circle .ic-mood-dropdown input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--black);
    margin-left: 0.8rem;
}

#inner-circle .ic-beat-card.ic-mood-hidden,
#inner-circle .ic-beat-card.ic-month-hidden { display: none; }

/* === Exclusive-content month navigator === */
/* Compact `← MAY 2026 →` strip above each IC pane's beat grid. Keeps the
   grid to one month at a time so the section stays tight as more drops
   accumulate. Sits centered above .ic-beats-grid; the .ic-filter-btn keeps
   its absolute top-left position untouched. */
#inner-circle .ic-month-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin: 0 auto 1.4rem;
    max-width: 1100px;
}
#inner-circle .ic-month-label {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    min-width: 9.5rem;
    text-align: center;
    line-height: 1;
}
#inner-circle .ic-month-arrow {
    background: transparent;
    border: 1.5px solid rgba(250, 249, 246, 0.45);
    color: var(--white);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
#inner-circle .ic-month-arrow:hover:not(:disabled) {
    border-color: var(--white);
    transform: translateY(-1px);
}
#inner-circle .ic-month-arrow:disabled {
    opacity: 0.25;
    cursor: default;
}

/* Shown inside an IC pane when an active mood filter hides every card.
   Keeps the pane tall enough that the filter button stays in view, and
   gives the user a one-click escape hatch. */
#inner-circle .ic-empty-state {
    padding: 4rem 1.5rem 2.5rem;
    text-align: center;
    color: var(--white);
}
#inner-circle .ic-empty-message {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 700;
    font-size: 1.1rem;
    margin: 0 0 1.2rem;
    opacity: 0.75;
}
#inner-circle .ic-empty-clear {
    background: var(--white);
    color: var(--black);
    border: none;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
#inner-circle .ic-empty-clear:hover { opacity: 0.85; }

@media (max-width: 600px) {
        #inner-circle .ic-stage { padding: 2rem 1rem; min-height: 480px; }
    #inner-circle .ic-view { padding: 2rem 1rem; min-height: 0; }
}

#account {
    background-color: var(--black);
    color: var(--white);
}

/* Badge wrapper + magic sparkles */
.badge-wrap {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    line-height: 0;
    z-index: 5;
}

.spark {
    position: absolute;
    pointer-events: none;
    line-height: 0;
    will-change: transform, opacity;
    image-rendering: pixelated;
    z-index: 6;
}

.spark svg {
    display: block;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

.spark-1 { top: -10px;  left: -8px;   color: #ff2d95; animation: sparkleA 1.8s ease-in-out infinite; }
.spark-2 { top: -6px;   right: -4px;  color: #ffe600; animation: sparkleB 1.6s ease-in-out infinite 0.15s; }
.spark-3 { bottom: -10px; left: 22%;  color: #00e5ff; animation: sparkleC 2.1s ease-in-out infinite 0.4s; }
.spark-4 { top: 30%;    right: -10px; color: #39ff14; animation: sparkleD 1.9s ease-in-out infinite 0.3s; }
.spark-5 { bottom: -6px; right: 18%;  color: #c026ff; animation: sparkleE 1.7s ease-in-out infinite 0.55s; }
.spark-6 { top: 45%;    left: -8px;   color: #ff7a00; animation: sparkleA 2.0s ease-in-out infinite 0.7s; }

.spark { transition: filter 0.6s ease; }

#beats.accordion-item.active .spark {
    filter: opacity(0.3);
    animation-duration: 9s;
}

#beats.accordion-item.active .spark-3,
#beats.accordion-item.active .spark-4,
#beats.accordion-item.active .spark-6 {
    display: none;
}

.spark svg rect { fill: currentColor; }

@keyframes sparkleA {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.7); opacity: 0.4; }
    25%      { transform: translate(-3px, -2px) rotate(45deg) scale(1.1); opacity: 1; }
    50%      { transform: translate(2px, -4px) rotate(0deg) scale(0.6); opacity: 0.5; }
    75%      { transform: translate(-1px, 2px) rotate(-45deg) scale(1); opacity: 0.95; }
}

@keyframes sparkleB {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.9; }
    33%      { transform: translate(2px, 3px) rotate(45deg) scale(0.5); opacity: 0.3; }
    66%      { transform: translate(-2px, -2px) rotate(-30deg) scale(1.15); opacity: 1; }
}

@keyframes sparkleC {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.8); opacity: 0.5; }
    20%      { transform: translate(3px, -3px) rotate(30deg) scale(1.2); opacity: 1; }
    50%      { transform: translate(-3px, 2px) rotate(-30deg) scale(0.6); opacity: 0.4; }
    80%      { transform: translate(1px, 3px) rotate(60deg) scale(1); opacity: 0.95; }
}

@keyframes sparkleD {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0.3; }
    40%      { transform: translate(-4px, -1px) rotate(-45deg) scale(1.1); opacity: 1; }
    70%      { transform: translate(3px, 2px) rotate(45deg) scale(0.8); opacity: 0.7; }
}

@keyframes sparkleE {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(0.9); opacity: 0.85; }
    30%      { transform: translate(-2px, 3px) rotate(-60deg) scale(0.5); opacity: 0.3; }
    60%      { transform: translate(3px, -2px) rotate(30deg) scale(1.2); opacity: 1; }
}

/* Badge */
.badge {
    display: inline-block;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-color);
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 700;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.3rem 1rem 0.4rem;
    margin-left: 1.2rem;
    vertical-align: middle;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}

.dark .badge {
    border-color: var(--white);
    color: var(--black);
}

/* Content Area */
.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.accordion-item.active .accordion-content {
    max-height: 2000px;
    opacity: 1;
}

.inner-content {
    padding: 2rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Beats Section Styling */
.beats-layout {
    display: flex;
    position: relative;
    margin-bottom: calc(-1 * var(--border-width));
}

#beats.accordion-item.active .accordion-content {
    overflow: visible;
}

#samples {
    position: relative;
    z-index: 2;
}

.month-cell-group {
    height: 420px;
    border-bottom: var(--border-width) solid var(--border-color);
    border-right: var(--border-width) solid var(--border-color);
    position: relative;
    overflow: hidden;
    z-index: 3;
}

.state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
}

.month-cell-group[data-state="months"] .state-months,
.month-cell-group[data-state="filter"] .state-filter,
.month-cell-group[data-state="mood"] .state-mood,
.month-cell-group[data-state="genre"] .state-genre {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.state-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
}

.state-scroll::-webkit-scrollbar {
    display: none;
}

.state-scroll.at-end {
    -webkit-mask-image: none;
            mask-image: none;
}

.header-cell {
    flex: 0 0 70px !important;
    font-size: 1.25rem !important;
    cursor: pointer;
    padding-left: 3.25rem !important; /* reserve space for the persistent .state-back-arrow */
}

/* The "←" arrow used to live as a ::before of .header-cell, which lives inside
   the fading .state container. That made the arrow fade together with its
   word during state transitions. We now render the arrow as a standalone
   element in .month-cell-group that does NOT fade. The header-cell still
   reserves the space (left padding handled below). */
.state-back-arrow {
    position: absolute;
    top: 0;
    left: 1.5rem;
    height: 70px;
    display: flex;
    align-items: center;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
    pointer-events: none;
    z-index: 4;
    visibility: hidden;
}

.month-cell-group:not([data-state="months"]) .state-back-arrow {
    visibility: visible;
}

.month-cell.filter-option {
    flex: 1 1 0;
}

.filter-count {
    display: none;
    margin-left: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1.4rem;
    text-align: center;
    vertical-align: middle;
}

.filter-count.visible {
    display: inline-block;
}

.filter-clear {
    display: none;
    margin-left: 0.4rem;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.4rem;
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    transition: background 0.15s, color 0.15s;
}

.filter-clear.visible {
    display: inline-block;
}

.filter-clear:hover {
    background: var(--black);
    color: var(--white);
}

.sub-options {
    list-style: none;
    margin: 0;
    margin-top: calc(-1 * var(--border-width));
    padding: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 32px), transparent 100%);
}

.sub-options::-webkit-scrollbar {
    display: none;
}

.sub-options.at-end {
    -webkit-mask-image: none;
            mask-image: none;
}

.sub-options li {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.5rem;
    padding: 0.9rem 1.5rem;
    cursor: pointer;
    border-bottom: var(--border-width) solid var(--border-color);
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, box-shadow 0.12s ease;
    box-shadow: inset 0 0 0 0 var(--black);
}

.sub-options li:last-child {
    border-bottom: none;
}

.sub-options li:hover {
    box-shadow: none;
}

.sub-options li.active {
    background: var(--black);
    color: var(--white);
}

.state-mood .sub-options li:nth-child(1) { --mood-color: #a9def9; }
.state-mood .sub-options li:nth-child(2) { --mood-color: #e4c1f9; }
.state-mood .sub-options li:nth-child(3) { --mood-color: #d0f4de; }
.state-mood .sub-options li:nth-child(4) { --mood-color: #fcf6bd; }
.state-mood .sub-options li:nth-child(5) { --mood-color: #ffadad; }
.state-mood .sub-options li:nth-child(6) { --mood-color: #ffd6a5; }
.state-mood .sub-options li:nth-child(7) { --mood-color: #ff99c8; }

.state-mood .sub-options li:hover,
.state-mood .sub-options li.active {
    background: var(--mood-color);
    color: var(--black);
}

.state-mood .sub-options li:hover {
    box-shadow: none;
}

.month-cell {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: 2rem;
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    flex: 0 0 105px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background 0.2s, color 0.2s, box-shadow 0.12s ease;
    line-height: 1;
    text-transform: uppercase;
    border-bottom: var(--border-width) solid var(--border-color);
    box-shadow: inset 0 0 0 0 var(--black);
}

.month-cell:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
}

.month-cell:last-child {
    border-bottom: none;
}

.state-scroll .month-cell:last-child {
    border-bottom: var(--border-width) solid var(--border-color);
}

.month-cell.active {
    background: var(--black);
    color: var(--white);
}

.state-scroll .month-cell {
    flex: 0 0 90px;
}

.state-mood .sub-options li,
.state-genre .sub-options li {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.state-genre .sub-options li:not(.active):hover {
    background: rgba(255, 255, 255, 0.04);
}

.beats-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Strict 4-column grid */
    grid-auto-rows: 420px;
    gap: 0; /* No gaps to avoid half lines */
    position: relative;
    /* Inner column dividers come from each card's border-right, so all lines
       (outer + inner) share the same border-width and stay visually consistent. */
}

.beats-grid::-webkit-scrollbar {
    display: none;
}

.beat-card.last-row {
    border-bottom: none;
}


.beats-grid .beat-card:nth-child(4n) {
    margin-right: calc(-1 * var(--border-width));
}

/* Leftmost column needs a left border so it matches the white outer line on the right.
   month-cell-group is DOM child 1 (spans 1/-1) → beat-cards start at child 2,
   so col-1 cards are at :nth-child(4n+2). */
.beats-grid .beat-card:nth-child(4n+2) {
    border-left: var(--border-width) solid var(--border-color);
}

.beat-card {
    position: relative;
    border-bottom: var(--border-width) solid var(--border-color);
    border-left: none;
    border-top: none;
    border-right: var(--border-width) solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    cursor: pointer;
    transition: background 0.2s;
    height: 420px; /* Portrait orientation: taller than wide */
    margin: 0;
}


.card-meta {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    opacity: 1;
    transition: color 0.2s;
    pointer-events: none;
}


.beat-card.playing {
    background: var(--black);
    color: var(--white);
    /* Use outline (no own stacking context) instead of box-shadow + z-index.
       z-index: 3 plus the inset shadow was making the grid line above the
       playing card disappear, because the playing card formed its own
       stacking context that interfered with the neighbour card's
       border-bottom rendering at the shared edge. */
    outline: var(--border-width) solid var(--white);
    outline-offset: calc(-1 * var(--border-width));
}

.beat-card.playing .lissajous {
    opacity: 1;
}

.beat-card .lissajous {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    mix-blend-mode: screen;
    z-index: 0;
}

.beat-card:hover .lissajous {
    opacity: 1;
}

.beat-card > .card-meta {
    z-index: 1;
}

.beat-card > .card-artist,
.beat-card > .card-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition:
        left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.2s ease,
        opacity 0.2s ease;
    will-change: transform, left;
    width: max-content;
    max-width: calc(100% - 3rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    padding-bottom: 0.1em;
}

.beat-card > .card-title {
    bottom: 1.5rem;
}

.beat-card > .card-artist {
    bottom: 3.1rem;
}

.beat-card:hover > .card-title,
.beat-card:hover > .card-artist,
.beat-card.playing > .card-title,
.beat-card.playing > .card-artist {
    left: 1.5rem;
    transform: translateX(0);
}

.beat-card > .card-meta,
.beat-card > .card-genre {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.beat-card:hover > .card-meta,
.beat-card:hover > .card-genre,
.beat-card.playing > .card-meta,
.beat-card.playing > .card-genre {
    opacity: 1;
}

.card-actions {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s;
}

.beat-card:hover .card-actions,
.beat-card:has(.dl-wrap.open) .card-actions {
    opacity: 1;
}

.card-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--white);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    display: inline-block;
}

.card-btn:hover {
    background: transparent;
    color: var(--white);
}

.card-btn.stems-btn {
    background: transparent;
    color: var(--white);
    border-style: dashed;
}

.card-btn.stems-btn:not(.stems-locked) {
    border-style: solid;
    background: var(--white);
    color: var(--black);
}

.card-btn.stems-btn:not(.stems-locked):hover {
    background: transparent;
    color: var(--white);
}

.card-btn.stems-btn:hover {
    background: transparent;
    color: var(--white);
}

.ic-tag {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--white);
    padding: 0.25rem 0.7rem;
    border: 1.5px solid var(--white);
    border-radius: 999px;
    line-height: 1;
    margin-top: 0.1rem;
}

/* ===== Download format popover (MP3 / WAV) ===== */
.dl-wrap {
    position: relative;
    display: inline-block;
}

.dl-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 10;
    background: var(--black);
    border: 1.5px solid var(--white);
    border-radius: 4px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    min-width: 4.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    /* Subtle entrance: fade + slight upward slide */
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.dl-wrap.open .dl-popover {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dl-popover[hidden] {
    /* keep display:flex so transitions work; rely on opacity + pointer-events */
    display: flex;
}

.dl-popover-opt {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--white);
    border: none;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    text-align: right;
    line-height: 1;
    border-radius: 2px;
    transition: background 0.12s, color 0.12s;
}

.dl-popover-opt:hover:not(:disabled) {
    background: var(--white);
    color: var(--black);
}

.dl-popover-opt:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dl-wrap .download-btn[aria-expanded="true"] {
    background: var(--black);
    color: var(--white);
}



.beat-card.filter-hidden {
    visibility: hidden;
    pointer-events: none;
}

.card-artist {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
}

.card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    display: block;
    line-height: 1;
}

.card-genre {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-width: 8rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.25rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
    text-align: right;
}

.card-genre-item {
    display: block;
    line-height: 1;
    white-space: nowrap;
}

/* .card-genre is parked permanently at the middle-right band (see base rule
   above). It's opacity:0 at idle so still invisible until hover/playing.
   Keeping the position constant avoids a snap-back during the opacity
   fade-out (which used to make the genre flash bottom-right on mouse-out). */

/* With genre out of the bottom row on hover/playing, the 2-genre artist
   shift is only needed in the idle resting state (where genre is invisible
   anyway — keeps layout symmetrical if someone disables transitions). */
.beat-card:not(.ic-beat-card):has(.card-genre-item + .card-genre-item) > .card-artist {
    bottom: 3.1rem;
}

/* IC beat cards use 4 corner layouts for title/artist (L1..L4), and on
   hover/playing the title+artist slide to the left edge. The bottom-right
   corner is therefore frequently occupied, so anchor the genre block to
   the vertical middle of the right edge — that band is never used by
   title, artist, card-meta (top-left) or card-actions (top-right). */
#inner-circle .ic-beat-card .card-genre {
    top: 50%;
    bottom: auto;
    right: 1.2rem;
    transform: translateY(-50%);
    flex-direction: column;
    font-size: 0.95rem;
    max-width: 6.5rem;
}
#inner-circle .ic-beat-card .card-genre-item {
    white-space: normal;
    overflow-wrap: break-word;
}













.simple-form {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.simple-form input {
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    outline: none;
    flex-grow: 1;
}

.simple-form button {
    padding: 0.8rem 2rem;
    border-radius: 50px;
    border: none;
    background: var(--white);
    color: var(--black);
    font-weight: 700;
    cursor: pointer;
}

#account .simple-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
}

#account .simple-form input {
    width: 100%;
    font-size: 1.1rem;
}

#account .simple-form button {
    align-self: center;
    width: auto;
    padding: 0.8rem 2.6rem;
    font-size: 1.1rem;
    line-height: inherit;
    border: 2px solid transparent;
}

#account .simple-form button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#account .form-message {
    margin: 0.4rem 0 0 0;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 700;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.01em;
    color: var(--white);
    opacity: 0.85;
}

#account .form-message[data-kind="success"] {
    color: #a8e6c4;
    opacity: 1;
}

#account .form-message[data-kind="error"] {
    color: #f7a4a4;
    opacity: 1;
}

/* ===========================
   ACCOUNT — logged-in view
   =========================== */

#account .account-content {
    position: relative;
}

/* Stack logged-out and logged-in views to enable cross-fade.
   Active view is position:relative and dictates wrapper height;
   inactive view is absolutely positioned and faded out. */
#account .account-view {
    transition: opacity 320ms ease;
}

#account[data-account-state="logged-out"] .account-view-out,
#account[data-account-state="logged-in"]  .account-view-in {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#account[data-account-state="logged-out"] .account-view-in,
#account[data-account-state="logged-in"]  .account-view-out {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Mid-transition: both views absolutely positioned so wrapper height
   is controlled by JS. Both visible, opacity blends. */
#account.account-animating .account-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: visible;
    pointer-events: none;
}

/* --- Top bar: avatar + identity + logout --- */
.acc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.75rem;
    border-bottom: 1.5px solid rgba(250, 249, 246, 0.18);
    margin-bottom: 2rem;
}

.acc-identity {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}

.acc-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: visible;
    flex-shrink: 0;
}

.acc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--white);
    display: block;
}

.acc-avatar img[hidden] {
    display: none;
}

.acc-avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--white);
    background: var(--black);
    color: var(--white);
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 900;
    font-size: 1.7rem;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.acc-avatar img:not([hidden]) + .acc-avatar-initial {
    display: none;
}

.acc-list-empty .acc-list-meta {
    opacity: 0.55;
    font-style: italic;
}

.acc-avatar-edit {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--black);
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform 180ms ease;
}

.acc-avatar-edit:hover {
    transform: scale(1.08);
}

.acc-identity-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.acc-handle {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-meta {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.55;
}

.acc-logout {
    flex-shrink: 0;
    padding: 0.65rem 1.4rem;
    border-radius: 50px;
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    text-transform: lowercase;
    transition: background 180ms ease, color 180ms ease;
}

.acc-logout:hover {
    background: var(--white);
    color: var(--black);
}

/* --- Sections --- */
.acc-sections {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.acc-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.acc-section-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: lowercase;
    color: var(--white);
    letter-spacing: -0.01em;
}

.acc-section-count {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--white);
    opacity: 0.5;
}

/* --- Rows (key/value style for profile, payment, address) --- */
.acc-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
}

.acc-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(250, 249, 246, 0.12);
}

.acc-row-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.55;
}

.acc-row-value {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--white);
    line-height: 1.5;
    word-break: break-word;
}

.acc-row-action {
    padding: 0.45rem 1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(250, 249, 246, 0.4);
    background: transparent;
    color: var(--white);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    text-transform: lowercase;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.acc-row-action:hover {
    border-color: var(--white);
    background: var(--white);
    color: var(--black);
}

.acc-row-action--danger {
    border-color: rgba(255, 92, 92, 0.55);
    color: #ff8b8b;
}

.acc-row-action--danger:hover {
    background: #ff5c5c;
    border-color: #ff5c5c;
    color: var(--white);
}

/* --- List rows (beats, licenses, orders) --- */
.acc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
}

.acc-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(250, 249, 246, 0.12);
}

.acc-list-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--white);
    flex: 0 0 auto;
    min-width: 140px;
}

.acc-list-meta {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    flex: 1 1 220px;
}

.acc-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    border: 1.5px solid rgba(250, 249, 246, 0.35);
    color: var(--white);
    background: transparent;
}

.acc-pill--paid {
    border-color: rgba(170, 255, 170, 0.5);
    color: #b6ffb6;
}

.acc-list-action {
    flex: 0 0 auto;
    padding: 0.45rem 1.05rem;
    border-radius: 50px;
    border: 0;
    background: var(--white);
    color: var(--black);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    text-transform: lowercase;
    margin-left: auto;
    transition: transform 160ms ease, opacity 180ms ease;
}

.acc-list-action:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.acc-section--danger .acc-section-title {
    color: #ff8b8b;
}

/* --- Responsive --- */
@media (max-width: 720px) {
    .acc-topbar {
        flex-wrap: wrap;
    }
    .acc-logout {
        margin-left: auto;
    }
    .acc-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label action"
            "value value";
        gap: 0.4rem 1rem;
    }
    .acc-row-label  { grid-area: label; }
    .acc-row-action { grid-area: action; }
    .acc-row-value  { grid-area: value; }

    .acc-list-name { min-width: 0; flex: 1 1 100%; }
    .acc-list-meta { flex: 1 1 100%; }
    .acc-list-action { margin-left: 0; }
}

@media (max-width: 480px) {
    .acc-avatar { width: 60px; height: 60px; }
    .acc-handle { font-size: 1rem; }
    .acc-section-title { font-size: 1.15rem; }
}

/* Samples Section */
.samples-list {
    padding: 0 2rem 2rem 2rem;
    font-family: 'Inter', sans-serif;
}

.sample-pack {
    border-bottom: 1.5px solid var(--border-color);
}

.sample-pack:first-child {
    border-top: 1.5px solid var(--border-color);
}

.pack-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.4rem 1rem 1.4rem 0.9rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.2rem;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.12s ease, padding-left 0.25s ease;
    box-shadow: inset 0 0 0 0 var(--black);
}

.pack-row:hover {
    box-shadow: inset 3px 0 0 0 var(--black);
    padding-left: 1.3rem;
}

.sample-pack.open .pack-row:hover {
    padding-left: 0.9rem;
}

.sample-pack.open .pack-row {
    background: var(--black);
    color: var(--white);
    box-shadow: none;
}


.pack-name {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
}

.pack-count {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    pointer-events: none;
    white-space: nowrap;
    justify-self: end;
}

.pack-artists {
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pack-download {
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    padding: 0.45rem 1.3rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sample-pack:not(.open) .pack-download:hover {
    background: var(--black);
    color: var(--white);
}

.sample-pack.open .pack-download:hover {
    background: var(--white);
    color: var(--black);
}

.pack-samples {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.sample-pack.open .pack-samples {
    max-height: 1500px;
}

.sample-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0.95rem 1rem 0.95rem 0.9rem;
    border-top: 1px solid rgba(33, 32, 30, 0.35);
    cursor: pointer;
    font-size: 1.1rem;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.12s ease, padding-left 0.2s ease;
    box-shadow: inset 0 0 0 0 var(--black);
}

.sample-row:hover {
    box-shadow: inset 3px 0 0 0 var(--black);
    padding-left: 1.3rem;
}

.sample-row.playing {
    background: var(--black);
    color: var(--white);
    box-shadow: inset 0 0 0 3px var(--white);
    font-weight: 700;
    padding-left: 0.9rem;
}

.sample-row.playing:hover {
    box-shadow: inset 0 0 0 3px var(--white);
}

.sample-row .s-name {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-left: 1.5rem;
}

.s-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
}

.s-play-icon > span {
    display: none;
}

.sample-row.playing .s-play-icon {
    width: 14px;
    height: 14px;
    border: none;
    display: inline-flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    flex-shrink: 0;
}

.sample-row.playing .s-play-icon > span {
    display: block;
    width: 3px;
    background: var(--white);
    border-radius: 1px;
    transform-origin: bottom;
    animation: eq-bar 0.85s ease-in-out infinite;
}

.sample-row.playing .s-play-icon > span:nth-child(1) { animation-duration: 0.7s; }
.sample-row.playing .s-play-icon > span:nth-child(2) { animation-duration: 1s; animation-delay: 0.18s; }
.sample-row.playing .s-play-icon > span:nth-child(3) { animation-duration: 0.85s; animation-delay: 0.32s; }

@keyframes eq-bar {
    0%, 100% { height: 30%; }
    50%      { height: 100%; }
}

.s-name {
    font-weight: 800;
}

.s-bpm {
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    pointer-events: none;
    white-space: nowrap;
    justify-self: end;
}

.sample-row.playing .s-bpm {
    opacity: 1;
}

.s-artists {
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    justify-self: start;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pack-row .pack-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.7rem;
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
    min-width: 1.5rem;
}

.pack-row .pack-toggle::before {
    content: '[+]';
}

.sample-pack.open .pack-toggle::before {
    content: '[−]';
}

/* Floating Beat Player */
.beat-player {
    position: fixed;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%) translateY(calc(-1 * var(--vv-offset, 0px)));
    background: #F4F1EA;
    border: 2px solid var(--border-color);
    border-radius: 999px;
    padding: 0.6rem 1rem 0.6rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: bottom 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    width: min(560px, calc(100vw - 2rem));
    will-change: bottom;
}

.beat-player.visible {
    bottom: 2rem;
    opacity: 1;
    pointer-events: auto;
}

.bp-play {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--black);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bp-play .bp-icon-pause { display: none; }
.beat-player.is-playing .bp-play .bp-icon-play { display: none; }
.beat-player.is-playing .bp-play .bp-icon-pause { display: block; }

.bp-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    margin-right: 0;
    transition: max-width 0.4s ease, opacity 0.3s ease, margin-right 0.4s ease;
    white-space: nowrap;
}

.bp-name,
.bp-prod {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    display: block;
}

.beat-player.show-meta .bp-meta {
    max-width: 200px;
    opacity: 1;
    margin-right: 0.4rem;
}

.bp-name {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--black);
    text-overflow: ellipsis;
    overflow: hidden;
}

.bp-prod {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--black);
    opacity: 0.7;
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bp-waveform {
    flex: 1 1 auto;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    cursor: pointer;
    overflow: hidden;
}

.bp-bar {
    flex: 1 1 0;
    background: var(--black);
    opacity: 0.25;
    border-radius: 1px;
    min-width: 2px;
    transition: opacity 0.1s linear;
}

.bp-bar.played {
    opacity: 0.95;
}

.bp-time {
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--black);
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 92px;
    text-align: right;
}

/* Studio (CCTV) Section */
#studio .accordion-header {
    margin-bottom: calc(-1 * var(--border-width));
}

#studio.accordion-item.active .accordion-header {
    padding-bottom: 0.5rem;
}

#studio.accordion-item.active .accordion-content {
    max-height: 4000px;
    overflow: visible;
}

.studio-layout {
    width: 100%;
    background-color: var(--grey-3);
    padding: 2.5rem;
    position: relative;
}

/* ===== STUDIO TOP CTA ===== */
.studio-cta {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1.4rem 1.8rem;
    margin-bottom: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
}

.studio-cta-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    justify-self: start;
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-color);
    opacity: 0.85;
}

.studio-cta-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff2a2a;
    box-shadow: 0 0 10px rgba(255, 42, 42, 0.85);
    animation: studioCtaPulse 1.4s ease-in-out infinite;
}

@keyframes studioCtaPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.85); }
}

.studio-cta-price {
    justify-self: end;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: 'Archivo', sans-serif;
    color: var(--text-color);
}

.studio-cta-price-num {
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.6rem;
    letter-spacing: 0;
    line-height: 1;
}

.studio-cta-price-unit {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}

.studio-book-hero {
    justify-self: center;
    align-self: center;
    position: relative;
    overflow: hidden;
    background: var(--border-color);
    color: var(--bg-color);
    border: 3px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.35rem;
    text-transform: lowercase;
    letter-spacing: 0;
    padding: 0.85rem 2.6rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.studio-book-main {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    z-index: 2;
}

.studio-book-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff2a2a;
    box-shadow: 0 0 8px rgba(255, 42, 42, 0.9);
    animation: studioCtaPulse 1.4s ease-in-out infinite;
}

.studio-book-ticker {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    margin-top: 0.55rem;
    font-family: 'VT323', 'VCR OSD Mono', monospace;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text-color);
    opacity: 0.75;
    line-height: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.18);
}

/* Diagonal shine sweep on hover */
.studio-book-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 65%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}

.studio-book-hero:hover .studio-book-shine {
    animation: studioBookShine 0.9s ease-out;
}

@keyframes studioBookShine {
    0%   { left: -120%; }
    100% { left: 220%; }
}

.studio-book-hero:hover {
    background: transparent;
    color: var(--text-color);
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

#studio.dark .studio-book-hero {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}

#studio.dark .studio-book-hero:hover {
    background: transparent;
    color: var(--white);
}

@media (prefers-reduced-motion: reduce) {
    .studio-book-dot { animation: none; }
    .studio-book-hero:hover .studio-book-shine { animation: none; }
}

@media (max-width: 768px) {
    .studio-cta {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.1rem 1rem;
        margin-bottom: 1.5rem;
    }
    .studio-cta-meta,
    .studio-cta-price { justify-self: center; }
    .studio-book-hero { font-size: 1.15rem; padding: 0.7rem 2rem; width: 100%; justify-content: center; }
    .studio-book-ticker { grid-column: 1 / -1; grid-row: auto; margin-top: 0.2rem; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .studio-cta-dot { animation: none; }
    .studio-book-hero { transition: none; }
}

.studio-layout.booking-active .studio-grid,
.studio-layout.booking-active .studio-footer {
    filter: grayscale(0.4) brightness(0.92);
    transition: filter 0.45s ease;
}

.studio-layout .studio-grid,
.studio-layout .studio-footer {
    transition: filter 0.45s ease;
}

.studio-layout.booking-active .studio-book {
    opacity: 0;
    pointer-events: none;
}

.studio-book {
    transition: opacity 0.18s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Booking window-in-window */
.studio-booking {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, 90vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--bg-color);
    border: 3px solid var(--border-color);
    padding: 1.6rem 1.4rem 1.8rem 1.4rem;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity, border-radius;
    border-radius: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.studio-booking-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2900;
    background: rgba(250, 249, 246, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.studio-booking-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.studio-booking.morphing {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.studio-booking.active {
    opacity: 1;
    pointer-events: auto;
}

.booking-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

.studio-booking.active .booking-content {
    opacity: 1;
}

.booking-brand-pill {
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.35rem 1.4rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 0.95rem;
    color: var(--text-color);
    letter-spacing: 0.02em;
}

.booking-calendar {
    width: 100%;
    background: #1c1c1e;
    color: #f2f2f2;
    border-radius: 12px;
    padding: 0.7rem 0.75rem 0.85rem 0.75rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
}

/* producer picker — three tiers above the calendar. Tactile cards with
   strong active state; matches the dark Apple-widget aesthetic of the
   calendar so the modal reads as one connected surface. */
.booking-producers {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: #1c1c1e;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.bp-tier {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #d8d8da;
    padding: 0.55rem 0.4rem 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    line-height: 1.05;
}
.bp-tier:hover:not(.active) { background: #2c2c2e; color: #fff; }
.bp-tier:active { transform: scale(0.98); }
.bp-tier.active {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #fff;
}
.bp-tier-name {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.bp-tier-role {
    font-size: 0.55rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-top: 1px;
}
.bp-tier.active .bp-tier-role { opacity: 0.85; }
.bp-tier-price {
    margin-top: 4px;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.bp-tier-unit {
    font-size: 0.6rem;
    opacity: 0.7;
}

.bc-month-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.4rem 0;
    padding: 0 0.1rem;
}
.bc-month-label {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    flex: 1;
}
.bc-month-nav {
    appearance: none;
    background: transparent;
    color: #d8d8da;
    border: 0;
    padding: 2px 8px;
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    line-height: 1;
}
.bc-month-nav:hover { background: #3a3a3c; }

.bc-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    color: #8e8e93;
    font-size: 0.62rem;
    padding: 0 0.1rem 0.25rem 0.1rem;
    border-bottom: 1px solid #2c2c2e;
}
.bc-weekdays span { text-align: left; padding-left: 4px; }

.bc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-top: 4px;
}
.bc-cell {
    aspect-ratio: 1.15 / 1;
    padding: 4px 5px;
    color: #d8d8da;
    font-size: 0.68rem;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    font-family: inherit;
}
.bc-cell.muted { color: #5a5a5e; }
.bc-cell.today {
    background: #0a84ff;
    color: #fff;
    font-weight: 600;
}
.bc-cell.selected:not(.today) {
    background: #3a3a3c;
    color: #fff;
}
.bc-cell:hover:not(.today) { background: #2c2c2e; }

.booking-price-pill {
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.3rem 1.1rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 700;
    font-size: 0.9rem;
}

.booking-checkout {
    background: var(--border-color);
    color: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.45rem 1.4rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 0.95rem;
    cursor: pointer;
    text-transform: lowercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.booking-checkout:hover {
    background: var(--bg-color);
    color: var(--border-color);
}
.booking-checkout:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* availability states for calendar cells */
.bc-cell.unavailable {
    opacity: 0.25;
    pointer-events: none;
}
.bc-cell.available {
    border-color: rgba(10, 132, 255, 0.55);
    color: #fff;
}
.bc-cell.available:hover { background: rgba(10, 132, 255, 0.25); }
.bc-cell.selected.available { background: #0a84ff; color: #fff; border-color: #0a84ff; }

/* slot picker — same dark Apple widget styling as .booking-calendar
   (the element carries both classes). Buttons mirror .bc-cell. */
.booking-slotpick .bsp-hint {
    font-size: 0.62rem;
    color: #8e8e93;
    font-weight: 400;
}
.booking-slotpick .bsp-section-label {
    font-size: 0.62rem;
    color: #8e8e93;
    text-transform: none;
    letter-spacing: normal;
    padding: 0.45rem 0.1rem 0.25rem 0.1rem;
    border-bottom: 1px solid #2c2c2e;
    margin-bottom: 4px;
}
.bsp-hours,
.bsp-durations {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    margin-top: 4px;
}
.bsp-hour,
.bsp-dur {
    appearance: none;
    aspect-ratio: 1.15 / 1;
    padding: 4px 5px;
    background: transparent;
    color: #d8d8da;
    border: 0;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    text-align: left;
}
.bsp-hour:hover:not(.blocked):not(.disabled),
.bsp-dur:hover:not(.blocked):not(.disabled) {
    background: #2c2c2e;
}
.bsp-hour.blocked,
.bsp-hour.disabled,
.bsp-dur.blocked,
.bsp-dur.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}
.bsp-hour.selected,
.bsp-dur.selected {
    background: #0a84ff;
    color: #fff;
    font-weight: 600;
}

.booking-message {
    margin: 0.3rem 0 0 0;
    font-family: 'Archivo', sans-serif;
    font-size: 0.8rem;
    color: var(--border-color);
    opacity: 0.9;
    text-align: center;
}
.booking-message.error { color: #c0392b; opacity: 1; }
.booking-message.success { color: #1f7a3a; opacity: 1; }

/* account: studio sessions list rows reuse acc-list base styles */
.acc-list-row.acc-session-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; }
.acc-session-when { font-variation-settings: "wdth" 120, "wght" 700; }
.acc-session-meta { opacity: 0.6; font-size: 0.85em; }
.acc-session-status {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.85;
}
.acc-session-status.confirmed { color: #5dd97c; }
.acc-session-status.pending   { color: #f0b54a; }
.acc-session-status.refunded,
.acc-session-status.cancelled { color: #ff6b6b; }
.acc-session-status.expired   { color: rgba(255,255,255,0.45); }
.acc-session-cancel {
    appearance: none; background: transparent; color: inherit;
    border: 1px solid currentColor; border-radius: 999px;
    padding: 0.2rem 0.7rem; font-size: 0.75rem; cursor: pointer;
    text-transform: lowercase;
}
.acc-session-cancel:hover { background: rgba(255,255,255,0.08); }

/* admin section */
.acc-section--admin { border-top: 1px dashed rgba(255,255,255,0.18); padding-top: 1rem; }
.acc-admin-form {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem 0;
}
.acc-admin-form input {
    flex: 1 1 110px;
    min-width: 110px;
    background: rgba(255,255,255,0.06);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
}
.acc-admin-form input[name="note"] { flex: 2 1 200px; }
.acc-admin-form button {
    appearance: none; background: #fff; color: #000;
    border: 0; border-radius: 999px;
    padding: 0.45rem 1rem;
    font-family: 'Archivo', sans-serif; font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 0.85rem; cursor: pointer; text-transform: lowercase;
}
.acc-admin-row {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Archivo', sans-serif; font-size: 0.85rem;
}
.acc-admin-row button {
    appearance: none; background: transparent; color: #ff6b6b;
    border: 1px solid currentColor; border-radius: 999px;
    padding: 0.15rem 0.6rem; font-size: 0.72rem; cursor: pointer; text-transform: lowercase;
}

.acc-admin-cal-help {
    margin: 0.5rem 0 0.6rem 0;
    font-family: 'Archivo', sans-serif;
    font-size: 0.78rem;
    opacity: 0.65;
    line-height: 1.4;
}
.acc-admin-cal-row { display: flex; gap: 0.5rem; align-items: center; }
.acc-admin-cal-row input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.78rem;
}
.acc-admin-cal-row button {
    appearance: none; background: #fff; color: #000;
    border: 0; border-radius: 999px;
    padding: 0.45rem 1rem;
    font-family: 'Archivo', sans-serif; font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 0.8rem; cursor: pointer; text-transform: lowercase;
}

.acc-admin-booking-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-family: 'Archivo', sans-serif;
    font-size: 0.82rem;
}
.acc-admin-booking-when { font-variation-settings: "wdth" 120, "wght" 700; }
.acc-admin-booking-user { opacity: 0.65; font-size: 0.85em; }

.studio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.studio-cam {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: #1a1a1a;
    overflow: hidden;
    cursor: zoom-in;
    isolation: isolate;
    box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5);
}

.studio-cam picture {
    display: block;
    width: 100%;
    height: 100%;
}

.studio-cam img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.15) brightness(0.78) blur(0.4px);
    animation: cctvFlicker 3.1s steps(2, end) infinite, cctvJitter 0.32s steps(2, end) infinite;
    transform: translateZ(0);
    transition: filter 0.3s ease;
}

/* Tonal variation per cam */
.studio-grid .studio-cam:nth-child(1) img { filter: grayscale(1) contrast(1.18) brightness(0.78) blur(0.4px); }
.studio-grid .studio-cam:nth-child(2) img { filter: grayscale(1) contrast(1.10) brightness(0.72) blur(0.5px); }
.studio-grid .studio-cam:nth-child(3) img { filter: grayscale(1) contrast(1.22) brightness(0.82) blur(0.35px); }
.studio-grid .studio-cam:nth-child(4) img { filter: grayscale(1) contrast(1.08) brightness(0.7)  blur(0.55px); }
.studio-grid .studio-cam:nth-child(5) img { filter: grayscale(1) contrast(1.16) brightness(0.8)  blur(0.4px); }
.studio-grid .studio-cam:nth-child(6) img { filter: grayscale(1) contrast(1.12) brightness(0.75) blur(0.45px); }
.studio-grid .studio-cam:nth-child(2)::after,
.studio-grid .studio-cam:nth-child(4)::after { opacity: 0.72; }
.studio-grid .studio-cam:nth-child(3)::after,
.studio-grid .studio-cam:nth-child(6)::after { opacity: 0.45; }

/* REC indicator */
.cam-rec {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'VT323', 'VCR OSD Mono', monospace;
    font-size: 1.15rem;
    line-height: 1;
    color: #ff3b30;
    text-shadow: 0 0 4px rgba(255, 59, 48, 0.55);
    letter-spacing: 0.04em;
    z-index: 3;
    pointer-events: none;
}

.rec-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 6px rgba(255, 59, 48, 0.8);
    animation: recBlink 1.2s steps(2, end) infinite;
}

@keyframes recBlink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

/* SIGNAL LOCK on hover */
.cam-signal {
    position: absolute;
    top: 0.7rem;
    left: 0.9rem;
    font-family: 'VT323', 'VCR OSD Mono', monospace;
    font-size: 1.15rem;
    line-height: 1;
    color: #34C759;
    text-shadow: 0 0 5px rgba(52, 199, 89, 0.5);
    letter-spacing: 0.06em;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-cam:hover .cam-signal {
    opacity: 1;
    transform: translateY(0);
    animation: signalBlink 0.8s steps(2, end) infinite;
}

@keyframes signalBlink {
    0%, 60%   { opacity: 1; }
    61%, 100% { opacity: 0.4; }
}

/* Scanlines */
.studio-cam::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.32) 0px,
            rgba(0, 0, 0, 0.32) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 1;
}

/* Grain + tracking band that rolls down */
.studio-cam::after {
    content: '';
    position: absolute;
    inset: -10%;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 38%,
            rgba(255, 255, 255, 0.14) 41%,
            rgba(255, 255, 255, 0.04) 43%,
            transparent 46%,
            transparent 100%
        );
    background-size: 220px 220px, 100% 320%;
    background-repeat: repeat, no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 2;
    animation: cctvGrain 0.09s steps(4, end) infinite, cctvTrack 5.5s linear infinite;
}

@keyframes cctvGrain {
    0%   { background-position: 0 0, 0 0%; }
    25%  { background-position: -80px 50px, 0 0%; }
    50%  { background-position: 60px -30px, 0 0%; }
    75%  { background-position: -30px 70px, 0 0%; }
    100% { background-position: 40px 20px, 0 0%; }
}

@keyframes cctvTrack {
    0%   { background-position-y: 0, -100%; }
    100% { background-position-y: 220px, 200%; }
}

@keyframes cctvFlicker {
    0%, 100% { opacity: 1; }
    37%      { opacity: 0.92; }
    38%      { opacity: 1; }
    53%      { opacity: 0.85; }
    54%      { opacity: 1; }
    78%      { opacity: 0.95; }
    79%      { opacity: 1; }
}

@keyframes cctvJitter {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(0.4px, -0.3px); }
}

.cam-label {
    position: absolute;
    left: 1rem;
    bottom: 0.6rem;
    font-family: 'VT323', 'VCR OSD Mono', 'Space Mono', monospace;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1;
    color: #34C759;
    text-shadow: 0 0 6px rgba(52, 199, 89, 0.45);
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    z-index: 3;
}

.studio-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

.studio-footer-cell {
    min-height: 5rem;
}

.studio-book {
    justify-self: center;
    align-self: center;
    background: transparent;
    border: 3px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1rem;
    text-transform: lowercase;
    letter-spacing: 0;
    color: var(--text-color);
    padding: 0.5rem 1.4rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.studio-book:hover {
    background-color: var(--border-color);
    color: var(--bg-color);
}

#studio.dark .studio-book:hover {
    background-color: var(--white);
    color: var(--black);
}

/* Studio Overlay (enlarged cam) */
.studio-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 5rem 3rem;
    background-color: rgba(250, 249, 246, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: zoom-out;
}

.studio-overlay.active {
    display: flex;
}

.studio-overlay-inner {
    width: min(1300px, 92vw);
    cursor: default;
}

.studio-overlay-cam {
    aspect-ratio: 16 / 10;
    width: 100%;
    cursor: default;
}

.studio-overlay-cam .cam-label {
    font-size: 1.6rem;
    bottom: 1rem;
    left: 1.4rem;
}

.studio-overlay-cam .cam-rec {
    font-size: 1.4rem;
    top: 1rem;
    right: 1.2rem;
}

/* Interactive hotspots (only populated for CAM 3 DESK) */
.cam-hotspots {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.cam-hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    margin: 0;
    padding: 0;
    border: 1px dashed rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 0 14px 2px rgba(255, 255, 255, 0.18);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    animation: camHotspotPulse 2.4s ease-in-out infinite;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.cam-hotspot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
    border-left: 2px solid rgba(255, 255, 255, 0.85);
}

.cam-hotspot::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    border-right: 2px solid rgba(255, 255, 255, 0.85);
}

.cam-hotspot:hover,
.cam-hotspot:focus-visible,
.cam-hotspot.active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 0 22px 4px rgba(255, 255, 255, 0.35);
    outline: none;
    animation-play-state: paused;
}

@keyframes camHotspotPulse {
    0%, 100% {
        border-color: rgba(255, 255, 255, 0.45);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 0 10px 1px rgba(255, 255, 255, 0.15);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.85);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.35) inset,
            0 0 18px 3px rgba(255, 255, 255, 0.32);
    }
}

.cam-tooltip {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    max-width: 60%;
    padding: 0.5rem 0.8rem;
    font-family: 'VT323', 'VCR OSD Mono', monospace;
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: #f5f5f5;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.6);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
    transform: translate(-50%, calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.cam-tooltip.below {
    transform: translate(-50%, 8px);
}

.cam-tooltip.visible {
    opacity: 1;
}

.studio-overlay-cam[data-cam-name="CAM 3 DESK"] {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .cam-hotspot { animation: none; }
}

/* Reduced motion — disable CCTV motion for accessibility/battery */
@media (prefers-reduced-motion: reduce) {
    .studio-cam img,
    .studio-cam::after,
    .rec-dot,
    .studio-cam:hover .cam-signal {
        animation: none !important;
    }

    .studio-cam img {
        filter: grayscale(1) contrast(1.15) brightness(0.78);
    }

    .studio-grid .studio-cam:nth-child(n) img {
        animation: none !important;
    }
}

/* Tablet — keep 2 cols but tighten gaps so cams stay legible */
@media (max-width: 1100px) and (min-width: 769px) {
    .studio-layout { padding: 1.5rem; }
    .studio-grid { gap: 1.5rem; }
    .studio-footer { gap: 1.5rem; margin-top: 1.5rem; }
    .cam-label { font-size: 1.1rem; }
    .cam-rec, .cam-signal { font-size: 0.95rem; }
}

@media (max-width: 768px) {
    .studio-grid {
        grid-template-columns: 1fr;
    }

    .studio-book {
        font-size: 1.2rem;
        padding: 1rem 0.5rem;
    }

    .cam-label {
        font-size: 0.7rem;
        left: 0.6rem;
        bottom: 0.4rem;
    }

    .studio-overlay {
        padding: 2rem 1rem;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    .top-nav {
        padding: 1rem;
    }

    .container {
        padding: 0 1rem 2rem 1rem;
    }

    h2.title {
        font-size: 3.5rem;
    }

    .badge {
        margin-left: 0.5rem;
        font-size: 0.7rem;
    }
}

/* =========================================================
   WORK / produced by gyn
   ========================================================= */
#work.accordion-item.active .accordion-content {
    max-height: 6000px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: var(--border-width) solid var(--border-color);
}

.work-cell {
    aspect-ratio: 1 / 1;
    border-right: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
}

.work-cell:nth-child(4n) {
    border-right: none;
}

.work-cell.last-row {
    border-bottom: none;
}

.work-label {
    justify-content: flex-start;
    align-items: flex-start;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 1rem 1.25rem;
}

.work-card {
    width: 72%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    background: var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}

.work-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-card-label {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0.6rem;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--border-color);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.work-cell:hover .work-card-label {
    opacity: 1;
}

.work-card.loading {
    background: linear-gradient(110deg, #2a2a28 8%, #3a3a37 18%, #2a2a28 33%);
    background-size: 200% 100%;
    animation: work-shimmer 1.4s linear infinite;
}

@keyframes work-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.work-empty {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--border-color);
    opacity: 0.55;
    aspect-ratio: 3 / 1;
    border-right: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    padding: 1.25rem;
    text-align: center;
}

/* Overlay */
.work-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(250, 249, 246, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.work-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

body.work-overlay-open .beat-player {
    z-index: 100;
}

.work-detail {
    text-align: center;
    max-width: 90vw;
}

.work-detail-cover {
    width: min(42vw, 420px);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.75rem;
    background: var(--border-color);
}

.work-detail-title {
    display: block;
    width: max-content;
    max-width: 90%;
    margin: 0 auto 1rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    padding: 0.5rem 1.5rem;
    border: 3px solid var(--border-color);
    border-radius: 100px;
    background: rgba(180, 200, 255, 0.35);
    line-height: 1.1;
    text-align: center;
}

.work-detail-links {
    display: flex;
    width: max-content;
    max-width: 90%;
    margin: 0 auto;
    gap: 1.5rem;
    padding: 0.6rem 1.5rem;
    border: 3px solid var(--border-color);
    border-radius: 100px;
    background: var(--bg-color);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.work-detail-links a {
    color: var(--border-color);
    text-decoration: none;
}

.work-detail-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .work-cell:nth-child(4n) {
        border-right: var(--border-width) solid var(--border-color);
    }
    .work-cell:nth-child(2n) {
        border-right: none;
    }
}

/* ===== WTF? button typing animation ===== */
#wtf-btn {
    gap: 0;
    position: relative;
    transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: width;
}
#wtf-btn::before {
    content: '';
    position: absolute;
    inset: -8px -12px;
    border-radius: inherit;
}
#wtf-btn .wtf-pill-content {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
#wtf-btn.typing .wtf-pill-content {
    justify-content: flex-start;
}
#wtf-btn .wtf-pill-text {
    white-space: pre;
    flex: 0 0 auto;
}
#wtf-btn .wtf-pill-caret {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: currentColor;
    margin-left: 1px;
    vertical-align: -0.12em;
    opacity: 0;
    pointer-events: none;
    flex: 0 0 auto;
}
#wtf-btn.typing {
    cursor: text;
}
#wtf-btn.typing .wtf-pill-caret {
    animation: wtf-caret-blink 1s steps(1, end) infinite;
}
@keyframes wtf-caret-blink {
    0%, 49.99% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.card-btn.downloading {
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

/* ===== WTF Overlay ===== */
.wtf-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3400;
    background: rgba(33, 32, 30, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.wtf-overlay-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.wtf-overlay {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(960px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--bg-color);
    border: 4px solid var(--border-color);
    padding: 3rem 3rem 2.5rem 3rem;
    z-index: 3500;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity, border-radius;
    border-radius: 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    color: var(--text-color);
    scrollbar-width: thin;
}
.wtf-overlay.morphing {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.wtf-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.wtf-content {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}
.wtf-overlay.active .wtf-content {
    opacity: 1;
}

.wtf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.wtf-brand-pill {
    border: 3px solid var(--border-color);
    border-radius: 50px;
    padding: 0.4rem 1.4rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1rem;
    color: var(--text-color);
    letter-spacing: 0.02em;
}
.wtf-display {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(3.5rem, 9vw, 7rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    margin: 0.5rem 0 0.5rem 0;
    color: var(--text-color);
    user-select: none;
}

.wtf-section {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-top: 2px solid var(--border-color);
    padding-top: 1.4rem;
}

.wtf-h {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    color: var(--text-color);
}

.wtf-p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.55;
    color: var(--text-color);
    max-width: 70ch;
}
.wtf-p strong {
    font-weight: 900;
    letter-spacing: 0.01em;
}

.wtf-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--border-color);
    padding-top: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
}

/* Roster (who's in) */
.wtf-roster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.wtf-roster-row {
    display: grid;
    grid-template-columns: auto minmax(120px, 18%) 1fr;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.wtf-roster-row:last-child {
    border-bottom: none;
}

.wtf-roster-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    background: var(--border-color);
    flex-shrink: 0;
    display: block;
}
.wtf-roster-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 25% 38%;
    display: block;
    transform: scale(1.35);
    transform-origin: 25% 38%;
}
.wtf-roster-avatar--eddie img {
    object-position: 80% 42%;
    transform: scale(1.7);
    transform-origin: 80% 42%;
}
.wtf-roster-avatar--goscha img {
    object-position: 52% 40%;
    transform: scale(2.1);
    transform-origin: 52% 40%;
}

.wtf-roster-name {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--text-color);
}

.wtf-roster-roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem 0.6rem;
}

.wtf-role {
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.3rem 0.9rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-color);
    white-space: nowrap;
}
.wtf-role em {
    font-style: normal;
    opacity: 0.7;
    margin-left: 0.3rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

@media (max-width: 600px) {
    .wtf-roster-row {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "avatar name"
            "roles  roles";
        gap: 0.7rem 0.9rem;
        padding: 0.9rem 0;
    }
    .wtf-roster-avatar { grid-area: avatar; width: 52px; height: 52px; }
    .wtf-roster-name   { grid-area: name; }
    .wtf-roster-roles  { grid-area: roles; }
    .wtf-role {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .wtf-overlay {
        padding: 2rem 1.4rem 1.6rem 1.4rem;
        width: 94vw;
        max-height: 90vh;
    }
    .wtf-content {
        gap: 1.6rem;
    }
    .wtf-display {
        font-size: clamp(2.8rem, 13vw, 4.5rem);
    }
    .wtf-section {
        padding-top: 1rem;
    }
}
/* ============================================================
   TIER SYSTEM (free / circle)
   ============================================================ */

/* === 3-tier comparison: cream cards on dark stage === */
#inner-circle .ic-view-free {
    padding: 0;
}

/* Stage holds the dark grid backdrop and the 3 cards */
#inner-circle .ic-view-free .ic-stage {
    min-height: 0;
    padding: 4rem 2rem;
    align-items: stretch;
}

#inner-circle .ic-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Each plan = cream card in the same style as the old single perks card */
#inner-circle .ic-plan {
    position: relative;
    background-color: var(--bg-color);
    color: var(--black);
    padding: 2rem 1.8rem 1.6rem;
    box-shadow: 0 18px 48px rgba(33, 32, 30, 0.18);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    opacity: 0;
    transform: translateY(10px);
    animation: icPerkIn 480ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#inner-circle .ic-plan:nth-child(1) { animation-delay: 120ms; }
#inner-circle .ic-plan:nth-child(2) { animation-delay: 220ms; }
#inner-circle .ic-plan:nth-child(3) { animation-delay: 320ms; }

#inner-circle .ic-plan:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 56px rgba(33, 32, 30, 0.26);
}

#inner-circle .ic-plan-flag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffe600;
    color: var(--black);
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-style: italic;
    font-size: 0.78rem;
    padding: 0.38rem 1.1rem;
    border: 2px solid var(--black);
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(255, 230, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.18);
    animation: icFlagPulse 1.8s ease-in-out infinite;
}

#inner-circle .ic-plan-flag::before,
#inner-circle .ic-plan-flag::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--black);
    transform: translateY(-50%) rotate(45deg);
    animation: icFlagSparkle 1.6s ease-in-out infinite;
}
#inner-circle .ic-plan-flag::before { left: -12px; }
#inner-circle .ic-plan-flag::after  { right: -12px; animation-delay: 0.8s; }

@keyframes icFlagPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 230, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 230, 0, 0.0),  0 4px 14px rgba(0, 0, 0, 0.18); }
}
@keyframes icFlagSparkle {
    0%, 100% { opacity: 1; transform: translateY(-50%) rotate(45deg) scale(1); }
    50%      { opacity: 0.3; transform: translateY(-50%) rotate(45deg) scale(0.5); }
}

/* Plan head: brand pill stack + price */
#inner-circle .ic-plan-head {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    align-items: flex-start;
}

/* Card-header pills inside each plan */
#inner-circle .ic-plan .ic-card-header {
    margin-bottom: 0;
    align-items: flex-start;
}

#inner-circle .ic-plan .ic-pill-brand {
    border-color: var(--black);
    color: var(--black);
}

#inner-circle .ic-plan .ic-pill-sub {
    background: var(--black);
    color: var(--white);
}

#inner-circle .ic-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: 'Archivo', sans-serif;
    color: var(--black);
}

#inner-circle .ic-plan-price-num {
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 2.6rem;
    line-height: 1;
}

#inner-circle .ic-plan-price-num::before {
    content: "€";
    font-size: 1.2rem;
    font-variation-settings: "wdth" 110, "wght" 700;
    margin-right: 0.15rem;
    opacity: 0.65;
}

#inner-circle .ic-plan-price-unit {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    opacity: 0.6;
}

/* Per-plan perks: smaller scale than the original solo card so 3 cards fit nicely */
#inner-circle .ic-plan .ic-perks {
    margin: 0.4rem 0 1rem;
    gap: 1rem;
    flex: 1;
    align-items: flex-start;
    text-align: left;
}

#inner-circle .ic-plan .ic-perk {
    text-align: left;
    width: 100%;
}

#inner-circle .ic-plan .ic-perk-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: var(--black);
}

#inner-circle .ic-plan .ic-perk-desc {
    font-size: 0.82rem;
    color: var(--black);
    line-height: 1.4;
    margin-top: 0.15rem;
}

#inner-circle .ic-plan .ic-perk--muted {
    opacity: 0.4;
}

#inner-circle .ic-plan .ic-perk-spark {
    display: inline-flex;
    line-height: 0;
    will-change: transform, opacity;
    animation: icSparkTwinkle 2.4s ease-in-out infinite;
}
#inner-circle .ic-plan .ic-perk-spark svg {
    display: block;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
    fill: currentColor;
}
#inner-circle .ic-plan .ic-perk-spark--diamond { color: #00e5ff; }
#inner-circle .ic-plan .ic-perk-spark--bolt    { color: #ffe600; animation-delay: 0.4s; }
#inner-circle .ic-plan .ic-perk-spark--ring    { color: #ff2d95; animation-delay: 0.8s; }
#inner-circle .ic-plan .ic-perk-spark--plus    { color: #39ff14; animation-delay: 1.2s; }

/* CTA */
#inner-circle .ic-plan-cta-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    margin-top: auto;
}

#inner-circle .ic-plan .ic-pill-cta {
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.8rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-style: italic;
    font-size: 1rem;
    text-transform: lowercase;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
#inner-circle .ic-plan .ic-pill-cta:hover { transform: translateY(-1px); }
#inner-circle .ic-plan .ic-pill-cta:active { transform: translateY(0); opacity: 0.9; }

#inner-circle .ic-plan-current {
    display: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--black);
    opacity: 0.7;
    border: 1px dashed rgba(33, 32, 30, 0.45);
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
}
/* On the user's current-plan card: hide the CTA button, show the "you're in" label */
#inner-circle .ic-plan[data-current="true"] .ic-pill-cta {
    display: none;
}
#inner-circle .ic-plan[data-current="true"] .ic-plan-current {
    display: inline-block;
}

/* === ACCOUNT: PLAN SECTION === */
.acc-section--plan {
    position: relative;
}

.acc-row[hidden] {
    display: none !important;
}

.acc-tier-badge {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-style: italic;
    font-size: 0.78rem;
    text-transform: lowercase;
    border: 1.5px solid var(--white);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    line-height: 1;
    color: var(--white);
}

.acc-tier-badge[data-tier="circle"] {
    background: rgba(250, 249, 246, 0.12);
}
.acc-row-action--ghost {
    background: transparent !important;
    border: none !important;
    color: var(--white) !important;
    opacity: 0.55;
    font-family: 'Space Mono', monospace !important;
    font-size: 0.75rem !important;
    text-transform: lowercase !important;
    letter-spacing: 0.04em !important;
    cursor: default !important;
}

.acc-quota-bar {
    height: 4px;
    background: rgba(250, 249, 246, 0.12);
    margin-top: 0.6rem;
    overflow: hidden;
    border-radius: 2px;
}

.acc-quota-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--white);
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acc-quota-bar[data-quota-state="full"] > span {
    background: #ff6b4a;
}
.acc-quota-bar[data-quota-state="unlimited"] {
    display: none;
}

/* === BEAT-CARD: quota / lock indicators === */
.card-btn.download-btn[data-quota-locked="true"],
.card-btn.download-btn[data-quota-locked="true"]:hover {
    background: transparent;
    color: var(--white);
    border-style: dashed;
    cursor: pointer;
}

/* === DOWNLOAD CONFIRM DIALOG === */
.dl-confirm {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 18, 0.78);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.dl-confirm[data-open="true"] {
    display: flex;
    animation: dlFadeIn 220ms ease forwards;
}

@keyframes dlFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.dl-confirm-card {
    background: var(--bg-color);
    color: var(--black);
    width: 100%;
    max-width: 440px;
    padding: 2rem 2rem 1.5rem;
    box-shadow: 0 18px 48px rgba(33, 32, 30, 0.4);
    transform: translateY(10px);
    animation: dlCardIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    position: relative;
}

@keyframes dlCardIn {
    to { transform: translateY(0); }
}

.dl-confirm-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 1.6rem;
}

.dl-confirm-head .ic-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--black);
    border-radius: 999px;
    padding: 0.4rem 1.2rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: 1.15rem;
    background: transparent;
    color: var(--black);
    line-height: 1;
}

.dl-confirm-head .ic-pill-brand {
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    border-color: var(--black);
    color: var(--black);
}

.dl-confirm-head .ic-pill-sub {
    margin-top: -0.6rem;
    margin-left: 1.2rem;
    background: var(--black);
    color: var(--white);
    font-style: italic;
    font-variation-settings: "wdth" 110, "wght" 700;
    font-size: 0.95rem;
    padding: 0.3rem 1rem;
    border: 3px solid var(--black);
}

.dl-confirm-title {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    line-height: 1.1;
    color: var(--black);
    text-transform: lowercase;
}

.dl-confirm-meta {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    margin: 0 0 1.2rem;
    color: var(--black);
    opacity: 0.75;
    line-height: 1.4;
}

.dl-confirm-bar {
    height: 4px;
    background: rgba(33, 32, 30, 0.12);
    margin-bottom: 1.4rem;
    overflow: hidden;
    border-radius: 2px;
}

.dl-confirm-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--black);
    transition: width 0.3s ease;
}

.dl-confirm-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-bottom: 0.8rem;
}

.dl-confirm-btn {
    background: var(--black);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.6rem;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 800;
    font-style: italic;
    font-size: 0.95rem;
    text-transform: lowercase;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.dl-confirm-btn:hover { transform: translateY(-1px); }
.dl-confirm-btn:active { transform: translateY(0); opacity: 0.9; }

.dl-confirm-btn--ghost {
    background: transparent;
    color: var(--black);
    border: 1.5px solid var(--black);
}

.dl-confirm-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.dl-confirm-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--black);
    cursor: pointer;
    user-select: none;
}

.dl-confirm-consent input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    cursor: pointer;
}

.dl-confirm-consent a {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dl-confirm-upgrade {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(33, 32, 30, 0.15);
    padding: 0.8rem 0 0;
    margin-top: 0.4rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--black);
    opacity: 0.7;
    cursor: pointer;
    text-align: center;
    text-transform: lowercase;
}
.dl-confirm-upgrade:hover { opacity: 1; }
.dl-confirm-upgrade strong {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Mobile: stack 3-tier card === */
@media (max-width: 800px) {
    #inner-circle .ic-plans {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #inner-circle .ic-view-free {
        padding: 2rem 1.2rem 2.5rem;
    }
}

/* ===== Custom pixel-art cursor (over accordion sections) ===== */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 9999;
    transform: translate3d(-9999px, -9999px, 0);
    opacity: 0;
    transition: opacity 0.15s ease;
    will-change: transform;
}
#custom-cursor.active {
    opacity: 1;
}
#custom-cursor .cursor-icon {
    width: 100%;
    height: 100%;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.18s ease, opacity 0.18s ease;
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
#custom-cursor.flipping .cursor-icon {
    transform: scale(0.7);
    opacity: 0.4;
}
.accordion-item, .accordion-item * {
    cursor: none !important;
}
#inner-circle .ic-pill-cta,
#inner-circle .ic-plan .ic-pill-cta {
    cursor: none;
}

/* === "my beats" view-all button + full-list modal === */
.acc-beats-view-all {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(250, 249, 246, 0.35);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.15s ease, border-color 0.18s ease;
    opacity: 0.85;
}
.acc-beats-view-all:hover {
    opacity: 1;
    border-color: rgba(250, 249, 246, 0.7);
    transform: translateY(-1px);
}

.acc-beats-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 18, 0.78);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.acc-beats-overlay[data-open="true"] {
    display: flex;
    animation: dlFadeIn 220ms ease forwards;
}

.acc-beats-modal-card {
    background: #1a1916;
    color: var(--white);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.8rem 1.2rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    transform: translateY(10px);
    animation: dlCardIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    border: 1px solid rgba(250, 249, 246, 0.08);
}

.acc-beats-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    flex: 0 0 auto;
}

.acc-beats-modal-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.1;
    text-transform: lowercase;
    color: var(--white);
    letter-spacing: -0.01em;
}

.acc-beats-modal-close {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.acc-beats-modal-close:hover { opacity: 1; }

.acc-beats-modal-list {
    overflow-y: auto;
    flex: 1 1 auto;
    margin-top: 0.4rem;
}

/* === "change plan" modal — clones the 3-tier cards from .ic-view-free === */
.acc-plans-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 18, 0.78);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.acc-plans-overlay[data-open="true"] {
    display: flex;
    animation: dlFadeIn 220ms ease forwards;
}

.acc-plans-card {
    background: var(--black);
    color: var(--white);
    width: 100%;
    max-width: min(1240px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.4rem 1rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    transform: translateY(10px);
    animation: dlCardIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    border: 1px solid rgba(250, 249, 246, 0.08);
}

.acc-plans-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    flex: 0 0 auto;
    padding: 0 0.4rem;
}

.acc-plans-modal-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0;
    line-height: 1.1;
    text-transform: lowercase;
    color: var(--white);
    letter-spacing: -0.01em;
}

.acc-plans-modal-close {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
    opacity: 0.65;
    transition: opacity 0.15s ease;
}
.acc-plans-modal-close:hover { opacity: 1; }

.acc-plans-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/* The cloned `.ic-view-free` lives inside #inner-circle so the existing
   plan-card CSS continues to apply. Force-show it regardless of data-ic-state
   (the original ic-state rules would hide it for paid users) and
   shrink the over-sized stage padding/min-height meant for the full IC pane. */
#inner-circle .acc-plans-modal-body .ic-view-free {
    display: block;
    min-height: 0;
    padding: 0;
}
#inner-circle .acc-plans-modal-body .ic-view-free .ic-stage {
    min-height: 0;
    padding: 1rem 0.4rem 0.4rem;
}
/* Kill the opacity:0/translate baseline + entrance animations on the cloned
   nodes. The originals rely on `animation … forwards` to fade in on first
   paint and keep that final state, but the animation does not reliably
   restart when the modal goes display:none → display:flex on reopen — leaving
   the cards stuck invisible. Inside the modal we just show them statically. */
#inner-circle .acc-plans-modal-body .ic-plan,
#inner-circle .acc-plans-modal-body .ic-perk {
    opacity: 1;
    transform: none;
    animation: none;
}

/* IC beat-card label slide: shorter, GPU-hinted. The legacy .beat-card
   transition runs 550ms across left/right/top/bottom/transform/font-size —
   animating four layout-trigger properties at once on every visible card
   was the main source of the laggy/janky feel. Shorten to 240ms and add
   will-change so the browser puts the labels on their own composite layer. */
#inner-circle .ic-beat-card > .card-title,
#inner-circle .ic-beat-card > .card-artist {
    transition:
        transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        top 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
        color 0.2s ease,
        opacity 0.2s ease;
    will-change: transform, left, top;
}

/* =========================================================
   MOBILE — overrides only. Desktop stays untouched.
   Order: pointer:coarse → ≤1024 → ≤768 → ≤480.
   ========================================================= */

/* Touch devices: hide custom pixel cursor entirely. */
@media (pointer: coarse) {
    #custom-cursor { display: none !important; }
    html, body { cursor: auto !important; }
}

/* ---- Tablet (769–1024) ---- */
@media (max-width: 1024px) {
    .beats-grid { grid-template-columns: repeat(3, 1fr); }
    .work-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Large phone / small tablet (≤768) ---- */
@media (max-width: 768px) {
    html, body { overflow-x: clip; }

    /* Hero — keep effect, fit viewport */
    .stacked-container { height: 38vh; min-height: 220px; }
    .stacked-text { font-size: clamp(2rem, 13vw, 5.5rem); }

    /* Top nav */
    .top-nav { padding: 0.9rem 0.8rem; gap: 0.5rem; }
    .nav-pill { padding: 0.55rem 0.95rem; font-size: 0.9rem; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
    .nav-pill.brand { font-size: 1.05rem; padding: 0.55rem 1rem; }
    .nav-pill.icons { padding: 0.35rem 0.6rem; gap: 0.45rem; }
    .nav-pill.icons .brand-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }
    .nav-pill.icons svg { width: 22px; height: 22px; }
    #wtf-btn { min-width: 64px; }

    /* Container: keine vertikale Zentrierung mehr auf Mobile, damit kein Whitespace bleibt */
    .container {
        min-height: auto;
        justify-content: flex-start;
        padding: 0 1rem 2rem;
    }

    /* Accordion — drop the desktop symmetry margin */
    .accordion { margin-top: 24px; }
    .accordion-header {
        padding: 2rem 1rem 1.6rem 1rem;
        min-height: 88px;
    }
    .accordion-item.active .accordion-header { padding-bottom: 1.2rem; }
    h2.title { font-size: clamp(2.8rem, 16vw, 5rem); line-height: 0.88; }
    .accordion-header::after { right: 1rem; font-size: 2.4rem; }

    /* Beats grid — 2 cols on tablet/phone landscape */
    .beats-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 280px;
        max-height: none;
        overflow-y: visible;
    }
    .beat-card { height: 280px; padding: 1rem; }

    /* Work grid */
    .work-grid { grid-template-columns: repeat(2, 1fr); }

    /* Inner Circle plans already collapse at 800px — tighten spacing */
    .ic-plans { gap: 1.2rem; padding: 0 0.2rem; }
    .ic-plan { padding: 1.6rem 1.4rem 1.4rem; }

    /* Account inputs — prevent iOS auto-zoom */
    .simple-form input,
    .acc-admin-form input,
    .acc-admin-cal-row input,
    input[type="email"],
    input[type="text"],
    input[type="date"],
    input[type="number"],
    textarea, select { font-size: 16px !important; }
    .simple-form { flex-wrap: wrap; gap: 0.6rem; }
    .simple-form input { min-height: 44px; flex: 1 1 100%; }
    .simple-form button { min-height: 44px; padding: 0.7rem 1.2rem; }

    /* Beat player — keep compact, well above footer */
    .beat-player { width: calc(100vw - 1.2rem); padding: 0.5rem 0.7rem 0.5rem 0.5rem; gap: 0.55rem; }
    .beat-player.visible { bottom: 0.8rem; }
    .bp-play { width: 44px; height: 44px; }
    .bp-time { min-width: 0; font-size: 0.75rem; }
    .bp-name { font-size: 0.85rem; max-width: 110px; white-space: nowrap; }
    .beat-player.show-meta .bp-meta { max-width: 120px; }
    .bp-waveform { height: 28px; }

    /* Modals — near-fullscreen with safe padding */
    .dl-confirm { padding: 1rem; align-items: flex-end; }
    .dl-confirm-card { max-width: 100%; padding: 1.4rem 1.2rem 1.2rem; border-radius: 12px 12px 0 0; }
    .dl-confirm-title { font-size: 1.3rem; }
    .dl-confirm-consent { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0; line-height: 1.35; }
    .dl-confirm-consent input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; }
    .dl-confirm-actions { flex-wrap: wrap; gap: 0.6rem; }
    .dl-confirm-btn { min-height: 48px; flex: 1 1 45%; }

    /* Studio booking — fits viewport, tappable cells */
    .studio-booking { width: calc(100vw - 1.2rem); max-height: 90vh; padding: 1.2rem 1rem 1.4rem; }
    .bc-grid > * { min-height: 40px; font-size: 0.85rem; }
    .bsp-hours, .bsp-durations { grid-template-columns: repeat(4, 1fr); }
    .bsp-hours > *, .bsp-durations > * { min-height: 44px; font-size: 0.9rem; }

    /* Work overlay */
    .work-overlay { padding: 1rem; }
    .work-detail { max-width: 100%; }

    /* WTF overlay touched lightly */
    .wtf-overlay { width: 94vw; padding: 1.6rem 1.2rem; }

    /* Footer compact */
    .site-footer { padding: 12px 16px; }
    .site-footer-inner { flex-direction: column; gap: 6px; text-align: center; }
    .site-footer-links { justify-content: center; gap: 12px 18px; font-size: 0.85rem; }

    /* Account section — already has rules at 720; keep here as safety */
    .acc-list-row { flex-wrap: wrap; }
    .acc-row-action { min-height: 36px; }
    .acc-list-action button, .acc-row-action { padding: 0.5rem 0.9rem; }

    /* Container padding tweak (existing rule sets 0 1rem 2rem, OK) */
}

/* ---- Phone (≤480) ---- */
@media (max-width: 480px) {
    /* Hero scales down further */
    .stacked-container { height: 32vh; min-height: 180px; }
    .stacked-text { font-size: clamp(1.6rem, 11vw, 3.6rem); letter-spacing: -0.03em; }

    /* Top nav: shrink brand + icons further, keep WTF tappable */
    .nav-pill { padding: 0.5rem 0.8rem; font-size: 0.82rem; }
    .nav-pill.brand { font-size: 0.95rem; padding: 0.5rem 0.85rem; }
    .nav-pill.icons { padding: 0.3rem 0.5rem; gap: 0.3rem; }
    .nav-pill.icons .brand-icon { width: 34px; height: 34px; }
    .nav-pill.icons svg { width: 20px; height: 20px; }

    /* Accordion titles — single line per request */
    h2.title { font-size: clamp(2.2rem, 13vw, 3.4rem); white-space: nowrap; letter-spacing: -0.03em; line-height: 0.9; }
    .accordion-header { padding: 1.7rem 0.8rem 1.4rem 0.8rem; min-height: 78px; }
    .accordion-item.active .accordion-header { padding-bottom: 1rem; }

    /* Beats — single column */
    .beats-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .beat-card { height: 240px; }

    /* Samples list — full width rows */
    .samples-list > * { width: 100% !important; }

    /* Work grid — single column */
    .work-grid { grid-template-columns: 1fr; }
    .work-cell { padding: 0.9rem; }
    .work-card { width: 80%; }

    /* Inner Circle plans — full width stack */
    .ic-plans { grid-template-columns: 1fr !important; gap: 1.4rem; }
    .ic-plan { padding: 1.5rem 1.2rem 1.3rem; }
    .ic-plan-price { font-size: 1.8rem; }
    .ic-plan-flag { top: -12px; font-size: 0.75rem; padding: 0.32rem 0.9rem; }
    .ic-card-header { flex-wrap: wrap; gap: 0.4rem; }

    /* Premium IC: beats grid 1 col already handled at 520 line 979; ensure spacing */
    #inner-circle .ic-beats-grid { grid-template-columns: 1fr; }

    /* Account rows — stack label/value/action vertically for readability */
    .acc-topbar { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
    .acc-logout { align-self: flex-end; min-height: 40px; padding: 0.5rem 1rem; }
    .acc-avatar { width: 56px; height: 56px; }
    .acc-list-row { padding: 0.7rem 0.8rem; }
    .acc-list-name { font-size: 0.95rem; }
    .acc-list-meta { font-size: 0.8rem; }
    .acc-section-head { flex-wrap: wrap; gap: 0.5rem; }

    /* Studio booking calendar — even tighter */
    .studio-booking { padding: 1rem 0.8rem 1.2rem; }
    .booking-calendar { padding: 0; }
    .bsp-hours, .bsp-durations { grid-template-columns: repeat(3, 1fr); }

    /* Modals: full-screen sheet */
    .dl-confirm-card { padding: 1.2rem 1rem 1rem; }
    .dl-confirm-title { font-size: 1.15rem; }
    .dl-confirm-meta { font-size: 0.85rem; }

    /* Beat player: minimal */
    .beat-player { gap: 0.45rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; }
    .bp-name { max-width: 90px; font-size: 0.8rem; }
    .bp-prod { display: none; }
    .beat-player.show-meta .bp-meta { max-width: 100px; }
    .bp-time { font-size: 0.7rem; }

    /* WTF overlay */
    .wtf-overlay { width: 96vw; padding: 1.3rem 1rem; max-height: 92vh; }
    .wtf-display { font-size: clamp(2.4rem, 12vw, 3.6rem); }

    /* Footer: max 2-3 lines, centered */
    .site-footer-links { gap: 10px 14px; font-size: 0.8rem; }
    .site-footer-brand { font-size: 0.95rem; }
}


/* =========================================================
   MOBILE PATCH (added)
   - Fixes 4-col divider artifact on beats-grid below 1024
   - Stacks .pack-row contents on phones so download fits
   - Hardens .card-genre / title positions for touch (no hover)
   - Prevents horizontal overflow on small phones
   ========================================================= */

/* ---- Tablet (≤ 1024): beats-grid is 3 cols, sample/work tweaks ---- */
@media (max-width: 1024px) {
    /* The .beats-grid uses background-image vertical lines at 25/50/75%
       to create a 4-col look. When the grid becomes 3 or fewer cols,
       those lines no longer align with the real columns and produce
       phantom dividers. Disable them below the breakpoint. */
    .beats-grid {
        background-image: none;
    }
    .beats-grid .beat-card:nth-child(4n) {
        margin-right: 0;
    }
}

/* ---- Phablet (≤ 768) ---- */
@media (max-width: 768px) {
    /* Stack sample pack-row: name + count on one line, artists + download below */
    .pack-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name  count"
            "art   dl";
        gap: 0.5rem 0.8rem;
        padding: 1rem 0.9rem;
        font-size: 1rem;
    }
    .pack-name     { grid-area: name; font-size: 1rem; min-width: 0; white-space: normal; line-height: 1.15; }
    .pack-count    { grid-area: count; font-size: 0.78rem; }
    .pack-artists  { grid-area: art; font-size: 0.85rem; opacity: 0.85; }
    .pack-download { grid-area: dl; font-size: 0.85rem; padding: 0.4rem 1rem; min-height: 36px; }

    /* Samples list outer padding */
    .samples-list { padding: 0 0.8rem 1.5rem 0.8rem; }

    /* On touch devices hover never fires, so pin title/artist to the
       bottom-LEFT (mirroring the desktop hover state) and park .card-genre
       at the middle-right. That leaves the bottom row exclusively for
       title+artist and the middle-right band exclusively for genre, so
       nothing overlaps no matter how long the strings get. */
    .beat-card > .card-title,
    .beat-card > .card-artist {
        left: 1rem;
        right: auto;
        transform: translateX(0);
        max-width: calc(100% - 8rem);
    }
    .beat-card > .card-genre {
        top: 50%;
        bottom: auto;
        right: 1rem;
        left: auto;
        transform: translateY(-50%);
        align-items: flex-end;
        text-align: right;
        opacity: 1;
        font-size: 0.78rem;
        max-width: 6.5rem;
    }
    .beat-card > .card-meta {
        opacity: 1;
        font-size: 0.85rem;
        top: 1rem;
        left: 1rem;
    }
    /* The card-actions (download, etc.) need to be tappable without hover */
    .beat-card .card-actions { opacity: 1; }
    .card-btn { font-size: 0.78rem; padding: 0.4rem 0.7rem; min-height: 36px; }

    /* Container side gutter so cards/lists do not touch viewport edges */
    .container { padding-left: 0.6rem; padding-right: 0.6rem; }

    /* Generic anti-overflow */
    img, video, svg, iframe { max-width: 100%; height: auto; }
}

/* ---- Phone (≤ 480) ---- */
@media (max-width: 480px) {
    /* On a single-column grid the bottom border of the last card looks
       cleaner if we tighten the card height slightly. Already 240 above. */

    /* Sample pack download button — full width below artists */
    .pack-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name count"
            "art  art"
            "dl   dl";
        gap: 0.4rem 0.6rem;
        padding: 0.95rem 0.85rem;
    }
    .pack-download { width: 100%; justify-self: stretch; }
    .pack-artists  { white-space: normal; }

    /* Sample rows inside opened pack: keep them readable */
    .sample-row { font-size: 0.85rem; padding: 0.6rem 0.8rem; }

    /* Card meta on tiny screens: smaller */
    .beat-card > .card-meta   { font-size: 0.8rem; }
    .beat-card > .card-genre  { font-size: 0.75rem; }
    .beat-card > .card-title  { font-size: 1.05rem; bottom: 1.1rem; }
    .beat-card > .card-artist { font-size: 0.85rem; bottom: 2.4rem; }

    /* Footer pill nav is already centered; just ensure inner padding */
    .container { padding-left: 0.5rem; padding-right: 0.5rem; }
    .accordion-header { padding: 1rem 0.7rem 0 0.7rem; }
}

/* ---- Tiny phones (≤ 360) ---- */
@media (max-width: 360px) {
    .top-nav { padding: 0.7rem 0.5rem; gap: 0.35rem; }
    .nav-pill { padding: 0.45rem 0.7rem; font-size: 0.78rem; }
    .nav-pill.brand { font-size: 0.85rem; padding: 0.45rem 0.7rem; }
    .nav-pill.icons .brand-icon { width: 30px; height: 30px; }
    .nav-pill.icons svg { width: 18px; height: 18px; }
    h2.title { font-size: clamp(1.5rem, 9vw, 2.2rem); }
}

/* =========================================================
   MOBILE PATCH v2 — filter/month/cards/IC
   ========================================================= */

/* Default: month-nav-row is mobile-only — hide it on desktop. */
.month-nav-row { display: none; }

/* ---- All viewports: .month-cell-group is a single compact horizontal bar
   that spans the full grid width (filter button + month nav inline). ---- */
/* Constrain the row that holds the month-cell-group so it doesn't
   reserve a full 240/280px beat-card slot. */
.beats-grid {
    grid-template-rows: 72px;
}
    .beats-grid .month-cell-group {
        grid-column: 1 / -1;
        height: 72px;
        border-left: var(--border-width) solid var(--border-color);
        border-right: var(--border-width) solid var(--border-color);
        border-top: var(--border-width) solid var(--border-color);
        box-sizing: border-box;
    }
    /* All states (months / filter / mood / genre) lay out horizontally. */
    .month-cell-group .state {
        flex-direction: row;
        align-items: stretch;
    }
    .month-cell-group .state-back-arrow {
        height: 100%;
        left: 0.9rem;
        font-size: 1.2rem;
    }

    /* state-months: [ FILTER btn ] [ ‹ MONTH › ] horizontally */
    .state-months .state-scroll { display: none; }
    .state-months .filter-btn {
        flex: 0 0 38%;
        font-size: 1.1rem;
        padding: 0.5rem 1rem;
        border-bottom: none;
        border-right: var(--border-width) solid var(--border-color);
        justify-content: center;
        height: 100%;
    }
    .state-months .month-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        flex: 1 1 auto;
        padding: 0 0.8rem;
        height: 100%;
    }
    .state-months .month-nav-btn {
        background: transparent;
        border: 2px solid currentColor;
        border-radius: 999px;
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 1.2rem;
        line-height: 1;
        color: inherit;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s, color 0.15s, transform 0.15s;
        padding: 0;
        flex-shrink: 0;
    }
    .state-months .month-nav-btn:active { transform: scale(0.93); }
    .state-months .month-nav-btn:hover { background: var(--white); color: var(--black); }
    .state-months .month-nav-current {
        font-family: 'Archivo', sans-serif;
        font-variation-settings: "wdth" 125, "wght" 900;
        font-size: 1.4rem;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        line-height: 1;
        flex: 1 1 auto;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* state-filter: [ ← FILTER ] [ MOOD ] [ GENRE ] in one row */
    .state-filter .header-cell {
        flex: 0 0 38% !important;
        font-size: 1rem !important;
        padding-left: 2.8rem !important;
        padding-right: 0.8rem !important;
        border-bottom: none !important;
        border-left: var(--border-width) solid var(--border-color);
        border-right: var(--border-width) solid var(--border-color);
        height: 100%;
    }
    .state-filter .filter-option {
        flex: 1 1 0 !important;
        font-size: 1.1rem;
        padding: 0 0.8rem !important;
        border-bottom: none;
        border-right: var(--border-width) solid var(--border-color);
        justify-content: center;
        text-align: center;
        height: 100%;
    }

    /* state-mood / state-genre: [ ← LABEL ] [ horizontal-scroll pills ] */
    .state-mood .header-cell,
    .state-genre .header-cell {
        flex: 0 0 38% !important;
        font-size: 1rem !important;
        padding-left: 2.8rem !important;
        padding-right: 0.8rem !important;
        border-bottom: none !important;
        border-right: var(--border-width) solid var(--border-color);
        height: 100%;
    }
    .state-mood .sub-options,
    .state-genre .sub-options {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        margin-top: 0;
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
                mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%);
    }
    .state-mood .sub-options li,
    .state-genre .sub-options li {
        flex: 0 0 auto;
        font-size: 1rem;
        padding: 0 1rem !important;
        border-bottom: none;
        border-right: var(--border-width) solid var(--border-color);
        display: flex;
        align-items: center;
        white-space: nowrap;
        height: 100%;
    }
    .state-mood .sub-options li:last-child,
    .state-genre .sub-options li:last-child { border-right: none; }

/* ---- Phone (≤ 480): slightly tighter still ---- */
@media (max-width: 480px) {
    .beats-grid { grid-template-rows: 64px; }
    .beats-grid .month-cell-group { height: 64px; }
    .state-months .filter-btn { flex: 0 0 42%; font-size: 1rem; padding: 0.4rem 0.6rem; }
    .state-months .month-nav-btn { width: 40px; height: 40px; min-width: 40px; font-size: 1.1rem; }
    .state-months .month-nav-current { font-size: 1.2rem; }
    .state-months .month-nav-row { padding: 0 0.5rem; gap: 0.3rem; }
    .state-filter .header-cell,
    .state-mood   .header-cell,
    .state-genre  .header-cell {
        flex: 0 0 42% !important;
        font-size: 0.9rem !important;
        padding-left: 2.4rem !important;
    }
    .state-back-arrow { font-size: 1rem; left: 0.7rem; }
    .state-filter .filter-option { font-size: 1rem; }
    .state-mood .sub-options li,
    .state-genre .sub-options li { font-size: 0.9rem; padding: 0 0.8rem !important; }
}

/* ---- Beat-card content: tighter on phone to avoid producer/genre clash ---- */
@media (max-width: 768px) {
    /* Center band reserved for title/artist; cap width so it never reaches
       the bottom-left genre or the top-right card-actions. */
    .beat-card > .card-artist,
    .beat-card > .card-title {
        max-width: calc(100% - 2rem);
        font-size: 1rem;
    }
    .beat-card > .card-title { font-size: 1.15rem; }
    .beat-card:not(.ic-beat-card):has(.card-genre-item + .card-genre-item) > .card-artist {
        bottom: 3.6rem;
    }
    /* Make sure genre never overlaps an action button column even with 2 lines */
    .beat-card > .card-genre { max-width: 55%; line-height: 1.1; }
}

/* ---- Inner Circle premium (logged-in exclusive content) ---- */
@media (max-width: 768px) {
    #inner-circle .ic-view-premium {
        padding: 2.4rem 1rem 1.6rem;
    }
    #inner-circle .ic-view-premium > .ic-premium-head {
        text-align: center;
        margin-bottom: 1.6rem;
    }
    #inner-circle .ic-premium-title {
        font-size: 2rem;
        border-bottom-width: 3px;
        padding: 0 1.2rem 0.5rem;
    }
    #inner-circle .ic-premium-title::before,
    #inner-circle .ic-premium-title::after {
        bottom: -3px;
        width: 3px;
        height: 10px;
    }
    #inner-circle .ic-view-premium > .ic-menu-options {
        gap: 1.8rem;
        padding-bottom: 1.4rem;
        flex-wrap: wrap;
    }
    #inner-circle .ic-menu-opt {
        font-size: 1.3rem;
        padding: 0.55rem 0.9rem;
        min-height: 44px;
    }
    #inner-circle .ic-menu-foot {
        margin-top: 1.6rem;
        padding-top: 1.4rem;
    }
    #inner-circle .ic-menu-contact-title { font-size: 1.4rem; }
    /* Premium beats/samples/kits panes — single column on phones, comfortable touch */
    #inner-circle .ic-beats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 200px;
        gap: 0;
    }
    #inner-circle .ic-beat-card {
        padding: 0.9rem;
    }
    #inner-circle .ic-beat-card > .card-meta {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    #inner-circle .ic-view-premium { padding: 1.2rem 0.6rem 0.8rem; }
    #inner-circle .ic-view-premium > .ic-menu-options {
        gap: 0.9rem;
        padding-bottom: 0.9rem;
    }
    #inner-circle .ic-menu-opt {
        font-size: 1rem;
        padding: 0.5rem 0.8rem;
    }
    #inner-circle .ic-beats-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 220px;
    }
}

/* =========================================================
   MOBILE PATCH v3 — beats borders, no slide, samples/studio,
   work header, inner-circle exclusive content fixes,
   homepage hero density + WTF over-header animation
   ========================================================= */
@media (max-width: 768px) {

    /* (1) Beats — disable NAME/PROD slide-to-left on touch.
       Title/artist stay centered above the (now visible) genre. */
    .beat-card:hover > .card-title,
    .beat-card:hover > .card-artist,
    .beat-card.playing > .card-title,
    .beat-card.playing > .card-artist {
        left: 50%;
        transform: translateX(-50%);
    }

    /* (2) Beats — outer top + left drawn by the grid container; every
       card draws its own right + bottom. Each line therefore appears
       exactly once (no doubled verticals, no doubled horizontals). The
       month-cell-group already has its own right border which becomes
       the grid's outer right edge.

       Earlier attempts with negative margins worked for verticals but
       not horizontals (CSS Grid ignores margin-top when grid-auto-rows
       is set), so the container-border approach is used instead. */
    .beats-grid {
        border-top: var(--border-width) solid var(--border-color);
        background-image: none;
    }
    .beats-grid .beat-card {
        border-top: none !important;
        border-left: none !important;
        border-right: var(--border-width) solid var(--border-color) !important;
        border-bottom: var(--border-width) solid var(--border-color) !important;
        box-shadow: none;
        margin: 0;
    }
    /* Active beat-card: thicker 4px inset overlay on all 4 sides. */
    .beat-card.playing {
        box-shadow: inset 0 0 0 4px var(--white) !important;
    }
    /* Strip the redundant right border on the last filter-state cell
       so the genre column does not look thicker than its neighbours. */
    .state-filter .filter-option:last-child,
    .state-months .filter-btn:last-child { border-right: none !important; }

    /* (5) Samples — full title must stay readable. Allow wrap, shrink
       slightly so "care package XX/YY" never collides with the count. */
    .pack-name {
        font-size: 0.9rem !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }
    .pack-count {
        font-size: 0.72rem !important;
        white-space: nowrap;
    }

    /* (6) Studio — book-a-spot pill on one line, like desktop */
    .studio-book {
        white-space: nowrap;
        padding: 0.55rem 1.6rem;
        max-width: max-content;
        width: auto;
    }

    /* (7) Work — "produced by GYN" becomes a flat header bar, two
       covers per row, single 4px line between every cell.
       Reset everything explicitly so the older 4039/4042 rules cannot
       leave stray borders behind. */
    .work-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .work-cell { border-top: none !important; border-left: none !important; }
    .work-cell.work-label {
        grid-column: 1 / -1;
        aspect-ratio: auto;
        height: auto;
        padding: 0.85rem 1rem;
        border-right: none !important;
        border-bottom: var(--border-width) solid var(--border-color) !important;
        font-size: 1rem;
        justify-content: flex-start;
        align-items: center;
    }
    /* All track cells: keep bottom border; strip the right edge on the
       right-column cell of each row. With .work-label as :nth-child(1)
       (spanning), track cells start at child 2 — col 1 = even, col 2 = odd.
       So drop border-right on odd children that aren't the header. */
    .work-grid .work-cell:not(.work-label) {
        border-right: var(--border-width) solid var(--border-color) !important;
        border-bottom: var(--border-width) solid var(--border-color) !important;
    }
    .work-grid .work-cell:not(.work-label):nth-child(odd) {
        border-right: none !important;
    }
    /* Last row keeps original .last-row { no border-bottom } */
    .work-grid .work-cell.last-row { border-bottom: none !important; }

    /* (8) Inner-circle exclusive content — bigger options, room for "new" badge */
    #inner-circle .ic-view-premium > .ic-menu-options {
        padding-bottom: 2rem !important;
    }
    #inner-circle .ic-menu-opt {
        font-size: 1.6rem !important;
        padding: 0.7rem 1rem !important;
    }
    #inner-circle .ic-menu-new {
        font-size: 0.72rem;
        padding: 3px 11px;
        bottom: -1.2rem;
    }
    /* (8) IC cards — no slide, fix bottom cut-off, more breathing room */
    #inner-circle .ic-beats-grid {
        grid-auto-rows: 240px !important;
        gap: 0;
    }
    #inner-circle .ic-beat-card {
        aspect-ratio: auto;
        height: 100%;
        padding: 1rem;
    }
    /* On mobile: lock IC cards into the same layout as the desktop
       beats grid — PROD (.card-meta) top-left, NAME (.card-title) bottom-
       left, ARTIST just above NAME. This kills the 4 corner-layout shuffle
       AND the hover/playing slide, so PROD and NAME can never collide. */
    #inner-circle .ic-beat-card > .card-meta {
        top: 1rem !important;
        left: 1rem !important;
    }
    #inner-circle .ic-beat-card > .card-title,
    #inner-circle .ic-beat-card.ic-layout-1 > .card-title,
    #inner-circle .ic-beat-card.ic-layout-2 > .card-title,
    #inner-circle .ic-beat-card.ic-layout-3 > .card-title,
    #inner-circle .ic-beat-card.ic-layout-4 > .card-title,
    #inner-circle .ic-beat-card:hover > .card-title,
    #inner-circle .ic-beat-card.playing > .card-title {
        left: 1rem !important;
        top: auto !important;
        bottom: 1rem !important;
        transform: none !important;
        text-align: left !important;
        font-size: 1.2rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    #inner-circle .ic-beat-card > .card-artist,
    #inner-circle .ic-beat-card.ic-layout-1 > .card-artist,
    #inner-circle .ic-beat-card.ic-layout-2 > .card-artist,
    #inner-circle .ic-beat-card.ic-layout-3 > .card-artist,
    #inner-circle .ic-beat-card.ic-layout-4 > .card-artist,
    #inner-circle .ic-beat-card:hover > .card-artist,
    #inner-circle .ic-beat-card.playing > .card-artist {
        left: 1rem !important;
        top: auto !important;
        bottom: 2.6rem !important;
        transform: none !important;
        text-align: left !important;
        max-width: calc(100% - 2rem) !important;
    }

    /* (4) Header: keep the brand pill (middle) and social icons (right)
       fixed in place. The WTF? button lives absolutely on the left so
       its width can grow during the typing animation without shoving
       the other pills around. With wtf out of flow, brand + icons would
       auto-fill cols 1 + 2 — so pin them explicitly to cols 2 + 3 to
       keep brand dead-centre.
       NOTE: do NOT override .top-nav { position }, the bar is sticky.
       Sticky elements act as a containing block for absolute children. */
    .top-nav {
        /* minmax(0, 1fr) instead of 1fr — without it the empty col 1
           (wtf is absolute) collapses to its 0 intrinsic min while col 3
           keeps the icons' intrinsic width, leaving the brand off-centre. */
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .top-nav > #brand-target { grid-column: 2; }
    .top-nav > .nav-pill.icons { grid-column: 3; }
    #wtf-btn {
        position: absolute;
        left: 0.8rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 110;
    }
    #wtf-btn.typing {
        /* Pill grows with each typed "?!" — width stays auto so it
           hugs its content, max-width caps it at the full header bar
           so the last few chars just clip into the right padding. */
        right: auto;
        max-width: calc(100% - 1.6rem);
        z-index: 200;
        justify-content: flex-start;
        background: var(--bg-color);
    }
    #wtf-btn.typing .wtf-pill-content {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* (8) IC cards on phone — keep single column but taller for square feel */
    #inner-circle .ic-beats-grid {
        grid-auto-rows: 300px !important;
    }
    /* (4) Smaller social icons so the morphed THEYHATE header sits dead centre.
       The brand pill in the middle is fixed-width; making icons match the
       WTF? pill width keeps the brand exactly between them. */
    .nav-pill.icons { padding: 0.25rem 0.4rem; gap: 0.2rem; }
    .nav-pill.icons .brand-icon { width: 26px; height: 26px; }
    .nav-pill.icons svg { width: 16px; height: 16px; }
}

/* ===================================================================
   Weekly-drop signup banner (beats tab) — quiet index.html voice,
   dark-mode variant (white thin underline on the black beats panel).
   =================================================================== */
.beats-signup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2.5rem;
    /* Top padding clears the "beats" title underline — the header has a -4px
       margin-bottom that tucks this block up, so without it the WEEKLY DROP
       kicker overlaps the line. Horizontal padding matches the accordion
       header (2rem) so the kicker/headline align with the "beats" title
       above instead of hugging the dark-band edge. */
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
}
/* Hide the email signup once the user is logged in (free or circle).
   The :not(.beats-vibes-cta) keeps the logged-in vibe-picker block alive —
   its visibility is driven by script.js setting/removing the [hidden] attribute
   based on /api/auth/me → user.vibes. */
body[data-tier="free"] .beats-signup:not(.beats-vibes-cta),
body[data-tier="circle"] .beats-signup:not(.beats-vibes-cta) { display: none; }

.beats-signup-copy { display: flex; flex-direction: column; gap: 0.5rem; }
.beats-signup-kicker {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.55;
    color: var(--white);
}
.beats-signup-head {
    margin: 0;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-transform: lowercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--white);
}
.beats-signup-form { flex: 1 1 320px; max-width: 460px; }
/* Outlined pill that echoes the nav pills, tuned quiet for the black panel. */
.beats-signup-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem 0.3rem 1.25rem;
    border: 1.5px solid rgba(250, 249, 246, 0.35);
    border-radius: 50px;
    background: transparent;
    transition: border-color 0.18s ease;
}
.beats-signup-row:focus-within { border-color: var(--white); }
.beats-signup-row input[type="email"] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    padding: 0.55rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--white);
}
.beats-signup-row input[type="email"]::placeholder { color: var(--white); opacity: 0.4; }
.beats-signup-row button {
    flex: none;
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.12s ease;
}
.beats-signup-row button:hover { opacity: 0.85; }
.beats-signup-row button:active { transform: scale(0.97); }
.beats-signup-row button:disabled { opacity: 0.4; cursor: not-allowed; }
.beats-signup-msg {
    margin: 0.9rem 0 0;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
}
.beats-signup-msg[data-kind="err"] { color: #ff7a8a; }

@media (max-width: 640px) {
    .beats-signup { flex-direction: column; align-items: stretch; padding: 2.5rem 1rem; }
    .beats-signup-form { max-width: none; }
}
/* Side-by-side layout: the kicker above the headline pulls a row-level
   alignment upward, so the bottom-aligned pill floats ~10px high. Drop it
   to sit centered on the headline line. */
@media (min-width: 641px) {
    .beats-signup-form { transform: translateY(0.6rem); }
}

/* ===================================================================
   Drop cards — weekly drop tracks in the beats grid.
   Reuse the catalog .beat-card shell; add the preview badge + the
   locked early-access overlay (clip stays playable underneath).
   =================================================================== */
/* Drops never offer stems-on-request from the card. */
.beat-card.drop-card .stems-btn { display: none; }

.drop-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    padding: 0.28rem 0.6rem;
    border: 1.5px solid rgba(250, 249, 246, 0.55);
    border-radius: 999px;
    line-height: 1;
    pointer-events: none;
}

/* Locked early-access overlay: visible at rest (so the locked state reads
   immediately), click-through everywhere except the upgrade CTA so the 30s
   clip still plays when the card body is clicked. */
.beat-card.drop-locked .lissajous { mix-blend-mode: normal; }
.drop-lock {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    padding: 1.5rem;
    background: rgba(33, 32, 30, 0.55);
    pointer-events: none;
}
.drop-lock .drop-badge {
    position: static;
    top: auto;
    right: auto;
}
.drop-lock-badge {
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: 1.05rem;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--white);
    max-width: 12ch;
}
.drop-lock-count {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    opacity: 0.7;
}
.drop-lock-cta {
    pointer-events: auto;
    cursor: pointer;
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--white);
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.9rem;
    line-height: 1;
}
.drop-lock-cta:hover { background: transparent; color: var(--white); }

/* ──────────────────────────────────────────────────────────────────────────
   Beats vibe-picker CTA (logged-in users with zero active beat-lists)
   Shares the .beats-signup shell for layout; chips replace the email pill.
   ────────────────────────────────────────────────────────────────────────── */
.beats-vibes-cta[hidden] { display: none !important; }
.beats-vibes-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}
.beats-vibe-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.6rem 1.1rem;
    border: 1.5px solid rgba(250, 249, 246, 0.35);
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    user-select: none;
}
.beats-vibe-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.beats-vibe-chip:hover { border-color: var(--white); }
.beats-vibe-chip:has(input:checked) {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
#beats-vibes-btn {
    flex: none;
    margin-left: auto;
    background: var(--white);
    color: var(--black);
    border: 0;
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.12s ease;
}
#beats-vibes-btn:hover { opacity: 0.85; }
#beats-vibes-btn:active { transform: scale(0.97); }
#beats-vibes-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 640px) {
    .beats-vibes-row { gap: 0.5rem; }
    #beats-vibes-btn { margin-left: 0; width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Account tab — beat-lists picker (reuses .beats-vibe-chip for consistency)
   ────────────────────────────────────────────────────────────────────────── */
.acc-vibes-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.2rem;
}
.acc-vibes-picker .beats-vibe-chip {
    /* Slightly tighter inside the account list density. */
    padding: 0.5rem 0.95rem;
    font-size: 0.68rem;
}
.acc-vibes-picker .beats-vibe-chip:has(input:disabled) {
    opacity: 0.5;
    cursor: progress;
}
.acc-vibes-status {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0;
    transition: opacity 0.18s ease;
    margin-left: auto;
}
.acc-vibes-status:not(:empty) { opacity: 0.55; }
.acc-vibes-status[data-kind="err"] { color: #ff7a8a; opacity: 1; }

/* ──────────────────────────────────────────────────────────────────────────
   Next-drop teaser (above the beats grid)
   Matches the .beats-signup shell rhythm: same vertical padding, same
   bottom border, same kicker + headline typography. Whole block is the
   click target → /drops/<slug>.
   ────────────────────────────────────────────────────────────────────────── */
.next-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem 2rem;
    padding: 1.6rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1.5px solid rgba(250, 249, 246, 0.18);
    text-decoration: none;
    color: var(--white);
    /* Subtle hover lift — entirely within the link, no layout shift. */
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.next-drop[hidden] { display: none; }
.next-drop:hover { opacity: 0.92; transform: translateX(2px); }
.next-drop:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }

.next-drop-text { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.next-drop-kicker {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.55;
    color: var(--white);
}
.next-drop-title {
    margin: 0;
    font-family: 'Archivo', sans-serif;
    font-variation-settings: "wdth" 125, "wght" 900;
    font-size: clamp(1.4rem, 3vw, 2rem);
    text-transform: lowercase;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--white);
}
.next-drop-sep { opacity: 0.4; margin: 0 0.35em; font-weight: 400; }
.next-drop-when {
    margin: 0;
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    opacity: 0.65;
    font-variant-numeric: tabular-nums; /* time strings don't jitter */
}

.next-drop-status { flex: none; }
.next-drop-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.1rem;
    border: 1.5px solid rgba(250, 249, 246, 0.35);
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--white);
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    min-height: 44px; /* touch target */
    box-sizing: border-box;
}
.next-drop-pill[data-state="on"] {
    /* Already subscribed — filled-white affirmative. */
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
}
.next-drop-pill[data-state="join"] {
    /* Not subscribed — outlined CTA. Brightens on hover via parent. */
}
.next-drop:hover .next-drop-pill[data-state="join"] { border-color: var(--white); }

@media (max-width: 640px) {
    .next-drop { padding: 1.3rem 0; gap: 0.9rem; }
    .next-drop-status { width: 100%; }
    .next-drop-pill { width: 100%; justify-content: center; }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .next-drop, .next-drop-pill { transition: none; }
    .next-drop:hover { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Account tab — "your drops" history list
   Slotted into the existing .acc-list grid. Adds:
     - vibe chip-pill on the left (mini, brand-flavored)
     - date in tabular-nums (no jitter when stacked)
     - "open →" affordance pulling the whole row toward the link
   ────────────────────────────────────────────────────────────────────────── */
.acc-drops-list .acc-list-row {
    /* Inherit base row layout from .acc-list; tighten for the chip + date layout. */
    align-items: center;
    gap: 0.7rem;
}
.acc-drops-list .acc-list-row[data-drop-link] {
    cursor: pointer;
    transition: background 0.18s ease;
}
.acc-drops-list .acc-list-row[data-drop-link]:hover {
    background: rgba(250, 249, 246, 0.06);
}
.acc-drop-vibe {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border: 1.5px solid rgba(250, 249, 246, 0.35);
    border-radius: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--white);
    line-height: 1;
    flex: none;
}
.acc-drop-week {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--white);
    opacity: 0.85;
    flex: none;
}
.acc-drop-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--white);
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.acc-drop-link {
    color: var(--white);
    text-decoration: none;
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
    transition: opacity 0.18s ease;
    flex: none;
}
.acc-drops-list .acc-list-row:hover .acc-drop-link { opacity: 1; }
@media (max-width: 480px) {
    .acc-drops-list .acc-list-row { flex-wrap: wrap; }
    .acc-drop-date { width: 100%; margin-left: 0; opacity: 0.5; }
}