:root {
	--ink: #183b31;
	--ink-soft: #47665d;
	--green: #167a5a;
	--green-dark: #0c5f45;
	--mint: #dff5e8;
	--cream: #fbfaf4;
	--yellow: #f5cf58;
	--yellow-soft: #fff4c7;
	--lilac: #e9e0f8;
	--white: #fff;
	--line: #dbe5df;
	--shadow: 0 22px 55px rgba(25, 72, 57, 0.12);
	--radius: 24px;
	--shell: 1180px;
}

/* Glossary archive and individual definitions. */
.glossary-hero,
.glossary-term-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 78% 24%, rgba(245, 207, 88, 0.2), transparent 24%),
		linear-gradient(135deg, #edf8f2, #fbfaf4 58%, #f6f0ff);
}

.glossary-hero::after,
.glossary-term-hero::after {
	position: absolute;
	right: -90px;
	bottom: -130px;
	width: 330px;
	height: 330px;
	background: rgba(22, 122, 90, 0.06);
	border-radius: 50%;
	content: "";
}

.glossary-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	align-items: center;
	gap: 70px;
	min-height: 480px;
	padding-top: 76px;
	padding-bottom: 76px;
}

.glossary-hero__content {
	max-width: 720px;
}

.glossary-hero h1,
.glossary-term-hero h1 {
	margin: 12px 0 20px;
	color: var(--ink);
	font-size: clamp(58px, 7vw, 94px);
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.glossary-hero__lead {
	max-width: 680px;
	margin: 0;
	color: var(--ink-soft);
	font-size: clamp(21px, 2.2vw, 28px);
	line-height: 1.42;
}

.glossary-hero__count {
	display: inline-flex;
	margin: 28px 0 0;
	padding: 9px 14px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(22, 122, 90, 0.16);
	border-radius: 999px;
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 850;
}

.glossary-hero__media {
	display: grid;
	width: 290px;
	height: 290px;
	place-items: center;
	justify-self: end;
	background: rgba(255, 255, 255, 0.66);
	border: 1px solid rgba(22, 122, 90, 0.14);
	border-radius: 42px;
	box-shadow: 0 28px 65px rgba(25, 72, 57, 0.13);
	transform: rotate(2deg);
}

.glossary-hero__image {
	display: block;
	width: 86%;
	height: 86%;
	object-fit: contain;
	transform: rotate(-2deg);
}

.glossary-hero__fallback {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--green-dark);
	font-size: 21px;
	font-weight: 950;
	transform: rotate(-2deg);
}

.glossary-hero__fallback span:first-child,
.glossary-hero__fallback span:last-child {
	display: grid;
	width: 78px;
	height: 78px;
	place-items: center;
	background: var(--mint);
	border-radius: 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 29px;
}

.glossary-hero__fallback span:last-child {
	background: var(--green);
	color: var(--white);
	font-family: inherit;
}

.glossary-browser {
	padding: 78px 0 110px;
}

.glossary-tools {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
	align-items: end;
	gap: 60px;
	margin-bottom: 34px;
}

.glossary-tools h2 {
	margin: 7px 0 10px;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1.04;
}

.glossary-tools > div > p:last-child {
	max-width: 600px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 17px;
}

.glossary-search label {
	display: block;
	margin-bottom: 8px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 850;
}

.glossary-search > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.glossary-search input {
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	background: var(--white);
	border: 1px solid #bdd3c9;
	border-radius: 13px;
	color: var(--ink);
	font: inherit;
}

.glossary-search input:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(22, 122, 90, 0.14);
	outline: 0;
}

.glossary-search > a {
	display: inline-block;
	margin-top: 9px;
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 800;
}

.glossary-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 54px;
	padding: 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(25, 72, 57, 0.07);
}

.glossary-alphabet a,
.glossary-alphabet span {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.glossary-alphabet a {
	background: var(--mint);
	color: var(--green-dark);
}

.glossary-alphabet a:hover,
.glossary-alphabet a:focus-visible {
	background: var(--green);
	color: var(--white);
}

.glossary-alphabet span {
	color: #aebcb6;
}

.glossary-search-summary {
	margin: -28px 0 45px;
	color: var(--ink-soft);
	font-size: 14px;
}

.glossary-groups {
	display: grid;
	gap: 70px;
}

.glossary-letter-group {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 30px;
	scroll-margin-top: 28px;
}

.glossary-letter-group__heading {
	position: sticky;
	top: 24px;
	align-self: start;
}

.glossary-letter-group__heading > p {
	display: grid;
	width: 76px;
	height: 76px;
	margin: 0;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 37px;
	font-weight: 900;
	box-shadow: 0 16px 28px rgba(22, 122, 90, 0.2);
}

.glossary-letter-group__heading h2 {
	margin: 9px 0 0;
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.glossary-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 14px;
}

.glossary-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	align-items: start;
	gap: 17px;
	min-height: 180px;
	padding: 23px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
	box-shadow: 0 14px 36px rgba(25, 72, 57, 0.06);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.glossary-card:hover {
	border-color: rgba(22, 122, 90, 0.34);
	box-shadow: 0 19px 44px rgba(25, 72, 57, 0.1);
	transform: translateY(-2px);
}

.glossary-card__icon {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	overflow: hidden;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 900;
}

.glossary-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.glossary-card__alias {
	margin: 0 0 5px;
	color: var(--green-dark);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.07em;
	line-height: 1.35;
	text-transform: uppercase;
}

.glossary-card h3 {
	margin: 0 0 10px;
	font-size: 24px;
	line-height: 1.12;
}

.glossary-card h3 a {
	color: var(--ink);
	text-decoration: none;
}

.glossary-card h3 a:hover,
.glossary-card h3 a:focus-visible {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.glossary-card > div:last-child > p:not(.glossary-card__alias) {
	margin: 0 0 20px;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.58;
}

.glossary-card__link {
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.glossary-card__link span {
	display: inline-block;
	margin-left: 3px;
	transition: transform 180ms ease;
}

.glossary-card__link:hover span {
	transform: translateX(4px);
}

.glossary-empty {
	max-width: 660px;
	margin: 50px auto;
	padding: 50px 30px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 24px;
	text-align: center;
}

.glossary-empty > span {
	display: grid;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	place-items: center;
	background: var(--yellow-soft);
	border-radius: 20px;
	font-size: 30px;
	font-weight: 950;
}

.glossary-empty h2 {
	margin: 0 0 8px;
}

.glossary-empty p {
	margin: 0 0 24px;
	color: var(--ink-soft);
}

.glossary-term-hero {
	padding: 36px 0 76px;
}

.glossary-term-hero .shell {
	position: relative;
	z-index: 1;
}

.glossary-term-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	align-items: center;
	gap: 70px;
	padding-top: 65px;
}

.glossary-term-hero h1 {
	font-size: clamp(52px, 7vw, 88px);
}

.glossary-term-hero__alias {
	display: inline-block;
	margin: -6px 0 22px;
	padding: 7px 11px;
	background: rgba(255, 255, 255, 0.76);
	border-radius: 9px;
	color: var(--green-dark);
	font-size: 12px;
	font-weight: 850;
}

.glossary-term-hero__definition {
	max-width: 760px;
	margin: 0;
	color: var(--ink-soft);
	font-size: clamp(20px, 2vw, 25px);
	font-weight: 600;
	line-height: 1.5;
}

.glossary-term-hero__icon {
	display: grid;
	width: 190px;
	height: 190px;
	place-items: center;
	overflow: hidden;
	background: var(--green);
	color: var(--white);
	border: 9px solid rgba(255, 255, 255, 0.7);
	border-radius: 48px;
	box-shadow: 0 25px 55px rgba(25, 72, 57, 0.16);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 74px;
	font-weight: 900;
	transform: rotate(2deg);
}

.glossary-term-hero__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: rotate(-2deg);
}

.glossary-term-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	align-items: start;
	gap: 70px;
	padding-top: 75px;
	padding-bottom: 55px;
}

.glossary-term-content {
	min-width: 0;
	font-size: 18px;
	line-height: 1.72;
}

.glossary-term-content > :first-child {
	margin-top: 0;
}

.glossary-term-content h2 {
	margin: 54px 0 17px;
	font-size: clamp(30px, 3.5vw, 42px);
	line-height: 1.1;
}

.glossary-term-content h3 {
	margin: 38px 0 12px;
	font-size: 25px;
}

.glossary-term-content p,
.glossary-term-content ul,
.glossary-term-content ol {
	margin-top: 0;
	margin-bottom: 23px;
}

.glossary-term-content img {
	max-width: 100%;
	height: auto;
	border-radius: 22px;
}

.glossary-term-content figure {
	margin: 34px 0;
}

.glossary-term-content figcaption {
	margin-top: 10px;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.glossary-simple-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	margin: 30px 0 40px;
	padding: 22px;
	background: #f2f8f4;
	border: 1px solid var(--line);
	border-radius: 20px;
}

.glossary-simple-flow span {
	padding: 16px 10px;
	background: var(--white);
	border: 1px solid rgba(22, 122, 90, 0.15);
	border-radius: 13px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.35;
	text-align: center;
}

.glossary-simple-flow i {
	color: var(--green);
	font-size: 18px;
	font-style: normal;
	font-weight: 950;
}

.glossary-simple-flow--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.glossary-term-sidebar {
	position: sticky;
	top: 24px;
	display: grid;
	gap: 16px;
}

.glossary-term-example,
.glossary-related {
	padding: 25px;
	border-radius: 22px;
}

.glossary-term-example {
	background: var(--yellow-soft);
	border: 1px solid #eedb96;
}

.glossary-related {
	background: var(--white);
	border: 1px solid var(--line);
}

.glossary-term-example h2,
.glossary-related h2 {
	margin: 7px 0 12px;
	font-size: 23px;
	line-height: 1.12;
}

.glossary-term-example > p:last-child {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.55;
}

.glossary-related ul {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.glossary-related a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 10px 12px;
	background: #f6faf7;
	border-radius: 11px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}

.glossary-related a:hover,
.glossary-related a:focus-visible {
	background: var(--mint);
	color: var(--green-dark);
}

.glossary-term-footer {
	padding-top: 18px;
	padding-bottom: 100px;
}

.glossary-term-footer > a {
	display: flex;
	align-items: center;
	gap: 17px;
	max-width: 420px;
	padding: 20px;
	background: var(--mint);
	border-radius: 18px;
	color: var(--ink);
	text-decoration: none;
}

.glossary-term-footer span {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 15px;
	font-size: 14px;
	font-weight: 950;
}

.glossary-term-footer strong {
	font-size: 16px;
}

@media (max-width: 900px) {
	.glossary-hero__inner {
		grid-template-columns: minmax(0, 1fr) 220px;
		gap: 35px;
		min-height: 420px;
	}

	.glossary-hero__media {
		width: 210px;
		height: 210px;
		border-radius: 34px;
	}

	.glossary-tools {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.glossary-card-grid {
		grid-template-columns: 1fr;
	}

	.glossary-card {
		min-height: 0;
	}

	.glossary-term-layout {
		grid-template-columns: minmax(0, 1fr) 285px;
		gap: 38px;
	}
}

@media (max-width: 700px) {
	.glossary-hero__inner,
	.glossary-term-hero__inner {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.glossary-hero__inner {
		padding-top: 58px;
		padding-bottom: 62px;
	}

	.glossary-hero h1,
	.glossary-term-hero h1 {
		font-size: clamp(48px, 16vw, 66px);
	}

	.glossary-hero__media {
		width: min(66vw, 230px);
		height: min(66vw, 230px);
		justify-self: start;
	}

	.glossary-browser {
		padding-top: 58px;
		padding-bottom: 80px;
	}

	.glossary-search > div {
		grid-template-columns: 1fr;
	}

	.glossary-search .button {
		width: 100%;
	}

	.glossary-alphabet {
		gap: 6px;
		padding: 12px;
	}

	.glossary-letter-group {
		grid-template-columns: 1fr;
		gap: 17px;
	}

	.glossary-letter-group__heading {
		position: static;
		display: flex;
		align-items: center;
		gap: 13px;
	}

	.glossary-letter-group__heading > p {
		width: 58px;
		height: 58px;
		border-radius: 18px;
		font-size: 29px;
	}

	.glossary-letter-group__heading h2 {
		margin: 0;
	}

	.glossary-card {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
		padding: 18px;
	}

	.glossary-card__icon {
		width: 46px;
		height: 46px;
		border-radius: 14px;
	}

	.glossary-card h3 {
		font-size: 22px;
	}

	.glossary-term-hero {
		padding-top: 24px;
		padding-bottom: 58px;
	}

	.glossary-term-hero__inner {
		padding-top: 48px;
	}

	.glossary-term-hero__icon {
		width: 145px;
		height: 145px;
		justify-self: start;
		border-radius: 38px;
		font-size: 58px;
	}

	.glossary-term-layout {
		grid-template-columns: 1fr;
		gap: 45px;
		padding-top: 58px;
	}

	.glossary-term-sidebar {
		position: static;
	}

	.glossary-simple-flow {
		grid-template-columns: 1fr;
	}

	.glossary-simple-flow i {
		transform: rotate(90deg);
		text-align: center;
	}

	.glossary-simple-flow--three {
		grid-template-columns: 1fr;
	}
}

/* Rich Academy lessons */
.lesson-introduction.lesson-introduction--illustrated {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px;
	align-items: center;
	gap: 24px;
	padding: 24px 25px 24px 30px;
	background: linear-gradient(135deg, var(--mint), #fffdf4);
	border: 1px solid rgba(22, 122, 90, 0.14);
	border-left: 0;
	border-radius: 22px;
}

.lesson-introduction__eyebrow,
.lesson-garden-metaphor__eyebrow,
.lesson-scenario__label,
.lesson-source-card__eyebrow {
	margin: 0 0 8px !important;
	color: var(--green-dark);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lesson-introduction__media {
	margin: 0;
}

.lesson-introduction__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--cream);
	border: 4px solid var(--white);
	border-radius: 20px;
	box-shadow: 0 14px 30px rgba(43, 68, 57, 0.12);
}

.lesson-garden-metaphor {
	margin: 42px 0;
	padding: 30px;
	background: #fff9e5;
	border: 1px solid #f0dfad;
	border-radius: 22px;
}

.lesson-garden-metaphor h2 {
	margin: 0 0 15px;
	color: var(--ink);
	font-size: clamp(28px, 3vw, 36px);
}

.lesson-garden-metaphor p {
	margin: 0 0 14px;
}

.lesson-garden-metaphor__limit {
	margin: 19px 0 0 !important;
	padding-top: 17px;
	border-top: 1px solid rgba(168, 108, 0, 0.2);
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-observation-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13px;
	margin: 28px 0 45px;
}

.lesson-observation-grid article {
	padding: 22px 19px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 18px;
}

.lesson-observation-grid article > span {
	display: grid;
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 11px;
	font-size: 12px;
	font-weight: 950;
}

.lesson-observation-grid h3 {
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 18px;
}

.lesson-observation-grid p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-scenario {
	margin: 28px 0 46px;
	padding: 29px;
	background: var(--lilac);
	border: 1px solid rgba(108, 77, 161, 0.15);
	border-radius: 22px;
}

.lesson-scenario > p:not(.lesson-scenario__label) {
	margin: 0 0 21px;
	color: var(--ink);
}

.lesson-scenario dl {
	display: grid;
	gap: 10px;
	margin: 0;
}

.lesson-scenario dl > div {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: 18px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.72);
	border-radius: 13px;
}

.lesson-scenario dt {
	color: #5e4688;
	font-size: 13px;
	font-weight: 900;
}

.lesson-scenario dd {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-field-mission {
	margin: 48px 0 54px;
	padding: 32px;
	background:
		radial-gradient(circle at 94% 12%, rgba(245, 196, 74, 0.23), transparent 27%),
		linear-gradient(145deg, #edf8f2, #fffdf6);
	border: 1px solid rgba(22, 122, 90, 0.18);
	border-radius: 24px;
}

.lesson-field-mission__badge {
	display: inline-flex;
	margin: 0 0 10px !important;
	padding: 6px 11px;
	background: var(--green);
	color: var(--white);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.lesson-field-mission h2 {
	margin: 0 0 13px;
	color: var(--ink);
	font-size: clamp(29px, 3.2vw, 38px);
}

.lesson-field-mission > p:not(.lesson-field-mission__badge) {
	margin: 0 0 22px;
}

.lesson-field-mission__brief {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 14px;
	margin: 22px 0;
	padding: 17px;
	background: rgba(255, 255, 255, 0.82);
	border-radius: 15px;
}

.lesson-field-mission__brief-icon {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	background: var(--yellow-soft);
	color: var(--ink);
	border-radius: 13px;
	font-size: 22px;
}

.lesson-field-mission__brief strong {
	color: var(--ink);
}

.lesson-field-mission__brief p {
	margin: 3px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-field-mission__brief .lesson-field-mission__brief-title {
	margin: 0;
	color: var(--ink);
}

.lesson-field-mission__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	margin: 0 0 22px;
	padding: 0;
	counter-reset: field-step;
	list-style: none;
}

.lesson-field-mission__steps li {
	position: relative;
	min-height: 116px;
	padding: 18px 17px 17px 53px;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(22, 122, 90, 0.11);
	border-radius: 15px;
	counter-increment: field-step;
}

.lesson-field-mission__steps li::before {
	position: absolute;
	top: 18px;
	left: 16px;
	display: grid;
	width: 27px;
	height: 27px;
	place-items: center;
	content: counter(field-step);
	background: var(--green-dark);
	color: var(--white);
	border-radius: 9px;
	font-size: 11px;
	font-weight: 950;
}

.lesson-field-mission__steps strong,
.lesson-field-mission__steps span {
	display: block;
}

.lesson-field-mission__steps strong {
	margin-bottom: 5px;
	color: var(--ink);
	font-size: 14px;
}

.lesson-field-mission__steps span {
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-source-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 30px;
	margin: 54px 0;
	padding: 28px 30px;
	background: #eff8f3;
	border: 1px solid rgba(22, 122, 90, 0.15);
	border-radius: 22px;
}

.lesson-source-card h2 {
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 25px;
}

.lesson-source-card p:not(.lesson-source-card__eyebrow) {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-source-card .button {
	max-width: 250px;
	text-align: center;
}

@media (max-width: 760px) {
	.lesson-introduction.lesson-introduction--illustrated {
		grid-template-columns: minmax(0, 1fr) 88px;
		gap: 15px;
		padding: 18px;
	}

	.lesson-introduction__media img {
		border-width: 3px;
		border-radius: 16px;
	}

	.lesson-garden-metaphor,
	.lesson-scenario,
	.lesson-field-mission,
	.lesson-source-card {
		padding: 22px 19px;
	}

	.lesson-observation-grid,
	.lesson-field-mission__steps {
		grid-template-columns: 1fr;
	}

	.lesson-scenario dl > div,
	.lesson-source-card {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.lesson-source-card {
		gap: 20px;
	}

	.lesson-source-card .button {
		width: 100%;
		max-width: none;
	}
}

/* Practical learning blocks */
.lesson-practice {
	margin-top: 54px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.lesson-job-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0 38px;
}

.lesson-job-grid article {
	padding: 22px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 58, 45, 0.06);
}

.lesson-job-grid__label {
	display: inline-flex;
	margin: 0 0 12px !important;
	padding: 5px 9px;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
}

.lesson-job-grid h3 {
	margin: 0 0 14px;
	color: var(--ink);
	font-size: 18px;
}

.lesson-job-grid article p:not(.lesson-job-grid__label) {
	margin: 9px 0;
	font-size: 14px;
}

.lesson-ai-infographic {
	margin: 25px 0 38px;
	padding: 28px;
	background: linear-gradient(135deg, #f2faf5, #fff8dd);
	border: 1px solid rgba(22, 122, 90, 0.22);
	border-radius: 20px;
}

.lesson-ai-infographic__flow {
	display: grid;
	grid-template-columns: minmax(125px, 1fr) auto minmax(120px, 0.8fr) auto minmax(135px, 1fr) auto minmax(150px, 1.15fr);
	align-items: center;
	gap: 12px;
}

.lesson-ai-infographic__flow > i {
	color: var(--green);
	font-size: 24px;
	font-style: normal;
	font-weight: 900;
}

.lesson-ai-infographic__step {
	display: grid;
	min-height: 134px;
	align-content: center;
	gap: 5px;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 15px;
	text-align: center;
}

.lesson-ai-infographic__step > span {
	display: grid;
	width: 28px;
	height: 28px;
	margin: 0 auto 5px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 900;
}

.lesson-ai-infographic__step small {
	color: var(--ink-soft);
	line-height: 1.45;
}

.lesson-ai-infographic__step--human {
	border-color: rgba(215, 156, 0, 0.42);
}

.lesson-ai-infographic__mouth {
	display: grid;
	min-height: 134px;
	place-items: center;
	align-content: center;
	overflow: hidden;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 50% 50% 44% 44%;
	text-align: center;
}

.lesson-ai-infographic__mouth::after {
	content: "";
	width: 56px;
	height: 17px;
	margin-top: 8px;
	background: #0b3c2d;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-top: 0;
	border-radius: 0 0 50% 50%;
}

.lesson-ai-infographic__mouth span {
	font-size: 24px;
	font-weight: 950;
}

.lesson-ai-infographic__mouth strong {
	font-size: 12px;
}

.lesson-ai-infographic figcaption {
	margin-top: 18px;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.lesson-practical-callout {
	margin: 24px 0 36px;
	padding: 20px 22px;
	background: var(--yellow-soft);
	border-left: 4px solid #d79c00;
	border-radius: 0 14px 14px 0;
}

.lesson-practical-callout p {
	margin: 6px 0 0;
}

.lesson-solution {
	margin: 24px 0;
	border: 1px solid rgba(22, 122, 90, 0.28);
	border-radius: 15px;
	background: var(--white);
}

.lesson-solution summary {
	padding: 17px 20px;
	color: var(--green-dark);
	cursor: pointer;
	font-weight: 850;
}

.lesson-solution summary:hover,
.lesson-solution summary:focus-visible {
	background: var(--mint);
}

.lesson-solution[open] summary {
	border-bottom: 1px solid var(--line);
}

.lesson-solution > div {
	padding: 8px 22px 22px;
}

.lesson-solution h3 {
	margin-top: 20px;
	font-size: 18px;
}

.lesson-practice-checklist {
	margin: 28px 0 10px;
	padding: 22px;
	background: #f2faf5;
	border: 1px solid rgba(22, 122, 90, 0.24);
	border-radius: 16px;
}

.lesson-practice-checklist ul {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.lesson-job-grid {
		grid-template-columns: 1fr;
	}

	.lesson-ai-infographic {
		padding: 20px;
	}

	.lesson-ai-infographic__flow {
		grid-template-columns: 1fr;
	}

	.lesson-ai-infographic__flow > i {
		transform: rotate(90deg);
		text-align: center;
	}

	.lesson-ai-infographic__mouth {
		width: 150px;
		min-height: 130px;
		margin: 0 auto;
	}
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: "Urbanist", "Avenir Next", Avenir, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.65;
}

a {
	color: inherit;
}

button,
input,
textarea,
select {
	font: inherit;
}

.shell {
	width: min(calc(100% - 40px), var(--shell));
	margin-inline: auto;
}

.skip-link {
	position: fixed;
	z-index: 100;
	top: 12px;
	left: 12px;
	padding: 10px 16px;
	transform: translateY(-150%);
	background: var(--ink);
	color: var(--white);
	border-radius: 8px;
}

.skip-link:focus {
	transform: translateY(0);
}

:focus-visible {
	outline: 3px solid #176ee8;
	outline-offset: 4px;
}

.site-header {
	position: relative;
	z-index: 20;
	background: rgba(251, 250, 244, 0.94);
	border-bottom: 1px solid rgba(24, 59, 49, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	min-height: 82px;
	gap: 30px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-right: auto;
	text-decoration: none;
	line-height: 1;
}

.brand__mark {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 52% 48% 56% 44%;
	font-size: 27px;
	font-weight: 900;
	font-style: italic;
}

.brand__logo {
	display: block;
	width: auto;
	max-width: 240px;
	height: auto;
	max-height: 64px;
	object-fit: contain;
}

.brand__identity {
	display: grid;
	min-height: 50px;
	align-content: center;
	gap: 6px;
	transform: translateY(1px);
}

.brand__site-title {
	color: var(--green-dark);
	font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", sans-serif;
	font-size: clamp(17px, 1.6vw, 22px);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 0.96;
	white-space: nowrap;
}

.brand__site-description {
	color: var(--ink-soft);
	font-family: "Avenir Next", Avenir, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.015em;
	line-height: 1.2;
	white-space: nowrap;
}

.brand__text {
	display: grid;
	gap: 3px;
}

.brand__text strong {
	font-size: 17px;
}

.brand__text span {
	color: var(--green);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.primary-nav__list,
.footer-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	color: var(--ink-soft);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.primary-nav a:hover {
	color: var(--green);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 54px;
	padding: 13px 24px;
	border: 0;
	border-radius: 14px;
	background: var(--green);
	box-shadow: 0 12px 22px rgba(22, 122, 90, 0.2);
	color: var(--white);
	font-weight: 800;
	text-decoration: none;
	transition: transform 160ms ease, background 160ms ease;
}

.button:hover {
	transform: translateY(-2px);
	background: var(--green-dark);
}

.button--small {
	min-height: 42px;
	padding: 9px 18px;
	font-size: 14px;
}

.menu-toggle {
	display: none;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-weight: 800;
}

.hero {
	position: relative;
	overflow: hidden;
	padding: 88px 0 110px;
	background:
		radial-gradient(circle at 15% 25%, rgba(223, 245, 232, 0.8), transparent 29%),
		linear-gradient(145deg, #fbfaf4 0%, #f8fbf5 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 76px;
}

.hero__decoration {
	position: absolute;
	z-index: 1;
	width: clamp(74px, 10vw, 150px);
	pointer-events: none;
}

.hero__decoration img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 170px;
	object-fit: contain;
}

.hero__decoration--left {
	bottom: 5%;
	left: 1%;
	transform: rotate(-7deg);
}

.hero__decoration--right {
	top: 6%;
	right: 1%;
	transform: rotate(7deg);
}

.eyebrow {
	margin: 0 0 18px;
	color: var(--green);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.eyebrow span {
	color: #e5a908;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1,
h2,
h3 {
	line-height: 1.08;
	letter-spacing: -0.035em;
}

h1 {
	max-width: 680px;
	margin-bottom: 24px;
	font-size: clamp(48px, 6.1vw, 78px);
}

h1 em {
	display: block;
	color: var(--green);
	font-style: normal;
}

.hero__lead {
	max-width: 600px;
	margin-bottom: 31px;
	color: var(--ink-soft);
	font-size: 20px;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 26px;
}

.text-link {
	color: var(--green-dark);
	font-weight: 850;
	text-underline-offset: 5px;
}

.hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 27px 0 0;
	padding: 0;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 700;
	list-style: none;
}

.hero__proof span {
	display: inline-grid;
	width: 20px;
	height: 20px;
	margin-right: 4px;
	place-items: center;
	background: var(--mint);
	color: var(--green);
	border-radius: 50%;
}

.hero__visual {
	position: relative;
	min-height: 455px;
}

.hero__image {
	position: absolute;
	z-index: 2;
	inset: 34px 22px;
	width: calc(100% - 44px);
	height: calc(100% - 68px);
	object-fit: contain;
	filter: drop-shadow(0 20px 26px rgba(24, 59, 49, 0.14));
}

.hero__visual::before {
	position: absolute;
	inset: 30px 15px 35px 35px;
	content: "";
	transform: rotate(4deg);
	background: linear-gradient(145deg, #d8f3df, #bce6cf);
	border-radius: 45% 55% 50% 50%;
}

.course-card {
	position: absolute;
	z-index: 2;
	top: 78px;
	left: 50%;
	width: min(370px, 82%);
	padding: 30px;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--white);
	border: 1px solid rgba(24, 59, 49, 0.1);
	border-radius: 26px;
	box-shadow: var(--shadow);
}

.course-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
}

.course-card__icon {
	display: grid;
	width: 51px;
	height: 51px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 16px;
	font-size: 25px;
}

.pill {
	display: inline-flex;
	padding: 6px 11px;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.course-card p {
	margin-bottom: 6px;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 800;
}

.course-card > strong {
	display: block;
	margin-bottom: 34px;
	font-size: 24px;
	line-height: 1.2;
}

.progress-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 800;
}

.progress {
	overflow: hidden;
	height: 9px;
	background: #e8eeea;
	border-radius: 99px;
}

.progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--green), #48bd86);
	border-radius: inherit;
}

.course-card small {
	display: block;
	margin-top: 9px;
	color: var(--ink-soft);
}

.float-card {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	background: var(--white);
	border-radius: 15px;
	box-shadow: 0 12px 35px rgba(25, 72, 57, 0.17);
}

.float-card > span {
	font-size: 24px;
}

.float-card strong,
.float-card small {
	display: block;
	line-height: 1.2;
}

.float-card strong {
	font-size: 14px;
}

.float-card small {
	margin-top: 4px;
	color: var(--ink-soft);
	font-size: 11px;
}

.float-card--xp {
	top: 22px;
	right: 5px;
}

.float-card--streak {
	bottom: 0;
	left: 3px;
}

.hero__orb {
	position: absolute;
	border-radius: 50%;
}

.hero__orb--one {
	right: 4%;
	bottom: 5%;
	width: 15px;
	height: 15px;
	background: var(--yellow);
}

.hero__orb--two {
	top: 15%;
	left: 4%;
	width: 9px;
	height: 9px;
	background: var(--green);
}

.section {
	padding: 105px 0;
}

.intro {
	background: var(--white);
	text-align: center;
}

.eyebrow--center {
	text-align: center;
}

.section h2 {
	margin-bottom: 18px;
	font-size: clamp(36px, 4.2vw, 55px);
}

.section__lead {
	max-width: 620px;
	margin: 0 auto 52px;
	color: var(--ink-soft);
	font-size: 19px;
}

.homepage-illustration {
	margin: -18px auto 48px;
}

.homepage-illustration img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.homepage-illustration--features {
	width: min(760px, 100%);
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	text-align: left;
}

.feature-card {
	padding: 34px;
	border-radius: var(--radius);
}

.feature-card__image {
	display: block;
	width: 100%;
	height: 150px;
	margin: 0 0 24px;
	object-fit: contain;
}

.feature-card--mint {
	background: var(--mint);
}

.feature-card--yellow {
	background: var(--yellow-soft);
}

.feature-card--lilac {
	background: var(--lilac);
}

.feature-card h3 {
	margin: 0 0 12px;
	font-size: 22px;
}

.feature-card p {
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 15px;
}

.learning-path {
	background: #f4f1e8;
}

.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 44px;
}

.section-heading h2 {
	max-width: 750px;
	margin-bottom: 0;
}

.section-heading--with-image {
	align-items: center;
}

.section-heading__image {
	display: block;
	width: clamp(150px, 18vw, 230px);
	height: 170px;
	margin-left: auto;
	object-fit: contain;
}

.level-list {
	display: grid;
	gap: 14px;
}

.level-card {
	display: grid;
	grid-template-columns: 110px 1fr auto;
	align-items: center;
	gap: 25px;
	min-height: 140px;
	padding: 25px 30px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
	border-radius: 20px;
}

.level-card--active {
	background: var(--white);
	border-color: rgba(22, 122, 90, 0.45);
	box-shadow: 0 12px 35px rgba(25, 72, 57, 0.08);
}

.level-card__number {
	color: #a8b7b0;
	font-size: 37px;
	font-weight: 900;
}

.level-card__identity {
	position: relative;
	display: grid;
	place-items: center;
}

.level-card__icon {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: contain;
}

.level-card__identity--with-icon .level-card__number {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1;
}

.level-card__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.level-card h3 {
	display: inline-block;
	margin: 6px 0 0;
	font-size: 24px;
}

.level-card p {
	margin: 9px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.pill--soft {
	background: #e9ece9;
	color: #75817d;
}

.level-card__arrow {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	background: #e8f5ef;
	border: 1px solid rgba(22, 122, 90, 0.2);
	color: var(--green);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(22, 122, 90, 0.1);
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.level-card__arrow svg {
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 180ms ease;
}

.level-card__arrow:hover {
	background: var(--green);
	color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(22, 122, 90, 0.22);
}

.level-card__arrow:hover svg {
	transform: translateX(2px);
}

.level-card__lock {
	color: #c6cec9;
	font-size: 12px;
}

.final-cta {
	position: relative;
	overflow: hidden;
	background: var(--green-dark);
	color: var(--white);
	text-align: center;
}

.final-cta__inner {
	position: relative;
	z-index: 2;
}

.final-cta__inner--with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
	align-items: center;
	gap: 70px;
	text-align: left;
}

.final-cta__inner--with-image p:not(.eyebrow) {
	margin-right: 0;
	margin-left: 0;
}

.final-cta__image {
	display: block;
	width: 100%;
	height: 300px;
	object-fit: contain;
}

.final-cta h2 {
	margin-bottom: 15px;
}

.final-cta p:not(.eyebrow) {
	max-width: 590px;
	margin: 0 auto 30px;
	color: #d2e7df;
}

.eyebrow--light {
	color: #bbebd5;
}

.button--light {
	background: var(--white);
	box-shadow: none;
	color: var(--green-dark);
}

.button--light:hover {
	background: var(--yellow-soft);
	color: var(--green-dark);
}

.site-footer {
	padding: 60px 0 25px;
	background: #12342b;
	color: #cee0da;
}

.site-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 50px;
	padding-bottom: 45px;
}

.brand--footer {
	color: var(--white);
}

.site-footer__inner p {
	max-width: 360px;
	margin: 18px 0 0;
	font-size: 14px;
}

.footer-nav {
	flex-wrap: wrap;
}

.footer-nav a,
.site-footer__legal a {
	color: #cee0da;
	font-size: 13px;
}

.site-footer__legal {
	display: flex;
	gap: 25px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: 12px;
}

.site-footer__legal p {
	margin: 0 auto 0 0;
}

.content-shell {
	min-height: 55vh;
	padding-top: 80px;
	padding-bottom: 100px;
}

.entry {
	max-width: 820px;
}

.entry h1 {
	font-size: clamp(42px, 5vw, 64px);
}

.path-hero {
	position: relative;
	overflow: hidden;
	padding: 88px 0;
	background: linear-gradient(145deg, #eef9f1, #faf8ef);
}

.path-hero__inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	align-items: center;
	gap: 90px;
}

.path-hero h1,
.level-hero h1 {
	margin-bottom: 22px;
	font-size: clamp(48px, 5.7vw, 74px);
}

.path-hero__lead,
.level-hero__lead {
	max-width: 710px;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 20px;
}

.level-hero__icon {
	display: block;
	width: 82px;
	height: 82px;
	margin: -20px 0 20px;
	object-fit: contain;
}

.path-summary {
	position: relative;
	z-index: 2;
	padding: 34px;
	background: var(--white);
	border: 1px solid rgba(24, 59, 49, 0.1);
	border-radius: 26px;
	box-shadow: var(--shadow);
}

.path-summary > strong {
	display: block;
	color: var(--green);
	font-size: 68px;
	line-height: 0.9;
}

.path-summary > span {
	font-size: 16px;
	font-weight: 850;
}

.path-summary__line {
	height: 1px;
	margin: 25px 0;
	background: var(--line);
}

.path-summary p {
	margin: 9px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 750;
}

.path-summary p span {
	color: var(--green);
}

.path-hero__leaf {
	position: absolute;
	background: var(--mint);
	border-radius: 100% 0 100% 0;
	opacity: 0.8;
}

.path-hero__leaf--one {
	top: -75px;
	right: -35px;
	width: 260px;
	height: 190px;
	transform: rotate(12deg);
}

.path-hero__leaf--two {
	bottom: -70px;
	left: 6%;
	width: 160px;
	height: 125px;
	transform: rotate(42deg);
}

.path-content {
	padding: 95px 0 115px;
	background: var(--cream);
}

.path-content__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 70px;
	margin-bottom: 55px;
}

.path-content__intro .eyebrow {
	grid-column: 1 / -1;
}

.path-content__intro h2,
.lesson-heading h2 {
	margin-bottom: 0;
	font-size: clamp(36px, 4.2vw, 54px);
}

.path-content__intro > p:last-child {
	align-self: end;
	margin-bottom: 3px;
	color: var(--ink-soft);
}

.path-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.path-card {
	position: relative;
	display: grid;
	grid-template-columns: 145px 1fr;
	overflow: hidden;
	min-height: 245px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
	border-radius: 24px;
}

.path-card--available {
	background: var(--white);
	border-color: color-mix(in srgb, var(--level-color) 45%, white);
	box-shadow: 0 15px 40px rgba(25, 72, 57, 0.09);
}

.path-card__visual {
	position: relative;
	display: grid;
	overflow: hidden;
	place-items: center;
	background: color-mix(in srgb, var(--level-color) 13%, white);
}

.path-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.path-card__icon {
	display: block;
	object-fit: contain;
}

.path-card__icon--main {
	width: 92px;
	height: 92px;
}

.path-card__icon--overlay {
	position: absolute;
	right: 11px;
	bottom: 11px;
	width: 48px;
	height: 48px;
	padding: 5px;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid color-mix(in srgb, var(--level-color) 25%, white);
	border-radius: 15px;
}

.path-card__number {
	position: absolute;
	top: 15px;
	left: 15px;
	color: var(--level-color);
	font-size: 14px;
	font-weight: 950;
}

.path-card__placeholder {
	position: relative;
	width: 74px;
	height: 104px;
}

.path-card__placeholder i {
	position: absolute;
	width: 46px;
	height: 65px;
	background: color-mix(in srgb, var(--level-color) 68%, white);
	border-radius: 100% 0 100% 0;
}

.path-card__placeholder i:nth-child(1) {
	top: 0;
	left: 8px;
	transform: rotate(27deg);
}

.path-card__placeholder i:nth-child(2) {
	right: 0;
	bottom: 7px;
	transform: rotate(70deg) scale(0.78);
}

.path-card__placeholder i:nth-child(3) {
	bottom: -4px;
	left: 0;
	transform: rotate(14deg) scale(0.65);
}

.path-card__body {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	padding: 27px;
}

.path-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 750;
}

.path-card h3 {
	margin: 18px 0 9px;
	font-size: 25px;
}

.path-card p {
	margin-bottom: 18px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.55;
}

.path-card__link,
.path-card__soon {
	margin-top: auto;
	font-size: 13px;
	font-weight: 850;
}

.path-card__link {
	color: var(--green-dark);
	text-underline-offset: 4px;
}

.path-card__soon {
	color: #8a9892;
}

.path-card__soon span {
	margin-right: 5px;
	font-size: 8px;
}

.level-hero {
	padding: 65px 0 75px;
	background:
		linear-gradient(120deg, color-mix(in srgb, var(--level-color) 10%, white), transparent 50%),
		var(--cream);
}

.level-hero__inner {
	display: grid;
	grid-template-columns: 1fr 390px;
	align-items: center;
	gap: 80px;
}

.back-link {
	display: inline-block;
	margin-bottom: 45px;
	color: var(--ink-soft);
	font-size: 14px;
	font-weight: 800;
	text-underline-offset: 4px;
}

.level-facts {
	display: flex;
	gap: 42px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.level-facts li {
	display: grid;
}

.level-facts strong {
	color: var(--level-color);
	font-size: 22px;
}

.level-facts span {
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 750;
}

.level-hero__visual {
	min-height: 360px;
}

.level-hero__image,
.level-hero__placeholder {
	width: 100%;
	height: 360px;
	object-fit: contain;
}

.level-hero__placeholder {
	display: grid;
	place-content: center;
	place-items: center;
	padding: 35px;
	background: color-mix(in srgb, var(--level-color) 12%, white);
	border: 2px dashed color-mix(in srgb, var(--level-color) 35%, white);
	border-radius: 45% 55% 47% 53%;
	text-align: center;
}

.level-hero__placeholder span {
	color: var(--level-color);
	font-size: 72px;
}

.level-hero__placeholder small {
	max-width: 180px;
	color: var(--ink-soft);
	font-weight: 800;
}

.lesson-section {
	padding: 90px 0 115px;
	background: var(--white);
}

.lesson-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 315px;
	align-items: start;
	gap: 45px;
}

.lesson-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 35px;
}

.lesson-heading > span {
	padding: 8px 13px;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
}

.lesson-list {
	display: grid;
	gap: 10px;
}

.lesson-row {
	display: grid;
	grid-template-columns: 38px 38px 1fr auto;
	align-items: center;
	gap: 14px;
	min-height: 88px;
	padding: 14px 18px;
	background: #f8faf8;
	border: 1px solid var(--line);
	border-radius: 16px;
}

.lesson-row--active {
	background: color-mix(in srgb, var(--level-color) 7%, white);
	border-color: color-mix(in srgb, var(--level-color) 38%, white);
}

.lesson-row__number {
	color: #8b9993;
	font-size: 12px;
	font-weight: 900;
}

.lesson-row__state {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	background: #e5eae7;
	color: #9aa69f;
	border-radius: 50%;
	font-size: 9px;
}

.lesson-row__state svg {
	width: 16px;
	height: 16px;
}

.lesson-row--active .lesson-row__state {
	background: var(--level-color);
	color: var(--white);
}

.lesson-row--completed {
	background: #f1faf5;
}

.lesson-row--completed .lesson-row__state {
	background: var(--green);
	color: var(--white);
}

.lesson-row h3 {
	margin: 0 0 5px;
	font-size: 16px;
	letter-spacing: -0.01em;
}

.lesson-row p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
}

.lesson-row__action,
.lesson-row__locked {
	font-size: 12px;
	font-weight: 850;
}

.lesson-row__action {
	color: var(--green-dark);
}

.lesson-row__locked {
	color: #9aa49f;
}

.level-progress-card {
	position: sticky;
	top: 25px;
	padding: 28px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 22px;
}

.level-reward-badge {
	display: grid;
	margin: 0 auto 24px;
	place-items: center;
	transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.level-reward-badge__image {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: contain;
}

.level-reward-badge--locked {
	filter: grayscale(1);
	opacity: 0.42;
}

.level-reward-badge--unlocked {
	filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--level-color) 24%, transparent));
	transform: scale(1.04);
}

.level-reward-badge__caption {
	margin: 0 0 22px;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.level-reward-badge--unlocked + .level-reward-badge__caption {
	color: var(--green-dark);
}

.level-stars-count {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 10px 16px;
	background: var(--yellow-soft);
	border-radius: 99px;
	color: #6b4a08;
	font-size: 13px;
	font-weight: 850;
}

.level-stars-count svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: #b8780f;
}

.level-progress-card > strong {
	display: block;
	margin-bottom: 13px;
	color: var(--level-color);
	font-size: 42px;
	line-height: 1;
}

.level-progress-card > p:not(.eyebrow) {
	margin: 17px 0 22px;
	color: var(--ink-soft);
	font-size: 13px;
}

.level-progress-card .button {
	width: 100%;
	font-size: 14px;
}

.locked-notice {
	margin-bottom: 28px;
	padding: 19px 22px;
	background: var(--yellow-soft);
	border-left: 4px solid #d79c00;
	border-radius: 0 14px 14px 0;
}

.locked-notice strong {
	color: var(--ink);
}

.locked-notice p {
	margin: 3px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-topbar {
	background: var(--white);
	border-bottom: 1px solid var(--line);
}

.lesson-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 62px;
	gap: 30px;
}

.back-link--compact {
	margin: 0;
}

.lesson-topbar__progress {
	display: grid;
	grid-template-columns: auto 165px;
	align-items: center;
	gap: 14px;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 800;
}

.lesson-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 78px;
	background:
		radial-gradient(circle at 88% 30%, rgba(223, 245, 232, 0.85), transparent 26%),
		linear-gradient(145deg, #f7fbf5, var(--cream));
}

.lesson-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	align-items: center;
	gap: 80px;
}

.lesson-hero h1 {
	max-width: 780px;
	margin-bottom: 23px;
	font-size: clamp(45px, 5.6vw, 72px);
}

.lesson-hero__lead {
	max-width: 680px;
	margin-bottom: 26px;
	color: var(--ink-soft);
	font-size: 19px;
}

.lesson-hero__meta {
	display: flex;
	gap: 20px;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 800;
}

.lesson-hero__meta span span {
	color: var(--green);
}

.lesson-hero__symbol {
	position: relative;
	display: grid;
	width: 280px;
	height: 280px;
	place-items: center;
	background: var(--mint);
	border-radius: 47% 53% 50% 50%;
}

.lesson-hero__symbol > span {
	position: relative;
	z-index: 2;
	display: grid;
	width: 112px;
	height: 112px;
	place-items: center;
	background: var(--green);
	box-shadow: 0 18px 35px rgba(22, 122, 90, 0.22);
	color: var(--white);
	border-radius: 34px;
	font-size: 36px;
	font-weight: 950;
}

.lesson-hero__symbol i {
	position: absolute;
	width: 35px;
	height: 48px;
	background: rgba(22, 122, 90, 0.18);
	border-radius: 100% 0;
}

.lesson-hero__symbol i:nth-child(2) {
	top: 35px;
	left: 44px;
	transform: rotate(35deg);
}

.lesson-hero__symbol i:nth-child(3) {
	right: 35px;
	bottom: 43px;
	transform: rotate(65deg);
}

.lesson-hero__symbol i:nth-child(4) {
	right: 54px;
	top: 29px;
	transform: rotate(110deg) scale(0.7);
}

.lesson-hero__media,
.lesson-hero__image {
	width: 310px;
	height: 310px;
	object-fit: contain;
}

.lesson-body-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) 280px;
	align-items: start;
	justify-content: center;
	gap: 65px;
	padding-top: 82px;
	padding-bottom: 115px;
}

.lesson-article {
	min-width: 0;
	color: #294a40;
	font-size: 18px;
}

.lesson-article > h2,
.lesson-recap h2 {
	scroll-margin-top: 25px;
	margin: 58px 0 20px;
	color: var(--ink);
	font-size: clamp(30px, 3.3vw, 42px);
}

.lesson-article > p {
	margin-bottom: 23px;
}

.lesson-introduction {
	margin-bottom: 42px;
	padding: 28px 30px;
	background: var(--mint);
	border-left: 5px solid var(--green);
	border-radius: 0 18px 18px 0;
	color: var(--ink);
	font-size: 20px;
	font-weight: 650;
}

.lesson-introduction p,
.lesson-callout p,
.lesson-reflection p {
	margin: 0;
}

.lesson-callout {
	margin: 35px 0 45px;
	padding: 25px 28px;
	background: var(--yellow-soft);
	border-radius: 18px;
}

.lesson-callout strong,
.lesson-reflection strong {
	display: block;
	margin-bottom: 7px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lesson-steps {
	display: grid;
	gap: 13px;
	margin: 28px 0 45px;
	padding: 0;
	counter-reset: lesson-step;
	list-style: none;
}

.lesson-steps li {
	position: relative;
	display: grid;
	min-height: 86px;
	padding: 18px 20px 18px 72px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 15px;
	counter-increment: lesson-step;
}

.lesson-steps li::before {
	position: absolute;
	top: 20px;
	left: 20px;
	display: grid;
	width: 35px;
	height: 35px;
	place-items: center;
	content: counter(lesson-step);
	background: var(--green);
	color: var(--white);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 900;
}

.lesson-steps strong {
	color: var(--ink);
}

.lesson-steps span {
	color: var(--ink-soft);
	font-size: 15px;
}

.lesson-example-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 28px 0 45px;
}

.lesson-example-grid > div {
	padding: 24px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 17px;
}

.lesson-example-grid > div > span {
	display: grid;
	width: 39px;
	height: 39px;
	margin-bottom: 15px;
	place-items: center;
	background: var(--mint);
	color: var(--green);
	border-radius: 12px;
	font-weight: 900;
}

.lesson-example-grid strong {
	display: block;
	color: var(--ink);
}

.lesson-example-grid p {
	margin: 7px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-everyday {
	margin: 54px 0 46px;
}

.lesson-everyday > h2 {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: clamp(30px, 3.3vw, 42px);
}

.lesson-everyday__intro {
	max-width: 680px;
	margin: 0 0 21px;
	color: var(--ink-soft);
}

.lesson-everyday-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.lesson-everyday-card {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	min-height: 112px;
	padding: 17px 18px;
	background: linear-gradient(135deg, #f7fbf8, var(--cream));
	border: 1px solid var(--line);
	border-radius: 17px;
}

.lesson-everyday-card__icon {
	display: grid;
	width: 60px;
	height: 60px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 18px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 30px;
	font-weight: 700;
}

.lesson-everyday-card:nth-child(2) .lesson-everyday-card__icon {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-everyday-card:nth-child(3) .lesson-everyday-card__icon {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-everyday-card:nth-child(4) .lesson-everyday-card__icon {
	background: #e8f2ff;
	color: #386b9c;
}

.lesson-everyday-card h3 {
	margin: 0 0 5px;
	color: var(--ink);
	font-size: 18px;
}

.lesson-everyday-card p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.5;
}

.lesson-family-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 26px 0 46px;
}

.lesson-family-card {
	padding: 25px;
	border: 1px solid var(--line);
	border-radius: 21px;
}

.lesson-family-card--classic {
	background: linear-gradient(145deg, #eff9f3, #fbfaf4);
}

.lesson-family-card--generative {
	background: linear-gradient(145deg, #f2ecfb, #fffaf0);
	border-color: rgba(108, 77, 161, 0.2);
}

.lesson-family-card__icon {
	display: grid;
	width: 52px;
	height: 52px;
	margin-bottom: 15px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 16px;
	font-size: 27px;
	font-weight: 900;
}

.lesson-family-card--generative .lesson-family-card__icon {
	background: #6c4da1;
}

.lesson-family-card__eyebrow {
	margin: 0 0 6px !important;
	color: var(--green-dark);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lesson-family-card--generative .lesson-family-card__eyebrow {
	color: #6c4da1;
}

.lesson-family-card h3 {
	margin: 0 0 17px;
	color: var(--ink);
	font-size: 21px;
}

.lesson-family-card > p:last-child {
	margin: 17px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-family-card__flow {
	display: flex;
	align-items: stretch;
	gap: 5px;
}

.lesson-family-card__node {
	display: grid;
	flex: 1 1 0;
	min-height: 58px;
	padding: 8px;
	place-items: center;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 11px;
	color: var(--ink);
	font-size: 11px;
	font-weight: 800;
	text-align: center;
}

.lesson-family-card__arrow {
	align-self: center;
	color: var(--green);
	font-size: 17px;
	font-style: normal;
	font-weight: 950;
}

.lesson-use-cases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 26px 0 46px;
}

.lesson-use-cases article {
	padding: 21px 19px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 18px;
}

.lesson-use-cases__icon {
	display: grid;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 14px;
	font-size: 22px;
	font-weight: 900;
}

.lesson-use-cases article:nth-child(2) .lesson-use-cases__icon {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-use-cases article:nth-child(3) .lesson-use-cases__icon {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-use-cases__label {
	margin: 0 0 5px !important;
	color: var(--green-dark);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.lesson-use-cases h3 {
	margin: 0 0 9px;
	color: var(--ink);
	font-size: 18px;
}

.lesson-use-cases article > p:not(.lesson-use-cases__label) {
	margin: 0 0 15px;
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-use-cases article > strong {
	display: block;
	padding-top: 13px;
	border-top: 1px solid var(--line);
	color: var(--green-dark);
	font-size: 12px;
}

.lesson-hybrid-flow {
	display: grid;
	gap: 9px;
	margin: 25px 0 47px;
	padding: 0;
	list-style: none;
}

.lesson-hybrid-flow li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 15px 17px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 15px;
}

.lesson-hybrid-flow li > div {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 13px;
	font-size: 12px;
	font-weight: 950;
}

.lesson-hybrid-flow p,
.lesson-hybrid-flow strong,
.lesson-hybrid-flow span {
	display: block;
}

.lesson-hybrid-flow p {
	margin: 0;
}

.lesson-hybrid-flow strong {
	color: var(--ink);
}

.lesson-hybrid-flow span {
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-hybrid-flow em {
	padding: 6px 9px;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
}

.lesson-hybrid-flow li:nth-child(3) em {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-hybrid-flow li:nth-child(4) em {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-output-check {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 9px;
	margin: 25px 0 30px;
}

.lesson-output-check > div:not(.lesson-output-check__arrow) {
	padding: 18px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 15px;
}

.lesson-output-check .lesson-output-check__label {
	display: inline-flex;
	margin: 0 0 9px !important;
	padding: 4px 8px;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 950;
	text-transform: uppercase;
}

.lesson-output-check strong {
	display: block;
	margin-bottom: 6px;
	color: var(--ink);
	font-size: 14px;
}

.lesson-output-check p:not(.lesson-output-check__label) {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
}

.lesson-output-check__arrow {
	align-self: center;
	color: var(--green);
	font-weight: 950;
}

.lesson-classification--embedded {
	margin-top: 20px;
}

@media (max-width: 680px) {
	.lesson-everyday {
		margin: 42px 0 38px;
	}

	.lesson-everyday-grid {
		grid-template-columns: 1fr;
	}

	.lesson-everyday-card {
		grid-template-columns: 56px minmax(0, 1fr);
		min-height: 0;
		padding: 15px;
	}

	.lesson-everyday-card__icon {
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}

	.lesson-family-compare,
	.lesson-use-cases {
		grid-template-columns: 1fr;
	}

	.lesson-hybrid-flow li {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.lesson-hybrid-flow em {
		grid-column: 2;
		justify-self: start;
	}

	.lesson-output-check {
		grid-template-columns: 1fr;
	}

	.lesson-output-check__arrow {
		transform: rotate(90deg);
		text-align: center;
	}
}

.lesson-classification {
	margin: 48px 0 55px;
	padding: 30px;
	background:
		radial-gradient(circle at 96% 8%, rgba(245, 207, 88, 0.22), transparent 28%),
		linear-gradient(145deg, #f2ecfb, #fffdf6);
	border: 1px solid rgba(108, 77, 161, 0.18);
	border-radius: 23px;
}

.lesson-classification__badge {
	display: inline-flex;
	margin: 0 0 10px !important;
	padding: 6px 11px;
	background: #6c4da1;
	color: var(--white);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.lesson-classification h2 {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: clamp(29px, 3.2vw, 38px);
}

.lesson-classification > p:not(.lesson-classification__badge) {
	margin: 0 0 19px;
}

.lesson-classification__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 20px;
}

.lesson-classification__choices span {
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(108, 77, 161, 0.15);
	border-radius: 999px;
	color: #5e4688;
	font-size: 12px;
	font-weight: 850;
}

.lesson-classification__cases {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.lesson-classification__cases li {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	min-height: 116px;
	padding: 16px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(108, 77, 161, 0.12);
	border-radius: 15px;
}

.lesson-classification__case-label {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	background: #6c4da1;
	color: var(--white);
	border-radius: 11px;
	font-size: 12px;
	font-weight: 950;
}

.lesson-classification__cases p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.55;
}

.lesson-classification__solution {
	margin: 0;
	background: rgba(255, 255, 255, 0.88);
}

.lesson-classification__solution ol {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 22px;
}

.lesson-classification__solution li {
	padding-left: 4px;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-classification__nuance {
	margin: 20px 0 0;
	padding: 16px;
	background: var(--yellow-soft);
	border-radius: 13px;
	color: var(--ink-soft);
	font-size: 14px;
}

@media (max-width: 680px) {
	.lesson-classification {
		padding: 22px 18px;
	}

	.lesson-classification__cases {
		grid-template-columns: 1fr;
	}

	.lesson-classification__cases li {
		min-height: 0;
	}
}

.lesson-check-list,
.lesson-warning-list {
	display: grid;
	gap: 12px;
	margin: 25px 0 42px;
	padding: 0;
	list-style: none;
}

.lesson-check-list li,
.lesson-warning-list li {
	position: relative;
	padding-left: 35px;
}

.lesson-check-list li::before,
.lesson-warning-list li::before {
	position: absolute;
	top: 1px;
	left: 0;
	display: grid;
	width: 23px;
	height: 23px;
	place-items: center;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 950;
}

.lesson-check-list li::before {
	content: "✓";
	background: var(--mint);
	color: var(--green);
}

.lesson-warning-list li::before {
	content: "!";
	background: var(--yellow-soft);
	color: #a86c00;
}

.lesson-recap {
	scroll-margin-top: 25px;
	margin: 65px 0 35px;
	padding: 36px;
	background: var(--green-dark);
	border-radius: 23px;
	color: #e4f2ed;
}

.lesson-recap__label {
	margin-bottom: 8px;
	color: #aee5cd;
	font-size: 12px;
	font-weight: 950;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lesson-recap h2 {
	margin: 0 0 22px;
	color: var(--white);
}

.lesson-recap ul {
	display: grid;
	gap: 10px;
	margin: 0;
	padding-left: 22px;
}

.lesson-reflection {
	padding: 28px 30px;
	background: var(--lilac);
	border-radius: 19px;
}

.lesson-complete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-top: 65px;
	padding-top: 42px;
	border-top: 1px solid var(--line);
}

.lesson-complete h2 {
	max-width: 520px;
	margin: 0 0 10px;
	color: var(--ink);
	font-size: 28px;
}

.lesson-complete p:not(.eyebrow) {
	max-width: 520px;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.lesson-complete .button {
	flex: 0 0 auto;
}

.lesson-sidebar {
	position: sticky;
	top: 25px;
	display: grid;
	min-width: 0;
	gap: 18px;
	max-height: calc(100vh - 50px);
	overflow-y: auto;
}

.lesson-sidebar nav,
.lesson-sidebar__tip {
	padding: 25px;
	border: 1px solid var(--line);
	border-radius: 19px;
}

.lesson-sidebar nav {
	background: var(--white);
}

.lesson-sidebar ol {
	display: grid;
	gap: 12px;
	margin: 0;
	padding-left: 20px;
	color: #93a099;
	font-size: 13px;
	font-weight: 800;
}

.lesson-sidebar a {
	color: var(--ink-soft);
	text-decoration: none;
}

.lesson-sidebar a:hover {
	color: var(--green);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.lesson-sidebar a {
	overflow-wrap: break-word;
	word-break: normal;
}

.lesson-sidebar__tip {
	background: var(--yellow-soft);
}

.lesson-sidebar__tip > span {
	display: grid;
	width: 36px;
	height: 36px;
	margin-bottom: 13px;
	place-items: center;
	background: var(--yellow);
	border-radius: 11px;
}

.lesson-sidebar__tip strong {
	color: var(--ink);
}

.lesson-sidebar__tip p {
	margin: 8px 0 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-quiz {
	scroll-margin-top: 25px;
	margin-top: 72px;
	padding-top: 58px;
	border-top: 1px solid var(--line);
}

.lesson-quiz > h2 {
	margin: 0 0 12px;
	color: var(--ink);
	font-size: clamp(34px, 3.8vw, 48px);
}

.lesson-quiz__intro {
	max-width: 650px;
	margin-bottom: 35px;
	color: var(--ink-soft);
}

.quiz-login {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 28px;
	background: var(--mint);
	border-radius: 20px;
}

.quiz-login strong {
	color: var(--ink);
	font-size: 20px;
}

.quiz-login p {
	margin: 6px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.quiz-login .button {
	flex: 0 0 auto;
}

.quiz-cooldown {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 4px 0 25px;
	padding: 22px 24px;
	background: var(--yellow-soft);
	border-left: 4px solid #d79c00;
	border-radius: 0 16px 16px 0;
}

.quiz-cooldown__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	color: #8a6400;
}

.quiz-cooldown__icon svg {
	width: 20px;
	height: 20px;
}

.quiz-cooldown strong {
	color: var(--ink);
	font-size: 16px;
}

.quiz-cooldown p {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.quiz-question input[type="radio"]:disabled {
	cursor: default;
	opacity: 0.7;
}

.quiz-form {
	display: grid;
	gap: 18px;
}

.quiz-question {
	margin: 0;
	padding: 27px;
	background: #f9fbf9;
	border: 1px solid var(--line);
	border-radius: 18px;
}

.quiz-question legend {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 0 0 18px;
	color: var(--ink);
	font-size: 17px;
	font-weight: 850;
}

.quiz-question legend > span {
	display: grid;
	flex: 0 0 31px;
	width: 31px;
	height: 31px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 10px;
	font-size: 12px;
}

.quiz-options {
	display: grid;
	gap: 9px;
}

.quiz-options label {
	position: relative;
	display: grid;
	grid-template-columns: 21px 1fr;
	align-items: start;
	gap: 11px;
	padding: 13px 15px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	font-size: 14px;
}

.quiz-options label:hover {
	border-color: rgba(22, 122, 90, 0.5);
}

.quiz-options label:has(input:checked) {
	background: var(--mint);
	border-color: var(--green);
}

.quiz-options label.is-answer-correct {
	background: #edf9f1;
	border-color: #248a55;
	box-shadow: inset 4px 0 0 #248a55;
}

.quiz-options label.is-answer-incorrect {
	background: #fee4e2 !important;
	border: 1px solid #d92d20 !important;
	box-shadow: inset 4px 0 0 #d92d20;
	color: #9f1c13;
}

.quiz-options input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--green);
}

.quiz-question--correct {
	border-color: rgba(36, 138, 85, 0.5);
}

.quiz-question-feedback {
	margin-top: 14px;
	padding: 14px 16px;
	border-left: 4px solid;
	border-radius: 0 10px 10px 0;
	font-size: 14px;
}

.quiz-question-feedback.is-correct {
	background: #edf9f1;
	border-color: #248a55;
	color: #12633b;
}

.quiz-question-feedback.is-incorrect {
	background: #fee4e2;
	border-color: #d92d20;
	color: #9f1c13;
}

.quiz-question-feedback p {
	margin: 5px 0 0;
	color: var(--ink);
}

.quiz-submit {
	justify-self: start;
	margin-top: 8px;
}

.quiz-result {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22px;
	margin-bottom: 25px;
	padding: 24px;
	border-radius: 18px;
}

.quiz-result__star {
	position: absolute;
	top: -14px;
	right: -14px;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	background: var(--yellow);
	border: 3px solid var(--white);
	border-radius: 50%;
	color: #6b4a08;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.quiz-result__star svg {
	width: 20px;
	height: 20px;
}

.quiz-result__star-label {
	margin: 0 0 5px !important;
	color: #8a6400 !important;
	font-size: 12px !important;
	font-weight: 850;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.quiz-result--success,
.quiz-result--saved {
	background: var(--mint);
	border: 1px solid rgba(22, 122, 90, 0.35);
}

.quiz-result__streak {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -8px 0 18px;
	color: #9a3412;
	font-size: 14px;
	font-weight: 800;
}

.quiz-result__streak svg {
	width: 18px;
	height: 18px;
}

.quiz-result__new-badge {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 14px;
	align-items: center;
	margin-bottom: 14px;
	padding: 16px 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.quiz-result__new-badge-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mint);
	color: var(--green-dark);
}

.quiz-result__new-badge-icon svg {
	width: 22px;
	height: 22px;
}

.quiz-result__new-badge-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
}

.quiz-result__new-badge-eyebrow {
	margin: 0 0 2px;
	color: var(--green-dark);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.quiz-result__new-badge-label {
	margin: 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 850;
}

.quiz-result--retry {
	background: var(--yellow-soft);
	border: 1px solid rgba(215, 156, 0, 0.35);
}

.quiz-result__score {
	display: grid;
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	place-items: center;
	background: var(--white);
	border-radius: 50%;
	color: var(--green-dark);
	font-size: 24px;
	font-weight: 950;
}

.quiz-result h3 {
	margin: 0 0 5px;
	color: var(--ink);
	font-size: 23px;
}

.quiz-result p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.quiz-feedback {
	display: grid;
	gap: 10px;
	margin: 20px 0 28px;
}

.quiz-feedback > div {
	padding: 18px 20px;
	border-left: 4px solid;
	border-radius: 0 12px 12px 0;
}

.quiz-feedback .is-correct {
	background: #f0faf4;
	border-color: var(--green);
}

.quiz-feedback .is-incorrect {
	background: #fff8df;
	border-color: #d79c00;
}

.quiz-feedback strong {
	color: var(--ink);
	font-size: 14px;
}

.quiz-feedback p {
	margin: 5px 0 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.quiz-next-button {
	margin-bottom: 30px;
}

.course-archive-hero {
	padding: 82px 0;
	background:
		radial-gradient(circle at 85% 30%, var(--mint), transparent 25%),
		linear-gradient(145deg, #f6fbf7, var(--cream));
}

.course-archive-hero h1 {
	max-width: 900px;
	margin-bottom: 22px;
	font-size: clamp(46px, 5.5vw, 70px);
}

.course-archive-hero > .shell > p:last-child {
	max-width: 690px;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 19px;
}

.course-archive-content {
	padding: 85px 0 115px;
	background: var(--white);
}

.course-levels {
	display: grid;
	gap: 18px;
}

.course-level-group {
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 24px;
	box-shadow: 0 12px 35px rgba(24, 59, 49, 0.06);
}

.course-level-group__summary {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto auto 44px;
	align-items: center;
	gap: 22px;
	padding: 22px 24px;
	cursor: pointer;
	list-style: none;
	transition: background 180ms ease, border-color 180ms ease;
}

.course-level-group__summary::-webkit-details-marker {
	display: none;
}

.course-level-group__summary:hover {
	background: color-mix(in srgb, var(--level-color) 5%, white);
}

.course-level-group__summary:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--level-color) 42%, white);
	outline-offset: -3px;
}

.course-level-group[open] .course-level-group__summary {
	background: color-mix(in srgb, var(--level-color) 6%, white);
	border-bottom: 1px solid var(--line);
}

.course-level-group__icon {
	display: grid;
	width: 92px;
	height: 76px;
	overflow: hidden;
	place-items: center;
	background: color-mix(in srgb, var(--level-color) 12%, white);
	color: var(--level-color);
	border: 1px dashed color-mix(in srgb, var(--level-color) 36%, white);
	border-radius: 18px;
	font-size: 18px;
	font-weight: 900;
}

.course-level-group__icon-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.course-level-group__heading {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.course-level-group__heading .eyebrow {
	margin: 0;
}

.course-level-group__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(24px, 2.7vw, 34px);
	font-weight: 800;
	line-height: 1.08;
}

.course-level-group__excerpt {
	color: var(--ink-soft);
	font-size: 14px;
}

.course-level-group__count {
	padding: 8px 12px;
	background: var(--cream);
	color: var(--green-dark);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
	white-space: nowrap;
}

.course-level-group__toggle {
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 50%;
}

.course-level-group__toggle svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	transition: transform 180ms ease;
}

.course-level-group[open] .course-level-group__toggle svg {
	transform: rotate(180deg);
}

.course-level-group__content {
	padding: 24px;
	background: #fbfcfb;
}

@media (max-width: 900px) {
	.site-header__inner {
		flex-wrap: wrap;
		padding: 15px 0;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.primary-nav {
		display: none;
		order: 4;
		width: 100%;
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav__list {
		display: grid;
		gap: 0;
		padding: 12px 0;
		border-top: 1px solid var(--line);
	}

	.primary-nav a {
		display: block;
		padding: 12px 0;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.hero__visual {
		width: min(100%, 560px);
		margin-inline: auto;
	}

	.feature-grid {
		grid-template-columns: 1fr;
	}

	.hero__decoration {
		opacity: 0.6;
	}

	.section-heading__image {
		width: 170px;
	}

	.final-cta__inner--with-image {
		grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
		gap: 35px;
	}

	.path-hero__inner,
	.level-hero__inner,
	.lesson-layout {
		grid-template-columns: 1fr;
	}

	.path-hero__inner {
		gap: 45px;
	}

	.path-summary {
		max-width: 390px;
	}

	.level-hero__visual {
		max-width: 480px;
	}

	.level-progress-card {
		position: static;
		order: -1;
	}

	.lesson-hero__inner {
		grid-template-columns: 1fr 220px;
		gap: 35px;
	}

	.lesson-hero__symbol {
		width: 210px;
		height: 210px;
	}

	.lesson-body-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.lesson-sidebar {
		position: static;
		grid-row: 1;
		grid-template-columns: 1fr 1fr;
		max-height: none;
		overflow-y: visible;
	}

	.course-level-group__summary {
		grid-template-columns: 76px minmax(0, 1fr) 40px;
		gap: 16px;
		padding: 19px;
	}

	.course-level-group__icon {
		width: 76px;
		height: 68px;
	}

	.course-level-group__count {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}

	.level-badge-chip--inline {
		display: none;
	}

	.course-level-group__toggle {
		grid-column: 3;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 620px) {
	.shell {
		width: min(calc(100% - 28px), var(--shell));
	}

	.site-header__cta {
		display: none;
	}

	.site-header .brand {
		gap: 8px;
		min-width: 0;
	}

	.site-header .brand__logo {
		max-width: 58px;
		max-height: 46px;
	}

	.site-header .brand__identity {
		max-width: 132px;
		min-height: 44px;
		gap: 4px;
		transform: none;
	}

	.site-header .brand__site-title {
		font-size: 15.5px;
		white-space: normal;
	}

	.site-header .brand__site-description {
		font-size: 11.5px;
		white-space: normal;
	}

	.hero {
		padding: 62px 0 75px;
	}

	h1 {
		font-size: clamp(44px, 13vw, 60px);
	}

	.hero__lead {
		font-size: 18px;
	}

	.hero__content,
	.hero__actions,
	.hero__visual {
		min-width: 0;
	}

	.hero__content {
		overflow-wrap: break-word;
	}

	.hero__actions,
	.section-heading,
	.site-footer__inner {
		align-items: stretch;
		flex-direction: column;
	}

	.hero__actions .button {
		max-width: 100%;
		width: 100%;
	}

	.hero__visual {
		min-height: 410px;
	}

	.hero__decoration {
		width: 72px;
		opacity: 0.42;
	}

	.hero__decoration--left {
		bottom: 1%;
	}

	.hero__decoration--right {
		top: 2%;
	}

	.course-card {
		width: 90%;
		padding: 24px;
	}

	.float-card--xp {
		right: -3px;
	}

	.float-card--streak {
		left: -3px;
	}

	.section {
		padding: 75px 0;
	}

	.feature-card {
		padding: 27px;
	}

	.feature-card__image {
		height: 125px;
	}

	.section-heading__image {
		width: min(210px, 70vw);
		height: 150px;
		margin: 0 auto;
	}

	.final-cta__inner--with-image {
		display: grid;
		grid-template-columns: 1fr;
		text-align: center;
	}

	.final-cta__inner--with-image p:not(.eyebrow) {
		margin-right: auto;
		margin-left: auto;
	}

	.final-cta__image {
		width: min(280px, 80vw);
		height: 220px;
		margin: 0 auto;
	}

	.level-card {
		grid-template-columns: 82px 1fr;
		padding: 22px 18px;
	}

	.level-card__icon {
		width: 84px;
		height: 84px;
	}

	.level-card h3 {
		display: block;
		margin: 10px 0 0;
	}

	.level-card__arrow,
	.level-card__lock {
		display: none;
	}

	.path-hero {
		padding: 62px 0;
	}

	.path-hero__inner {
		gap: 35px;
	}

	.path-hero h1,
	.level-hero h1 {
		font-size: clamp(42px, 12vw, 58px);
	}

	.path-content {
		padding: 72px 0 85px;
	}

	.path-content__intro,
	.path-grid {
		grid-template-columns: 1fr;
	}

	.path-content__intro {
		gap: 20px;
	}

	.path-card {
		grid-template-columns: 105px 1fr;
		min-height: 225px;
	}

	.path-card__icon--main {
		width: 70px;
		height: 70px;
	}

	.path-card__icon--overlay {
		width: 40px;
		height: 40px;
	}

	.path-card__body {
		padding: 22px 18px;
	}

	.path-card h3 {
		font-size: 21px;
	}

	.level-hero {
		padding: 45px 0 62px;
	}

	.level-hero__icon {
		width: 68px;
		height: 68px;
		margin-top: -10px;
	}

	.back-link {
		margin-bottom: 32px;
	}

	.level-facts {
		flex-wrap: wrap;
		gap: 20px 32px;
	}

	.level-hero__visual,
	.level-hero__image,
	.level-hero__placeholder {
		height: 300px;
		min-height: 300px;
	}

	.lesson-section {
		padding: 70px 0 85px;
	}

	.level-reward-badge__image {
		width: 130px;
		height: 130px;
	}

	.lesson-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.lesson-row {
		grid-template-columns: 30px 34px 1fr;
		padding: 14px 13px;
	}

	.lesson-row__action,
	.lesson-row__locked {
		grid-column: 3;
	}

	.lesson-topbar__inner {
		align-items: flex-start;
		flex-direction: column;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.lesson-topbar__progress {
		grid-template-columns: 105px 1fr;
		width: 100%;
	}

	.lesson-hero {
		padding: 55px 0 62px;
	}

	.lesson-hero__inner {
		grid-template-columns: 1fr;
	}

	.lesson-hero h1 {
		font-size: clamp(40px, 12vw, 56px);
	}

	.lesson-hero__symbol {
		width: 190px;
		height: 190px;
	}

	.lesson-body-layout {
		gap: 40px;
		padding-top: 55px;
		padding-bottom: 80px;
	}

	.lesson-sidebar {
		grid-template-columns: 1fr;
	}

	.lesson-article {
		font-size: 17px;
	}

	.lesson-introduction {
		padding: 22px;
		font-size: 18px;
	}

	.lesson-example-grid {
		grid-template-columns: 1fr;
	}

	.lesson-recap {
		padding: 27px 23px;
	}

	.lesson-complete {
		align-items: stretch;
		flex-direction: column;
	}

	.quiz-login {
		align-items: stretch;
		flex-direction: column;
	}

	.quiz-login .button {
		width: 100%;
	}

	.quiz-question {
		padding: 21px 17px;
	}

	.quiz-result {
		align-items: flex-start;
		flex-direction: column;
	}

	.quiz-result__star {
		top: -10px;
		right: -10px;
		width: 36px;
		height: 36px;
	}

	.quiz-result__star svg {
		width: 17px;
		height: 17px;
	}

	.course-archive-hero {
		padding: 60px 0;
	}

	.course-archive-hero h1 {
		font-size: clamp(40px, 12vw, 56px);
	}

	.course-archive-content {
		padding: 55px 0 75px;
	}

	.course-level-group__summary {
		grid-template-columns: 62px minmax(0, 1fr) 36px;
		gap: 12px;
		padding: 15px;
	}

	.course-level-group__icon {
		width: 62px;
		height: 58px;
		border-radius: 14px;
	}

	.course-level-group__title {
		font-size: 23px;
	}

	.course-level-group__excerpt {
		display: none;
	}

	.level-badge-chip--inline {
		display: none;
	}

	.course-level-group__toggle {
		width: 36px;
		height: 36px;
	}

	.course-level-group__content {
		padding: 14px;
	}

	.site-footer__legal {
		flex-wrap: wrap;
	}

	.site-footer__legal p {
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: 0.01ms !important;
	}
}

/* Playful lesson prototype */
.lesson-play__eyebrow {
	display: inline-flex;
	margin: 0 0 9px !important;
	padding: 6px 11px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lesson-play__lead {
	max-width: 680px;
	font-size: 18px;
}

.lesson-job-grid--playful article {
	position: relative;
	overflow: hidden;
	padding-top: 70px;
}

.lesson-job-grid--playful article:nth-child(1) {
	background: #fff8dd;
}

.lesson-job-grid--playful article:nth-child(2) {
	background: #f1edfb;
}

.lesson-job-grid--playful article:nth-child(3) {
	background: #edf9f1;
}

.lesson-job-card__icon {
	position: absolute;
	top: 18px;
	left: 22px;
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	background: var(--white);
	color: var(--green-dark);
	border-radius: 12px;
	box-shadow: 0 7px 18px rgba(20, 58, 45, 0.1);
	font-size: 17px;
	font-weight: 950;
}

.lesson-job-grid--playful h3 {
	font-size: 20px;
}

.lesson-job-grid--playful article p:not(.lesson-job-grid__label) {
	padding-top: 9px;
	border-top: 1px dashed rgba(24, 59, 49, 0.18);
}

.lesson-privacy-game {
	margin: 36px 0 42px;
	padding: 26px;
	background: #fff8dd;
	border: 1px solid rgba(215, 156, 0, 0.35);
	border-radius: 22px;
}

.lesson-privacy-game__heading {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 12px;
}

.lesson-privacy-game__heading > span {
	display: grid;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	place-items: center;
	background: var(--white);
	border-radius: 14px;
	font-size: 24px;
}

.lesson-privacy-game__heading h2 {
	margin: 2px 0 0;
}

.lesson-privacy-game__eyebrow {
	margin: 0 !important;
	color: #986d00 !important;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lesson-privacy-game__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}

.lesson-privacy-game__columns > div {
	padding: 18px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 14px;
}

.lesson-privacy-game__columns h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.lesson-privacy-game__columns ul {
	margin: 0;
	padding-left: 20px;
}

.lesson-privacy-game__columns li {
	margin: 6px 0;
	font-size: 14px;
}

.lesson-anonymize {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 13px;
}

.lesson-anonymize > span {
	padding: 4px 7px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 7px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}

.lesson-anonymize p {
	margin: 0;
	color: inherit;
	font-size: 14px;
}

.lesson-mouth-game {
	margin: 24px 0 42px;
	padding: 26px;
	background: linear-gradient(145deg, #f2faf5, #fff8dd);
	border: 1px solid rgba(22, 122, 90, 0.22);
	border-radius: 22px;
}

.lesson-mouth-game__stage {
	display: grid;
	grid-template-columns: 1fr auto 150px auto 1fr;
	align-items: center;
	gap: 14px;
}

.lesson-mouth-game__stage > i {
	color: var(--green);
	font-size: 28px;
	font-style: normal;
	font-weight: 950;
}

.lesson-mouth-game__card {
	display: grid;
	min-height: 126px;
	align-content: center;
	gap: 5px;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 16px;
	text-align: center;
}

.lesson-mouth-game__card > span {
	display: grid;
	width: 28px;
	height: 28px;
	margin: 0 auto 5px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 950;
}

.lesson-mouth-game__card small {
	color: var(--ink-soft);
	line-height: 1.45;
}

.lesson-mouth-game__mouth {
	display: grid;
	width: 150px;
	height: 126px;
	place-items: center;
	align-content: center;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 52% 52% 44% 44%;
}

.lesson-mouth-game__mouth b {
	font-size: 27px;
}

.lesson-mouth-game__mouth span {
	width: 62px;
	height: 20px;
	margin-top: 8px;
	background: #082f24;
	border: 3px solid var(--white);
	border-top: 0;
	border-radius: 0 0 50% 50%;
}

.lesson-mouth-game__check {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 17px;
	padding: 14px 16px;
	background: var(--green);
	color: var(--white);
	border-radius: 14px;
}

.lesson-mouth-game__check > span {
	display: grid;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--white);
	color: var(--green);
	border-radius: 50%;
	font-weight: 950;
}

.lesson-mouth-game__check p {
	margin: 0;
	color: inherit;
}

.lesson-mouth-game figcaption {
	margin-top: 14px;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.lesson-generated-infographic {
	margin: 24px 0 42px;
	padding: 12px;
	background: var(--white);
	border: 1px solid rgba(22, 122, 90, 0.22);
	border-radius: 22px;
	box-shadow: 0 16px 38px rgba(20, 58, 45, 0.08);
}

.lesson-generated-infographic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 15px;
}

.lesson-generated-infographic figcaption {
	margin: 12px 8px 4px;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.lesson-mission {
	margin: 36px 0;
	padding: 28px;
	background: #f1edfb;
	border: 1px solid rgba(105, 74, 160, 0.22);
	border-radius: 22px;
}

.lesson-mission__badge {
	display: inline-flex;
	margin: 0 0 8px !important;
	padding: 6px 10px;
	background: #6c4da1;
	color: var(--white) !important;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 850;
}

.lesson-mission h2 {
	margin-top: 4px;
}

.lesson-mission__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 11px;
	margin: 20px 0;
}

.lesson-mission__steps > div {
	padding: 15px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 13px;
}

.lesson-mission__steps span {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	background: #6c4da1;
	color: var(--white);
	border-radius: 9px;
	font-size: 12px;
	font-weight: 900;
}

.lesson-mission__steps p {
	margin: 9px 0 0;
	font-size: 14px;
}

.lesson-prompt {
	margin: 14px 0;
	padding: 17px;
	background: #f7f9f8;
	border: 1px dashed var(--green);
	border-radius: 12px;
	color: var(--ink);
	font-size: 14px;
	font-style: normal;
}

.lesson-solution-checks {
	margin-bottom: 0;
}

.lesson-play__recap {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding: 18px 20px;
	background: var(--mint);
	border-radius: 16px;
}

.lesson-play__recap > span {
	font-size: 28px;
}

.lesson-play__recap p {
	margin: 0;
}

@media (max-width: 900px) {
	.lesson-privacy-game__columns {
		grid-template-columns: 1fr;
	}

	.lesson-anonymize {
		align-items: flex-start;
		flex-direction: column;
	}

	.lesson-mouth-game__stage {
		grid-template-columns: 1fr;
	}

	.lesson-mouth-game__stage > i {
		transform: rotate(90deg);
		text-align: center;
	}

	.lesson-mouth-game__mouth {
		margin: 0 auto;
	}

	.lesson-mission__steps {
		grid-template-columns: 1fr;
	}
}

/* Zero-knowledge introduction */
.zero-hero {
	position: relative;
	overflow: hidden;
	padding: 105px 0 95px;
	background:
		radial-gradient(circle at 78% 25%, rgba(223, 245, 232, 0.95), transparent 27%),
		linear-gradient(145deg, #f7fbf8, #fffaf0);
	text-align: center;
}

.zero-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 890px;
}

.zero-hero__content {
	min-width: 0;
	text-align: center;
}

.zero-hero__inner--with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
	align-items: center;
	gap: clamp(35px, 5vw, 72px);
	max-width: 1180px;
}

.zero-hero__inner--with-image .zero-hero__content {
	text-align: left;
}

.zero-hero h1 {
	max-width: 850px;
	margin: 15px auto 20px;
	color: var(--ink);
	font-size: clamp(48px, 7vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.zero-hero__content > p:not(.eyebrow) {
	max-width: 720px;
	margin: 0 auto;
	color: var(--ink-soft);
	font-size: 20px;
	line-height: 1.65;
}

.zero-hero__inner--with-image h1,
.zero-hero__inner--with-image .zero-hero__content > p:not(.eyebrow) {
	margin-right: 0;
	margin-left: 0;
}

.zero-hero__reassurance {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.zero-hero__reassurance span {
	padding: 8px 12px;
	background: var(--white);
	color: var(--green-dark);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 750;
}

.zero-hero__inner--with-image .zero-hero__reassurance {
	justify-content: flex-start;
}

.zero-hero__media,
.zero-start__media {
	margin: 0;
}

.zero-hero__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 430px;
	margin: 0 auto;
	object-fit: contain;
	filter: drop-shadow(0 18px 24px rgba(17, 78, 54, 0.12));
}

.zero-hero__bubble {
	position: absolute;
	display: grid;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 50%;
	font-weight: 950;
	transform: rotate(-8deg);
}

.zero-hero__bubble--one {
	top: 65px;
	left: 7%;
	width: 78px;
	height: 78px;
	font-size: 36px;
}

.zero-hero__bubble--two {
	right: 8%;
	bottom: 48px;
	width: 96px;
	height: 96px;
	background: var(--yellow);
	color: var(--ink);
	font-size: 25px;
	transform: rotate(9deg);
}

.zero-hero--with-image .zero-hero__bubble--one {
	top: 35px;
	left: 2%;
	opacity: 0.2;
}

.zero-page__layout {
	max-width: 1000px;
	padding-top: 78px;
	padding-bottom: 85px;
}

.zero-page,
.zero-page__layout,
.zero-page__content,
.zero-intro,
.zero-intro > *,
.zero-intro figure {
	min-width: 0;
	max-width: 100%;
}

.zero-page__content > .zero-intro {
	display: grid;
	gap: 72px;
}

.zero-intro h2 {
	margin: 0 0 18px;
	color: var(--ink);
	font-size: clamp(32px, 5vw, 48px);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.zero-intro__eyebrow {
	margin: 0 0 9px !important;
	color: var(--green) !important;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.zero-intro__lead {
	max-width: 850px;
	margin: 0 0 26px;
	color: var(--ink-soft);
	font-size: 19px;
	line-height: 1.7;
}

.zero-definition {
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
	margin-top: 18px;
	padding: 22px 24px;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 18px;
}

.zero-definition strong {
	color: var(--yellow);
	font-size: 17px;
}

.zero-definition p {
	margin: 0;
	color: inherit;
}

.zero-answer-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-top: 25px;
}

.zero-answer-grid article {
	padding: 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 12px 32px rgba(20, 58, 45, 0.06);
}

.zero-answer-grid article:nth-child(2) {
	background: #fff8dd;
}

.zero-answer-grid article:nth-child(3) {
	background: #edf9f1;
}

.zero-answer-grid article > span {
	display: grid;
	width: 42px;
	height: 42px;
	margin-bottom: 18px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 12px;
	font-size: 20px;
	font-weight: 900;
}

.zero-answer-grid h3 {
	margin: 0 0 10px;
	font-size: 19px;
}

.zero-answer-grid p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.zero-intro__infographic {
	margin: 0;
	padding: 12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 22px;
	box-shadow: var(--shadow);
}

.zero-intro__infographic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 15px;
}

.zero-intro__infographic picture,
.lesson-generated-infographic picture {
	display: block;
}

.zero-intro__infographic figcaption {
	padding: 13px 10px 5px;
	color: var(--ink-soft);
	font-size: 13px;
	text-align: center;
}

.zero-intro__section {
	padding: 32px;
	background: #f4faf6;
	border: 1px solid rgba(22, 122, 90, 0.18);
	border-radius: 24px;
}

.zero-intro__section--lilac {
	background: #f1edfb;
	border-color: rgba(108, 77, 161, 0.2);
}

.zero-family-garden {
	position: relative;
	margin-top: 36px;
	padding: 24px;
	overflow: visible;
	background:
		linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
		repeating-linear-gradient(135deg, #e6f3e9 0 18px, #edf7ef 18px 36px);
	border: 4px solid var(--green);
	border-radius: 28px;
	box-shadow:
		inset 0 0 0 6px rgba(255, 255, 255, 0.72),
		0 12px 35px rgba(46, 75, 63, 0.11);
}

.zero-family-garden .zero-family-garden__boundary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: fit-content;
	margin: -44px auto 18px;
	padding: 9px 14px;
	background: var(--green);
	color: var(--white);
	border: 4px solid #f1edfb;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 750;
	text-align: center;
}

.zero-family-garden__boundary strong {
	color: var(--yellow);
	font-weight: 950;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-family-garden__header {
	display: grid;
	grid-template-columns: 112px 1fr;
	align-items: center;
	gap: 19px;
	padding: 18px;
	background: var(--white);
	border: 2px solid rgba(46, 75, 63, 0.3);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(46, 75, 63, 0.08);
}

.zero-family-garden__header.zero-family-garden__header--text-only {
	grid-template-columns: 1fr;
}

.zero-family-garden__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid var(--white);
	border-radius: 16px;
	box-shadow: 0 7px 18px rgba(46, 75, 63, 0.13);
}

.zero-family-garden .zero-family-garden__label {
	display: block;
	margin: 0 0 5px;
	color: var(--green);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.zero-family-garden h3,
.zero-family-garden h4,
.zero-family-garden h5 {
	margin: 0 0 7px;
}

.zero-family-garden h3 {
	font-size: 23px;
}

.zero-family-garden h4 {
	font-size: 18px;
}

.zero-family-garden h5 {
	font-size: 17px;
}

.zero-family-garden p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.zero-family-garden .zero-family-garden__meta {
	margin-top: 10px;
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 700;
}

.zero-family-garden__meta strong {
	color: var(--ink);
}

.zero-family-garden .zero-family-garden__hierarchy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 12px;
	background: var(--ink);
	color: var(--white);
	border-radius: 15px;
	text-align: center;
}

.zero-family-garden__hierarchy strong {
	padding: 7px 10px;
	background: var(--white);
	color: var(--ink);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 950;
}

.zero-family-garden__hierarchy span {
	color: var(--yellow);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-family-garden .zero-family-garden__plots-title {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 10px;
	color: var(--ink);
	text-align: center;
}

.zero-family-garden__plots-title strong {
	font-size: 13px;
}

.zero-family-garden__plots-title span {
	color: var(--ink-soft);
	font-size: 11px;
}

.zero-family-garden__plots {
	display: grid;
	grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.35fr);
	align-items: stretch;
	gap: 16px;
}

.zero-family-garden__rules,
.zero-family-garden__learning {
	position: relative;
	padding: 18px;
	border-radius: 18px;
}

.zero-family-garden__rules {
	background: #fff7d9;
	border: 3px solid #d2a72f;
}

.zero-family-garden__rules .zero-family-garden__label {
	color: #7a5d12;
}

.zero-family-garden__learning {
	background: #dff1e5;
	border: 3px solid var(--green);
}

.zero-family-garden__plot-heading {
	display: grid;
	grid-template-columns: 74px 1fr;
	align-items: center;
	gap: 13px;
	margin-bottom: 13px;
}

.zero-family-garden__learning .zero-family-garden__label {
	color: var(--green);
}

.zero-family-garden .zero-family-garden__contains {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 15px 0 0;
	padding-top: 11px;
	color: var(--green);
	border-top: 2px dashed rgba(31, 133, 98, 0.42);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
}

.zero-family-garden__contains i {
	font-size: 22px;
	font-style: normal;
	line-height: 1;
}

.zero-family-garden__deep {
	display: grid;
	grid-template-columns: 88px 1fr;
	align-items: center;
	gap: 14px;
	margin-top: 9px;
	padding: 14px;
	background: var(--white);
	border: 3px solid #6c4da1;
	border-radius: 15px;
	box-shadow: 0 8px 22px rgba(108, 77, 161, 0.09);
}

.zero-family-garden__deep .zero-family-garden__label {
	color: #6c4da1;
}

.zero-family-garden__generative {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 3px dotted rgba(46, 75, 63, 0.42);
}

.zero-family-garden .zero-family-garden__connector {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0 8px;
	color: var(--green);
	text-align: center;
}

.zero-family-garden__connector strong {
	padding: 6px 9px;
	background: #fff6c7;
	color: #6b5314;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.zero-family-garden__connector span {
	color: var(--ink-soft);
	font-size: 11px;
	font-weight: 750;
}

.zero-family-garden__connector i {
	font-size: 21px;
	font-style: normal;
	line-height: 1;
}

.zero-family-garden__harvest {
	display: grid;
	grid-template-columns: 92px 1fr;
	align-items: center;
	gap: 15px;
	padding: 17px;
	background: #fff6c7;
	border: 3px solid var(--yellow);
	border-radius: 18px;
}

.zero-family-garden__harvest .zero-family-garden__label {
	color: #7a5d12;
}

.zero-intro__note {
	margin: 18px 0 0;
	padding: 15px 17px;
	background: rgba(255, 255, 255, 0.72);
	border-left: 4px solid var(--green);
	border-radius: 0 12px 12px 0;
	font-size: 14px;
}

.zero-lab {
	background: #f4faf6;
}

.zero-lab-cycle {
	margin-top: 25px;
	padding: 20px;
	background: linear-gradient(145deg, #edf8f2, #f8f4e9);
	border: 2px solid rgba(31, 133, 98, 0.25);
	border-radius: 22px;
}

.zero-lab-cycle .zero-lab-cycle__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: fit-content;
	margin: -36px auto 17px;
	padding: 8px 12px;
	background: var(--green);
	color: var(--white);
	border: 4px solid #f4faf6;
	border-radius: 999px;
	font-size: 11px;
	text-align: center;
}

.zero-lab-cycle__badge strong {
	color: var(--yellow);
	font-weight: 950;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-lab-steps {
	display: grid;
	grid-template-columns: 1fr auto 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}

.zero-lab-step {
	display: grid;
	grid-template-columns: 84px 1fr;
	align-items: center;
	gap: 13px;
	min-width: 0;
	padding: 14px;
	background: var(--white);
	border: 1px solid rgba(31, 133, 98, 0.18);
	border-radius: 15px;
	box-shadow: 0 8px 22px rgba(46, 75, 63, 0.07);
}

.zero-lab-step__media img,
.zero-training-grid__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid var(--white);
	border-radius: 15px;
	box-shadow: 0 6px 17px rgba(46, 75, 63, 0.13);
}

.zero-lab-step .zero-lab-step__number {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 5px;
	color: var(--green);
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-lab-step__number span {
	display: grid;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 8px;
	font-size: 10px;
}

.zero-lab-step h3 {
	margin: 0 0 6px;
	font-size: 17px;
}

.zero-lab-step h3 code {
	color: #6c4da1;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9em;
}

.zero-lab-step p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
}

.zero-lab-steps__arrow {
	display: grid;
	place-items: center;
	color: var(--green);
	font-size: 24px;
	font-style: normal;
	font-weight: 950;
}

.zero-lab-cycle .zero-lab-cycle__mapping {
	margin: 16px 0 0;
	padding: 13px 15px;
	background: rgba(255, 255, 255, 0.78);
	color: var(--ink-soft);
	border-left: 4px solid var(--green);
	border-radius: 0 12px 12px 0;
	font-size: 12px;
}

.zero-lab-cycle__mapping strong {
	color: var(--ink);
}

.zero-lab-cycle__mapping span {
	display: block;
	margin-top: 5px;
	color: #6c4da1;
	font-weight: 750;
}

.zero-intro__truth {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 15px;
	padding: 15px 17px;
	background: #fff8dd;
	border-radius: 13px;
}

.zero-intro__truth > span {
	display: grid;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--yellow);
	border-radius: 50%;
	font-weight: 950;
}

.zero-intro__truth p {
	margin: 0;
}

.zero-lab-console {
	margin: 22px 0;
	padding: 20px;
	background: var(--ink);
	color: var(--white);
	border: 2px solid rgba(31, 133, 98, 0.65);
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(46, 75, 63, 0.15);
}

.zero-lab-console .zero-lab-console__label {
	margin: 0;
	color: var(--mint);
	font-size: 11px;
	font-weight: 950;
	letter-spacing: 0.07em;
	text-align: center;
	text-transform: uppercase;
}

.zero-formula {
	display: grid;
	grid-template-columns: 1fr auto 1.25fr auto 1fr auto 1.25fr auto 1.25fr;
	align-items: center;
	gap: 8px;
	margin: 22px 0;
	padding: 18px;
	background: var(--ink);
	color: var(--white);
	border-radius: 16px;
}

.zero-formula > div {
	display: grid;
	gap: 4px;
	min-width: 0;
	text-align: center;
}

.zero-formula span {
	color: rgba(255, 255, 255, 0.68);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.zero-formula strong {
	color: var(--yellow);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 18px;
}

.zero-formula i {
	display: inline-block;
	color: var(--mint);
	font-style: normal;
	font-weight: 900;
}

.zero-formula > p {
	margin: 0;
	text-align: center;
}

.zero-formula > p:empty,
.zero-lab-legend > p:empty {
	display: none;
}

.zero-lab-console .zero-formula {
	margin: 14px 0;
	background: rgba(255, 255, 255, 0.055);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.zero-lab-legend {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.zero-lab-legend p {
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 9px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.76);
	border-radius: 10px;
	font-size: 10px;
}

.zero-lab-legend strong {
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 14px;
}

.zero-lab-console .zero-lab-console__explanation {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

.zero-lab-console__explanation strong {
	color: var(--yellow);
}

.zero-training-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 22px;
}

.zero-training-grid article {
	display: grid;
	grid-template-columns: 82px 1fr;
	align-items: start;
	gap: 14px;
	padding: 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 15px;
}

.zero-training-grid h3 {
	margin: 0 0 7px;
	color: var(--green-dark);
	font-size: 18px;
}

.zero-training-grid p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
}

.zero-training-grid .zero-training-grid__phase {
	margin: 0 0 5px;
	color: #6c4da1;
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-build-list {
	display: grid;
	gap: 11px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.zero-build-list li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 17px;
	background: rgba(255, 255, 255, 0.82);
	border-radius: 14px;
}

.zero-build-list li > span {
	display: grid;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	place-items: center;
	background: #6c4da1;
	color: var(--white);
	border-radius: 10px;
	font-weight: 900;
}

.zero-build-list p {
	margin: 4px 0 0;
	font-size: 14px;
}

.zero-neuron {
	display: grid;
	gap: 16px;
	margin-top: 24px;
}

.zero-neuron__example {
	padding: 22px;
	background: var(--white);
	border: 1px solid rgba(108, 77, 161, 0.18);
	border-radius: 18px;
}

.zero-neuron__source {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 18px;
}

.zero-neuron__source img {
	flex: 0 0 82px;
	width: 82px;
	height: 82px;
	object-fit: cover;
	border: 3px solid var(--white);
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(46, 75, 63, 0.15);
}

.zero-neuron__question {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 !important;
}

.zero-neuron__question span {
	padding: 6px 9px;
	background: #6c4da1;
	color: var(--white);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-neuron__question strong {
	font-size: 18px;
}

.zero-neuron__flow {
	display: grid;
	grid-template-columns: minmax(190px, 0.95fr) auto minmax(230px, 1.2fr) auto minmax(155px, 0.75fr);
	align-items: center;
	gap: 12px;
}

.zero-neuron__inputs {
	display: grid;
	gap: 8px;
}

.zero-neuron__inputs > span {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	column-gap: 10px;
	padding: 10px;
	background: #f1edfb;
	color: #6c4da1;
	border-radius: 12px;
}

.zero-neuron__inputs b {
	display: grid;
	grid-row: 1 / span 2;
	width: 36px;
	height: 36px;
	place-items: center;
	background: #6c4da1;
	color: var(--white);
	border-radius: 10px;
	font-weight: 900;
}

.zero-neuron__inputs strong {
	color: var(--ink);
	font-size: 13px;
	line-height: 1.2;
}

.zero-neuron__inputs small {
	color: var(--ink-soft);
	font-size: 10px;
}

.zero-neuron__arrow {
	display: grid;
	place-items: center;
	color: #6c4da1;
	font-size: 25px;
	font-style: normal;
	font-weight: 950;
}

.zero-neuron__calculation,
.zero-neuron__output {
	display: grid;
	place-items: center;
	gap: 9px;
	min-height: 154px;
	padding: 18px;
	background: #6c4da1;
	color: var(--white);
	border-radius: 18px;
	text-align: center;
}

.zero-neuron__calculation > small,
.zero-neuron__output > small {
	color: rgba(255, 255, 255, 0.72);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-neuron__calculation code {
	display: block;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.13);
	color: var(--yellow);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.65;
}

.zero-neuron__calculation p {
	margin: 0;
	color: inherit;
	font-size: 11px;
}

.zero-neuron__output {
	background: var(--green);
}

.zero-neuron__output strong {
	color: var(--yellow);
	font-size: 38px;
	line-height: 1;
}

.zero-neuron__output span {
	font-size: 12px;
	font-weight: 800;
}

.zero-neuron__caption {
	margin: 14px 0 0 !important;
	color: var(--ink-soft);
	font-size: 12px;
	text-align: center;
}

.zero-neuron__legend {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zero-neuron__legend li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 13px;
}

.zero-neuron__legend li > span {
	display: grid;
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 8px;
	font-size: 11px;
	font-weight: 950;
}

.zero-neuron__legend p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
}

.zero-neuron__legend strong {
	color: var(--ink);
}

.zero-neuron__layers {
	margin: 0 !important;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.72);
	border-left: 4px solid #6c4da1;
	border-radius: 0 12px 12px 0;
	font-size: 14px;
}

.zero-language-garden {
	background: linear-gradient(145deg, #fbf7e9 0%, #f0faf4 52%, #e6f4ea 100%);
	border-color: rgba(22, 122, 90, 0.22);
}

.zero-language-garden__lead {
	max-width: 830px;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 17px;
}

.zero-language-path {
	margin-top: 30px;
	padding: 18px;
	background: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(22, 122, 90, 0.2);
	border-radius: 21px;
}

.zero-language-path__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: -37px 0 4px;
	padding: 10px 14px;
	background: var(--green-dark);
	color: var(--white);
	border: 3px solid #f3f8ee;
	border-radius: 999px;
	box-shadow: 0 8px 22px rgba(27, 70, 56, 0.14);
}

.zero-language-path__badge span {
	padding: 5px 9px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.zero-language-path__badge strong {
	font-size: 13px;
}

.zero-language-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 17px 0 0;
	padding: 0;
	list-style: none;
}

.zero-language-steps li {
	min-width: 0;
	padding: 10px 10px 14px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(22, 122, 90, 0.16);
	border-top: 4px solid var(--green);
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(41, 79, 64, 0.07);
}

.zero-language-steps li:nth-child(2),
.zero-language-steps li:nth-child(4) {
	border-top-color: #6c4da1;
}

.zero-language-steps li:nth-child(5) {
	border-top-color: #e0ad24;
}

.zero-language-step__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin-bottom: 11px;
	object-fit: cover;
	border-radius: 12px;
}

.zero-language-step__tag {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 7px !important;
	color: var(--green);
	font-size: 9px !important;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zero-language-step__tag span {
	display: grid;
	width: 23px;
	height: 23px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 7px;
	font-size: 10px;
}

.zero-language-steps li:nth-child(2) .zero-language-step__tag,
.zero-language-steps li:nth-child(4) .zero-language-step__tag {
	color: #6c4da1;
}

.zero-language-steps li:nth-child(2) .zero-language-step__tag span,
.zero-language-steps li:nth-child(4) .zero-language-step__tag span {
	background: #6c4da1;
}

.zero-language-steps li:nth-child(5) .zero-language-step__tag {
	color: #8a6500;
}

.zero-language-steps li:nth-child(5) .zero-language-step__tag span {
	background: var(--yellow);
	color: var(--ink);
}

.zero-language-steps h3 {
	margin: 0 0 7px;
	color: var(--ink);
	font-size: 15px;
	line-height: 1.25;
}

.zero-language-step__content > p:last-child {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.5;
}

.zero-language-step__content {
	min-width: 0;
}

.zero-language-demo {
	margin-top: 18px;
	padding: 22px;
	overflow: hidden;
	background: var(--green-dark);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 21px;
	box-shadow: 0 14px 35px rgba(28, 64, 52, 0.16);
}

.zero-language-demo__heading > span {
	display: inline-block;
	margin-bottom: 7px;
	padding: 5px 8px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 999px;
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zero-language-demo__heading h3 {
	margin: 0 0 5px;
	color: var(--white);
	font-size: 25px;
	line-height: 1.15;
}

.zero-language-demo__heading p {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 12px;
}

.zero-language-demo__flow {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) auto minmax(310px, 1.2fr);
	align-items: center;
	gap: 17px;
	margin-top: 18px;
}

.zero-language-demo__context,
.zero-language-demo__choices {
	padding: 16px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 15px;
}

.zero-language-demo__context > p,
.zero-language-demo__choices > p {
	margin: 0 0 10px;
	color: #bce0c9;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.zero-language-demo__context > div {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.zero-language-demo__context span,
.zero-language-demo__growth p span,
.zero-language-demo__growth p strong {
	padding: 7px 9px;
	background: var(--white);
	color: var(--ink);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 850;
}

.zero-language-demo__context span:last-child {
	background: #d8cfef;
	color: #604393;
}

.zero-language-demo__arrow {
	display: grid;
	place-items: center;
	color: var(--yellow);
	font-size: 26px;
	font-weight: 950;
}

.zero-language-demo__choices ol {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zero-language-demo__choices li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 10px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 11px;
}

.zero-language-demo__choices li > strong {
	color: var(--white);
	font-size: 10px;
}

.zero-language-demo__choices li > i {
	position: relative;
	display: block;
	grid-column: 1 / -1;
	height: 5px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.13);
	border-radius: 999px;
}

.zero-language-demo__choices li > i::after {
	display: block;
	width: 48%;
	height: 100%;
	background: var(--yellow);
	border-radius: inherit;
	content: "";
}

.zero-language-demo__choices li:nth-child(2) > i::after {
	width: 27%;
	background: #9fd5b4;
}

.zero-language-demo__choices li:nth-child(3) > i::after {
	width: 15%;
	background: #b8a8df;
}

.zero-language-demo__choices li:nth-child(4) > i::after {
	width: 10%;
	background: rgba(255, 255, 255, 0.5);
}

.zero-language-demo__choices .is-selected > span {
	color: var(--yellow);
	font-weight: 900;
}

.zero-language-demo__choices .zero-language-demo__note {
	display: block;
	margin-top: 11px;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 9px;
	line-height: 1.35;
}

.zero-language-demo__growth {
	display: grid;
	grid-template-columns: minmax(300px, auto) 1fr;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
	padding: 14px 16px;
	background: #f7f2df;
	color: var(--ink);
	border-radius: 15px;
}

.zero-language-demo__growth p {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
}

.zero-language-demo__growth p span {
	border: 1px solid var(--line);
}

.zero-language-demo__growth p strong {
	background: var(--yellow);
}

.zero-language-demo__growth p i {
	align-self: center;
	color: #6c4da1;
	font-size: 18px;
	font-style: normal;
	font-weight: 950;
}

.zero-language-demo__growth > div {
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.45;
}

.zero-language-demo__growth > div strong {
	color: var(--ink);
}

.zero-language-garden .zero-conversation {
	margin-bottom: 18px;
}

.zero-conversation {
	display: grid;
	gap: 12px;
	margin: 24px 0;
}

.zero-conversation > div {
	max-width: 78%;
	padding: 15px 18px;
	border-radius: 16px;
}

.zero-conversation span {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}

.zero-conversation p {
	margin: 0;
}

.zero-conversation__human {
	justify-self: start;
	background: var(--white);
	border: 1px solid var(--line);
}

.zero-conversation__ai {
	justify-self: end;
	background: var(--green);
	color: var(--white);
}

.zero-conversation__ai p {
	color: inherit;
}

.zero-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 26px;
}

.zero-history-image {
	margin: 24px 0 15px;
	padding: 10px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 18px;
}

.zero-history-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.zero-history-primer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 11px;
	margin: 24px 0 15px;
}

.zero-history-primer article {
	display: grid;
	align-content: start;
	gap: 7px;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--green);
	border-radius: 14px;
}

.zero-history-primer span {
	color: var(--green);
	font-size: 12px;
	font-weight: 900;
}

.zero-history-primer strong {
	font-size: 17px;
}

.zero-history-primer p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.zero-history-details {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.zero-history-details summary {
	padding: 15px 17px;
	color: var(--green-dark);
	cursor: pointer;
	font-weight: 850;
}

.zero-history-details[open] summary {
	border-bottom: 1px solid var(--line);
}

.zero-history-details .zero-timeline {
	padding: 17px;
}

.zero-timeline > div {
	position: relative;
	padding: 22px;
	background: var(--white);
	border-top: 4px solid var(--green);
	border-radius: 14px;
}

.zero-timeline time {
	display: block;
	margin-bottom: 8px;
	color: var(--green);
	font-size: 20px;
	font-weight: 950;
}

.zero-timeline strong {
	display: block;
	margin-bottom: 6px;
}

.zero-timeline p {
	margin: 0;
	font-size: 13px;
}

.zero-job-answer {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 24px 0 17px;
	padding: 22px;
	background: var(--white);
	border-radius: 16px;
}

.zero-job-answer > span {
	display: grid;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 15px;
	font-size: 26px;
	font-weight: 950;
}

.zero-job-answer p {
	margin: 4px 0;
}

.zero-work-future {
	background: linear-gradient(145deg, #f1faf4 0%, #f8fbf1 54%, #fbf6e7 100%);
}

.zero-work-future__answer {
	max-width: 860px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 18px;
	line-height: 1.65;
}

.zero-work-future__answer strong {
	color: var(--ink);
}

.zero-work-reassurance {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 17px;
	margin-top: 24px;
	padding: 20px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 17px;
	box-shadow: 0 10px 26px rgba(41, 79, 64, 0.07);
}

.zero-work-reassurance > p:first-child {
	justify-self: start;
	margin: 0;
	padding: 7px 10px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zero-work-reassurance > p:not(:first-child) {
	display: none;
}

.zero-work-reassurance h3 {
	margin: 0 0 7px;
	color: var(--ink);
	font-size: 23px;
	line-height: 1.2;
}

.zero-work-reassurance div > p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.65;
}

.zero-work-history {
	margin-top: 18px;
	padding: 20px;
	background: #fbf6e7;
	border: 1px solid rgba(184, 139, 31, 0.2);
	border-radius: 18px;
}

.zero-work-history__heading > p:first-child,
.zero-work-human > div > p {
	margin: 0 0 6px;
	color: #775600;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zero-work-history__heading h3,
.zero-work-human h3 {
	margin: 0 0 7px;
	color: var(--ink);
	font-size: 27px;
	line-height: 1.2;
}

.zero-work-history__heading > p:last-child {
	max-width: 760px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.zero-work-history__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
	margin-top: 17px;
}

.zero-work-history__grid article {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	min-width: 0;
	padding: 12px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(22, 122, 90, 0.14);
	border-radius: 14px;
}

.zero-work-history__media img {
	display: block;
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: 12px;
}

.zero-work-history__grid article span {
	display: block;
	margin-bottom: 3px;
	color: #6c4da1;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zero-work-history__grid h4 {
	margin: 0 0 5px;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.2;
}

.zero-work-history__grid article p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 11px;
	line-height: 1.5;
}

.zero-work-history__nuance {
	margin: 14px 0 0 !important;
	padding: 13px 15px;
	background: #fff3c8;
	color: var(--ink-soft);
	border-left: 4px solid var(--yellow);
	border-radius: 0 11px 11px 0;
	font-size: 13px;
	line-height: 1.6;
}

.zero-work-history__nuance strong {
	color: var(--ink);
}

.zero-work-human {
	display: grid;
	grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
	gap: 20px;
	margin-top: 18px;
	padding: 20px;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 18px;
}

.zero-work-human > div > p {
	color: var(--yellow);
}

.zero-work-human h3 {
	margin-bottom: 0;
	color: var(--white);
	font-size: 25px;
}

.zero-work-human ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zero-work-human li {
	display: grid;
	gap: 4px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.zero-work-human li strong {
	color: var(--yellow);
	font-size: 12px;
}

.zero-work-human li span {
	color: rgba(255, 255, 255, 0.78);
	font-size: 11px;
	line-height: 1.5;
}

.zero-work-action {
	margin-top: 18px;
	padding: 17px 19px;
	background: #fff8dd;
	border: 1px solid rgba(184, 139, 31, 0.23);
	border-radius: 14px;
}

.zero-work-action p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.65;
}

.zero-work-action strong {
	color: var(--ink);
}

.zero-limit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 24px 0;
}

.zero-limit-grid article {
	padding: 20px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 15px;
}

.zero-limit-grid h3 {
	margin: 0 0 8px;
	font-size: 18px;
}

.zero-limit-grid p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 14px;
}

.zero-limit-case {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
	gap: 14px;
	margin: 0 0 24px;
	padding: 16px;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(28, 64, 52, 0.14);
}

.zero-limit-case__story,
.zero-limit-case__lesson {
	padding: 15px;
	border-radius: 14px;
}

.zero-limit-case__story {
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr);
	align-items: start;
	gap: 18px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.zero-limit-case__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, 0.18);
	border-radius: 13px;
}

.zero-limit-case__story-body {
	min-width: 0;
}

.zero-limit-case__lesson {
	display: flex;
	align-self: stretch;
	flex-direction: column;
	background: #fff8dd;
	color: var(--ink);
}

.zero-limit-case__label {
	margin: 0 0 9px !important;
	color: var(--yellow) !important;
	font-size: 10px !important;
	font-weight: 950;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zero-limit-case__lesson .zero-limit-case__label {
	color: #795900 !important;
	font-size: 12px !important;
}

.zero-limit-case h3 {
	margin: 0 0 11px;
	color: var(--white);
	font-size: 24px;
	line-height: 1.2;
}

.zero-limit-case__story-body > p:last-child {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	line-height: 1.65;
}

.zero-limit-case__lesson > p:not(.zero-limit-case__label) {
	margin: 0 0 15px;
	color: var(--ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.zero-limit-case__lesson a {
	display: inline-flex;
	align-self: flex-start;
	padding: 9px 12px;
	background: var(--green);
	color: var(--white);
	border-radius: 9px;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.zero-limit-case__lesson > p:last-child {
	margin: auto 0 0;
}

.zero-limit-case__lesson a:hover,
.zero-limit-case__lesson a:focus-visible {
	background: var(--green-dark);
	color: var(--white);
	text-decoration: underline;
}

.zero-intro__faq {
	padding: 32px;
	background: var(--green-dark);
	color: var(--white);
	border-radius: 24px;
}

.zero-intro__faq h2 {
	color: inherit;
}

.zero-intro__faq ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.zero-intro__faq li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
}

.zero-intro__faq li span {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 9px;
	font-weight: 950;
}

.zero-sources {
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.zero-sources summary {
	padding: 17px 20px;
	color: var(--green-dark);
	cursor: pointer;
	font-weight: 850;
}

.zero-sources[open] summary {
	border-bottom: 1px solid var(--line);
}

.zero-sources ul {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 20px 25px 22px 42px;
}

.zero-sources a {
	color: var(--green-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.zero-start {
	padding: 64px 0;
	background: var(--green-dark);
	color: var(--white);
}

.zero-start__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
}

.zero-start__inner--with-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(160px, 250px) auto;
	gap: clamp(25px, 4vw, 55px);
}

.zero-start__content {
	min-width: 0;
}

.zero-start h2 {
	margin: 8px 0;
	color: inherit;
	font-size: clamp(32px, 5vw, 52px);
}

.zero-start p {
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.78);
}

.zero-start .button {
	flex: 0 0 auto;
}

.zero-start__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: 230px;
	margin: 0 auto;
	object-fit: contain;
	filter: drop-shadow(0 16px 22px rgba(4, 35, 24, 0.22));
}

.path-zero-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 22px;
	margin-bottom: 60px;
	padding: 25px;
	background: linear-gradient(135deg, #fff8dd, #f1edfb);
	border: 1px solid rgba(108, 77, 161, 0.2);
	border-radius: 20px;
}

.path-zero-card__icon {
	display: grid;
	width: 64px;
	height: 64px;
	place-items: center;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 18px;
	font-size: 30px;
	font-weight: 950;
	transform: rotate(-5deg);
}

.path-zero-card h2 {
	margin: 4px 0 6px;
	font-size: 26px;
}

.path-zero-card p {
	margin: 0;
}

@media (max-width: 1050px) and (min-width: 801px) {
	.zero-start__inner--with-image {
		grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
	}
}

@media (max-width: 800px) {
	.zero-hero {
		padding: 80px 0 70px;
	}

	.zero-hero__bubble {
		opacity: 0.35;
	}

	.zero-hero__bubble--one {
		top: 18px;
		left: -15px;
	}

	.zero-hero__bubble--two {
		right: -22px;
		bottom: 18px;
	}

	.zero-hero h1 {
		font-size: 43px;
	}

	.zero-hero__content > p:not(.eyebrow) {
		font-size: 17px;
	}

	.zero-hero__inner--with-image {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.zero-hero__inner--with-image .zero-hero__content {
		text-align: center;
	}

	.zero-hero__inner--with-image h1,
	.zero-hero__inner--with-image .zero-hero__content > p:not(.eyebrow) {
		margin-right: auto;
		margin-left: auto;
	}

	.zero-hero__inner--with-image .zero-hero__reassurance {
		justify-content: center;
	}

	.zero-hero__media {
		width: min(78vw, 360px);
		margin: 0 auto;
	}

	.zero-hero__reassurance {
		align-items: center;
		flex-direction: column;
	}

	.zero-page__layout {
		overflow: hidden;
	}

	.zero-answer-grid,
	.zero-timeline,
	.zero-training-grid,
	.zero-history-primer,
	.zero-limit-grid,
	.zero-intro__faq ul {
		grid-template-columns: 1fr;
	}

	.zero-definition,
	.zero-neuron {
		grid-template-columns: 1fr;
	}

	.zero-neuron__source {
		align-items: flex-start;
	}

	.zero-neuron__question {
		align-items: flex-start;
		flex-direction: column;
	}

	.zero-neuron__flow,
	.zero-neuron__legend {
		grid-template-columns: 1fr;
	}

	.zero-neuron__arrow {
		transform: rotate(90deg);
		text-align: center;
	}

	.zero-neuron__calculation,
	.zero-neuron__output {
		min-height: 0;
	}

	.zero-family-garden {
		margin-top: 42px;
		padding: 15px;
	}

	.zero-family-garden .zero-family-garden__boundary {
		align-items: stretch;
		flex-direction: column;
		width: auto;
		margin: -39px -2px 15px;
		border-radius: 15px;
	}

	.zero-family-garden__header {
		grid-template-columns: 82px 1fr;
		padding: 15px;
	}

	.zero-family-garden__header.zero-family-garden__header--text-only {
		grid-template-columns: 1fr;
	}

	.zero-family-garden .zero-family-garden__hierarchy {
		grid-template-columns: 1fr;
		display: grid;
	}

	.zero-family-garden__hierarchy span {
		display: block;
	}

	.zero-family-garden .zero-family-garden__plots-title {
		align-items: center;
		flex-direction: column;
		gap: 2px;
	}

	.zero-family-garden__plots {
		grid-template-columns: 1fr;
	}

	.zero-family-garden__plot-heading {
		grid-template-columns: 68px 1fr;
	}

	.zero-family-garden__deep {
		grid-template-columns: 74px 1fr;
	}

	.zero-family-garden .zero-family-garden__connector {
		grid-template-columns: 1fr;
	}

	.zero-family-garden__harvest {
		grid-template-columns: 74px 1fr;
	}

	.zero-lab-cycle {
		padding: 15px;
	}

	.zero-lab-cycle .zero-lab-cycle__badge {
		align-items: stretch;
		flex-direction: column;
		width: auto;
		margin-top: -34px;
		border-radius: 14px;
	}

	.zero-lab-steps {
		grid-template-columns: 1fr;
	}

	.zero-lab-step {
		grid-template-columns: 74px 1fr;
	}

	.zero-lab-steps__arrow {
		transform: rotate(90deg);
		text-align: center;
	}

	.zero-lab-console {
		padding: 15px;
	}

	.zero-lab-legend {
		grid-template-columns: repeat(2, 1fr);
	}

	.zero-lab-legend p:last-child {
		grid-column: 1 / -1;
	}

	.zero-training-grid article {
		grid-template-columns: 78px 1fr;
	}

	.zero-language-path {
		padding: 15px;
	}

	.zero-language-path__badge {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px;
		width: calc(100% + 4px);
		margin: -35px -2px 4px;
		border-radius: 14px;
	}

	.zero-language-steps {
		grid-template-columns: 1fr;
	}

	.zero-language-steps li {
		display: grid;
		grid-template-columns: 76px 1fr;
		gap: 12px;
		padding: 10px 12px 12px 10px;
	}

	.zero-language-step__media {
		grid-column: 1;
		grid-row: 1;
	}

	.zero-language-step__content {
		grid-column: 2;
		grid-row: 1;
	}

	.zero-language-step__media img {
		width: 76px;
		margin: 0;
	}

	.zero-language-demo {
		padding: 16px;
	}

	.zero-language-demo__heading h3 {
		font-size: 21px;
	}

	.zero-language-demo__flow,
	.zero-language-demo__growth {
		grid-template-columns: 1fr;
	}

	.zero-language-demo__arrow {
		justify-self: stretch;
	}

	.zero-language-demo__arrow span {
		display: block;
		transform: rotate(90deg);
	}

	.zero-language-garden .zero-conversation > div {
		max-width: 92%;
	}

	.zero-limit-case {
		grid-template-columns: 1fr;
		padding: 14px;
	}

	.zero-limit-case__story {
		grid-template-columns: 1fr;
	}

	.zero-limit-case__media img {
		max-width: 250px;
		margin: 0 auto;
	}

	.zero-work-reassurance,
	.zero-work-human {
		grid-template-columns: 1fr;
	}

	.zero-work-history {
		padding: 15px;
	}

	.zero-work-history__grid,
	.zero-work-human ul {
		grid-template-columns: 1fr;
	}

	.zero-work-history__grid article {
		grid-template-columns: 76px minmax(0, 1fr);
	}

	.zero-formula {
		grid-template-columns: 1fr;
	}

	.zero-formula i {
		transform: rotate(90deg);
		text-align: center;
	}

	.zero-intro__section,
	.zero-intro__faq {
		padding: 23px;
	}

	.zero-start__inner,
	.path-zero-card {
		align-items: flex-start;
		flex-direction: column;
	}

	.zero-start__inner--with-image {
		display: grid;
		grid-template-columns: 1fr;
	}

	.zero-start__media {
		width: min(65vw, 240px);
	}

	.path-zero-card {
		display: flex;
	}
}

/* Lesson 3: understanding and building a model. */
.lesson-model-definition {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 9px;
	margin: 27px 0 31px;
}

.lesson-model-definition > div:not(.lesson-model-definition__arrow) {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	align-items: center;
	min-width: 0;
	gap: 11px;
	min-height: 104px;
	padding: 15px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 17px;
}

.lesson-model-definition__symbol {
	display: flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 15px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 23px;
	font-weight: 900;
	line-height: 1;
}

.lesson-model-definition__symbol sub {
	position: relative;
	top: 0.24em;
	margin-left: 1px;
	font-size: 0.55em;
	line-height: 1;
}

.lesson-model-definition > .lesson-model-definition__engine {
	background: linear-gradient(145deg, #eaf7ef, #fbfaf4);
	border-color: rgba(22, 122, 90, 0.25);
}

.lesson-model-definition__engine > .lesson-model-definition__symbol {
	background: var(--green) !important;
	color: var(--white) !important;
}

.lesson-model-definition p,
.lesson-model-definition strong {
	display: block;
}

.lesson-model-definition p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.lesson-model-definition strong {
	margin-bottom: 4px;
	color: var(--ink);
	font-size: 13px;
}

.lesson-model-definition__arrow {
	align-self: center;
	color: var(--green);
	font-size: 19px;
	font-style: normal;
	font-weight: 950;
}

.lesson-model-figure {
	overflow: hidden;
	margin: 31px 0 39px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 22px;
}

.lesson-model-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.lesson-model-figure figcaption {
	padding: 16px 20px 18px;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.55;
}

.lesson-model-figure figcaption strong {
	color: var(--ink);
}

.lesson-model-pipeline {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
	align-items: stretch;
	gap: 6px;
	margin: 27px 0 40px;
}

.lesson-model-pipeline > article {
	min-width: 0;
	padding: 15px 12px;
	background: #f8faf8;
	border: 1px solid var(--line);
	border-radius: 16px;
	text-align: center;
}

.lesson-model-pipeline > .lesson-model-pipeline__model {
	background: linear-gradient(145deg, #eaf7ef, #fffaf0);
	border-color: rgba(22, 122, 90, 0.22);
}

.lesson-model-pipeline__arrow {
	align-self: center;
	color: var(--green);
	font-size: 16px;
	font-style: normal;
	font-weight: 950;
}

.lesson-model-pipeline__label {
	margin: 0 0 10px !important;
	color: var(--green-dark);
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lesson-model-pipeline article > h3 {
	margin: 10px 0 4px;
	color: var(--ink);
	font-size: 12px;
}

.lesson-model-pipeline article > .lesson-model-pipeline__description {
	margin: 0;
	color: var(--ink-soft);
	font-size: 10px;
	line-height: 1.4;
}

.lesson-model-pipeline__flower {
	color: #6c4da1;
	font-size: 45px;
	line-height: 1;
}

.lesson-model-measures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}

.lesson-model-measures span {
	padding: 6px 4px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--ink);
	font-size: 9px;
	font-weight: 850;
}

.lesson-model-pipeline__dials {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 42px;
}

.lesson-model-pipeline__dials b {
	position: relative;
	width: 34px;
	height: 34px;
	background: var(--white);
	border: 6px solid var(--green);
	border-radius: 50%;
}

.lesson-model-pipeline__dials b::after {
	position: absolute;
	top: 2px;
	left: 50%;
	width: 2px;
	height: 9px;
	content: "";
	background: var(--ink);
	border-radius: 2px;
	transform: translateX(-50%) rotate(28deg);
	transform-origin: 50% 100%;
}

.lesson-model-pipeline__dials b:nth-child(2) {
	border-color: #d2a91d;
}

.lesson-model-pipeline__dials b:nth-child(2)::after {
	transform: translateX(-50%) rotate(-45deg);
}

.lesson-model-pipeline__dials b:nth-child(3) {
	border-color: #8060b4;
}

.lesson-model-pipeline__dials b:nth-child(3)::after {
	transform: translateX(-50%) rotate(70deg);
}

.lesson-model-probabilities {
	display: grid;
	gap: 4px;
	text-align: left;
}

.lesson-model-probabilities span {
	display: flex;
	justify-content: space-between;
	gap: 5px;
	padding: 5px 6px;
	background:
		linear-gradient(90deg, rgba(22, 122, 90, 0.2) var(--probability), rgba(255, 255, 255, 0.86) var(--probability));
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 7px;
	color: var(--ink);
	font-size: 8px;
	font-weight: 800;
}

.lesson-model-probability--94 {
	--probability: 94%;
}

.lesson-model-probability--5 {
	--probability: 5%;
}

.lesson-model-probability--1 {
	--probability: 1%;
}

.lesson-model-vocabulary {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 27px 0 32px;
}

.lesson-model-vocabulary article {
	grid-column: span 2;
	padding: 18px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 17px;
}

.lesson-model-vocabulary article:nth-child(4) {
	grid-column: 2 / span 2;
}

.lesson-model-vocabulary__number {
	display: grid;
	width: 37px;
	height: 37px;
	margin-bottom: 13px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 11px;
	font-size: 11px;
	font-weight: 950;
}

.lesson-model-vocabulary article:nth-child(2) > .lesson-model-vocabulary__number,
.lesson-model-vocabulary article:nth-child(5) > .lesson-model-vocabulary__number {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-model-vocabulary article:nth-child(3) > .lesson-model-vocabulary__number {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-model-vocabulary h3 {
	margin: 0 0 6px;
	color: var(--ink);
	font-size: 17px;
}

.lesson-model-vocabulary p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.5;
}

.lesson-model-training-loop {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr) auto);
	align-items: stretch;
	gap: 8px;
	margin: 31px 0 24px;
	padding: 20px;
	background: linear-gradient(145deg, #eef8f2, #fffaf0);
	border: 1px solid rgba(22, 122, 90, 0.16);
	border-radius: 20px;
}

.lesson-model-training-loop > div:not(.lesson-model-training-loop__arrow) {
	padding: 14px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 14px;
}

.lesson-model-training-loop__number {
	display: grid;
	width: 29px;
	height: 29px;
	margin: 0 0 9px !important;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 9px;
	font-size: 10px;
	font-weight: 950;
}

.lesson-model-training-loop h3 {
	margin: 0;
	color: var(--ink);
	font-size: 14px;
}

.lesson-model-training-loop__description {
	margin-top: 4px;
	margin-bottom: 0;
	color: var(--ink-soft);
	font-size: 11px;
	line-height: 1.45;
}

.lesson-model-training-loop__arrow {
	align-self: center;
	color: var(--green);
	font-size: 17px;
	font-style: normal;
	font-weight: 950;
}

.lesson-model-training-loop__arrow--return {
	align-self: end;
	margin-bottom: 19px;
	font-size: 24px;
}

.lesson-model-equation {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: stretch;
	gap: 12px;
	margin: 0 0 35px;
}

.lesson-model-equation > div {
	display: grid;
	padding: 21px;
	place-items: center;
	background: var(--ink);
	color: var(--white);
	border-radius: 17px;
	text-align: center;
}

.lesson-model-equation > div p {
	margin: 0 0 4px;
	color: #b9d3ca;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lesson-model-equation > div strong {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 25px;
}

.lesson-model-equation dl {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
}

.lesson-model-equation dl > div {
	padding: 14px 10px;
	background: #f7faf8;
	border: 1px solid var(--line);
	border-radius: 14px;
	text-align: center;
}

.lesson-model-equation dt {
	color: var(--green-dark);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 900;
}

.lesson-model-equation dd {
	margin: 5px 0 0;
	color: var(--ink-soft);
	font-size: 10px;
	line-height: 1.35;
}

.lesson-model-build {
	display: grid;
	gap: 9px;
	margin: 28px 0 34px;
	padding: 0;
	list-style: none;
}

.lesson-model-build li {
	display: grid;
	grid-template-columns: 47px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 15px 17px;
	background: #f8faf8;
	border: 1px solid var(--line);
	border-radius: 15px;
}

.lesson-model-build li > div {
	display: grid;
	width: 47px;
	height: 47px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 14px;
	font-size: 17px;
	font-weight: 950;
}

.lesson-model-build li:nth-child(3n + 2) > div {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-model-build li:nth-child(3n) > div {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-model-build p,
.lesson-model-build strong,
.lesson-model-build span {
	display: block;
}

.lesson-model-build p {
	margin: 0;
}

.lesson-model-build strong {
	color: var(--ink);
	font-size: 15px;
}

.lesson-model-build span {
	margin-top: 3px;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.5;
}

.lesson-data-split {
	margin: 33px 0 42px;
	padding: 24px;
	background: linear-gradient(145deg, #f3ecfb, #fffdf5);
	border: 1px solid rgba(108, 77, 161, 0.18);
	border-radius: 21px;
}

.lesson-data-split__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
}

.lesson-data-split__heading h3 {
	margin: 0;
	color: var(--ink);
	font-size: 20px;
}

.lesson-data-split__eyebrow {
	margin: 0 0 4px !important;
	color: #6c4da1;
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lesson-data-split__heading > span {
	max-width: 190px;
	color: var(--ink-soft);
	font-size: 10px;
	text-align: right;
}

.lesson-data-split__bar {
	display: flex;
	overflow: hidden;
	margin: 19px 0 16px;
	border: 4px solid var(--white);
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(43, 40, 31, 0.08);
}

.lesson-data-split__bar > div {
	display: grid;
	min-height: 78px;
	padding: 10px;
	place-content: center;
	background: var(--green);
	color: var(--white);
	text-align: center;
}

.lesson-data-split__train {
	flex: 0 0 70%;
}

.lesson-data-split__validation,
.lesson-data-split__test {
	flex: 0 0 15%;
}

.lesson-data-split__bar > .lesson-data-split__validation {
	background: #8060b4;
}

.lesson-data-split__bar > .lesson-data-split__test {
	background: #d0a31a;
}

.lesson-data-split__bar strong,
.lesson-data-split__bar span {
	display: block;
}

.lesson-data-split__bar strong {
	font-size: 18px;
}

.lesson-data-split__bar span {
	font-size: 9px;
	font-weight: 850;
	text-transform: uppercase;
}

.lesson-data-split > p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-data-split > p strong {
	color: var(--ink);
}

.lesson-system-stack {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 27px 0 37px;
}

.lesson-system-stack article {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	min-height: 156px;
	padding: 20px;
	background: #fbfcfb;
	border: 1px solid var(--line);
	border-top: 4px solid var(--green);
	border-radius: 18px;
}

.lesson-system-stack article > div:last-child,
.lesson-workshop__header > div,
.lesson-technical-details > summary span {
	min-width: 0;
}

.lesson-system-stack article:nth-child(1) {
	background: linear-gradient(145deg, #eef8f2, #fffaf0);
}

.lesson-system-stack article:nth-child(2) {
	border-top-color: var(--green-dark);
}

.lesson-system-stack article:nth-child(3) {
	border-top-color: #d6a900;
}

.lesson-system-stack article:nth-child(4) {
	border-top-color: #8a68b8;
}

.lesson-system-stack__icon {
	display: flex;
	width: 52px;
	height: 52px;
	align-items: center;
	justify-content: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 15px;
	font-size: 20px;
	font-weight: 950;
	line-height: 1;
}

.lesson-system-stack article:nth-child(2) > .lesson-system-stack__icon {
	background: var(--green);
	color: var(--white);
	font-family: Georgia, "Times New Roman", serif;
}

.lesson-system-stack__icon sub {
	position: relative;
	top: 0.24em;
	margin-left: 1px;
	font-size: 0.55em;
	line-height: 1;
}

.lesson-system-stack article:nth-child(3) > .lesson-system-stack__icon {
	background: var(--yellow-soft);
	color: #8b6500;
}

.lesson-system-stack article:nth-child(4) > .lesson-system-stack__icon {
	background: var(--lilac);
	color: #6c4da1;
}

.lesson-system-stack p,
.lesson-system-stack h3 {
	display: block;
	margin: 0;
}

.lesson-system-stack article > div:last-child > p:first-child {
	color: var(--green-dark);
	font-size: 10px;
	font-weight: 950;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.lesson-system-stack h3 {
	margin-top: 4px;
	color: var(--ink);
	font-size: 20px;
	line-height: 1.15;
}

.lesson-system-stack .lesson-system-stack__description {
	margin-top: 8px;
	color: var(--ink-soft);
	font-size: 14px;
	line-height: 1.5;
}

.lesson-workshop {
	margin: 26px 0 48px;
	padding: 27px;
	background:
		radial-gradient(circle at 97% 4%, rgba(245, 207, 88, 0.25), transparent 25%),
		linear-gradient(145deg, #eef8f2, #fffdf6);
	border: 1px solid rgba(22, 122, 90, 0.18);
	border-radius: 23px;
}

.lesson-workshop__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 225px;
	align-items: stretch;
	gap: 16px;
	margin-bottom: 23px;
}

.lesson-workshop__badge {
	display: inline-flex;
	margin: 0 0 8px !important;
	padding: 6px 10px;
	background: var(--green);
	color: var(--white);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.lesson-workshop__header h3 {
	margin: 0 0 7px;
	color: var(--ink);
	font-size: 25px;
}

.lesson-workshop__header > div:first-child > p:last-child {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
}

.lesson-workshop__kit {
	display: grid;
	grid-template-columns: 43px minmax(0, 1fr);
	align-items: center;
	gap: 11px;
	padding: 14px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 15px;
}

.lesson-workshop__kit-icon {
	display: grid;
	width: 43px;
	height: 43px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 13px;
	font-size: 20px;
}

.lesson-workshop__kit p,
.lesson-workshop__kit strong {
	display: block;
}

.lesson-workshop__kit p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 10px;
	line-height: 1.4;
}

.lesson-workshop__kit strong {
	margin-bottom: 3px;
	color: var(--ink);
	font-size: 12px;
}

.lesson-workshop__steps {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lesson-workshop__steps li {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 13px 15px;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 14px;
}

.lesson-workshop__steps li > div {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}

.lesson-workshop__steps li > div span {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--green);
	color: var(--white);
	border-radius: 10px;
	font-size: 9px;
	font-weight: 950;
}

.lesson-workshop__steps strong {
	color: var(--ink);
	font-size: 12px;
}

.lesson-workshop__steps li > p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.5;
}

.lesson-workshop__steps a {
	font-weight: 850;
}

.lesson-workshop__tests {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 22px 0 16px;
}

.lesson-workshop__tests article {
	padding: 13px;
	background: var(--white);
	border: 1px solid rgba(22, 122, 90, 0.12);
	border-radius: 14px;
}

.lesson-workshop__test-icon {
	display: grid;
	width: 34px;
	height: 34px;
	margin-bottom: 9px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 950;
}

.lesson-workshop__tests h3 {
	margin: 0;
	color: var(--ink);
	font-size: 11px;
}

.lesson-workshop__tests p {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: 10px;
	line-height: 1.4;
}

.lesson-workshop__note,
.lesson-workshop__privacy {
	padding: 15px 17px;
	border-radius: 14px;
	font-size: 12px;
	line-height: 1.55;
}

.lesson-workshop__note {
	background: var(--yellow-soft);
	color: var(--ink-soft);
}

.lesson-workshop__note strong {
	display: block;
	color: var(--ink);
}

.lesson-workshop__note p {
	margin: 3px 0 0;
}

.lesson-workshop__privacy {
	margin: 10px 0 0;
	background: rgba(255, 255, 255, 0.76);
	border: 1px solid rgba(22, 122, 90, 0.12);
	color: var(--ink-soft);
}

.lesson-workshop__privacy strong {
	color: var(--ink);
}

.lesson-technical-details {
	overflow: hidden;
	margin: 27px 0 48px;
	background: #f8faf8;
	border: 1px solid var(--line);
	border-radius: 21px;
}

.lesson-technical-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 21px 23px;
	cursor: pointer;
	list-style: none;
}

.lesson-technical-details > summary::-webkit-details-marker {
	display: none;
}

.lesson-technical-details > summary::after {
	display: grid;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	place-items: center;
	content: "+";
	background: var(--green);
	color: var(--white);
	border-radius: 11px;
	font-size: 22px;
	font-weight: 800;
}

.lesson-technical-details[open] > summary::after {
	content: "−";
}

.lesson-technical-details > summary span,
.lesson-technical-details > summary small {
	display: block;
}

.lesson-technical-details > summary span {
	color: var(--ink);
	font-size: 18px;
	font-weight: 900;
	overflow-wrap: anywhere;
}

.lesson-technical-details > summary small {
	flex: 1 1 auto;
	color: var(--ink-soft);
	font-size: 11px;
	text-align: right;
}

.lesson-technical-details__body {
	padding: 0 23px 24px;
}

.lesson-technical-details__setup {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 2px 0 17px;
}

.lesson-technical-details__setup > div {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 9px;
	padding: 13px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 13px;
}

.lesson-technical-details__step-number {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--mint);
	color: var(--green-dark);
	border-radius: 10px;
	font-size: 10px;
	font-weight: 950;
}

.lesson-technical-details__setup p,
.lesson-technical-details__setup strong {
	display: block;
}

.lesson-technical-details__setup p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 10px;
	line-height: 1.4;
}

.lesson-technical-details__setup strong {
	margin-bottom: 3px;
	color: var(--ink);
	font-size: 11px;
}

.lesson-code {
	overflow-x: auto;
	margin: 0;
	padding: 20px;
	background: #18372e;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	color: #e7f7ee;
	font-size: 12px;
	line-height: 1.6;
	tab-size: 4;
}

.lesson-code code {
	font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.lesson-code-reading {
	margin: 17px 0;
	padding: 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 15px;
}

.lesson-code-reading h3 {
	margin: 0 0 13px;
	color: var(--ink);
	font-size: 16px;
}

.lesson-code-reading dl {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
}

.lesson-code-reading dl > div {
	padding: 10px 7px;
	background: #f7faf8;
	border-radius: 10px;
	text-align: center;
}

.lesson-code-reading dt {
	color: var(--green-dark);
	font-family: monospace;
	font-size: 13px;
	font-weight: 950;
}

.lesson-code-reading dd {
	margin: 4px 0 0;
	color: var(--ink-soft);
	font-size: 9px;
	line-height: 1.35;
}

.lesson-technical-details__body > p {
	color: var(--ink-soft);
	font-size: 12px;
}

.lesson-technical-details__try {
	padding: 16px 18px;
	background: var(--yellow-soft);
	border-radius: 14px;
	color: var(--ink-soft);
	font-size: 12px;
}

.lesson-technical-details__try > strong {
	display: block;
	color: var(--ink);
}

.lesson-technical-details__try ol {
	margin: 7px 0;
	padding-left: 20px;
}

.lesson-technical-details__try p {
	margin: 0;
}

.lesson-model-challenge {
	margin: 26px 0 37px;
	padding: 25px;
	background: linear-gradient(145deg, #f3ecfb, #fffdf6);
	border: 1px solid rgba(108, 77, 161, 0.18);
	border-radius: 22px;
}

.lesson-model-challenge__badge {
	display: inline-flex;
	margin: 0 0 14px !important;
	padding: 6px 10px;
	background: #6c4da1;
	color: var(--white);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 900;
}

.lesson-model-challenge > ol {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.lesson-model-challenge > ol > li {
	display: grid;
	grid-template-columns: 35px minmax(0, 1fr);
	gap: 11px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.84);
	border: 1px solid rgba(108, 77, 161, 0.12);
	border-radius: 14px;
}

.lesson-model-challenge > ol > li > div {
	display: grid;
	width: 35px;
	height: 35px;
	place-items: center;
	background: #6c4da1;
	color: var(--white);
	border-radius: 11px;
	font-size: 11px;
	font-weight: 950;
}

.lesson-model-challenge > ol p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	line-height: 1.5;
}

.lesson-model-challenge .lesson-solution {
	margin: 0;
	background: rgba(255, 255, 255, 0.9);
}

.lesson-model-sources {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 48px;
}

.lesson-model-sources article {
	padding: 18px;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 16px;
}

.lesson-model-sources p {
	margin: 0 0 5px;
	color: var(--green-dark);
	font-size: 9px;
	font-weight: 950;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.lesson-model-sources h3 {
	margin: 0 0 13px;
	color: var(--ink);
	font-size: 15px;
}

.lesson-model-sources a {
	color: var(--green-dark);
	font-size: 11px;
	font-weight: 850;
}

@media (max-width: 760px) {
	.lesson-body-layout > *,
	.lesson-model-definition,
	.lesson-model-pipeline,
	.lesson-model-training-loop,
	.lesson-workshop,
	.lesson-technical-details {
		min-width: 0;
		max-width: 100%;
	}

	.lesson-model-definition {
		grid-template-columns: 1fr;
	}

	.lesson-model-definition__arrow,
	.lesson-model-pipeline__arrow,
	.lesson-model-training-loop__arrow {
		justify-self: center;
		transform: rotate(90deg);
		text-align: center;
	}

	.lesson-model-pipeline {
		grid-template-columns: 1fr;
	}

	.lesson-model-pipeline > article {
		padding: 18px;
	}

	.lesson-model-vocabulary {
		grid-template-columns: 1fr;
	}

	.lesson-model-vocabulary article,
	.lesson-model-vocabulary article:nth-child(4) {
		grid-column: auto;
	}

	.lesson-model-training-loop {
		grid-template-columns: 1fr;
	}

	.lesson-model-training-loop > i:last-child {
		align-self: center;
		margin: 0;
	}

	.lesson-model-equation {
		grid-template-columns: 1fr;
	}

	.lesson-data-split__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.lesson-data-split__heading > span {
		max-width: none;
		text-align: left;
	}

	.lesson-data-split__bar {
		display: grid;
	}

	.lesson-data-split__bar > div {
		min-height: 63px;
	}

	.lesson-system-stack article,
	.lesson-system-stack article:nth-child(1),
	.lesson-system-stack article:nth-child(2),
	.lesson-system-stack article:nth-child(3) {
		width: 100%;
	}

	.lesson-system-stack {
		grid-template-columns: 1fr;
	}

	.lesson-workshop {
		padding: 17px;
	}

	.lesson-workshop__header,
	.lesson-workshop__steps li {
		grid-template-columns: 1fr;
	}

	.lesson-workshop__tests {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lesson-technical-details > summary {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.lesson-technical-details > summary small {
		order: 3;
		flex-basis: 100%;
		min-width: 0;
		text-align: left;
		overflow-wrap: anywhere;
	}

	.lesson-technical-details__setup,
	.lesson-model-sources {
		grid-template-columns: 1fr;
	}

	.lesson-code-reading dl {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lesson-model-challenge > ol {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 430px) {
	.lesson-model-definition > div {
		grid-template-columns: 42px minmax(0, 1fr);
	}

	.lesson-model-definition__symbol {
		width: 42px;
		height: 42px;
	}

	.lesson-model-equation dl {
		grid-template-columns: 1fr;
	}

	.lesson-model-build li {
		grid-template-columns: 42px minmax(0, 1fr);
		padding: 13px;
	}

	.lesson-model-build li > div {
		width: 42px;
		height: 42px;
	}

	.lesson-data-split {
		padding: 17px;
	}

	.lesson-system-stack article {
		grid-template-columns: 47px minmax(0, 1fr);
		padding: 13px;
	}

	.lesson-system-stack__icon {
		width: 45px;
		height: 45px;
	}

	.lesson-workshop__tests,
	.lesson-code-reading dl {
		grid-template-columns: 1fr;
	}

	.lesson-technical-details > summary,
	.lesson-technical-details__body {
		padding-right: 16px;
		padding-left: 16px;
	}

	.lesson-code {
		margin-right: -8px;
		margin-left: -8px;
		padding: 15px;
		font-size: 10px;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
}

/* ------------------------------------------------------------ Back to top */

.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: var(--green);
	box-shadow: var(--shadow);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
	pointer-events: none;
}

.back-to-top span {
	font-size: 22px;
	line-height: 1;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background: var(--green-dark);
}

.back-to-top:focus-visible {
	outline: 3px solid #176ee8;
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.back-to-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}

	.back-to-top span {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* -------------------------------------------------------- Homepage welcome */

.home-welcome {
	background: var(--mint);
	border-bottom: 1px solid rgba(24, 59, 49, 0.1);
}

.home-welcome__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 20px;
	padding: 12px 0;
}

@media (max-width: 560px) {
	.home-welcome__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

.home-welcome__inner p {
	margin: 0;
	color: var(--ink);
	font-size: 14px;
	font-weight: 800;
}

.home-welcome__inner a {
	color: var(--green-dark);
	font-size: 14px;
	font-weight: 850;
}

/* ------------------------------------------------------------ Badge chips */

.level-badge-chip {
	display: grid;
	place-items: center;
	border-radius: 50%;
	transition: filter 180ms ease, opacity 180ms ease;
}

.level-badge-chip__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.level-badge-chip--locked {
	filter: grayscale(1);
	opacity: 0.45;
}

.level-badge-chip--unlocked {
	filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--level-color) 35%, transparent));
}

.level-badge-chip--card-corner {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 46px;
	height: 46px;
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--level-color) 30%, white);
	box-shadow: 0 6px 14px rgba(25, 72, 57, 0.16);
}

.level-badge-chip--card-corner .level-badge-chip__image {
	width: 30px;
	height: 30px;
}

.level-badge-chip--inline {
	width: 38px;
	height: 38px;
	background: color-mix(in srgb, var(--level-color) 10%, white);
	border: 1px solid color-mix(in srgb, var(--level-color) 25%, white);
}

.level-badge-chip--inline .level-badge-chip__image {
	width: 24px;
	height: 24px;
}

.level-badge-chip--title {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	background: color-mix(in srgb, var(--level-color) 10%, white);
	border: 1px solid color-mix(in srgb, var(--level-color) 25%, white);
	box-shadow: 0 6px 14px rgba(25, 72, 57, 0.1);
}

.level-badge-chip--title .level-badge-chip__image {
	width: 28px;
	height: 28px;
}

/* --------------------------------------------------------- Learner dashboard */

.dash-hero {
	position: relative;
	overflow: hidden;
	padding: 88px 0;
	background: linear-gradient(145deg, #eef9f1, #faf8ef);
}

.dash-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 300px;
	align-items: center;
	gap: 70px;
}

.dash-hero__intro h1 {
	margin-bottom: 10px;
	font-size: clamp(40px, 5vw, 60px);
}

.dash-rank {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
}

.dash-rank__title {
	padding: 6px 14px;
	background: var(--green-dark);
	border-radius: 99px;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.dash-rank__next {
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 750;
}

.dash-xp-info {
	max-width: 560px;
	margin: 0 0 20px;
	border: 1px solid rgba(22, 122, 90, 0.28);
	border-radius: 14px;
	background: var(--white);
}

.dash-xp-info summary {
	padding: 12px 16px;
	color: var(--green-dark);
	cursor: pointer;
	font-size: 14px;
	font-weight: 850;
}

.dash-xp-info summary:hover,
.dash-xp-info summary:focus-visible {
	background: var(--mint);
	border-radius: 14px;
}

.dash-xp-info[open] summary {
	border-bottom: 1px solid var(--line);
	border-radius: 14px 14px 0 0;
}

.dash-xp-info > div {
	padding: 4px 16px 16px;
	color: var(--ink-soft);
	font-size: 14px;
}

.dash-xp-info p {
	margin: 10px 0 0;
}

.dash-xp-info ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.dash-xp-info li {
	margin: 4px 0;
}

.dash-hero__lead {
	max-width: 560px;
	margin-bottom: 30px;
	color: var(--ink-soft);
	font-size: 18px;
}

.dash-hero__cta {
	display: inline-flex;
}

.dash-hero__leaf {
	position: absolute;
	background: var(--mint);
	border-radius: 100% 0 100% 0;
	opacity: 0.8;
}

.dash-hero__leaf--one {
	top: -75px;
	right: -35px;
	width: 260px;
	height: 190px;
	transform: rotate(12deg);
}

.dash-hero__leaf--two {
	bottom: -70px;
	left: 6%;
	width: 160px;
	height: 125px;
	transform: rotate(42deg);
}

.dash-stats {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 14px;
}

.dash-stat {
	display: grid;
	grid-template-columns: 44px 1fr;
	align-items: center;
	column-gap: 14px;
	padding: 18px 20px;
	background: var(--white);
	border: 1px solid rgba(24, 59, 49, 0.1);
	border-radius: 20px;
	box-shadow: var(--shadow);
}

.dash-stat__icon {
	display: grid;
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 50%;
}

.dash-stat__icon svg {
	width: 20px;
	height: 20px;
}

.dash-stat strong {
	font-size: 26px;
	line-height: 1.1;
}

.dash-stat span:last-child {
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dash-stat--streak .dash-stat__icon { background: #ffe3d3; color: #9a3412; }
.dash-stat--streak strong { color: #9a3412; }
.dash-stat--stars .dash-stat__icon { background: var(--yellow-soft); color: #6b4a08; }
.dash-stat--stars strong { color: #6b4a08; }
.dash-stat--xp .dash-stat__icon { background: var(--lilac); color: #4a3b80; }
.dash-stat--xp strong { color: #4a3b80; }
.dash-stat--badges .dash-stat__icon { background: var(--mint); color: var(--green-dark); }
.dash-stat--badges strong { color: var(--green-dark); }

.dash-content {
	padding: 90px 0 115px;
	background: var(--cream);
}

.dash-content__intro {
	margin-bottom: 45px;
}

.dash-content__intro h2 {
	margin-bottom: 0;
	font-size: clamp(32px, 3.6vw, 46px);
}

.dash-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.dash-level-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
	border-radius: 22px;
}

.dash-level-card--available {
	background: var(--white);
	border-color: color-mix(in srgb, var(--level-color) 40%, white);
	box-shadow: 0 14px 34px rgba(25, 72, 57, 0.08);
}

.dash-level-card__head {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	column-gap: 12px;
	margin-bottom: 18px;
}

.dash-level-card__number {
	display: grid;
	width: 40px;
	height: 40px;
	place-items: center;
	background: color-mix(in srgb, var(--level-color) 15%, white);
	color: var(--level-color);
	border-radius: 50%;
	font-size: 13px;
	font-weight: 950;
}

.dash-level-card__title h3 {
	margin: 0 0 5px;
	font-size: 17px;
	line-height: 1.25;
}

.dash-level-card__badge {
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	transition: filter 180ms ease, opacity 180ms ease;
}

.dash-level-card__badge-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dash-level-card__badge--locked {
	filter: grayscale(1);
	opacity: 0.4;
}

.dash-level-card__badge--unlocked {
	filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--level-color) 30%, transparent));
}

.dash-level-card__progress .progress {
	margin-bottom: 8px;
}

.dash-level-card__progress p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 750;
}

.dash-level-card__stars {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	color: #6b4a08;
	font-size: 13px;
	font-weight: 850;
}

.dash-level-card__stars svg {
	width: 14px;
	height: 14px;
	color: #b8780f;
}

.dash-level-card__link {
	margin-top: 16px;
	color: var(--green-dark);
	font-size: 13px;
	font-weight: 850;
}

.dash-level-card__soon {
	margin: 0;
	color: #9aa49f;
	font-size: 13px;
	font-weight: 800;
}

.dash-secrets {
	padding: 0 0 115px;
	background: var(--cream);
}

.dash-secret-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.dash-secret-card {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 16px;
	align-items: start;
	padding: 22px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 20px;
}

.dash-secret-card--locked {
	background: rgba(255, 255, 255, 0.6);
}

.dash-secret-card__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #edf1ee;
	color: #9aa69f;
}

.dash-secret-card__icon svg {
	width: 24px;
	height: 24px;
}

.dash-secret-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	filter: grayscale(1);
	opacity: 0.55;
}

.dash-secret-card--unlocked .dash-secret-card__icon {
	background: var(--mint);
	color: var(--green-dark);
}

.dash-secret-card--unlocked .dash-secret-card__icon img {
	filter: none;
	opacity: 1;
}

.dash-secret-card__label {
	margin: 0 0 4px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 850;
}

.dash-secret-card--locked .dash-secret-card__label {
	color: #8b9993;
}

.dash-secret-card__description {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13px;
	line-height: 1.5;
}

.dash-secret-card--locked .dash-secret-card__description {
	color: #a3ada8;
}

.dash-secret-card__date {
	margin: 8px 0 0;
	color: var(--green-dark);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

@media (max-width: 1080px) {
	.dash-grid,
	.dash-secret-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.dash-hero__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.dash-hero {
		padding: 60px 0;
	}

	.dash-grid,
	.dash-secret-grid {
		grid-template-columns: 1fr;
	}

	.dash-content {
		padding: 60px 0 80px;
	}

	.dash-secrets {
		padding: 0 0 80px;
	}
}

/* -------------------------------------------------------- Quiz confetti */

.quiz-confetti {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	pointer-events: none;
}

.quiz-confetti__piece {
	position: absolute;
	height: auto;
	margin: 0;
	transform: translate(-50%, -50%);
	will-change: transform, opacity;
	animation-duration: var(--burst-duration), var(--fall-duration);
	animation-delay: var(--delay), var(--fall-delay);
	animation-fill-mode: forwards, forwards;
	animation-name: quiz-confetti-burst, quiz-confetti-fall;
	animation-timing-function: ease-out, linear;
}

/*
 * Two separate, chained animations rather than one with shared percentage
 * stops: every piece bursts outward in nearly the same short span, so the
 * explosion itself stays a single synced moment. The fall picks up exactly
 * where the burst ends, but its own duration varies a lot per piece, which is
 * what actually makes leaves drift down at visibly different speeds.
 *
 * The burst uses the plain `ease-out` curve (not a custom one) because a
 * curve that visually "arrives" early and goes flat for the rest of its
 * duration reads as the piece stopping dead before the fall takes over. The
 * fall's own first stretch is eased in for the same reason, so motion keeps
 * carrying through the handoff instead of restarting from zero.
 */
@keyframes quiz-confetti-burst {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
		opacity: 1;
	}

	100% {
		transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--spin) * 0.35));
		opacity: 1;
	}
}

@keyframes quiz-confetti-fall {
	0% {
		transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--spin) * 0.35));
		opacity: 1;
		animation-timing-function: ease-in;
	}

	22% {
		transform: translate(calc(-50% + var(--dx) + var(--sway1)), calc(-50% + var(--dy) + (var(--fall) - var(--dy)) * 0.22)) rotate(calc(var(--spin) * 0.5));
		opacity: 1;
		animation-timing-function: linear;
	}

	46% {
		transform: translate(calc(-50% + var(--dx) + var(--sway2)), calc(-50% + var(--dy) + (var(--fall) - var(--dy)) * 0.46)) rotate(calc(var(--spin) * 0.68));
		opacity: 1;
		animation-timing-function: linear;
	}

	70% {
		transform: translate(calc(-50% + var(--dx) + var(--sway3)), calc(-50% + var(--dy) + (var(--fall) - var(--dy)) * 0.7)) rotate(calc(var(--spin) * 0.85));
		opacity: 1;
		animation-timing-function: linear;
	}

	92% {
		transform: translate(calc(-50% + var(--dx) * 1.05), calc(-50% + var(--fall))) rotate(var(--spin));
		opacity: 1;
	}

	100% {
		transform: translate(calc(-50% + var(--dx) * 1.08), calc(-50% + var(--fall) + 40px)) rotate(var(--spin));
		opacity: 0;
	}
}

.quiz-confetti__flash,
.quiz-confetti__ring {
	position: absolute;
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
}

.quiz-confetti__flash {
	width: 46px;
	height: 46px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(163, 224, 99, 0.55) 45%, rgba(163, 224, 99, 0) 75%);
	transform: translate(-50%, -50%) scale(0.4);
	animation: quiz-confetti-flash 0.55s cubic-bezier(0.16, 0.85, 0.3, 1) forwards;
}

.quiz-confetti__ring {
	width: 46px;
	height: 46px;
	border: 3px solid rgba(46, 125, 50, 0.55);
	transform: translate(-50%, -50%) scale(0.4);
	animation: quiz-confetti-ring 0.7s cubic-bezier(0.16, 0.85, 0.3, 1) forwards;
}

@keyframes quiz-confetti-flash {
	0% {
		transform: translate(-50%, -50%) scale(0.3);
		opacity: 1;
	}

	100% {
		transform: translate(-50%, -50%) scale(3.4);
		opacity: 0;
	}
}

@keyframes quiz-confetti-ring {
	0% {
		transform: translate(-50%, -50%) scale(0.3);
		opacity: 0.9;
	}

	100% {
		transform: translate(-50%, -50%) scale(9);
		opacity: 0;
	}
}