/**
 * Business Edition — creative redesign + mockups
 */

/* ── Spotlight cards ── */
.wsp-be-spotlight {
	position: relative;
	overflow: hidden;
}

.wsp-be-spotlight__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 60% at 10% 0%, rgba(198, 255, 0, 0.12), transparent 55%),
		radial-gradient(ellipse 60% 50% at 90% 100%, rgba(92, 45, 145, 0.08), transparent 50%),
		var(--wsp-cream);
}

.wsp-be-spotlight__head {
	text-align: center;
	max-width: 36rem;
	margin: 0 auto 2rem;
	position: relative;
}

.wsp-be-spotlight__head p {
	margin: 0.5rem 0 0;
	color: var(--wsp-muted);
}

.wsp-be-spotlight__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	position: relative;
}

.wsp-be-spotlight__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.35rem 1.25rem 1.1rem;
	border-radius: 22px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform 0.35s var(--wsp-ease), box-shadow 0.35s, border-color 0.35s;
	animation: wspBeCardIn 0.6s var(--wsp-ease) both;
	animation-delay: calc(var(--i) * 0.08s);
}

.wsp-be-spotlight__card:hover {
	transform: translateY(-6px) scale(1.02);
	border-color: var(--wsp-ink);
	box-shadow: 8px 8px 0 var(--wsp-lime);
}

.wsp-be-spotlight__glow {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s;
	pointer-events: none;
}

.wsp-be-spotlight__card--violet .wsp-be-spotlight__glow { background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), transparent 60%); }
.wsp-be-spotlight__card--wa .wsp-be-spotlight__glow { background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), transparent 60%); }
.wsp-be-spotlight__card--sky .wsp-be-spotlight__glow { background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), transparent 60%); }
.wsp-be-spotlight__card--ink .wsp-be-spotlight__glow { background: linear-gradient(135deg, rgba(17, 17, 17, 0.06), transparent 60%); }

.wsp-be-spotlight__card:hover .wsp-be-spotlight__glow { opacity: 1; }

.wsp-be-spotlight__tag {
	align-self: flex-start;
	font-size: 0.52rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 0.2rem 0.45rem;
	border-radius: 999px;
	background: var(--wsp-ink);
	color: var(--wsp-lime);
}

.wsp-be-spotlight__icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	margin-bottom: 0.35rem;
	background: var(--wsp-cream);
	border: 2px solid var(--wsp-border);
	position: relative;
}

.wsp-be-spotlight__icon::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.wsp-be-spotlight__icon--ai { color: #7c3aed; }
.wsp-be-spotlight__icon--setup { color: #16a34a; }
.wsp-be-spotlight__icon--setup::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); }
.wsp-be-spotlight__icon--outreach { color: #0284c7; }
.wsp-be-spotlight__icon--outreach::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E"); }
.wsp-be-spotlight__icon--shield { color: #ea580c; }
.wsp-be-spotlight__icon--shield::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.wsp-be-spotlight__icon--ai::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3Ccircle cx='9' cy='14' r='1' fill='black'/%3E%3Ccircle cx='15' cy='14' r='1' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='8' width='16' height='12' rx='2'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3Ccircle cx='9' cy='14' r='1' fill='black'/%3E%3Ccircle cx='15' cy='14' r='1' fill='black'/%3E%3C/svg%3E"); }
.wsp-be-spotlight__icon--meta { color: #25d366; background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.12)); border-color: rgba(37, 211, 102, 0.35); }
.wsp-be-spotlight__icon--meta::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z'/%3E%3Cpath d='M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.955 9.955 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z'/%3E%3C/svg%3E");
	width: 1.45rem;
	height: 1.45rem;
}
.wsp-be-spotlight__icon--voice { color: #0284c7; }
.wsp-be-spotlight__icon--voice::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 1a4 4 0 014 4v6a4 4 0 01-8 0V5a4 4 0 014-4z'/%3E%3Cpath d='M19 11v1a7 7 0 01-14 0v-1'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 1a4 4 0 014 4v6a4 4 0 01-8 0V5a4 4 0 014-4z'/%3E%3Cpath d='M19 11v1a7 7 0 01-14 0v-1'/%3E%3C/svg%3E"); }
.wsp-be-spotlight__icon--api { color: var(--wsp-ink); }
.wsp-be-spotlight__icon--api::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }

.wsp-be-spotlight__card strong { font-size: 1rem; line-height: 1.25; }
.wsp-be-spotlight__card > span:not([class]) { font-size: 0.8rem; color: var(--wsp-muted); line-height: 1.45; flex: 1; }
.wsp-be-spotlight__card em {
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--wsp-wa);
	margin-top: 0.25rem;
}

/* ── Module cloud ── */
.wsp-be-modules__head { text-align: center; margin-bottom: 1.5rem; }
.wsp-be-modules__head p { color: var(--wsp-muted); margin: 0.35rem 0 0; }

.wsp-be-modules__cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 920px;
	margin: 0 auto 1.5rem;
}

.wsp-be-modules__chip {
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	background: #fff;
	border: 1px solid var(--wsp-border);
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.04);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
	animation: wspBePop 0.4s ease both;
	animation-delay: calc(var(--i) * 0.02s);
}

.wsp-be-modules__chip:hover {
	transform: translateY(-2px);
	border-color: var(--wsp-ink);
	box-shadow: 3px 3px 0 var(--wsp-lime);
}

.wsp-be-modules__cta { text-align: center; }

/* ── Finale CTA ── */
.wsp-be-finale__stage {
	position: relative;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 2rem;
	align-items: center;
	padding: 2.5rem;
	border-radius: 28px;
	background: var(--wsp-ink);
	color: #fff;
	border: 2px solid rgba(198, 255, 0, 0.25);
	overflow: hidden;
	box-shadow: 12px 12px 0 var(--wsp-lime);
}

.wsp-be-finale__mesh {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(198, 255, 0, 0.15), transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(92, 45, 145, 0.35), transparent 45%);
	pointer-events: none;
}

.wsp-be-finale__content { position: relative; z-index: 1; }
.wsp-be-finale__pill {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: rgba(198, 255, 0, 0.15);
	color: var(--wsp-lime);
}

.wsp-be-finale__content h2 {
	margin: 0 0 0.65rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: #fff;
}

.wsp-be-finale__content p {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 32rem;
}

.wsp-be-finale__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.wsp-be-finale__chips span {
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.wsp-be-finale__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.wsp-be-finale__actions .wsp-btn--outline {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff !important;
	background: rgba(255, 255, 255, 0.06);
}

.wsp-be-finale__actions .wsp-btn--outline:hover {
	background: #fff;
	color: var(--wsp-ink) !important;
	border-color: #fff;
}

.wsp-be-finale__card {
	position: relative;
	z-index: 1;
	padding: 1.5rem;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
}

.wsp-be-finale__card-label {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.5);
}

.wsp-be-finale__card strong {
	display: block;
	font-family: var(--wsp-display);
	font-size: 3rem;
	line-height: 1;
	color: var(--wsp-lime);
}

.wsp-be-finale__card em {
	font-style: normal;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

.wsp-be-finale__card ul {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.wsp-be-finale__card li {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.75);
	padding-left: 1.1rem;
	position: relative;
}

.wsp-be-finale__card li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--wsp-wa);
	font-weight: 800;
}

/* ── Guide section ── */
.wsp-be-guide {
	position: relative;
	overflow: hidden;
}

.wsp-be-guide__bg {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--wsp-cream) 0%, #fff 30%, var(--wsp-cream) 100%);
	pointer-events: none;
}

.wsp-be-guide__hero {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	margin-bottom: 2rem;
	position: relative;
}

.wsp-be-guide__hero-copy { max-width: 36rem; }
.wsp-be-guide__hero-copy p { margin: 0.5rem 0 0; color: var(--wsp-muted); }

.wsp-be-guide__stats {
	display: flex;
	gap: 1rem;
}

.wsp-be-guide__stats div {
	padding: 0.85rem 1.1rem;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	text-align: center;
	min-width: 5rem;
	box-shadow: 4px 4px 0 var(--wsp-lime);
}

.wsp-be-guide__stats strong {
	display: block;
	font-family: var(--wsp-display);
	font-size: 1.5rem;
	color: var(--wsp-ink);
	line-height: 1;
}

.wsp-be-guide__stats span {
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wsp-muted);
}

.wsp-be-guide__layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	margin-top: 0;
	position: relative;
}

.wsp-be-guide__nav {
	position: sticky;
	top: calc(var(--wsp-header-h) + 1rem);
	padding: 1rem;
	border-radius: 20px;
	border: 2px solid var(--wsp-border);
	background: #fff;
	box-shadow: 6px 6px 0 rgba(17, 17, 17, 0.06);
}

.wsp-be-guide__nav-head {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--wsp-border);
}

.wsp-be-guide__nav-icon { font-size: 1rem; }

.wsp-be-guide__nav-title {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wsp-muted);
}

.wsp-be-guide__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.wsp-be-guide__nav-link {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.55rem;
	border-radius: 12px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--wsp-ink);
	text-decoration: none;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	border: 1px solid transparent;
}

.wsp-be-guide__nav-link:hover {
	background: var(--wsp-cream);
	transform: translateX(4px);
}

.wsp-be-guide__nav-link.is-active {
	background: rgba(37, 211, 102, 0.12);
	border-color: rgba(37, 211, 102, 0.35);
	color: #128c7e;
	box-shadow: 3px 3px 0 rgba(37, 211, 102, 0.2);
}

.wsp-be-guide__nav-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	line-height: 1.25;
}

.wsp-be-guide__nav-text em {
	font-style: normal;
	font-size: 0.58rem;
	font-weight: 800;
	color: var(--wsp-muted);
}

.wsp-be-guide__nav-ico {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 8px;
	background: var(--wsp-cream);
	position: relative;
}

.wsp-be-guide__nav-ico::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.9rem;
	height: 0.9rem;
	background: var(--wsp-ink);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.wsp-be-guide__nav-link.is-active .wsp-be-guide__nav-ico { background: rgba(37, 211, 102, 0.2); }

/* Chapter + nav icon glyphs */
.wsp-be-chapter__ico::after,
.wsp-be-guide__nav-ico--setup::after,
.wsp-be-guide__nav-ico--ai::after,
.wsp-be-guide__nav-ico--outreach::after,
.wsp-be-guide__nav-ico--shield::after,
.wsp-be-guide__nav-ico--api::after,
.wsp-be-guide__nav-ico--ref::after {
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.wsp-be-chapter__ico::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 1.65rem;
	height: 1.65rem;
	background: var(--wsp-ink);
	mask-size: contain;
	-webkit-mask-size: contain;
}

/* Setup — install / rocket */
.wsp-be-chapter__ico--setup::after,
.wsp-be-guide__nav-ico--setup::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09z'/%3E%3Cpath d='M12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

/* AI — bot */
.wsp-be-chapter__ico--ai::after,
.wsp-be-guide__nav-ico--ai::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M12 8V5a2 2 0 014 0v3'/%3E%3Cpath d='M8 8V6a2 2 0 014 0v2'/%3E%3Ccircle cx='9' cy='14' r='1' fill='black'/%3E%3Ccircle cx='15' cy='14' r='1' fill='black'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M12 8V5a2 2 0 014 0v3'/%3E%3Cpath d='M8 8V6a2 2 0 014 0v2'/%3E%3Ccircle cx='9' cy='14' r='1' fill='black'/%3E%3Ccircle cx='15' cy='14' r='1' fill='black'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
}

/* Outreach — send */
.wsp-be-chapter__ico--outreach::after,
.wsp-be-guide__nav-ico--outreach::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}

/* Safety — shield */
.wsp-be-chapter__ico--shield::after,
.wsp-be-guide__nav-ico--shield::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

/* API — code brackets */
.wsp-be-chapter__ico--api::after,
.wsp-be-guide__nav-ico--api::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

/* Reference — grid */
.wsp-be-chapter__ico--ref::after,
.wsp-be-guide__nav-ico--ref::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.wsp-be-chapter--lime .wsp-be-chapter__ico--setup::after { background: #16a34a; }
.wsp-be-chapter--violet .wsp-be-chapter__ico--ai::after { background: #7c3aed; }
.wsp-be-chapter--sky .wsp-be-chapter__ico--outreach::after { background: #0284c7; }
.wsp-be-chapter--orange .wsp-be-chapter__ico--shield::after { background: #ea580c; }
.wsp-be-chapter--magenta .wsp-be-chapter__ico--api::after { background: #c2185b; }
.wsp-be-chapter__banner--ref .wsp-be-chapter__ico--ref::after { background: var(--wsp-ink); }

/* Chapter banners */
.wsp-be-chapter { margin-bottom: 3.5rem; }

.wsp-be-chapter__banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.35rem;
	border-radius: 20px;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border: 2px solid var(--wsp-border);
}

.wsp-be-chapter__banner-bg {
	position: absolute;
	inset: 0;
	opacity: 0.9;
}

.wsp-be-chapter--lime .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(198, 255, 0, 0.25), rgba(37, 211, 102, 0.08)); }
.wsp-be-chapter--violet .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(92, 45, 145, 0.06)); }
.wsp-be-chapter--sky .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.06)); }
.wsp-be-chapter--orange .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.06)); }
.wsp-be-chapter--magenta .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(233, 30, 140, 0.15), rgba(92, 45, 145, 0.08)); }
.wsp-be-chapter__banner--ref .wsp-be-chapter__banner-bg { background: linear-gradient(135deg, rgba(17, 17, 17, 0.06), rgba(198, 255, 0, 0.12)); }

.wsp-be-chapter__ico {
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	position: relative;
	z-index: 1;
	box-shadow: 3px 3px 0 var(--wsp-ink);
}

.wsp-be-chapter__banner-copy { position: relative; z-index: 1; }

.wsp-be-chapter__num {
	display: inline-block;
	margin-bottom: 0.2rem;
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wsp-wa);
}

.wsp-be-chapter__banner-copy h3 {
	margin: 0 0 0.2rem;
	font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.wsp-be-chapter__banner-copy p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--wsp-muted);
	line-height: 1.5;
}

/* Section cards */
.wsp-be-section {
	padding: 0;
	border: none;
	margin-bottom: 1.25rem;
}

.wsp-be-section__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 1.1fr);
	gap: 1.25rem;
	align-items: start;
	padding: 1.25rem;
	border-radius: 22px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	box-shadow: 0 8px 32px rgba(17, 17, 17, 0.04);
	animation: wspBeCardIn 0.5s ease both;
	animation-delay: calc(var(--si) * 0.06s);
}

.wsp-be-section--dashboard .wsp-be-section__card {
	grid-template-columns: 1fr;
}

.wsp-be-section__label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.5rem;
}

.wsp-be-section__num {
	flex-shrink: 0;
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	font-size: 0.62rem;
	font-weight: 800;
	background: var(--wsp-ink);
	color: var(--wsp-lime);
}

.wsp-be-section__label h4 {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.3;
}

.wsp-be-section__intro {
	margin: 0 0 0.85rem;
	font-size: 0.88rem;
	color: var(--wsp-muted);
	line-height: 1.6;
}

.wsp-be-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.wsp-be-steps li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.84rem;
	line-height: 1.55;
	padding: 0.55rem 0.65rem;
	border-radius: 12px;
	background: var(--wsp-cream);
	border: 1px solid rgba(17, 17, 17, 0.05);
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--sti) * 0.05s);
}

.wsp-be-steps__n {
	flex-shrink: 0;
	width: 1.35rem;
	height: 1.35rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--wsp-wa);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
}

.wsp-be-section__mock-label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.58rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wsp-muted);
}

.wsp-be-guide__cta { text-align: center; margin-top: 1.5rem; }

@keyframes wspBeCardIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* Reference grid refresh */
.wsp-be-reference { margin-top: 1rem; }

.wsp-be-ref-group h4 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
	font-size: 0.95rem;
}

.wsp-be-ref-grid li {
	transition: transform 0.25s, box-shadow 0.25s;
}

.wsp-be-ref-grid li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
	border-color: var(--wsp-ink);
}

@media (max-width: 1024px) {
	.wsp-be-spotlight__grid { grid-template-columns: repeat(2, 1fr); }
	.wsp-be-finale__stage { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.wsp-be-spotlight__grid { grid-template-columns: 1fr; }
	.wsp-be-guide__stats { width: 100%; justify-content: center; }
	.wsp-be-section__card { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
	.wsp-be-guide__layout { grid-template-columns: 1fr; }
	.wsp-be-guide__nav { position: static; }
	.wsp-be-guide__nav ul {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.5rem;
		padding-bottom: 0.35rem;
		scrollbar-width: none;
	}
	.wsp-be-guide__nav ul::-webkit-scrollbar { display: none; }
	.wsp-be-guide__nav li { flex-shrink: 0; }
	.wsp-be-ref-grid { grid-template-columns: 1fr; }
}

/* ── Legacy overrides removed below — mockup styles continue ── */

.wsp-be-chapter__head {
	display: none;
}

.wsp-be-guide__nav-num {
	display: none;
}

.wsp-be-section--flip .wsp-be-section__copy,
.wsp-be-section--flip .wsp-be-section__mock { order: unset; }

.wsp-be-chapter {
	padding-bottom: 0;
	border-bottom: none;
}

.wsp-be-section--dashboard {
	grid-template-columns: 1fr;
	gap: 0;
}

.wsp-be-section--dashboard .wsp-be-section__mock {
	max-width: 100%;
}

/* ── Software dashboard mockup ── */
.wsp-be-dash {
	width: 100%;
}

.wsp-be-dash__wrap {
	position: relative;
	padding: 0.5rem 0 1rem;
}

.wsp-be-dash__app {
	font-size: clamp(0.52rem, 1.1vw, 0.62rem);
	box-shadow: 10px 10px 0 var(--wsp-ink);
	animation: wspBeDashIn 0.7s var(--wsp-ease, ease) both;
}

@keyframes wspBeDashIn {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.wsp-be-dash__screens {
	position: relative;
	min-height: 260px;
}

.wsp-be-dash__badge-tl,
.wsp-be-dash__badge-br {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.65rem;
	border-radius: 12px;
	border: 2px solid var(--wsp-ink);
	background: #fff;
	box-shadow: 4px 4px 0 var(--wsp-ink);
}

.wsp-be-dash__badge-tl { top: -0.25rem; left: -0.25rem; }
.wsp-be-dash__badge-br { bottom: 0; right: -0.25rem; }

.wsp-be-dash__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(17, 17, 17, 0.45);
	backdrop-filter: blur(2px);
	animation: wspBeOverlayIn 0.5s ease both;
}

@keyframes wspBeOverlayIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wsp-be-dash__dialog {
	width: min(100%, 320px);
	padding: 0.85rem 1rem;
	border-radius: 14px;
	border: 2px solid var(--wsp-ink);
	background: #fff;
	box-shadow: 8px 8px 0 var(--wsp-ink);
	animation: wspBeDialogIn 0.45s var(--wsp-ease, ease) both;
}

.wsp-be-dash__dialog--wide { width: min(100%, 380px); }

@keyframes wspBeDialogIn {
	from { opacity: 0; transform: translateY(8px) scale(0.96); }
	to { opacity: 1; transform: none; }
}

.wsp-be-dash__dialog strong {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.72rem;
	color: var(--wsp-app-purple, #5c2d91);
}

.wsp-be-dash__dialog ul {
	margin: 0;
	padding-left: 1rem;
	font-size: 0.62rem;
	line-height: 1.55;
	color: #333;
}

.wsp-be-dash__dialog ul li.is-ok {
	color: var(--wsp-wa);
	font-weight: 800;
}

.wsp-be-dash__dialog em {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.58rem;
	font-style: italic;
	color: var(--wsp-muted);
}

.wsp-be-dash__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0;
}

.wsp-be-dash__flags span {
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	font-size: 0.58rem;
	font-weight: 800;
	background: #eee;
	color: #666;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.05s);
}

.wsp-be-dash__flags span.is-active {
	background: rgba(37, 211, 102, 0.2);
	color: #128c7e;
	border: 1px solid rgba(37, 211, 102, 0.4);
}

.wsp-be-dash__profiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.wsp-be-dash__profiles li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.5rem;
	align-items: center;
	padding: 0.45rem 0.55rem;
	border-radius: 8px;
	background: #f5f5f5;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.1s);
}

.wsp-be-dash__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: var(--wsp-wa);
	box-shadow: 0 0 6px rgba(37, 211, 102, 0.5);
}

.wsp-be-dash__profiles strong { font-size: 0.65rem; }
.wsp-be-dash__profiles em {
	font-size: 0.55rem;
	font-style: normal;
	color: var(--wsp-wa);
	font-weight: 700;
}

.wsp-be-dash__mono {
	margin: 0.25rem 0;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.58rem;
	color: #555;
}

.wsp-be-dash__import-table {
	margin-top: 0.5rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}

.wsp-be-dash__dl {
	margin: 0;
	display: grid;
	gap: 0.35rem;
}

.wsp-be-dash__dl div {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 0.5rem;
	font-size: 0.6rem;
	padding: 0.35rem 0.45rem;
	border-radius: 6px;
	background: #f5f5f5;
}

.wsp-be-dash__dl dt { color: #888; font-weight: 700; margin: 0; }
.wsp-be-dash__dl dd { margin: 0; font-weight: 800; color: var(--wsp-app-purple, #5c2d91); }

.wsp-be-dash__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
	padding: 0.5rem;
}

.wsp-be-dash__stat {
	padding: 0.5rem;
	border-radius: 8px;
	background: #f0f4ff;
	text-align: center;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.08s);
}

.wsp-be-dash__stat strong {
	display: block;
	font-size: 0.9rem;
	color: var(--wsp-app-purple, #5c2d91);
}

.wsp-be-dash__stat span {
	font-size: 0.5rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wsp-be-dash__training {
	padding: 0.5rem;
	border-radius: 8px;
	background: #f5f5f5;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.52rem;
	line-height: 1.6;
	color: #444;
}

.wsp-be-dash__training p { margin: 0.15rem 0; }

.wsp-app__menubar-cta.is-highlight {
	box-shadow: 0 0 0 2px #b8ff3c;
	animation: wspBeCtaPulse 2s ease infinite;
}

@keyframes wspBeCtaPulse {
	0%, 100% { box-shadow: 0 0 0 2px #b8ff3c; }
	50% { box-shadow: 0 0 0 4px rgba(184, 255, 60, 0.4); }
}

.wsp-be-dash__msg {
	opacity: 1 !important;
	animation: wspBePop 0.4s ease both !important;
	animation-delay: calc(0.15s + var(--i) * 0.12s) !important;
}

.wsp-be-dash .wsp-app__table-row--data {
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.08s);
}

@media (max-width: 960px) {
	.wsp-be-dash__badge-br { display: none; }
	.wsp-be-dash__app { box-shadow: 6px 6px 0 var(--wsp-ink); }
}

@media (max-width: 640px) {
	.wsp-be-dash__wrap { padding: 0; }
	.wsp-be-dash__badge-tl { position: static; margin-bottom: 0.5rem; width: fit-content; }
	.wsp-app__workspace { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.wsp-be-dash__app,
	.wsp-be-dash__overlay,
	.wsp-be-dash__dialog,
	.wsp-be-dash__flags span,
	.wsp-be-dash__profiles li,
	.wsp-be-dash__stat,
	.wsp-be-dash__msg,
	.wsp-be-dash .wsp-app__table-row--data {
		animation: none !important;
	}
}


.wsp-be-mock__window {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(17, 17, 17, 0.12);
	background: #111;
	box-shadow: 0 20px 50px rgba(17, 17, 17, 0.18);
}

.wsp-be-mock__bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	padding: 0.55rem 0.7rem;
	background: linear-gradient(180deg, #2c2c2c, #1a1a1a);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wsp-be-mock__dots {
	display: flex;
	gap: 0.28rem;
}

.wsp-be-mock__dots i {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	font-style: normal;
}

.wsp-be-mock__dots i:nth-child(1) { background: #ff5f57; }
.wsp-be-mock__dots i:nth-child(2) { background: #febc2e; }
.wsp-be-mock__dots i:nth-child(3) { background: #28c840; }

.wsp-be-mock__bar strong {
	flex: 1;
	min-width: 0;
	font-size: 0.66rem;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wsp-be-mock__badge {
	font-size: 0.54rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #c6ff4d;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: rgba(184, 255, 60, 0.14);
	border: 1px solid rgba(184, 255, 60, 0.3);
	font-style: normal;
}

.wsp-be-mock__body {
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: linear-gradient(165deg, #1c1c1a, #0d0d0c);
	min-height: 260px;
}

.wsp-be-mock__file {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.wsp-be-mock__file span { color: #25d366; font-size: 0.7rem; }
.wsp-be-mock__file code {
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.8);
	font-family: ui-monospace, Consolas, monospace;
}

.wsp-be-mock__terminal {
	padding: 0.5rem 0.55rem;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.06);
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.6rem;
	line-height: 1.55;
	color: #a8f0c8;
}

.wsp-be-mock__line {
	display: flex;
	gap: 0.3rem;
	animation: wspBeLineIn 0.4s ease both;
	animation-delay: calc(0.1s + var(--i) * 0.12s);
}

.wsp-be-mock__line span { color: #25d366; font-weight: 700; }

.wsp-be-mock__note {
	margin: 0;
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.45);
	font-style: italic;
}

.wsp-be-mock__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.wsp-be-mock__flag {
	padding: 0.3rem 0.5rem;
	border-radius: 8px;
	font-size: 0.62rem;
	font-weight: 800;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.08);
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.05s);
}

.wsp-be-mock__flag.is-active {
	background: rgba(37, 211, 102, 0.2);
	color: #86efac;
	border-color: rgba(37, 211, 102, 0.4);
}

.wsp-be-mock__profiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
}

.wsp-be-mock__profiles li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.5rem;
	align-items: center;
	padding: 0.45rem 0.55rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.1s);
}

.wsp-be-mock__dot {
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 999px;
	background: #25d366;
	box-shadow: 0 0 8px rgba(37, 211, 102, 0.6);
}

.wsp-be-mock__profiles strong {
	font-size: 0.68rem;
	color: #fff;
}

.wsp-be-mock__profiles em {
	font-size: 0.58rem;
	font-style: normal;
	color: #86efac;
	font-weight: 700;
}

.wsp-be-mock__modes {
	display: grid;
	gap: 0.45rem;
}

.wsp-be-mock__mode {
	padding: 0.55rem 0.65rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	animation: wspBePop 0.4s ease both;
	animation-delay: calc(var(--i) * 0.12s);
}

.wsp-be-mock__mode strong {
	display: block;
	font-size: 0.72rem;
	margin-bottom: 0.15rem;
	color: #fff;
}

.wsp-be-mock__mode span {
	font-size: 0.62rem;
	color: rgba(255, 255, 255, 0.55);
}

.wsp-be-mock__mode--safe { background: rgba(37, 211, 102, 0.12); border-color: rgba(37, 211, 102, 0.3); }
.wsp-be-mock__mode--blind { background: rgba(249, 115, 22, 0.1); border-color: rgba(249, 115, 22, 0.25); }
.wsp-be-mock__mode--rotate { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); }

.wsp-be-mock__table {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.62rem;
}

.wsp-be-mock__table-head,
.wsp-be-mock__table-row {
	display: grid;
	grid-template-columns: 1fr 1.2fr 0.6fr;
	gap: 0.35rem;
	padding: 0.4rem 0.5rem;
}

.wsp-be-mock__table-head {
	background: rgba(255, 255, 255, 0.08);
	font-weight: 800;
	color: rgba(255, 255, 255, 0.7);
}

.wsp-be-mock__table-row {
	background: rgba(0, 0, 0, 0.25);
	color: #e5e5e5;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.08s);
}

.wsp-be-mock__compose-row {
	padding: 0.5rem 0.55rem;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.wsp-be-mock__compose-row small {
	display: block;
	font-size: 0.52rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 0.2rem;
}

.wsp-be-mock__compose-row p {
	margin: 0;
	font-size: 0.65rem;
	color: #a8f0c8;
	font-family: ui-monospace, Consolas, monospace;
}

.wsp-be-mock__compose-row--out p { color: #fde68a; }

.wsp-be-mock__compose-arrow {
	text-align: center;
	color: var(--wsp-wa);
	font-size: 0.85rem;
}

.wsp-be-mock__media-chip {
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	background: rgba(37, 211, 102, 0.12);
	font-size: 0.62rem;
	color: #86efac;
}

.wsp-be-mock__chat {
	display: grid;
	gap: 0.4rem;
	padding: 0.45rem;
	border-radius: 12px;
	background: #0b141a;
}

.wsp-be-mock__chat--compact { margin-top: 0.35rem; }

.wsp-be-mock__bubble {
	max-width: 92%;
	padding: 0.45rem 0.6rem;
	border-radius: 10px;
	font-size: 0.65rem;
	line-height: 1.45;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.1s);
}

.wsp-be-mock__bubble--in {
	background: #fff;
	color: #111;
	justify-self: start;
	border-bottom-left-radius: 3px;
}

.wsp-be-mock__bubble--out {
	background: #d9fdd3;
	color: #111;
	justify-self: end;
	border-bottom-right-radius: 3px;
}

.wsp-be-mock__rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3rem;
}

.wsp-be-mock__rules li {
	padding: 0.35rem 0.5rem;
	border-radius: 8px;
	background: rgba(139, 92, 246, 0.12);
	font-size: 0.62rem;
	color: #c4b5fd;
	font-family: ui-monospace, Consolas, monospace;
}

.wsp-be-mock__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
}

.wsp-be-mock__stats > div {
	padding: 0.45rem 0.5rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	position: relative;
	overflow: hidden;
	animation: wspBePop 0.35s ease both;
	animation-delay: calc(var(--i) * 0.08s);
}

.wsp-be-mock__stats dt {
	margin: 0;
	font-size: 0.54rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 700;
}

.wsp-be-mock__stats dd {
	margin: 0.1rem 0 0.35rem;
	font-size: 0.78rem;
	font-weight: 800;
	color: #93c5fd;
}

.wsp-be-mock__bar-fill {
	display: block;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, #25d366, #93c5fd);
	width: var(--w, 50%);
	max-width: 100%;
	animation: wspBeBarGrow 0.8s ease both;
	animation-delay: calc(0.2s + var(--i) * 0.1s);
}

/* Reference grid */
.wsp-be-reference { margin-top: 2rem; }

.wsp-be-ref-group { margin-bottom: 1.5rem; }

.wsp-be-ref-group h4 {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.wsp-be-ref-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.wsp-be-ref-grid li {
	padding: 0.85rem;
	border-radius: 14px;
	border: 1px solid rgba(17, 17, 17, 0.08);
	background: #fff;
	box-shadow: 0 8px 24px rgba(17, 17, 17, 0.04);
}

.wsp-be-ref-badge {
	display: inline-block;
	margin-bottom: 0.35rem;
	font-size: 0.52rem;
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #128c7e;
	padding: 0.15rem 0.4rem;
	border-radius: 999px;
	background: rgba(37, 211, 102, 0.12);
}

.wsp-be-ref-grid strong {
	display: block;
	font-size: 0.84rem;
	margin-bottom: 0.15rem;
}

.wsp-be-ref-grid span {
	font-size: 0.75rem;
	color: var(--wsp-muted);
	line-height: 1.45;
}

@keyframes wspBeLineIn {
	from { opacity: 0; transform: translateX(-6px); }
	to { opacity: 1; transform: none; }
}

@keyframes wspBePop {
	from { opacity: 0; transform: translateY(6px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes wspBeBarGrow {
	from { width: 0; }
}

/* ── Windows SmartScreen mockup ── */
.wsp-be-smart {
	width: 100%;
	padding: 0.5rem 0;
}

.wsp-be-smart__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	align-items: start;
}

.wsp-be-smart__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: wspBeDashIn 0.6s ease both;
}

.wsp-be-smart__step:nth-child(2) { animation-delay: 0.15s; }

.wsp-be-smart__badge {
	position: absolute;
	top: -0.5rem;
	right: 0.5rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: #e53935;
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	box-shadow: 0 4px 12px rgba(229, 57, 53, 0.45);
}

.wsp-be-smart__win {
	width: 100%;
	max-width: 340px;
	border-radius: 0;
	overflow: hidden;
	background: #003d6b;
	color: #fff;
	box-shadow: 0 16px 40px rgba(0, 30, 60, 0.35);
	font-family: "Segoe UI", system-ui, sans-serif;
}

.wsp-be-smart__titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 0.65rem;
	background: rgba(0, 0, 0, 0.15);
}

.wsp-be-smart__shield {
	display: grid;
	place-items: center;
	color: #fff;
	opacity: 0.9;
}

.wsp-be-smart__close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0;
	cursor: default;
	opacity: 0.85;
}

.wsp-be-smart__body {
	padding: 1.25rem 1.35rem 1rem;
}

.wsp-be-smart__body h4 {
	margin: 0 0 0.85rem;
	font-size: clamp(1.1rem, 2.5vw, 1.45rem);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.wsp-be-smart__body p {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	line-height: 1.55;
	opacity: 0.95;
}

.wsp-be-smart__more {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 0.82rem;
	text-decoration: underline;
	padding: 0;
	cursor: default;
	font-family: inherit;
}

.wsp-be-smart__more.is-highlight {
	animation: wspBeSmartPulse 1.8s ease infinite;
}

@keyframes wspBeSmartPulse {
	0%, 100% { text-shadow: 0 0 0 transparent; }
	50% { text-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
}

.wsp-be-smart__meta {
	margin: 0 0 0.85rem;
	display: grid;
	gap: 0.35rem;
}

.wsp-be-smart__meta div {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.5rem;
	font-size: 0.78rem;
}

.wsp-be-smart__meta dt {
	margin: 0;
	font-weight: 400;
	opacity: 0.9;
}

.wsp-be-smart__meta dd {
	margin: 0;
	font-weight: 600;
}

.wsp-be-smart__foot {
	display: flex;
	justify-content: flex-end;
	padding: 0.65rem 1rem 1rem;
	gap: 0.5rem;
}

.wsp-be-smart__foot--dual {
	justify-content: flex-end;
}

.wsp-be-smart__btn {
	padding: 0.35rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 0.78rem;
	font-family: inherit;
	cursor: default;
	min-width: 5.5rem;
}

.wsp-be-smart__btn--run.is-highlight {
	background: rgba(255, 255, 255, 0.22);
	border-color: #fff;
	animation: wspBeSmartBtnPulse 1.8s ease infinite;
}

@keyframes wspBeSmartBtnPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
	50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15); }
}

.wsp-be-smart__arrow {
	width: 4rem;
	height: 3rem;
	color: #e53935;
	margin: 0.35rem 0;
}

.wsp-be-smart__arrow svg {
	width: 100%;
	height: 100%;
	display: block;
}

.wsp-be-smart__arrow--up {
	animation: wspBeArrowBounce 2s ease infinite;
}

.wsp-be-smart__arrow--down {
	animation: wspBeArrowBounce 2s ease infinite;
	animation-delay: 0.3s;
}

@keyframes wspBeArrowBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

.wsp-be-smart__label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: #e53935;
	text-align: center;
}

@media (max-width: 720px) {
	.wsp-be-smart__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wsp-be-smart__more.is-highlight,
	.wsp-be-smart__btn--run.is-highlight,
	.wsp-be-smart__arrow--up,
	.wsp-be-smart__arrow--down {
		animation: none !important;
	}
}

/* ── Detail blocks (Developer API etc.) ── */
.wsp-be-detail-blocks {
	margin-top: 1rem;
	display: grid;
	gap: 0.65rem;
}

.wsp-be-detail-block {
	padding: 0.75rem 0.9rem;
	border-radius: 12px;
	border: 1px solid rgba(17, 17, 17, 0.08);
	background: #fff;
}

.wsp-be-detail-block strong {
	display: block;
	font-size: 0.82rem;
	margin-bottom: 0.25rem;
	color: var(--wsp-ink);
}

.wsp-be-detail-block p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--wsp-muted);
}

/* ── Developer REST API mockup screen ── */
.wsp-be-dev {
	margin: 0.35rem;
	padding: 0.65rem;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #ccc;
	font-size: 0.55rem;
}

.wsp-be-dev__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--wsp-app-purple, #5c2d91);
}

.wsp-be-dev__head strong {
	font-size: 0.68rem;
	color: var(--wsp-app-purple, #5c2d91);
}

.wsp-be-dev__status {
	font-size: 0.55rem;
	font-weight: 800;
	color: var(--wsp-wa);
}

.wsp-be-dev__endpoint {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.65rem;
	margin-bottom: 0.5rem;
	padding: 0.4rem 0.55rem;
	border-radius: 6px;
	background: #1a1a2e;
}

.wsp-be-dev__endpoint code {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.58rem;
	color: #93c5fd;
	font-weight: 700;
}

.wsp-be-dev__endpoint span {
	font-size: 0.5rem;
	color: rgba(255, 255, 255, 0.55);
}

.wsp-be-dev__row label {
	display: block;
	font-size: 0.5rem;
	color: #888;
	margin-bottom: 0.15rem;
	font-weight: 700;
	text-transform: uppercase;
}

.wsp-be-dev__key {
	padding: 0.3rem 0.45rem;
	border: 1px solid #ddd;
	border-radius: 5px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.52rem;
	background: #fafafa;
	margin-bottom: 0.45rem;
}

.wsp-be-dev__json {
	margin: 0 0 0.5rem;
	padding: 0.45rem 0.55rem;
	border-radius: 6px;
	background: #0d1117;
	color: #a8f0c8;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.48rem;
	line-height: 1.55;
	overflow-x: auto;
	white-space: pre;
}

.wsp-be-dev__ngrok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.55rem;
	border-radius: 6px;
	background: #f0f4ff;
	margin-bottom: 0.5rem;
}

.wsp-be-dev__ngrok strong {
	font-size: 0.55rem;
	color: var(--wsp-app-purple, #5c2d91);
	width: 100%;
}

.wsp-be-dev__ngrok code {
	flex: 1;
	font-size: 0.48rem;
	color: #444;
}

.wsp-be-dev__ngrok-badge {
	font-size: 0.45rem;
	font-weight: 800;
	padding: 0.15rem 0.4rem;
	border-radius: 999px;
	background: rgba(37, 211, 102, 0.15);
	color: #128c7e;
}

.wsp-be-dev__label {
	margin: 0 0 0.35rem;
	font-size: 0.5rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}

.wsp-be-dev__brands {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-bottom: 0.5rem;
}

.wsp-be-dev__brand {
	padding: 0.22rem 0.45rem;
	border-radius: 5px;
	font-size: 0.48rem;
	font-weight: 800;
	color: #fff;
	white-space: nowrap;
}

.wsp-be-dev__brand--hubspot { background: #ff7a59; }
.wsp-be-dev__brand--salesforce { background: #00a1e0; }
.wsp-be-dev__brand--woo { background: #96588a; }
.wsp-be-dev__brand--shopify { background: #96bf48; color: #1a3d0a; }
.wsp-be-dev__brand--zapier { background: #ff4a00; }
.wsp-be-dev__brand--make { background: #6d00cc; }
.wsp-be-dev__brand--python { background: #3776ab; }
.wsp-be-dev__brand--php { background: #777bb4; }

.wsp-be-dev__uses {
	margin: 0;
	padding-left: 1rem;
	font-size: 0.5rem;
	line-height: 1.5;
	color: #555;
}

.wsp-be-dev__uses li { margin-bottom: 0.2rem; }

/* ========== FEATURE DIALOG MOCKUPS (vCard, poll, booking, QR) ========== */
.wsp-be-feat {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}
.wsp-be-feat__frame {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(17, 17, 17, 0.18);
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #f0f0f0;
}
.wsp-be-feat__win {
	background: #fff;
}
.wsp-be-feat__win--dark { background: #0a0a0a; }
.wsp-be-feat__titlebar {
	padding: 0.4rem 0.65rem;
	font-size: 0.62rem;
	font-weight: 600;
	background: #ece9e9;
	border-bottom: 1px solid #c8c8c8;
	color: #333;
}
.wsp-be-feat__titlebar--green {
	background: linear-gradient(180deg, #3cb371 0%, #2e9d5e 100%);
	color: #fff;
	font-weight: 700;
	font-size: 0.72rem;
	padding: 0.55rem 0.75rem;
}
.wsp-be-feat__titlebar--purple {
	background: linear-gradient(135deg, #5c4bb5 0%, #4a3d9e 100%);
	color: #fff;
	padding: 0.65rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.wsp-be-feat__titlebar--purple strong { font-size: 0.82rem; }
.wsp-be-feat__titlebar--purple small { font-size: 0.58rem; opacity: 0.9; font-weight: 400; }
.wsp-be-feat__titlebar--dark {
	background: #1a1a1a;
	color: #ccc;
	border-bottom: 1px solid #333;
}

/* vCard editor */
.wsp-be-feat__vcard-head {
	background: linear-gradient(135deg, #6b4c9a 0%, #5c3d8f 100%);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	padding: 0.65rem 0.85rem;
}
.wsp-be-feat__vcard-body {
	padding: 0.65rem 0.85rem 0.5rem;
	font-size: 0.58rem;
}
.wsp-be-feat__section-label {
	margin: 0.5rem 0 0.35rem;
	padding-bottom: 0.2rem;
	border-bottom: 1px solid #e0e0e0;
	font-size: 0.55rem;
	font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.wsp-be-feat__section-label:first-child { margin-top: 0; }
.wsp-be-feat__grid { display: grid; gap: 0.4rem; margin-bottom: 0.35rem; }
.wsp-be-feat__grid--2 { grid-template-columns: 1fr 1fr; }
.wsp-be-feat__vcard-body label,
.wsp-be-feat__poll label,
.wsp-be-feat__booking label,
.wsp-be-feat__pay label {
	display: block;
	margin-bottom: 0.35rem;
}
.wsp-be-feat__vcard-body label span,
.wsp-be-feat__poll label span,
.wsp-be-feat__booking label span,
.wsp-be-feat__pay label span {
	display: block;
	font-size: 0.55rem;
	font-weight: 600;
	color: #444;
	margin-bottom: 0.15rem;
}
.wsp-be-feat__vcard-body input,
.wsp-be-feat__poll input,
.wsp-be-feat__booking input,
.wsp-be-feat__pay input,
.wsp-be-feat__pay select {
	width: 100%;
	padding: 0.28rem 0.4rem;
	border: 1px solid #c5c5c5;
	border-radius: 3px;
	font-size: 0.58rem;
	background: #fff;
	color: #333;
}
.wsp-be-feat__check {
	display: flex !important;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.58rem;
	margin: 0.35rem 0 !important;
}
.wsp-be-feat__vcard-foot,
.wsp-be-feat__poll-foot,
.wsp-be-feat__booking-foot,
.wsp-be-feat__pay-foot {
	display: flex;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem 0.65rem;
	border-top: 1px solid #e8e8e8;
}
.wsp-be-feat__btn {
	padding: 0.3rem 0.65rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #f5f5f5;
	font-size: 0.58rem;
	font-weight: 600;
	color: #333;
	cursor: default;
}
.wsp-be-feat__btn--green {
	background: linear-gradient(180deg, #4cd964 0%, #34b84a 100%);
	border-color: #2da640;
	color: #fff;
}
.wsp-be-feat__btn--blue {
	background: #e8f0fe;
	border-color: #a8c7fa;
	color: #1a56db;
}
.wsp-be-feat__btn--pink {
	background: #fce8e8;
	border-color: #f5c2c2;
	color: #c62828;
}
.wsp-be-feat__btn--red {
	background: #dc3545;
	border-color: #c82333;
	color: #fff;
}
.wsp-be-feat__btn--dark {
	background: #2a2a2a;
	border-color: #444;
	color: #eee;
}
.wsp-be-feat__btn--sm { font-size: 0.55rem; padding: 0.25rem 0.5rem; }
.wsp-be-feat__btn--wide { padding: 0.4rem 1rem; font-weight: 800; letter-spacing: 0.03em; }

/* Poll creator */
.wsp-be-feat__poll { padding: 0.65rem 0.85rem; }
.wsp-be-feat__poll-add {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.4rem;
	align-items: end;
	margin-bottom: 0.4rem;
}
.wsp-be-feat__poll-list {
	border: 1px solid #c5c5c5;
	border-radius: 3px;
	min-height: 4.5rem;
	margin-bottom: 0.4rem;
	background: #fff;
}
.wsp-be-feat__poll-list div {
	padding: 0.3rem 0.5rem;
	font-size: 0.6rem;
	border-bottom: 1px solid #eee;
}
.wsp-be-feat__poll-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.wsp-be-feat__poll-count {
	display: flex !important;
	align-items: center;
	gap: 0.35rem;
	margin: 0 !important;
}
.wsp-be-feat__poll-count input { width: 2.5rem !important; text-align: center; }

/* Booking creator */
.wsp-be-feat__booking { padding: 0.65rem 0.85rem; }
.wsp-be-feat__booking-add {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.4rem;
	align-items: end;
	margin-bottom: 0.4rem;
}
.wsp-be-feat__booking-list {
	border: 1px solid #c5c5c5;
	border-radius: 3px;
	min-height: 4rem;
	margin-bottom: 0.4rem;
	background: #fff;
}
.wsp-be-feat__booking-list div {
	padding: 0.3rem 0.5rem;
	font-size: 0.6rem;
	border-bottom: 1px solid #eee;
}
.wsp-be-feat__booking-list .is-selected {
	background: #d6e8ff;
}

/* Booking dashboard */
.wsp-be-feat__bdash {
	padding: 0.65rem 0.75rem 0.75rem;
	color: #e0e0e0;
}
.wsp-be-feat__bdash h3 {
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	font-weight: 800;
	color: #39ff14;
	text-shadow: 0 0 12px rgba(57, 255, 20, 0.4);
}
.wsp-be-feat__bdash > p {
	margin: 0 0 0.5rem;
	font-size: 0.62rem;
	color: #aaa;
}
.wsp-be-feat__bdash-table {
	overflow-x: auto;
	border: 1px solid #333;
	border-radius: 4px;
	margin-bottom: 0.4rem;
}
.wsp-be-feat__bdash-row {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.15rem;
	padding: 0.3rem 0.35rem;
	font-size: 0.48rem;
	border-bottom: 1px solid #222;
	white-space: nowrap;
}
.wsp-be-feat__bdash-row--head {
	background: #1a1a1a;
	color: #39ff14;
	font-weight: 700;
}
.wsp-be-feat__bdash-row.is-alt { background: #141e30; }
.wsp-be-feat__link {
	color: #4da6ff !important;
	text-decoration: underline;
	cursor: default;
}
.wsp-be-feat__bdash-powered {
	margin: 0.35rem 0;
	font-size: 0.5rem;
	color: #666;
	text-align: center;
}
.wsp-be-feat__bdash-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
}

/* Payment QR */
.wsp-be-feat__pay {
	padding: 0.75rem 0.85rem 0.5rem;
}
.wsp-be-feat__pay label span em {
	font-style: normal;
	color: #1a56db;
	font-weight: 400;
	margin-left: 0.25rem;
}
.wsp-be-feat__pay-amount {
	display: grid !important;
	grid-template-columns: 1fr auto;
	gap: 0.35rem;
	align-items: end;
}
.wsp-be-feat__pay-amount input { grid-column: 1; }
.wsp-be-feat__pay-amount em {
	font-size: 0.58rem;
	font-weight: 700;
	color: #666;
	font-style: normal;
	padding-bottom: 0.3rem;
}

.wsp-be-section--dashboard .wsp-be-feat {
	max-width: 100%;
}

@media (max-width: 720px) {
	.wsp-be-feat__grid--2 { grid-template-columns: 1fr; }
	.wsp-be-feat__bdash-row { font-size: 0.42rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wsp-be-mock__line,
	.wsp-be-mock__flag,
	.wsp-be-mock__profiles li,
	.wsp-be-mock__mode,
	.wsp-be-mock__table-row,
	.wsp-be-mock__bubble,
	.wsp-be-mock__stats > div,
	.wsp-be-mock__bar-fill {
		animation: none !important;
	}
}

/* ── API Configuration Guide mockups ── */

.wsp-pg--api-guide .wsp-be-guide__bg {
	background:
		radial-gradient(ellipse 80% 50% at 20% 0%, rgba(37, 211, 102, 0.12), transparent 55%),
		radial-gradient(ellipse 60% 40% at 90% 20%, rgba(139, 92, 246, 0.1), transparent 50%);
}

.wsp-api-mock {
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid var(--wsp-border);
	box-shadow: 0 12px 40px rgba(17, 17, 17, 0.08);
	background: #fff;
}

.wsp-api-mock__frame { min-height: 100%; }

.wsp-api-mock__titlebar {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 1rem;
	background: #fafafa;
	border-bottom: 1px solid var(--wsp-border);
	font-size: 0.78rem;
	font-weight: 700;
}

.wsp-api-mock__titlebar strong {
	flex: 1;
	font-size: 0.82rem;
}

.wsp-api-mock__titlebar--google { background: #f8f9fa; color: #1a73e8; }
.wsp-api-mock__titlebar--meta { background: #4267b2; color: #fff; }
.wsp-api-mock__titlebar--twilio { background: #f22f46; color: #fff; }
.wsp-api-mock__titlebar--purple { background: #f5f3ff; color: #5b21b6; }
.wsp-api-mock__titlebar--dark { background: #1e1e2e; color: #e2e8f0; }

.wsp-api-mock__dots {
	display: inline-flex;
	gap: 4px;
}
.wsp-api-mock__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ddd;
	display: block;
}
.wsp-api-mock__dots i:nth-child(1) { background: #ff5f57; }
.wsp-api-mock__dots i:nth-child(2) { background: #febc2e; }
.wsp-api-mock__dots i:nth-child(3) { background: #28c840; }

.wsp-api-mock__status {
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: rgba(17, 17, 17, 0.06);
}
.wsp-api-mock__status--ok {
	background: rgba(37, 211, 102, 0.15);
	color: #15803d;
}

.wsp-api-mock__body {
	padding: 1rem 1.1rem 1.15rem;
}

.wsp-api-mock__body--center {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.wsp-api-mock__body--split {
	display: grid;
	grid-template-columns: 120px 1fr;
	padding: 0;
	min-height: 200px;
}

.wsp-api-mock__body--terminal {
	background: #1e1e2e;
	padding: 0.85rem 1rem;
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.72rem;
	line-height: 1.55;
}

.wsp-api-mock__sidebar {
	padding: 0.85rem 0.65rem;
	background: #f5f6f7;
	border-right: 1px solid var(--wsp-border);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--wsp-muted);
}
.wsp-api-mock__sidebar--meta { background: #f0f2f5; }
.wsp-api-mock__sidebar span.is-active { color: #1a73e8; }
.wsp-api-mock__sidebar--meta span.is-active { color: #4267b2; }

.wsp-api-mock__panel {
	padding: 1rem;
}
.wsp-api-mock__panel h5 {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
}
.wsp-api-mock__panel p {
	margin: 0 0 0.75rem;
	font-size: 0.72rem;
	color: var(--wsp-muted);
}

.wsp-api-mock__body label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--wsp-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wsp-api-mock__field {
	padding: 0.55rem 0.65rem;
	margin-bottom: 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--wsp-border);
	background: #f8f9fa;
	font-size: 0.78rem;
	color: var(--wsp-ink-2);
}
.wsp-api-mock__field--mono {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.72rem;
	word-break: break-all;
}
.wsp-api-mock__field--area {
	min-height: 3rem;
	line-height: 1.45;
}
.wsp-api-mock__field--select {
	background: #fff;
}

.wsp-api-mock__section-label {
	margin: 0.5rem 0 0.35rem;
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #6366f1;
	letter-spacing: 0.05em;
}
.wsp-api-mock__section-label:first-child { margin-top: 0; }

.wsp-api-mock__row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}
.wsp-api-mock__row--end { justify-content: flex-end; }

.wsp-api-mock__chip {
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--wsp-cream);
	border: 1px solid var(--wsp-border);
	font-size: 0.72rem;
	font-weight: 600;
}

.wsp-api-mock__btn {
	border: 2px solid var(--wsp-ink);
	border-radius: 8px;
	padding: 0.45rem 0.85rem;
	font-size: 0.72rem;
	font-weight: 800;
	cursor: default;
	box-shadow: 2px 2px 0 var(--wsp-ink);
}
.wsp-api-mock__btn--lime { background: var(--wsp-lime); color: var(--wsp-ink); }
.wsp-api-mock__btn--blue { background: #1a73e8; color: #fff; border-color: #1557b0; box-shadow: 2px 2px 0 #1557b0; }
.wsp-api-mock__btn--red { background: #dc3545; color: #fff; border-color: #b02a37; box-shadow: 2px 2px 0 #b02a37; }
.wsp-api-mock__btn--full { width: 100%; margin-top: 0.5rem; }

.wsp-api-mock__check {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: #15803d;
}
.wsp-api-mock__check span {
	width: 1.1rem;
	height: 1.1rem;
	display: grid;
	place-items: center;
	border-radius: 4px;
	background: var(--wsp-wa);
	color: #fff;
	font-size: 0.65rem;
}

.wsp-api-mock__alert {
	padding: 0.55rem 0.65rem;
	border-radius: 8px;
	background: #fff3cd;
	border-left: 3px solid #ffc107;
	font-size: 0.72rem;
	color: #856404;
	margin-bottom: 0.5rem;
}
.wsp-api-mock__alert--info {
	background: #e8f4fd;
	border-left-color: #1a73e8;
	color: #1557b0;
}

.wsp-api-mock__qr {
	width: 120px;
	height: 120px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
	padding: 8px;
	border: 2px solid var(--wsp-border);
	border-radius: 8px;
	background: #fff;
}
.wsp-api-mock__qr span {
	background: #111;
	border-radius: 2px;
}
.wsp-api-mock__qr span:nth-child(odd) { opacity: 0.85; }
.wsp-api-mock__qr span:nth-child(3),
.wsp-api-mock__qr span:nth-child(6) { opacity: 0.4; }

.wsp-api-mock__log { color: #a6e3a1; }
.wsp-api-mock__log--dim { color: #6c7086; }
.wsp-api-mock__log--cmd { color: #89b4fa; }
.wsp-api-mock__log--ok { color: #a6e3a1; margin-top: 0.35rem; }
.wsp-api-mock__log--indent { padding-left: 1rem; }

.wsp-api-mock__titlebar--openai .wsp-brand,
.wsp-api-mock__titlebar--gemini .wsp-brand,
.wsp-api-mock__titlebar--claude .wsp-brand,
.wsp-api-mock__titlebar--deepseek .wsp-brand {
	margin-right: 0.35rem;
}

@media (max-width: 720px) {
	.wsp-api-mock__body--split { grid-template-columns: 1fr; }
	.wsp-api-mock__sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: 1px solid var(--wsp-border);
	}
}

/* Official WhatsApp API compare card */
.wsp-wapp-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
}
.wsp-wapp-compare__col {
	padding: 0.75rem;
	border-radius: 10px;
	border: 1px solid var(--wsp-border);
	background: #f8f9fa;
	font-size: 0.72rem;
}
.wsp-wapp-compare__col--highlight {
	background: rgba(37, 211, 102, 0.1);
	border-color: rgba(37, 211, 102, 0.35);
}
.wsp-wapp-compare__col h5 {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
}
.wsp-wapp-compare__col ul {
	margin: 0;
	padding-left: 1rem;
	line-height: 1.5;
	color: var(--wsp-muted);
}

.wsp-pg--wapp-guide .wsp-be-guide__bg {
	background:
		radial-gradient(ellipse 70% 45% at 15% 0%, rgba(66, 103, 178, 0.12), transparent 55%),
		radial-gradient(ellipse 55% 40% at 95% 15%, rgba(37, 211, 102, 0.1), transparent 50%);
}

/* How it works — guide */
.wsp-pg--hiw .wsp-be-guide__bg {
	background:
		radial-gradient(ellipse 75% 50% at 10% 0%, rgba(198, 255, 0, 0.14), transparent 55%),
		radial-gradient(ellipse 60% 40% at 90% 20%, rgba(56, 189, 248, 0.1), transparent 50%);
}

.wsp-hiw-guide__steps {
	display: grid;
	gap: 1.25rem;
}

.wsp-hiw-guide__card {
	grid-template-columns: minmax(0, 1fr) minmax(320px, 1.15fr);
}

.wsp-hiw-guide__step-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}

.wsp-hiw-guide__step-head h3 {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.25;
}

.wsp-hiw-guide__step-num {
	flex-shrink: 0;
	padding: 0.25rem 0.55rem;
	border-radius: 8px;
	font-size: 0.72rem;
	font-weight: 800;
	background: var(--wsp-ink);
	color: var(--wsp-lime);
}

.wsp-hiw-guide__step-head .wsp-be-chapter__ico {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 12px;
	box-shadow: 2px 2px 0 var(--wsp-ink);
}

.wsp-hiw-editions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	max-width: 52rem;
	margin: 0 auto;
}

.wsp-hiw-editions__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.35rem;
	border-radius: 18px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.wsp-hiw-editions__card:hover {
	transform: translateY(-3px);
	border-color: var(--wsp-ink);
	box-shadow: 0 12px 32px rgba(17, 17, 17, 0.08);
}

.wsp-hiw-editions__card--featured {
	border-color: var(--wsp-wa);
	background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), #fff 55%);
}

.wsp-hiw-editions__pill {
	display: inline-block;
	width: fit-content;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: var(--wsp-cream);
	border: 1px solid var(--wsp-border);
}

.wsp-hiw-editions__card strong {
	font-size: 1rem;
}
.wsp-hiw-editions__card > span {
	font-size: 0.82rem;
	color: var(--wsp-muted);
}
.wsp-hiw-editions__card em {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	font-style: normal;
	color: var(--wsp-wa);
}

@media (max-width: 720px) {
	.wsp-hiw-guide__card { grid-template-columns: 1fr; }
	.wsp-hiw-editions { grid-template-columns: 1fr; }
}

/* Official WhatsApp API — pricing section */
.wsp-wapp-pricing__head {
	max-width: 40rem;
	margin-bottom: 1.75rem;
}
.wsp-wapp-pricing__head h2 {
	margin: 0.35rem 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.wsp-wapp-pricing__lead {
	margin: 0;
	color: var(--wsp-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.wsp-wapp-pricing__grid {
	display: grid;
	grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr);
	gap: 1.5rem;
	align-items: start;
}

.wsp-wapp-pricing__rules {
	padding: 1.25rem;
	border-radius: 20px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	box-shadow: 0 8px 32px rgba(17, 17, 17, 0.04);
}

.wsp-wapp-pricing__bullets {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}
.wsp-wapp-pricing__bullets li {
	position: relative;
	padding-left: 1.15rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: #1a56db;
	font-weight: 500;
}
.wsp-wapp-pricing__bullets li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: #1a56db;
	font-weight: 800;
}

.wsp-wapp-pricing__cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}
.wsp-wapp-pricing__cat {
	padding: 0.55rem 0.65rem;
	border-radius: 10px;
	border: 1px solid var(--wsp-border);
	background: var(--wsp-cream);
	font-size: 0.72rem;
	line-height: 1.4;
}
.wsp-wapp-pricing__cat strong {
	display: block;
	font-size: 0.75rem;
	margin-bottom: 0.15rem;
}
.wsp-wapp-pricing__cat span { color: var(--wsp-muted); }
.wsp-wapp-pricing__cat--orange { border-left: 3px solid #ea580c; }
.wsp-wapp-pricing__cat--sky { border-left: 3px solid #0284c7; }
.wsp-wapp-pricing__cat--violet { border-left: 3px solid #7c3aed; }
.wsp-wapp-pricing__cat--lime { border-left: 3px solid var(--wsp-wa); }

.wsp-wapp-pricing__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.wsp-wapp-pricing__table-wrap {
	padding: 1rem;
	border-radius: 20px;
	background: #fff;
	border: 2px solid var(--wsp-border);
	box-shadow: 0 8px 32px rgba(17, 17, 17, 0.04);
}

.wsp-wapp-pricing__table-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}
.wsp-wapp-pricing__table-toolbar em {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wsp-muted);
	font-style: normal;
}

.wsp-wapp-pricing__search input {
	width: min(100%, 220px);
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--wsp-border);
	font-size: 0.85rem;
	background: var(--wsp-cream);
}

.wsp-wapp-pricing__table-scroll {
	overflow: auto;
	max-height: 420px;
	border-radius: 12px;
	border: 1px solid var(--wsp-border);
}

.wsp-wapp-pricing__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}
.wsp-wapp-pricing__table thead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f8f9fa;
}
.wsp-wapp-pricing__table th,
.wsp-wapp-pricing__table td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid rgba(17, 17, 17, 0.06);
	white-space: nowrap;
}
.wsp-wapp-pricing__table th[scope='col'] {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wsp-muted);
}
.wsp-wapp-pricing__table tbody tr:hover {
	background: rgba(37, 211, 102, 0.06);
}
.wsp-wapp-pricing__table tbody tr.is-hidden {
	display: none;
}
.wsp-wapp-pricing__free {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: rgba(37, 211, 102, 0.15);
	color: #15803d;
	font-size: 0.72rem;
	font-weight: 700;
}

.wsp-wapp-pricing__disclaimer {
	margin: 0.85rem 0 0.35rem;
	font-size: 0.75rem;
	color: var(--wsp-muted);
	line-height: 1.55;
}
.wsp-wapp-pricing__cta { margin: 0; }
.wsp-wapp-pricing__link {
	font-size: 0.85rem;
	font-weight: 700;
	color: #1a56db;
	text-decoration: none;
}
.wsp-wapp-pricing__link:hover { text-decoration: underline; }

@media (max-width: 960px) {
	.wsp-wapp-pricing__grid { grid-template-columns: 1fr; }
	.wsp-wapp-pricing__cats { grid-template-columns: 1fr; }
}