.guide-hero {
	padding: 70px 0 30px
}

	.guide-hero h1 {
		font-size: clamp(40px,4.6vw,60px);
		max-width: 780px
	}

	.guide-hero .lead {
		font-size: 18px;
		max-width: 640px;
		line-height: 1.7
	}

.guide-part + .guide-part {
	border-top: 1px solid var(--line)
}

.guide-part .intro {
	max-width: 640px;
	font-size: 17px;
	margin: 0 0 30px
}

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

.card {
	background: white;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 25px 22px
}

	.card h3 {
		font-size: 19px;
		letter-spacing: -.4px;
		margin: 0 0 8px
	}

	.card p {
		font-size: 15px;
		margin: 0
	}

.qlist {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: q;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 50px
}

	.qlist li {
		counter-increment: q;
		display: flex;
		gap: 16px;
		padding: 16px 0;
		border-bottom: 1px solid var(--line);
		font-size: 16px
	}

		.qlist li:before {
			content: counter(q,decimal-leading-zero);
			color: var(--blue);
			font-weight: 700;
			font-size: 14px;
			padding-top: 2px
		}

.textlink {
	color: var(--blue);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px
}

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

.guide-note {
	margin-top: 40px;
	font-size: 14px;
	max-width: 700px
}

.topic.soon {
	background: transparent;
	border-style: dashed
}

	.topic.soon:hover {
		transform: none;
		border-color: var(--line)
	}

	.topic.soon .num, .topic.soon .explore {
		color: #697484
	}

.topics-note {
	margin: 26px 0 0;
	font-size: 15px
}

@media(max-width:850px) {
	.cards {
		grid-template-columns: repeat(2,1fr)
	}
}

@media(max-width:620px) {
	.guide-hero {
		padding: 40px 0 10px
	}

	.cards, .qlist {
		grid-template-columns: 1fr
	}
}