/* ============================================================================
 * Pricing page — per-template styles
 *
 * Loads after global.css (priority 20) so it wins equal-specificity overrides.
 * Prefix: .ba-p-*  (pricing).
 * ============================================================================*/

/* ---------------------------------------------------------------------------
 * 1. HERO  (panel styles — bg/padding/radius — come from global.css canonical
 * hero block; .ba-p-hero holds the pricing-specific grid + typography.)
 * -------------------------------------------------------------------------*/
.ba-p-hero {
	display: grid;
	grid-template-columns: minmax(0, 630fr) minmax(0, 515fr);
	gap: 40px;
	align-items: stretch;
}
.ba-p-hero .ba-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: center;
}
.ba-p-hero .ba-hero__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 60px;
	line-height: 1.05;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-p-hero .ba-hero__lead {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 0;
	max-width: 560px;
}
.ba-p-hero .ba-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ba-p-hero__note {
	font-family: var(--ba-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 8px 0 0;
	max-width: 520px;
}
.ba-p-hero__media {
	position: relative;
	border-radius: var(--ba-radius-card);
	overflow: hidden;
	min-height: 560px;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
}
.ba-p-hero__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Eyebrow primitive lives in global.css §22c. Keep modifier here only. */
.ba-eyebrow--muted { color: #A38974; }

/* .ba-section--p-gap aliases to .ba-section--tight in global.css §5. */

/* ---------------------------------------------------------------------------
 * 2. PACKAGES
 * -------------------------------------------------------------------------*/
.ba-p-packages {
	background: rgba(252, 248, 243, 0.92);
	padding: var(--ba-section-pad);
	border-radius: var(--ba-radius-card);
}
.ba-p-packages__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: var(--ba-gap-2xl);
}
.ba-p-packages__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.1;
	color: var(--ba-text-primary);
	margin: 0;
}
/* Smooth in-page anchor scroll (used by .ba-p-packages__link → #p-list-title
   and the pricing sidebar category anchors). Scoped via pricing.css enqueue. */
html { scroll-behavior: smooth; }
.ba-p-list,
[id^="pricing-"] { scroll-margin-top: 120px; }
#p-list-title { scroll-margin-top: 120px; }

/* Packages section link — text + circular down-arrow button. */
.ba-p-packages__link {
	gap: 12px;
	text-decoration: none;
}
.ba-p-packages__link:hover { text-decoration: none; }
.ba-p-packages__link-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #F3ECE4;
	color: var(--ba-text-primary);
	transition: background-color 0.2s ease;
}
.ba-p-packages__link:hover .ba-p-packages__link-circle { background: #E7DCCE; }
.ba-p-packages__link-circle svg { display: block; }

.ba-p-packages__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.ba-p-pkg {
	background: linear-gradient(180deg, rgba(246, 240, 232, 0.96) 0%, rgba(252, 248, 243, 0.78) 100%);
	box-shadow: 0px 26px 60px rgba(62, 42, 32, 0.07), inset 0px 0px 0px 1px rgba(62, 42, 32, 0.055);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: var(--ba-radius-card-sm);
	padding: var(--ba-space-4);
	display: flex;
	flex-direction: column;
}
.ba-p-pkg__media {
	position: relative;
	height: 190px;
	border-radius: var(--ba-radius-card-xs);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
	margin-bottom: var(--ba-space-4);
}
.ba-p-pkg__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ba-p-pkg__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 26px;
	line-height: 1.15;
	color: var(--ba-text-primary);
	margin: 0 0 8px;
	padding: 0 8px;
}
.ba-p-pkg__price {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: var(--ba-text-muted);
	margin: 0 0 18px;
	padding: 0 8px;
}
.ba-p-pkg__desc {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: #453124;
	margin: 0 0 8px;
	padding: 0 8px 8px;
}

/* ---------------------------------------------------------------------------
 * 3. PRICING LIST (sidebar + containers)
 * -------------------------------------------------------------------------*/
.ba-p-list__head { margin-bottom: var(--ba-gap-2xl); }
.ba-p-list__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.1;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-p-list__layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
/* .ba-p-list__sidebar uses the shared .ba-concerns__sidebar primitive from
 * global.css. No local overrides needed. */

.ba-p-list__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.ba-p-item {
	background: rgba(252, 248, 243, 0.9);
	border: 1px solid rgba(56, 39, 30, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: var(--ba-radius-card);
	padding: 28px 32px;
	scroll-margin-top: 120px;
}
.ba-p-item__head {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: start;
	gap: 16px;
	margin-bottom: var(--ba-space-6);
}
.ba-p-item__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: rgba(237, 225, 213, 0.35);
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: #38271E;
}
.ba-p-item__heads { min-width: 0; }
.ba-p-item__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	color: var(--ba-text-primary);
	margin: 4px 0 6px;
}
.ba-p-item__sub {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 0;
}
.ba-p-item__cta { align-self: center; white-space: nowrap; }

.ba-p-item__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}
.ba-p-item__rows--2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
/* Skinpen-style section: add breathing room between packs grid and rows. */
.ba-p-item__packs + .ba-p-item__rows { margin-top: var(--ba-space-7); }
.ba-p-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(56, 39, 30, 0.08);
}
.ba-p-row__label {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: #38271E;
}
.ba-p-row__muted { color: var(--ba-text-muted); }
.ba-p-row__value {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	color: #453124;
	white-space: nowrap;
}

/* Note container below rows */
.ba-p-item__note {
	margin-top: 18px;
	background: rgba(237, 225, 213, 0.4);
	border-radius: var(--ba-radius-sm);
	padding: 16px 20px;
	font-family: var(--ba-font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ba-text-muted);
}
.ba-p-item__note p { margin: 0; }
/* Inline text links inside the note paragraph (not .ba-btn CTAs). */
.ba-p-item__note p a,
.ba-p-item__note a:not(.ba-btn):not(.ba-p-item__note-link) {
	color: var(--ba-text-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Buttons inside the note must not inherit underline / text color from above. */
.ba-p-item__note .ba-btn { text-decoration: none; }
.ba-p-item__note-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: var(--ba-text-primary);
	font-weight: 500;
	text-decoration: none;
}
.ba-p-item__note-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* Skinpen 3-column packs */
.ba-p-item__packs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 6px;
}
.ba-p-pack {
	background: linear-gradient(180deg, rgba(252, 248, 243, 0.92) 0%, rgba(237, 225, 213, 0.36) 100%);
	border: 1px solid rgba(56, 39, 30, 0.06);
	border-radius: var(--ba-radius-sm);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.ba-p-pack__title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.25;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-p-pack__price {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--ba-text-primary);
	margin: 7px 0 0;
}
.ba-p-pack__text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ba-text-muted);
	margin: 7px 0 0;
}
.ba-p-pack__badge {
	display: inline-block;
	margin-top: 8px;
	background: rgba(237, 225, 213, 0.56);
	border-radius: 999px;
	padding: 3px 10px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 12px;
	color: var(--ba-text-primary);
}

/* ---------------------------------------------------------------------------
 * 4. MEMBERSHIPS
 * -------------------------------------------------------------------------*/
.ba-p-mem__grid {
	display: grid;
	grid-template-columns: minmax(0, 662px) minmax(0, 600px);
	gap: 18px;
	align-items: stretch;
}
.ba-p-mem__left {
	background: linear-gradient(180deg, rgba(252, 248, 243, 0.94) 0%, rgba(237, 225, 213, 0.52) 100%);
	border: 1px solid rgba(56, 39, 30, 0.07);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: var(--ba-radius-card);
	padding: 32px;
}
.ba-p-mem__tag {
	display: inline-block;
	align-self: flex-start;
	background: #EFE6DD;
	border-radius: 999px;
	padding: 7px 14px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ba-text-primary);
}
.ba-p-mem__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 38px;
	line-height: 1.1;
	color: var(--ba-text-primary);
	margin: 20px 0 0;
}
.ba-p-mem__lead {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 20px 0 0;
}
.ba-p-mem__features {
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.ba-p-mem__feature {
	background: rgba(252, 248, 243, 0.84);
	border: 1px solid rgba(56, 39, 30, 0.07);
	border-radius: var(--ba-radius-sm);
	padding: 20px;
}
.ba-p-mem__feature-title {
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.25;
	color: var(--ba-text-primary);
	margin: 0;
}
.ba-p-mem__feature-text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 7px 0 0;
}
.ba-p-mem__note {
	margin: 10px 0 0;
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.55;
	color: var(--ba-text-muted);
}
.ba-p-mem__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.ba-p-mem__chip {
	display: inline-block;
	background: #EEE3D7;
	border-radius: 999px;
	padding: 7px 14px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 13px;
	color: #34241B;
}
.ba-p-mem__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.ba-p-mem__right {
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
}
/* Two mini cards share the left column's height equally. */
.ba-p-mem__mini {
	flex: 1 1 0;
	background: rgba(252, 248, 243, 0.88);
	border: 1px solid rgba(56, 39, 30, 0.07);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border-radius: var(--ba-radius-card);
	padding: 32px;
	display: flex;
	flex-direction: column;
}
/* .ba-p-mem__mini--soft variant removed — both mini cards now share the
 * same surface as the left card for visual consistency. */
.ba-p-mem__mini-title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	margin: 13px 0 0;
}
.ba-p-mem__mini-text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ba-text-muted);
	margin: 14px 0 0;
}
.ba-p-mem__mini-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-family: var(--ba-font-body);
	font-weight: 500;
	font-size: 14px;
	color: var(--ba-text-primary);
	text-decoration: none;
	align-self: flex-start;
}
.ba-p-mem__mini-link:hover { color: var(--ba-text-secondary); text-decoration: none; }

/* ---------------------------------------------------------------------------
 * 5. WHY
 * -------------------------------------------------------------------------*/
.ba-p-why {
	background: #EDE1D5;
	padding: var(--ba-section-pad);
	border-radius: var(--ba-radius-card);
}
.ba-p-why .ba-eyebrow { color: #A38974; }
.ba-p-why__title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 50px;
	line-height: 1.08;
	color: var(--ba-text-primary);
	margin: 0 0 32px;
}
.ba-p-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.ba-p-why__card {
	background: #FCF8F3;
	border-radius: var(--ba-radius-card);
	padding: 28px 40px;
	display: flex;
	flex-direction: column;
}
.ba-p-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--ba-radius-card-xs);
	background: #EEE3D7;
	color: var(--ba-text-primary);
}
.ba-p-why__card-title {
	font-family: var(--ba-font-heading);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2;
	color: var(--ba-text-primary);
	margin: 32px 0 0;
}
.ba-p-why__card-text {
	font-family: var(--ba-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	color: #453124;
	margin: 12px 0 0;
}

/* ---------------------------------------------------------------------------
 * Banner: pricing-specific wrap hint
 * -------------------------------------------------------------------------*/
.ba-pricing-banner .ba-banner__title { max-width: 18ch; }

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-p-hero { grid-template-columns: 1fr; gap: 28px; }
	.ba-p-hero .ba-hero__title { font-size: 46px; }
	.ba-p-hero__media { min-height: 380px; }

	.ba-p-packages { padding: 28px; }
	.ba-p-packages__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ba-p-packages__title { font-size: 36px; }
	.ba-p-packages__grid { grid-template-columns: 1fr; }

	.ba-p-list__title { font-size: 36px; }
	.ba-p-list__layout { grid-template-columns: 1fr; gap: 24px; }
	/* side-nav responsive lives in global.css */

	.ba-p-item { padding: 24px; }
	.ba-p-item__head { grid-template-columns: 32px minmax(0, 1fr); }
	.ba-p-item__cta { grid-column: 1 / -1; justify-self: start; }
	.ba-p-item__rows--2col { grid-template-columns: 1fr; column-gap: 0; }
	.ba-p-item__packs { grid-template-columns: 1fr; }

	.ba-p-mem__grid { grid-template-columns: 1fr; }
	.ba-p-mem__right { height: auto; }
	.ba-p-mem__mini { flex: 0 0 auto; }
	/* Keep 2×2 features on tablet — 4 cards still fit comfortably. */
	.ba-p-mem__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ba-p-why { padding: 32px; }
	.ba-p-why__title { font-size: 40px; }
	.ba-p-why__grid { grid-template-columns: 1fr; }
	.ba-p-why__card { padding: 24px; }
}

@media ( max-width: 720px ) {
	.ba-p-hero .ba-hero__title { font-size: 36px; }
	.ba-p-hero__media { min-height: 280px; }

	.ba-p-packages { padding: 20px; }
	.ba-p-packages__title { font-size: 30px; }

	.ba-p-list__title { font-size: 30px; }
	.ba-p-item { padding: 20px; }
	.ba-p-item__title { font-size: 22px; }

	/* Mobile: stack features in a single column. */
	.ba-p-mem__features { grid-template-columns: 1fr; }

	.ba-p-mem__left,
	.ba-p-mem__mini { padding: 24px; }
	.ba-p-mem__title { font-size: 30px; }
	.ba-p-mem__mini-title { font-size: 22px; }

	.ba-p-why__title { font-size: 32px; }
	.ba-p-why__card-title { font-size: 22px; }
}