/**
 * OpenLoop — Landing Page (Dark) overrides.
 *
 * Layered over blades.css (body.ol-dark only). The dark design keeps most of the
 * page light and identical to the standard landing template; only three sections
 * go dark: the HERO, the PROGRAMS picker, and the TESTIMONIALS block. Everything
 * is scoped under `.ol-dark` so the same blades render light on the standard
 * template and dark here — no per-blade config required.
 *
 * See MEMORY: dark-landing-template.
 */

/* =========================================================================
   HEADER — dark plum bar (matches the hero) with a white logo.
   ====================================================================== */
.ol-dark .ol-lp-header {
	/* Solid black bar. */
	background: #000000;
}
.ol-dark .ol-lp-header__img { filter: brightness(0) invert(1); }

/* =========================================================================
   HERO — near-black with a magenta glow; white copy; dark form panel.
   Forced dark regardless of the blade's background setting.
   ====================================================================== */
.ol-dark .ol-hero {
	/* Dark-template hero: the "Hero (dark)" radial, applied uniformly (the dark
	   template's hero is a single treatment, not per-page gradient-driven). !important
	   beats the inline background-image art the blade carries from the light template.
	   Per-page exceptions use a higher-specificity override (see page 320 below). */
	background-image:
		radial-gradient(135% 115% at 62% 118%, #e90153 0%, #a3044f 26%, #45091f 58%, #0b0206 100%) !important;
	background-color: #040202 !important;
	color: #fff;
}
/* Peptides page (ID 320) — custom hero gradient per request. Higher specificity
   + !important to beat the .ol-dark .ol-hero background above and the blade's
   inline background-image. */
body.page-id-320.ol-dark .ol-hero {
	background: linear-gradient(160deg, #040303 42.4%, #8A0248 83.95%, #E90153 105.94%) !important;
}
/* Undo the light-background heading/subtext colours if the blade happens to be
   set to image/light — dark hero is always light-on-dark. */
.ol-dark .ol-hero.ol-on-light .ol-hero__heading,
.ol-dark .ol-hero .ol-hero__heading { color: #fff; }
.ol-dark .ol-hero.ol-on-light .ol-hero__subtext,
.ol-dark .ol-hero__subtext { color: #cbb9c1; }
/* Hero copy is rich text and may carry a baked inline colour (e.g. the light
   template's black) — force legible light copy on dark. Markup spans
   (.ol-em/.ol-pink/.ol-white) keep their intended colour. */
.ol-dark .ol-hero__subtext p,
.ol-dark .ol-hero__subtext span:not([class]) { color: #cbb9c1 !important; }
.ol-dark .ol-hero.ol-on-light .ol-hero__eyebrow,
.ol-dark .ol-hero__eyebrow { color: rgba(255, 255, 255, .85); }

/* Hero emphasis is pink italic in this design (the global hero rule forces it
   upright; re-enable italic on dark). */
.ol-dark .ol-hero__heading .ol-em { font-style: italic; }

/* Hero pill strip — eyebrow + row of dark pills (BPC-157, TB-500, …). */
.ol-dark .ol-hero__pillstrip { margin-top: clamp(28px, 3vw, 44px); }
.ol-dark .ol-hero__pills-eyebrow {
	margin: 0 0 16px;
	font-family: Inter, sans-serif;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #ff5c8a;
}
.ol-dark .ol-hero__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 520px;
}
.ol-dark .ol-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border: 1px solid rgba(238, 29, 82, .55);
	border-radius: 999px;
	background: rgba(255, 255, 255, .03);
	color: #fff;
	font-family: 'Archivo', sans-serif;
	font-weight: 500;
	font-size: .95rem;
}
.ol-dark .ol-hero__pill::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ff5c8a;
	flex: 0 0 auto;
}

/* Primary (pink) buttons keep white label even inside media/text sections. */
.ol-dark .ol-media-text__actions .ol-btn--primary { background: var(--ol-pink); color: #fff; }

/* Stat bar — magenta→near-black gradient per the design (heading left, stats
   fade into dark on the right). */
.ol-dark .ol-stat-bar__card {
	background: linear-gradient(96deg, #e90153 0%, #c30d54 26%, #66102f 58%, #1c0510 100%) !important;
}

/* How it works — cards stay white; only the illustration panel goes dark so the
   pink line-art illustrations read (matches Figma). Eyebrow is pink. */
.ol-dark .ol-steps .ol-eyebrow { color: #e90153; }
.ol-dark .ol-steps .ol-section__heading { color: #1f1f1f; }
.ol-dark .ol-steps .ol-step__media {
	background: radial-gradient(120% 120% at 50% 0%, #3a0a1e 0%, #1a0410 55%, #0b0206 100%);
}

/* Breathing room between the hero and the first section below it. */
.ol-dark .ol-hero + .ol-media-text,
.ol-dark .ol-hero + .ol-media-why { padding-top: clamp(72px, 8vw, 130px); }

/* Full-width media/text disclaimer — spans the whole section (container) width. */
.ol-dark .ol-media-text__disclaimer--full { text-align: center; max-width: none; margin-left: 0; margin-right: 0; }

/* Standalone demand section: standard section padding (the media/text base uses a
   tight 22px that looks cramped between the full logos + how-it-works sections). */
.ol-dark .ol-media-text--media_why { padding-block: clamp(48px, 6vw, 88px); }

/* Blurry red glow behind the media images in the alternating text/media rows. */
.ol-dark .ol-media-text__media { position: relative; }
.ol-dark .ol-media-text__media::before {
	content: "";
	position: absolute;
	inset: -8% -6%;
	background: radial-gradient(closest-side, rgba(233, 1, 83, .55), rgba(233, 1, 83, 0) 72%);
	filter: blur(50px);
	z-index: 0;
	pointer-events: none;
}
.ol-dark .ol-media-text__media > * { position: relative; z-index: 1; }

/* CTA slides up so its rounded top corners reveal the dark testimonials bg.
   Fixed padding-bottom (not clamp) so the gap between the rating badges and the
   CTA stays consistent on tablet/mobile, not just desktop: gap = 132 - 60 = 72. */
.ol-dark .ol-testimonials { padding-bottom: 132px; }
.ol-dark .ol-cta-banner {
	position: relative;
	z-index: 2;
	margin-top: calc(-60px + var(--ol-cta-gap, 0px)); /* tuck + optional top-gap */
	border-top-left-radius: clamp(28px, 3.6vw, 52px);
	border-top-right-radius: clamp(28px, 3.6vw, 52px);
	overflow: hidden;
}

/* FAQ uses the theme's built-in dark "brand gradient" background (set on the
   blade), so no dark-specific overrides are needed here. */

/* Eyebrows on the light sections should be the standard brand red, not the
   theme's default near-black (base rule sets #1f1f1f). Dark-bg sections
   (compliance, faq) keep their own white eyebrow rules. */
.ol-dark .ol-logos .ol-eyebrow,
.ol-dark .ol-media-text .ol-eyebrow,
.ol-dark .ol-hiw .ol-eyebrow,
.ol-dark .ol-hiw .ol-eyebrow--pink { color: var(--ol-pink); }

/* Form panel — subtle dark plum card behind the lead form. Plain opaque fill;
   when a flashlight glow is enabled, form-flash.js lifts this onto a contained
   ::before so the glow can halo the edges. With glow off, this is just the card. */
.ol-dark .ol-hero__aside {
	position: relative;
	background: rgba(72, 16, 44, .9);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	padding: clamp(20px, 2.2vw, 32px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.ol-dark .ol-hero__form-placeholder-title { color: #fff; }
.ol-dark .ol-hero__form-placeholder-text { color: #cbb9c1; }

/* PROGRAMS stays light on the dark template (white tiles, pink glyphs) per the
   current design — it uses the base theme styling, no dark overrides. */

/* =========================================================================
   TESTIMONIALS — deep plum block, translucent glass cards, white copy.
   ====================================================================== */
.ol-dark .ol-testimonials {
	background:
		radial-gradient(120% 100% at 50% 100%, #6a1039 0%, #380720 46%, #1a0410 100%),
		#170410;
	color: #fff;
}
.ol-dark .ol-testimonials .ol-section__heading,
.ol-dark .ol-testimonials__heading { color: #fff; }
.ol-dark .ol-testimonials .ol-eyebrow { color: #ff5c8a; }

/* Glass cards. */
.ol-dark .ol-testimonial {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 18px;
}
.ol-dark .ol-testimonial__quote { color: #e6d8de; }
.ol-dark .ol-testimonial__name { color: #fff; }
.ol-dark .ol-testimonial__title,
.ol-dark .ol-testimonial__date { color: #b99fac; }

/* Stars stay pink/magenta on the dark plum. */
.ol-dark .ol-testimonial__stars .ol-star { color: #ff2d6f; }
.ol-dark .ol-testimonial__stars .ol-star--off { color: rgba(255, 255, 255, .18); }

/* Review badges are CSS-masked shapes (see blades.css). On the dark template's
   plum testimonials bg, paint them white; the light template keeps brand red. */
.ol-dark .ol-rating-badge { background-color: #fff; }

/* Trustpilot/Google review badges + their star labels read on dark. */
.ol-dark .ol-testimonials .ol-rating-badge__label,
.ol-dark .ol-testimonials__badges,
.ol-dark .ol-testimonials__aside { color: #e6d8de; }