@charset "utf-8";

:root {
	--bg: #060a10;
	--panel: #111720;
	--panel2: #161c26;
	--text: #f8f9fb;
	--muted: #a8afbb;
	--pink: #ff2f75;
	--magenta: #c7158c;
	--line: #28313d
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: radial-gradient(circle at 75% 20%, #171024 0, #080c12 38%, #05080d 75%);
	color: var(--text);
	font-family: Inter, sans-serif;
	overflow-x: hidden
}

.site-header {
	background: rgba(5, 8, 13, .9);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	backdrop-filter: blur(16px);
	transition: .3s
}

.site-header.scrolled {
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45)
}

.navbar-brand b {
	font-size: 1.22rem;
	letter-spacing: -.03em
}

.navbar-brand b span {
	color: var(--pink)
}

.navbar-brand small {
	display: block;
	font-size: .49rem;
	letter-spacing: .38em;
	color: #adb3bf
}

.logo-wave {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 34px
}

.logo-wave i {
	width: 3px;
	border-radius: 4px;
	background: linear-gradient(var(--pink), var(--magenta));
	animation: pulse 1.3s infinite ease-in-out
}

.logo-wave i:nth-child(1),
.logo-wave i:nth-child(7) {
	height: 12px
}

.logo-wave i:nth-child(2),
.logo-wave i:nth-child(6) {
	height: 22px
}

.logo-wave i:nth-child(3),
.logo-wave i:nth-child(5) {
	height: 31px
}

.logo-wave i:nth-child(4) {
	height: 38px
}

.logo-wave i:nth-child(2n) {
	animation-delay: .15s
}

@keyframes pulse {
	50% {
		transform: scaleY(.5);
		opacity: .55
	}
}

.nav-link {
	color: #fff !important;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .02em;
	position: relative;
	padding: 1rem .25rem !important
}

.nav-link:after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 3px;
	background: var(--pink);
	transition: .3s
}

.nav-link:hover:after,
.nav-link.active:after {
	right: 0
}

.btn {
	border-radius: 6px;
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .01em
}

.btn-gradient {
	color: #fff;
	border: 0;
	background: linear-gradient(90deg, var(--pink), var(--magenta)) !important;
	box-shadow: 0 10px 30px rgba(255, 47, 117, .2)
}

.btn-gradient:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(255, 47, 117, .35)
}

.icon-btn {
	background: none;
	border: 0;
	color: #fff;
	font-size: 1.3rem
}

.badge-dot {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--pink);
	border-radius: 20px;
	padding: 0px;
	font-size: .65rem;
	width: 18px;
	height: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.hero-section {
	position: relative;
	min-height: 690px;
	padding-top: 76px;
	overflow: hidden
}

.hero-bg {
	position: absolute;
	inset: 0;
	background: url('../images/hero.png') center right/cover no-repeat;
	filter: saturate(1.15)
}

.hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #05080d 0%, rgba(5, 8, 13, .96) 28%, rgba(5, 8, 13, .36) 58%, rgba(5, 8, 13, .08) 100%), linear-gradient(0deg, #070b11 0%, transparent 35%)
}

.hero-inner {
	position: relative;
	z-index: 2
}

.min-vh-75 {
	min-height: 590px
}

.hero-section h1 {
	font-size: clamp(3.2rem, 5.5vw, 5.8rem);
	line-height: .88;
	font-weight: 800;
	letter-spacing: -.055em
}

.hero-copy {
	max-width: 560px;
	color: #c9ced6;
	font-size: 1.06rem;
	line-height: 1.65
}

.feature-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}

.feature-row>div {
	display: flex;
	align-items: center;
	gap: 12px
}

.feature-row i {
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--pink);
	min-width: 42px;
}

.feature-row span {
	display: flex;
	flex-direction: column
}

.feature-row b {
	font-size: .78rem
}

.feature-row small {
	font-size: .67rem;
	color: var(--muted)
}

.featured-player {
	position: absolute;
	right: 4%;
	bottom: 78px;
	width: min(560px, 46vw);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 68, 145, .45);
	border-radius: 9px;
	background: rgba(7, 8, 14, .84);
	backdrop-filter: blur(14px)
}

.play-btn {
	width: 46px;
	height: 46px;
	border: 1px solid var(--pink);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: transparent;
	color: #fff;
	font-size: 1.3rem
}

.featured-player>div:nth-child(2) {
	min-width: 140px;
	display: flex;
	flex-direction: column
}

.featured-player strong {
	font-size: .92rem
}

.featured-player span {
	font-size: .7rem;
	color: #aab0ba
}

.pink {
	color: var(--pink) !important
}

.waveform {
	height: 35px;
	background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(220, 226, 235, .5) 4px 6px);
	clip-path: polygon(0 45%, 5% 30%, 10% 65%, 15% 15%, 20% 75%, 25% 36%, 30% 60%, 35% 10%, 40% 80%, 45% 40%, 50% 55%, 55% 22%, 60% 70%, 65% 35%, 70% 60%, 75% 18%, 80% 74%, 85% 35%, 90% 57%, 95% 27%, 100% 48%, 100% 52%, 0 55%)
}

.content-wrap {
	position: relative;
	z-index: 3;
	margin-top: -48px
}

.music-search {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1fr 1.1fr;
	background: rgba(18, 24, 33, .96);
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .3)
}

.music-search>* {
	min-height: 58px;
	border: 0;
	border-right: 1px solid #242c37;
	background: #111720;
	color: #fff;
	padding: 0 22px
}

.music-search select {
	color: #dfe3e9
}

.music-search .btn {
	margin: 10px;
	border-right: 0;
	min-height: 40px
}

.search-field {
	display: flex;
	align-items: center;
	gap: 15px
}

.search-field input {
	width: 100%;
	background: none;
	border: 0;
	outline: 0;
	color: #fff
}

.genre-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 12px;
	margin: 24px 0
}

.genre-grid button,
.genre-grid a {
	min-height: 68px;
	border: 1px solid rgba(255, 255, 255, .03);
	background: #121821;
	color: #d7dbe1;
	border-radius: 9px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
	font-size: .68rem;
	transition: .3s;
	text-decoration: none !important;
}

.genre-grid i {
	font-size: 1.35rem;
	color: #b92cff
}

.genre-grid a:nth-child(3n+1) i {
	color: #ff4a00
}

.genre-grid a:nth-child(4n+2) i {
	color: #ff1870
}

.genre-grid a:hover {
	transform: translateY(-5px);
	background: #19212d;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25)
}

.intro-card {
	height: 100%;
	padding: 24px 4px
}

.intro-card h2,
.section-title h2 {
	font-size: 1.35rem;
	font-weight: 800
}

.intro-card p {
	color: #bdc3cc;
	font-size: .84rem
}

.intro-card a,
.section-title a,
.chart-card>a {
	color: var(--pink);
	text-transform: uppercase;
	text-decoration: none;
	font-size: .7rem;
	font-weight: 800
}

.plan {
	height: 100%;
	padding: 18px 22px;
	border: 1px solid #434b56;
	border-radius: 10px;
	background: linear-gradient(145deg, rgba(25, 30, 39, .95), rgba(10, 14, 20, .96));
	position: relative;
	transition: .3s
}

.plan:hover {
	transform: translateY(-6px)
}

.plan h3 {
	font-size: 1rem;
	color: #d7dbe2
}

.plan .price {
	font-size: 1.45rem;
	font-weight: 800
}

.plan .price small {
	font-size: .7rem;
	font-weight: 400
}

.plan ul {
	padding-left: 1rem;
	font-size: .72rem;
	line-height: 1.8;
	min-height: 104px
}

.plan button,
.plan a {
	width: 100%;
	border: 0;
	border-radius: 5px;
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 9px
}

.bronze {
	border-color: #a95c19
}

.bronze h3 {
	color: #e98937
}

.bronze button,
.bronze a {
	background: linear-gradient(90deg, #b8651d, #d98a2e)
}

.silver button,
.silver a {
	background: linear-gradient(90deg, #92979d, #d0d3d6)
}

.gold {
	border-color: #917113
}

.gold h3 {
	color: #ffd130
}

.gold button,
.gold a {
	background: linear-gradient(90deg, #d19d08, #f0c52d);
	color: #191919
}

.artist-card {
	min-height: 210px;
	border-radius: 11px;
	padding: 24px;
	background: linear-gradient(90deg, rgba(90, 35, 164, .94), rgba(208, 28, 115, .63)), url('../images/artist.png') center/cover;
	display: flex;
	align-items: center
}

.artist-card>div {
	max-width: 62%
}

.artist-card h3,
.chart-card h3 {
	font-size: 1.35rem;
	font-weight: 800
}

.artist-card p {
	font-size: .82rem
}

.round-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #a02ab9;
	display: grid;
	place-items: center;
	font-size: 1.2rem
}

.section-title {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 8px 0 14px
}

.track-list {
	border-radius: 10px;
	overflow: hidden;
	background: #151b24
}

.track-row {
	display: grid;
	grid-template-columns: 52px 42px 1.2fr 1.5fr .65fr .55fr 42px 42px 70px 20px;
	gap: 12px;
	align-items: center;
	padding: 10px 15px;
	border-bottom: 1px solid #252c36;
	font-size: .72rem
}

.track-row:last-child {
	border-bottom: 0
}

.album {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	background: linear-gradient(145deg, #ff3c21, #43001d);
	box-shadow: inset 0 0 30px rgba(0, 0, 0, .2)
}

.a2 {
	background: linear-gradient(145deg, #05a4cf, #022b4b)
}

.a3 {
	background: linear-gradient(145deg, #e31c9f, #2d073e)
}

.track-title b {
	display: block;
	font-size: .8rem
}

.track-title small {
	color: #9ca3ae
}

.mini-play {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #89909b;
	background: transparent;
	color: #fff
}

.mini-wave {
	height: 25px;
	background: repeating-linear-gradient(90deg, transparent 0 3px, #5c6470 3px 4px);
	opacity: .65;
	clip-path: polygon(0 48%, 8% 30%, 16% 70%, 24% 20%, 32% 78%, 40% 35%, 48% 60%, 56% 10%, 64% 70%, 72% 33%, 80% 56%, 88% 25%, 100% 50%, 100% 53%, 0 55%)
}

.price-btn {
	border: 1px solid #69717d;
	background: #151b24;
	color: #fff;
	padding: 7px 12px;
	border-radius: 5px;
	text-decoration: none !important;
	text-align: center;
}

.chart-card {
	min-height: 225px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(105, 32, 120, .72), rgba(9, 12, 18, .98) 50%);
	padding: 20px
}

.chart-head {
	display: flex;
	gap: 14px;
	align-items: center
}

.chart-head h3 {
	margin: 0
}

.chart-head small {
	font-size: .65rem
}

.chart-card ol {
	list-style: none;
	padding: 10px 0 0;
	margin: 0
}

.chart-card li {
	display: grid;
	grid-template-columns: 18px 36px 1fr auto;
	gap: 10px;
	align-items: center;
	margin: 10px 0;
	font-size: .72rem
}

.chart-card .album {
	width: 32px;
	height: 32px
}

.chart-card time {
	color: #b8bec7
}

.chart-card>a {
	display: block;
	text-align: center;
	margin-top: 17px
}

/* Scroll-reveal is progressive enhancement: content starts hidden ONLY when
   JavaScript is confirmed running (the `js` class is set on <html> by an inline
   script in the layout head). Without it the content simply renders, so a
   blocked, stale or failed script can never leave a page blank. */
.js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease
}

.reveal.visible {
	opacity: 1;
	transform: none
}

.delay-1 {
	transition-delay: .12s
}

.delay-2 {
	transition-delay: .24s
}

.delay-3 {
	transition-delay: .36s
}

.cursor-dot,
.cursor-ring {
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 9999;
	border-radius: 50%;
	transform: translate(-50%, -50%)
}

.cursor-dot {
	width: 7px;
	height: 7px;
	background: #fff
}

.cursor-ring {
	width: 34px;
	height: 34px;
	border: 1px solid var(--pink);
	transition: width .2s, height .2s, background .2s
}

.cursor-ring.hover {
	width: 52px;
	height: 52px;
	background: rgba(255, 47, 117, .12)
}

.toast-box {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999;
	background: #161c25;
	border: 1px solid #343d49;
	border-left: 3px solid var(--pink);
	padding: 14px 20px;
	border-radius: 8px;
	opacity: 0;
	transform: translateY(20px);
	transition: .3s
}

.toast-box.show {
	opacity: 1;
	transform: none;
}

.mobile-links {
	display: flex;
	flex-direction: column
}

.mobile-links a {
	padding: 16px 0;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #2a3039;
}

@media(max-width:1199px) {
	.genre-grid {
		grid-template-columns: repeat(5, 1fr)
	}

	.artist-card {
		min-height: 240px;
	}

	.content-wrap {
		margin-top: 0
	}

	.navbar .navbar-toggler {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

}

@media(max-width:991px) {
	.hero-section {
		min-height: inherit;
		text-align: center;
	}

	.hero-section.hero-with-track {
		min-height: inherit;
	}

	.hero-with-track .min-vh-75 {
		min-height: inherit;
	}

	.hero-bg {
		background-position: 62% center
	}

	.hero-shade {
		background: linear-gradient(90deg, rgba(5, 8, 13, .5), rgba(5, 8, 13, .5)), linear-gradient(0deg, #070b11, transparent);
	}

	.featured-player {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: -80px
	}

	.feature-row {
		grid-template-columns: repeat(3, 1fr);
	}

	.music-search {
		grid-template-columns: 1fr 1fr
	}

	.music-search .search-field,
	.music-search .btn {
		grid-column: 1/-1
	}

	.track-row {
		grid-template-columns: 48px 38px 1fr 1fr 50px
	}

	.track-row>*:nth-child(n+6) {
		display: block;
	}

	.navbar .navbar-toggler {
		padding-left: 0;
		padding-right: 0;
	}

	.hero-copy {
		max-width: 100%;
	}

	.hero-btn-group {
		justify-content: center;
	}

	.feature-row>div {
		flex-direction: column;
	}

	.plan-intro {
		text-align: center;
	}

	.plan-intro p {
		max-width: 100% !important;
	}

	.section-title-wide {
		align-items: center !important;
	}

	.featured-player {
		margin: 30px 0;
		text-align: left;
	}

}

@media(max-width:767px) {
	body {
		cursor: auto;
	}

	.cursor-dot,
	.cursor-ring {
		display: none
	}

	.hero-section h1 {
		font-size: clamp(2.375rem, 6vw, 6.5rem);
	}

	.hero-section {
		min-height: inherit;
		text-align: center;
	}

	.hero-section.hero-with-track {
		min-height: inherit;
	}

	.hero-btn-group {
		justify-content: center;
	}

	.feature-row {
		gap: 12px;
		grid-template-columns: repeat(3, 1fr);
	}

	.featured-player .waveform,
	.featured-player .time {
		display: none
	}

	.feature-row>div {
		flex-direction: column;
		text-align: center;
	}

	.music-search {
		grid-template-columns: 1fr
	}

	.music-search>* {
		grid-column: 1 !important
	}

	.genre-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.track-row {
		grid-template-columns: 48px 38px 1fr
	}

	.track-row>*:nth-child(n+4) {
		display: none
	}

	.artist-card>div {
		max-width: 80%
	}

	.min-vh-75 {
		min-height: inherit;
	}

	.navbar .navbar-toggler {
		padding-left: 0;
		padding-right: 0;
	}

	.plan-intro {
		text-align: center;
	}

	.plan-intro p {
		max-width: 100% !important;
	}
}

/* Rebuilt pricing, tracks and footer */
.pricing-showcase {
	display: grid;
	grid-template-columns: 1.05fr 1.18fr 1.18fr 1.18fr 1.55fr;
	gap: 14px;
	align-items: stretch;
	padding: 6px 0 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.plan-intro {
	padding: 22px 8px 18px 2px
}

.plan-intro h2 {
	font-size: 1.38rem;
	font-weight: 800;
	margin-bottom: 12px
}

.plan-intro p {
	font-size: .82rem;
	line-height: 1.7;
	color: #bec5cf;
	max-width: 210px
}

.plan-intro a {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	margin-top: 10px;
	color: var(--pink);
	font-size: .69rem;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none
}

.pricing-showcase .plan {
	min-height: 192px;
	padding: 17px 20px 14px;
	overflow: hidden
}

.pricing-showcase .plan h3 {
	margin: 0 0 2px;
	font-size: 1rem
}

.pricing-showcase .plan .price {
	font-size: 1.2rem;
	line-height: 1.2
}

.pricing-showcase .plan ul {
	margin: 11px 0 10px;
	min-height: 72px;
	line-height: 1.65
}

.pricing-showcase .plan li::marker {
	content: '✓  ';
	font-weight: 800
}

.bronze li::marker {
	color: #e98937
}

.silver li::marker {
	color: #f3f3f3
}

.gold li::marker {
	color: #ffd130
}

.plan-crown {
	position: absolute;
	right: 10px;
	top: 9px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.55rem
}

.bronze .plan-crown {
	color: #ff9d43;
	background: radial-gradient(circle, #794016 0, #4b270e 45%, rgba(75, 39, 14, .15) 72%);
	box-shadow: 0 0 30px rgba(232, 137, 55, .22)
}

.silver .plan-crown {
	color: #f1f2f4;
	background: radial-gradient(circle, #555960 0, #2f3238 45%, rgba(47, 50, 56, .12) 72%);
	box-shadow: 0 0 30px rgba(210, 213, 216, .16)
}

.gold .plan-crown {
	color: #ffe24f;
	background: radial-gradient(circle, #6e5b0c 0, #443707 45%, rgba(68, 55, 7, .12) 72%);
	box-shadow: 0 0 34px rgba(240, 197, 45, .2)
}

.pricing-showcase .artist-card {
	min-height: 192px;
	padding: 16px 18px;
	background-position: 68% center
}

.pricing-showcase .artist-card>div {
	max-width: 61%
}

.pricing-showcase .artist-card h3 {
	font-size: 1.2rem;
	margin: 9px 0 5px
}

.pricing-showcase .artist-card p {
	font-size: .76rem;
	line-height: 1.55;
	margin-bottom: 12px
}

.pricing-showcase .artist-card .btn {
	width: 100%;
	padding: .58rem .7rem
}

.tracks-charts-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
	gap: 18px;
	padding-top: 12px
}

.tracks-charts-grid .section-title {
	margin: 0 0 12px
}

.track-list {
	background: linear-gradient(100deg, #171d26, #11161e)
}

/* Scrollable Track List */
.track-list {
	max-height: 520px;
	/* Adjust as needed */
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 6px;
	scrollbar-width: thin;
	/* Firefox */
	scrollbar-color: #ff2d78 #171b22;
}

/* Chrome, Edge & Safari */
.track-list::-webkit-scrollbar {
	width: 8px;
}

.track-list::-webkit-scrollbar-track {
	background: #171b22;
	border-radius: 10px;
}

.track-list::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #ff2d78, #8a2be2);
	border-radius: 10px;
}

.track-list::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ff4d94, #a855f7);
}

.track-row {
	grid-template-columns: 48px 36px 1.15fr 1.45fr .7fr .6fr .55fr 34px 66px 18px;
	padding: 8px 12px;
	gap: 10px;
	min-height: 62px
}

.track-row .album {
	width: 43px;
	height: 43px
}

.track-row .icon-btn {
	font-size: 1rem;
	padding: 0
}

.track-row .price-btn {
	padding: 6px 10px;
	font-weight: 700
}

.chart-card {
	position: relative;
	min-height: 212px;
	padding: 17px 18px;
	background: linear-gradient(180deg, rgba(116, 36, 128, .85) 0, rgba(38, 14, 47, .9) 30%, rgba(8, 11, 17, .98) 61%);
	border: 1px solid rgba(255, 255, 255, .09);
	overflow: hidden
}

.chart-line-icon {
	position: absolute;
	right: 16px;
	top: 15px;
	font-size: 2.2rem;
	color: #d72fb7;
	opacity: .9
}

.chart-head .round-icon {
	width: 38px;
	height: 38px
}

.chart-card ol {
	padding-top: 8px
}

.chart-card li {
	grid-template-columns: 16px 30px 1fr auto;
	margin: 8px 0
}

.chart-card .rank {
	color: #b9bec8
}

.chart-card .album {
	width: 28px;
	height: 28px
}

.chart-card>a {
	margin-top: 14px
}

.site-footer {
	position: relative;
	background: #05080d;
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 62px 0 20px;
	overflow: hidden
}

.site-footer:before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 0, rgba(199, 21, 140, .12), transparent 32%);
	pointer-events: none
}

.footer-main {
	position: relative;
	display: grid;
	grid-template-columns: 1.5fr .75fr .75fr .75fr 1.3fr;
	gap: 38px
}

.footer-brand p,
.footer-newsletter p {
	color: #9fa7b3;
	font-size: .79rem;
	line-height: 1.7;
	max-width: 340px;
	margin-top: 18px
}

.footer-main h4 {
	font-size: .9rem;
	margin-bottom: 18px
}

.footer-main>div:not(.footer-brand):not(.footer-newsletter) {
	display: flex;
	flex-direction: column
}

.footer-main a:not(.navbar-brand) {
	color: #aeb5bf;
	text-decoration: none;
	font-size: .76rem;
	margin-bottom: 11px;
	transition: .25s
}

.footer-main a:hover {
	color: #fff;
	transform: translateX(3px)
}

.footer-socials {
	display: flex;
	gap: 9px;
	margin-top: 20px
}

.footer-socials a {
	width: 36px;
	height: 36px;
	border: 1px solid #2d3541;
	border-radius: 50%;
	display: grid !important;
	place-items: center;
	margin: 0 !important
}

.footer-newsletter form {
	display: flex;
	background: #111720;
	border: 1px solid #28313d;
	border-radius: 7px;
	padding: 5px
}

.footer-newsletter input {
	min-width: 0;
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	padding: 0 10px;
	font-size: .76rem
}

.footer-newsletter .btn {
	padding: .68rem .9rem
}

.footer-bottom {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	margin-top: 42px;
	padding-top: 18px;
	color: #7f8792;
	font-size: .68rem
}

@media(max-width:1399px) {
	.pricing-showcase {
		grid-template-columns: .95fr 1fr 1fr 1fr 1.32fr
	}

	.pricing-showcase .plan {
		padding-left: 16px;
		padding-right: 16px
	}

	.pricing-showcase .plan ul {
		font-size: .67rem
	}

	.track-row {
		grid-template-columns: 44px 34px 1.05fr 1.2fr .62fr .52fr .5fr 30px 62px 15px
	}

	.footer-main {
		grid-template-columns: 1.35fr .7fr .7fr .7fr 1.2fr;
		gap: 26px
	}
}

@media(max-width:1199px) {
	.pricing-showcase {
		grid-template-columns: repeat(3, 1fr)
	}

	.plan-intro {
		grid-column: 1/-1
	}

	.pricing-showcase .artist-card {
		grid-column: 1/-1
	}

	.pricing-showcase .artist-card>div {
		max-width: 45%
	}

	.tracks-charts-grid {
		grid-template-columns: 1fr
	}

	.footer-main {
		grid-template-columns: 1.4fr 1fr 1fr
	}

	.footer-newsletter {
		grid-column: 2/-1
	}
}

@media(max-width:767px) {
	.pricing-showcase {
		grid-template-columns: 1fr
	}

	.plan-intro,
	.pricing-showcase .artist-card {
		grid-column: auto
	}

	.pricing-showcase .artist-card>div {
		max-width: 74%
	}

	.track-row {
		grid-template-columns: 43px 34px 1fr 1fr 54px
	}

	.track-row>*:nth-child(n+6) {
		display: block;
	}

	.footer-main {
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
	}

	.footer-brand,
	.footer-newsletter {
		grid-column: 1/-1
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.footer-newsletter form {
		flex-direction: column;
		gap: 6px
	}

	.footer-newsletter input {
		min-height: 42px
	}

	.footer-socials {
		justify-content: center;
	}

	.section-title {
		justify-content: space-between;
	}

	.track-list {
		padding-right: 0;
	}

}

/* Navigation dropdowns */
.nav-mega .dropdown-menu {
	min-width: 245px;
	padding: 10px;
	background: rgba(12, 16, 23, .98);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	box-shadow: 0 22px 50px rgba(0, 0, 0, .5);
	margin-top: 10px
}

.nav-mega .dropdown-item {
	border-radius: 7px;
	padding: 11px 12px;
	color: #cfd4dc;
	font-size: .76rem
}

.nav-mega .dropdown-item:hover {
	color: #fff;
	background: linear-gradient(90deg, rgba(255, 47, 117, .18), rgba(199, 21, 140, .08))
}

.nav-mega>.dropdown-toggle:after {
	position: static;
	width: 7px;
	height: 7px;
	border: 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	margin-left: 8px;
	vertical-align: 3px;
	background: none
}

.mobile-submenu-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid #2a3039;
	color: #fff;
	text-align: left
}

.mobile-submenu-toggle i {
	transition: .25s
}

.mobile-submenu-toggle[aria-expanded="true"] i {
	transform: rotate(45deg)
}

.mobile-submenu {
	padding: 3px 0 8px 15px;
	background: rgba(255, 255, 255, .025);
	display: flex;
	flex-direction: column;
}

.mobile-submenu a {
	padding: 12px 0;
	font-size: .85rem;
	color: #bcc3cd
}

/* Rebuilt search bar */
.music-search {
	grid-template-columns: 2.2fr 1.1fr 1.1fr 1.05fr 1.12fr;
	min-height: 64px;
	background: linear-gradient(90deg, #111720, #0e141d);
	border: 1px solid rgba(255, 255, 255, .055);
	border-radius: 9px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .35)
}

.music-search>* {
	min-height: 64px;
	padding: 0 22px;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, .07);
	background: transparent
}

.search-field input::placeholder {
	color: #9da5b0
}

.search-filter {
	padding: 0 !important
}

.search-filter-btn {
	width: 100%;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	background: transparent;
	border: 0;
	color: #fff;
	text-align: left
}

.search-filter-btn span {
	display: flex;
	flex-direction: column;
	gap: 3px
}

.search-filter-btn small {
	font-size: .59rem;
	color: #8d95a1;
	font-weight: 600
}

.search-filter-btn strong {
	font-size: .72rem;
	font-weight: 500
}

.search-filter-btn:after {
	width: 8px;
	height: 8px;
	border: 0;
	border-right: 1px solid #c9ced5;
	border-bottom: 1px solid #c9ced5;
	transform: rotate(45deg);
	margin-top: -5px
}

.search-filter .dropdown-menu {
	width: calc(100% - 8px);
	margin: 4px;
	background: #121923;
	border: 1px solid #2b3542;
	padding: 7px;
	border-radius: 8px
}

.search-filter .dropdown-item {
	color: #cbd1da;
	font-size: .75rem;
	border-radius: 6px;
	padding: 9px 10px
}

.search-filter .dropdown-item:hover {
	background: rgba(255, 47, 117, .15);
	color: #fff
}

.music-search .search-submit {
	margin: 10px 14px;
	min-height: 44px;
	border-right: 0;
	padding: 0 20px
}

/* Inline crown SVG */
.crown-svg {
	width: 31px;
	height: 31px;
	display: block
}

.plan-crown {
	font-size: 0
}

/* Track action menu and cart */
.track-row {
	grid-template-columns: 48px 36px 1.15fr 1.45fr .7fr .6fr .55fr 34px 34px 66px 30px
}

.track-actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center
}

.track-more-btn {
	width: 30px;
	height: 30px;
	border: 0;
	background: transparent;
	color: #fff;
	border-radius: 50%;
	font-size: 1.1rem
}

.track-more-btn:hover,
.track-more-btn[aria-expanded="true"] {
	background: #242c37
}

.track-actions .dropdown-menu {
	min-width: 188px;
	padding: 7px;
	background: #151c26;
	border: 1px solid #303947;
	border-radius: 9px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, .45)
}

.track-actions .dropdown-item {
	color: #d7dce3;
	font-size: .72rem;
	padding: 9px 10px;
	border-radius: 6px
}

.track-actions .dropdown-item:hover {
	background: rgba(255, 47, 117, .15);
	color: #fff
}

.track-cart {
	font-size: 1.05rem !important
}

.track-cart:hover,
.track-heart:hover {
	color: var(--pink)
}

@media(max-width:1399px) {
	.track-row {
		grid-template-columns: 44px 34px 1.05fr 1.2fr .62fr .52fr .5fr 30px 30px 62px 28px
	}
}

@media(max-width:991px) {
	.music-search {
		grid-template-columns: 1fr 1fr
	}

	.music-search .search-field,
	.music-search .search-submit {
		grid-column: 1/-1
	}

	.music-search .search-filter:nth-of-type(3) {
		grid-column: 1/-1
	}

	.track-row {
		grid-template-columns: 48px 38px 1fr 1fr 34px 34px 66px 30px
	}

	.track-row .track-meta-genre,
	.track-row .track-meta-bpm,
	.track-row .track-meta-time {
		display: none !important
	}
}

@media(max-width:767px) {
	.music-search {
		grid-template-columns: 1fr
	}

	.music-search>* {
		grid-column: 1 !important;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .06)
	}

	.music-search .search-submit {
		margin: 10px
	}

	.track-row {
		grid-template-columns: 43px 34px 1fr 32px 28px 40px;
	}

	.track-row .mini-wave,
	.track-row .track-cart,
	.track-row .price-btn {
		display: none !important
	}

	.track-row .track-cart,
	.track-row .price-btn {
		display: block !important;
	}

	.track-row .price-btn {
		padding: 0;
		border: none !important;
	}

	.section-kicker {
		margin-bottom: 0 !important;
	}

	.footer-brand p,
	.footer-newsletter p {
		max-width: 100% !important;
	}

	.hero-copy {
		max-width: 100%;
	}

}

/* Search bar interaction fixes */
.music-search {
	overflow: visible;
	position: relative;
	isolation: isolate;
}

.music-search .search-field {
	border-radius: 9px 0 0 9px;
}

.search-filter {
	position: relative;
	z-index: 20;
}

.search-filter:has(.dropdown-menu.show) {
	z-index: 100;
}

.search-filter .dropdown-menu {
	inset: auto 4px auto 4px !important;
	top: calc(100% + 6px) !important;
	transform: none !important;
	z-index: 1080;
	display: none;
}

.search-filter .dropdown-menu.show {
	display: block;
	animation: searchMenuIn .18s ease both;
}

@keyframes searchMenuIn {
	from {
		opacity: 0;
		transform: translateY(-6px) !important
	}

	to {
		opacity: 1;
		transform: translateY(0) !important
	}
}

.search-filter-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, .025);
}

.search-filter-btn[aria-expanded="true"]:after {
	transform: rotate(225deg);
	margin-top: 5px;
}

.music-search .search-submit {
	color: #fff;
	background: linear-gradient(90deg, #ff315f 0%, #e91e68 48%, #cf0b78 100%);
	box-shadow: 0 8px 22px rgba(232, 29, 102, .24);
}

.music-search .search-submit:hover,
.music-search .search-submit:focus {
	color: #fff;
	background: linear-gradient(90deg, #ff426c 0%, #f12776 48%, #dc1685 100%);
	box-shadow: 0 12px 28px rgba(232, 29, 102, .36);
}

@media(max-width:991px) {
	.music-search .search-field {
		border-radius: 9px 9px 0 0
	}

	.search-filter .dropdown-menu {
		left: 4px !important;
		right: 4px !important;
		width: auto
	}
}

/* Mobile/touch dropdown reliability */
.music-search,
.search-filter,
.search-filter-btn,
.search-filter .dropdown-menu,
.search-filter .filter-option {
	-webkit-tap-highlight-color: transparent
}

.search-filter-btn,
.search-filter .filter-option {
	touch-action: manipulation
}

.search-filter.is-open {
	z-index: 1200 !important
}

.search-filter .dropdown-menu {
	pointer-events: none
}

.search-filter .dropdown-menu.show {
	pointer-events: auto
}

.search-filter .filter-option {
	position: relative;
	z-index: 2;
	width: 100%;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none
}

.search-filter .filter-option.active {
	color: #fff;
	background: rgba(255, 47, 117, .18)
}

@media(max-width:991px) {
	.music-search {
		z-index: 30
	}

	.search-filter .dropdown-menu {
		position: absolute !important;
		max-height: 240px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch
	}
}

/* Featured artists and upcoming music */
.featured-artists-section,
.upcoming-music-section {
	padding: 24px 0 42px;
}

.section-title-wide {
	justify-content: space-between;
	margin: 0 0 18px;
}

.section-title-wide>div {
	display: flex;
	align-items: baseline;
	gap: 18px;
}

.section-kicker {
	color: var(--pink);
	font-size: .67rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.featured-artists-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr 1fr;
	gap: 16px;
}

.featured-artist-card {
	position: relative;
	min-height: 330px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	overflow: hidden;
	background: #111720;
	isolation: isolate;
}

.featured-artist-card--large {
	min-height: 400px;
}

.featured-artist-image,
.featured-artist-overlay {
	position: absolute;
	inset: 0;
}

.featured-artist-image {
	z-index: -2;
	background-position: center;
	background-size: cover;
	transition: transform .55s ease;
}

.artist-image-one {
	/* background-image: url('../images/artist.png'); */
	background-position: 72% center;
}

.artist-image-two {
	background-image: radial-gradient(circle at 70% 18%, rgba(255, 45, 120, .35), transparent 28%), linear-gradient(145deg, #25134b, #070b12 72%);
}

.artist-image-three {
	background-image: radial-gradient(circle at 35% 20%, rgba(34, 109, 255, .38), transparent 30%), linear-gradient(145deg, #30104c, #080b12 75%);
}

.artist-image-two::before,
.artist-image-three::before {
	content: '';
	position: absolute;
	width: 190px;
	height: 260px;
	right: 8%;
	bottom: -12px;
	border-radius: 90px 90px 18px 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .88));
	box-shadow: 0 0 65px rgba(199, 21, 140, .22);
	transform: rotate(4deg);
}

.featured-artist-overlay {
	z-index: -1;
	background: linear-gradient(90deg, rgba(5, 8, 13, .96) 0%, rgba(5, 8, 13, .72) 45%, rgba(5, 8, 13, .1) 100%), linear-gradient(0deg, rgba(5, 8, 13, .92) 0%, transparent 60%);
}

.featured-artist-card:not(.featured-artist-card--large) .featured-artist-overlay {
	background: linear-gradient(0deg, rgba(5, 8, 13, .96) 0%, rgba(5, 8, 13, .55) 52%, rgba(5, 8, 13, .18) 100%);
}

.featured-artist-content {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
}

.featured-artist-card--large .featured-artist-content {
	max-width: 58%;
}

.artist-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 13px;
	color: #ffd4e5;
	font-size: .67rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.artist-badge i {
	color: var(--pink);
}

.featured-artist-content h3 {
	margin: 0 0 7px;
	font-size: 1.7rem;
	font-weight: 800;
}

.featured-artist-card--large .featured-artist-content h3 {
	font-size: 2.15rem;
}

.featured-artist-content p {
	margin: 0 0 16px;
	color: #c1c7d0;
	font-size: .78rem;
}

.artist-stats {
	display: flex;
	gap: 24px;
	margin-bottom: 18px;
	color: #aeb5bf;
	font-size: .7rem;
}

.artist-stats strong {
	display: block;
	color: #fff;
	font-size: 1rem;
}

.artist-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.artist-follow-btn,
.artist-profile-link {
	color: #fff;
	text-decoration: none;
	font-size: .71rem;
	font-weight: 800;
	text-transform: uppercase;
}

.artist-follow-btn {
	padding: 10px 15px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 6px;
	background: rgba(8, 11, 17, .45);
}

.artist-profile-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pink);
}

.featured-artist-card:hover .featured-artist-image {
	transform: scale(1.045);
}

.upcoming-music-section {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.upcoming-music-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.upcoming-card {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .075);
	border-radius: 12px;
	background: linear-gradient(145deg, #151c26, #0c1118);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.upcoming-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 47, 117, .4);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .32);
}

.upcoming-cover {
	position: relative;
	aspect-ratio: 1.45 / 1;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.upcoming-cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 8, 13, .65), transparent 58%);
}

.upcoming-cover-one {
	background: radial-gradient(circle at 70% 25%, #ff3f8d, transparent 28%), linear-gradient(135deg, #351050, #0c2b58 60%, #05080d);
}

.upcoming-cover-two {
	background: radial-gradient(circle at 35% 30%, #31d2ff, transparent 24%), linear-gradient(145deg, #092b4d, #1c1044 60%, #05080d);
}

.upcoming-cover-three {
	background: radial-gradient(circle at 60% 35%, #f343c8, transparent 26%), linear-gradient(135deg, #4a0d35, #190d43 62%, #05080d);
}

.upcoming-cover-four {
	background: radial-gradient(circle at 30% 25%, #ff8a2f, transparent 24%), linear-gradient(135deg, #502319, #42144c 58%, #05080d);
}

.release-date {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	min-width: 48px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 7px;
	background: rgba(5, 8, 13, .72);
	backdrop-filter: blur(10px);
	color: #cbd1d9;
	font-size: .58rem;
	font-weight: 800;
	text-align: center;
}

.release-date b {
	display: block;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
}

.upcoming-preview {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pink), var(--magenta));
	color: #fff;
	font-size: 1.2rem;
	box-shadow: 0 8px 24px rgba(255, 47, 117, .32);
}

.upcoming-info {
	padding: 17px;
}

.upcoming-type {
	color: var(--pink);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.upcoming-info h3 {
	margin: 5px 0 2px;
	font-size: 1.05rem;
	font-weight: 800;
}

.upcoming-info>p {
	margin: 0 0 15px;
	color: #9fa7b2;
	font-size: .72rem;
}

.upcoming-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, .075);
}

.upcoming-bottom span,
.upcoming-bottom button {
	color: #b8bec8;
	font-size: .65rem;
}

.upcoming-bottom button {
	border: 0;
	background: transparent;
	color: #fff;
	font-weight: 700;
}

.upcoming-bottom button:hover {
	color: var(--pink);
}

@media (max-width: 1199px) {
	.featured-artists-grid {
		grid-template-columns: 1.3fr 1fr;
	}

	.featured-artist-card--large {
		grid-row: span 2;
	}

	.upcoming-music-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {

	.section-title-wide,
	.section-title-wide>div {
		align-items: flex-start;
	}

	.section-title-wide>div {
		flex-direction: column;
		gap: 3px;
		align-items: center;
	}

	.featured-artists-grid,
	.upcoming-music-grid {
		grid-template-columns: 1fr;
	}

	.featured-artist-card,
	.featured-artist-card--large {
		min-height: 360px;
		grid-row: auto;
	}

	.featured-artist-card--large .featured-artist-content {
		max-width: 82%;
	}
}

/* ==========================================================
   INNER PAGES — ADDED STYLES ONLY
   The complete homepage CSS above is unchanged.
   These rules reuse the original dark RichMusicHub variables.
   ========================================================== */
.inner-page {
	background: var(--bg);
	color: var(--text);
	font-size: 16px
}

.inner-page .inner-main {
	padding-top: 82px;
	min-height: 70vh
}

.inner-page a {
	text-decoration: none
}

.inner-page .inner-hero,
.inner-page .page-heading,
.inner-page .track-detail-hero {
	position: relative;
	padding: 72px 0;
	background: radial-gradient(circle at 84% 18%, rgba(199, 21, 140, .19), transparent 30%), linear-gradient(145deg, #0d1119, #060a10);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	overflow: hidden
}

.inner-page .inner-hero:before,
.inner-page .page-heading:before,
.inner-page .track-detail-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(6, 10, 16, .98), rgba(6, 10, 16, .83) 52%, rgba(6, 10, 16, .4)), url('../images/hero.png') right center/cover no-repeat;
	opacity: 1;
	pointer-events: none
}

.inner-page .inner-hero>*,
.inner-page .page-heading>*,
.inner-page .track-detail-hero>* {
	position: relative;
	z-index: 1
}

.crumb {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: .82rem;
	margin-bottom: 28px;
	color: var(--muted)
}

.crumb a {
	color: var(--muted)
}

.crumb i {
	color: var(--pink)
}

.eyebrow {
	color: var(--pink);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .76rem;
	font-weight: 800
}

.inner-hero h1,
.page-heading h1,
.track-detail-copy h1,
.success-card h1 {
	font-size: clamp(2.8rem, 5vw, 5rem);
	font-weight: 800;
	letter-spacing: -.055em;
	line-height: 1;
	color: var(--text)
}

.inner-hero p,
.page-heading p {
	font-size: 1.08rem;
	line-height: 1.75;
	max-width: 700px;
	color: #c3c9d2
}

.hero-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px
}

.hero-stat-grid div {
	padding: 24px;
	background: rgba(17, 23, 32, .86);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 18px 45px rgba(0, 0, 0, .25);
	border-radius: 12px
}

.hero-stat-grid strong {
	font-size: 1.8rem;
	display: block;
	color: #fff
}

.hero-stat-grid span {
	color: var(--muted)
}

.inner-section {
	padding: 54px 0
}

.browse-layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 30px
}

.filter-panel,
.content-card,
.order-card,
.license-card {
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 12px;
	background: linear-gradient(145deg, var(--panel2), var(--panel));
	padding: 24px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .2)
}

.filter-panel {
	align-self: start;
	position: sticky;
	top: 105px
}

.filter-head,
.cart-title,
.results-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px
}

.filter-panel h2,
.results-toolbar h2,
.content-card h2,
.order-card h2,
.license-card h2 {
	font-size: 1.35rem;
	font-weight: 800
}

.filter-head button {
	border: 0;
	background: none;
	color: var(--pink);
	font-weight: 700
}

.filter-panel>label,
.filter-panel fieldset {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 22px;
	font-weight: 700;
	font-size: .87rem
}

.filter-panel input,
.filter-panel select,
.inner-page .form-control,
.inner-page .form-select {
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 11px 12px;
	background-color: #0d121a;
	color: #fff
}

.inner-page .form-control::placeholder {
	color: #7f8792
}

.inner-page select option {
	background: #111720;
	color: #fff
}

.filter-panel legend {
	font-size: .87rem;
	font-weight: 700
}

.filter-panel .check {
	display: flex;
	flex-direction: row;
	gap: 9px;
	font-weight: 500;
	margin: 7px 0
}

.range-value {
	font-size: .75rem;
	color: var(--muted)
}

.btn-brand {
	color: #fff;
	border: 0;
	background: linear-gradient(90deg, var(--pink), var(--magenta));
	box-shadow: 0 10px 30px rgba(255, 47, 117, .2)
}

.btn-brand:hover {
	color: #fff;
	transform: translateY(-2px)
}

.btn-outline-brand {
	color: var(--pink) !important;
	border: 1px solid var(--pink);
	background: transparent !important;
}

.btn-outline-brand:hover {
	color: #fff;
	background: var(--pink)
}

.results-toolbar {
	margin-bottom: 20px
}

.results-toolbar p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: .87rem
}

.view-btn {
	width: 42px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: #fff;
	border-radius: 7px
}

.view-btn.active {
	color: #fff;
	background: var(--pink);
	border-color: var(--pink)
}

.market-track-list {
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	overflow: hidden;
	background: var(--panel)
}

.market-track {
	display: grid;
	grid-template-columns: 62px 40px minmax(160px, 1fr) minmax(120px, 1.5fr) 42px 62px 100px 80px;
	gap: 13px;
	align-items: center;
	padding: 13px 15px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(100deg, #171d26, #11161e)
}

.market-track:last-child {
	border: 0
}

.market-track>img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: 8px
}

.track-play,
.soft-icon {
	border: 1px solid #596270;
	background: transparent;
	color: #fff;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.track-play:hover,
.soft-icon:hover {
	border-color: var(--pink);
	color: var(--pink)
}

.market-track-info h3 {
	font-size: .96rem;
	font-weight: 800;
	margin: 0
}

.market-track-info p {
	font-size: .78rem;
	color: var(--muted);
	margin: 2px 0
}

.track-tags {
	display: flex;
	gap: 7px;
	flex-wrap: wrap
}

.track-tags span,
.detail-tags span {
	font-size: .68rem;
	padding: 3px 7px;
	border-radius: 30px;
	background: #202734;
	color: #aeb5bf
}

.market-track-wave {
	height: 28px;
	background: repeating-linear-gradient(90deg, transparent 0 3px, #5c6470 3px 4px);
	clip-path: polygon(0 48%, 8% 30%, 16% 70%, 24% 20%, 32% 78%, 40% 35%, 48% 60%, 56% 10%, 64% 70%, 72% 33%, 80% 56%, 88% 25%, 100% 50%, 100% 53%, 0 55%)
}

.pagination-wrap {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px
}

.pagination-wrap a,
.pagination-wrap span {
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 7px;
	display: grid;
	place-items: center;
	color: var(--text);
	background: var(--panel)
}

.pagination-wrap a.active {
	background: var(--pink);
	color: #fff;
	border-color: var(--pink)
}

.track-detail-grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr) 370px;
	gap: 38px;
	align-items: center
}

.track-art-wrap {
	position: relative
}

.track-art-wrap img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 25px 55px rgba(0, 0, 0, .4)
}

.big-preview {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border: 1px solid var(--pink);
	border-radius: 50%;
	background: rgba(6, 10, 16, .88);
	color: #fff;
	font-size: 2rem
}

.artist-line {
	font-size: 1.1rem;
	color: var(--muted)
}

.artist-line i {
	color: var(--pink)
}

.detail-tags {
	display: flex;
	gap: 8px;
	margin: 20px 0
}

.detail-wave {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--panel)
}

.detail-wave span {
	font-size: .72rem;
	color: var(--muted)
}

.detail-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 22px
}

.license-card h2 {
	margin: 8px 0 18px
}

.license-options {
	display: grid;
	gap: 9px
}

.license-option {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 12px;
	cursor: pointer;
	background: #0e141c
}

.license-option.active {
	border-color: var(--pink);
	box-shadow: 0 0 0 2px rgba(255, 47, 117, .1)
}

.license-option span {
	display: flex;
	flex-direction: column
}

.license-option small {
	color: var(--muted);
	font-size: .7rem
}

.license-total {
	display: flex;
	justify-content: space-between;
	padding: 18px 0
}

.secure-note {
	display: block;
	text-align: center;
	color: var(--muted);
	margin-top: 12px
}

.metadata-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 24px
}

.metadata-grid div {
	padding: 16px;
	background: #0e141c;
	border: 1px solid rgba(255, 255, 255, .05);
	border-radius: 8px
}

.metadata-grid span,
.metadata-grid b {
	display: block
}

.metadata-grid span {
	color: var(--muted);
	font-size: .75rem
}

.artist-profile-mini {
	display: flex;
	align-items: center;
	gap: 18px
}

.artist-profile-mini img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 12px
}

.section-heading-large {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin: 44px 0 18px
}

.section-heading-large h2 {
	font-weight: 800
}

.compact .market-track {
	grid-template-columns: 55px 36px 1fr 1fr 40px 40px 55px 75px
}

.checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 28px;
	align-items: start
}

.cart-title h2 span {
	color: var(--muted);
	font-size: .85rem
}

.cart-item {
	display: grid;
	grid-template-columns: 90px 1fr auto 38px;
	gap: 18px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--line)
}

.cart-item img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 9px
}

.cart-item h3 {
	font-size: 1.05rem;
	font-weight: 800
}

.cart-item p {
	color: var(--muted);
	margin: 2px 0 10px
}

.license-select {
	max-width: 340px
}

.remove-item {
	border: 0;
	background: none;
	color: #aeb5bf
}

.promo-row {
	display: flex;
	gap: 10px;
	max-width: 440px;
	margin-top: 22px
}

.order-card {
	position: sticky;
	top: 105px
}

.order-card>div {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	padding: 9px 0;
	font-size: .88rem
}

.order-card>div strong {
	font-size: .83rem
}

.order-card .order-total {
	font-size: 1.15rem
}

.order-card .order-total strong {
	font-size: 1.3rem
}

.order-card p {
	font-size: .72rem;
	color: var(--muted);
	text-align: center;
	margin: 14px 0 0
}

.payment-icons {
	justify-content: center !important;
	color: var(--muted)
}

.checkout-steps {
	display: flex;
	gap: 12px;
	margin-top: 22px
}

.checkout-steps span {
	padding: 8px 13px;
	border-radius: 50px;
	background: #202734;
	font-size: .78rem
}

.checkout-steps .active {
	background: var(--pink);
	color: #fff
}

.checkout-steps .done {
	color: #45d98b
}

.checkout-form-card {
	margin-bottom: 18px
}

.form-section-head {
	display: flex;
	gap: 14px;
	margin-bottom: 22px
}

.form-section-head>span {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 47, 117, .14);
	color: var(--pink);
	display: grid;
	place-items: center;
	font-weight: 800
}

.form-section-head p {
	color: var(--muted);
	font-size: .8rem;
	margin: 2px 0
}

.checkout-form-card label {
	display: block;
	font-weight: 700;
	font-size: .82rem
}

.checkout-form-card label small {
	color: var(--muted)
}

.checkout-form-card .form-control,
.checkout-form-card .form-select {
	margin-top: 7px;
	min-height: 46px
}

.stripe-mock {
	border: 1px solid var(--line);
	border-radius: 9px;
	overflow: hidden;
	background: #0d121a
}

.stripe-mock>div {
	display: grid;
	grid-template-columns: 38px 1fr
}

.stripe-mock>div+div {
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--line)
}

.stripe-mock .form-control {
	border: 0 !important;
	margin: 0
}

.stripe-mock i {
	display: grid;
	place-items: center
}

.mini-order {
	display: grid !important;
	grid-template-columns: 48px 1fr auto;
	align-items: center !important
}

.mini-order img {
	width: 48px;
	height: 48px;
	border-radius: 6px
}

.mini-order span {
	display: flex;
	flex-direction: column
}

.mini-order small {
	color: var(--muted)
}

.success-main {
	min-height: 100vh;
	background: radial-gradient(circle at 80% 10%, rgba(199, 21, 140, .18), transparent 34%), var(--bg)
}

.success-wrap {
	padding: 120px 20px 80px
}

.success-card {
	max-width: 840px;
	margin: auto;
	background: linear-gradient(145deg, var(--panel2), var(--panel));
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 18px;
	padding: 48px;
	text-align: center;
	box-shadow: 0 25px 60px rgba(0, 0, 0, .35)
}

.success-icon {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: rgba(69, 217, 139, .12);
	color: #45d98b;
	display: grid;
	place-items: center;
	font-size: 2.3rem;
	margin: 0 auto 22px
}

.success-card>p {
	color: var(--muted);
	font-size: 1rem
}

.success-order {
	display: flex;
	justify-content: space-between;
	padding: 16px 20px;
	background: #0e141c;
	border-radius: 9px;
	margin: 28px 0
}

.download-list {
	text-align: left
}

.download-list article {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 15px 0;
	border-bottom: 1px solid var(--line)
}

.download-list img {
	width: 70px;
	height: 70px;
	border-radius: 8px
}

.download-list h3 {
	font-size: 1rem;
	font-weight: 800
}

.download-list p {
	font-size: .78rem;
	color: var(--muted);
	margin: 0
}

.success-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px
}

.support-note {
	font-size: .8rem !important;
	margin-top: 22px
}

.like-btn.active {
	color: #fff !important;
	background: var(--pink) !important;
	border-color: var(--pink) !important
}

.inner-page .offcanvas {
	background: #0b1017;
	color: #fff
}

.inner-page .offcanvas .btn-close {
	filter: invert(1)
}

@media(max-width:1199px) {
	.track-detail-grid {
		grid-template-columns: 280px 1fr
	}

	.license-card {
		grid-column: 1/-1
	}

	.market-track {
		grid-template-columns: 58px 38px 1fr 38px 40px 60px 100px;
	}

	.market-track .btn {
		display: block;
	}
}

@media(max-width:991px) {

	.browse-layout,
	.checkout-layout {
		grid-template-columns: 1fr
	}

	.filter-panel,
	.order-card {
		position: static
	}

	.filter-panel {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px
	}

	.filter-head,
	.filter-panel .btn {
		grid-column: 1/-1
	}

	.filter-panel>label,
	.filter-panel fieldset {
		margin-top: 0
	}

	.track-detail-grid {
		grid-template-columns: 260px 1fr
	}

	.metadata-grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:767px) {
	.inner-page .inner-main {
		padding-top: 72px
	}

	.inner-hero h1,
	.page-heading h1,
	.track-detail-copy h1,
	.success-card h1 {
		font-size: 2.55rem
	}

	.hero-stat-grid {
		margin-top: 25px
	}

	.filter-panel {
		grid-template-columns: 1fr
	}

	.filter-head,
	.filter-panel .btn {
		grid-column: auto
	}

	.results-toolbar {
		align-items: flex-start;
		flex-direction: column
	}

	.market-track {
		display: grid;
		grid-template-columns: 43px 34px 1fr 32px 32px !important;
		align-items: center;
	}

	/* PRICE - second line, left */
	.market-track> :nth-child(7) {
		grid-column: 1 / 4;
		grid-row: 2;
		justify-self: start;
	}

	/* DETAILS - second line, LAST / far right */
	.market-track> :nth-child(8) {
		grid-column: 4 / -1;
		grid-row: 2;
		justify-self: end;
	}

	.market-track-wave,
	.market-track>.soft-icon:nth-of-type(2),
	.market-track>strong,
	.market-track>.btn {
		display: none
	}

	.market-track-info .track-tags {
		display: none
	}

	.track-detail-grid {
		grid-template-columns: 1fr
	}

	.track-art-wrap {
		max-width: 100%;
	}

	.detail-actions .btn {
		width: 100%
	}

	.metadata-grid {
		grid-template-columns: 1fr
	}

	.cart-item {
		grid-template-columns: 70px 1fr 30px
	}

	.cart-item img {
		width: 70px;
		height: 70px
	}

	.cart-item>strong {
		display: block;
	}

	.success-card {
		padding: 28px 18px
	}

	.download-list article {
		grid-template-columns: 1fr;
	}

	.download-list article .btn {
		grid-column: 1/-1
	}

	.success-actions {
		flex-direction: column
	}

	.compact .market-track {
		grid-template-columns: 52px 36px 1fr 40px
	}

	.checkout-steps {
		overflow-x: auto
	}
}

/* ==========================================================
   ADDITIONAL INNER PAGES — ADDED STYLES ONLY
   Existing homepage and customer-flow CSS above is unchanged.
   ========================================================== */
.dashboard-shell {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 24px
}

.account-sidebar {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 20px;
	height: max-content;
	position: sticky;
	top: 110px
}

.user-mini {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line)
}

.avatar-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--pink), var(--magenta));
	font-weight: 800
}

.user-mini div:last-child {
	display: flex;
	flex-direction: column
}

.user-mini small {
	color: var(--muted)
}

.account-sidebar nav {
	display: flex;
	flex-direction: column;
	margin-top: 14px
}

.account-sidebar nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	color: #cdd3dc;
	text-decoration: none;
	border-radius: 8px
}

.account-sidebar nav a:hover,
.account-sidebar nav a.active {
	background: rgba(255, 47, 117, .12);
	color: #fff
}

.dashboard-content {
	min-width: 0
}

.dashboard-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 20px
}

.dashboard-stats article,
.dashboard-panel,
.form-card,
.onboarding-steps,
.subscription-plan,
.comparison-panel,
.credit-summary,
.allowance-summary {
	background: linear-gradient(145deg, var(--panel2), var(--panel));
	border: 1px solid var(--line);
	border-radius: 14px
}

.dashboard-stats article {
	padding: 22px
}

.dashboard-stats i {
	font-size: 1.5rem;
	color: var(--pink)
}

.dashboard-stats strong {
	display: block;
	font-size: 1.8rem;
	margin-top: 14px
}

.dashboard-stats span {
	color: var(--muted)
}

.dashboard-panel {
	padding: 24px
}

.panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px
}

.panel-heading h2 {
	margin: 0;
	font-size: 1.45rem
}

.panel-heading a,
.text-button {
	color: var(--pink);
	background: none;
	border: 0;
	text-decoration: none
}

.credit-meter>div,
.allowance-meter>div {
	display: flex;
	justify-content: space-between
}

.credit-meter progress,
.allowance-meter progress {
	width: 100%;
	height: 10px;
	accent-color: var(--pink);
	margin: 12px 0
}

.credit-meter small,
.allowance-meter small {
	color: var(--muted)
}

.download-table article,
.status-list article,
.catalogue-table article {
	display: grid;
	grid-template-columns: 58px 1fr auto auto;
	align-items: center;
	gap: 15px;
	padding: 14px 0;
	border-top: 1px solid var(--line)
}

.download-table img,
.status-list img,
.catalogue-table img {
	width: 52px;
	height: 52px;
	border-radius: 7px;
	object-fit: cover
}

.download-table div,
.status-list div,
.catalogue-table div {
	display: flex;
	flex-direction: column
}

.download-table small,
.status-list small,
.catalogue-table small {
	color: var(--muted)
}

.inner-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 32px;
	border-radius: 16px;
	background: linear-gradient(90deg, rgba(255, 47, 117, .18), rgba(199, 21, 140, .08));
	border: 1px solid rgba(255, 47, 117, .25)
}

.inner-cta h2 {
	max-width: 700px
}

.onboarding-shell {
	display: grid;
	grid-template-columns: 300px minmax(0, 760px);
	justify-content: center;
	gap: 24px
}

.onboarding-steps,
.form-card {
	padding: 26px
}

.onboarding-steps .step {
	display: flex;
	gap: 14px;
	position: relative;
	padding: 0 0 30px
}

.onboarding-steps .step:not(:last-child):after {
	content: "";
	position: absolute;
	left: 17px;
	top: 36px;
	width: 1px;
	height: calc(100% - 12px);
	background: var(--line)
}

.onboarding-steps .step>span {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	flex: 0 0 auto
}

.onboarding-steps .step.active>span,
.onboarding-steps .step.done>span {
	background: linear-gradient(135deg, var(--pink), var(--magenta));
	border-color: transparent
}

.onboarding-steps .step div {
	display: flex;
	flex-direction: column
}

.onboarding-steps small {
	color: var(--muted)
}

.form-card h2 {
	font-size: 2rem
}

.form-card>p {
	color: var(--muted)
}

.inner-page .form-control,
.inner-page .form-select,
.inner-page .input-group-text,
.inner-page textarea {
	background-color: #0d1219;
	border-color: var(--line);
	color: #fff
}

.inner-page .form-control:focus,
.inner-page .form-select:focus {
	background-color: #0d1219;
	color: #fff;
	border-color: var(--pink);
	box-shadow: 0 0 0 .2rem rgba(255, 47, 117, .12)
}

.inner-page .form-select option {
	background: #111720
}

.check {
	display: flex;
	gap: 10px;
	align-items: center;
	;
	color: #c8ced7
}

.otp-fields {
	display: grid;
	grid-template-columns: repeat(6, 56px);
	gap: 10px
}

.otp-fields input {
	height: 62px;
	text-align: center;
	font-size: 1.6rem;
	background: #0d1219;
	border: 1px solid var(--line);
	border-radius: 8px;
	color: #fff
}

.agreement-box {
	max-height: 360px;
	overflow: auto;
	padding: 20px;
	background: #0d1219;
	border: 1px solid var(--line);
	border-radius: 10px
}

.agreement-box h3 {
	font-size: 1.05rem;
	margin-top: 20px
}

.agreement-box h3:first-child {
	margin-top: 0
}

.agreement-box p {
	color: var(--muted)
}

.status {
	display: inline-flex;
	align-items: center;
	width: max-content;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 700
}

.status.approved {
	background: rgba(57, 202, 120, .14);
	color: #68df9d
}

.status.pending {
	background: rgba(255, 193, 7, .14);
	color: #ffd15c
}

.status.rejected {
	background: rgba(255, 77, 99, .14);
	color: #ff7f91
}

.status.draft {
	background: rgba(168, 175, 187, .14);
	color: #c1c7d0
}

.css-chart {
	height: 250px;
	display: flex;
	align-items: flex-end;
	gap: 20px;
	padding: 20px 10px 35px;
	border-bottom: 1px solid var(--line)
}

.css-chart span {
	flex: 1;
	height: var(--h);
	background: linear-gradient(var(--pink), var(--magenta));
	border-radius: 8px 8px 0 0;
	position: relative;
	min-width: 28px
}

.css-chart b {
	position: absolute;
	bottom: -28px;
	left: 50%;
	transform: translateX(-50%);
	font-size: .72rem;
	color: var(--muted)
}

.compact-select {
	width: auto;
	min-width: 160px
}

.upload-drop {
	min-height: 210px;
	border: 1px dashed #525b68;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: #0d1219;
	cursor: pointer
}

.upload-drop i {
	font-size: 2.4rem;
	color: var(--pink)
}

.upload-drop span {
	color: var(--muted)
}

.upload-drop input {
	display: none
}

.artwork-drop {
	min-height: 210px
}

/* Upload progress, drawn by initUploadProgress() from Livewire's own upload
   events. Hidden by the `hidden` attribute until an upload starts. */
.upload-progress {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px
}

.upload-progress[hidden] {
	display: none
}

.upload-progress-bar {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #0d1219;
	border: 1px solid var(--line);
	overflow: hidden
}

.upload-progress-bar>span {
	display: block;
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pink), var(--magenta));
	/* Follows the reported percentage rather than animating on its own: a bar
	   that moves while nothing is uploading is a bar that lies. */
	transition: width 0.2s linear
}

.upload-progress small {
	color: var(--muted);
	font-size: 0.8125rem
}

/* The artist's picture in the workspace sidebar, in place of the note icon. */
.avatar-circle--image {
	background-position: center;
	background-size: cover
}

/* The picture-upload field shows the current picture as its own background, so
   the prompt over it needs a plate to stay readable against any photograph. */
.artist-profile-drop-label {
	background: rgba(6, 9, 14, .72);
	padding: 6px 14px;
	border-radius: 999px
}

.catalogue-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px
}

.catalogue-tabs button {
	background: #0d1219;
	border: 1px solid var(--line);
	color: #c7cdd6;
	border-radius: 999px;
	padding: 8px 13px;
	font-size: 0.875rem;
}

.catalogue-tabs button.active {
	background: var(--pink);
	border-color: var(--pink);
	color: #fff
}

.catalogue-table article {
	grid-template-columns: 58px 1.5fr .7fr .5fr 40px
}

.submission-head {
	display: flex;
	align-items: center;
	gap: 20px
}

.submission-head img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 12px
}

.moderation-timeline {
	margin-top: 30px
}

.moderation-timeline>div {
	display: flex;
	gap: 16px;
	position: relative;
	padding-bottom: 28px
}

.moderation-timeline>div:not(:last-child):after {
	content: "";
	position: absolute;
	left: 18px;
	top: 38px;
	width: 2px;
	height: calc(100% - 10px);
	background: var(--line)
}

.moderation-timeline>div>span {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	z-index: 1;
	background: var(--panel)
}

.moderation-timeline .complete>span,
.moderation-timeline .active>span {
	background: var(--pink);
	border-color: var(--pink)
}

.moderation-timeline div div {
	display: flex;
	flex-direction: column
}

.moderation-timeline small {
	color: var(--muted)
}

.notice-card {
	display: flex;
	gap: 14px;
	padding: 18px;
	border-radius: 10px;
	background: rgba(36, 151, 255, .09);
	border: 1px solid rgba(36, 151, 255, .2)
}

.notice-card i {
	color: #5ab1ff
}

.notice-card p {
	margin: 4px 0 0;
	color: var(--muted)
}

.sales-table {
	overflow: auto
}

.table-row {
	min-width: 720px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr .7fr .7fr;
	gap: 15px;
	padding: 15px;
	border-top: 1px solid var(--line);
	align-items: center
}

.table-head {
	color: var(--muted);
	font-size: .78rem;
	text-transform: uppercase
}

.payout-grid,
.manage-grid,
.cancel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px
}

.payout-balance {
	font-size: 3rem;
	font-weight: 800;
	margin: 15px 0
}

.connected-account,
.payment-method {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: #0d1219;
	border: 1px solid var(--line);
	border-radius: 10px;
	margin: 18px 0
}

.connected-account i {
	font-size: 1.4rem;
	color: #68df9d
}

.connected-account div,
.payment-method div {
	display: flex;
	flex-direction: column
}

.payment-method .text-button {
	margin-left: auto
}

.billing-toggle {
	width: max-content;
	margin: 0 auto 30px;
	display: flex;
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 5px;
	border-radius: 999px
}

.billing-toggle button {
	border: 0;
	background: transparent;
	color: #c8ced6;
	padding: 10px 18px;
	border-radius: 999px
}

.billing-toggle button.active {
	background: var(--pink);
	color: #fff
}

.billing-toggle span {
	font-size: .65rem
}

.pricing-grid.full-pricing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px
}

.subscription-plan {
	padding: 30px;
	position: relative
}

.subscription-plan.featured {
	border-color: var(--pink);
	transform: translateY(-8px)
}

.popular-label {
	position: absolute;
	top: 0;
	right: 20px;
	transform: translateY(-50%);
	background: var(--pink);
	padding: 6px 10px;
	border-radius: 999px;
	font-size: .72rem
}

.plan-label {
	font-weight: 800;
	letter-spacing: .12em
}

.sub-price b {
	font-size: 2.6rem
}

.sub-price small {
	color: var(--muted)
}

.subscription-plan ul {
	min-height: 150px;
	padding-left: 1.1rem;
	line-height: 2
}

.subscription-plan .btn {
	width: 100%
}

.comparison-panel {
	padding: 25px;
	margin-top: 35px
}

.comparison-row {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 10px;
	padding: 14px;
	border-top: 1px solid var(--line)
}

.comparison-row.head {
	color: var(--muted);
	text-transform: uppercase;
	font-size: .75rem
}

.comparison-row i {
	color: #68df9d
}

.billing-choice label {
	display: flex;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	margin-bottom: 10px
}

.billing-choice span {
	display: flex;
	flex-direction: column
}

.billing-choice small {
	color: var(--muted)
}

.plan-overview {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 25px 0
}

.plan-overview>div span {
	display: block;
	font-size: 2.6rem;
	font-weight: 800
}

.plan-overview small {
	color: var(--muted)
}

.credit-summary,
.allowance-summary {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 30px;
	align-items: center;
	padding: 30px
}

.credit-summary>div:first-child strong,
.allowance-summary>div:first-child strong {
	display: block;
	font-size: 4rem
}

.credit-summary small,
.credit-summary p,
.allowance-summary small,
.allowance-summary p {
	color: var(--muted)
}

.credit-ring,
.allowance-ring {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(var(--pink) calc(var(--value)*1%), #242b35 0);
	position: relative
}

.credit-ring:after,
.allowance-ring:after {
	content: "";
	position: absolute;
	inset: 13px;
	border-radius: 50%;
	background: var(--panel)
}

.credit-ring span,
.allowance-ring span {
	position: relative;
	z-index: 1;
	font-weight: 800;
	font-size: 1.3rem
}

.loss-list {
	list-style: none;
	padding: 0;
	line-height: 2.2
}

.loss-list i {
	color: #ff7384;
	margin-right: 8px
}

.retention-offer {
	margin-top: 24px;
	padding: 22px;
	border: 1px solid rgba(255, 47, 117, .3);
	background: rgba(255, 47, 117, .08);
	border-radius: 12px
}

.btn-danger-soft {
	background: rgba(255, 77, 99, .14);
	border: 1px solid rgba(255, 77, 99, .4);
	color: #ff8d9c
}

.btn-danger-soft:hover {
	background: #ff4d63;
	color: #fff
}

.stripe-field {
	display: grid;
	grid-template-columns: auto 1fr 110px 80px;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #0d1219
}

.stripe-field i {
	padding-left: 14px
}

.stripe-field input {
	min-width: 0;
	background: transparent;
	border: 0;
	color: #fff;
	padding: 12px;
	outline: none
}

.stripe-field input+input {
	border-left: 1px solid var(--line)
}

@media(max-width:1199px) {
	.dashboard-shell {
		grid-template-columns: 220px minmax(0, 1fr)
	}

	.dashboard-stats {
		grid-template-columns: repeat(2, 1fr)
	}

	.pricing-grid.full-pricing {
		grid-template-columns: 1fr 1fr
	}

	.subscription-plan.gold {
		grid-column: 1/-1
	}

	.onboarding-shell {
		grid-template-columns: 250px minmax(0, 1fr)
	}
}

@media(max-width:991px) {

	.dashboard-shell,
	.onboarding-shell {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.account-sidebar {
		position: static
	}

	.account-sidebar nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr)
	}

	.onboarding-steps {
		display: grid;
		grid-template-columns: repeat(4, 1fr)
	}

	.onboarding-steps .step {
		padding: 0
	}

	.payout-grid,
	.manage-grid,
	.cancel-grid {
		grid-template-columns: 1fr
	}

	.credit-summary,
	.allowance-summary {
		grid-template-columns: 1fr;
		text-align: center
	}

	.credit-ring,
	.allowance-ring {
		margin: auto
	}

	.pricing-grid.full-pricing {
		grid-template-columns: 1fr
	}

	.subscription-plan.gold {
		grid-column: auto
	}

	.subscription-plan.featured {
		transform: none
	}

	.comparison-row {
		grid-template-columns: 1.4fr repeat(3, .8fr)
	}
}

@media(max-width:767px) {
	.dashboard-stats {
		grid-template-columns: 1fr 1fr
	}

	.account-sidebar nav {
		grid-template-columns: 1fr 1fr
	}

	.download-table article,
	.status-list article {
		grid-template-columns: 52px 1fr
	}

	.download-table article>span,
	.download-table article>.btn,
	.status-list article>.status {
		grid-column: 2
	}

	.onboarding-steps {
		grid-template-columns: 1fr 1fr;
		gap: 18px
	}

	.otp-fields {
		grid-template-columns: repeat(6, 1fr)
	}

	.otp-fields input {
		width: 100%;
		height: 52px
	}

	.catalogue-table article {
		grid-template-columns: 52px 1fr 40px
	}

	.catalogue-table article>.status,
	.catalogue-table article>span:not(.status) {
		grid-column: 2
	}

	.inner-cta {
		align-items: flex-start;
		flex-direction: column
	}

	.submission-head {
		align-items: flex-start
	}

	.plan-overview {
		flex-direction: column
	}

	.comparison-panel {
		overflow: auto
	}

	.comparison-row {
		min-width: 650px
	}

	.stripe-field {
		grid-template-columns: auto 1fr
	}

	.stripe-field input:nth-of-type(n+2) {
		border-left: 0;
		border-top: 1px solid var(--line);
		grid-column: 1/-1
	}

	.credit-summary>div:first-child strong,
	.allowance-summary>div:first-child strong {
		font-size: 3rem
	}
}

/* =========================================================
   PUBLIC PAGES — ADDED STYLES ONLY
   Original homepage CSS above remains unchanged.
   ========================================================= */
.inner-main {
	padding-top: 78px
}

.section-kicker {
	display: inline-block;
	color: var(--pink);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 14px
}

.auth-shell {
	min-height: calc(100vh - 78px);
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	background: #070b11
}

.auth-visual {
	position: relative;
	min-height: 760px;
	background: linear-gradient(90deg, rgba(5, 8, 13, .3), rgba(5, 8, 13, .86)), url('../images/auth-studio.png') center/cover no-repeat;
	display: flex;
	align-items: flex-end;
	padding: 70px clamp(30px, 6vw, 90px)
}

.auth-visual:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #070b11 0, transparent 55%);
	pointer-events: none
}

.auth-visual-content {
	position: relative;
	z-index: 1;
	max-width: 620px
}

.auth-visual h1 {
	font-size: clamp(3rem, 5vw, 5.6rem);
	line-height: .94;
	letter-spacing: -.05em;
	font-weight: 800
}

.auth-visual p {
	max-width: 560px;
	color: #c5cbd4;
	font-size: 1.03rem;
	line-height: 1.75
}

.auth-stat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 30px
}

.auth-stat-grid div {
	padding: 17px;
	border: 1px solid rgba(255, 255, 255, .11);
	background: rgba(13, 18, 25, .7);
	border-radius: 9px;
	backdrop-filter: blur(12px)
}

.auth-stat-grid strong,
.auth-stat-grid span {
	display: block
}

.auth-stat-grid strong {
	font-size: 1.25rem
}

.auth-stat-grid span {
	color: var(--muted);
	font-size: .74rem;
	margin-top: 3px
}

.auth-form-side {
	display: grid;
	place-items: center;
	padding: 55px 7vw;
	background: radial-gradient(circle at 80% 10%, rgba(199, 21, 140, .13), transparent 30%), #070b11
}

.auth-card {
	width: min(100%, 560px);
	padding: 38px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	background: linear-gradient(145deg, rgba(23, 29, 38, .98), rgba(11, 15, 21, .98));
	box-shadow: 0 28px 80px rgba(0, 0, 0, .35)
}

.auth-card h2,
.contact-form-card h2,
.contact-info-panel h2 {
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 800;
	letter-spacing: -.04em
}

.form-intro {
	color: var(--muted);
	margin-bottom: 28px
}

.public-form {
	display: grid;
	gap: 18px
}

.public-form label {
	display: grid;
	gap: 8px;
	color: #e4e8ee;
	font-size: .77rem;
	font-weight: 700
}

.public-form input,
.public-form select,
.public-form textarea {
	width: 100%;
	border: 1px solid #303947;
	border-radius: 7px;
	background: #0e141c;
	color: #fff;
	padding: 14px 15px;
	outline: 0;
	transition: .25s
}

.public-form textarea {
	resize: vertical
}

.public-form input:focus,
.public-form select:focus,
.public-form textarea:focus {
	border-color: var(--pink);
	box-shadow: 0 0 0 3px rgba(255, 47, 117, .1)
}

.form-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px
}

.password-wrap {
	position: relative;
	display: block
}

.password-wrap input {
	padding-right: 48px
}

.password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: #aab1bc;
	font-size: 1rem
}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	font-size: .76rem
}

.form-options a,
.auth-switch a,
.artist-route a {
	color: var(--pink);
	text-decoration: none;
	font-weight: 800
}

.check-line {
	display: flex !important;
	grid-template-columns: auto 1fr !important;
	align-items: center;
	gap: 9px !important;
	font-weight: 500 !important
}

.check-line input {
	width: 16px;
	height: 16px;
	padding: 0;
	accent-color: var(--pink)
}

.form-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #8d95a1;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 22px 0
}

.form-divider:before,
.form-divider:after {
	content: '';
	height: 1px;
	background: #2a323e;
	flex: 1
}

.social-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px
}

.social-auth button {
	min-height: 46px;
	border: 1px solid #303947;
	border-radius: 7px;
	background: #111720;
	color: #fff;
	font-weight: 700
}

.auth-switch {
	text-align: center;
	color: var(--muted);
	font-size: .8rem;
	margin: 22px 0 0
}

.auth-benefits {
	list-style: none;
	padding: 0;
	margin: 27px 0 0;
	display: grid;
	gap: 13px
}

.auth-benefits li {
	display: flex;
	gap: 10px;
	align-items: center;
	color: #d4d9e1
}

.auth-benefits i {
	color: var(--pink)
}

.artist-route {
	margin-top: 22px;
	padding: 16px;
	border: 1px solid rgba(255, 47, 117, .22);
	background: rgba(255, 47, 117, .06);
	border-radius: 9px;
	display: grid;
	grid-template-columns: 38px 1fr auto;
	gap: 12px;
	align-items: center
}

.artist-route>i {
	font-size: 1.4rem;
	color: var(--pink)
}

.artist-route strong,
.artist-route span {
	display: block
}

.artist-route span {
	color: var(--muted);
	font-size: .72rem
}

.inner-hero {
	min-height: 430px;
	display: flex;
	align-items: center;
	background: radial-gradient(circle at 80% 20%, rgba(199, 21, 140, .24), transparent 33%), linear-gradient(135deg, #080c12, #111720);
	border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.inner-hero-copy {
	max-width: 800px;
	padding: 90px 0
}

.inner-hero h1,
.about-hero h1 {
	font-size: clamp(3.3rem, 6vw, 6.5rem);
	line-height: .92;
	font-weight: 800;
	letter-spacing: -.055em
}

.inner-hero p,
.about-hero p {
	max-width: 680px;
	color: #c6ccd4;
	font-size: 1.08rem;
	line-height: 1.75
}

.contact-section {
	padding: 82px 0;
	background: #080c12
}

.contact-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 22px
}

.contact-info-panel,
.contact-form-card {
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 13px;
	background: linear-gradient(145deg, #121821, #0d1219)
}

.contact-info-panel p {
	color: var(--muted);
	line-height: 1.7
}

.contact-method {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 14px;
	align-items: center;
	padding: 17px 0;
	border-bottom: 1px solid #27303b
}

.contact-method>i {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 47, 117, .35);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--pink)
}

.contact-method span,
.contact-method a,
.contact-method strong {
	display: block
}

.contact-method span {
	font-size: .69rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .08em
}

.contact-method a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	margin-top: 2px
}

.response-note {
	display: flex;
	gap: 10px;
	color: #aeb5bf;
	margin-top: 22px;
	font-size: .77rem
}

.faq-wrap {
	margin-top: 72px
}

.section-title-wide {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 25px;
	margin-bottom: 24px
}

.section-title-wide h2 {
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -.04em
}

.faq-accordion {
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 11px;
	overflow: hidden
}

.faq-accordion .accordion-item {
	background: #111720;
	color: #fff;
	border-color: #28313d
}

.faq-accordion .accordion-button {
	background: #111720;
	color: #fff;
	font-weight: 700;
	padding: 21px
}

.faq-accordion .accordion-button:not(.collapsed) {
	background: #161c26;
	color: #fff;
	box-shadow: none
}

.faq-accordion .accordion-button:after {
	filter: invert(1)
}

.faq-accordion .accordion-body {
	color: #b8c0ca;
	line-height: 1.75
}

.about-hero {
	position: relative;
	min-height: 680px;
	display: flex;
	align-items: center;
	overflow: hidden
}

.about-hero-bg {
	position: absolute;
	inset: 0;
	background: url('../images/about-studio.png') center/cover no-repeat
}

.about-hero-inner {
	position: relative;
	z-index: 2
}

.about-hero-inner>div {
	max-width: 820px;
	padding: 90px 0
}

.about-story-section,
.about-content-section {
	padding: 96px 0;
	background: #080c12
}

.editorial-grid {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: 70px;
	align-items: center
}

.editorial-grid h2,
.about-split h2,
.about-copy-block h2,
.future-copy h2 {
	font-size: clamp(2.4rem, 4.5vw, 4.8rem);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1
}

.editorial-grid p,
.about-split p,
.about-copy-block p,
.future-copy p {
	color: #bcc3cd;
	line-height: 1.85
}

.editorial-image {
	position: relative
}

.editorial-image img {
	width: 100%;
	min-height: 560px;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .1)
}

.editorial-image span {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, .15);
	background: rgba(7, 10, 15, .78);
	backdrop-filter: blur(12px);
	border-radius: 8px;
	font-weight: 700
}

.process-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-top: 80px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	overflow: hidden
}

.process-strip div {
	min-height: 150px;
	padding: 24px;
	border-right: 1px solid #28313d;
	background: #111720;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.process-strip div:last-child {
	border-right: 0
}

.process-strip b {
	color: #69717d;
	font-size: .75rem
}

.process-strip i {
	color: var(--pink);
	font-size: 1.8rem
}

.process-strip span {
	font-weight: 700
}

.about-dark-section {
	padding: 100px 0;
	background: radial-gradient(circle at 15% 45%, rgba(199, 21, 140, .18), transparent 28%), #05080d
}

.about-split {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 80px;
	align-items: center
}

.about-icon-stage {
	min-height: 520px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	background: radial-gradient(circle, rgba(255, 47, 117, .15), transparent 58%)
}

.orbit {
	width: 220px;
	height: 220px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	animation: slowspin 18s linear infinite
}

.orbit i {
	font-size: 4rem;
	color: var(--pink)
}

.orbit span {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(var(--pink), var(--magenta));
	box-shadow: 0 0 25px rgba(255, 47, 117, .6)
}

.orbit span:nth-child(2) {
	top: -9px
}

.orbit span:nth-child(3) {
	right: 12px;
	bottom: 30px
}

.orbit span:nth-child(4) {
	left: 4px;
	bottom: 48px
}

@keyframes slowspin {
	to {
		transform: rotate(360deg)
	}
}

.principle-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
	margin-top: 28px
}

.principle-grid article,
.platform-values article {
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	background: #111720
}

.principle-grid i,
.platform-values i {
	color: var(--pink);
	font-size: 1.5rem
}

.principle-grid h3,
.platform-values h3 {
	font-size: 1rem;
	margin: 14px 0 7px
}

.principle-grid p,
.platform-values p {
	font-size: .77rem;
	line-height: 1.65;
	margin: 0
}

.about-copy-block {
	max-width: 1180px;
	margin: 0 auto 88px
}

.copy-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 55px;
	margin-top: 25px
}

.platform-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin-bottom: 95px
}

.future-section {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	background: url('../images/auth-studio.png') center/cover no-repeat
}

.future-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #05080d 0, rgba(5, 8, 13, .88) 48%, rgba(5, 8, 13, .3) 100%)
}

.future-copy {
	position: relative;
	z-index: 1;
	max-width: 820px;
	padding: 90px 0
}

.active-link {
	color: var(--pink) !important
}

@media(max-width:1199px) {
	.auth-shell {
		grid-template-columns: 1fr
	}

	.auth-visual {
		min-height: 560px
	}

	.contact-grid,
	.editorial-grid,
	.about-split {
		grid-template-columns: 1fr
	}

	.about-icon-stage {
		min-height: 420px;
		max-width: 620px;
		width: 100%;
		margin: auto
	}

	.platform-values {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width:767px) {
	.inner-main {
		padding-top: 70px
	}

	.auth-visual {
		min-height: 500px;
		padding: 50px 24px
	}

	.auth-form-side {
		padding: 34px 15px
	}

	.auth-card {
		padding: 24px
	}

	.auth-stat-grid,
	.form-two,
	.social-auth,
	.principle-grid,
	.copy-columns {
		grid-template-columns: 1fr
	}

	.artist-route {
		grid-template-columns: 34px 1fr
	}

	.artist-route a {
		grid-column: 2
	}

	.inner-hero {
		min-height: inherit;
	}

	.inner-hero-copy {
		padding: 70px 0
	}

	.contact-section,
	.about-story-section,
	.about-content-section,
	.about-dark-section {
		padding: 65px 0
	}

	.contact-info-panel,
	.contact-form-card {
		padding: 24px
	}

	.process-strip {
		grid-template-columns: 1fr
	}

	.process-strip div {
		min-height: 110px;
		border-right: 0;
		border-bottom: 1px solid #28313d
	}

	.platform-values {
		grid-template-columns: 1fr
	}

	.editorial-image img {
		min-height: 380px
	}

	.about-hero {
		min-height: 590px
	}

	.about-hero-inner>div,
	.future-copy {
		padding: 70px 0
	}

	.section-title-wide {
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}
}

/* ABOUT PAGE MUSIC GRAPHIC — ADDED STYLES ONLY */
.music-universe {
	position: relative;
	min-height: 520px;
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(circle at 50% 50%, rgba(255, 47, 117, .16), transparent 24%), radial-gradient(circle at 32% 38%, rgba(199, 21, 140, .13), transparent 30%);
}

.music-universe::before {
	content: '';
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .04);
	box-shadow: inset 0 0 80px rgba(255, 47, 117, .04);
}

.music-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(44px);
	pointer-events: none;
	opacity: .58;
}

.music-glow-one {
	width: 260px;
	height: 260px;
	background: rgba(255, 47, 117, .19);
	animation: musicGlowPulse 4.8s ease-in-out infinite;
}

.music-glow-two {
	width: 155px;
	height: 155px;
	left: 20%;
	top: 22%;
	background: rgba(142, 51, 255, .16);
	animation: musicGlowPulse 4.8s 1.1s ease-in-out infinite reverse;
}

.music-ring {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	pointer-events: none;
}

.music-ring-outer {
	width: min(72%, 470px);
	aspect-ratio: 1;
	box-shadow: 0 0 80px rgba(255, 47, 117, .05);
	animation: musicRingBreathe 5s ease-in-out infinite;
}

.music-ring-inner {
	width: min(43%, 275px);
	aspect-ratio: 1;
	border-color: rgba(255, 47, 117, .24);
	animation: musicRingBreathe 5s .7s ease-in-out infinite reverse;
}

.vinyl-core {
	position: relative;
	width: 158px;
	height: 158px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, .09) 0 1px, transparent 2px 8px), radial-gradient(circle at 32% 28%, #2d3440 0, #111720 35%, #05080d 72%);
	border: 1px solid rgba(255, 255, 255, .15);
	box-shadow: 0 0 0 11px rgba(255, 255, 255, .015), 0 0 55px rgba(255, 47, 117, .25);
	z-index: 5;
	animation: vinylSpin 11s linear infinite;
}

.vinyl-core::after {
	content: '';
	position: absolute;
	inset: 14px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, .13);
}

.vinyl-label {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 62px;
	height: 62px;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	font-size: 1.55rem;
	background: linear-gradient(145deg, var(--pink), var(--magenta));
	box-shadow: 0 0 30px rgba(255, 47, 117, .45);
}

.vinyl-grooves {
	position: absolute;
	inset: 29px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .08);
}

.equalizer {
	position: absolute;
	left: 50%;
	bottom: 14%;
	transform: translateX(-50%);
	height: 58px;
	display: flex;
	align-items: end;
	gap: 6px;
	z-index: 6;
}

.equalizer span {
	width: 5px;
	height: 20px;
	border-radius: 10px;
	background: linear-gradient(to top, var(--magenta), var(--pink));
	box-shadow: 0 0 12px rgba(255, 47, 117, .36);
	transform-origin: bottom;
	animation: equalizerDance .9s ease-in-out infinite alternate;
}

.equalizer span:nth-child(2) {
	animation-delay: -.22s;
	height: 38px;
}

.equalizer span:nth-child(3) {
	animation-delay: -.47s;
	height: 29px;
}

.equalizer span:nth-child(4) {
	animation-delay: -.13s;
	height: 52px;
}

.equalizer span:nth-child(5) {
	animation-delay: -.61s;
	height: 34px;
}

.equalizer span:nth-child(6) {
	animation-delay: -.34s;
	height: 45px;
}

.equalizer span:nth-child(7) {
	animation-delay: -.08s;
	height: 25px;
}

.music-orbit {
	position: absolute;
	inset: 50% auto auto 50%;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 50%;
	transform-style: preserve-3d;
	z-index: 4;
}

.music-orbit-one {
	width: 270px;
	height: 270px;
	margin: -135px 0 0 -135px;
	animation: orbitSpin 13s linear infinite;
}

.music-orbit-two {
	width: 430px;
	height: 430px;
	margin: -215px 0 0 -215px;
	animation: orbitSpin 21s linear infinite reverse;
}

.music-node {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 1.25rem;
	background: rgba(14, 19, 28, .92);
	border: 1px solid rgba(255, 47, 117, .5);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 20px rgba(255, 47, 117, .13);
	backdrop-filter: blur(10px);
}

.music-node i {
	animation: iconCounterSpin 13s linear infinite reverse;
}

.music-orbit-two .music-node i {
	animation-duration: 21s;
	animation-direction: normal;
}

.node-headphones {
	left: -24px;
	top: calc(50% - 24px);
}

.node-mic {
	right: -24px;
	top: calc(50% - 24px);
}

.node-wave {
	top: -24px;
	left: calc(50% - 24px);
}

.node-cpu {
	right: 12%;
	bottom: 3%;
}

.node-disc {
	left: 9%;
	bottom: 8%;
}

.floating-note {
	position: absolute;
	z-index: 7;
	color: var(--pink);
	filter: drop-shadow(0 0 10px rgba(255, 47, 117, .45));
	animation: noteFloat 4.5s ease-in-out infinite;
}

.note-one {
	left: 17%;
	top: 27%;
	font-size: 1.35rem;
}

.note-two {
	right: 18%;
	top: 20%;
	font-size: 1.7rem;
	animation-delay: -1.7s;
}

.note-three {
	right: 19%;
	bottom: 24%;
	font-size: 1.2rem;
	animation-delay: -3s;
}

.music-particle {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pink);
	box-shadow: 0 0 15px rgba(255, 47, 117, .8);
	animation: particlePulse 3.2s ease-in-out infinite;
}

.particle-one {
	top: 16%;
	left: 42%;
}

.particle-two {
	bottom: 17%;
	left: 27%;
	animation-delay: -1.1s;
}

.particle-three {
	top: 42%;
	right: 12%;
	animation-delay: -2.2s;
}

@keyframes vinylSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes orbitSpin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes iconCounterSpin {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes equalizerDance {
	0% {
		transform: scaleY(.32);
		opacity: .55;
	}

	100% {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes musicGlowPulse {
	50% {
		transform: scale(1.18);
		opacity: .85;
	}
}

@keyframes musicRingBreathe {
	50% {
		transform: scale(1.04);
		border-color: rgba(255, 47, 117, .3);
	}
}

@keyframes noteFloat {
	50% {
		transform: translateY(-18px) rotate(9deg);
		opacity: .62;
	}
}

@keyframes particlePulse {
	50% {
		transform: scale(2.1);
		opacity: .28;
	}
}

@media (max-width: 1199px) {
	.music-universe {
		min-height: 460px;
	}

	.music-orbit-two {
		width: 370px;
		height: 370px;
		margin: -185px 0 0 -185px;
	}
}

@media (max-width: 767px) {
	.music-universe {
		min-height: 390px;
		margin-bottom: 30px;
	}

	.vinyl-core {
		width: 126px;
		height: 126px;
	}

	.vinyl-label {
		width: 50px;
		height: 50px;
		font-size: 1.25rem;
	}

	.music-orbit-one {
		width: 220px;
		height: 220px;
		margin: -110px 0 0 -110px;
	}

	.music-orbit-two {
		width: 320px;
		height: 320px;
		margin: -160px 0 0 -160px;
	}

	.music-node {
		width: 42px;
		height: 42px;
		font-size: 1.05rem;
	}

	.node-headphones {
		left: -21px;
		top: calc(50% - 21px);
	}

	.node-mic {
		right: -21px;
		top: calc(50% - 21px);
	}

	.node-wave {
		top: -21px;
		left: calc(50% - 21px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.music-universe *,
	.music-universe *::before,
	.music-universe *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.music-universe .vinyl-core,
.music-universe .music-orbit,
.music-universe .floating-note {
	translate: var(--parallax-x, 0) var(--parallax-y, 0);
	transition: translate .35s ease-out;
}

/* =========================================================
   CENTRED RESPONSIVE HEADER — NEW CSS ADDED ONLY
   Layout: Home Browse Charts Playlists | LOGO | Pricing Login Search Cart Join
   ========================================================= */
.rich-centered-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	min-height: 82px;
	column-gap: 24px;
}

.rich-header-left {
	grid-column: 1;
	min-width: 0;
	justify-self: start;
}

.rich-header-logo {
	grid-column: 2;
	justify-self: center;
	margin: 0 !important;
	padding: 0;
	position: relative;
	z-index: 2;
	line-height: 1;
}

.rich-header-logo img {
	display: block;
	width: 170px;
	height: auto;
	transition: width .3s ease, filter .3s ease, transform .3s ease;
}

.rich-header-logo:hover img {
	transform: translateY(-1px);
	filter: drop-shadow(0 0 14px rgba(255, 47, 117, .28));
}

.rich-header-right {
	grid-column: 3;
	justify-self: end;
	min-width: 0;
	gap: 14px;
}

.rich-header-menu {
	gap: clamp(18px, 1.5vw, 34px);
}

.rich-header-menu-right {
	margin-right: 2px;
}

.rich-header-menu .nav-link {
	white-space: nowrap;
}

.rich-login-btn,
.rich-join-btn {
	white-space: nowrap;
	padding-left: 1.15rem;
	padding-right: 1.15rem;
}

.rich-header-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: 50%;
	transition: background .25s ease, color .25s ease, transform .25s ease;
}

.rich-header-icon:hover {
	color: var(--pink);
	background: rgba(255, 255, 255, .06);
	transform: translateY(-1px);
}

.rich-mobile-toggle {
	grid-column: 1;
	justify-self: start;
	padding: .35rem;
}

.rich-mobile-actions {
	grid-column: 3;
	justify-self: end;
	gap: 6px;
}

.site-header.scrolled .rich-centered-header {
	min-height: 70px;
	padding-top: .55rem !important;
	padding-bottom: .55rem !important;
}

.site-header.scrolled .rich-header-logo img {
	width: 102px;
}

.mobile-auth-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding-top: 22px;
}

.mobile-auth-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
	.rich-centered-header {
		column-gap: 14px;
	}

	.rich-header-menu {
		gap: 8px;
	}

	.rich-header-menu .nav-link {
		font-size: .7rem;
	}

	.rich-header-right {
		gap: 8px;
	}

	.rich-login-btn,
	.rich-join-btn {
		padding-left: .85rem;
		padding-right: .85rem;
	}

	.rich-header-icon {
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 1199.98px) {
	.rich-centered-header {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		min-height: 72px;
		column-gap: 10px;
	}

	.rich-header-logo {
		position: absolute;
		left: 0;
		transform: translateX(0%);
		margin: 0 auto !important;
		right: 0;
		grid-column: 1;
	}

	.rich-header-logo img {
		width: 108px;
	}

	.site-header.scrolled .rich-header-logo img {
		width: 96px;
	}
}

@media (max-width: 575.98px) {
	.rich-centered-header {
		min-height: 66px;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.rich-header-logo img {
		width: 96px;
	}

	.rich-mobile-actions .rich-header-icon {
		width: 34px;
		height: 34px;
		font-size: 1.08rem;
	}

	.rich-mobile-actions .badge-dot {
		top: -3px;
		right: -3px;
	}
}

@media (max-width: 379.98px) {

	/* The search icon used to be dropped here, which cost nothing while it was
     decorative. It opens the site-wide search now, and on an inner page it is
     the only way to reach it, so the shrunken logo carries the saving instead.
     Measured at 375px: the bar still fits with no horizontal overflow. */
	.rich-header-logo img {
		width: 88px;
	}
}

/* ==========================================================
   Track artwork and preview playback
   ==========================================================
   The supplied markup drew every cover as a CSS gradient (.album.a1/.a2/.a3)
   and every waveform as a static clip-path, because it had no catalogue behind
   it. Both are now real, so the two need styling the static page never did:

     - .album is an <img>, and has to crop rather than stretch artwork that is
       not square. The gradient stays as the background, which is what shows
       while the file loads or if it 404s.
     - the waveform doubles as the clip's progress bar. The fill is a child of
       .mini-wave / .waveform, so the clip-path already on those elements clips
       it to the same silhouette: a playing clip lights up its own wave. */
img.album {
	object-fit: cover
}

[data-preview-progress] {
	position: relative;
	cursor: pointer
}

[data-preview-progress]>span {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: var(--pink);
	transition: width .12s linear
}

/* .mini-wave is dimmed at rest; the row that is playing comes forward. */
[data-preview-progress].is-playing {
	opacity: 1
}

/* A track whose watermarked preview has not been generated yet renders its
   button disabled rather than reporting playback that is not happening. */
[data-play][disabled] {
	opacity: .45;
	cursor: not-allowed
}

/* ==========================================================
   Site-wide search
   ==========================================================
   The bar is the supplied .music-search strip. These rules cover what the
   static page had no need for: the live results panel, and the header's
   collapsible copy of the same component.

   Colours, radii and hover treatment are lifted from the .search-filter
   dropdown the supplied filters already defined, so the panel reads as part of
   the search bar rather than as a second design. */
.global-search {
	position: relative;
	z-index: 40
}

.search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 1080;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 8px;
	background: #121923;
	border: 1px solid #2b3542;
	border-radius: 8px;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
	animation: searchMenuIn .18s ease both
}

.search-results-busy {
	padding: 8px 10px;
	font-size: .72rem;
	color: #8d95a1
}

.search-results-empty {
	margin: 0;
	padding: 18px 10px;
	text-align: center;
	font-size: .8rem;
	color: #cbd1da
}

.search-group+.search-group {
	margin-top: 6px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	padding-top: 6px
}

.search-group h4 {
	margin: 6px 10px 4px;
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8d95a1
}

.search-group a {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 8px 10px;
	border-radius: 6px;
	color: #cbd1da;
	text-decoration: none
}

.search-group a:hover,
.search-group a:focus-visible {
	background: rgba(255, 47, 117, .15);
	color: #fff
}

.search-group a img {
	width: 34px;
	height: 34px;
	border-radius: 4px;
	object-fit: cover
}

.search-result-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .05);
	color: var(--pink);
	font-size: 1rem
}

.search-group a>span:nth-child(2) {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0
}

.search-group a b {
	font-size: .8rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.search-group a small {
	font-size: .66rem;
	color: #8d95a1
}

.search-results-all {
	width: 100%;
	margin-top: 6px;
	padding: 10px;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .04);
	color: #fff;
	font-size: .74rem
}

.search-results-all:hover {
	background: rgba(255, 47, 117, .18)
}

/* The header panel drops out of the fixed bar, so it carries the bar's own
   backdrop rather than sitting on whatever happens to be behind it. */
.header-search {
	background: rgba(7, 8, 14, .94);
	backdrop-filter: blur(14px);
	border-top: 1px solid rgba(255, 255, 255, .05)
}

@media(min-width:992px) {

	/* The supplied strip filled five columns with three hardcoded filter
   dropdowns. Filtering lives on browse (§5.3), so the field takes the columns
   they used to occupy instead of leaving the bar three-fifths empty. */
	.music-search .search-field {
		grid-column: 1/-2
	}
}

/* ==========================================================
   Form validation messages
   ==========================================================
   `.field-error` is what every Livewire form renders a validation message
   into — twelve views, including all five auth screens — but the supplied
   stylesheet never defined it, because the static pages had no validation to
   show. Messages were rendering as unstyled body text, which reads as page
   copy rather than as something the visitor has to fix.

   Colour matches the `.status.rejected` badge already used for failure. */
.field-error {
	display: block;
	margin-top: 6px;
	font-size: .76rem;
	font-weight: 600;
	color: #ff7f91 !important;
}

/* Inside a bordered panel the message sits under the field it belongs to. */
.public-form .field-error,
.form-card .field-error {
	margin-bottom: 4px
}

.text-muted {
	color: #ec267d !important;
}

/* ==========================================================
   Cart discount code
   ==========================================================
   The supplied cart had no promo field, so these are new. They borrow the
   order card's own spacing and the brand outline button, so the block reads as
   part of the summary rather than as a bolted-on form. */
.promo-form {
	margin: 4px 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line)
}

.promo-input {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px
}

.promo-input .form-control {
	min-height: 44px
}

.promo-applied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(57, 202, 120, .12);
	color: #68df9d;
	font-size: .8rem
}

.promo-applied b {
	letter-spacing: .04em
}

/* The two provider buttons stack with a gap rather than butting together. */
.order-card .btn+.btn {
	margin-top: 10px
}

/* A visitor is told where the pay buttons will take them before they press. */
.guest-checkout-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 4px 0 14px;
	padding: 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, .04);
	color: #cbd1da;
	font-size: .78rem;
	line-height: 1.5
}

.guest-checkout-note i {
	color: var(--pink);
	margin-top: 2px
}

/* The infinite-scroll sentinel. Centred so the fallback button reads as the
   end of the list rather than as a stray control. */
.load-more {
	display: flex;
	justify-content: center;
	padding: 28px 0 8px
}

.form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* ==========================================================
   Artist directory (/artists)
   ==========================================================
   The cards themselves are the homepage's `.featured-artist-card`, unchanged.
   Only the grid is new: the homepage grid is a fixed three-column feature strip
   (1.55fr 1fr 1fr) and this list has no fixed length, so it flows instead. */
.artists-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px
}

/* The homepage cards are a feature strip; a directory row of them is shorter. */
.artists-directory-grid .featured-artist-card {
	min-height: 290px
}

/* The search box and the sort select sit side by side in the toolbar. Both are
   Bootstrap controls, so both are width:100% by default and each claimed a row
   of its own; the search takes the slack and the select takes its content. */
.artists-toolbar-controls .form-control {
	flex: 1 1 190px;
	width: auto;
	min-width: 170px
}

/* Sized to its content, so the room the chevron sits in has to be asked for:
   the stylesheet paints it 12px from the right edge over whatever is there. */
.artists-toolbar-controls .form-select {
	flex: 0 1 auto;
	width: auto;
	padding-right: 36px
}

/* The bio sits under the track count as a second line rather than running on
   from it. */
.artist-card-bio {
	display: block;
	margin-top: 4px;
	color: #aeb5bf
}

/* ==========================================================
   Upcoming release badge
   ==========================================================
   Marks a track whose album carries a future release date, on the browse row
   and on the track page. Deliberately not a `.track-tags` grey pill: those are
   attributes of the track (genre, BPM, length) and this is a date that changes
   what the row means, so it takes the brand colour the rest of the storefront
   reserves for what it wants read first. */
.tag-upcoming {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border: 1px solid rgba(255, 47, 117, .45);
	border-radius: 30px;
	background: rgba(255, 47, 117, .12);
	color: #ff8fb4;
	font-size: .63rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle
}

/* On the browse row the badge shares the title line, so it must not inherit
   the heading's size or weight. */
.market-track-info h3 .tag-upcoming {
	margin-left: 8px
}

.tag-upcoming i {
	font-size: .78em
}

/* The track page states the record and the date next to the badge.

   Deliberately not a flex row: flex would make each text node its own item, so
   the sentence broke into gapped fragments and the comma drifted away from the
   album title. It is a line of text with an inline badge in front of it. */
.upcoming-line {
	margin: 0 0 14px;
	color: #c1c7d0;
	font-size: .82rem;
	line-height: 1.75
}

.upcoming-line .tag-upcoming {
	margin-right: 9px
}

.upcoming-line b {
	color: #fff
}

/* ==========================================================
   Date fields
   ==========================================================
   The storefront's inputs are dark (#0d1219 with white text), but a date input
   keeps the browser's own picker button, and Chrome draws that glyph for a
   light form. Black on near-black is invisible: the Releases screen looked like
   a plain text box with no way to open a calendar at all.

   `color-scheme: dark` is the fix rather than a filter on the glyph — it tells
   the browser the field is dark, so it draws a light indicator *and* renders
   the dropdown calendar itself in dark, instead of a white panel appearing over
   a dark page. The rest is only making the button read as clickable. */
.inner-page input[type="date"],
.inner-page input[type="datetime-local"],
.inner-page input[type="month"],
.inner-page input[type="time"] {
	color-scheme: dark
}

.inner-page input[type="date"]::-webkit-calendar-picker-indicator,
.inner-page input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.inner-page input[type="month"]::-webkit-calendar-picker-indicator,
.inner-page input[type="time"]::-webkit-calendar-picker-indicator {
	opacity: .75;
	cursor: pointer;
	padding: 2px;
	border-radius: 4px
}

.inner-page input[type="date"]::-webkit-calendar-picker-indicator:hover,
.inner-page input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.inner-page input[type="month"]::-webkit-calendar-picker-indicator:hover,
.inner-page input[type="time"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12)
}

/* Firefox has no picker button of its own to style; the field is at least
   readable there, and the keyboard entry it does offer is unaffected. */

/* ==========================================================
   Footer newsletter outcome
   ==========================================================
   The supplied footer form had nowhere to say what happened, because it did
   nothing. These are the two lines it can now show under it; the form itself
   keeps `.footer-newsletter form`, its input and its gradient button exactly
   as they were.

   Scoped under .footer-newsletter on purpose: the footer already styles every
   `p` inside it grey with an 18px top margin (`.footer-newsletter p`), which
   is more specific than a bare class and was quietly repainting both of these
   the colour of body copy. */
.footer-newsletter .newsletter-note {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 10px 0 0;
	max-width: 340px;
	color: #68df9d;
	font-size: .74rem;
	line-height: 1.6
}

.footer-newsletter .newsletter-note--error {
	color: #ff7f91
}

.footer-newsletter .newsletter-note i {
	margin-top: 2px
}

/* CSS Document */

/* ==========================================================
   Sliders (Upcoming Music)
   ==========================================================
   A scroll container with snap points rather than a carousel library: the page
   already ships Bootstrap and nothing else, a native scroller is swipeable on
   touch and keyboard-reachable for free, and it degrades to a plain scrolling
   row if the script never runs.

   The card widths reproduce the four-column grid this replaced — at desktop a
   row still shows exactly four, so the section looks unchanged until it is
   scrolled. */
.upcoming-slider {
	position: relative
}

.upcoming-slider-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 2px;
	padding-bottom: 4px;
	/* The arrows and the swipe are the affordance; a scrollbar under the row
	   fights the card shadows. */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch
}

.upcoming-slider-track::-webkit-scrollbar {
	display: none
}

.upcoming-slider-track:focus-visible {
	outline: 2px solid var(--pink);
	outline-offset: 4px
}

.upcoming-slider-track>.upcoming-card {
	flex: 0 0 calc((100% - 48px) / 4);
	scroll-snap-align: start
}

/* The hover lift needs somewhere to go inside a scroll container, or it is
   clipped at the top edge. */
.upcoming-slider-track {
	padding-top: 8px;
	margin-top: -8px
}

.slider-controls {
	display: flex;
	gap: 8px
}

.slider-btn {
	width: 42px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--panel);
	color: #fff;
	transition: .25s
}

.slider-btn:hover:not(:disabled) {
	border-color: var(--pink);
	color: var(--pink)
}

.slider-btn:disabled {
	opacity: .35;
	cursor: default
}

@media (max-width: 1199px) {
	.upcoming-slider-track>.upcoming-card {
		flex-basis: calc((100% - 32px) / 3)
	}
}

@media (max-width: 991px) {
	.upcoming-slider-track>.upcoming-card {
		flex-basis: calc((100% - 16px) / 2)
	}
}

@media (max-width: 575px) {

	/* A sliver of the next card showing is what tells a visitor the row moves. */
	.upcoming-slider-track>.upcoming-card {
		flex-basis: 78%
	}
}

@media (max-width: 1199px) {

	.market-track-wave {
		display: none;
	}

	.detail-wave {
		display: none;
	}

	.inner-page .inner-main,
	.about-hero {
		min-height: inherit;
	}

	.about-story-section {
		padding: 0;
	}

	.about-dark-section {
		padding-bottom: 0;
	}

	.about-copy-block {
		margin-bottom: 0;
	}

	.future-section {
		min-height: inherit;
	}

	.future-copy {
		padding: 50px 0;
	}

	.editorial-grid {
		grid-template-columns: 1.08fr .92fr;
	}

	.about-split {
		grid-template-columns: .8fr 1.2fr;
	}

	.contact-grid,
	.editorial-grid,
	.about-split {
		grid-template-columns: .8fr 1.2fr;
	}

	.dashboard-content .market-track {
		grid-template-columns: 58px 38px 1fr 38px 60px 80px;
	}

	.account-btn {
		border: none !important;
		padding: 0 !important;
		outline: none !important;
		font-size: 1.5rem;
		width: 34px;
		background: transparent !important;
		color: #fff !important;
	}

	.rich-mobile-actions .dropdown-toggle:after {
		margin-left: .01em;
		border-top: .2em solid;
		border-right: .2em solid transparent;
		border-left: .2em solid transparent;
	}

	.cart-item h3 {
		margin-bottom: 0;
	}

	.cart-item p {
		font-size: 0.875rem;
	}

	.form-select.license-select {
		font-size: 0.875rem;
	}

}

@media (max-width: 991px) {

	.inner-hero p,
	.about-hero p {
		max-width: 100%;
	}

	.inner-page .inner-hero,
	.inner-page .page-heading,
	.inner-page .track-detail-hero {
		padding: 30px 0;
	}

	.inner-page .inner-hero {
		text-align: center;
	}

	.crumb {
		justify-content: center;
	}

	.inner-hero h1,
	.about-hero h1 {
		font-size: clamp(2.375rem, 6vw, 6.5rem);
	}

	.inner-hero p,
	.about-hero p {
		font-size: 1rem;
		line-height: 1.5;
	}

	.market-track {
		grid-template-columns: 58px 38px 1fr 38px 40px 60px 100px;
	}

	.market-track-wave {
		display: none;
	}

	.market-track .btn {
		display: block;
	}

	.detail-wave {
		display: none;
	}

	.inner-section {
		padding: 30px 0;
	}

	.inner-page .inner-main,
	.about-hero {
		min-height: inherit;
	}

	.about-hero-inner>div,
	.future-copy,
	.contact-section,
	.about-story-section,
	.about-content-section,
	.about-dark-section {
		padding: 30px 0;
	}

	.about-hero,
	.about-story-section {
		text-align: center;
	}

	.process-strip {
		margin-top: 40px;
	}

	.about-split {
		gap: 30px;
		text-align: center;
	}

	.about-content-section {
		padding-top: 0;
		text-align: center;
		padding-bottom: 0;
	}

	.copy-columns,
	.editorial-grid {
		gap: 20px;
	}

	.about-copy-block {
		margin: 0 auto 20px;
	}

	.platform-values {
		margin-bottom: 30px;
	}

	.future-section {
		min-height: 530px;
		text-align: center;
	}

	.btn-grp-wrap {
		justify-content: center;
	}

	.about-hero-inner>div {
		max-width: 100%;
	}

	.inner-hero.contact-hero {
		min-height: inherit;
	}

	.contact-hero .inner-hero-copy {
		padding: 0;
	}

	.contact-info-panel {
		text-align: center;
	}

	.contact-method {
		text-align: left;
	}

	.contact-form-card span.section-kicker,
	.contact-form-card h2,
	.faq-wrap h2 {
		text-align: center;
		width: 100%;
	}

	.faq-wrap .section-title-wide>div {
		text-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.contact-grid,
	.editorial-grid,
	.about-split {
		grid-template-columns: 1fr;
	}

	.account-btn {
		border: none !important;
		padding: 0 !important;
		outline: none !important;
		font-size: 1.5rem;
		width: 34px;
		background: transparent !important;
		color: #fff !important;
	}

	.rich-mobile-actions .dropdown-toggle:after {
		margin-left: .01em;
		border-top: .2em solid;
		border-right: .2em solid transparent;
		border-left: .2em solid transparent;
	}

	.auth-stat-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.auth-shell,
	.auth-visual {
		min-height: inherit;
	}

	.auth-visual {
		padding: 30px 24px;
		text-align: center;
	}

	.auth-visual h1 {
		font-size: clamp(2.375rem, 6vw, 6.5rem);
	}

	.page-heading {
		text-align: center;
	}

	.dashboard-stats {
		grid-template-columns: repeat(3, 1fr);
	}

	.dashboard-content .market-track {
		grid-template-columns: 58px 38px 1fr 38px 60px 80px;
	}

	.auth-visual-content {
		max-width: 100%;
	}

	.auth-benefits {
		place-items: center;
	}

	.inner-hero {
		min-height: inherit;
	}

	.onboarding-steps {
		display: block;
	}

	.onboarding-steps .step {
		padding: 0 0 30px;
	}

	.account-sidebar.artist-side nav {
		grid-template-columns: 1fr;
	}

	.catalogue-table-release article {
		grid-template-columns: 52px 1fr;
	}

	.catalogue-table-release article>.status,
	.catalogue-table-release article>span:not(.status) {
		grid-column: 1;
	}

	.artist-dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.cart-item h3 {
		margin-bottom: 0;
	}

	.cart-item p {
		font-size: 0.875rem;
	}

	.results-toolbar {
		flex-direction: column;
	}

}


@media(max-width:767px) {

	.hero-stat-grid strong {
		font-size: 1.2rem;
	}

	.hero-stat-grid div {
		padding: 20px 15px;
	}

	.hero-stat-grid span {
		font-size: 0.875rem;
	}

	.inner-page .inner-hero,
	.inner-page .page-heading,
	.inner-page .track-detail-hero {
		padding: 30px 0;
		text-align: center;
	}

	.inner-page .inner-hero {
		text-align: center;
	}

	.crumb {
		justify-content: center;
	}

	.inner-hero h1,
	.about-hero h1 {
		font-size: clamp(2.375rem, 6vw, 6.5rem);
	}

	.inner-hero p,
	.about-hero p {
		font-size: 1rem;
		line-height: 1.5;
	}

	.market-track>img {
		width: 42px;
		height: 42px;
	}

	.track-play,
	.soft-icon {
		width: 34px;
		height: 34px;
	}

	.market-track-info h3 {
		font-size: .8rem;
	}

	.market-track-info h3 .tag-upcoming {
		margin-left: 0;
		border: none;
		padding: 0;
		font-size: .6rem;
	}

	.market-track>.soft-icon:nth-of-type(2),
	.market-track>strong,
	.market-track>.btn {
		display: block;
	}

	.detail-wave {
		display: none;
	}

	.results-toolbar {
		align-items: center;
	}

	.dashboard-content .market-track {
		display: grid;
		grid-template-columns: 43px 34px 1fr 32px !important;
		align-items: center;
		column-gap: 8px;
		row-gap: 12px;
	}

	/* Hide waveform */
	.dashboard-content .market-track-wave {
		display: none;
	}

	/* LIKE BUTTON - first row, last */
	.dashboard-content .market-track>.like-btn {
		grid-column: 4;
		grid-row: 1;
		justify-self: end;
	}

	/* PRICE - second row, LEFT */
	.dashboard-content .market-track>strong {
		grid-column: 1 / 3;
		grid-row: 2;
		justify-self: start;
	}

	/* DETAILS - second row, RIGHT */
	.dashboard-content .market-track>.btn-outline-brand {
		grid-column: 3 / -1;
		grid-row: 2;
		justify-self: end;
	}

	.browse-layout .results-toolbar {
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
	}

	.license-option {
		text-align: left;
	}

	.site-footer {
		padding-top: 20px;
	}

	.footer-bottom {
		margin-top: 20px;
		gap: 5px;
	}

	.inner-page .form-select {
		font-size: 0.875rem;
	}

	.inner-section {
		padding: 30px 0;
	}

	.inner-page .inner-main,
	.about-hero {
		min-height: inherit;
	}

	.about-hero-inner>div,
	.future-copy,
	.contact-section,
	.about-story-section,
	.about-content-section,
	.about-dark-section {
		padding: 30px 0;
	}

	.about-hero,
	.about-story-section {
		text-align: center;
	}

	.process-strip {
		margin-top: 40px;
	}

	.process-strip,
	.principle-grid,
	.platform-values {
		grid-template-columns: repeat(2, 1fr);
	}

	/* If the last item is odd, make it full width */
	.process-strip> :last-child:nth-child(odd),
	.principle-grid> :last-child:nth-child(odd),
	.platform-values> :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.about-split {
		gap: 30px;
		text-align: center;
	}

	.about-content-section {
		padding-top: 0;
		text-align: center;
		padding-bottom: 0;
	}

	.copy-columns,
	.editorial-grid {
		gap: 20px;
	}

	.about-copy-block {
		margin: 0 auto 20px;
	}

	.platform-values {
		margin-bottom: 30px;
	}

	.future-section {
		min-height: 530px;
		text-align: center;
	}

	.btn-grp-wrap {
		justify-content: center;
	}

	.inner-hero.contact-hero {
		min-height: inherit;
	}

	.contact-hero .inner-hero-copy {
		padding: 0;
	}

	.contact-info-panel {
		text-align: center;
	}

	.contact-method {
		text-align: left;
	}

	.contact-form-card span.section-kicker,
	.contact-form-card h2,
	.faq-wrap h2 {
		text-align: center;
		width: 100%;
	}

	.contact-grid,
	.editorial-grid,
	.about-split {
		grid-template-columns: 1fr;
	}

	.account-btn {
		border: none !important;
		padding: 0 !important;
		outline: none !important;
		font-size: 1.5rem;
		width: 34px;
		background: transparent !important;
		color: #fff !important;
	}

	.rich-mobile-actions .dropdown-toggle:after {
		margin-left: .01em;
		border-top: .2em solid;
		border-right: .2em solid transparent;
		border-left: .2em solid transparent;
	}

	.auth-stat-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.auth-shell,
	.auth-visual {
		min-height: inherit;
	}

	.auth-visual {
		padding: 30px 24px;
		text-align: center;
	}

	.auth-visual h1 {
		font-size: clamp(2.375rem, 6vw, 6.5rem);
	}

	.auth-visual-content {
		max-width: 100%;
	}

	.auth-benefits {
		place-items: center;
	}

	.onboarding-steps {
		grid-template-columns: repeat(1, 1fr);
	}

	.dashboard-shell,
	.onboarding-shell {
		grid-template-columns: 1fr;
	}

	.dashboard-stats.artist-dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.moderation-timeline>div>span {
		min-width: 38px;
	}

	.catalogue-table-release article {
		grid-template-columns: 52px 1fr;
	}

	.catalogue-table-release article>.status,
	.catalogue-table-release article>span:not(.status) {
		grid-column: 1;
	}

	.artist-dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.cart-title {
		gap: 5px;
		flex-wrap: wrap;
	}


	.cart-item {
		grid-template-columns: 70px 1fr auto;
		column-gap: 12px;
		row-gap: 12px;
		align-items: center;
	}

	/* IMAGE */
	.cart-item>img {
		grid-column: 1;
		grid-row: 1;
	}

	/* PRICE */
	.cart-item>strong {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
	}

	/* DELETE BUTTON */
	.cart-item>.remove-item {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}

	/* DETAILS - FULL SECOND ROW */
	.cart-item>div {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
	}

	.cart-item h3 {
		margin-bottom: 0;
	}

	.cart-item p {
		font-size: 0.875rem;
	}

	/* Make licence dropdown full width */
	.cart-item .license-select {
		width: 100%;
	}

	.featured-player {
		margin: 30px 0;
		text-align: left;
	}

	.customer-dashboard-content .dashboard-stats {
		grid-template-columns: repeat(2, 1fr);
	}



}

.data-table> :not(caption)>*>* {
	background: #131923;
}

.data-table>tbody>tr>td {
	font-size: 0.875rem;
}

/* ==========================================================
   Browse: mobile filter drawer

   Below 992px the filter panel stops being a sidebar and becomes a slide-down
   sheet opened from a button in the results toolbar. It is the SAME element in
   both layouts - lifted out of flow by position:fixed rather than duplicated -
   so every wire:model binding inside it is untouched by the change.

   Open state is a class on <body>, not on the panel. Livewire morphs the
   component's own markup on every live filter change, which would strip a class
   JavaScript had added to the panel and snap the drawer shut mid-interaction.
   <body> sits outside every component root, so nothing Livewire does can reach
   it. Desktop is unaffected: all of this is inside the media query.
   ========================================================== */

.filter-toggle,
.filter-close,
.filter-scrim {
	display: none;
}

.filter-head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

@media(max-width:991.98px) {

	/* ---- the button that opens it ---- */
	.filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex: 0 0 auto;
		border: 1px solid var(--line);
		border-radius: 7px;
		padding: 11px 14px;
		background: var(--panel);
		color: #fff;
		font-weight: 700;
		font-size: .87rem;
		line-height: 1;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	.filter-toggle i {
		color: var(--pink);
		font-size: .95rem;
	}

	.filter-toggle-count {
		display: inline-grid;
		place-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--pink);
		color: #fff;
		font-size: .7rem;
		font-weight: 800;
	}

	/* The toolbar stacks below 767px; the controls row still reads left to right. */
	.results-toolbar .d-flex {
		width: 100%;
	}

	.results-toolbar .form-select {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* ---- the drawer ---- */

	/* Both selectors are needed: the panel also carries .reveal, whose
   `.js .reveal { opacity:0; transform:translateY(24px) }` would otherwise win
   on specificity and leave the drawer invisible and unmoved. Scroll-reveal has
   nothing to reveal here - the panel is off-screen until it is asked for. */
	.filter-panel,
	.filter-panel.reveal {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 1310;
		max-height: 92dvh;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		margin: 0;
		padding: 0 20px 20px;
		border-width: 0 0 1px;
		border-radius: 0 0 16px 16px;
		box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
		opacity: 1;
		/* !important is load-bearing, not laziness. Scroll-reveal marks a revealed
	   element with `.visible`, which is also a Bootstrap utility - and Bootstrap
	   ships it as `.visible{visibility:visible!important}`. The panel carries
	   `reveal visible` once it has been revealed, so without this the closed
	   drawer stays in the tab order and its inputs are reachable behind the
	   page. The open rule below outranks this one on specificity. */
		visibility: hidden !important;
		transform: translateY(-100%);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .32s;
	}

	body.filters-open .filter-panel {
		visibility: visible !important;
		transform: translateY(0);
		transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility 0s;
	}

	/* Title, "Clear all" and the close button stay reachable while the filters
   below them scroll. Full-bleed via negative margins against the panel padding. */
	.filter-panel .filter-head {
		position: sticky;
		top: 0;
		z-index: 2;
		margin: 0 -20px;
		padding: 16px 20px;
		background: var(--panel2);
		border-bottom: 1px solid rgba(255, 255, 255, .09);
	}

	.filter-close {
		display: inline-grid;
		place-items: center;
		width: 34px;
		height: 34px;
		flex: 0 0 auto;
		border: 1px solid var(--line);
		border-radius: 8px;
		background: none;
		color: #fff;
		font-size: .85rem;
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}

	/* ---- backdrop ---- */
	.filter-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1300;
		background: rgba(3, 6, 11, .68);
		opacity: 0;
		visibility: hidden;
		transition: opacity .32s ease, visibility 0s linear .32s;
	}

	body.filters-open .filter-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity .32s ease, visibility 0s;
	}

	/* Holds the page still behind the drawer. Scoped to the media query so a
   rotation or resize up to desktop can never leave the page unable to scroll. */
	body.filters-open {
		overflow: hidden;
	}

}

@media(prefers-reduced-motion:reduce) {

	.filter-panel,
	.filter-panel.reveal,
	body.filters-open .filter-panel,
	.filter-scrim {
		transition-duration: .01ms;
	}
}
/* ===========================================================
   Legal pages (Terms & Conditions, Privacy Policy)
   ===========================================================
   Long-form policy copy, so the page is a two-column read: a
   sticky contents rail that tracks where the reader is, and the
   clauses themselves. The rail collapses to a horizontal chip
   row below 991px, where a 260px column would cost more width
   than it earns.

   scroll-margin-top clears the fixed header - without it every
   in-page jump lands with the heading hidden behind it. */

.legal-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.legal-section-wrap {
	padding: 84px 0 96px;
}

.legal-toc {
	position: sticky;
	top: 110px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 24px 22px;
}

.legal-toc h2 {
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}

.legal-toc ol {
	list-style: none;
	counter-reset: legal-toc;
	margin: 0;
	padding: 0;
}

.legal-toc li {
	counter-increment: legal-toc;
}

.legal-toc a {
	display: flex;
	gap: 10px;
	padding: 7px 0;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--muted);
	transition: color .2s ease;
}

.legal-toc a:before {
	content: counter(legal-toc, decimal-leading-zero);
	flex: none;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	padding-top: .18em;
	color: var(--pink);
	opacity: .7;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
	color: var(--text);
}

.legal-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.legal-meta span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	font-size: .82rem;
	color: var(--muted);
}

.legal-meta i {
	color: var(--pink);
}

.legal-body>section {
	scroll-margin-top: 110px;
	padding-bottom: 44px;
	margin-bottom: 44px;
	border-bottom: 1px solid var(--line);
}

.legal-body>section:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.legal-body h2 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 0 0 18px;
}

.legal-body h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 26px 0 10px;
}

.legal-body p,
.legal-body li {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.85;
}

.legal-body p {
	margin: 0 0 14px;
}

.legal-body ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.legal-body li {
	margin-bottom: 8px;
}

.legal-body strong {
	color: var(--text);
	font-weight: 600;
}

.legal-body a:not(.btn) {
	color: var(--pink);
	border-bottom: 1px solid rgba(255, 47, 117, .35);
}

.legal-body a:not(.btn):hover {
	border-bottom-color: var(--pink);
}

/* Definitions and the "what we collect" tables read as pairs, not
   prose, so they are a two-column grid rather than a <table>: no
   horizontal scroll to manage on a phone, where it simply stacks. */
.legal-defs {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 0;
	border: 1px solid var(--line);
	border-radius: 16px;
	overflow: hidden;
	margin: 0 0 18px;
}

.legal-defs dt,
.legal-defs dd {
	padding: 16px 20px;
	margin: 0;
	border-top: 1px solid var(--line);
}

.legal-defs dt:first-of-type,
.legal-defs dt:first-of-type+dd {
	border-top: 0;
}

.legal-defs dt {
	background: rgba(255, 255, 255, .025);
	font-weight: 600;
	color: var(--text);
	font-size: .95rem;
}

.legal-defs dd {
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.7;
}

.legal-callout {
	display: flex;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 47, 117, .3);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(199, 21, 140, .1), rgba(255, 47, 117, .04));
	margin: 0 0 18px;
}

.legal-callout i {
	color: var(--pink);
	font-size: 1.25rem;
	line-height: 1.6;
}

.legal-callout p:last-child {
	margin-bottom: 0;
}

.public-form select{
min-height: 45px;
}

@media (max-width: 1199px) {
	.legal-layout {
		gap: 40px;
	}
}

@media (max-width: 991px) {
	.legal-layout {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.legal-section-wrap {
		padding: 60px 0 72px;
	}

	/* Sticky under a full-width heading would pin a tall block over
	   the copy, so on narrow screens the rail scrolls away with it. */
	.legal-toc {
		position: static;
		padding: 20px;
	}

	.legal-toc ol {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.legal-toc a {
		padding: 8px 14px;
		border: 1px solid var(--line);
		border-radius: 999px;
		font-size: .85rem;
	}
}

@media (max-width: 575px) {
	.legal-body h2 {
		font-size: 1.35rem;
	}

	.legal-defs {
		grid-template-columns: 1fr;
	}

	.legal-defs dt:first-of-type+dd {
		border-top: 1px solid var(--line);
	}

	.legal-callout {
		padding: 18px;
	}
}


.role-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 18px 0 22px
}

.role-switch a {
	min-height: 68px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #0f141d;
	color: #c8ced8;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px;
	text-align: left;
	transition: .25s
}

.role-switch a i {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: #161d28;
	color: var(--pink);
	font-size: 1.05rem
}

.role-switch a strong {
	display: block;
	font-size: .875rem
}

.role-switch a small {
	display: block;
	font-size: .625rem;
	color: var(--muted);
	margin-top: 2px
}

.role-switch a.active {
	border-color: var(--pink);
	background: linear-gradient(145deg, rgba(255, 47, 117, .14), rgba(199, 21, 140, .05));
	box-shadow: 0 12px 28px rgba(255, 47, 117, .08)
}




.track-video-poster {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	transition: border-color .25s ease, box-shadow .25s ease
}

.track-video-poster:hover,
.track-video-poster:focus-visible {
	border-color: var(--pink);
	box-shadow: 0 18px 38px rgba(0, 0, 0, .38)
}

/* Overrides `.track-art-wrap img`, which is square with a heavy drop
   shadow: right for cover art, wrong for a 16:9 video still. */
.track-art-wrap .track-video-poster img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	opacity: .82;
	transition: opacity .25s ease, transform .35s ease
}

.track-video-poster:hover img,
.track-video-poster:focus-visible img {
	opacity: 1;
	transform: scale(1.04)
}

.track-video-play {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border: 1px solid var(--pink);
	border-radius: 50%;
	background: rgba(6, 10, 16, .88);
	color: #fff;
	font-size: 1.55rem
}

.track-video-label {
	position: absolute;
	left: 10px;
	bottom: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(6, 10, 16, .8);
	color: #fff;
	font-size: .7rem;
	letter-spacing: .02em
}

.track-video-label i {
	color: var(--pink);
	font-size: .85rem
}

/* Written in by initTrackVideo() on the first click, in place of the poster. */
.track-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 14px;
	background: #000
}

/* A Shorts link. The video is vertical, so the card is too: in a 16:9 box
   YouTube's player and its thumbnail both pillarbox the picture into a thin
   strip between two wide black bars. Narrowed rather than run full width,
   because a 9:16 card the width of the artwork would be twice its height and
   would own the page. */

.track-video-vertical .track-video-poster,
.track-video-vertical iframe {
	width: min(100%, 240px);
	margin-inline: auto
}

.track-art-wrap .track-video-vertical .track-video-poster img,
.track-video-vertical iframe {
	aspect-ratio: 9 / 16
}