.main-nav .nav-active {
	background: var(--black);
	color: var(--paper-2);
	border-color: var(--black);
}


/* =========================================================
   SECTION 01 / OVERVIEW
   ========================================================= */

.software-overview {
	background:
		radial-gradient(circle at 82% 24%, rgba(0,199,217,.07), transparent 28%),
		var(--paper);
}

.software-title-heading {
	grid-template-columns: 70px 1fr;
	margin-bottom: 34px;
}

.software-title-heading h1 {
	font-size: clamp(66px, 7vw, 112px);
	line-height: .82;
}

.software-title-heading .lead {
	margin-top: 30px;
	max-width: 820px;
}

.software-overview-copy {
	max-width: 1100px;
}

.software-body {
	max-width: 1000px;
	margin-bottom: 18px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.8;
}

.software-flow-figure {
	max-width: 1180px;
	margin: 54px auto 0;
}

.software-flow-media {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #050708;
}

.software-flow-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.software-flow-figure figcaption {
	margin-top: 14px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.6;
}


/* =========================================================
   SECTION 02 / PROCESS
   ========================================================= */

.software-process {
	background: var(--paper-2);
}

.process-note {
	max-width: 1000px;
	margin: 0 0 42px 99px;
	padding: 20px 22px;
	border: 1px solid var(--ink);
	background: rgba(255,255,255,.28);
	box-shadow: inset 4px 0 0 var(--cyan);
}

.process-note p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.75;
}

.process-list {
	border: 1px solid var(--ink);
}

.process-item {
	border-bottom: 1px solid var(--ink);
	background: rgba(255,255,255,.16);
}

.process-item:last-child {
	border-bottom: 0;
}

.process-item summary {
	min-height: 82px;
	display: grid;
	grid-template-columns: 70px minmax(0,1fr) 46px;
	align-items: center;
	gap: 20px;
	padding: 0 22px;
	cursor: pointer;
	list-style: none;
}

.process-item summary::-webkit-details-marker {
	display: none;
}

.process-item summary:hover,
.process-item summary:focus-visible {
	background: rgba(0,199,217,.06);
	outline: none;
}

.process-number {
	font-family: "VT323", monospace;
	font-size: 32px;
	color: var(--muted);
}

.process-summary-copy {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.process-summary-copy small {
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .12em;
}

.process-summary-copy strong {
	font-size: 17px;
	font-weight: 600;
}

.process-toggle {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	justify-self: end;
	border: 1px solid var(--ink);
	font-family: "VT323", monospace;
	font-size: 26px;
	line-height: 1;
}

.process-item[open] .process-toggle {
	background: var(--black);
	color: var(--paper-2);
}

.process-item[open] .process-toggle {
	font-size: 0;
}

.process-item[open] .process-toggle::after {
	content: "–";
	font-size: 26px;
}

.process-detail {
	padding: 4px 92px 28px 112px;
	border-top: 1px solid rgba(21,21,21,.16);
}

.process-detail p {
	max-width: 960px;
	margin: 18px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.75;
}

.process-detail code,
.software-lesson-grid code {
	padding: 2px 5px;
	background: rgba(21,21,21,.08);
	color: var(--ink);
	font-family: inherit;
	font-size: .95em;
}


/* =========================================================
   SECTION 03 / LESSONS
   ========================================================= */

.software-lessons {
	min-height: calc(100svh - var(--footer-h));
	padding-bottom: 54px;
	background:
		radial-gradient(circle at 18% 82%, rgba(238,46,145,.055), transparent 25%),
		var(--paper-2);
}

.software-lesson-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	border: 1px solid var(--ink);
}

.software-lesson-grid article {
	padding: 28px;
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
}

.software-lesson-grid article:nth-child(2n) {
	border-right: 0;
}

.software-lesson-grid article:nth-last-child(-n+2) {
	border-bottom: 0;
}

.software-lesson-grid article > span {
	display: block;
	margin-bottom: 34px;
	color: var(--muted);
	font-size: 11px;
}

.software-lesson-grid h3 {
	margin-bottom: 20px;
	font-size: 26px;
}

.software-lesson-grid p {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.75;
}

.software-lesson-grid p:last-child {
	margin-bottom: 0;
}

.software-next {
	margin-top: 48px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

	.software-overview-copy {
		max-width: none;
	}

	.software-flow-figure {
		max-width: 760px;
	}

	.process-note {
		margin-left: 0;
	}

	.process-detail {
		padding-left: 92px;
		padding-right: 36px;
	}

	.software-lesson-grid {
		grid-template-columns: 1fr 1fr;
	}
}


@media (max-width: 620px) {

	.software-title-heading {
		grid-template-columns: 44px minmax(0,1fr);
		gap: 12px;
	}

	.software-title-heading h1 {
		font-size: clamp(52px, 16vw, 72px);
	}

	.software-title-heading .lead {
		margin-top: 22px;
	}

	.software-body {
		font-size: 14px;
	}

	.software-flow-figure {
		margin-top: 36px;
	}

	.process-note {
		padding: 16px;
	}

	.process-item summary {
		min-height: 76px;
		grid-template-columns: 44px minmax(0,1fr) 38px;
		gap: 12px;
		padding: 0 14px;
	}

	.process-number {
		font-size: 27px;
	}

	.process-summary-copy strong {
		font-size: 14px;
	}

	.process-detail {
		padding: 4px 18px 24px 70px;
	}

	.process-detail p {
		font-size: 12px;
	}

	.software-lesson-grid {
		grid-template-columns: 1fr;
	}

	.software-lesson-grid article,
	.software-lesson-grid article:nth-child(2n),
	.software-lesson-grid article:nth-last-child(-n+2) {
		border-right: 0;
		border-bottom: 1px solid var(--ink);
	}

	.software-lesson-grid article:last-child {
		border-bottom: 0;
	}

	.software-lesson-grid article > span {
		margin-bottom: 28px;
	}
}

.setup-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--ink);
}

.setup-card {
	padding: 28px;
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
}

.setup-card:nth-child(2n) {
	border-right: 0;
}

.setup-card:nth-last-child(-n+2) {
	border-bottom: 0;
}

.setup-index {
	display: block;
	margin-bottom: 30px;
	color: var(--muted);
	font-size: 11px;
}

.setup-card h3 {
	margin-bottom: 22px;
	font-size: 26px;
}

.setup-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.setup-card li {
	position: relative;
	margin-bottom: 14px;
	padding-left: 22px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.65;
}

.setup-card li:last-child {
	margin-bottom: 0;
}

.setup-card li::before {
	content: ">";
	position: absolute;
	left: 0;
	color: var(--cyan);
	font-weight: 600;
}

@media (max-width: 620px) {

	.setup-grid {
		grid-template-columns: 1fr;
	}

	.setup-card,
	.setup-card:nth-child(2n),
	.setup-card:nth-last-child(-n+2) {
		border-right: 0;
		border-bottom: 1px solid var(--ink);
	}

	.setup-card:last-child {
		border-bottom: 0;
	}
}