/*
 * WP Ember - home bundle: marketing landing page (hero, feature rows, steps, CTA).
 */

/* Hero */
.wpe-hero {
	background: linear-gradient(180deg, var(--wpe-paper), #fff);
	padding: var(--wpe-sp-24) 0;
	border-bottom: 1px solid var(--wpe-border);
}
.wpe-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wpe-sp-16);
	align-items: center;
}
.wpe-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: var(--wpe-fs-13);
	font-weight: 700;
	color: var(--wpe-ember);
	margin: 0 0 var(--wpe-sp-3);
}
.wpe-hero h1 { font-size: clamp(2.25rem, 4vw, var(--wpe-fs-60)); margin: 0 0 var(--wpe-sp-5); }
.wpe-hero__lede { font-size: var(--wpe-fs-20); color: var(--wpe-text-muted); margin: 0 0 var(--wpe-sp-8); }
.wpe-hero__actions { display: flex; gap: var(--wpe-sp-3); flex-wrap: wrap; margin-bottom: var(--wpe-sp-5); }
.wpe-hero__note { font-size: var(--wpe-fs-14); color: var(--wpe-text-soft); margin: 0; }
.wpe-hero__media { position: relative; }
@media ( max-width: 900px ) {
	.wpe-hero__grid { grid-template-columns: 1fr; gap: var(--wpe-sp-12); }
	.wpe-hero { padding: var(--wpe-sp-16) 0; }
}

/* Hero product mockup - crisp HTML, not a screenshot */
.wpe-hero-mock { position: relative; max-width: 460px; margin-left: auto; }
.wpe-hero-mock__card {
	background: #fff;
	border: 1px solid var(--wpe-border-cool);
	border-radius: var(--wpe-r-16);
	box-shadow: var(--wpe-shadow-lift);
	padding: var(--wpe-sp-8);
}
.wpe-hero-mock__eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	font-weight: 700;
	color: var(--wpe-ember);
	margin-bottom: var(--wpe-sp-3);
}
.wpe-hero-mock__title {
	font-family: var(--wpe-font-display);
	font-weight: 600;
	font-size: var(--wpe-fs-24);
	line-height: 1.2;
	color: var(--wpe-ink);
	margin: 0 0 var(--wpe-sp-5);
}
.wpe-hero-mock__trust {
	border: 1px solid var(--wpe-border);
	border-radius: var(--wpe-r-12);
	background: var(--wpe-paper);
	padding: var(--wpe-sp-4);
	font-size: var(--wpe-fs-14);
}
.wpe-hero-mock__row { display: flex; align-items: center; gap: var(--wpe-sp-3); margin-bottom: var(--wpe-sp-3); line-height: 1.3; }
.wpe-hero-mock__ava { flex: none; width: 28px; height: 28px; border-radius: 50%; }
.wpe-hero-mock__ava--author { background: linear-gradient(135deg, #c9d2dd, #98a4b3); }
.wpe-hero-mock__ava--rev { background: linear-gradient(135deg, #ffd9a0, var(--wpe-ember)); }
.wpe-hero-mock__label { color: var(--wpe-text-muted); }
.wpe-hero-mock__muted { color: var(--wpe-text-soft); }
.wpe-hero-mock strong { color: var(--wpe-ink); font-weight: 650; }
.wpe-hero-mock__dates { color: var(--wpe-text-soft); font-size: var(--wpe-fs-12); padding-top: var(--wpe-sp-3); border-top: 1px solid var(--wpe-border); }
.wpe-hero-mock__lines { margin-top: var(--wpe-sp-6); display: grid; gap: var(--wpe-sp-3); }
.wpe-hero-mock__lines span { height: 8px; border-radius: 4px; background: #eef0f3; }
.wpe-hero-mock__lines span:nth-child(1) { width: 100%; }
.wpe-hero-mock__lines span:nth-child(2) { width: 92%; }
.wpe-hero-mock__lines span:nth-child(3) { width: 68%; }
.wpe-hero-mock__badge {
	position: absolute;
	bottom: -16px;
	left: -16px;
	display: inline-flex;
	align-items: center;
	gap: var(--wpe-sp-2);
	background: var(--wpe-ink);
	color: var(--wpe-text-invert);
	font-size: var(--wpe-fs-13);
	font-weight: 600;
	padding: var(--wpe-sp-2) var(--wpe-sp-4);
	border-radius: var(--wpe-r-pill);
	box-shadow: var(--wpe-shadow-lift);
}
.wpe-hero-mock__badge svg { color: var(--wpe-amber); }
@media ( max-width: 900px ) {
	.wpe-hero-mock { margin: 0 auto; }
}

/* Feature rows */
.wpe-features { display: grid; gap: var(--wpe-sp-20); }
.wpe-feature-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wpe-sp-12);
	align-items: center;
}
.wpe-feature-row--reverse .wpe-feature-row__text { order: 2; }
.wpe-feature-row__text .wpe-pill { margin-bottom: var(--wpe-sp-4); }
.wpe-feature-row__text h3 { font-size: var(--wpe-fs-30); margin: 0 0 var(--wpe-sp-3); }
.wpe-feature-row__text p { font-size: var(--wpe-fs-18); color: var(--wpe-text-muted); margin: 0; }
@media ( max-width: 900px ) {
	.wpe-feature-row { grid-template-columns: 1fr; gap: var(--wpe-sp-6); }
	.wpe-feature-row--reverse .wpe-feature-row__text { order: 0; }
}

/* Steps */
.wpe-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wpe-sp-8); }
.wpe-step { text-align: center; }
.wpe-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wpe-ember);
	color: #fff;
	font-family: var(--wpe-font-display);
	font-weight: 600;
	font-size: var(--wpe-fs-20);
	margin-bottom: var(--wpe-sp-4);
}
.wpe-step h3 { font-size: var(--wpe-fs-20); margin: 0 0 var(--wpe-sp-2); }
.wpe-step p { color: var(--wpe-text-muted); font-size: var(--wpe-fs-15); margin: 0; }
@media ( max-width: 700px ) {
	.wpe-steps { grid-template-columns: 1fr; gap: var(--wpe-sp-10); }
}

/* CTA band */
.wpe-cta { text-align: center; }
.wpe-cta h2 { margin: 0 0 var(--wpe-sp-3); }
.wpe-cta p { color: var(--wpe-text-muted); font-size: var(--wpe-fs-18); max-width: 52ch; margin: 0 auto var(--wpe-sp-8); }