/* ==========================================================================
   EQUIPPEDLY — DESIGN YOUR RACKET (page #26)
   Scoped landing styles. Does not embed the configurator runtime.
   ========================================================================== */

.eq-page-design-your-racket .eq-dyr-hero__title,
.eq-dyr-hero__title {
	white-space: pre-line;
	max-width: 18ch;
}

.eq-dyr-lead,
.eq-page-design-your-racket .eq-dyr-lead {
	max-width: 38rem;
	margin-top: var(--eq-space-lg);
}

.eq-dyr-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eq-space-md);
	margin-top: var(--eq-space-xl);
}

.eq-dyr-views {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--eq-space-lg);
	margin-top: var(--eq-space-2xl);
}

.eq-dyr-view {
	padding: var(--eq-space-xl);
	border: 1px solid var(--eq-color-border-dark);
	background: color-mix(in srgb, var(--eq-color-ink-black) 55%, transparent);
}

.eq-section--light .eq-dyr-view,
.eq-section--white .eq-dyr-view {
	border-color: var(--eq-color-border-light);
	background: var(--eq-color-pure-white);
}

.eq-dyr-view__label {
	display: block;
	font-family: var(--eq-font-body);
	font-size: var(--eq-type-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eq-color-volt);
	margin-bottom: var(--eq-space-sm);
}

.eq-dyr-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--eq-space-xl);
	margin-top: var(--eq-space-2xl);
}

.eq-dyr-step__num {
	display: block;
	font-family: var(--eq-font-body);
	font-size: var(--eq-type-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--eq-color-volt);
	margin-bottom: var(--eq-space-sm);
}

.eq-dyr-spec-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--eq-space-lg);
	margin-top: var(--eq-space-2xl);
}

.eq-dyr-spec {
	padding: var(--eq-space-lg);
	border: 1px solid var(--eq-color-border-dark);
}

.eq-section--light .eq-dyr-spec,
.eq-section--white .eq-dyr-spec {
	border-color: var(--eq-color-border-light);
	background: var(--eq-color-pure-white);
}

.eq-dyr-spec__list {
	margin: var(--eq-space-sm) 0 0;
	padding: 0;
	list-style: none;
	white-space: pre-line;
}

.eq-dyr-spec__list li + li {
	margin-top: var(--eq-space-xs);
}

.eq-dyr-process {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--eq-space-lg);
	margin-top: var(--eq-space-2xl);
}

.eq-dyr-process__item {
	position: relative;
	padding-inline-end: var(--eq-space-lg);
}

.eq-dyr-process__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0.55em;
	inset-inline-end: 0;
	width: var(--eq-space-lg);
	height: 1px;
	background: color-mix(in srgb, var(--eq-color-volt) 55%, transparent);
}

.eq-dyr-mfg,
.eq-dyr-intro {
	max-width: 42rem;
}

.eq-dyr-final .eq-dyr-cta-row {
	margin-top: var(--eq-space-xl);
}

.eq-page-design-your-racket .eq-faq-stack {
	margin-top: var(--eq-space-2xl);
}

@media (max-width: 1199px) {
	.eq-dyr-steps,
	.eq-dyr-process,
	.eq-dyr-spec-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.eq-dyr-hero__title,
	.eq-page-design-your-racket .eq-dyr-hero__title {
		max-width: none;
	}

	.eq-dyr-views,
	.eq-dyr-steps,
	.eq-dyr-spec-grid,
	.eq-dyr-process {
		grid-template-columns: 1fr;
	}

	.eq-dyr-process__item {
		padding-inline-end: 0;
		padding-bottom: var(--eq-space-lg);
	}

	.eq-dyr-process__item:not(:last-child)::after {
		top: auto;
		bottom: 0;
		inset-inline: 0 auto;
		width: 1px;
		height: var(--eq-space-lg);
	}
}