/* /assets/css/team-enrollment.css
   Styles for /team-enrollment/ - scoped to .te-page
   Loaded alongside onboarding-certificate.css, which already supplies the
   shared .oc-* framework (page reset, .oc-wrap, .oc-hero, .oc-btn, .oc-stats,
   .oc-section, .oc-steps, .oc-faq, .oc-reveal, .oc-bleed, .oc-price-card /
   .oc-price-box). Only the pieces unique to this page live here.
   Class prefix: .te-* (team enrollment)
*/

/* === Included checklist + journey diagram === */
.te-included-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 40px;
	align-items: start;
}
.te-included-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.te-included-list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid #e7e5df;
	font-size: 1.02rem;
	color: var(--oc-ink);
}
.te-included-list li:last-child { border-bottom: none; }
.te-included-list li::before {
	content: '\2713';
	color: var(--oc-green);
	font-weight: 700;
	flex: 0 0 auto;
}

.te-journey {
	background: #fff;
	border: 1px solid #e7e5df;
	border-radius: var(--oc-radius);
	padding: 24px;
	box-shadow: var(--oc-shadow);
}
.te-journey-label { font-size: .85rem; color: var(--oc-ink-soft); margin-bottom: 16px; }
.te-journey-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.te-journey-dot {
	width: 18px; height: 18px; border-radius: 50%;
	background: #eaf5df; border: 2px solid var(--oc-green);
	flex: 0 0 auto;
}
.te-journey-arrow { color: var(--oc-ink-soft); margin: 0 6px; }
.te-journey-badge {
	flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
	background: var(--oc-blue-dark); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .68rem; text-align: center; line-height: 1.1;
	padding: 4px;
}
.te-journey p:last-child { margin-top: 16px; margin-bottom: 0; font-size: .9rem; }

.te-callout { max-width: 780px; font-size: 1.02rem; color: var(--oc-ink); }

/* === Curriculum grid (numbered, two columns) === */
.te-course-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 32px;
	margin-top: 8px;
}
.te-course-item {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid #e7e5df;
}
.te-course-item .te-n {
	font-weight: 700;
	color: var(--oc-green-dark);
	font-size: 1rem;
	flex: 0 0 auto;
	min-width: 1.4rem;
}
.te-course-item .te-t { font-size: 1rem; color: var(--oc-ink); }

/* === Admin toolkit grid === */
.te-toolkit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.te-toolkit-card {
	background: #fff;
	border: 1px solid #e7e5df;
	border-radius: var(--oc-radius);
	padding: 26px 28px;
	box-shadow: var(--oc-shadow);
}
.te-toolkit-card h3 { font-size: 1.1rem; color: var(--oc-blue-dark); margin-bottom: .4em; }
.te-toolkit-card p  { margin: 0; font-size: .96rem; }

.te-pull {
	margin: 32px 0 0;
	padding: 20px 28px;
	border-left: 4px solid var(--oc-green);
	background: #eaf5df;
	border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
	font-size: 1.08rem;
	color: var(--oc-blue-dark);
}

/* === Pricing: seat calculator === */
.te-price-figure { font-size: 2.6rem; font-weight: 700; color: #fff; }
.te-price-figure span { font-size: 1.05rem; font-weight: 400; color: #cfd8e6; }
.te-calc label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 10px; color: #fff; }
.te-calc-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.te-calc-row input[type=number] {
	width: 5.5rem;
	padding: 10px 12px;
	font-size: 1rem;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 6px;
	background: rgba(255,255,255,.08);
	color: #fff;
}
.te-calc-total { font-size: 1.5rem; font-weight: 700; color: #fff; }
.te-calc-note { font-size: .85rem; color: #9fb0c7; margin: 14px 0 0; }
.te-calc-note--warn { color: var(--oc-peach); font-weight: 700; }

/* === Responsive === */
@media (max-width: 900px) {
	.te-included-grid { grid-template-columns: 1fr; }
	.te-toolkit-grid  { grid-template-columns: 1fr; }
	.te-course-grid   { grid-template-columns: 1fr; }
}