/*
 * landing-incentives-overrides.css
 *
 * Loaded ONLY on pages using page-landing-incentives.php (via functions.php).
 * Enqueued after all other stylesheets so rules here always win.
 *
 * Scope: body.landing-incentives.
 * Purpose: keep the paid landing page decoupled from future homepage refactors.
 */

/* -----------------------------------------------------------------------
 * Hero height — content-sized, not viewport-sized.
 *
 * Homepage main.css sets:
 *   .l6-hero { min-height: 640px; height: 100vh; max-height: 780px; }
 * On a 768px-tall laptop this forces the hero to fill the entire viewport,
 * pushing the client-logo strip below the fold.
 *
 * Override: let the hero size to its content. All INTERNAL hero spacing
 * (nav clearance, stat-strip margins, headline/bullets rhythm) stays
 * identical to the homepage — only the outer height cap is removed, so
 * the logo bar sits directly below the hero content rather than below
 * ~200px of forced empty space.
 * --------------------------------------------------------------------- */
body.landing-incentives .l6-hero {
	min-height: 0;
	height: auto;
	max-height: none;
}

/* -----------------------------------------------------------------------
 * Hero-content max-width — prevent long dynamic H1s from covering the
 * woman anchored on the right side of the hero background image.
 *
 * Homepage main.css sets .hero-content { max-width: ~880-980px }, which
 * is fine for the static "Motivation that means business." headline.
 * The landing page renders dynamic H1s up to ~9 words ("Manufacturer
 * incentive systems done right." → 34 chars; "OEM rebate management
 * done right." → 32 chars). Longer strings ran across the model's face.
 *
 * Cap at 640px on desktop so long H1s wrap to 2 lines and stay left
 * of the woman. Bullets and CTAs live in the same column so they
 * wrap gracefully too. On <=900px viewports the hero already stacks
 * so no cap needed.
 * --------------------------------------------------------------------- */
@media (min-width: 901px) {
	body.landing-incentives .hero-content {
		max-width: 640px;
	}
}

/* -----------------------------------------------------------------------
 * Hero eyebrow — the landing page shows a dynamic eyebrow ("SPIFF
 * PROGRAMS", "REBATE PROGRAMS", etc.) above the H1. Match the same
 * treatment used on the site elsewhere: uppercase, tracked, small,
 * accent color, tight margin below.
 * --------------------------------------------------------------------- */
body.landing-incentives .hero-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7fd069; /* Level 6 accent green */
	margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------
 * Hero bullets — the landing page uses <strong> inside each bullet's
 * text to emphasize the dynamic phrase (e.g. "manufacturer channels").
 * Homepage main.css sets .hero-bullets li { display: flex; gap: 12px }
 * which treats each direct child (check icon, text nodes, <strong>)
 * as its own flex child — producing giant 12px gaps between words.
 *
 * Fix: wrap the bullet text in <span class="bullet-text"> so the li
 * has exactly two flex children (check + text container). All bold
 * emphasis flows naturally inline inside the text span.
 * --------------------------------------------------------------------- */
body.landing-incentives .hero-bullets li {
	align-items: baseline;
}
body.landing-incentives .hero-bullets .bullet-text {
	flex: 1;
	line-height: 1.4;
}
body.landing-incentives .hero-bullets .bullet-text strong {
	font-weight: 700;
}