/* Composition-only layout for the /real-estate/pre-licensing/online/ page (post_type=program, slug 'online');
	reusable component styling lives in components.css. Mirrors license-statistics.css's split. */

/* Keeps the shared .tbc-eyebrow treatment, only overriding color to marigold for contrast against
	this hero's midnight background. */
.tbc-hero .tbc-eyebrow {
	color: var(--color-marigold);
}

/* This page's Social Proof row sits on a plain/default background (unlike License Statistics'
	'light' section, which needs white tiles for contrast), so tiles get the frost fill instead —
	keep this page-scoped, don't move to components.css. */
.tbc-stat-tile {
	background: var(--color-frost);
}

/* numbered_steps' entire look (frost card, midnight/marigold circles, top-aligned title, pill
	badges, badge-anchored connector line, and column count reacting to step count) is now the
	shared default in components.css — this page has no remaining step-specific overrides at all. */

/* banner_two_cta has two per-page instances scoped via the row wrapper's own background_style
	modifier class: Prefer Classroom (light) gets a frost-background banner (frost token used
	instead of Figma's literal hex, for site-wide consistency) with a midnight primary button,
	Bottom CTA (midnight, the field default) gets the shared midnight banner with a marigold
	primary button (Figma nodes 935:72, 969:2). */
.tbc-block-row--bg-light .tbc-banner {
	background: var(--color-frost);
}

.tbc-block-row--bg-light .tbc-banner .tbc-btn--primary {
	background: var(--color-midnight);
}

.tbc-block-row--bg-light .tbc-banner .tbc-btn--primary:hover {
	background: var(--color-midnight);
	opacity: .85;
}

.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary {
	background: var(--color-marigold);
	color: var(--color-charcoal);
}

.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary:hover {
	background: var(--color-marigold-light);
	color: var(--color-charcoal);
}

.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary:visited,
.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary:visited:hover,
.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary:focus,
.tbc-block-row--bg-midnight .tbc-banner .tbc-btn--primary:visited:focus {
	color: var(--color-charcoal);
}

/* Equal-width/no-wrap button-pair sizing now lives in components.css as the shared default; only
	this page's primary-button color stays here. */