.gambit-lsb {
	padding-block: clamp(40px, 5vw, 80px);
	background: var(--warm-white, #F7F5F2);
}

.gambit-lsb__inner {
	width: 100%;
}

.gambit-lsb__figure {
	position: relative;
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--deep-charcoal, #1A1A1E);
}

@media (max-width: 900px) {
	.gambit-lsb__figure {
		aspect-ratio: 4 / 5;
	}
}

.gambit-lsb__image,
.gambit-lsb__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gambit-lsb__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(26, 26, 30, 0.55) 0%,
		rgba(26, 26, 30, 0.15) 45%,
		rgba(26, 26, 30, 0) 70%
	);
	pointer-events: none;
}

.gambit-lsb__caption {
	position: absolute;
	z-index: 2;
	max-width: min(640px, 55%);
	color: var(--warm-white, #F7F5F2);
	padding: 40px;
}

@media (max-width: 900px) {
	.gambit-lsb__caption {
		max-width: 80%;
		padding: 24px;
	}
}

.gambit-lsb--left-bottom .gambit-lsb__caption { left: 2%; bottom: 6%; }
.gambit-lsb--left-top .gambit-lsb__caption { left: 2%; top: 6%; }
.gambit-lsb--right-bottom .gambit-lsb__caption { right: 2%; bottom: 6%; text-align: right; }
.gambit-lsb--right-top .gambit-lsb__caption { right: 2%; top: 6%; text-align: right; }
.gambit-lsb--center .gambit-lsb__caption { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 70%; }

.gambit-lsb--left-bottom .gambit-lsb__overlay,
.gambit-lsb--left-top .gambit-lsb__overlay {
	background: linear-gradient(135deg, rgba(26,26,30,0.6) 0%, rgba(26,26,30,0.15) 50%, rgba(26,26,30,0) 80%);
}

.gambit-lsb--right-bottom .gambit-lsb__overlay,
.gambit-lsb--right-top .gambit-lsb__overlay {
	background: linear-gradient(-135deg, rgba(26,26,30,0.6) 0%, rgba(26,26,30,0.15) 50%, rgba(26,26,30,0) 80%);
}

.gambit-lsb--center .gambit-lsb__overlay {
	background: linear-gradient(180deg, rgba(26,26,30,0.35) 0%, rgba(26,26,30,0.45) 100%);
}

.gambit-lsb__headline {
	font-family: var(--font-display, "General Sans", sans-serif);
	font-weight: 700;
	font-size: clamp(28px, 4.5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.gambit-lsb__subcopy {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.5;
	margin: 0;
	opacity: 0.9;
}

/* ==========================================================================
   Popout variant — dark card with a transparent-cutout image that pops
   above the card top (Maximus "Apply one dose" pattern).

   Mirrors Maximus's exact CSS values:
     text:  width 40%, max-width 644px, margin-left 128px
     image: width 60%, align-self: flex-end, top: -92px, margin-bottom: -92px
   The card itself uses Gambit's dark theme instead of Maximus's light gray.
   ========================================================================== */

.gambit-lsb--style-popout {
	background: var(--deep-charcoal, #1A1A1E);
	padding-block: clamp(56px, 7vw, 112px);
}

.gambit-lsb--style-popout .gambit-lsb__inner {
	max-width: none;
	padding-left: clamp(16px, 2vw, 32px);
	padding-right: clamp(16px, 2vw, 32px);
}

/* Mobile (default): card structure dissolves visually — copy + CTA sit on the
   page background, image alone gets the dark card treatment. Desktop rules
   below restore the Maximus popout card. */
.gambit-lsb__card {
	position: relative;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 4vw, 32px);
	background: transparent;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}

/* Mobile: dissolve the copy wrapper so headline/subcopy/inline-CTA become
   direct flex children of the card and can be reordered around the image. */
.gambit-lsb__card-copy {
	display: contents;
}

.gambit-lsb--style-popout .gambit-lsb__headline {
	order: 1;
	font-family: var(--font-display, "General Sans", sans-serif);
	font-weight: 600;
	font-size: clamp(32px, 3.6vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: #FFFFFF;
}

.gambit-lsb--style-popout .gambit-lsb__headline em {
	color: var(--signal-red);
	font-style: italic;
	font-weight: 500;
}

.gambit-lsb--style-popout .gambit-lsb__subcopy {
	order: 3;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	opacity: 1;
}

/* Section 5 ("first-of-its-kind") bullet list. Order 3.5 places bullets between the
   subcopy and the inline CTA on desktop. On mobile the card-copy uses display:contents
   so each bullet group still flows in source order between subcopy and CTA. */
.gambit-lsb--style-popout .gambit-lsb__bullets {
	order: 3;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gambit-lsb--style-popout .gambit-lsb__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.gambit-lsb--style-popout .gambit-lsb__bullet-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--signal-red, #C43D2F);
	margin-top: 2px;
}

.gambit-lsb__card-image {
	order: 2;
	/* Margin-top compensates for the img's negative margin popup so the head
	   that escapes the card top has breathing room below the copy above. */
	margin: clamp(64px, 8vw, 96px) 0 0;
	background: linear-gradient(180deg, #242B36 0%, #1A2028 100%);
	border: 1px solid var(--warm-white-8);
	border-radius: 24px;
	overflow: visible;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 16px 40px -20px rgba(0, 0, 0, 0.4);
}

.gambit-lsb__card-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	/* Image pops above the card top — same pattern as product-deep-dive mobile. */
	margin-top: clamp(-96px, -8vw, -56px);
}

/* CTA visibility — mobile shows the bottom variant, desktop shows the inline one.
   Scoped under .gambit-lsb__card to outweigh the global .gambit-btn { display: inline-flex }. */
.gambit-lsb__card .gambit-lsb__cta--inline {
	display: none;
}

.gambit-lsb__card .gambit-lsb__cta--mobile-bottom {
	display: flex;
	order: 4;
	align-self: stretch;
}

@media (min-width: 1100px) {
	/* Desktop: Maximus banner pattern.
	   Card has the dark surface, radial gradient, shadow, and visible overflow
	   so the cutout image can pop above the card top. */
	.gambit-lsb__card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0;
		background: linear-gradient(180deg, #242B36 0%, #1A2028 100%);
		border: 1px solid var(--warm-white-8);
		border-radius: 32px;
		overflow: visible;
		isolation: isolate;
		min-height: clamp(360px, 28vw, 480px);
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.04) inset,
			0 40px 80px -40px rgba(0, 0, 0, 0.6),
			0 16px 40px -20px rgba(0, 0, 0, 0.4);
	}

	.gambit-lsb__card::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
		border-radius: inherit;
		background: none;
	}

	.gambit-lsb__card-copy {
		display: block;
		flex: 0 0 auto;
		width: 40%;
		max-width: 644px;
		margin-left: clamp(64px, 9vw, 128px);
	}

	.gambit-lsb--style-popout .gambit-lsb__headline {
		margin: 0 0 20px;
	}

	.gambit-lsb__card-image {
		flex: 0 0 auto;
		width: 60%;
		align-self: flex-end;
		position: relative;
		top: -92px;
		margin: 0 0 -92px;
		background: transparent;
		border: none;
		border-radius: 0;
		overflow: visible;
		box-shadow: none;
	}

	.gambit-lsb__card-image img {
		margin-top: 0;
	}

	.gambit-lsb__card .gambit-lsb__cta--inline {
		display: inline-flex;
		margin-top: clamp(20px, 2vw, 32px);
	}

	.gambit-lsb__card .gambit-lsb__cta--mobile-bottom {
		display: none;
	}
}

@media (min-width: 1400px) {
	.gambit-lsb__card-image {
		top: -120px;
		margin-bottom: -120px;
	}
}

/* Image-left orientation for the visual-product-page Section 5 ("first-of-its-kind") —
   matches the Maximus reference (image left, copy right). Opt-in via the
   .gambit-lsb--image-left modifier, which render.php applies only for medications on
   the visual hero variant. Mobile order is unchanged (headline → image → subcopy → CTA). */
/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 5 (image-left variant) MOBILE CONTENT ORDER.
   Maximus mobile DOM: headline → subhead → image → bullets → CTAs. Gambit's
   default popout mobile order is headline → image → subcopy → CTA (matches TT's
   intentional pattern in POPOUT-CARDS.md). For Section 5 we override the order
   to match Maximus, scoped to .gambit-lsb--image-left so TT's mobile order
   stays unchanged.
   These rules apply on all viewports, but on desktop (≥1100) the copy block is
   a single flex child (display:block) so the inner order is determined by DOM
   sequence, not by the `order` property — these rules only have visible effect
   on mobile where card-copy uses display:contents and headline/subcopy/bullets
   become direct flex children of the card.
   ───────────────────────────────────────────────────────────────────────────── */
.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__subcopy {
	order: 2;
}
.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card-image {
	order: 3;
}

/* Mobile only — apply the same red-wash treatment to the visible card on mobile
   (the image-card wrapper, which carries the surface when the outer card dissolves).
   On desktop ≥1100px the image-card resets to transparent (the outer card takes over),
   so this rule must be scoped to ≤1099. */
@media (max-width: 1099px) {
	.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card-image {
		background:
			radial-gradient(120% 90% at 50% 50%, rgba(196, 61, 47, 0.13), transparent 80%),
			#1A1218;
		border: 1px solid rgba(196, 61, 47, 0.20);
	}
}
.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__bullets {
	order: 4;
}
.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card .gambit-lsb__cta--mobile-bottom {
	order: 5;
}

@media (min-width: 1100px) {
	/* Section 5 card color treatment (Option A diffuse — see VISUAL-PRODUCT-PAGE.md Section 5).
	   Maximus uses a soft tint of their brand-primary blue (#bacee0 on white) to flag this
	   as the "rational-justification card." Gambit ports the strategy with a dark surface
	   tinted with signal-red — same psychological function (deliberate shift, brand-
	   belonging, calm decision-time), inverted into the dark theme.
	   Diffuse params chosen to push the gradient transition off-card (origin at 0% 50%,
	   160%×130% size, 80% transparent falloff) so the visible wash reads as ambient
	   atmosphere rather than a spotlight band. Scoped to image-left so the legacy
	   popout (TT, etc.) keeps its neutral dark surface. */
	/* `padding-right` (not margin-right on the copy) is what gives the right edge
	   breathing room. With flex-direction: row, gap: 0, and child widths summing
	   to 100% (image 55% + copy 45%), margin-right on copy overflows the container
	   instead of pulling content inward — at 1920px the copy text ended ~1px from
	   the card's right edge. Padding on the card shrinks the flex content-box so
	   percentage widths re-calculate inside the padded area. Maximus's reference
	   value is 64px; bumped the cap to 96px because at 1080p+ the wider card needs
	   more breathing room than Maximus's max-width-1600 layout did. */
	.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card {
		background:
			radial-gradient(160% 130% at 0% 50%, rgba(196, 61, 47, 0.13), transparent 80%),
			#1A1218;
		border: 1px solid rgba(196, 61, 47, 0.20);
		padding-right: clamp(32px, 4vw, 96px);
	}
	/* Reset the legacy blue+red dual radial gradient on this variant — replaced above. */
	.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card::before {
		background: none;
	}

	/* Desktop: image moves to the left (order: -1 wins over the mobile `order: 3` above
	   because this rule comes later in the cascade). */
	.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card-image {
		order: -1;
		width: 55%;
	}

	/* CRITICAL: max-width must be unset on this variant. The default popout has
	   `max-width: 644px` which clamps the copy column on viewports ≥ ~1430px — at 2560p
	   our column gets stuck at 644px while Maximus's scales to 934px+. Setting `none`
	   lets width:45% scale linearly with viewport, matching Maximus's behavior.
	   `margin-inline: 0` zeros both sides because the card's `padding-right` (above)
	   now governs right-edge spacing, and the card-copy is the rightmost flex child.
	   See VISUAL-PRODUCT-PAGE.md Section 5 rule 3. */
	.gambit-lsb--style-popout.gambit-lsb--image-left .gambit-lsb__card-copy {
		width: 45%;
		max-width: none;
		margin-inline: 0;
	}
}

/* Section padding compensates for the popped-out image overflow above the card.
   ─────────────────────────────────────────────────────────────────────────────
   FORMULA: padding-top must be ≥ image_overflow + breathing_room.
   • image_overflow = abs(.gambit-lsb__card-image top) — currently 92px (≥1100)
     and 120px (≥1400). When you tune the popout height, update both numbers.
   • breathing_room = visual gap between previous section's bottom edge and the
     popped head's top. Maximus uses ~63px; we use ~95px because Gambit's denser
     dark theme makes a tighter gap read as crowded.
   .gambit-section default at ≥1400 sets padding-top: 128px (in global.css), which
   leaves only 8px of breathing room (128 − 120). This rule pairs both classes
   to win the cascade against the global utility.
   ───────────────────────────────────────────────────────────────────────────── */
/* Desktop only — mobile keeps the global .gambit-section padding (40–64px) because
   the image-card on mobile uses its own margin-top for breathing room, not the
   section padding. Wrapping in @media (min-width: 1100px) prevents the 160px-min
   padding regression on mobile. */
@media (min-width: 1100px) {
	.gambit-section.gambit-lsb--style-popout {
		padding-top: clamp(160px, 15vw, 220px);
		padding-bottom: clamp(64px, 8vw, 128px);
	}
}

/* ==========================================================================
   Columns variant — 50/50 floating image (left) + content (right). Same
   2-col scaffolding as popout, with the dark card and the negative-margin
   image lift removed. Used by the visual product page Section 7 ("When
   you'll feel it" outcome timeline). See VISUAL-PRODUCT-PAGE.md Section 7.
   ========================================================================== */

.gambit-lsb--style-columns {
	background: var(--deep-charcoal, #1A1A1E);
	color: var(--warm-white, #F7F5F2);
}

.gambit-lsb--style-columns .gambit-lsb__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 5vw, 48px);
	align-items: center;
}

.gambit-lsb--style-columns .gambit-lsb__columns-image {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

.gambit-lsb--style-columns .gambit-lsb__columns-image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: contain;
	/* drop-shadow follows the transparent-cutout silhouette, not a rectangle.
	   Layered: heavy ground shadow + soft red-tinted glow to match the hero. */
	filter:
		drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45))
		drop-shadow(0 0 64px rgba(196, 61, 47, 0.18));
}

.gambit-lsb--style-columns .gambit-lsb__columns-copy {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 24px);
}

.gambit-lsb--style-columns .gambit-lsb__headline {
	color: var(--warm-white, #F7F5F2);
	margin: 0;
}

.gambit-lsb--style-columns .gambit-lsb__subcopy {
	color: rgba(247, 245, 242, 0.78);
	margin: 0;
	opacity: 1;
}

/* Reuse the popout bullet styling (checkmark in signal-red, 18px text, 12px gap)
   on the columns variant — same visual language, different scaffolding. */
.gambit-lsb--style-columns .gambit-lsb__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gambit-lsb--style-columns .gambit-lsb__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.5;
	color: rgba(247, 245, 242, 0.88);
}

.gambit-lsb--style-columns .gambit-lsb__bullet-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--signal-red, #C43D2F);
	margin-top: 2px;
}

.gambit-lsb--style-columns .gambit-lsb__cta--inline {
	display: inline-flex;
	align-self: flex-start;
	margin-top: clamp(8px, 1.5vw, 16px);
}

@media (min-width: 1024px) {
	.gambit-lsb--style-columns .gambit-lsb__columns {
		grid-template-columns: 1fr 1fr;
		gap: clamp(48px, 6vw, 96px);
	}

	.gambit-lsb--style-columns .gambit-lsb__columns-image img {
		max-height: 560px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   Light-mode OVERLAY full-bleed (weight-loss / women's-health Section 3).
   Maps to Maximus's "The better way to lose weight" treatment: edge-to-edge
   lifestyle photo, no gutters, no rounded corners. Copy block (headline +
   bullets + CTA) sits inside a 1600px max-width inner container that's
   centered horizontally — exactly Maximus's `width:1600px; max-width:92%`
   pattern — so copy doesn't sit flush to the viewport edge.

   Maximus exact values (from .life--28bd4 / .wrap--269fd / .title--055d3 /
   .benefits--9fded in the saved tirzepatide HTML):
     section padding:  96px 0
     wrap:             width:1600px; max-width:92%; margin:0 auto
     headline:         64px / 72px / -2.56px tracking, max-width:525px
     bullets:          20px / 32px, gap:8px, margin:32px 0, max-width:525px

   Gambit overrides Maximus's white pill CTA with signal-red (brand rule).
   Scoped to .is-program-light so dark-mode overlay pages (HGH posts 28/163)
   keep the existing constrained-card overlay treatment.
   ───────────────────────────────────────────────────────────────────────────── */
.is-program-light .gambit-lsb--style-overlay {
	padding-block: 0;
	background: transparent;
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__inner {
	max-width: none;
	padding: 0;
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__figure {
	border-radius: 0;
	aspect-ratio: auto;
	min-height: 100vh;
}

@media (max-width: 900px) {
	.is-program-light .gambit-lsb--style-overlay {
		padding-block: 16px;
	}

	.is-program-light .gambit-lsb--style-overlay .gambit-lsb__figure {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}
}

/* Caption: vertically centered, anchored to the left edge of a virtual 1600px
   container. `max(32px, calc(50vw - 800px))` resolves to 32px on narrow
   viewports and to (50vw - 800px) on wide viewports — i.e. it sits at the
   1600px container's left edge regardless of viewport width. Mirrors Maximus's
   `wrap{width:1600px; max-width:92%; margin:0 auto}` pattern. */
.is-program-light .gambit-lsb--style-overlay .gambit-lsb__caption {
	left: max(32px, calc(50vw - 800px));
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	max-width: 525px;
	width: 92%;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	color: var(--warm-white, #F7F5F2);
	text-align: left;
}

/* Mobile: caption stretches the full height of the photo card so the headline
   anchors to the top and the bullets anchor to the bottom (matching Maximus's
   `margin-bottom: 256px` trick, but done with flex space-between so it scales
   with content). CTA is hidden on mobile — Maximus's reference does the same.
   Inset values mirror Maximus's mobile internal padding (32px top / 24px sides
   / 32px bottom). */
@media (max-width: 900px) {
	.is-program-light .gambit-lsb--style-overlay .gambit-lsb__caption {
		left: 24px;
		right: 24px;
		top: 32px;
		bottom: 32px;
		transform: none;
		max-width: none;
		width: auto;
		gap: 20px;
		justify-content: space-between;
	}

	.is-program-light .gambit-lsb--style-overlay .gambit-lsb__headline {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: -0.05em;
	}

	.is-program-light .gambit-lsb--style-overlay .gambit-lsb__bullet {
		font-size: 14px;
		line-height: 20px;
	}

	.is-program-light .gambit-lsb--style-overlay .gambit-lsb__cta--inline {
		display: none;
	}
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__headline {
	font-family: var(--font-display, "General Sans", sans-serif);
	font-size: clamp(40px, 4.4vw, 64px);
	line-height: 1.125;
	letter-spacing: -0.04em;
	font-weight: 700;
	margin: 0;
	color: var(--warm-white, #F7F5F2);
	max-width: 525px;
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 525px;
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.6;
	color: rgba(247, 245, 242, 0.95);
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__bullet-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--signal-red, #C43D2F);
	margin-top: 4px;
}

.is-program-light .gambit-lsb--style-overlay .gambit-lsb__cta--inline {
	align-self: flex-start;
	margin-top: 0;
}

/* Stronger left-anchored scrim so white copy stays legible against the
   bright lifestyle photo. Default left-bottom/left-top scrims only fade to
   ~60% opacity; light-mode full-bleed needs a deeper anchor that also
   feathers further right (the Maximus reference shows the scrim reaching
   roughly 50% across before fully clearing). */
.is-program-light .gambit-lsb--style-overlay.gambit-lsb--left-top .gambit-lsb__overlay,
.is-program-light .gambit-lsb--style-overlay.gambit-lsb--left-bottom .gambit-lsb__overlay {
	background: linear-gradient(
		90deg,
		rgba(26, 26, 30, 0.72) 0%,
		rgba(26, 26, 30, 0.55) 30%,
		rgba(26, 26, 30, 0.20) 55%,
		rgba(26, 26, 30, 0) 80%
	);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Light-mode COLUMNS variant (kept for any future page that wants the
   constrained side-by-side treatment instead of full-bleed). Not used by
   Section 3 of the Dual-Action GLP-1 Pen page (which uses overlay above).
   ───────────────────────────────────────────────────────────────────────────── */
.is-program-light .gambit-lsb--style-columns {
	background: var(--warm-white, #F7F5F2);
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-lsb--style-columns .gambit-lsb__columns-image img {
	max-height: none;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	border-radius: 24px;
	filter: none;
	box-shadow: 0 24px 48px rgba(26, 26, 30, 0.10);
}

.is-program-light .gambit-lsb--style-columns .gambit-lsb__headline {
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-lsb--style-columns .gambit-lsb__subcopy {
	color: rgba(26, 26, 30, 0.72);
}

.is-program-light .gambit-lsb--style-columns .gambit-lsb__bullet {
	color: rgba(26, 26, 30, 0.82);
}

@media (min-width: 1024px) {
	.is-program-light .gambit-lsb--style-columns .gambit-lsb__columns-image img {
		max-height: 640px;
	}
}

/* ── Sermorelin trust block — full-bleed Maximus-faithful override ───────────
   Maximus's `.style-module--info1--50e00` is full-bleed, 100vh tall, no
   border-radius, no side gutters. Scoped to body.postname-sermorelin so the
   default contained overlay variant is unaffected for other medications. */
body.postname-sermorelin .gambit-lsb--style-overlay {
	padding-block: 0;
	background: var(--deep-charcoal, #1A1A1E);
}

body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__inner {
	max-width: none;
	padding-inline: 0;
}

body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__figure {
	border-radius: 0;
	aspect-ratio: auto;
	height: 100vh;
	min-height: 600px;
}

/* Override the diagonal scrim — on this image the bottom-left (where the text sits)
   has light-coloured lab-coat detail, which makes the bullets blend in. Use a
   left-heavy horizontal gradient so the entire text column has a consistent dark
   wash regardless of vertical position. */
body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__overlay {
	background: linear-gradient(
		90deg,
		rgba(26, 26, 30, 0.78) 0%,
		rgba(26, 26, 30, 0.55) 35%,
		rgba(26, 26, 30, 0.2) 65%,
		rgba(26, 26, 30, 0) 100%
	);
}

@media (max-width: 1100px) {
	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__figure {
		height: auto;
		min-height: 640px;
		aspect-ratio: 16 / 11;
	}
}

@media (max-width: 700px) {
	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__figure {
		aspect-ratio: 3 / 4;
		min-height: 560px;
	}
}

/* Women's-health overlay banner: wider copy column. The default 525px max-width
   is Maximus's weight-loss number; women's-health bullets read longer ("Bloodwork-
   tested every step — never symptom-only prescribing") and clamp awkwardly.
   Scoped to the condition body class so every womens-health medication page
   (estrogen-patch, progesterone-capsule, testosterone-cream, future) inherits. */
.medication-condition-womens-health .gambit-lsb--style-overlay .gambit-lsb__caption,
.medication-condition-womens-health .gambit-lsb--style-overlay .gambit-lsb__headline,
.medication-condition-womens-health .gambit-lsb--style-overlay .gambit-lsb__bullets {
	max-width: 640px;
}

/* Caption fills the entire figure so the 1600px Gambit container can drive
   horizontal alignment with the rest of the page. Vertical layout matches
   Maximus: desktop = group vertically centered with a 128px gap below the
   headline; mobile = headline pinned top, bullets+CTA pushed to the bottom. */
body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__caption {
	inset: 0;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-block: clamp(64px, 10vh, 128px);
	padding-inline: max(var(--side-padding, 24px), calc((100% - 1600px) / 2));
}

body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__headline {
	font-size: clamp(36px, 4.5vw, 64px);
	font-weight: 600;
	letter-spacing: -0.025em;
	margin-bottom: 128px;
	max-width: 790px;
}

body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__bullets {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	max-width: 790px;
}

body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 18px;
	line-height: 1.5;
	color: var(--warm-white, #F7F5F2);
}

/* Lock the check icon at 20px — without flex-shrink:0 the SVG gets squeezed by long
   text, which shifts the text-start position between bullets and looks misaligned
   on narrow viewports. Same fix applies on desktop and mobile. */
body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__bullet-icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 4px;
}

/* Mobile: switch to top/bottom anchoring — headline at top, bullets+CTA at bottom.
   `margin-top: auto` on the bullets pushes the bullets+CTA group to the bottom,
   while the headline stays at the top because nothing pushes it down. Mirrors
   Maximus's mobile breakpoint behaviour (title margin 0, benefits margin 106px 0 0). */
@media (max-width: 900px) {
	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__caption {
		justify-content: flex-start;
		padding-block: clamp(32px, 6vh, 64px);
		padding-inline: 24px;
	}

	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__headline {
		margin-bottom: 0;
	}

	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__bullets {
		margin-top: auto;
	}

	body.postname-sermorelin .gambit-lsb--style-overlay .gambit-lsb__bullet {
		font-size: 16px;
	}
}