/* Balance homepage template styles (page-home.php only) */

/* D1: AOS's own base CSS sets [data-aos]{opacity:0} and only ever adds
   the reveal class from JS — if AOS.js fails to load/execute for any
   reason (network hiccup, blocked script, JS error upstream), anything
   marked data-aos stays invisible forever with no fallback. Belt-and-
   braces: force it visible whenever the user has asked for reduced
   motion (AOS's own `disable()` check already skips initializing these
   elements in that case, so without this override they'd never get
   revealed at all) and treat that as the safe default generally. */
@media (prefers-reduced-motion: reduce) {
	[data-aos] {
		opacity: 1 !important;
		transform: none !important;
	}
}

.balance-home section {
	max-width: 72rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

.balance-home h2 {
	color: var(--balance-navy);
	font-size: 2rem;
	text-align: center;
	margin-bottom: 0.5rem;
}

.balance-section-intro {
	text-align: center;
	max-width: 40rem;
	margin: 0 auto 2.5rem;
	color: var(--balance-ink);
}

/* Placeholder flagging (.balance-placeholder) now lives in the site-wide
   style.css, since it's used in the footer too, not just this template. */

/* C3: organic section dividers (inc/section-divider.php). Colored to
   match the section above. margin-bottom collapses the div's own box back
   to zero height and z-index lifts it above the section that follows, so
   it overlaps down onto that section instead of sitting in the normal
   document-flow gap between the two (which has no background of its own
   — for a divider transitioning into a white section, an SVG with
   transparent gaps painted against that gap would just show the page's
   own white background through it regardless of what's "below", making
   the wave invisible). Overlapping the real section beneath it means the
   transparent gaps reveal that section's actual background instead. */
.balance-divider {
	position: relative;
	z-index: 1;
	height: 60px;
	margin-bottom: -60px;
	line-height: 0;
	pointer-events: none;
}

.balance-divider svg {
	display: block;
	width: 100%;
	height: 100%;
}

.balance-divider--flip {
	transform: scaleY(-1);
}

@media (max-width: 600px) {
	.balance-divider {
		height: 32px;
		margin-bottom: -32px;
	}
}

/* 1. Hero ---------------------------------------------------------------- */

section.balance-hero {
	position: relative;
	max-width: none;
	padding: 0;
	overflow: hidden;
	background-color: var(--bal-navy-deep);
	background-size: cover;
	background-position: center;
}

.balance-hero.no-video {
	background-image: linear-gradient(135deg, var(--bal-navy-deep), var(--bal-navy));
}

.balance-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Video is desktop/tablet only — mobile gets the static poster (already
   set as the section's background-image) to save bandwidth, sidestep
   mobile autoplay restrictions, and match B1's reduced-motion path. */
@media (max-width: 768px) {
	.balance-hero__video {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.balance-hero__video {
		display: none;
	}
}

.balance-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(34, 56, 77, 0.55);
	z-index: 0;
}

.balance-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 5rem 1.5rem 3.5rem;
	align-items: center;
}

@media (max-width: 900px) {
	.balance-hero__grid {
		grid-template-columns: 1fr;
		padding: 3rem 1.5rem 2.5rem;
	}
}

.balance-hero__content {
	color: var(--balance-white);
}

.balance-hero__kicker {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bal-sky-light);
	margin: 0 0 1rem;
}

.balance-hero__content h1 {
	font-family: "Fraunces", serif;
	margin: 0 0 1.1rem;
	color: var(--balance-white);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.balance-hero__content h1 .balance-accent {
	color: var(--bal-saffron);
}

.balance-hero__subhead {
	font-size: 1.1rem;
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 1.75rem;
}

.balance-hero__cta-row {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.balance-hero__find-goal {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	color: var(--balance-white);
	text-decoration: none;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
	padding-bottom: 2px;
}

.balance-hero__find-goal:hover,
.balance-hero__find-goal:focus {
	color: var(--bal-sky-light);
	border-color: currentColor;
}

/* Two bottles: GlucoFocus behind/right, ZenSleep in front/left,
   overlapping so ~30% of the back bottle's width is covered — flex
   centers the pair as a unit (via the back bottle, which sets the
   layout's width) and the front bottle is pulled left/forward off of
   it with absolute positioning. */
.balance-hero__product {
	position: relative;
	display: flex;
	justify-content: center;
}

.balance-hero__product-cutout {
	display: block;
	height: 315px; /* 420px, 25% smaller */
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.35));
}

/* Own height rather than inheriting the 315px base: the front bottle
   overrides that too, so raising the shared value would scale both. The
   translateX shifts GlucoFocus out from behind ZenSleep — transforms don't
   affect layout, so the pair stays centered as a unit and only the visible
   overlap changes (~30% of this bottle's width covered, now ~20%). */
.balance-hero__product-cutout--back {
	position: relative;
	z-index: 1;
	height: 331px; /* 315px + 5% */
	transform: translateX(20%) translateY(-10%); /* out from behind the front bottle, dropped 10% */
}

.balance-hero__product-cutout--front {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 50%;
	height: 378px; /* 315px + 20% */
	transform: translateX(-106%); /* -88% pushed 20% further left, less overlap */
}

@media (max-width: 900px) {
	.balance-hero__product-cutout {
		height: 240px; /* 320px, 25% smaller */
	}

	.balance-hero__product-cutout--back {
		height: 252px; /* 240px + 5% */
	}

	.balance-hero__product-cutout--front {
		height: 288px; /* 240px + 20% */
	}
}

.balance-hero__engraving-ghost {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140%;
	max-width: none;
	height: auto;
	opacity: 0.08;
	pointer-events: none;
}

/* B3: trust strip at the hero's bottom edge (third-party proof — star
   rating and marketplace logos). Replaces the old .balance-marketplace-strip
   section further down the page.

   It also carried a "Batch-tested for purity" line, removed 2026-09-09. That
   was Balance's own claim sitting in a strip whose whole point is proof from
   someone else; the strip is now only third-party, as described. */
.balance-hero__trust-strip {
	position: relative;
	z-index: 1;
	background: var(--bal-navy-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.balance-hero__trust-strip-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.balance-hero__rating {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
}

.balance-hero__stars {
	color: var(--bal-saffron);
	letter-spacing: 1px;
}

.balance-hero__trust-strip-inner img {
	height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* Pill CTA buttons now live in the site-wide style.css (.balance-pill-button),
   since product pages need them too, not just this template. .btn-primary/
   .btn-secondary (site-wide style.css) are the current button system. */

/* 2. Trust bar ------------------------------------------------------------ */

section.balance-trust-bar {
	max-width: none;
	padding: 0;
	background-color: var(--balance-navy);
	background-image: linear-gradient(135deg, var(--balance-navy), #1c3049);
}

.balance-trust-bar__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

.balance-trust-bar h2 {
	color: var(--balance-white);
}

.balance-trust-bar .balance-section-intro {
	color: rgba(255, 255, 255, 0.75);
}

.balance-trust-bar__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 2rem;
	text-align: center;
	margin-top: 1rem;
}

.balance-trust-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1.5rem 1.25rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
}

/* Lucide icon set (A4) — one flat outline style everywhere, 28px stroke
   icons in a 56px tinted circle, instead of the old mixed filled-circle/
   hand-drawn SVGs. Used by the trust bar and goal-nav cards. */
.balance-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(91, 147, 187, 0.15);
	color: var(--bal-sky);
	margin-bottom: 0.25rem;
}

.balance-icon-circle svg {
	width: 28px;
	height: 28px;
}

.balance-trust-bar__item h3 {
	color: var(--balance-white);
	font-size: 1.05rem;
	margin: 0;
}

.balance-trust-bar__item p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.9rem;
	margin: 0;
}

/* 3. Goal navigator -------------------------------------------------------- */

section.balance-goal-nav {
	max-width: none;
	padding: 0;
	background-color: #faf6ee;
}

.balance-goal-nav__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 1rem;
}

/* C2: interactive tab selector (ARIA tabs pattern, assets/js/goal-selector.js)
   replaces the old stacked alternating-band layout — one goal shown at a
   time, switched via the pill tabs above it, instead of scrolling past
   every goal whether or not it's the one you came for. */
.balance-goal-selector {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1.5rem 4rem;
}

.balance-goal-selector__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.balance-goal-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--balance-white);
	border: 1px solid rgba(45, 72, 98, 0.18);
	color: var(--balance-navy);
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.balance-goal-tab svg {
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
}

.balance-goal-tab:hover {
	border-color: var(--bal-sky);
}

.balance-goal-tab.is-active {
	background: var(--bal-navy);
	border-color: var(--bal-navy);
	color: var(--balance-white);
}

/* E3: cross-fade instead of a hard display:none/flex swap. All panels
   share the same grid cell (grid-area:1/1 below) so the container's
   height comes from the tallest one and outgoing/incoming panels can
   overlap during the transition — display:none can't be transitioned
   (an element leaves the render tree the instant it's set, no fade
   possible), so the "off" state is opacity+visibility instead. The
   visibility transition-delay only applies on the way OUT: incoming
   panels become visible immediately so they start fading in right
   away, outgoing ones stay visible (and hoverable/clickable) for the
   full 150ms fade before actually leaving the accessibility tree. */
.balance-goal-selector__panels {
	display: grid;
}

.balance-goal-panel {
	grid-area: 1 / 1;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: var(--balance-white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 32px rgba(45, 72, 98, 0.1);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.balance-goal-panel.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.15s ease;
}

.balance-goal-panel__media {
	position: relative;
	flex: 1 1 22rem;
	min-height: 20rem;
}

.balance-goal-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
}

/* Real transparent product cutouts (same assets the hero uses) on a
   brand-toned gradient, replacing two ad-composite photos with baked-in
   marketing copy that didn't match the rest of the redesign. */
.balance-goal-panel__media--sky {
	background: linear-gradient(160deg, var(--bal-sky-light), var(--bal-sky));
}

.balance-goal-panel__media--lavender {
	background: linear-gradient(160deg, var(--bal-lavender), #b9a4dd);
}

.balance-goal-panel__media img.balance-goal-panel__cutout {
	width: auto;
	height: 78%;
	max-width: 80%;
	margin: auto;
	object-fit: contain;
	filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.25));
}

.balance-goal-tile__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: #d99a1b;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	z-index: 1;
}

.balance-goal-tile__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(45deg, #fff8e8, #fff8e8 10px, #ffe9b8 10px, #ffe9b8 20px);
	border: 2px dashed #d99a1b;
	color: #a06a00;
	text-align: center;
	font-size: 0.85rem;
	padding: 1rem;
}

.balance-goal-panel__content {
	flex: 1 1 20rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 2.5rem;
}

.balance-goal-panel__content h3 {
	color: var(--balance-navy);
	font-size: 1.75rem;
	margin: 0 0 0.75rem;
}

.balance-goal-panel__content p {
	margin: 0 0 1.5rem;
	color: var(--balance-ink);
}

.balance-goal-panel__content .balance-pill-button {
	align-self: flex-start;
}

/* E3: real price/rating facts beside the CTA — a reason to click
   through, not just a description. */
.balance-goal-panel__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.balance-goal-panel__fact {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--balance-navy);
	padding-right: 1rem;
	border-right: 1px solid rgba(45, 72, 98, 0.15);
}

.balance-goal-panel__fact:last-child {
	padding-right: 0;
	border-right: none;
}

.balance-goal-panel__fact--rating span {
	color: var(--bal-saffron);
}

@media (max-width: 749px) {
	.balance-goal-panel {
		flex-direction: column;
	}

	.balance-goal-panel__media {
		min-height: 14rem;
	}

	.balance-goal-panel__content {
		padding: 2rem 1.5rem;
	}
}

/* 4. Comparison ------------------------------------------------------------ */

section.balance-comparison {
	max-width: none;
	padding: 0;
	background-color: var(--balance-navy);
	background-image: linear-gradient(135deg, var(--balance-navy), #1c3049);
}

.balance-comparison__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 4.5rem 1.5rem;
	display: flex;
	gap: 3rem;
	flex-wrap: wrap;
	align-items: center;
}

.balance-comparison__intro {
	flex: 1 1 20rem;
}

.balance-comparison__accent-image {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 1.5rem;
	border: 2px solid rgba(255, 255, 255, 0.25);
}

.balance-comparison__accent-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.balance-comparison__intro h2 {
	text-align: left;
	color: var(--balance-white);
	font-size: 2.15rem;
	margin-bottom: 1rem;
}

.balance-comparison__intro p {
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

/* Supporting points under the section heading — deliberately a step down in
   size from the h2 so the heading stays the single focal line. Bullets are
   drawn with ::before rather than list-style so the saffron marker can be
   coloured independently of the muted white text. */
.balance-comparison__points {
	list-style: none;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.95rem;
	line-height: 1.6;
}

.balance-comparison__points li {
	position: relative;
	padding-left: 1.15rem;
}

.balance-comparison__points li + li {
	margin-top: 0.5rem;
}

.balance-comparison__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bal-saffron);
}

.balance-comparison__list {
	flex: 1 1 24rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	overflow: hidden;
}

.balance-comparison__list-header,
.balance-comparison__row {
	display: grid;
	grid-template-columns: 1fr 5rem 8rem;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1.25rem;
}

.balance-comparison__list-header {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.balance-comparison__list-header span:nth-child(2),
.balance-comparison__list-header span:nth-child(3) {
	text-align: center;
}

.balance-comparison__row {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--balance-white);
	font-size: 0.9rem;
}

.balance-comparison__row:last-child {
	border-bottom: none;
}

.balance-comparison__mark {
	display: flex;
	justify-content: center;
}

.balance-comparison__mark svg {
	width: 1.6rem;
	height: 1.6rem;
}

.balance-comparison__mark--yes {
	color: var(--balance-blue);
}

.balance-comparison__mark--no {
	color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 749px) {
	.balance-comparison__list-header,
	.balance-comparison__row {
		grid-template-columns: 1fr 3.5rem 3.5rem;
		padding: 0.75rem 0.85rem;
	}

	.balance-comparison__row-label {
		font-size: 0.85rem;
	}
}

/* 5. Ingredient science ----------------------------------------------------- */

/* C1: botanical engraving layer. Public-domain plates, sourced/processed
   per assets/images/engravings/SOURCES.md. Two variants: a single large
   "ghost" (ambient section texture, not tied to one ingredient) and a
   small "card" badge matching each ingredient's own plate. */
.balance-ingredients {
	position: relative;
	overflow: hidden;
}

.balance-engraving-ghost {
	position: absolute;
	z-index: -1;
	bottom: -8%;
	right: -6%;
	width: 40rem;
	max-width: 65%;
	height: auto;
	opacity: 0.06;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.balance-ingredients__group {
	margin-bottom: 2.5rem;
}

.balance-ingredients__group-title {
	/* E2: was --balance-blue (3.17:1 on white, axe flagged — needs 4.5:1) */
	color: var(--balance-navy);
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.balance-ingredients__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
}

.balance-ingredient-card {
	background: var(--balance-offwhite);
	border-radius: 8px;
	overflow: hidden;
}

.balance-ingredient-card.balance-placeholder {
	background-color: #fff8e8;
	border-radius: 8px;
}

.balance-ingredient-card.balance-placeholder .balance-placeholder__tag {
	left: 1rem;
	top: 1rem;
	z-index: 1;
}

.balance-ingredient-card__image {
	position: relative;
}

.balance-ingredient-card__image img {
	width: 100%;
	height: 10rem;
	object-fit: cover;
	display: block;
}

.balance-ingredient-card__image img.balance-ingredient-card__engraving {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	background: var(--bal-cream);
	object-fit: cover;
	opacity: 0.92;
}

.balance-ingredient-card__body {
	padding: 1.5rem;
}

.balance-ingredient-card.balance-placeholder .balance-ingredient-card__body {
	padding-top: 2rem;
}

.balance-ingredient-card h4 {
	color: var(--balance-navy);
	margin: 0 0 0.5rem;
}

/* (Section 6, marketplace availability strip, removed — folded into the
   B3 trust strip at the hero's bottom edge instead. See "1. Hero" above.) */

/* 7. Testimonials --------------------------------------------------------- */

section.balance-testimonials {
	max-width: none;
	padding: 0;
	background-color: #faf6ee;
}

.balance-testimonials__inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
}

.balance-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	align-items: stretch;
	gap: 1.5rem;
}

/* C5: flex column + the quote taking up the flexible space (flex:1 1 auto
   below) is what makes the byline land on the same baseline across cards
   of differing quote length, instead of each card just being as tall as
   its own content (grid's align-items:stretch only equalizes the outer
   card height, not where things fall inside it). */
.balance-testimonial-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--balance-white);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 10px rgba(45, 72, 98, 0.08);
}

.balance-testimonial-card__stars {
	color: #e0a13a;
	letter-spacing: 0.1em;
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.balance-testimonial-card__title {
	font-family: "Assistant", sans-serif;
	font-weight: 600;
	color: var(--balance-navy);
	margin-bottom: 0.4rem;
}

.balance-testimonial-card__quote {
	flex: 1 1 auto;
	font-style: italic;
	margin-bottom: 1.25rem;
}

.balance-testimonial-card__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.balance-testimonial-card__avatar {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bal-navy);
	color: var(--balance-white);
	font-family: "Fraunces", serif;
	font-weight: 600;
	font-size: 1.05rem;
}

.balance-testimonial-card__name {
	font-weight: 600;
	color: var(--balance-navy);
	margin: 0;
}

.balance-testimonial-card__detail {
	margin-top: 0.15rem;
	font-size: 0.85rem;
	color: #6b6b6b;
}

.balance-testimonial-card.balance-placeholder {
	background-color: #fff8e8;
	border: 2px dashed #d99a1b;
	border-radius: 8px;
	padding: 2rem 1.5rem 1.5rem;
	position: relative;
	box-shadow: none;
}

/* FAQ accordion styles moved to the site-wide style.css — the FAQ section
   now lives on the dedicated /faqs/ page, not the homepage. */

/* 8. Blog teaser + signup --------------------------------------------------- */

.balance-blog-teaser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
}

.balance-blog-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Engraving-on-cream cover (C1/E5) — replaces each post's own featured
   image (all three were baked-text ad composites) with the same
   botanical-plate identity used in the Ingredient Science section,
   instead of swapping in different but equally inconsistent photos. */
.balance-blog-card__cover {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bal-cream);
	display: flex;
	align-items: flex-end;
	padding: 1.25rem;
	box-shadow: 0 2px 10px rgba(45, 72, 98, 0.08);
	transition: box-shadow 0.15s ease;
}

.balance-blog-card:hover .balance-blog-card__cover {
	box-shadow: 0 8px 20px rgba(45, 72, 98, 0.16);
}

.balance-blog-card__engraving {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
	mix-blend-mode: multiply;
	transition: opacity 0.15s ease;
}

.balance-blog-card:hover .balance-blog-card__engraving {
	opacity: 0.4;
}

.balance-blog-card__cover::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(to top, rgba(250, 246, 238, 0.92) 0%, rgba(250, 246, 238, 0) 55%);
}

.balance-blog-card__cover h3 {
	position: relative;
	z-index: 2;
	color: var(--balance-navy);
	font-size: 1.15rem;
	margin: 0;
}

/* C6: navy band matching the header/footer, instead of sitting directly
   on the page's white background like a plain form. */
section.balance-signup {
	max-width: none;
	padding: 0;
	background-color: var(--bal-navy);
	background-image: linear-gradient(135deg, var(--bal-navy), var(--bal-navy-deep));
}

.balance-signup__inner {
	max-width: 40rem;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	text-align: center;
}

.balance-signup__inner h2 {
	color: var(--balance-white);
}

.balance-signup__inner p {
	color: rgba(255, 255, 255, 0.75);
}

.balance-signup.balance-placeholder {
	background-color: #fff8e8;
	border: 2px dashed #d99a1b;
	border-radius: 8px;
	padding: 3rem 1.5rem 2rem;
	position: relative;
	max-width: 46rem;
	margin: 0 auto;
}

.balance-signup__form {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.5rem;
}

.balance-signup__form input[type="email"] {
	padding: 0.6rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	min-width: 16rem;
	background: rgba(255, 255, 255, 0.08);
	color: var(--balance-white);
}

.balance-signup__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.balance-signup__form input[type="email"]:focus {
	outline: none;
	border-color: var(--bal-sky-light);
	background: rgba(255, 255, 255, 0.14);
}