/* /voice/kennismaking/ — stap 1 van de Voice-proef. Bouwt op voice-ios.css (tokens
   --ios-*) en neemt de formulierkaart 1:1 over van persoonlijke-gegevens.php. */
.ios-top-bar {
	position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 10;
	background: rgba(242,242,247,.72);
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	padding: 0 52px;
	display: flex; align-items: center; justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
@media (min-width: 521px) {
	.ios-top-bar { width: 520px; max-width: 520px; left: calc(50% - 260px); right: auto; }
}
.ios-top-bar__title { font-size: 17px; font-weight: 600; color: #1c1c1e; letter-spacing: -0.01em; }
.ios-top-bar__back, .ios-top-bar__back:link, .ios-top-bar__back:visited,
.ios-top-bar__back:hover, .ios-top-bar__back:focus, .ios-top-bar__back:active {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	width: 32px; height: 32px; border-radius: 50%;
	background: rgba(60,60,67,.08) !important; color: #3c3c43 !important;
	display: flex; align-items: center; justify-content: center;
	text-decoration: none !important; outline: 0;
}
.ios-page.pg-page { padding-top: 60px; }

.pg-card { background: #fff; border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.pg-row {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 18px; border-top: 0.5px solid rgba(60,60,67,0.18);
}
.pg-row:first-child { border-top: 0; }
.pg-row__lbl { font-size: 15px; color: #1c1c1e; flex-shrink: 0; margin: 0; font-weight: 400; }
.pg-row__input {
	flex: 1; border: 0; outline: 0; background: transparent;
	font-size: 16px; color: #1c1c1e; padding: 6px 0; min-width: 0;
	font-family: inherit;
	text-align: right;
}
.pg-row__input::placeholder { color: #c6c6c8; }
.pg-foot {
	text-align: center; color: #8e8e93; font-size: 13px;
	margin: 18px 16px 8px; line-height: 1.45;
}

/* Eigen aan de proef */
.vp-steps { display: flex; gap: 6px; justify-content: center; margin: 18px 0 14px; }
.vp-steps i { width: 26px; height: 4px; border-radius: 2px; background: rgba(60,60,67,.18); }
.vp-steps i.is-on { background: var(--ios-primary); }
.vp-h1 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: #1c1c1e; margin: 0 0 8px; text-align: center; }
.vp-intro { font-size: 15px; line-height: 1.5; color: #3c3c43; text-align: center; margin: 0 8px 18px; }
.vp-btn { display: block; width: 100%; text-align: center; padding: 14px 20px; font-size: 16px; cursor: pointer; margin-top: 6px; }
/* Een regel lucht tussen de knop en de toelichting eronder. */
form + .pg-foot { margin-top: 34px; }
.vp-btn:link, .vp-btn:visited, .vp-btn:hover { text-decoration: none; }
.vp-err { color: #c0241c; font-size: 14px; text-align: center; margin: 0 0 10px; }
.vp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vp-msg { padding: 26px 20px; text-align: center; margin-top: 18px; }
.vp-msg p { font-size: 15px; line-height: 1.5; color: #3c3c43; margin: 0 0 12px; }
.vp-msg .vp-sub { color: #8e8e93; font-size: 13px; }