:root {
			--blue: #2946dc;
			--ink: #15243a;
			--paper: #fafaf6;
			--lime: #e4f390;
			--line: #dce0e6
		}

		* {
			box-sizing: border-box
		}

		html {
			scroll-behavior: smooth;
			scroll-padding-top: 95px
		}

		body {
			margin: 0;
			background: var(--paper);
			color: var(--ink);
			font-family: Arial,Helvetica,sans-serif;
			font-size: 16px;
			line-height: 1.6
		}

		a {
			color: inherit;
			text-decoration: none
		}

		button {
			font: inherit;
			cursor: pointer
		}

		button, a, input {
			-webkit-tap-highlight-color: transparent
		}

			a:focus-visible, button:focus-visible, summary:focus-visible {
				outline: 3px solid #f2a341;
				outline-offset: 5px
			}

		.wrap {
			max-width: 1200px;
			margin: auto;
			padding: 0 36px
		}

		header {
			background: rgba(250,250,246,.97);
			position: sticky;
			top: 0;
			z-index: 10;
			border-bottom: 1px solid var(--line)
		}

		nav {
			height: 86px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 25px
		}

		.logo {
			font-size: 27px;
			font-weight: 800;
			letter-spacing: -1.1px;
			display: flex;
			align-items: center;
			gap: 10px
		}

		.mark {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 35px;
			height: 35px;
			background: var(--blue);
			border-radius: 10px;
			color: white;
			font-size: 25px;
			letter-spacing: 0;
			padding-right: 0
		}

		.navlinks {
			display: flex;
			align-items: center;
			gap: 30px;
			font-size: 14px;
			font-weight: 600
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border: 1px solid transparent;
			border-radius: 8px;
			padding: 13px 22px;
			background: var(--blue);
			color: white;
			font-size: 15px;
			font-weight: 700;
			transition: transform .2s,background .2s
		}

			.btn:hover {
				background: #1b33ba;
				transform: translateY(-2px)
			}

			.btn.light {
				background: var(--lime);
				color: var(--ink)
			}

			.btn.outline {
				background: transparent;
				border-color: var(--line);
				color: var(--ink)
			}

		.eyebrow {
			font-size: 12px;
			letter-spacing: 2px;
			font-weight: 800;
			text-transform: uppercase
		}

		.hero {
			padding: 75px 0 65px;
			display: grid;
			grid-template-columns: 1.05fr 1fr;
			gap: 50px;
			align-items: center
		}

		h1 {
			font-size: clamp(45px,5.1vw,68px);
			line-height: 1.06;
			letter-spacing: -3px;
			margin: 22px 0
		}

			h1 em {
				color: var(--blue);
				font-style: normal
			}

		p {
			color: #546173
		}

		h1 + p {
			font-size: 18px;
			max-width: 470px;
			line-height: 1.7
		}

		.actions {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			margin: 29px 0 17px
		}

		.small {
			font-size: 13px;
			color: #697484
		}

		.visual {
			position: relative;
			padding-bottom: 30px
		}

			.visual img {
				width: 100%;
				display: block;
				aspect-ratio: 1/1.03;
				object-fit: cover;
				border-radius: 15px
			}

		.note {
			position: absolute;
			bottom: 0;
			left: -23px;
			right: 32px;
			background: white;
			border: 1px solid var(--line);
			padding: 20px 23px;
			box-shadow: 0 10px 35px #15243a12;
			border-radius: 12px;
			display: flex;
			gap: 15px;
			align-items: center
		}

		.tick {
			background: var(--lime);
			border-radius: 50%;
			min-width: 38px;
			height: 38px;
			display: grid;
			place-items: center;
			font-size: 20px
		}

		.note strong {
			display: block;
			font-size: 15px
		}

		.note span {
			font-size: 13px;
			color: #657185
		}

		.ribbon {
			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);
			display: flex;
			justify-content: space-between;
			gap: 20px;
			padding: 23px 0;
			font-size: 14px;
			font-weight: 600
		}

			.ribbon span:before {
				content: '✳';
				color: var(--blue);
				margin-right: 10px
			}

		section {
			padding: 85px 0
		}

		h2 {
			font-size: clamp(30px,3.3vw,43px);
			letter-spacing: -1.7px;
			line-height: 1.15;
			margin: 12px 0 20px
		}

		h3 {
			line-height: 1.3
		}

		.section-head {
			display: flex;
			justify-content: space-between;
			align-items: end;
			gap: 35px;
			margin-bottom: 33px
		}

			.section-head p {
				max-width: 370px;
				margin: 0 0 22px
			}

		.topics {
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 16px
		}

		.topic {
			text-align: left;
			padding: 25px 22px;
			background: white;
			border: 1px solid var(--line);
			border-radius: 12px;
			color: var(--ink);
			display: flex;
			flex-direction: column;
			transition: transform .2s,border-color .2s
		}

			.topic:hover {
				transform: translateY(-5px);
				border-color: var(--blue)
			}

			.topic.active {
				border-color: var(--blue);
				box-shadow: inset 0 0 0 1px var(--blue)
			}

			.topic .num {
				font-size: 13px;
				color: var(--blue);
				font-weight: 700;
				display: block;
				margin-bottom: 25px
			}

			.topic h3 {
				font-size: 21px;
				letter-spacing: -.6px;
				margin: 0 0 10px
			}

			.topic p {
				font-size: 14px;
				margin: 0 0 22px
			}

			.topic .explore {
				margin-top: auto;
				font-size: 13px;
				font-weight: 700;
				color: var(--blue)
			}

		.journey {
			margin-top: 24px;
			display: grid;
			grid-template-columns: .8fr 1.2fr;
			border: 1px solid var(--line);
			border-radius: 14px;
			overflow: hidden;
			background: white
		}

		.journey-intro {
			padding: 34px;
			background: #eef0fc
		}

			.journey-intro h3 {
				font-size: 27px;
				letter-spacing: -1px;
				margin: 16px 0
			}

			.journey-intro p {
				font-size: 15px
			}

		.badge {
			font-size: 12px;
			font-weight: 700;
			background: white;
			border-radius: 20px;
			padding: 7px 12px;
			display: inline-block
		}

		.checklist {
			padding: 26px 34px
		}

			.checklist label {
				display: flex;
				gap: 13px;
				align-items: start;
				padding: 14px 0;
				border-bottom: 1px solid #eceef2;
				font-size: 15px;
				cursor: pointer
			}

			.checklist input {
				accent-color: var(--blue);
				width: 19px;
				height: 19px;
				margin: 3px 0 0;
				flex-shrink: 0
			}

			.checklist label:has(input:checked) span {
				text-decoration: line-through;
				color: #6a7585
			}

		.progressrow {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			margin-bottom: 8px;
			color: #647084
		}

		.track {
			background: #e9edf3;
			height: 5px;
			border-radius: 9px;
			overflow: hidden
		}

		.fill {
			width: 0;
			height: 100%;
			background: var(--blue);
			transition: width .25s
		}

		.how {
			background: var(--ink);
			color: white
		}

			.how p {
				color: #b8c5d7
			}

		.steps {
			display: grid;
			grid-template-columns: repeat(3,1fr);
			gap: 55px;
			margin-top: 48px
		}

		.stepnum {
			font-size: 14px;
			color: var(--lime);
			border-top: 1px solid #4a596c;
			padding-top: 18px
		}

		.steps h3 {
			font-size: 23px;
			letter-spacing: -.6px
		}

		.steps p {
			font-size: 15px
		}

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

		.mentor-card {
			background: var(--lime);
			padding: 39px;
			border-radius: 15px;
			transform: rotate(-2deg)
		}

			.mentor-card .label {
				font-size: 12px;
				letter-spacing: 1.5px;
				font-weight: 700
			}

		.bubble {
			padding: 20px;
			background: #fff;
			border-radius: 14px 14px 14px 2px;
			margin: 22px 28px 13px 0;
			font-size: 18px;
			line-height: 1.5
		}

			.bubble.reply {
				background: var(--ink);
				color: white;
				margin: 0 0 26px 30px;
				border-radius: 14px 14px 2px 14px;
				font-size: 16px
			}

		.mentor-card small {
			font-size: 12px
		}

		.mentor p {
			font-size: 17px
		}

		.mentor ul {
			list-style: none;
			padding: 0;
			font-size: 15px
		}

		.mentor li {
			margin: 13px 0
		}

			.mentor li:before {
				content: '✓';
				color: var(--blue);
				font-weight: bold;
				margin-right: 12px
			}

		.faq {
			border-top: 1px solid var(--line);
			display: grid;
			grid-template-columns: .8fr 1.2fr;
			gap: 70px
		}

			.faq details {
				border-bottom: 1px solid var(--line);
				padding: 20px 0
			}

			.faq summary {
				cursor: pointer;
				font-weight: 600;
				list-style: none;
				display: flex;
				justify-content: space-between;
				gap: 15px
			}

				.faq summary:after {
					content: '+';
					font-size: 22px;
					color: var(--blue)
				}

			.faq details[open] summary:after {
				content: '−'
			}

			.faq details p {
				font-size: 15px;
				max-width: 540px
			}

		.closing {
			background: var(--blue);
			color: white;
			text-align: center;
			padding: 65px 25px;
			border-radius: 16px;
			margin-bottom: 65px
		}

			.closing h2 {
				font-size: 44px
			}

			.closing p {
				color: #e0e5ff
			}

			.closing .btn {
				margin-top: 10px
			}

		footer {
			padding: 25px 0 35px;
			border-top: 1px solid var(--line)
		}

		.footer-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 25px
		}

			.footer-row p {
				font-size: 13px
			}

			.footer-row .logo {
				font-size: 22px
			}

		.skip {
			position: absolute;
			left: -999px
		}

			.skip:focus {
				left: 10px;
				top: 10px;
				background: white;
				z-index: 50;
				padding: 10px
			}

		@media(max-width:850px) {
			.wrap {
				padding: 0 24px
			}

			.navlinks {
				gap: 18px
			}

			.hero {
				gap: 30px
			}

			h1 {
				letter-spacing: -2px
			}

			.topics {
				grid-template-columns: repeat(2,1fr)
			}

			.mentor {
				gap: 40px
			}

			.ribbon {
				font-size: 12px
			}

			.steps {
				gap: 25px
			}
		}

		@media(max-width:620px) {
			nav {
				height: 72px
			}

			.navlinks > a:not(.btn) {
				display: none
			}

			.navlinks .btn {
				font-size: 13px;
				padding: 10px 14px
			}

			.logo {
				font-size: 23px
			}

			.hero {
				grid-template-columns: 1fr;
				padding: 40px 0
			}

				.hero h1 {
					font-size: 51px;
					max-width: 420px
				}

			.visual {
				margin: 10px 0 0 12px
			}

				.visual img {
					aspect-ratio: 1.25
				}

			.note {
				left: -12px;
				right: 18px
			}

			.ribbon {
				display: grid;
				grid-template-columns: 1fr 1fr;
				font-size: 12px;
				gap: 12px
			}

			section {
				padding: 55px 0
			}

			.section-head {
				display: block
			}

				.section-head p {
					margin-top: 18px
				}

			.topics {
				gap: 10px
			}

			.topic {
				padding: 21px 16px
			}

				.topic h3 {
					font-size: 19px
				}

			.journey, .mentor, .faq {
				grid-template-columns: 1fr;
				gap: 0
			}

			.journey-intro, .checklist {
				padding: 25px
			}

			.steps {
				grid-template-columns: 1fr;
				gap: 15px
			}

				.steps h3 {
					margin: 13px 0
				}

			.mentor {
				gap: 38px
			}

			.mentor-card {
				padding: 25px
			}

			.faq {
				gap: 15px
			}

			.closing h2 {
				font-size: 34px
			}

			.footer-row {
				align-items: start;
				flex-direction: column;
				gap: 5px
			}

			.closing {
				margin-bottom: 40px
			}

			.eyebrow {
				font-size: 11px
			}
		}

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

			* {
				transition: none !important
			}
		}