/**
 * SlideBrain band + hero eyebrow, front-page draft only.
 *
 * Loaded by functions.php for page-front-slidebrain.php alone, so nothing here
 * reaches the live front page. Everything reuses the theme tokens in style.css;
 * the one new value is the SlideBrain brand blue, which is the product's colour
 * rather than Slide Science's --color-blue navy.
 *
 * Scoped to this file rather than added to style.css :root while the design is
 * still a draft. Promote it to the token block if the section ships.
 */

:root {
	--color-slidebrain: #0048b4;
}

/* Display headings take the theme's tracking back. style.css sets
   `h1, h2 { letter-spacing: var(--tracking-tight) }` globally, then
   `.landing h1, .landing h2, .landing h3` resets it to normal — so landing
   pages render looser than articles do. This restores it for h1/h2 on the
   draft only, leaving h3 alone: below ~20px the tightening costs legibility.
   Needs .landing to match the specificity of the rule it overrides. */
.landing h1,
.landing h2 {
	letter-spacing: var(--tracking-tight);
}

/* Hero eyebrow — the product/format list above the h1. .eyebrow already
   handles uppercase, weight and tracking; this only sets the colour and lets
   the separators sit inline. */
.eyebrow-red {
	color: var(--color-red);
	flex-wrap: wrap;
}

.eyebrow-red span {
	color: inherit;
}

/* ==========================================================================
   SlideBrain band
   ========================================================================== */

.slidebrain-band {
	background: var(--color-surface);
}

/* Product lockup: the SlideBrain logo SVG, then the format label. The wordmark
   stays inside the SVG so it keeps the product's own typeface rather than
   picking up the Slide Science heading font. */
.slidebrain-mark {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
}

.slidebrain-mark img {
	width: auto;
	height: 1.8125rem;
	flex: none;
}

.slidebrain-kind {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	color: var(--color-ink);
}

/* Fills the column rather than the Figma's fixed 488px, so the heading wraps
   with the layout instead of against a hard measure. */
.slidebrain-band h2 {
	max-width: none;
}

/* One heading-to-list gap for both split sections. The theme leaves the
   email-course h2 at 36px, twice the SlideBrain band's. */
.hero-split h2 {
	margin: 0 0 var(--space-5);
}

/* ==========================================================================
   Hero overrides
   --------------------------------------------------------------------------
   .hero-stack is shared with the live front page (page-front.php), so these
   stay scoped to the draft rather than changing style.css.
   ========================================================================== */

.hero-stack h1 {
	max-width: 800px;
}

/* Lede runs well inside the headline measure. */
.hero-stack .hero-lede {
	max-width: 560px;
}

/* 20% deeper than the theme's 4em landing-section padding. Needs all three
   classes to outrank `.landing .section`. */
.landing .section.hero-band {
	padding-block: 4.8em;
}

/* Lede matches body copy rather than the theme's larger medium-weight lede.
   1em rather than var(--text-base): the root is scaled to 90%, so that token
   resolves to 14.4px while body copy on the page renders at 16px. */
.hero-stack .hero-lede {
	font-size: 1em;
	font-weight: var(--weight-normal);
	line-height: 1.5;
}

/* Tighter around the headline: the eyebrow sits closer above it and the lede
   closer below. Theme defaults are 1.5em and 30px respectively. */
.hero-stack .eyebrow {
	margin-bottom: var(--space-3);
}

.hero-stack h1 {
	margin-bottom: var(--space-4);
}

/* Label-led bullets, no tick marks — the Figma runs these as plain paragraphs
   with a bold lead-in, which reads lighter than the .checklist used by the
   email-course section directly below. */
.slidebrain-bullets {
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	text-align: left;
}

.slidebrain-bullets li {
	margin-bottom: var(--space-3);
}

.slidebrain-bullets strong {
	font-weight: var(--weight-semibold);
}

/* Product-blue variant of .cta. Colour only; padding, weight and the square
   corners all come from .cta. */
.cta-slidebrain {
	background: var(--color-slidebrain);
}

.cta-slidebrain:hover {
	background: color-mix(in srgb, var(--color-slidebrain) 85%, white);
}

.slidebrain-shot {
	width: 100%;
	height: auto;
}