/* =========================================================
 * PsalMix Blog — Editorial Components
 *
 * Premium editorial flourishes for long-form posts:
 * eyebrows, big quotes, stat rows, asymmetric pricing
 * comparison, full-bleed brand callouts, custom bullets,
 * decorative dividers, refined CTA.
 *
 * All components use psalmix-tokens.css variables.
 * ========================================================= */

/* ---------------------------------------------------------
 * Section eyebrow
 * Small-caps label that sits above an H2 to anchor the section
 * (e.g. "01 · COMPARISON")
 * --------------------------------------------------------- */
/* All color rules are prefixed with .psx-single__content so they beat
   the theme's `.psx-single__content p { color: var(--psx-text-secondary) }`
   override (specificity 0,1,1). Without the prefix, every <p> in here
   ends up dark text — including the white-on-dark callout text. */

.psx-single__content .psx-eyebrow,
.psx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--psx-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--psx-accent);
	margin: 0 0 var(--psx-space-md) 0;
}
.psx-eyebrow__num {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	color: var(--psx-text-muted);
	font-weight: 600;
}
.psx-eyebrow__num::after {
	content: "·";
	margin-left: 10px;
	color: var(--psx-text-disabled);
}

/* Tighten the H2 that follows an eyebrow — beats theme's
   `.psx-single__content > h2 { margin-top: 80px }` rule */
.psx-single__content .psx-eyebrow + h2,
.psx-eyebrow + h2 {
	margin-top: 0;
	letter-spacing: var(--psx-tracking-tight);
}

/* ---------------------------------------------------------
 * Article meta row (reading time, byline)
 * --------------------------------------------------------- */
.psx-article-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--psx-text-sm);
	color: var(--psx-text-muted);
	margin: var(--psx-space-md) 0 var(--psx-space-2xl);
	font-weight: 500;
}
.psx-article-meta__sep {
	width: 4px;
	height: 4px;
	background: var(--psx-text-disabled);
	border-radius: 50%;
	flex: 0 0 auto;
}
.psx-article-meta strong { color: var(--psx-text-secondary); font-weight: 600; }

/* ---------------------------------------------------------
 * Lead paragraph with drop cap
 * The first paragraph after an .psx-eyebrow renders large,
 * with a serif drop cap on the first letter.
 * --------------------------------------------------------- */
.psx-single__content .psx-leadin,
.psx-leadin {
	font-size: var(--psx-text-xl);
	line-height: var(--psx-leading-snug);
	color: var(--psx-text-secondary);
	margin: 0 0 var(--psx-space-lg);
}
.psx-leadin::first-letter {
	font-family: var(--psx-font-serif);
	font-weight: 700;
	font-size: 4.4em;
	line-height: 0.85;
	float: left;
	margin: 6px 14px -4px 0;
	color: var(--psx-accent);
}

/* ---------------------------------------------------------
 * Big editorial pull-quote (display weight)
 * Used for the big tagline / brand voice moments.
 * --------------------------------------------------------- */
.psx-bigquote {
	margin: var(--psx-space-2xl) 0;
	padding: 0 var(--psx-space-md);
	text-align: center;
	border: 0;
	background: transparent;
}
.psx-single__content .psx-bigquote__text,
.psx-bigquote__text {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: var(--psx-tracking-tight);
	font-weight: 600;
	color: var(--psx-text);
	margin: 0;
	position: relative;
	display: inline-block;
}
.psx-bigquote__text::before {
	content: "“";
	position: absolute;
	top: -0.3em;
	left: -0.55em;
	font-size: 2.2em;
	color: var(--psx-accent);
	opacity: 0.35;
	font-family: var(--psx-font-serif);
	line-height: 1;
}
.psx-bigquote__attr {
	display: block;
	margin-top: var(--psx-space-md);
	font-family: var(--psx-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--psx-accent);
}

/* Smaller variant for inline founder quotes */
.psx-quote {
	margin: var(--psx-space-2xl) 0;
	padding: var(--psx-space-lg) var(--psx-space-xl);
	border-left: 3px solid var(--psx-accent);
	background: var(--psx-accent-soft);
	border-radius: 0 var(--psx-radius-sm) var(--psx-radius-sm) 0;
}
.psx-quote p {
	font-family: var(--psx-font-serif);
	font-size: var(--psx-text-xl);
	line-height: var(--psx-leading-snug);
	color: var(--psx-text-secondary);
	font-style: italic;
	margin: 0 0 var(--psx-space-sm);
}
.psx-quote cite {
	display: block;
	font-style: normal;
	font-size: var(--psx-text-sm);
	font-weight: 600;
	color: var(--psx-accent);
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
 * Stat row — 3 big numbers across with captions
 * --------------------------------------------------------- */
.psx-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--psx-space-lg);
	margin: var(--psx-space-2xl) 0;
	padding: var(--psx-space-xl) 0;
	border-top: 1px solid var(--psx-border);
	border-bottom: 1px solid var(--psx-border);
}
.psx-stat__num {
	font-family: var(--psx-font-sans);
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--psx-tracking-tighter);
	color: var(--psx-text);
	display: block;
	margin-bottom: var(--psx-space-sm);
	font-variant-numeric: tabular-nums;
}
.psx-stat__num em {
	font-style: normal;
	color: var(--psx-accent);
}
.psx-stat__label {
	font-family: var(--psx-font-sans);
	font-size: var(--psx-text-sm);
	color: var(--psx-text-muted);
	line-height: var(--psx-leading-snug);
	display: block;
}

/* ---------------------------------------------------------
 * Pricing comparison v2 — single unified card, two cells
 * Same rounded container, two products side-by-side.
 * Psalmix cell uses brand purple gradient; Spotify cell is
 * a clean neutral. Matching geometry = no perceived bias.
 * --------------------------------------------------------- */
.psx-versus {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: var(--psx-space-2xl) 0;
	background: var(--psx-border);
	border-radius: var(--psx-radius-lg);
	overflow: hidden;
	box-shadow: var(--psx-shadow-lg);
}
@media (min-width: 720px) {
	.psx-versus { grid-template-columns: 1fr 1fr; }
}
.psx-versus {
	transition: transform var(--psx-duration-base) var(--psx-ease), box-shadow var(--psx-duration-base) var(--psx-ease);
}
.psx-versus:hover {
	transform: translateY(-2px);
	box-shadow: var(--psx-shadow-lg);
}
.psx-versus__cell {
	position: relative;
	padding: var(--psx-space-2xl) var(--psx-space-xl);
	display: flex;
	flex-direction: column;
}
.psx-versus__cell--psalmix {
	background: linear-gradient(135deg, #2A1849 0%, #4A2380 60%, #7B3BBF 100%);
	color: #fff;
	overflow: hidden;
}
.psx-versus__cell--psalmix::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 70%;
	height: 180%;
	background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 60%);
	pointer-events: none;
}
.psx-versus__cell--neutral {
	background: var(--psx-surface);
	color: var(--psx-text);
}
.psx-single__content .psx-versus__brand,
.psx-versus__brand {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 var(--psx-space-md);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	position: relative;
}
.psx-single__content .psx-versus__cell--psalmix .psx-versus__brand,
.psx-versus__cell--psalmix .psx-versus__brand { color: rgba(255,255,255,0.95); }
.psx-single__content .psx-versus__cell--neutral .psx-versus__brand,
.psx-versus__cell--neutral .psx-versus__brand { color: var(--psx-text-muted); }
.psx-versus__badge {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	padding: 4px 10px;
	border-radius: var(--psx-radius-full);
}
.psx-versus__cell--psalmix .psx-versus__badge {
	background: rgba(255,255,255,0.18);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.25);
}
.psx-versus__cell--neutral .psx-versus__badge {
	background: var(--psx-surface-alt);
	color: var(--psx-text-secondary);
	border: 1px solid var(--psx-border);
}
.psx-versus__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 var(--psx-space-xs);
	position: relative;
}
.psx-versus__amount {
	font-size: clamp(3rem, 7vw, 4.75rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: var(--psx-tracking-tighter);
	font-variant-numeric: tabular-nums;
}
.psx-versus__cell--psalmix .psx-versus__amount { color: #fff; }
.psx-versus__cell--neutral .psx-versus__amount { color: var(--psx-text); }
.psx-versus__per {
	font-size: var(--psx-text-base);
	font-weight: 500;
	white-space: nowrap;
}
.psx-versus__cell--psalmix .psx-versus__per { color: rgba(255,255,255,0.85); }
.psx-versus__cell--neutral .psx-versus__per { color: var(--psx-text-muted); }
.psx-single__content .psx-versus__sub,
.psx-versus__sub {
	font-size: var(--psx-text-sm);
	margin: 0 0 var(--psx-space-lg);
	font-weight: 500;
	position: relative;
}
.psx-single__content .psx-versus__cell--psalmix .psx-versus__sub,
.psx-versus__cell--psalmix .psx-versus__sub { color: rgba(255,255,255,0.85); }
.psx-single__content .psx-versus__cell--neutral .psx-versus__sub,
.psx-versus__cell--neutral .psx-versus__sub { color: var(--psx-text-tertiary); }
.psx-versus__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
}
.psx-versus__list li {
	padding: 12px 0;
	font-size: var(--psx-text-md);
	line-height: var(--psx-leading-snug);
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.psx-versus__list li + li { border-top: 1px solid currentColor; }
.psx-versus__cell--psalmix .psx-versus__list li {
	color: rgba(255,255,255,0.95);
}
.psx-versus__cell--psalmix .psx-versus__list li + li {
	border-top-color: rgba(255,255,255,0.12);
}
.psx-versus__cell--neutral .psx-versus__list li { color: var(--psx-text-secondary); }
.psx-versus__cell--neutral .psx-versus__list li + li {
	border-top-color: var(--psx-border);
}
.psx-versus__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	border-radius: 50%;
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}
.psx-versus__cell--psalmix .psx-versus__list li::before {
	background-color: #fff;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%237B3BBF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
	box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
.psx-versus__cell--neutral .psx-versus__list li::before {
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%236B5F7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
	border: 1.5px solid var(--psx-border-secondary);
	box-shadow: none;
}

/* ---------------------------------------------------------
 * Full-bleed brand callout (founder voice / what we believe)
 * --------------------------------------------------------- */
.psx-callout {
	margin: var(--psx-space-2xl) calc(50% - 50vw);
	padding: var(--psx-space-2xl) max(var(--psx-space-xl), calc(50vw - var(--psx-content-max) / 2));
	background: linear-gradient(135deg, #1A0F2E 0%, #4A2380 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.psx-callout::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -10%;
	width: 60%;
	height: 160%;
	background: radial-gradient(ellipse at center, rgba(166, 107, 217, 0.25) 0%, transparent 60%);
	pointer-events: none;
}
.psx-callout__inner {
	max-width: var(--psx-content-max);
	margin: 0 auto;
	position: relative;
}
.psx-single__content .psx-callout__eyebrow,
.psx-callout__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--psx-accent-light);
	margin: 0 0 var(--psx-space-md);
}
.psx-single__content .psx-callout__text,
.psx-callout__text {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: var(--psx-tracking-tight);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--psx-space-lg);
}
.psx-single__content .psx-callout__attr,
.psx-callout__attr {
	font-size: var(--psx-text-sm);
	color: rgba(255,255,255,0.85);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.psx-callout__attr strong { color: var(--psx-accent-light); }

/* ---------------------------------------------------------
 * Decorative section divider (centered dot rule)
 * --------------------------------------------------------- */
.psx-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: var(--psx-space-2xl) 0;
	border: 0;
	height: auto;
}
.psx-rule::before, .psx-rule::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: var(--psx-border-secondary);
}
.psx-rule__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--psx-accent);
	display: block;
	box-shadow: 0 0 0 4px var(--psx-accent-soft);
}

/* ---------------------------------------------------------
 * Custom bullet list for prose
 * Replaces default disc bullets with a brand-purple bar.
 * --------------------------------------------------------- */
.psx-list {
	list-style: none;
	padding: 0;
	margin: var(--psx-space-lg) 0;
}
.psx-list li {
	position: relative;
	padding: 8px 0 8px 28px;
	font-size: var(--psx-text-md);
	line-height: var(--psx-leading-snug);
	color: var(--psx-text-secondary);
}
.psx-list li + li { border-top: 1px solid var(--psx-border); }
.psx-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 14px;
	height: 2px;
	background: var(--psx-accent);
	border-radius: 1px;
}
.psx-list li strong { color: var(--psx-text); }

/* ---------------------------------------------------------
 * Interactive quiz — "If you have to pick one"
 * Two clickable option cards. Psalmix variant is solid-pill,
 * Spotify variant is outlined. The whole <a> is the target.
 * --------------------------------------------------------- */
.psx-quiz {
	margin: var(--psx-space-2xl) 0;
}
.psx-single__content .psx-quiz__prompt,
.psx-quiz__prompt {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.375rem, 2.6vw, 1.625rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: var(--psx-tracking-tight);
	color: var(--psx-text);
	text-align: center;
	margin: 0 auto var(--psx-space-xl);
	max-width: 36ch;
}
.psx-quiz__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--psx-space-md);
}
@media (min-width: 720px) {
	.psx-quiz__options { grid-template-columns: 1fr 1fr; gap: var(--psx-space-lg); }
}
.psx-quiz__option {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--psx-space-lg);
	padding: var(--psx-space-xl);
	background: var(--psx-surface);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-md);
	text-decoration: none;
	color: inherit;
	position: relative;
	transition: transform var(--psx-duration-base) var(--psx-ease),
	            box-shadow var(--psx-duration-base) var(--psx-ease),
	            border-color var(--psx-duration-base) var(--psx-ease),
	            background var(--psx-duration-base) var(--psx-ease);
	min-height: 180px;
}
.psx-quiz__option:hover,
.psx-quiz__option:focus-visible {
	transform: translateY(-3px);
	border-color: var(--psx-accent);
	box-shadow: var(--psx-shadow-lg);
	text-decoration: none;
}
.psx-quiz__option--psalmix:hover,
.psx-quiz__option--psalmix:focus-visible {
	background: linear-gradient(180deg, var(--psx-surface) 0%, var(--psx-accent-soft) 100%);
}
.psx-single__content .psx-quiz__problem,
.psx-quiz__problem {
	font-family: var(--psx-font-serif);
	font-size: var(--psx-text-lg);
	font-style: italic;
	line-height: var(--psx-leading-snug);
	color: var(--psx-text-secondary);
	display: block;
}
.psx-single__content .psx-quiz__cta,
.psx-quiz__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	font-family: var(--psx-font-sans);
	font-size: var(--psx-text-sm);
	font-weight: 700;
	letter-spacing: var(--psx-tracking-tight);
	padding: 10px 20px;
	border-radius: var(--psx-radius-full);
	white-space: nowrap;
	transition: background var(--psx-duration-base) var(--psx-ease),
	            color var(--psx-duration-base) var(--psx-ease),
	            border-color var(--psx-duration-base) var(--psx-ease);
}
.psx-quiz__cta::after {
	content: "→";
	font-size: 1.05em;
	line-height: 0.9;
	transition: transform var(--psx-duration-base) var(--psx-ease);
}
.psx-quiz__option:hover .psx-quiz__cta::after,
.psx-quiz__option:focus-visible .psx-quiz__cta::after {
	transform: translateX(3px);
}
/* Psalmix variant — solid purple pill */
.psx-single__content .psx-quiz__option--psalmix .psx-quiz__cta,
.psx-quiz__option--psalmix .psx-quiz__cta {
	background: var(--psx-accent);
	color: #fff;
	border: 1px solid var(--psx-accent);
}
.psx-quiz__option--psalmix:hover .psx-quiz__cta,
.psx-quiz__option--psalmix:focus-visible .psx-quiz__cta {
	background: var(--psx-accent-hover);
	border-color: var(--psx-accent-hover);
}
/* Neutral variant — outlined dark pill */
.psx-single__content .psx-quiz__option--neutral .psx-quiz__cta,
.psx-quiz__option--neutral .psx-quiz__cta {
	background: transparent;
	color: var(--psx-text);
	border: 1px solid var(--psx-border-secondary);
}
.psx-quiz__option--neutral:hover .psx-quiz__cta,
.psx-quiz__option--neutral:focus-visible .psx-quiz__cta {
	border-color: var(--psx-text);
	background: var(--psx-surface-alt);
}

/* ---------------------------------------------------------
 * Two philosophies — symmetric Spotify/Psalmix split
 * Replaces lopsided stat row that only showed Spotify numbers.
 * --------------------------------------------------------- */
.psx-philosophies {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--psx-space-md);
	margin: var(--psx-space-2xl) 0;
}
@media (min-width: 720px) {
	.psx-philosophies {
		grid-template-columns: 1fr 1fr;
		gap: var(--psx-space-lg);
	}
}
.psx-philosophy {
	padding: var(--psx-space-2xl);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-lg);
	background: var(--psx-surface);
	display: flex;
	flex-direction: column;
}
.psx-philosophy--accent {
	border-color: transparent;
	background:
		linear-gradient(var(--psx-surface), var(--psx-surface)) padding-box,
		linear-gradient(135deg, #7B3BBF, #A66BD9) border-box;
	border: 1px solid transparent;
}
.psx-single__content .psx-philosophy__brand,
.psx-philosophy__brand {
	font-family: var(--psx-font-sans);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--psx-text-muted);
	margin: 0 0 var(--psx-space-xs);
}
.psx-single__content .psx-philosophy--accent .psx-philosophy__brand,
.psx-philosophy--accent .psx-philosophy__brand {
	color: var(--psx-accent);
}
.psx-philosophy__headline {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.75rem, 3.2vw, 2.25rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: var(--psx-tracking-tight);
	color: var(--psx-text);
	margin: 0 0 var(--psx-space-md);
}
.psx-single__content .psx-philosophy__copy,
.psx-philosophy__copy {
	font-size: var(--psx-text-sm);
	line-height: var(--psx-leading-relaxed);
	color: var(--psx-text-secondary);
	margin: 0 0 var(--psx-space-md);
}
.psx-philosophy__metrics {
	list-style: none;
	margin: 0;
	padding: var(--psx-space-lg) 0 0;
	border-top: 1px solid var(--psx-border);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.psx-philosophy__metrics li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px var(--psx-space-md);
	font-size: var(--psx-text-md);
	color: var(--psx-text-tertiary);
	position: relative;
	padding-left: 30px;
}
.psx-philosophy__metrics li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}
.psx-philosophy__metrics li > span {
	flex: 0 1 auto;
	min-width: 0;
}
.psx-philosophy__metrics strong {
	font-family: var(--psx-font-sans);
	font-size: var(--psx-text-md);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--psx-text);
	letter-spacing: var(--psx-tracking-tight);
	text-align: right;
	flex: 0 0 auto;
	margin-left: auto;
}
.psx-philosophy--accent .psx-philosophy__metrics strong { color: var(--psx-accent); }
/* Accent (Psalmix) card — purple-filled circle with white check */
.psx-philosophy--accent .psx-philosophy__metrics li::before {
	background-color: var(--psx-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
	box-shadow: 0 0 0 3px var(--psx-accent-soft);
}
/* Neutral (Spotify) card — outlined gray check */
.psx-philosophy:not(.psx-philosophy--accent) .psx-philosophy__metrics li::before {
	background-color: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%236B5F7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/></svg>");
	border: 1.5px solid var(--psx-border-secondary);
}

/* ---------------------------------------------------------
 * Final CTA — full-bleed dramatic close
 * Replaces basic .psx-cta-card on long-form posts.
 * --------------------------------------------------------- */
.psx-final-cta {
	margin: var(--psx-space-2xl) calc(50% - 50vw) 0;
	padding: clamp(48px, 8vw, 96px) max(var(--psx-space-xl), calc(50vw - var(--psx-content-max) / 2));
	background:
		radial-gradient(ellipse at 20% 30%, rgba(166,107,217,0.35) 0%, transparent 55%),
		radial-gradient(ellipse at 80% 70%, rgba(123,59,191,0.45) 0%, transparent 55%),
		linear-gradient(135deg, #1A0F2E 0%, #2A1849 50%, #4A2380 100%);
	color: #fff;
	position: relative;
	overflow: hidden;
	text-align: center;
}
.psx-final-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 40%);
	pointer-events: none;
}
.psx-final-cta__inner {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.psx-single__content .psx-final-cta__eyebrow,
.psx-final-cta__eyebrow {
	font-family: var(--psx-font-sans);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(199, 158, 232, 1);
	margin: 0 0 var(--psx-space-md);
}
.psx-single__content .psx-final-cta__headline,
.psx-final-cta__headline {
	font-family: var(--psx-font-serif);
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: var(--psx-tracking-tight);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--psx-space-md);
}
.psx-single__content .psx-final-cta__sub,
.psx-final-cta__sub {
	font-size: var(--psx-text-md);
	line-height: var(--psx-leading-snug);
	color: rgba(255,255,255,0.78);
	margin: 0 0 var(--psx-space-xl);
}
.psx-final-cta__btn,
a.psx-final-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #2A1849 !important;
	font-family: var(--psx-font-sans);
	font-size: var(--psx-text-md);
	font-weight: 700;
	letter-spacing: var(--psx-tracking-tight);
	padding: 18px 36px;
	border-radius: var(--psx-radius-full);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 2px 0 rgba(255,255,255,0.12) inset;
	transition: transform .15s ease, box-shadow .15s ease;
}
.psx-final-cta__btn:hover,
a.psx-final-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.32), 0 2px 0 rgba(255,255,255,0.12) inset;
}
.psx-final-cta__btn::after {
	content: "→";
	font-size: 1.15em;
	line-height: 0.9;
	transition: transform .15s ease;
}
.psx-final-cta__btn:hover::after { transform: translateX(3px); }
.psx-single__content .psx-final-cta__fineprint,
.psx-final-cta__fineprint {
	font-size: var(--psx-text-xs);
	color: rgba(255,255,255,0.55);
	margin: var(--psx-space-md) 0 0;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------
 * Inline emphasis + style tweaks
 * --------------------------------------------------------- */
.psx-mark {
	background: linear-gradient(180deg, transparent 60%, var(--psx-accent-soft) 60%);
	padding: 0 2px;
}

/* ---------------------------------------------------------
 * Default prose links inside post content
 *
 * Any <a> in a single-post body gets brand-purple color +
 * underline by default. Component anchors (cards, buttons,
 * chips, filter pills) explicitly opt out below — they have
 * their own visual treatment so they shouldn't read as text
 * links.
 * --------------------------------------------------------- */
.psx-single .entry-content a,
.psx-single__content a {
	color: var(--psx-accent);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(123, 59, 191, 0.45);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.psx-single .entry-content a:hover,
.psx-single__content a:hover {
	color: var(--psx-accent-hover);
	text-decoration-color: var(--psx-accent-hover);
}
/* Bolded link copy (most links are wrapped in <strong>) inherits the
 * link color so it doesn't fall back to body text color. */
.psx-single .entry-content a strong,
.psx-single__content a strong {
	color: inherit;
}

/* Components that should NOT show prose-link styling — these have their
 * own button/card visual treatment. */
.psx-single .entry-content .psx-pin,
.psx-single .entry-content .psx-playlist-hero__btn,
.psx-single .entry-content .psx-playlist__row,
.psx-single .entry-content .psx-final-cta__btn,
.psx-single .entry-content .psx-quiz__option,
.psx-single .entry-content .psx-share__btn,
.psx-single .entry-content .psx-share-sidebar a,
.psx-single .entry-content a.psx-season__pick,
.psx-single .entry-content .psx-season__pick a {
	text-decoration: none;
}
.psx-single .entry-content .psx-pin:hover,
.psx-single .entry-content .psx-playlist-hero__btn:hover,
.psx-single .entry-content .psx-final-cta__btn:hover,
.psx-single .entry-content .psx-quiz__option:hover,
.psx-single .entry-content .psx-share__btn:hover,
.psx-single .entry-content .psx-share-sidebar a:hover,
.psx-single .entry-content .psx-season__pick a:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------
 * Memory-verse playlist
 *
 * Spotify/Apple Music-style playlist UI for pillar pages with
 * many tracks. Three components:
 *
 *   .psx-playlist-hero      — cover montage + title + stats + Play All in App
 *   .psx-playlist           — single rounded surface containing rows
 *   .psx-playlist__row      — compact track row (cover, title, ref, time)
 *   .psx-playlist__separator — book section header inside the playlist
 *   .psx-playlist-bar       — sticky mini-player at bottom of viewport
 *
 * Behavior contract (see psalmix-verse-song.js):
 *   - One song plays at a time; clicking another row pauses the first.
 *   - No autoplay-next. Each track stops at the end. The continuous
 *     playlist experience is the soft pull toward the Psalmix app.
 *   - Sticky mini-player is shown only while a song is actively playing.
 * --------------------------------------------------------- */

/* === Playlist hero ===
 * Lifestyle-mosaic hero: 2x3 image grid + headline block + 3-up
 * feature footer, set on a cross-on-hill background image with a
 * deep-purple gradient overlay so the headline column reads cleanly.
 */
.psx-playlist-hero {
	position: relative;
	margin: var(--psx-space-2xl) 0 var(--psx-space-md);
	padding: 22px 36px 18px 28px;
	background:
		/* Top-right darkening pass — keeps the eyebrow + title legible against
		 * the cross silhouette in the bg image. */
		radial-gradient(ellipse 70% 65% at 78% 18%, rgba(36,18,68,0.62) 0%, rgba(36,18,68,0) 70%),
		linear-gradient(120deg, rgba(42,24,73,0.92) 0%, rgba(74,35,128,0.78) 55%, rgba(123,59,191,0.42) 100%),
		url("https://audio.psalmix.com/hero/hero-bg-cross-hill.jpg") center/cover no-repeat #2A1849;
	border-radius: var(--psx-radius-lg);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.psx-playlist-hero__bg { display: none; }

.psx-playlist-hero__main {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 32px;
	align-items: center;
}

/* Mosaic — 2x3 lifestyle grid, near-square so the hero stays horizontal. */
.psx-playlist-hero__mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 3px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(0,0,0,0.42);
	aspect-ratio: 4 / 5;
}
.psx-playlist-hero__tile {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: rgba(255,255,255,0.06);
}

.psx-playlist-hero__meta {
	min-width: 0;
}

/* Eyebrow with dove glyph (Psalmix mark) — small, tight to the title. */
.psx-single__content .psx-playlist-hero__eyebrow,
.psx-playlist-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--psx-font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 8px;
}
.psx-playlist-hero__eyebrow-mark {
	display: inline-flex;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		url("https://audio.psalmix.com/hero/hero-dove-glyph.jpg") center/120% no-repeat,
		#3a1f6e;
	border: 1px solid rgba(201,168,255,0.45);
}

/* Headline — let it use the full content column width. */
.psx-single__content .psx-playlist-hero__title,
.psx-playlist-hero__title {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.6rem, 3.6vw, 2.6rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.018em;
	color: #fff;
	margin: 0;
}

/* Decorative divider with center dot */
.psx-playlist-hero__divider {
	display: block;
	width: 80px;
	height: 1px;
	margin: 8px 0 8px;
	background: linear-gradient(90deg, rgba(201,168,255,0.6), rgba(255,255,255,0.15));
	position: relative;
}
.psx-playlist-hero__divider::after {
	content: "";
	position: absolute;
	left: 38%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #C9A8FF;
}

/* Stats row with icons */
.psx-single__content .psx-playlist-hero__stats,
.psx-playlist-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-family: var(--psx-font-sans);
	font-size: 12px;
	font-weight: 500;
	color: #E9D6FF;
	margin: 0 0 8px;
}
.psx-playlist-hero__stat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.psx-playlist-hero__stat-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #C9A8FF;
}

/* Subtitle */
.psx-single__content .psx-playlist-hero__sub,
.psx-playlist-hero__sub {
	font-family: var(--psx-font-sans);
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255,255,255,0.82);
	margin: 0 0 12px;
	max-width: 36ch;
}

/* Action buttons */
.psx-playlist-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.psx-single__content .psx-playlist-hero__btn,
.psx-playlist-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--psx-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 10px 18px;
	border-radius: var(--psx-radius-full);
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
	border: 0;
	cursor: pointer;
}
.psx-playlist-hero__btn-svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}
.psx-playlist-hero__btn--primary {
	background: #fff;
	color: var(--psx-accent-dark, #4A2380);
	box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.psx-playlist-hero__btn--primary:hover {
	background: #fff;
	color: var(--psx-accent-dark, #4A2380);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.24);
	text-decoration: none;
}
.psx-playlist-hero__btn--ghost,
.psx-single__content .psx-playlist-hero__btn--ghost,
.psx-single__content .psx-playlist-hero__btn--ghost:link,
.psx-single__content .psx-playlist-hero__btn--ghost:visited,
.psx-single .entry-content .psx-playlist-hero__btn--ghost {
	background: rgba(35, 18, 64, 0.55);
	color: #ffffff !important;
	border: 1.5px solid rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.psx-playlist-hero__btn--ghost:hover,
.psx-single .entry-content .psx-playlist-hero__btn--ghost:hover {
	background: rgba(35, 18, 64, 0.75);
	color: #ffffff !important;
	text-decoration: none;
	transform: translateY(-1px);
	border-color: rgba(255,255,255,0.8);
}

/* Footer feature row */
.psx-playlist-hero__features {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.14);
}
.psx-playlist-hero__feature {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--psx-font-sans);
	font-size: 12px;
	font-weight: 500;
	color: rgba(255,255,255,0.85);
	text-align: left;
	line-height: 1.25;
}
.psx-playlist-hero__feat-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	color: #C9A8FF;
}

/* === Playlist body === */
.psx-playlist {
	margin: 0 0 var(--psx-space-2xl);
	background: var(--psx-surface);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-lg);
	overflow: hidden;
}

.psx-single__content .psx-playlist__separator,
.psx-playlist__separator {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 16px 8px;
	font-family: var(--psx-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--psx-text-muted);
	margin: 0;
	background: var(--psx-surface-alt);
	border-top: 1px solid var(--psx-border);
}
.psx-playlist > .psx-playlist__separator:first-child {
	border-top: 0;
}
.psx-playlist__separator-count {
	color: var(--psx-text-disabled);
	font-weight: 500;
}

.psx-playlist__row {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 10px 16px;
	cursor: pointer;
	border-top: 1px solid var(--psx-border);
	position: relative;
	transition: background 0.12s ease;
	background: var(--psx-surface);
}
.psx-playlist__row:first-child,
.psx-playlist__separator + .psx-playlist__row {
	border-top: 0;
}
.psx-playlist__row:hover {
	background: var(--psx-accent-soft);
}
.psx-playlist__row.is-playing {
	background: var(--psx-accent-soft);
}
.psx-playlist__row.is-playing::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--psx-accent);
}

.psx-playlist__cover-wrap {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--psx-surface-alt);
}
.psx-playlist__cover {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.psx-playlist__cover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.psx-playlist__row:hover .psx-playlist__cover-overlay,
.psx-playlist__row.is-playing .psx-playlist__cover-overlay {
	opacity: 1;
}
.psx-playlist__cover-overlay::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 9px solid #fff;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}
.psx-playlist__row.is-playing .psx-playlist__cover-overlay::before {
	width: 3px;
	height: 11px;
	border: 0;
	background: #fff;
	box-shadow: 5px 0 0 0 #fff;
	margin: 0;
}

.psx-playlist__title-block {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.psx-single__content .psx-playlist__title,
.psx-playlist__title {
	font-family: var(--psx-font-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--psx-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	line-height: 1.3;
}
.psx-playlist__row.is-playing .psx-playlist__title {
	color: var(--psx-accent);
}
.psx-single__content .psx-playlist__ref,
.psx-playlist__ref {
	font-family: var(--psx-font-sans);
	font-size: 12px;
	color: var(--psx-text-muted);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

.psx-single__content .psx-playlist__time,
.psx-playlist__time {
	font-family: var(--psx-font-mono);
	font-size: 12px;
	color: var(--psx-text-muted);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	margin: 0;
}

/* === Verse text expansion ===
 * Sibling element after each .psx-playlist__row holding the full KJV text.
 * Collapsed by default; expands when the previous row has .is-playing,
 * so reading along happens automatically while the song plays. */
.psx-single__content .psx-playlist__verse-text,
.psx-playlist__verse-text {
	max-height: 0;
	overflow: hidden;
	background: var(--psx-accent-soft);
	margin: 0;
	padding: 0 16px 0 60px;
	transition: max-height 0.35s ease, padding 0.35s ease, border-color 0.25s ease;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
}
.psx-playlist__row.is-playing + .psx-playlist__verse-text {
	max-height: 360px;
	padding: 14px 20px 16px 60px;
	border-top: 1px solid var(--psx-border);
	border-bottom: 1px solid var(--psx-border);
}
.psx-single__content .psx-playlist__verse-text-body,
.psx-playlist__verse-text-body {
	font-family: var(--psx-font-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--psx-text-secondary);
	margin: 0;
	font-style: italic;
}
.psx-single__content .psx-playlist__verse-text-cite,
.psx-playlist__verse-text-cite {
	display: inline-block;
	font-family: var(--psx-font-sans);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	color: var(--psx-accent);
	letter-spacing: 0.02em;
	margin-top: 4px;
}
@media (max-width: 640px) {
	.psx-playlist__verse-text {
		padding-left: 16px;
	}
	.psx-playlist__row.is-playing + .psx-playlist__verse-text {
		padding: 12px 16px 14px;
	}
}

/* === Sticky mini-player === */
.psx-playlist-bar {
	position: fixed;
	bottom: 16px;
	left: 50%;
	width: calc(100% - 32px);
	max-width: 560px;
	background: #1A0F2E;
	color: #fff;
	border-radius: var(--psx-radius-lg);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
	padding: 10px 12px 10px 10px;
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	gap: 12px;
	align-items: center;
	z-index: 100;
	transform: translate(-50%, calc(100% + 32px));
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
	opacity: 0;
}
.psx-playlist-bar.is-active {
	transform: translate(-50%, 0);
	pointer-events: auto;
	opacity: 1;
}
.psx-playlist-bar__cover {
	width: 40px;
	height: 40px;
	border-radius: 4px;
	object-fit: cover;
	display: block;
}
.psx-playlist-bar__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.psx-playlist-bar__row {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}
.psx-playlist-bar__title {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}
.psx-playlist-bar__time {
	font-family: var(--psx-font-mono);
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}
.psx-playlist-bar__progress {
	height: 3px;
	background: rgba(255,255,255,0.15);
	border-radius: var(--psx-radius-full);
	overflow: hidden;
	cursor: pointer;
}
.psx-playlist-bar__progress-fill {
	height: 100%;
	width: 0%;
	background: var(--psx-accent-light);
	transition: width 0.1s linear;
}
.psx-playlist-bar__actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.psx-playlist-bar__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: var(--psx-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s ease, transform 0.1s ease;
	flex: 0 0 auto;
}
.psx-playlist-bar__btn:hover {
	background: var(--psx-accent-hover);
}
.psx-playlist-bar__btn:active { transform: scale(0.94); }
.psx-playlist-bar__btn svg {
	width: 14px;
	height: 14px;
	display: block;
}
.psx-playlist-bar__btn--share,
.psx-playlist-bar__btn--close {
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.10);
	color: rgba(255,255,255,0.92);
}
.psx-playlist-bar__btn--share:hover,
.psx-playlist-bar__btn--close:hover {
	background: rgba(255,255,255,0.18);
	color: #fff;
}
.psx-playlist-bar__btn--share svg,
.psx-playlist-bar__btn--close svg {
	width: 13px;
	height: 13px;
}

/* === Slim playlist intro (replaces the old leadin/drop-cap at the top) === */
.psx-single__content .psx-playlist-intro,
.psx-playlist-intro {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--psx-text-secondary);
	margin: var(--psx-space-md) 0 var(--psx-space-md);
	max-width: 680px;
}

/* === Filters (search + book chips) === */
.psx-playlist-filters {
	display: flex;
	align-items: center;
	gap: var(--psx-space-sm);
	margin: var(--psx-space-md) 0;
	flex-wrap: wrap;
}
.psx-playlist-filters__search {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 14px 10px 38px;
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-full);
	font-family: var(--psx-font-sans);
	font-size: 14px;
	background: var(--psx-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5F7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 12px center;
	color: var(--psx-text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.psx-playlist-filters__search:focus {
	outline: none;
	border-color: var(--psx-accent);
	box-shadow: 0 0 0 3px var(--psx-accent-soft);
}
.psx-playlist-filters__chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.psx-single__content .psx-playlist-filters__chip,
.psx-playlist-filters__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: var(--psx-radius-full);
	border: 1px solid var(--psx-border);
	background: var(--psx-surface);
	color: var(--psx-text-secondary);
	font-family: var(--psx-font-sans);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	margin: 0;
	text-decoration: none;
}
.psx-playlist-filters__chip:hover {
	border-color: var(--psx-accent);
	color: var(--psx-accent);
}
.psx-playlist-filters__chip.is-active {
	background: var(--psx-accent);
	color: #fff;
	border-color: var(--psx-accent);
}

/* Empty state when search/filter has no results */
.psx-playlist__empty {
	padding: var(--psx-space-xl);
	text-align: center;
	color: var(--psx-text-muted);
	font-size: 14px;
	display: none;
}
.psx-playlist.is-empty .psx-playlist__empty {
	display: block;
}
.psx-playlist.is-empty .psx-playlist__row,
.psx-playlist.is-empty .psx-playlist__separator {
	display: none;
}

/* Hide rows/separators that don't match the active filter */
.psx-playlist__row.is-hidden,
.psx-playlist__separator.is-hidden {
	display: none;
}

/* Section heading utility — used for soft mid-page headers */
.psx-single__content .psx-section-heading,
.psx-section-heading {
	font-family: var(--psx-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--psx-text);
	letter-spacing: -0.018em;
	margin: var(--psx-space-2xl) 0 var(--psx-space-md);
	line-height: 1.25;
}

/* === Seasonal verse songs section ===
 * Centered editorial header (eyebrow + glyph + diamond divider + intro)
 * sitting above a 2-column grid of cards. Each card carries a per-season
 * accent color used by the left stripe, label, icon-circle tint, and the
 * circular arrow button bottom-right.
 *
 * Per-season accent is set on the wrapper as `--season-accent` and a
 * matching `--season-tint` for the icon/arrow bg fill. Falls back to the
 * brand purple if a season isn't recognized. */
.psx-seasons-section {
	margin: var(--psx-space-2xl) 0;
	--season-accent: var(--psx-accent);
	--season-tint: rgba(123, 59, 191, 0.10);
}

/* Centered header: glyph → eyebrow → headline → diamond divider → intro */
.psx-seasons__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--psx-space-xl);
}
.psx-seasons__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--psx-accent);
	margin-bottom: 12px;
}
.psx-seasons__glyph svg,
.psx-seasons__glyph img {
	width: 220px;
	height: auto;
	display: block;
	object-fit: contain;
}
.psx-single .entry-content .psx-seasons__glyph img,
.psx-single__content .psx-seasons__glyph img {
	width: 220px;
	height: auto;
	margin: 0 auto;
}
.psx-single__content .psx-seasons__eyebrow,
.psx-seasons__eyebrow {
	font-family: var(--psx-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--psx-accent);
	margin: 0 0 12px;
}
/* Override the standard section-heading top margin when it sits inside
 * a centered seasons header — the eyebrow handles the spacing instead. */
.psx-single__content .psx-seasons__header .psx-section-heading,
.psx-seasons__header .psx-section-heading {
	margin: 0 0 10px;
	text-align: center;
	font-family: var(--psx-font-serif);
	font-size: clamp(1.8rem, 3.4vw, 2.4rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--psx-text);
}
.psx-seasons__divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--psx-accent);
	opacity: 0.4;
	margin: 0 0 14px;
}
.psx-seasons__divider svg {
	width: 120px;
	height: 12px;
	display: block;
}
.psx-single__content .psx-seasons__intro,
.psx-seasons__intro {
	font-family: var(--psx-font-sans);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--psx-text-secondary);
	margin: 0 auto;
	max-width: 52ch;
}

/* === Compact editorial list ===
 * 6 rows in one bordered container, separated by hairlines. Uniform brand
 * purple — per-season variation comes from the unique icon illustration.
 * Each row: icon | label + title + verse-ref description | arrow.
 * Total section ~470px tall instead of ~1000px for the old card grid. */
.psx-seasons {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-lg);
	background: var(--psx-surface);
	overflow: hidden;
	margin: 0;
}

.psx-season {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr 28px;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"icon label arrow"
		"icon title arrow"
		"icon copy  arrow";
	column-gap: 18px;
	row-gap: 2px;
	align-items: center;
	padding: 18px 22px;
	border-top: 1px solid var(--psx-border);
	background: var(--psx-surface);
	transition: background 0.18s ease;
}
.psx-season:first-child { border-top: 0; }
.psx-season:hover {
	background: color-mix(in srgb, var(--psx-accent) 4%, var(--psx-surface));
}

/* Icon — uniform brand purple, no circle bg, direct grid child */
.psx-season__icon {
	grid-area: icon;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--psx-accent);
}
.psx-season .psx-season__icon img,
.psx-season .psx-season__icon svg,
.psx-single__content .psx-season__icon img,
.psx-single .entry-content .psx-season__icon img {
	width: 36px;
	height: 36px;
	max-width: 36px;
	display: block;
	object-fit: contain;
	margin: 0;
}

/* Label — small caps eyebrow, brand purple */
.psx-single__content .psx-season__label,
.psx-season__label {
	grid-area: label;
	font-family: var(--psx-font-sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--psx-accent);
	margin: 0 0 2px;
	display: block;
	line-height: 1.3;
}

/* Title — moderate serif, single line preferred */
.psx-single__content .psx-season__pick,
.psx-season__pick {
	grid-area: title;
	font-family: var(--psx-font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--psx-text);
	margin: 0;
	letter-spacing: -0.005em;
	line-height: 1.25;
	text-wrap: balance;
}
.psx-single .entry-content .psx-season__pick a,
.psx-single__content .psx-season__pick a,
.psx-season__pick a {
	color: var(--psx-text);
	text-decoration: none;
	border-bottom: 0;
	display: block;
	transition: color 0.15s ease;
}
.psx-single .entry-content .psx-season__pick a:hover,
.psx-single__content .psx-season__pick a:hover,
.psx-season__pick a:hover {
	color: var(--psx-accent);
	border-bottom: 0;
	text-decoration: none;
}

/* Description — small secondary line beneath title */
.psx-single__content .psx-season__copy,
.psx-season__copy {
	grid-area: copy;
	font-family: var(--psx-font-sans);
	font-size: 13px;
	color: var(--psx-text-secondary);
	line-height: 1.45;
	margin: 4px 0 0;
}

/* Plain arrow chevron — no circle bg, just a stroke icon */
.psx-season__arrow {
	grid-area: arrow;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--psx-accent);
	border-bottom: 0;
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.psx-single .entry-content a.psx-season__arrow,
.psx-single__content a.psx-season__arrow {
	color: var(--psx-accent);
	border-bottom: 0;
	text-decoration: none;
}
.psx-season:hover .psx-season__arrow {
	opacity: 1;
	transform: translateX(2px);
}
.psx-season__arrow svg {
	width: 18px;
	height: 18px;
	display: block;
}

@media (max-width: 720px) {
	.psx-seasons-section { margin: var(--psx-space-xl) 0; }
	.psx-seasons__header { margin-bottom: var(--psx-space-lg); }
	.psx-seasons__glyph img,
	.psx-seasons__glyph svg { width: 100px; }
	.psx-seasons__divider svg { width: 96px; }
	.psx-single__content .psx-seasons__header .psx-section-heading,
	.psx-seasons__header .psx-section-heading { font-size: clamp(2rem, 8vw, 2.6rem); }
	.psx-single__content .psx-seasons__intro,
	.psx-seasons__intro { font-size: 15px; }
	.psx-season {
		grid-template-columns: 36px 1fr 24px;
		column-gap: 14px;
		padding: 16px 18px;
	}
	.psx-season__icon { width: 30px; height: 30px; }
	.psx-season .psx-season__icon img,
	.psx-single__content .psx-season__icon img,
	.psx-single .entry-content .psx-season__icon img {
		width: 30px;
		height: 30px;
		max-width: 30px;
	}
	.psx-single__content .psx-season__pick,
	.psx-season__pick { font-size: 1.05rem; }
	.psx-single__content .psx-season__copy,
	.psx-season__copy { font-size: 12.5px; }
}

/* Hero ghost button: solid 2px white border + readable fill on the gradient */
.psx-playlist-hero__btn--ghost {
	background: rgba(0, 0, 0, 0.22);
	border: 2px solid #fff;
	color: #fff;
	font-weight: 700;
	padding: 9px 17px;
}
.psx-playlist-hero__btn--ghost:hover {
	background: #fff;
	color: var(--psx-accent-dark);
	border-color: #fff;
}

/* === "Why music helps" infographic — premium numbered pillars ===
 * Editorial 3-column layout with big serif numbers (01/02/03) as the visual
 * hook. Replaces the previous icon-circle grid which read flat. */
.psx-infographic {
	counter-reset: psx-info-counter;
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--psx-space-lg);
	margin: var(--psx-space-lg) 0 var(--psx-space-2xl);
	padding: var(--psx-space-2xl) var(--psx-space-xl);
	background:
		radial-gradient(ellipse 60% 80% at 100% 0%, rgba(166, 107, 217, 0.10) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 0% 100%, rgba(123, 59, 191, 0.06) 0%, transparent 60%),
		linear-gradient(135deg, #FAF8FE 0%, #F4EEFB 100%);
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-xl);
	overflow: hidden;
}
.psx-infographic::before {
	/* Subtle decorative top accent line */
	content: "";
	position: absolute;
	top: 0;
	left: var(--psx-space-xl);
	right: var(--psx-space-xl);
	height: 3px;
	background: linear-gradient(90deg, transparent 0%, var(--psx-accent) 30%, var(--psx-accent-light) 70%, transparent 100%);
	opacity: 0.35;
}
.psx-infographic__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--psx-space-sm);
	padding-top: var(--psx-space-2xl);
}
.psx-infographic__cell::before {
	content: counter(psx-info-counter, decimal-leading-zero);
	counter-increment: psx-info-counter;
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--psx-font-serif);
	font-size: 2.75rem;
	font-weight: 900;
	color: var(--psx-accent);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: lining-nums tabular-nums;
}
.psx-infographic__cell::after {
	/* Thin underline-accent under the number */
	content: "";
	position: absolute;
	top: 56px;
	left: 0;
	width: 32px;
	height: 2px;
	background: var(--psx-accent);
	opacity: 0.5;
}
/* Old icon span hidden — kept in markup for backwards compat with existing posts */
.psx-infographic__icon {
	display: none;
}
.psx-single__content .psx-infographic__headline,
.psx-infographic__headline {
	font-family: var(--psx-font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--psx-text);
	margin: var(--psx-space-sm) 0 0;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.psx-single__content .psx-infographic__copy,
.psx-infographic__copy {
	font-size: 15px;
	color: var(--psx-text-secondary);
	line-height: 1.6;
	margin: 0;
}

/* On mobile the grid collapses; numbers stay big but cells stack with a divider */
@media (max-width: 640px) {
	.psx-infographic {
		gap: var(--psx-space-xl);
		padding: var(--psx-space-xl) var(--psx-space-lg);
	}
	.psx-infographic__cell {
		padding-top: var(--psx-space-xl);
	}
	.psx-infographic__cell + .psx-infographic__cell {
		padding-top: var(--psx-space-2xl);
		border-top: 1px solid var(--psx-border);
	}
	.psx-infographic__cell::before { font-size: 2.25rem; }
	.psx-infographic__cell::after { top: 44px; }
}

/* === Mid-page inline CTA ===
 * Placed between the seasonal picks and the editorial quote. Catches
 * visitors who don't make it to the bottom-of-post final CTA. */
.psx-inline-cta {
	margin: var(--psx-space-2xl) 0;
	border-radius: 24px;
	overflow: hidden;
	background:
		linear-gradient(90deg, #14082A 0%, rgba(20,8,42,0.96) 30%, rgba(20,8,42,0.55) 48%, rgba(20,8,42,0) 62%),
		url("https://audio.psalmix.com/blog/cta-phone-bg.png") right center / cover no-repeat,
		linear-gradient(135deg, #1A0F38 0%, #2D1659 50%, #3D1F75 100%);
	color: #fff;
	box-shadow: 0 24px 60px -28px rgba(20, 10, 60, 0.55), 0 4px 12px rgba(20, 10, 60, 0.18);
	position: relative;
	isolation: isolate;
	min-height: 460px;
}
.psx-inline-cta__swirl {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.psx-inline-cta__swirl--tl {
	top: 0;
	left: 0;
	width: 240px;
	height: 200px;
	opacity: 0.9;
}
.psx-inline-cta__swirl--br {
	right: 0;
	bottom: 0;
	width: 280px;
	height: 220px;
	opacity: 0.9;
	transform: rotate(180deg);
}
.psx-inline-cta__sparkle {
	position: absolute;
	top: 24px;
	right: 28px;
	width: 22px;
	height: 22px;
	pointer-events: none;
	z-index: 1;
}
.psx-inline-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	padding: 56px;
	position: relative;
	z-index: 2;
}
.psx-inline-cta__copy {
	min-width: 0;
}
.psx-single__content .psx-inline-cta__eyebrow,
.psx-inline-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--psx-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #C9B8F0;
	margin: 0 0 18px;
}
.psx-inline-cta__eyebrow-icon {
	width: 10px;
	height: 10px;
	color: #C9B8F0;
	flex-shrink: 0;
}
.psx-single__content .psx-inline-cta__headline,
.psx-inline-cta__headline {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.85rem, 3.4vw, 2.65rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: #FAF3E8;
	margin: 0 0 20px;
	max-width: 18ch;
}
.psx-single__content .psx-inline-cta__sub,
.psx-inline-cta__sub {
	font-family: var(--psx-font-sans);
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(250, 243, 232, 0.78);
	margin: 0 0 28px;
	max-width: 44ch;
}
.psx-inline-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.psx-single__content .psx-inline-cta__btn,
.psx-inline-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--psx-font-sans);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 13px 22px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}
.psx-single__content .psx-inline-cta__btn--primary,
.psx-inline-cta__btn--primary {
	background: #FBE5C8;
	color: #2A1849;
	box-shadow: 0 8px 22px -12px rgba(255, 220, 180, 0.5);
}
.psx-single__content .psx-inline-cta__btn--primary:hover,
.psx-inline-cta__btn--primary:hover {
	background: #FFEED4;
	color: #2A1849;
	transform: translateY(-1px);
	text-decoration: none;
}
.psx-single__content .psx-inline-cta__btn--ghost,
.psx-inline-cta__btn--ghost {
	background: rgba(255, 255, 255, 0.04);
	color: #E8DDF7;
	border: 1px solid rgba(220, 200, 255, 0.28);
	padding: 12px 22px;
}
.psx-single__content .psx-inline-cta__btn--ghost:hover,
.psx-inline-cta__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(220, 200, 255, 0.5);
	color: #fff;
	text-decoration: none;
}
.psx-inline-cta__btn-icon {
	width: 16px;
	height: 16px;
	color: currentColor;
	flex-shrink: 0;
}
/* Defensive: hide any leftover CSS-phone elements from cached HTML;
   the right-side device is now baked into the section background image. */
.psx-inline-cta__device,
.psx-inline-cta__phone,
.psx-inline-cta__phone-notch,
.psx-inline-cta__phone-screen,
.psx-inline-cta__phone-header,
.psx-inline-cta__phone-brand,
.psx-inline-cta__phone-dots,
.psx-inline-cta__phone-cover,
.psx-inline-cta__phone-title,
.psx-inline-cta__phone-meta,
.psx-inline-cta__phone-tracks {
	display: none !important;
}

@media (max-width: 880px) {
	.psx-inline-cta {
		min-height: 0;
		background:
			linear-gradient(180deg, rgba(20,8,42,0.55) 0%, rgba(20,8,42,0.85) 50%, #14082A 100%),
			url("https://audio.psalmix.com/blog/cta-phone-bg.png") center top / cover no-repeat,
			linear-gradient(135deg, #1A0F38 0%, #2D1659 50%, #3D1F75 100%);
	}
	.psx-inline-cta__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 280px 32px 40px;
	}
	.psx-single__content .psx-inline-cta__headline,
	.psx-inline-cta__headline {
		font-size: 1.7rem;
		max-width: none;
	}
	.psx-inline-cta__swirl--tl { width: 180px; height: 140px; }
	.psx-inline-cta__swirl--br { width: 200px; height: 160px; }
}
@media (max-width: 480px) {
	.psx-inline-cta__inner {
		padding: 240px 24px 32px;
	}
	.psx-inline-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.psx-single__content .psx-inline-cta__btn,
	.psx-inline-cta__btn {
		justify-content: center;
	}
}

/* === Pinterest pin block ===
 * Each card shows a real designed pin image (1000x1500, 2:3). Tapping the
 * card opens Pinterest's pin creator with the pin's actual image prefilled
 * via media= so Pinterest scrapes the designed pin (not whatever it finds
 * on the page). On hover, a dark overlay reveals a Pinterest red "Save"
 * button — standard pin-it interaction. */
.psx-pinterest {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--psx-space-md);
	margin: var(--psx-space-lg) 0;
}
.psx-pin {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: var(--psx-radius-md);
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: var(--psx-shadow-md);
	background: var(--psx-surface-alt);
}
.psx-pin:hover {
	transform: translateY(-3px);
	box-shadow: var(--psx-shadow-lg);
	text-decoration: none;
}
.psx-pin__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.psx-pin__overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 12, 38, 0);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 12px;
	pointer-events: none;
	transition: background 0.18s ease;
}
.psx-pin:hover .psx-pin__overlay,
.psx-pin:focus-visible .psx-pin__overlay {
	background: rgba(20, 12, 38, 0.16);
}
.psx-pin__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: #E60023;
	color: #fff;
	font-family: var(--psx-font-sans);
	font-size: 13px;
	font-weight: 700;
	border-radius: var(--psx-radius-full);
	letter-spacing: 0.02em;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.psx-pin:hover .psx-pin__cta,
.psx-pin:focus-visible .psx-pin__cta {
	transform: scale(1.06);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
}
.psx-pin__cta::before {
	/* Real Pinterest "P" mark, inlined as a data URI SVG so we don't depend
	 * on Pinterest's pinit.js or external assets. */
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'><path d='M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* === Row highlight when jumped to from a season pick === */
.psx-playlist__row.is-highlighted {
	animation: psx-row-pulse 1.8s ease-out;
}
@keyframes psx-row-pulse {
	0%   { background: var(--psx-accent); }
	15%  { background: var(--psx-accent-light); }
	100% { background: var(--psx-surface); }
}

/* Season pick title becomes a link — keep it readable, hover purple */
.psx-single__content .psx-season__pick a,
.psx-season__pick a {
	color: var(--psx-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.psx-season__pick a:hover {
	color: var(--psx-accent);
	border-bottom-color: var(--psx-accent);
	text-decoration: none;
}

/* Share toast (used by the share button when clipboard fallback fires) */
.psx-share-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 80px);
	background: var(--psx-text);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--psx-radius-full);
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.psx-share-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* === Mobile === */
@media (max-width: 720px) {
	.psx-playlist-hero {
		padding: 24px 22px 22px;
	}
	.psx-playlist-hero__main {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.psx-playlist-hero__mosaic {
		display: none;
	}
	.psx-playlist-hero__title {
		font-size: clamp(1.6rem, 6vw, 2.1rem);
	}
	.psx-playlist-hero__cross,
	.psx-playlist-hero__leaf {
		display: none;
	}
	.psx-playlist-hero__features {
		grid-template-columns: 1fr;
		gap: 10px;
		text-align: left;
	}
	.psx-playlist-hero__feature {
		justify-content: flex-start;
	}
	.psx-playlist__row {
		grid-template-columns: 40px 1fr auto;
		gap: 12px;
		padding: 10px 12px;
	}
	.psx-playlist__cover-wrap {
		width: 40px; height: 40px;
	}
	.psx-single__content .psx-playlist__title,
	.psx-playlist__title {
		font-size: 14px;
	}
}


/* ---------------------------------------------------------
 * Single post body — give the WP post container the same
 * narrow-column treatment for everything inside it, so the
 * editorial components above stay readable.
 *
 * Targets the post body inside `.psx-single` (single.php
 * wraps the article in this class via template-functions.php).
 * --------------------------------------------------------- */
.psx-single .entry-content > p,
.psx-single .entry-content > h2,
.psx-single .entry-content > h3,
.psx-single .entry-content > ul,
.psx-single .entry-content > ol,
.psx-single .entry-content > figure,
.psx-single .entry-content > .psx-eyebrow,
.psx-single .entry-content > .psx-article-meta,
.psx-single .entry-content > .psx-leadin,
.psx-single .entry-content > .psx-bigquote,
.psx-single .entry-content > .psx-quote,
.psx-single .entry-content > .psx-stats,
.psx-single .entry-content > .psx-versus,
.psx-single .entry-content > .psx-philosophies,
.psx-single .entry-content > .psx-rule,
.psx-single .entry-content > .psx-quiz,
.psx-single .entry-content > .psx-playlist,
.psx-single .entry-content > .psx-playlist-hero,
.psx-single .entry-content > .psx-playlist-filters,
.psx-single .entry-content > .psx-playlist-intro,
.psx-single .entry-content > .psx-seasons,
.psx-single .entry-content > .psx-section-heading,
.psx-single .entry-content > .psx-infographic,
.psx-single .entry-content > .psx-pinterest,
.psx-single .entry-content > .psx-inline-cta,
.psx-single .entry-content > blockquote {
	max-width: var(--psx-content-max);
	margin-left: auto;
	margin-right: auto;
}
/* Callout and full-bleed elements escape the narrow column intentionally */
.psx-single .entry-content > .psx-callout,
.psx-single .entry-content > .psx-final-cta {
	max-width: none;
}

/* === Hide featured-image hero on playlist pillar pages ===
 * The pillar's own .psx-playlist-hero block renders the cover mosaic +
 * meta + CTAs at the very top of the body, which makes the WP featured
 * image redundant and pushes the playlist below the fold. Scoped to the
 * three pillar post IDs so other posts keep their featured image. The
 * featured image still appears in OG tags / Pinterest / share previews. */
.postid-378 .psx-single__hero,
.postid-418 .psx-single__hero,
.postid-419 .psx-single__hero {
	display: none;
}

/* ─────────────────────────────────────────────────────
 * Pillar-page FAQ accordion (`<section class="psx-faq">`)
 * Used on NT / OT / multiplication pillar pages. Distinct from the
 * homepage .psx-faq__item structure — these use __card markup.
 * ───────────────────────────────────────────────────── */
.psx-single .entry-content > .psx-faq {
	max-width: 920px;
	margin-left: auto;
	margin-right: auto;
	padding-block: var(--psx-space-2xl);
	background: linear-gradient(180deg, rgba(199,158,232,0.05) 0%, rgba(255,255,255,0) 70%);
	border-radius: var(--psx-radius-lg);
}
.psx-faq__header {
	max-width: 720px;
	margin: 0 auto var(--psx-space-xl);
	text-align: center;
}
.psx-faq__eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--psx-accent);
	margin: 0 0 var(--psx-space-sm);
}
.psx-faq__divider {
	display: flex;
	justify-content: center;
	margin: var(--psx-space-sm) 0 var(--psx-space-md);
}
.psx-faq__diamond {
	width: 8px; height: 8px;
	transform: rotate(45deg);
	background: color-mix(in srgb, var(--psx-accent) 60%, white);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--psx-accent) 8%, white);
	border-radius: 1px;
}
.psx-single .entry-content > .psx-faq .psx-faq__heading,
.psx-faq__heading {
	font-family: var(--psx-font-serif);
	font-size: clamp(1.85rem, 4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--psx-text);
	margin: 0 0 var(--psx-space-sm);
}
.psx-faq__subtitle {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--psx-text-secondary);
	margin: 0;
	max-width: 560px;
	margin-inline: auto;
}
.psx-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 760px;
	margin: 0 auto;
}
.psx-faq__card {
	background: #fff;
	border: 1px solid var(--psx-border);
	border-radius: var(--psx-radius-md);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.psx-faq__card[open] {
	border-color: color-mix(in srgb, var(--psx-accent) 40%, var(--psx-border));
	box-shadow: 0 8px 24px -16px rgba(74,35,128,0.18);
}
.psx-faq__summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-size: 1rem;
	font-weight: 600;
	color: var(--psx-text);
	transition: background 0.15s ease;
}
.psx-faq__summary::-webkit-details-marker { display: none; }
.psx-faq__summary:hover { background: color-mix(in srgb, var(--psx-accent) 4%, white); }
.psx-faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--psx-accent) 10%, white);
	color: var(--psx-accent);
	flex: 0 0 auto;
	transition: background 0.2s ease;
}
.psx-faq__card[open] .psx-faq__icon {
	background: color-mix(in srgb, var(--psx-accent) 18%, white);
}
.psx-faq__icon svg { width: 18px; height: 18px; display: block; }
.psx-faq__title {
	flex: 1;
	font-family: var(--psx-font-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--psx-text);
	margin: 0;
}
.psx-faq__chevron {
	display: inline-flex;
	color: var(--psx-text-secondary);
	flex: 0 0 auto;
	transition: transform 0.2s ease, color 0.2s ease;
}
.psx-faq__card[open] .psx-faq__chevron {
	transform: rotate(180deg);
	color: var(--psx-accent);
}
.psx-faq__body {
	padding: 0 18px 18px 68px;
	color: var(--psx-text-secondary);
}
.psx-faq__body p {
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0 0 12px;
}
.psx-faq__body p:last-child { margin-bottom: 0; }
.psx-faq__body a { color: var(--psx-accent); }

/* Inline share buttons inside the share Q&A */
.psx-faq__share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.psx-faq__share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: var(--psx-radius-full);
	border: 1px solid var(--psx-border);
	background: #fff;
	color: var(--psx-text-secondary);
	font-family: var(--psx-font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.psx-faq__share-btn:hover {
	border-color: var(--psx-accent);
	color: var(--psx-accent);
	background: color-mix(in srgb, var(--psx-accent) 4%, white);
}
.psx-faq__share-btn svg { width: 14px; height: 14px; display: block; }

/* Footer block (glyph + headline + sub) */
.psx-faq__footer {
	max-width: 480px;
	margin: var(--psx-space-2xl) auto 0;
	text-align: center;
}
.psx-faq__footer-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--psx-accent) 10%, white);
	color: var(--psx-accent);
	margin: 0 auto var(--psx-space-md);
}
.psx-faq__footer-glyph svg { width: 28px; height: 28px; display: block; }
.psx-faq__footer-headline {
	font-family: var(--psx-font-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--psx-text);
	margin: 0 0 8px;
}
.psx-faq__footer-sub {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--psx-text-secondary);
	margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
	.psx-faq__summary { gap: 10px; padding: 14px 14px; }
	.psx-faq__icon { width: 30px; height: 30px; }
	.psx-faq__icon svg { width: 16px; height: 16px; }
	.psx-faq__body { padding: 0 14px 14px 14px; }
}