/* Happy theme: bright and warm, but organized. Each topic has its own color. */

:root {
	--blue: #2f6fde;
	--blue-dark: #2359bd;
	--ink: #1d2b3a;
	--paper: #fffdf8;
	--line: #ebe6dc;
	--muted: #4b5666;
	--sky: #e6efff;
	--sun: #ffd166;
	--sun-soft: #fff2cc;
	--coral: #c2410c;
	--coral-mid: #ff9b73;
	--coral-soft: #ffe4d6;
	--green: #18794e;
	--green-mid: #5cc495;
	--mint-soft: #d9f4e6;
	--blue-mid: #7aa7f5;
	--amber: #92600a;
	--lime: #fff2cc
}

body {
	font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	line-height: 1.7;
	color: var(--ink)
}

p {
	color: var(--muted)
}

header {
	background: rgba(255,253,248,.96)
}

a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--sun);
	outline-offset: 4px
}

/* Type */

.logo {
	font-weight: 800;
	letter-spacing: -.6px
}

	/* The logo's dot (and ".com" in the footer) sits right after the name, not a gap away */
	.logo > span:not(.mark) {
		margin-left: -10px
	}

h1 {
	font-weight: 800;
	letter-spacing: -1.5px;
	line-height: 1.1
}

	h1 em {
		color: var(--blue);
		background: linear-gradient(transparent 62%, var(--sun) 62%);
		padding: 0 6px;
		border-radius: 4px;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone
	}

h2 {
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.18
}

h3 {
	font-weight: 800
}

.eyebrow {
	font-weight: 800;
	letter-spacing: 1.2px;
	color: var(--blue)
}

/* Buttons */

.btn {
	border-radius: 999px;
	font-weight: 800;
	transition: background .2s, border-color .2s, transform .2s
}

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

	.btn.outline {
		border: 2px solid #cbd7ea
	}

		.btn.outline:hover {
			background: #fff;
			border-color: var(--blue);
			color: var(--ink)
		}

/* Hero: the headline gets the room, the photo stays whole, the note sits just below it */

.hero {
	grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
	align-items: start;
	padding-top: 56px
}

	.hero > div:first-child {
		padding-top: 10px
	}

.visual {
	width: 100%;
	max-width: 500px;
	justify-self: end;
	align-self: center;
	padding-bottom: 0
}

	.visual img {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		object-fit: cover;
		border-radius: 22px
	}

.note {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	margin: -26px 14px 0;
	padding: 16px 18px;
	border-radius: 18px;
	box-shadow: 0 12px 34px #1d2b3a17
}

.tick {
	background: var(--sun)
}

.ribbon {
	font-weight: 700;
	color: var(--ink)
}

	.ribbon span:before {
		content: '';
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: var(--blue-mid);
		margin-right: 10px;
		vertical-align: middle
	}

	.ribbon span:nth-child(1):before { background: var(--coral-mid) }
	.ribbon span:nth-child(2):before { background: var(--green-mid) }
	.ribbon span:nth-child(3):before { background: var(--blue-mid) }
	.ribbon span:nth-child(4):before { background: var(--sun) }

/* Topic cards: one color per topic */

.topics .topic:nth-child(1) { --accent: var(--coral); --accent-soft: var(--coral-soft) }
.topics .topic:nth-child(2) { --accent: var(--green); --accent-soft: var(--mint-soft) }
.topics .topic:nth-child(3) { --accent: var(--blue); --accent-soft: var(--sky) }
.topics .topic:nth-child(4) { --accent: var(--amber); --accent-soft: var(--sun-soft) }

.topics .topic {
	background: var(--accent-soft);
	border: 2px solid transparent;
	border-radius: 20px;
	transition: border-color .2s, transform .2s, box-shadow .2s
}

	.topics .topic:hover {
		border-color: var(--accent);
		transform: translateY(-3px);
		box-shadow: 0 10px 28px #1d2b3a14
	}

	.topics .topic .num, .topics .topic .explore {
		color: var(--accent);
		font-weight: 800;
		letter-spacing: .5px
	}

	.topics .topic.soon {
		background: #fff;
		border: 2px dashed var(--accent-soft)
	}

		.topics .topic.soon:hover {
			transform: none;
			box-shadow: none;
			border-color: var(--accent-soft)
		}

/* Guide cards: cheerful color bars */

.card {
	border-radius: 18px;
	border-top: 6px solid var(--blue-mid)
}

	.cards .card:nth-child(4n+1) { border-top-color: var(--coral-mid) }
	.cards .card:nth-child(4n+2) { border-top-color: var(--green-mid) }
	.cards .card:nth-child(4n+3) { border-top-color: var(--blue-mid) }
	.cards .card:nth-child(4n+4) { border-top-color: var(--sun) }

.journey {
	border-radius: 20px
}

.journey-intro {
	background: var(--sky)
}

.badge {
	color: var(--blue);
	font-weight: 800
}

/* How it works and help sections */

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

	.how p {
		color: var(--muted)
	}

	.how .textlink {
		color: var(--blue)
	}

.stepnum {
	color: var(--blue);
	border-top: 4px solid var(--blue-mid);
	font-weight: 800;
	letter-spacing: .5px
}

.steps > div:nth-child(1) .stepnum { border-top-color: var(--coral-mid) }
.steps > div:nth-child(2) .stepnum { border-top-color: var(--green-mid) }
.steps > div:nth-child(3) .stepnum { border-top-color: var(--sun) }

/* Mentors */

.mentor-card {
	transform: rotate(-1.5deg);
	border-radius: 22px;
	background: var(--sun-soft)
}

.bubble.reply {
	background: var(--blue)
}

.mentor li:before {
	color: var(--green)
}

/* Closing */

.closing {
	background: var(--blue);
	color: #fff;
	border-radius: 24px
}

	.closing .eyebrow {
		color: var(--sun)
	}

	.closing p {
		color: #e3ecff
	}

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

		.closing .btn.light:hover {
			background: #ffdc85
		}

/* Menu */

.navmenu-list {
	border-radius: 16px
}

	.navmenu-list a:hover {
		background: var(--sky)
	}

/* Phones */

@media(max-width:620px) {
	.hero {
		grid-template-columns: 1fr;
		padding-top: 40px
	}

		.hero > div:first-child {
			padding-top: 0
		}

	.visual {
		max-width: none;
		justify-self: stretch;
		margin: 10px 0 0
	}

	.note {
		margin: -22px 12px 0
	}
}