.hgq__screen--summary > .hgq__badge { margin-bottom: 16px; }
.hgq__screen--summary .hgq__body { max-width: 58ch; }
.hgq .hgq__dimension.is-alert { border-color: var(--hgq-red); }
.hgq .hgq__dimension.is-alert .hgq__dimension-value { color: var(--hgq-red); }
.hgq__dimensions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 24px 0;
}
.hgq__reasons { display: grid; gap: 13px; margin: 24px 0; list-style: none; }
.hgq__reason {
	position: relative;
	padding-left: 31px;
	color: var(--hgq-muted);
	font-size: .96rem;
	line-height: 1.75;
}
.hgq__reason::before {
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--hgq-teal);
	content: '✓';
	font-size: 1.15rem;
	font-weight: var(--hgq-heading-weight);
}
.hgq__screen--plan .hgq__body { max-width: 60ch; }
.hgq__timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--hgq-months), minmax(0, 1fr));
	gap: 4px;
	width: 100%;
	max-width: 720px;
	margin: 30px 0 28px;
	padding: 0 4px;
	list-style: none;
}
.hgq__timeline::before {
	position: absolute;
	z-index: 1;
	bottom: 32px;
	left: 4px;
	right: 4px;
	height: 2px;
	background: var(--hgq-border);
	content: '';
}
.hgq__timeline-month { position: relative; min-width: 0; text-align: center; }
.hgq__timeline-track {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 176px;
	padding-bottom: 8px;
}
.hgq__timeline-bar {
	position: relative;
	z-index: 2;
	display: block;
	width: clamp(12px, 76%, 56px);
	height: var(--hgq-bar-height);
	border-radius: 7px 7px 0 0;
	background: color-mix(in srgb, var(--hgq-blue) var(--hgq-bar-progress), var(--hgq-teal));
}
.hgq__timeline-marker {
	position: absolute;
	z-index: 3;
	bottom: 16px;
	left: 50%;
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	transform: translateX(-50%);
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--hgq-dark-blue);
	box-shadow: 0 2px 6px rgba(10, 58, 110, .2);
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
}
.hgq__timeline-goal {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	color: var(--hgq-blue);
	font-family: var(--hgq-heading-font);
	font-size: .7rem;
	font-weight: 800;
	text-transform: uppercase;
}
.hgq__timeline-month.is-goal .hgq__timeline-bar {
	outline: 3px solid var(--hgq-gold);
	outline-offset: 2px;
}
.hgq__timeline-label {
	display: block;
	position: relative;
	left: 50%;
	width: max-content;
	min-height: 24px;
	transform: translateX(-50%);
	white-space: nowrap;
	color: var(--hgq-muted);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.25;
}
.hgq__timeline-month.is-goal .hgq__timeline-label { color: var(--hgq-blue); }
.hgq__milestones { display: grid; gap: 12px; margin: 0 0 24px; list-style: none; }
.hgq__milestone {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 10px;
	align-items: start;
}
.hgq__milestone-number {
	grid-row: span 2;
	display: grid;
	width: 26px;
	height: 26px;
	place-items: center;
	border-radius: 50%;
	background: var(--hgq-dark-blue);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
}
.hgq__milestone-date { color: var(--hgq-text); font-size: .85rem; }
.hgq__milestone-text,
.hgq__routine { color: var(--hgq-muted); font-size: .96rem; line-height: 1.75; }
.hgq__recommendation {
	margin: 22px 0;
	padding: 14px 16px;
	border-radius: var(--hgq-box-radius);
	background: var(--hgq-bg);
	color: var(--hgq-text);
	font-weight: 700;
}
@media (max-width: 600px) {
	.hgq__dimensions { grid-template-columns: 1fr; }
	.hgq__timeline { gap: 2px; }
	.hgq__timeline-label { visibility: hidden; font-size: .7rem; }
	.hgq__timeline-month.is-first .hgq__timeline-label,
	.hgq__timeline-month.is-goal .hgq__timeline-label,
	.hgq__timeline-month.is-last .hgq__timeline-label { visibility: visible; }
}