/* Public resume guides (views/guides/). Uses the redesign tokens from main.css. */

.guide {
	max-width: 46rem;
	padding-top: 7rem;
	padding-bottom: 4rem;
	color: var(--slate-800);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.guide h1 {
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight: 800;
	color: var(--slate-900);
	margin: 0 0 0.5rem;
}

.guide h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--slate-900);
	margin: 2.75rem 0 1rem;
}

.guide h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--slate-900);
	margin: 1.5rem 0 0.375rem;
}

.guide p { margin: 0 0 1rem; }

.guide a { color: var(--blue-600); }

.guide-crumbs { font-size: 0.875rem; color: var(--slate-500); }

.guide-subtitle { font-size: 1.25rem; color: var(--slate-600); }

.guide-byline { font-size: 0.875rem; color: var(--slate-500); }

.guide-intro { font-size: 1.1875rem; color: var(--slate-700); }
.guide-byline + .guide-intro { margin-top: 1.5rem; }

.guide-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: 1.75rem 0;
}

.guide-cta .btn {
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--white);
}

.guide-tips { padding-left: 1.5rem; }
.guide-tips li { margin-bottom: 1rem; padding-left: 0.25rem; }

.guide-ba {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

.guide-ba-item {
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid var(--slate-200);
	background: var(--white);
}

.guide-ba-item p { margin: 0; }

.guide-ba-after { border-color: var(--green-100); background: var(--green-50); }

.guide-ba-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--slate-500);
	margin-bottom: 0.375rem;
}

.guide-ba-after .guide-ba-label { color: var(--green-600); }

.guide-sample {
	margin: 1.75rem 0 2rem;
	border: 1px solid var(--slate-200);
	border-radius: 0.5rem;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
	overflow: hidden;
}

.guide-sample .example-resume { min-height: 0; padding: 56px 64px; }

.guide-checklist { list-style: none; padding-left: 0; }

.guide-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.625rem;
}

.guide-checklist li:before {
	content: "\2713";
	position: absolute;
	left: 0.25rem;
	color: var(--green-600);
	font-weight: 700;
}

.guide-faq h3:first-child { margin-top: 0; }

.guide-note {
	font-size: 0.9375rem;
	color: var(--slate-600);
	border-left: 3px solid var(--slate-300);
	padding-left: 1rem;
	margin-top: 2rem;
}

.guide-related { padding-left: 1.25rem; }
.guide-related li { margin-bottom: 0.5rem; }

/* Shared closing CTA (views/guides/value-cta.ejs) */

.value-cta {
	margin-top: 3.5rem;
	padding: 2rem 2.25rem;
	background: var(--blue-50);
	border: 1px solid var(--blue-100);
	border-radius: 1rem;
}

.guide .value-cta h2 { margin-top: 0; margin-bottom: 0.5rem; }

.value-cta-lead { color: var(--slate-700); }

.value-cta-list { list-style: none; padding: 0; margin: 1.5rem 0 1.75rem; }

.value-cta-list li {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.value-cta-list svg {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.2rem;
	color: var(--blue-600);
}

.value-cta .btn {
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--white);
}

@media (max-width: 640px) {
	.guide { font-size: 1rem; padding-top: 6rem; }
	.guide h1 { font-size: 1.75rem; }
	.guide h2 { font-size: 1.3125rem; margin-top: 2.25rem; }
	.guide-ba { grid-template-columns: 1fr; }
	.guide-cta .btn { width: 100%; text-align: center; }
	.guide-sample .example-resume { padding: 28px 22px; }
	.value-cta { padding: 1.5rem 1.25rem; }
	.value-cta .btn { width: 100%; text-align: center; }
	.guide-sample .period { float: none; display: block; text-align: left; }
}