/*
 * Gambit Hero Block — Mobile-First
 *
 * Two modes:
 * 1. Homepage: Deep Charcoal bg, typewriter cycling headline, star reviews
 * 2. CPT: Deep Charcoal bg with background image and gradient overlay
 *
 * Homepage desktop layout kicks in at 1100px (matches nav collapse breakpoint)
 * to ensure the longest headline ("erectile dysfunction") fits on one line
 * alongside the trust stats column.
 */

/* ==========================================================================
   CPT Mode (Program / Medication pages)
   Follows PDD pattern: mobile = no card wrapper, card on image only.
   Desktop = full card with image popping out top.
   Card color alternatives: #4A2422 (softer), #3D1A16 (subtle)
   ========================================================================== */

.gambit-hero--cpt {
	position: relative;
	background-color: var(--deep-charcoal);
	padding-top: 36px;
	padding-bottom: 8px;
	overflow: visible;
}

@media (min-width: 768px) {
	.gambit-hero--cpt {
		padding-top: 56px;
	}
}

@media (min-width: 1200px) {
	.gambit-hero--cpt {
		padding-top: 72px;
		padding-bottom: 16px;
	}
}

/* ---------- Card wrapper ----------
   Mobile: no bg, no radius — plain flex column. Card bg on image only.
   Desktop: subtle dark card, overflow visible so image head pokes above. */

.gambit-hero__card {
	display: flex;
	flex-direction: column;
	background: none;
	border-radius: 0;
	overflow: visible;
}

@media (min-width: 900px) {
	.gambit-hero__card {
		background-color: #1A1218;
		background-image: radial-gradient(160% 130% at 0% 50%, rgba(196, 61, 47, 0.13), transparent 80%);
		border: 1px solid rgba(196, 61, 47, 0.20);
		border-radius: 32px;
		overflow: visible;
		min-height: 520px;
	}
}

@media (min-width: 1200px) {
	.gambit-hero__card {
		min-height: 560px;
	}
}

@media (min-width: 1400px) {
	/* 0.384 = (1.3 / 2.3) / 1.47 — scales viewport to image-column height so
	   card stays ~30px shorter than the natural image height, producing a
	   consistent pop-out at every viewport. No upper bound: the image width
	   is uncapped, so card height must follow indefinitely. */
	.gambit-hero__card {
		min-height: max(500px, calc((100vw - 64px) * 0.384 - 30px));
	}
}

/* ---------- Image ----------
   Mobile: own card bg + radius, image pokes out top via negative margin.
   Desktop: overflow visible, head pokes above card. */

.gambit-hero__card-image {
	order: 1;
	position: relative;
	overflow: visible;
	background-color: #1A1218;
	background-image: radial-gradient(120% 90% at 50% 50%, rgba(196, 61, 47, 0.13), transparent 80%);
	border: 1px solid rgba(196, 61, 47, 0.20);
	border-radius: 24px;
	min-height: 340px;
}

/* Mobile: absolutely positioned so image anchors to card bottom and
   fills the full card height + 24px overflow above, regardless of
   the image's natural aspect ratio. */
.gambit-hero__person {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(100% + 24px);
	display: block;
	object-fit: cover;
	object-position: center 15%;
}

@media (min-width: 900px) {
	.gambit-hero__card-image {
		order: 0;
		background: none;
		border: none;
		border-radius: 0;
		overflow: visible;
		min-height: auto;
	}

	/* Natural aspect — image scales to column width, card height follows. */
	.gambit-hero__person {
		position: static;
		width: 100%;
		height: auto;
		display: block;
	}
}

/* ---------- Headline group ----------
   Mobile: sits above image on page bg (order 0).
   Desktop: positioned inside right text column via grid. */

.gambit-hero__card-headline {
	order: 0;
	padding: 0;
	margin-bottom: 40px;
}

@media (min-width: 900px) {
	.gambit-hero__card-headline {
		margin-bottom: 0;
	}
}

/* ---------- Info group (subtitle, CTA, trust) ----------
   Mobile: sits below image (order 2).
   Desktop: positioned inside right text column via grid. */

.gambit-hero__card-info {
	order: 2;
	padding: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Desktop: grid structures the text column; image is absolutely positioned
   inside the card so it can overflow the card top without forcing row heights. */
@media (min-width: 900px) {
	.gambit-hero__card {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		position: relative;
		align-content: center;
	}

	.gambit-hero__card-image {
		position: absolute;
		left: 0;
		bottom: 0;
		width: calc(100% * 1.3 / 2.3);
	}

	.gambit-hero__card-headline {
		grid-column: 2;
		padding: 32px 32px 0;
	}

	.gambit-hero__card-info {
		grid-column: 2;
		padding: 0 32px 32px;
		gap: 20px;
	}
}

@media (min-width: 1200px) {
	.gambit-hero__card-headline {
		padding: 32px 48px 0;
	}

	.gambit-hero__card-info {
		padding: 0 48px 32px;
		gap: 24px;
	}
}

@media (min-width: 1400px) {
	.gambit-hero__card-headline {
		padding: 40px 56px 0;
	}

	.gambit-hero__card-info {
		padding: 0 56px 40px;
	}
}

/* Wide viewports: extra right gutter on the text column narrows the wrap
   width so the headline breaks onto two lines. Breakpoints mirror the
   .gambit-hero__title font-size steps below so padding and type scale
   together. */
@media (min-width: 1700px) {
	.gambit-hero__card-headline,
	.gambit-hero__card-info {
		padding-right: 112px;
	}
}

@media (min-width: 2200px) {
	.gambit-hero__card-headline,
	.gambit-hero__card-info {
		padding-right: 180px;
	}
}

/* ---------- Eyebrow ---------- */
.gambit-hero__eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--off-white);
	opacity: 0.65;
	margin-bottom: 12px;
}

@media (min-width: 900px) {
	.gambit-hero__eyebrow {
		font-size: 12px;
		margin-bottom: 16px;
	}
}

/* ---------- Title ----------
   Maximus: 80px desktop, 40px mobile. Ours: 36→44→64→72px. */

.gambit-hero--cpt .gambit-hero__title {
	color: var(--off-white);
	font-size: 36px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin-bottom: 10px;
}

@media (min-width: 700px) {
	.gambit-hero--cpt .gambit-hero__title {
		font-size: 44px;
		letter-spacing: -0.035em;
	}
}

@media (min-width: 1200px) {
	.gambit-hero--cpt .gambit-hero__title {
		font-size: 48px;
		margin-bottom: 10px;
	}
}

@media (min-width: 1700px) {
	.gambit-hero--cpt .gambit-hero__title {
		font-size: 56px;
	}
}

@media (min-width: 2200px) {
	.gambit-hero--cpt .gambit-hero__title {
		font-size: 64px;
	}
}

/* Italic emphasis — Signal Red like homepage cycling word */
.gambit-hero--cpt .gambit-hero__title em,
.gambit-hero--cpt .gambit-hero__title i {
	font-style: italic;
	font-weight: 500;
	color: var(--signal-red);
}

/* ---------- Subtitle ---------- */
/* Desktop: reorder so subtitle appears before CTA (HTML has CTA first for mobile) */
@media (min-width: 900px) {
	.gambit-hero--cpt .gambit-hero__subtitle { order: -2; }
	.gambit-hero--cpt .gambit-hero__trust-micro { order: 1; }
}

.gambit-hero--cpt .gambit-hero__subtitle {
	font-family: var(--font-body);
	color: var(--off-white);
	opacity: 0.7;
	font-size: 16px;
	line-height: 1.5;
	max-width: 640px;
	margin: 0;
}

@media (min-width: 900px) {
	.gambit-hero--cpt .gambit-hero__subtitle {
		font-size: 20px;
		line-height: 1.3;
		letter-spacing: -0.02em;
	}
}

@media (min-width: 1200px) {
	.gambit-hero--cpt .gambit-hero__subtitle {
		font-size: 24px;
		line-height: 1.2;
		letter-spacing: -0.04em;
	}
}

/* ---------- CTA button ---------- */
.gambit-hero--cpt .gambit-hero__cta {
	font-size: 14px;
	padding: 12px 24px;
	align-self: flex-start;
	border-radius: 50px;
}

@media (min-width: 900px) {
	.gambit-hero--cpt .gambit-hero__cta {
		font-size: 18px;
		padding: 16px 24px;
	}
}

/* ---------- Trust micro-items ---------- */
.gambit-hero__trust-micro {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.gambit-hero__trust-micro-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
	color: var(--off-white);
	opacity: 0.68;
}

@media (min-width: 900px) {
	.gambit-hero__trust-micro-item {
		font-size: 13px;
	}
}

.gambit-hero__trust-icon {
	color: var(--off-white);
	flex-shrink: 0;
}

/* ---------- Entrance animations ---------- */
.gambit-hero--cpt .gambit-hero__eyebrow {
	animation: gambit-fadein 0.5s var(--ease-out-expo) 0.1s both;
}

.gambit-hero--cpt .gambit-hero__title {
	animation: gambit-fadein 0.6s var(--ease-out-expo) 0.15s both;
}

.gambit-hero--cpt .gambit-hero__subtitle {
	animation: gambit-fadein 0.6s var(--ease-out-expo) 0.22s both;
}

.gambit-hero--cpt .gambit-hero__actions {
	animation: gambit-fadein 0.6s var(--ease-out-expo) 0.28s both;
}

.gambit-hero--cpt .gambit-hero__trust-micro {
	animation: gambit-fadein 0.5s var(--ease-out-expo) 0.35s both;
}

@media (prefers-reduced-motion: reduce) {
	.gambit-hero--cpt .gambit-hero__eyebrow,
	.gambit-hero--cpt .gambit-hero__title,
	.gambit-hero--cpt .gambit-hero__subtitle,
	.gambit-hero--cpt .gambit-hero__actions,
	.gambit-hero--cpt .gambit-hero__trust-micro {
		animation: none;
	}
}


/* ==========================================================================
   Homepage Mode — Deep Charcoal bg, typewriter headline
   ========================================================================== */

.gambit-hero--homepage {
	position: relative;
	isolation: isolate;
	background-color: var(--deep-charcoal);
	background-image:
		radial-gradient(900px 600px at 0% 0%, var(--signal-red-8), transparent 70%),
		radial-gradient(1400px 900px at 100% 100%, rgba(255, 255, 255, 0.025), transparent 60%);
	padding-top: calc(var(--top-offset) + 40px);
	padding-bottom: 24px;
}

/* Subtle grain overlay for depth — SVG fractal noise at low opacity.
   mix-blend-mode overlay keeps it visible in darks without lifting blacks.
   pointer-events:none so it never blocks clicks; -z-index sits under content. */
.gambit-hero--homepage::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.04;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
}

@media (min-width: 1100px) {
	.gambit-hero--homepage {
		padding-top: calc(var(--top-offset) + 40px);
		padding-bottom: 32px;
	}
}

/* Two-column layout: text left, trust stats right (1100px+) */
.gambit-hero__layout {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1100px) {
	.gambit-hero__layout {
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 80px;
	}
}

.gambit-hero__left {
	flex: 0 1 auto;
	max-width: 580px;
}

@media (min-width: 1100px) {
	.gambit-hero__left .gambit-hero__subtitle {
		margin-bottom: 0;
	}
}

/* Right column — hidden below 1100px, visible on desktop */
.gambit-hero__right {
	display: none;
}

@media (min-width: 1100px) {
	.gambit-hero__right {
		display: block;
		flex-shrink: 0;
		text-align: left;
	}
}

.gambit-hero__right-label {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--off-white);
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
	display: block;
}

.gambit-hero__right-stats {
	display: flex;
	align-items: center;
	gap: 24px;
}

.gambit-hero__trust-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.gambit-hero__trust-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gambit-hero__trust-top .gambit-hero__stars {
	font-size: clamp(20px, 2vw, 28px);
}

.gambit-hero__trust-value {
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.5vw, 32px);
	font-weight: 700;
	color: var(--warm-white);
	line-height: 1.1;
}

.gambit-hero__trust-label {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--off-white);
	opacity: 0.65;
}

.gambit-hero__review-divider {
	width: 1px;
	align-self: stretch;
	background-color: var(--warm-white-20, rgba(247, 245, 242, 0.2));
}

/* ==========================================================================
   Title
   ========================================================================== */

.gambit-hero__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(32px, 7vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.gambit-hero--homepage .gambit-hero__title {
	color: var(--warm-white);
}

@media (min-width: 1100px) {
	.gambit-hero__title {
		/* Scale with viewport so longest headline fits alongside trust stats.
		   At 1440px: 3.6vw = 52px. At 2000px+: clamps to 72px. Floor 40px holds
		   at the 1100px boundary so "erectile dysfunction" still fits beside the
		   trust column without wrapping. */
		font-size: clamp(40px, 3.6vw, 72px);
		letter-spacing: -0.035em;
		margin-bottom: 20px;
	}
}

/* Cycling word wrapper — always on its own line so "Get assessed for"
   stays on line 1 and the cycling word on line 2. min-height reserves
   exactly one line of space so erasing/resetting the word never causes
   a layout shift that pushes the subtitle and cards below. */
.gambit-hero__cycling-wrap {
	display: block;
	min-height: 1.08em;
	transform: scale(1);
	transform-origin: left center;
	transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Snap to a compressed state the moment a new word begins typing (class
   added by JS, then removed on the next frame). The transition above
   carries the recovery back to scale(1) with a gentle spring. */
.gambit-hero__cycling-wrap.is-typing-new {
	transform: scale(0.985);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.gambit-hero__cycling-wrap,
	.gambit-hero__cycling-wrap.is-typing-new {
		transform: none;
		transition: none;
	}
}

/* Cycling link + text — Signal Red like Maximus uses primary blue */
.gambit-hero__cycling-link {
	color: var(--signal-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-style: italic;
	transition: text-decoration-thickness 0.15s ease-out;
}

@media (hover: hover) and (pointer: fine) {
	.gambit-hero__cycling-link:hover {
		text-decoration-thickness: 3px;
	}
}

.gambit-hero__cycling-link:focus-visible {
	outline: 2px solid var(--signal-red);
	outline-offset: 3px;
	border-radius: 2px;
}

.gambit-hero__cycling-link:active {
	opacity: 0.85;
}

.gambit-hero__cycling-text {
	color: inherit;
}

/* Blinking cursor — block, not a pipe character.
   Sized to match italic cap-height of the cycling text; nudged down slightly
   via vertical-align to sit on the italic baseline. Asymmetric fade (visible
   longer than hidden) reads as a deliberate, analog blink rather than a
   digital cursor. */
.gambit-hero__cursor {
	display: inline-block;
	width: 2px;
	height: 0.85em;
	margin-left: 3px;
	vertical-align: -0.1em;
	background-color: var(--signal-red);
	animation: gambit-cursor-blink 0.8s ease-in-out infinite;
}

@keyframes gambit-cursor-blink {
	0%, 55% { opacity: 1; }
	70%, 95% { opacity: 0; }
	100% { opacity: 1; }
}

/* ==========================================================================
   Subtitle
   ========================================================================== */

.gambit-hero__subtitle {
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 1.6;
	margin: 0 0 8px;
	max-width: 60ch;
}

.gambit-hero--homepage .gambit-hero__subtitle {
	color: var(--warm-white);
	opacity: 0.8;
}

@media (min-width: 1100px) {
	.gambit-hero__subtitle {
		max-width: none;
		line-height: 1.5;
		margin-bottom: 36px;
	}
}

/* Subtitle wraps naturally within .gambit-hero__left's max-width:580px cap.
   The white-space:nowrap that was here was only valid when the left column
   used flex:1 (~900px wide). Removed when the column gained a max-width. */

/* ==========================================================================
   Actions (CTA)
   ========================================================================== */

.gambit-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

@media (min-width: 576px) {
	.gambit-hero__actions {
		flex-direction: row;
		align-items: center;
		gap: 24px;
	}
}

.gambit-hero__cta {
	font-size: clamp(15px, 2vw, 16px);
	padding: 14px 36px;
	min-height: 52px;
}

/* ==========================================================================
   Review Stars & Stats (used in hero right column)
   ========================================================================== */

.gambit-hero__stars {
	display: inline-flex;
	align-items: center;
	color: #f4b740;
	line-height: 1;
}

.gambit-hero__stars svg {
	display: block;
	width: auto;
	height: 1em;
}


/* ==========================================================================
   Entrance Animation — fade + 12px lift with settled spring easing
   ========================================================================== */

@keyframes gambit-hero-enter {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.gambit-hero--homepage .gambit-hero__title {
	animation: gambit-hero-enter 0.7s var(--ease-out-expo) both;
}

.gambit-hero--homepage .gambit-hero__subtitle {
	animation: gambit-hero-enter 0.7s var(--ease-out-expo) 0.08s both;
}

.gambit-hero--homepage .gambit-hero__right {
	animation: gambit-hero-enter 0.7s var(--ease-out-expo) 0.16s both;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.gambit-hero__cursor {
		animation: none;
		opacity: 1;
	}

	/* Disable entrance animations */
	.gambit-hero--homepage .gambit-hero__title,
	.gambit-hero--homepage .gambit-hero__subtitle,
	.gambit-hero--homepage .gambit-hero__right {
		animation: none;
	}

	/* Show static text instead of typewriter */
	.gambit-hero__cycling-text {
		/* JS will not animate; shows first word statically */
	}
}

/* ─────────────────────────────────────────────────────────
   Medication Hero (gambit-hero--med)
   Product image left, H1 + bullets + pricing card right.
   ───────────────────────────────────────────────────────── */

.gambit-hero--med {
	background: var(--deep-charcoal, #1A1A1E);
	color: var(--warm-white, #F7F5F2);
	padding-block: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 56px);
}

/* Desktop only: extra bottom padding so the hero feels taller before the next
   section. Mobile keeps the tighter original rhythm. */
@media (min-width: 901px) {
	.gambit-hero--med {
		padding-bottom: clamp(88px, 9vw, 144px);
	}
}

.gambit-hero--med .gambit-container {
	max-width: var(--hero-max-width);
}

.gambit-hero-med__crumbs {
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247, 245, 242, 0.55);
	margin-bottom: clamp(16px, 2vw, 32px);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.gambit-hero-med__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.gambit-hero-med__crumbs a:hover {
	color: var(--warm-white, #F7F5F2);
}

.gambit-hero-med__crumbs-current {
	color: var(--warm-white, #F7F5F2);
}

/* ── Layout: image | 1px divider | content ──
   Maximus: 1fr 1fr grid with 160px total gap. We insert an explicit 1px divider
   as the middle grid track and split the gap 80px/80px around it. */
.gambit-hero-med__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.22fr) 1px minmax(0, 1fr);
	column-gap: 80px;
}

.gambit-hero-med__col-divider {
	background: rgba(247, 245, 242, 0.14);
	align-self: stretch;
}

@media (max-width: 1199px) {
	.gambit-hero-med__layout {
		column-gap: 32px;
	}
}

@media (max-width: 900px) {
	.gambit-hero-med__layout {
		grid-template-columns: 1fr;
		row-gap: 12px;
	}
	.gambit-hero-med__col-divider {
		display: none;
	}
}

.gambit-hero-med__media {
	padding: 32px 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: radial-gradient(55% 50% at 28% 50%, var(--signal-red-5), transparent 70%);
}

/* When the responsive image is wrapped in <picture>, the wrapper inherits
   inline display and won't take the full column width — leaving the inner
   <img width:100%> sized to the picture's content (intrinsic). Force the
   wrapper to fill the column so the img can stretch into it. */
.gambit-hero-med__media picture {
	display: block;
	width: 100%;
}

.gambit-hero-med__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

@media (hover: hover) {
	.gambit-hero-med__image {
		transition: transform 0.6s var(--ease-out-expo);
	}
	.gambit-hero-med__media:hover .gambit-hero-med__image {
		transform: translateY(-4px);
	}
}

/* Anchors pricing card to row bottom so left/right column heights match. */
.gambit-hero-med__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding-top: 4px;
}

.gambit-hero-med__content-top,
.gambit-hero-med__content-bottom {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.gambit-hero-med__title {
	font-family: var(--font-display, "General Sans", sans-serif);
	font-size: 36px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin: 0;
	color: var(--off-white, #F7F5F2);
}

@media (min-width: 700px) {
	.gambit-hero-med__title {
		font-size: 44px;
		letter-spacing: -0.035em;
	}
}

@media (min-width: 1200px) {
	.gambit-hero-med__title {
		font-size: 48px;
	}
}

@media (min-width: 1700px) {
	.gambit-hero-med__title {
		font-size: 56px;
		letter-spacing: -0.04em;
	}
}

@media (min-width: 2200px) {
	.gambit-hero-med__title {
		font-size: 64px;
	}
}

.gambit-hero-med__subtitle {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 18px;
	line-height: 1.5;
	color: rgba(247, 245, 242, 0.78);
	margin: 0;
}

.gambit-hero-med__best-for {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(247, 245, 242, 0.9);
	padding: 20px 24px;
	background: rgba(184, 115, 51, 0.08);
	border: 1px solid rgba(184, 115, 51, 0.22);
	border-radius: 16px;
	margin: 0;
}

.gambit-hero-med__best-for-label {
	display: block;
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--warm-copper, #B87333);
	margin: 0 0 4px;
}

.gambit-hero-med__bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.gambit-hero-med__bullet {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: rgba(247, 245, 242, 0.88);
}

.gambit-hero-med__bullet-icon {
	width: 16px;
	height: 16px;
	color: var(--signal-red, #C43D2F);
	flex-shrink: 0;
	margin-top: 3px;
}

.gambit-hero-med__bullet-icon circle {
	opacity: 0.18;
}

/* ── Pricing card ── */
.gambit-hero-med__pricecard {
	background:
		linear-gradient(180deg, rgba(247, 245, 242, 0.055), rgba(247, 245, 242, 0.025));
	border: 1px solid var(--warm-white-8);
	border-radius: 16px;
	padding: 24px;
	margin: 0;
	box-shadow:
		inset 0 1px 0 var(--warm-white-6),
		0 1px 2px rgba(0, 0, 0, 0.25);
}

.gambit-hero-med__pc-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--warm-white-8);
}

.gambit-hero-med__pc-headline {
	font-family: var(--font-display, "General Sans", sans-serif);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	color: var(--warm-white, #F7F5F2);
}

.gambit-hero-med__pc-price {
	font-family: var(--font-display, "General Sans", sans-serif);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--warm-white, #F7F5F2);
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.gambit-hero-med__pc-description {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(247, 245, 242, 0.72);
	margin: 0;
}

.gambit-hero-med__pc-fineprint {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 12px;
	line-height: 1.55;
	color: rgba(247, 245, 242, 0.55);
	margin: 14px 0 20px;
}

.gambit-hero-med__pc-fineprint-star {
	flex-shrink: 0;
	color: rgba(247, 245, 242, 0.72);
	font-weight: 500;
}

.gambit-hero-med__pc-fineprint strong {
	color: rgba(247, 245, 242, 0.78);
	font-weight: 500;
}

.gambit-hero-med__pc-features {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: flex;
	align-items: stretch;
}

.gambit-hero-med__pc-feature {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 12px;
	gap: 10px;
}

.gambit-hero-med__pc-feature + .gambit-hero-med__pc-feature::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: rgba(247, 245, 242, 0.22);
}

.gambit-hero-med__pc-feature-icon {
	display: inline-flex;
	color: var(--signal-red, #C43D2F);
}

.gambit-hero-med__pc-feature-label {
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 12px;
	line-height: 1.35;
	color: rgba(247, 245, 242, 0.82);
}

.gambit-hero-med__pc-cta {
	display: inline-flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	gap: 8px;
	margin: 0;
	border-radius: 999px;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 700;
	box-shadow:
		inset 0 1px 0 var(--warm-white-8),
		0 8px 24px -10px var(--signal-red-25);
	transition:
		transform 0.25s var(--ease-out-expo),
		box-shadow 0.25s var(--ease-out-expo),
		background-color 0.2s ease;
}

.gambit-hero-med__pc-cta::after {
	content: "→";
	display: inline-block;
	font-weight: 600;
	transition: transform 0.25s var(--ease-out-expo);
}

/* Visual variant: no trailing arrow on the primary CTA (cleaner, image-led
   product hero). Clinical hero keeps the arrow as the directional affordance. */
.gambit-hero--med--visual .gambit-hero-med__pc-cta::after {
	content: none;
}

@media (hover: hover) {
	.gambit-hero-med__pc-cta:hover {
		transform: translateY(-1px);
		box-shadow:
			inset 0 1px 0 var(--warm-white-10),
			0 14px 32px -8px var(--signal-red-35);
	}
	.gambit-hero-med__pc-cta:hover::after {
		transform: translateX(4px);
	}
}

.gambit-hero-med__pc-cta:active {
	transform: translateY(0) scale(0.985);
	box-shadow:
		inset 0 1px 0 var(--warm-white-8),
		0 6px 18px -10px var(--signal-red-25);
	transition-duration: 0.1s;
}

/* Mobile: drop the extra internal padding so the image fills its column
   (keeps standard container side padding). */
@media (max-width: 900px) {
	.gambit-hero-med__media {
		padding: 0;
	}
}

/* Mobile pricing card tightening */
@media (max-width: 600px) {
	.gambit-hero-med__pricecard {
		padding: 20px;
	}
	.gambit-hero-med__pc-price {
		font-size: 28px;
	}
	.gambit-hero-med__pc-feature {
		padding: 0 4px;
		justify-content: flex-start;
	}
	.gambit-hero-med__pc-feature-label {
		font-size: 11px;
	}
}

/* ─────────────────────────────────────────────────────────
   Medication Hero — Visual variant (gambit-hero--med--visual)
   Adds: "New" pill, H2 kicker triplet, ⓘ safety link, image-card popout.
   All rules scoped to .gambit-hero--med--visual so clinical mode is untouched.
   ───────────────────────────────────────────────────────── */

/* "New" / hero tag pill — sits above H1, left-aligned.
   Reuses the .gambit-header__badge token (clinical-teal) so the brand has a
   single coherent NEW treatment across the site (nav menu, hero, etc.). */
.gambit-hero--med--visual .gambit-hero-med__tag {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-heading, "General Sans", sans-serif);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--white, #ffffff);
	background-color: var(--clinical-teal);
	border: 0;
	border-radius: 20px;
	padding: 2px 8px;
	line-height: 1.4;
	margin: 0 0 12px;
	width: fit-content;
}

/* H2 kicker triplet — period-separated noun phrases between H1 and description. */
.gambit-hero--med--visual .gambit-hero-med__kicker {
	font-family: var(--font-heading, "General Sans", sans-serif);
	font-size: clamp(20px, 2.2vw, 28px);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--warm-white, #F7F5F2);
	margin: -4px 0 16px;
}

/* Description (subtitle) on visual is a touch tighter against the kicker. */
.gambit-hero--med--visual .gambit-hero-med__subtitle {
	font-size: 17px;
	line-height: 1.55;
	color: rgba(247, 245, 242, 0.72);
}

/* Safety-info link — small underline + ⓘ icon, opens modal.
   Unscoped from `--visual` so any medication hero (clinical or visual)
   that populates `gambit_med_hero_safety_modal` renders the same link. */
.gambit-hero-med__safety-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 4px 0;
	margin: 0 0 24px;
	font-family: var(--font-body, "Inter", sans-serif);
	font-size: 12px;
	color: rgba(247, 245, 242, 0.55);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	align-self: flex-start;
	transition: color 0.15s ease;
}

.gambit-hero-med__safety-link:hover {
	color: var(--warm-white, #F7F5F2);
}

.gambit-hero-med__safety-link:focus-visible {
	outline: 2px solid var(--signal-red, #C43D2F);
	outline-offset: 3px;
	border-radius: 2px;
}

.gambit-hero-med__safety-icon {
	flex-shrink: 0;
	color: rgba(247, 245, 242, 0.55);
}

/* Right-column rhythm — Maximus uses element-specific bottom margins,
   not a uniform gap. Drop the parent gap and apply per-element margins.
   Note: __tag already sets `margin: 0 0 12px` and __kicker already sets
   `margin: -4px 0 16px` in their existing rules above; not duplicated here. */
.gambit-hero--med--visual .gambit-hero-med__content {
	gap: 0;
}

.gambit-hero--med--visual .gambit-hero-med__content-top,
.gambit-hero--med--visual .gambit-hero-med__content-bottom {
	gap: 0;
}

.gambit-hero--med--visual .gambit-hero-med__title {
	margin: 0 0 8px;
}

.gambit-hero--med--visual .gambit-hero-med__subtitle {
	margin: 0 0 32px;
}

.gambit-hero--med--visual .gambit-hero-med__bullets {
	margin: 0 0 32px;
}

.gambit-hero--med--visual .gambit-hero-med__pricecard {
	margin: 0;
}

/* Pricing-card internal compaction — tighten description→fineprint and CTA→trust gaps. */
.gambit-hero--med--visual .gambit-hero-med__pc-fineprint {
	margin: 12px 0 16px;
}

.gambit-hero--med--visual .gambit-hero-med__pc-features {
	margin: 16px 0 0;
}

/* Image column → tinted card with a small image popout.
   Image lifts above the card top edge via negative margin (Maximus pattern).
   Caption is absolutely positioned at the card bottom (NOT in normal flow). */
.gambit-hero--med--visual .gambit-hero-med__layout {
	margin-top: 96px;
	align-items: start;
}

.gambit-hero--med--visual .gambit-hero-med__media {
	/* No card surface — image sits transparent on the page background.
	   Keeps position:relative so the absolutely-positioned image-tag pill
	   still anchors to the media column. */
	border-radius: 0;
	background: none;
	padding: 0;
	min-height: 0;
	display: block;
	position: relative;
	overflow: visible;
}

.gambit-hero--med--visual .gambit-hero-med__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	object-position: left center;
	margin-top: -8px;
	margin-bottom: 64px;
	transform: scale(1.04);
	transform-origin: left center;
}

/* Image-tag pill — absolutely positioned top-left of image card.
   Solid warm-white bg + deep-charcoal text, square-ish 8px radius (a stamp,
   not a pill — Maximus uses this as a brand-authentication mark). */
.gambit-hero--med--visual .gambit-hero-med__image-tag {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
	display: inline-block;
	margin: 0;
	font-family: var(--font-heading, "General Sans", sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--deep-charcoal, #1A1A1E);
	background: var(--warm-white, #F7F5F2);
	border: 0;
	border-radius: 8px;
	padding: 4px 12px;
	line-height: 1.3;
	width: fit-content;
}

/* Image caption — heading-scale, absolutely positioned at the card bottom.
   Supports an inline <span> for italic-red accent emphasis. */
.gambit-hero--med--visual .gambit-hero-med__image-caption {
	position: absolute;
	bottom: 56px;
	left: 0;
	right: 0;
	padding: 0 24px;
	margin: 0;
	text-align: center;
	font-family: var(--font-heading, "General Sans", sans-serif);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--warm-white, #F7F5F2);
}

.gambit-hero--med--visual .gambit-hero-med__image-caption span {
	color: var(--signal-red, #C43D2F);
	font-style: italic;
	font-weight: 500;
}

/* Mobile rules for the visual variant.
   Mobile order matches Maximus exactly: image card FIRST, then tag → H1 →
   kicker → description → bullets → safety link → pricing card. Achieved by
   relying on DOM order (media is the first child of __layout), with
   display:contents on __content / __content-top / __content-bottom so their
   children flatten into the layout flex parent and follow DOM order naturally.
   Do NOT add explicit `order:` rules here — that overrides DOM order and
   pushes the image below the header (Maximus pattern is image-first on
   mobile, like the clinical hero, NOT header-first). */
@media (max-width: 900px) {
	.gambit-hero--med--visual .gambit-hero-med__layout {
		display: flex;
		flex-direction: column;
		margin-top: 56px;
	}

	/* The desktop visual rule sets `align-items: start` on the layout so the
	   image card and right column have independent natural heights inside the
	   grid. On mobile the layout flips to flex-column — `align-items: start`
	   then becomes a *horizontal* (cross-axis) alignment, which makes any
	   flex-container child shrink to content width and sit left-aligned.
	   That's why the pc-features trust row was narrower than the pricecard
	   and offset to the left of viewport center. Force it to stretch to the
	   container's width so the row sits centered within the pricecard. */
	.gambit-hero--med--visual .gambit-hero-med__pc-features {
		align-self: stretch;
	}

	.gambit-hero--med--visual .gambit-hero-med__media {
		border-radius: 0;
		padding: 0;
	}

	.gambit-hero--med--visual .gambit-hero-med__image {
		margin-top: 0;
		margin-bottom: 40px;
		transform: scale(1.02);
		transform-origin: left center;
	}

	.gambit-hero--med--visual .gambit-hero-med__image-tag {
		top: 16px;
		left: 16px;
		font-size: 9px;
		padding: 2px 8px;
		border-radius: 6px;
	}

	.gambit-hero--med--visual .gambit-hero-med__image-caption {
		bottom: 36px;
		padding: 0 16px;
		font-size: clamp(14px, 3.5vw, 16px);
	}

	.gambit-hero--med--visual .gambit-hero-med__content,
	.gambit-hero--med--visual .gambit-hero-med__content-top,
	.gambit-hero--med--visual .gambit-hero-med__content-bottom {
		display: contents;
	}
}

/* ─────────────────────────────────────────────────────────
   Light-mode overrides — fires on weight-loss / women's
   health medication and program pages via the
   `is-program-light` body class set in functions.php.
   Additive only — TRT/HGH/topical-T pages never get this
   class and render unchanged.
   ───────────────────────────────────────────────────────── */

.is-program-light .gambit-hero--med {
	background: var(--warm-white, #F7F5F2);
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-hero-med__crumbs {
	color: rgba(26, 26, 30, 0.55);
}

.is-program-light .gambit-hero-med__crumbs a:hover,
.is-program-light .gambit-hero-med__crumbs-current {
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-hero-med__col-divider {
	background: rgba(26, 26, 30, 0.14);
}

/* Title, subtitle, bullets, and any rgba(247, 245, 242, X) text surfaces
   need their alpha-ed deep-charcoal counterpart on light mode. */
.is-program-light .gambit-hero-med__title {
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-hero-med__subtitle {
	color: rgba(26, 26, 30, 0.75);
}

.is-program-light .gambit-hero-med__bullet,
.is-program-light .gambit-hero-med__bullets li {
	color: rgba(26, 26, 30, 0.85);
}

.is-program-light .gambit-hero-med__bullet-icon {
	color: var(--signal-red, #C43D2F);
}
.is-program-light .gambit-hero-med__bullet-icon circle {
	opacity: 0.18;
}

/* Pricing card — flip the warm-white tint stack to a deep-charcoal tint stack. */
.is-program-light .gambit-hero-med__pricecard {
	background:
		linear-gradient(180deg, rgba(26, 26, 30, 0.04), rgba(26, 26, 30, 0.02));
	border: 1px solid rgba(26, 26, 30, 0.10);
	box-shadow:
		inset 0 1px 0 rgba(26, 26, 30, 0.04),
		0 1px 2px rgba(0, 0, 0, 0.04);
}

.is-program-light .gambit-hero-med__pc-header {
	border-bottom: 1px solid rgba(26, 26, 30, 0.10);
}

.is-program-light .gambit-hero-med__pc-headline,
.is-program-light .gambit-hero-med__pc-price {
	color: var(--deep-charcoal, #1A1A1E);
}

.is-program-light .gambit-hero-med__pc-description {
	color: rgba(26, 26, 30, 0.72);
}

.is-program-light .gambit-hero-med__pc-fineprint {
	color: rgba(26, 26, 30, 0.55);
}
.is-program-light .gambit-hero-med__pc-fineprint-star {
	color: rgba(26, 26, 30, 0.72);
}
.is-program-light .gambit-hero-med__pc-fineprint strong {
	color: rgba(26, 26, 30, 0.78);
}

.is-program-light .gambit-hero-med__pc-feature + .gambit-hero-med__pc-feature::before {
	background: rgba(26, 26, 30, 0.22);
}

.is-program-light .gambit-hero-med__pc-feature-label {
	color: rgba(26, 26, 30, 0.82);
}

/* CTA stays signal-red — it works on both surfaces. Tighten the
   inset highlight for the lighter background so the button doesn't
   pick up a phantom warm-white edge. */
.is-program-light .gambit-hero-med__pc-cta {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 8px 24px -10px var(--signal-red-25);
}

/* No trailing arrow on light-mode (weight-loss / women's-health) pages —
   the action label is the affordance; the arrow read as redundant clutter
   against the warmer surface. Dark-mode clinical pages keep the arrow. */
.is-program-light .gambit-hero-med__pc-cta::after {
	content: none;
}

/* Safety link colors on light-mode (default colors are warm-white tints
   for dark backgrounds). */
.is-program-light .gambit-hero-med__safety-link,
.is-program-light .gambit-hero-med__safety-icon {
	color: rgba(26, 26, 30, 0.6);
}
.is-program-light .gambit-hero-med__safety-link:hover {
	color: var(--deep-charcoal, #1A1A1E);
}

/* Kill the right-column space-between justification on light-mode pages.
   Default clinical hero stretches the headline area to the top and the
   pricing card to the bottom of the column so they fill image height.
   For weight-loss / women's-health (lighter, less dense pages) we want the
   pricing card to sit naturally below the headline with a normal gap. */
.is-program-light .gambit-hero-med__content {
	justify-content: flex-start;
	gap: clamp(24px, 3vw, 40px);
}

/* Sermorelin-only: collapse the justify-between layout so the pricing card sits
   right below the bullets instead of being pushed to the column bottom. Scoped
   via the slug-based body class added by gambit_medication_body_class() so it
   never affects other medication heroes. */
body.medication-sermorelin .gambit-hero-med__content {
	justify-content: flex-start;
	gap: clamp(24px, 3vw, 40px);
}

/* Sermorelin: drop the trailing arrow on the pricing-card CTA. Other clinical
   heroes keep it; this page reads cleaner without it. */
body.medication-sermorelin .gambit-hero-med__pc-cta::after {
	content: none;
}

/* Sermorelin mobile (≤700px): hide the in-hero pricing-card CTA. The fixed
   sticky CTA bar at the bottom of the viewport carries the conversion handle
   on small screens (rendered via gambit_render_sermorelin_sticky_cta in
   inc/custom-post-types.php), so the in-card button is redundant. Mirrors
   Maximus's mobile pattern. */
@media (max-width: 700px) {
	body.medication-sermorelin .gambit-hero-med__pc-cta {
		display: none;
	}
}

/* Sermorelin mobile sticky CTA bar. Hidden on desktop. On mobile: light
   warm-white surface for contrast against the deep-charcoal hero background,
   signal-red CTA pill, fixed to the viewport bottom with iOS safe-area
   support. The 80px body padding-bottom reserves space so the last block on
   the page isn't covered when the user scrolls to the end. */
.sermorelin-sticky-cta {
	display: none;
}
@media (max-width: 700px) {
	body.medication-sermorelin .sermorelin-sticky-cta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background: var(--warm-white, #F7F5F2);
		border-top: 1px solid rgba(26, 26, 30, 0.08);
		padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
	}
	body.medication-sermorelin .sermorelin-sticky-cta__label {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-family: var(--font-mono, "JetBrains Mono", monospace);
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--deep-charcoal, #1A1A1E);
		line-height: 1.3;
	}
	body.medication-sermorelin .sermorelin-sticky-cta__category {
		opacity: 0.6;
	}
	body.medication-sermorelin .sermorelin-sticky-cta__sep {
		opacity: 0.4;
	}
	body.medication-sermorelin .sermorelin-sticky-cta__name {
		font-weight: 600;
	}
	body.medication-sermorelin .sermorelin-sticky-cta__btn {
		display: block;
		width: 100%;
		text-align: center;
		background: var(--signal-red, #C43D2F);
		color: var(--warm-white, #F7F5F2);
		padding: 14px 24px;
		border-radius: 999px;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
		box-shadow:
			inset 0 1px 0 var(--warm-white-8, rgba(247, 245, 242, 0.08)),
			0 8px 24px -10px var(--signal-red-25, rgba(196, 61, 47, 0.25));
		transition: transform 120ms ease, box-shadow 120ms ease;
	}
	body.medication-sermorelin .sermorelin-sticky-cta__btn:active {
		transform: scale(0.985);
	}
	body.medication-sermorelin {
		padding-bottom: 96px;
	}
}

/* Suppress the `gambit_med_hero_image_tag` on light-mode pages.
   Render template hardcodes a default of "Only from Gambit" if the
   field is empty — strategy doc for the dual-action page does not
   include the eyebrow tag, so hide it via CSS rather than touching
   the shared render template (which would risk topical-T). */
.is-program-light .gambit-hero-med__image-tag {
	display: none;
}

/* Sermorelin-scoped protocol bar — sits below the pale-rose ingredient-list
   section. Background matches the section above (#F8E9E5) so the bar reads
   as a continuation of the educational mode, with a subtle white border-top
   marking where the section ends and the bar begins. Mobile is hidden because
   `.sermorelin-sticky-cta` (rendered from inc/custom-post-types.php) is the
   sermorelin-specific mobile sticky CTA. */
body.medication-sermorelin .gambit-protocol-bar {
	background: #F8E9E5;
	color: var(--deep-charcoal, #1A1A1E);
	border-top: 2px solid var(--deep-charcoal, #1A1A1E);
	border-bottom: none;
	box-shadow: 0 4px 16px 0 rgba(26, 26, 30, 0.06);
}

body.medication-sermorelin .gambit-protocol-bar__label {
	color: inherit;
}

body.medication-sermorelin .gambit-protocol-bar__cta {
	background: var(--signal-red, #C43D2F);
	color: var(--warm-white, #F7F5F2);
}

body.medication-sermorelin .gambit-protocol-bar__cta:hover,
body.medication-sermorelin .gambit-protocol-bar__cta:focus-visible {
	background: #A8332A;
}

body.medication-sermorelin .gambit-protocol-bar__cta:focus-visible {
	outline-color: var(--signal-red, #C43D2F);
}

@media (max-width: 700px) {
	body.medication-sermorelin .gambit-protocol-bar {
		display: none;
	}
}


/* ==========================================================================
   Executive Health — Gambit Gold Tier
   Keeps the dark hero card bg (same as TRT/HGH dark register).
   Swaps accent (italic + CTA + border) from signal-red to Warm Copper
   (var(--warm-copper, #B87333)) — the canonical Gambit Gold token defined in theme.json,
   used by the gold-upsell block and homepage gold-teaser. Brand-coherent
   with all existing Gambit Gold surfaces.
   ========================================================================== */

/* Desktop only — base CSS keeps .gambit-hero__card transparent on mobile
   (background:none + no border). Apply gold treatment ONLY at 900px+ to
   match the base media-query break and avoid drawing a gold rectangle
   behind the hero on mobile (which TRT/HGH don't have either). */
@media (min-width: 900px) {
	body.postname-executive-health .gambit-hero__card {
		background-color: #140C06;
		background-image: radial-gradient(160% 130% at 0% 50%, rgba(184, 115, 51, 0.13), transparent 80%);
		border-color: rgba(184, 115, 51, 0.20);
	}
}

body.postname-executive-health .gambit-hero--cpt .gambit-hero__title em,
body.postname-executive-health .gambit-hero--cpt .gambit-hero__title i {
	color: var(--warm-copper, #B87333);
}

body.postname-executive-health .gambit-hero__cta,
body.postname-executive-health .gambit-hero--cpt .gambit-btn--primary {
	background-color: var(--warm-copper, #B87333);
	color: #1A1A1E;
}

body.postname-executive-health .gambit-hero__cta:hover,
body.postname-executive-health .gambit-hero--cpt .gambit-btn--primary:hover,
body.postname-executive-health .gambit-hero__cta:focus-visible,
body.postname-executive-health .gambit-hero--cpt .gambit-btn--primary:focus-visible {
	background-color: #A0632B;
	color: #1A1A1E;
}