/* 3DBooster - /toagenda/ (loaded only by page-toagenda.php, on top of webhosting.css). Scoped to .ta* so no other page is affected. */

/* ---------- Demo card in the hero ---------- */
.ta-demo { width:min(100%,430px); padding:42px 36px; display:grid; gap:14px; justify-items:start; color:var(--white); background:var(--ink); border-radius:28px; box-shadow:0 30px 70px rgba(23,25,28,.22); }
.ta-demo>svg { color:var(--orange); }
.ta-demo-tag { color:var(--orange); font-size:.76rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.ta-demo h2 { margin:0; color:var(--white); font-size:1.8rem; line-height:1.12; }
.ta-demo p { margin:0 0 10px; color:#c3c5c9; font-size:1rem; line-height:1.65; }

/* ---------- Package names: long ones ("Scholengemeenschap", "Campus / Enterprise") must fit and keep the prices aligned ---------- */
.ta .wh-plan h3 { font-size:clamp(1.5rem,1.9vw,1.75rem); line-height:1.2; overflow-wrap:break-word; hyphens:auto; }
@media (min-width:1181px) {
	.ta .wh-plan h3 { min-height:2.4em; }
	.ta .wh-plan-tag { min-height:6.6em; }
}

/* ---------- Steps ---------- */
.ta-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ta-step { padding:34px 32px; border:1px solid var(--line); border-radius:24px; background:var(--white); }
.ta-step-nr { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; color:var(--ink); background:var(--orange); font-size:1.15rem; font-weight:850; }
.ta-step h3 { margin:22px 0 8px; font-size:1.3rem; }
.ta-step p { margin:0; font-size:.96rem; line-height:1.65; }

/* ---------- Responsive ---------- */
@media (max-width:980px) {
	.ta-steps { grid-template-columns:1fr; }
}
@media (max-width:680px) {
	.ta-demo { padding:32px 26px; }
	.ta-step { padding:28px 24px; }
}