/**
 * Designer landing (#796) — what /product-design/ shows when it is reached
 * without a product context, in place of the vendor's raw "Invalid product"
 * debug error.
 *
 * Only the page-level shell lives here: the three-step section is the theme's
 * own .lj-steps__* component (_front-steps.scss) and the CTA is .lj-btn, both
 * reused as-is so this surface cannot drift from the home page. Theme tokens
 * with literal fallbacks mirroring _tokens.scss.
 */

.lje-designer-landing {
	text-align: center;
}

.lje-designer-landing__inner {
	max-width: 1100px;
	margin-inline: auto;
}

.lje-designer-landing__eyebrow {
	display: inline-block;
	margin: 0 0 var(--lj-space-4, 1rem);
	padding: var(--lj-space-1, 0.25rem) var(--lj-space-4, 1rem);
	border-radius: var(--lj-radius-pill, 9999px);
	background: var(--lj-color-active-tint, #e6f6f7);
	color: var(--lj-color-primary-hover, #008a96);
	font-size: var(--lj-text-sm, 0.875rem);
	line-height: 1.4;
}

.lje-designer-landing__title {
	margin: 0 0 var(--lj-space-3, 0.75rem);
	font-size: var(--lj-text-3xl, 2.5rem);
	text-wrap: balance;
}

.lje-designer-landing__lede {
	max-width: 40rem;
	margin: 0 auto;
	color: var(--lj-color-text-muted, #6b6b66);
	font-size: var(--lj-text-lg, 1.125rem);
	line-height: var(--lj-leading-normal, 1.55);
	text-wrap: pretty;
}

/* Flat like the home page — no card, the theme's grid does the layout. */
.lje-designer-landing__steps {
	margin-top: var(--lj-space-7, 3rem);
}

.lje-designer-landing__cta {
	margin-top: var(--lj-space-7, 3rem);
}

.lje-designer-landing__hint {
	margin: var(--lj-space-4, 1rem) 0 0;
	color: var(--lj-color-text-faint, #9a9a94);
	font-size: var(--lj-text-sm, 0.875rem);
}

.lje-designer-landing__hint a {
	color: var(--lj-color-primary-hover, #008a96);
}