.vp{max-width:1180px;margin:0 auto;padding:24px 16px}.vp *{box-sizing:border-box}.vp h1,.vp h2,.vp h3{line-height:1.2}.vp-hero{padding:56px 0;max-width:760px}.vp-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:700;opacity:.65}.vp-btn{display:inline-block;padding:11px 18px;border:0;border-radius:6px;background:#222;color:#fff!important;text-decoration:none;cursor:pointer}.vp-btn.secondary{background:#eee;color:#222!important}.vp-section{padding:28px 0}.vp-products,.vp-grid,.vp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.vp-card{display:block;margin:0 0 16px;padding:20px;border:1px solid #ddd;border-radius:8px;background:#fff;color:inherit;text-decoration:none}.vp-auth{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:40px 0}.vp form{display:flex;flex-direction:column;gap:9px}.vp input,.vp select,.vp textarea{width:100%;padding:10px;border:1px solid #bbb;border-radius:5px}.vp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vp-check{display:flex!important;align-items:flex-start;gap:8px}.vp-check input{width:auto}.vp-terms{max-height:220px;overflow:auto;padding:14px;background:#f7f7f7;border:1px solid #ddd}.vp-brand{padding:10px 0 24px;border-bottom:1px solid #ddd}.vp-layout{display:grid;grid-template-columns:230px 1fr;gap:32px;padding-top:28px}.vp-nav{display:flex;flex-direction:column;gap:4px}.vp-nav a{padding:10px 12px;border-radius:5px;color:inherit;text-decoration:none}.vp-nav a.active{background:#222;color:#fff}.vp-main{min-width:0}.vp-heading,.vp-row{display:flex;justify-content:space-between;align-items:center;gap:18px}.vp-stats .vp-card{display:flex;flex-direction:column}.vp-stats strong{font-size:2rem}.vp-alert,.vp-error{padding:16px;margin-bottom:18px;border:1px solid #ccc;border-radius:7px;background:#fafafa}.vp-comment{padding:12px 0;border-bottom:1px solid #eee}.vp-comment small{display:block;color:#666}@media(max-width:800px){.vp-products,.vp-grid,.vp-stats,.vp-auth,.vp-layout{grid-template-columns:1fr}.vp-nav{border-bottom:1px solid #ddd;padding-bottom:18px}.vp-row{align-items:flex-start;flex-direction:column}}


/* 1.1.0 – projektista alkava ajanvaraus */
.vp-slot-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vp-slot-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 18px 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
}

.vp-slot-card > div,
.vp-slot-info,
.vp-slot-action {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vp-slot-action {
	align-items: flex-end;
	min-width: 150px;
}

.vp-slot-type {
	display: inline-block;
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .7;
}

.vp-project-picker {
	margin-bottom: 22px;
}

.vp-booking-filters {
	margin: 18px 0 10px;
	font-weight: 700;
}

@media(max-width:700px) {
	.vp-slot-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.vp-slot-action {
		align-items: flex-start;
		width: 100%;
	}
}


/* 1.2.1 – asiakkaan uusi navigaatio ja ohjattu aloitus */
.vp-lead {
	max-width: 760px;
	font-size: 1.08rem;
	color: #555;
}

.vp-guide {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0;
}

.vp-guide-step {
	position: relative;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #fff;
}

.vp-guide-step.is-current {
	border-width: 2px;
}

.vp-guide-step.is-done {
	background: #fafafa;
}

.vp-guide-visual {
	margin-bottom: 10px;
	font-size: 2rem;
	line-height: 1;
}

.vp-guide-number {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #eee;
	font-weight: 700;
}

.vp-guide-step h3 {
	margin: 8px 0;
}

.vp-next-step {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin: 24px 0;
	padding: 24px;
	border: 2px solid #ddd;
	border-radius: 10px;
	background: #fafafa;
}

.vp-next-step h3 {
	margin: 4px 0 6px;
}

.vp-section-block {
	margin: 0 0 38px;
}

.vp-wellbeing-item summary {
	cursor: pointer;
}

.vp-wellbeing-details {
	padding-top: 12px;
}

@media(max-width:900px) {
	.vp-guide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media(max-width:600px) {
	.vp-guide {
		grid-template-columns: 1fr;
	}

	.vp-next-step {
		align-items: flex-start;
		flex-direction: column;
	}
}