/* Segment page template — README §3 */

.breadcrumb {
	display: block;
	margin-bottom: 34px;
	font-size: 14px;
	color: var(--color-meta-dark);
}
.breadcrumb a { color: var(--color-meta-dark); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--color-white); }
.breadcrumb__sep { margin: 0 8px; }
.breadcrumb__current { color: var(--color-white); }

/* Horizontal gutter comes from the nested .container in every section
   below — sections themselves only carry vertical padding. */
.segment-intro {
	position: relative;
	overflow: hidden;
	padding-top: 52px;
	padding-bottom: 76px;
}
.segment-intro__swoosh {
	width: 640px;
	right: -120px;
	bottom: -120px;
	transform: rotate(-6deg);
	fill: var(--color-primary);
	opacity: 0.15;
}
.segment-intro h1 {
	position: relative;
	font-size: clamp(32px, 7vw, 56px);
	line-height: 1.06;
	letter-spacing: -0.026em;
	max-width: 22ch;
	margin-bottom: var(--space-24);
}
.segment-intro__lede {
	position: relative;
	max-width: 70ch;
	font-size: 20px;
	line-height: 1.6;
	color: var(--color-muted-dark);
	margin-bottom: 36px;
}
.placeholder-inline-dark { color: var(--color-primary); }
.segment-intro .btn-primary { position: relative; }

.segment-body { padding-top: 88px; }
.segment-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 80px;
}
.segment-body__main h2:not(:first-child) { margin-top: 56px; }
.segment-body__main h2 { margin-bottom: var(--space-24); }
.segment-body__main > p { margin-bottom: var(--space-16); font-size: 16px; line-height: 1.5; }

.checklist {
	column-count: 2;
	column-gap: 32px;
	margin-bottom: var(--space-16);
}
.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	break-inside: avoid;
	margin-bottom: 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-ink);
}
.checklist__mark { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.aside-note {
	align-self: start;
	border: 1px solid var(--color-ink);
	border-top: 4px solid var(--color-primary);
	padding: 34px 30px;
}
.aside-note__label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	margin-bottom: var(--space-16);
}
.aside-note p { margin: 0 0 var(--space-16); font-size: 15px; line-height: 1.6; }
.aside-note__placeholder {
	margin: 0;
	padding-top: var(--space-16);
	border-top: 1px solid var(--color-line);
	font-size: 14px;
	color: var(--color-muted);
}

.related-links { padding-top: 40px; }
.related-links__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-16);
	padding-top: 32px;
	border-top: 1px solid var(--color-line);
	padding-bottom: 40px;
}
.related-links__label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--color-muted);
}
.related-links__link {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--color-accent);
	text-decoration: none;
}
.related-links__link:hover, .related-links__link:focus-visible { color: var(--color-ink); }
.related-links__link:not(:last-child)::after { content: '\00b7'; margin-left: var(--space-16); color: var(--color-line); }

@media (max-width: 1023px) {
	.segment-body__grid { grid-template-columns: 1fr; gap: var(--space-32); }
	.aside-note { order: 2; }
}

@media (max-width: 767px) {
	.segment-intro { padding-top: 40px; padding-bottom: 48px; }
	.segment-body { padding-top: 48px; }
	.related-links { padding-top: 32px; }
	.checklist { column-count: 1; }
}