/* BaeMelody Landing Page — §31 */

:root {
	--bm-navy: #152033;
	--bm-ivory: #FFF9F4;
	--bm-blush: #F4D7DB;
	--bm-rose: #C96F7B;
	--bm-gold: #C8A56A;
	--bm-charcoal: #242424;
	--bm-white: #FFFFFF;
	--bm-navy-light: #1e2d45;
	--bm-gold-dim: #a08555;
	--bm-radius: 12px;
	--bm-shadow: 0 4px 24px rgba(21,32,51,0.10);
	--bm-font-heading: 'Playfair Display', Georgia, serif;
	--bm-font-body: 'Inter', -apple-system, sans-serif;
}

/* Hide redundant page title when landing is present */
article:has(.bm-landing) > .entry-header { display: none; }

/* Break landing out of Astra's content container for full-width sections */
.bm-landing {
	width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
	overflow-x: hidden;
}

/* Remove Astra content/container padding around landing — body class set by landing.js */
body.bm-landing-page .entry-content {
	margin: 0;
	padding: 0;
}
body.bm-landing-page article {
	padding: 0;
	margin: 0;
}
body.bm-landing-page #primary,
body.bm-landing-page .site-main,
body.bm-landing-page .content-area {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body.bm-landing-page .ast-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}

/* ====== HERO ====== */
/* 85vh plus a tall site header pushed the primary button off the bottom of a
   laptop window — measured at top:663 in a 651px viewport, i.e. the one thing the
   page exists to be clicked was invisible until you scrolled. Trimmed to 72vh with
   tighter internal rhythm so the eyebrow, headline, button and price all land in
   the first screen. */
.bm-hero {
	position: relative;
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bm-navy);
	text-align: center;
	padding: 2.5rem 1.5rem;
}
.bm-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--bm-navy) 0%, var(--bm-navy-light) 50%, var(--bm-navy) 100%);
	opacity: 0.95;
}
.bm-hero__content {
	position: relative; z-index: 1;
	max-width: 720px;
}
/* Hero animated melody icon */
.bm-hero__icon {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	height: 36px;
	margin-bottom: 1rem;
}
.bm-hero__bar {
	width: 5px;
	border-radius: 3px;
	background: var(--bm-gold);
	box-shadow: 0 0 8px rgba(200,165,106,0.4);
	animation: bmHeroPulse 1.4s ease-in-out infinite;
}
.bm-hero__bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.bm-hero__bar:nth-child(2) { height: 36px; animation-delay: 0.2s; }
.bm-hero__bar:nth-child(3) { height: 28px; animation-delay: 0.4s; }
.bm-hero__bar:nth-child(4) { height: 40px; animation-delay: 0.6s; }
.bm-hero__bar:nth-child(5) { height: 18px; animation-delay: 0.8s; }
@keyframes bmHeroPulse {
	0%, 100% { transform: scaleY(0.3); opacity: 0.6; }
	50% { transform: scaleY(1); opacity: 1; }
}

.bm-hero__title {
	font-family: var(--bm-font-heading);
	font-size: clamp(2rem, 6vw, 3.5rem);
	color: var(--bm-ivory);
	line-height: 1.2;
	margin: 0 0 1rem;
}
.bm-hero__sub {
	font-family: var(--bm-font-body);
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	color: var(--bm-blush);
	margin: 0 0 1.5rem;
	line-height: 1.6;
}
/* Rating + deadline, ABOVE the headline. The hero is centred at 85vh, so anything
   placed after the subhead falls on the fold line in a short laptop window — which
   is where the price was measured sitting. First thing seen, first thing believed. */
.bm-hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin: 0 auto 1.25rem;
	font-family: var(--bm-font-body);
}
/* Price rides with the button: the number matters most at the moment of the click. */
.bm-hero__act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
}
.bm-hero__proof {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	color: #fff;
}
.bm-hero__stars {
	color: var(--bm-gold);
	letter-spacing: 0.08em;
	font-size: 1rem;
}
.bm-hero__price {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	color: #fff;
}
.bm-hero__price-label {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}
.bm-hero__price-now {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}
.bm-hero__price-was {
	font-size: 1rem;
	opacity: 0.65;
	text-decoration: line-through;
}
/* The sale pill is the one element that carries a deadline, so it reads as an
   announcement rather than decoration — but it is still rendered only while the
   product is actually on sale. */
.bm-hero__sale {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: 100px;
	background: var(--bm-gold);
	color: #1b1200;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
/* Answers "how long is this going to take?" at the moment of the click — the
   questionnaire is nine steps and the button never said so. */
.bm-hero__reassure {
	margin: 0.9rem 0 0;
	font-family: var(--bm-font-body);
	font-size: 0.85rem;
	color: #fff;
	opacity: 0.75;
}
@media (max-width: 480px) {
	.bm-hero__eyebrow { gap: 0.35rem 0.7rem; margin-bottom: 1rem; }
	.bm-hero__proof { font-size: 0.85rem; }
	.bm-hero__price-now { font-size: 1.35rem; }
	.bm-hero__sale { font-size: 0.78rem; padding: 0.3rem 0.7rem; }
	/* Stack the button above the price on a phone so the tap target keeps full width. */
	.bm-hero__act { flex-direction: column; gap: 0.6rem; }
	.bm-hero__reassure { font-size: 0.8rem; }
}

.bm-hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.bm-badge {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 1px solid var(--bm-gold-dim);
	border-radius: 100px;
	font-family: var(--bm-font-body);
	font-size: 0.8rem;
	color: var(--bm-gold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ====== BUTTONS ====== */
.bm-landing .bm-btn,
.bm-landing .bm-btn:hover,
.bm-landing .bm-btn:focus,
.bm-landing .bm-btn:visited {
	display: inline-block;
	padding: 0.9rem 2.5rem;
	border-radius: var(--bm-radius);
	font-family: var(--bm-font-body);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	border: 2px solid transparent;
	text-align: center;
}
.bm-btn:hover { transform: translateY(-1px); }
.bm-btn:active { transform: translateY(0); }
.bm-btn--gold {
	background: var(--bm-gold);
	color: var(--bm-navy);
	border-color: var(--bm-gold);
}
.bm-btn--gold:hover { background: #b8953e; box-shadow: 0 6px 20px rgba(200,165,106,0.3); }
.bm-landing .bm-btn--outline,
.bm-landing .bm-btn--outline:hover,
.bm-landing .bm-btn--outline:focus,
.bm-landing .bm-btn--outline:visited {
	background: transparent;
	color: var(--bm-gold);
	border-color: var(--bm-gold);
}
.bm-landing .bm-btn--outline:hover { background: rgba(200,165,106,0.1); }
.bm-btn--lg { padding: 1.1rem 3rem; font-size: 1.1rem; }

/* ====== SECTIONS ====== */
.bm-section {
	padding: 5rem 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}
.bm-section__title {
	font-family: var(--bm-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--bm-navy);
	text-align: center;
	margin: 0 0 0.5rem;
}
.bm-section__sub {
	font-family: var(--bm-font-body);
	font-size: 1.05rem;
	color: var(--bm-rose);
	text-align: center;
	margin: 0 0 3rem;
}

/* ====== HOW IT WORKS ====== */
.bm-how .bm-section__sub::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: var(--bm-gold);
	margin: 1rem auto 0;
	border-radius: 2px;
}
.bm-how__steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	flex-wrap: wrap;
}
.bm-step {
	flex: 0 1 280px;
	text-align: center;
	padding: 1.5rem;
}
.bm-step__number {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--bm-navy);
	color: var(--bm-gold);
	font-family: var(--bm-font-heading);
	font-size: 1.5rem;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem;
	border: 2px solid var(--bm-gold);
}
.bm-step__title {
	font-family: var(--bm-font-heading);
	font-size: 1.25rem;
	color: var(--bm-navy);
	margin: 0 0 0.5rem;
}
.bm-step__desc {
	font-family: var(--bm-font-body);
	font-size: 0.95rem;
	color: var(--bm-charcoal);
	line-height: 1.6;
}
.bm-step__connector {
	flex: 0 0 60px;
	height: 2px;
	background: var(--bm-gold-dim);
	align-self: center;
	margin-top: -1rem;
}
@media (max-width: 768px) {
	.bm-step__connector { display: none; }
	.bm-how__steps { flex-direction: column; align-items: center; }
}

/* ====== DEMO SONGS ====== */
/* Two designs on purpose. The landing page keeps cards (people arrive there to
   browse a section); the product page uses compact rows, because there this sits
   directly above the questionnaire and every pixel is distance to the form.
   .bm-demo-card is the selector landing.js binds on and appears on BOTH a landing
   card and a product row, so each design is scoped to its own container — without
   that, the card rules restyle the rows. */

/* ---- landing page: cards ---- */
.bm-demos { background: var(--bm-ivory); border-radius: 0; padding: 5rem 1.5rem; max-width: 100%; }
.bm-demos .bm-section__title,
.bm-demos .bm-section__sub { max-width: 1200px; margin-left: auto; margin-right: auto; }
.bm-demos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}
.bm-demos .bm-demo-card {
	background: var(--bm-white);
	border-radius: var(--bm-radius);
	padding: 1.6rem 1.5rem;
	text-align: center;
	box-shadow: var(--bm-shadow);
	transition: transform 0.2s;
}
.bm-demos .bm-demo-card:hover { transform: translateY(-3px); }
.bm-demos .bm-demo-card__title {
	font-family: var(--bm-font-heading);
	font-size: 1.2rem;
	color: var(--bm-navy);
	margin: 0 0 0.75rem;
}
.bm-demos .bm-demo-card__meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--bm-font-body);
	font-size: 0.8rem;
	color: var(--bm-rose);
	margin-bottom: 1.1rem;
}
/* Separators rather than three items floating in whitespace — reads as one line of
   attributes, and matches how the product page renders the same metadata. */
.bm-demos .bm-demo-card__meta span:not(:last-child)::after {
	content: '·';
	margin-left: 0.5rem;
	opacity: 0.55;
}

/* The card now carries the playing state the waveform used to. Without this,
   removing the icon would have left no card-level signal for which sample is
   playing — only the button's own label. */
.bm-demos .bm-demo-card--playing {
	background: var(--bm-ivory);
	box-shadow: 0 0 0 2px var(--bm-gold) inset, var(--bm-shadow);
}
.bm-demos .bm-demo-play { margin-top: 0.5rem; }
.bm-demos .bm-demo-play__icon { margin-right: 0.25rem; }

/* ---- product page: compact rows (rendered by includes/demos.php) ---- */
.bm-product-demos { margin: 4px 0 22px; }
.bm-product-demos .bm-demolist__label {
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: var(--bm-navy);
	font-weight: 700;
	text-align: left;
}
/* list-style:none — a track list is genuinely a list, so <ul>/<li> is the right
   markup, but the browser's bullets are not part of the design. */
.bm-product-demos .bm-demolist {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(21, 32, 51, .12);
	border-radius: 12px;
	overflow: hidden;
	background: var(--bm-white);
	text-align: left;
}
.bm-product-demos .bm-demolist__row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 9px 12px;
	border-top: 1px solid rgba(21, 32, 51, .08);
	background: none;
	box-shadow: none;
	list-style: none;
}
.bm-product-demos .bm-demolist__row:first-child { border-top: 0; }
/* 44px minimum, and the brand's gold outline rather than the theme's filled pink
   button: this is a quiet control inside a list, not a call to action competing
   with "Create Their Song". */
.bm-product-demos .bm-demolist__play {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	border: 1px solid var(--bm-gold);
	background: var(--bm-ivory);
	color: var(--bm-navy);
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bm-product-demos .bm-demolist__play:hover { background: var(--bm-gold); }
.bm-product-demos .bm-demolist__play:focus-visible { outline: 3px solid var(--bm-rose); outline-offset: 2px; }
/* Explicit: the product summary column centres text, which gave every row a
   different left edge against the buttons. */
.bm-product-demos .bm-demolist__text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.bm-product-demos .bm-demolist__name { font-size: 14px; color: var(--bm-navy); line-height: 1.3; }
.bm-product-demos .bm-demolist__meta { font-size: 12px; color: #6b6b6b; line-height: 1.4; }
.bm-product-demos .bm-demolist__note { font-size: 12px; color: #6b6b6b; line-height: 1.5; margin: 8px 2px 0; text-align: left; }
.bm-product-demos .bm-demo-card--playing { background: var(--bm-ivory); }
.bm-product-demos .bm-demo-card--playing .bm-demolist__play { background: var(--bm-gold); }
.bm-product-demos .bm-demo-play__icon { margin: 0; line-height: 1; }

/* ====== OCCASIONS ====== */
.bm-occasions__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}
.bm-occ-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 1rem;
	border-radius: var(--bm-radius);
	background: var(--bm-white);
	border: 1px solid #e8e0d8;
	text-decoration: none;
	transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.bm-occ-card:hover {
	border-color: var(--bm-gold);
	transform: translateY(-2px);
	box-shadow: var(--bm-shadow);
}
.bm-occ-card__icon { font-size: 2rem; margin-bottom: 0.5rem; }
.bm-occ-card__label {
	font-family: var(--bm-font-body);
	font-size: 0.9rem;
	color: var(--bm-navy);
	font-weight: 500;
}

/* ====== PRICING ====== */
.bm-pricing { background: var(--bm-navy); padding: 5rem 1.5rem; max-width: 100%; border-radius: 0; }
.bm-pricing .bm-section__title { color: var(--bm-gold); }
.bm-pricing .bm-section__sub { color: var(--bm-blush); }
.bm-pricing__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	max-width: 1000px;
	margin: 0 auto;
}
.bm-tier-card {
	background: var(--bm-navy-light);
	border: 1px solid var(--bm-gold-dim);
	border-radius: var(--bm-radius);
	padding: 2.5rem 2rem;
	text-align: center;
	position: relative;
}
.bm-tier-card--featured {
	border: 2px solid var(--bm-gold);
	transform: scale(1.04);
	box-shadow: 0 8px 32px rgba(200,165,106,0.15);
}
.bm-tier-card__badge {
	position: absolute;
	top: -14px; left: 50%; transform: translateX(-50%);
	background: var(--bm-rose);
	color: var(--bm-ivory);
	font-family: var(--bm-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.35rem 1.25rem;
	border-radius: 100px;
}
.bm-tier-card__name {
	font-family: var(--bm-font-heading);
	font-size: 1.5rem;
	color: var(--bm-gold);
	margin: 0.5rem 0 0.75rem;
}
.bm-tier-card__price {
	font-family: var(--bm-font-body);
	font-size: 2rem;
	font-weight: 700;
	color: var(--bm-ivory);
	margin-bottom: 1.5rem;
}
.bm-tier-card__price .woocommerce-Price-amount { font-size: inherit; }
.bm-tier-card__features {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	text-align: left;
}
.bm-tier-card__features li {
	font-family: var(--bm-font-body);
	font-size: 0.9rem;
	color: var(--bm-ivory);
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(200,165,106,0.15);
}
.bm-tier-card__features li::before {
	content: '\2713';
	color: var(--bm-gold);
	margin-right: 0.5rem;
	font-weight: 700;
}

/* ====== FAQ ====== */
.bm-faq__list { max-width: 750px; margin: 0 auto; }
.bm-faq__item {
	border-bottom: 1px solid #e8e0d8;
	padding: 0;
}
.bm-faq__question {
	font-family: var(--bm-font-body);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bm-navy);
	padding: 1.25rem 2rem 1.25rem 0;
	cursor: pointer;
	position: relative;
	list-style: none;
}
.bm-faq__question::-webkit-details-marker { display: none; }
.bm-faq__question::after {
	content: '+';
	position: absolute;
	right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--bm-gold);
	transition: transform 0.2s;
}
details[open] .bm-faq__question::after { content: '\2212'; }
.bm-faq__answer {
	padding: 0 0 1.25rem;
}
.bm-faq__answer p {
	font-family: var(--bm-font-body);
	font-size: 0.95rem;
	color: var(--bm-charcoal);
	line-height: 1.7;
	margin: 0;
}

/* ====== FINAL CTA ====== */
.bm-final-cta {
	text-align: center;
	padding: 5rem 1.5rem;
	background: linear-gradient(135deg, var(--bm-ivory) 0%, var(--bm-blush) 100%);
	max-width: 100%;
	border-radius: 0;
}
.bm-final-cta__title {
	font-family: var(--bm-font-heading);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	color: var(--bm-navy);
	margin: 0 0 0.75rem;
}
.bm-final-cta__sub {
	font-family: var(--bm-font-body);
	font-size: 1.1rem;
	color: var(--bm-charcoal);
	margin: 0 0 2rem;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 480px) {
	.bm-hero { min-height: 70vh; padding: 3rem 1rem; }
	.bm-section { padding: 3rem 1rem; }
	.bm-tier-card--featured { transform: none; }
	.bm-occasions__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
	.bm-btn, .bm-demo-card, .bm-occ-card { transition: none; }
	.bm-btn:hover, .bm-demo-card:hover, .bm-occ-card:hover { transform: none; }
}