/* Service spokes — only what the Performance sections do not already cover. Mobile first. */

/* surface: dark — draft banner only (editors) */
.dl-spoke__draft {
	margin: 0;
	padding: calc(var(--dl-header-h) + .8rem) .8rem .8rem;
	background: var(--performance-ink);
	color: #ffd27a; /* contrast-ok: editor-only draft strip on navy */
	font-size: .82rem;
	text-align: center;
}
.dl-spoke__draft + .dl-performance__hero { padding-top: 2.5rem; }

/* Keep the metrics card beside the headline — not centered against a tall copy column. */
.dl-spoke .dl-performance__hero-grid {
	align-items: start;
}

/* surface: light */
.dl-spoke__filters {
	margin: 0 0 1.1rem;
	padding: .85rem 1rem;
	border: 1px solid rgba(215, 157, 53, .35);
	border-radius: .7rem;
	background: rgba(255, 255, 255, .7);
}
.dl-spoke__filters-line {
	margin: 0;
	color: var(--navy, #071b33);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.45;
}
.dl-spoke__filters-line--solo {
	margin: 0 0 1.1rem;
	padding: .75rem 0 0;
	border-top: 1px solid rgba(8, 27, 49, .1);
	color: var(--charcoal, #1f2937);
	font-weight: 500;
}
.dl-spoke__hero--compact .dl-performance__lead {
	margin-bottom: 1rem;
}
.dl-spoke__filters-note {
	margin: .35rem 0 0;
	color: var(--charcoal, #1f2937);
	font-size: .82rem;
}

.dl-spoke__hero-actions {
	display: grid;
	gap: .65rem;
	margin-bottom: 1.1rem;
}
.dl-spoke__btn-ghost {
	background: transparent;
	border-color: rgba(8, 27, 49, .22);
	color: var(--navy, #071b33);
	box-shadow: none;
}
.dl-spoke__btn-ghost:hover {
	background: rgba(8, 27, 49, .04);
	color: var(--navy, #071b33);
}

.dl-spoke__trust {
	margin-top: 1.5rem;
	padding: 1.1rem 1.15rem;
	border: 1px solid rgba(215, 157, 53, .35);
	border-radius: .7rem;
	background: rgba(255, 255, 255, .55);
}
@media (min-width: 760px) {
	.dl-spoke .dl-performance__dashboard {
		position: sticky;
		top: calc(var(--dl-header-h) + 1.25rem);
	}
	.dl-spoke__trust {
		max-width: 43rem;
	}
}
.dl-spoke__trust-who { margin-bottom: .35rem; font-size: .95rem; }
.dl-spoke__trust-who span { color: var(--charcoal, #1f2937); font-size: .82rem; }
.dl-spoke__trust-text { margin-bottom: .7rem; color: var(--charcoal, #1f2937); font-size: .92rem; }
.dl-spoke__trust ul { display: grid; gap: .35rem; }
.dl-spoke__trust li { color: var(--charcoal, #1f2937); font-size: .82rem; }
.dl-spoke__trust li::before {
	margin-left: .4rem;
	color: var(--performance-gold);
	content: "✓"; /* contrast-ok: decorative check glyph, not body copy */
}

.dl-spoke__section--plain { background: #fff; }
.dl-spoke__problems { display: grid; gap: 1rem; }
.dl-spoke__problems li {
	padding: 1.1rem 1.2rem;
	border: 1px solid rgba(8, 27, 49, .12);
	border-radius: .7rem;
	background: var(--performance-cream);
}
.dl-spoke__problems h3 { margin-bottom: .4rem; font-size: 1.05rem; }
.dl-spoke__problems p { margin: 0; color: var(--charcoal, #1f2937); font-size: .92rem; }

.dl-spoke__cases-pair {
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}
/* Keep the navy Performance card skin — metric values are white text. */
.dl-spoke__cases-pair > article {
	min-width: 0;
}

.dl-spoke__fit { display: grid; gap: 1rem; }
.dl-spoke__fit-col {
	padding: 1.25rem;
	border: 1px solid rgba(8, 27, 49, .12);
	border-radius: .7rem;
	background: var(--performance-cream);
}
.dl-spoke__fit-col h3 { margin-bottom: .8rem; font-size: 1.05rem; }
.dl-spoke__fit-col ul { display: grid; gap: .55rem; }
.dl-spoke__fit-col li { color: var(--charcoal, #1f2937); font-size: .92rem; }
.dl-spoke__fit-col--yes li::before {
	margin-left: .45rem;
	color: #2f8f5b; /* contrast-ok: decorative status glyph */
	content: "✓";
}
.dl-spoke__fit-col--no li::before {
	margin-left: .45rem;
	color: #b4553f; /* contrast-ok: decorative status glyph */
	content: "✕";
}

.dl-spoke__quotes {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dl-spoke__quotes blockquote {
	margin: 0;
	padding: 1.25rem 1.2rem;
	border: 1px solid rgba(8, 27, 49, .12);
	border-radius: .7rem;
	background: var(--performance-cream);
}
.dl-spoke__quotes p {
	margin: 0 0 1rem;
	color: var(--charcoal, #1f2937);
	font-size: .95rem;
	line-height: 1.55;
}
.dl-spoke__quotes footer {
	display: grid;
	gap: .15rem;
}
.dl-spoke__quotes strong { color: var(--navy, #071b33); font-size: .9rem; }
.dl-spoke__quotes span { color: var(--charcoal, #1f2937); font-size: .8rem; }

.dl-spoke__faq { max-width: 48rem; margin: 0 auto; }
.dl-spoke .dl-faq { border-bottom-color: rgba(8, 27, 49, .14); }
.dl-spoke .dl-faq summary { color: var(--performance-ink); cursor: pointer; }
.dl-spoke .dl-faq p { color: var(--charcoal, #1f2937); }

.dl-spoke__hub {
	display: grid;
	gap: .8rem;
	margin-top: 2rem;
}
.dl-spoke__hub a {
	display: block;
	padding: 1rem 1.15rem;
	border: 1px solid rgba(8, 27, 49, .14);
	border-radius: .7rem;
	color: inherit;
	text-decoration: none;
}
.dl-spoke__hub strong { display: block; margin-bottom: .25rem; }
.dl-spoke__hub span { color: var(--charcoal, #1f2937); font-size: .88rem; }

/* surface: dark — hero metrics panel + closing contact / CTA */
.dl-spoke__panel-note {
	margin: .8rem 0 0;
	color: var(--text-3, #8fa1b5);
	font-size: .7rem;
}
.dl-spoke .dl-performance__metrics strong {
	overflow-wrap: anywhere;
	font-size: clamp(.82rem, 4.2vw, 1.25rem);
}
.dl-spoke .dl-cta__direct a { color: var(--amber, #ffb000); }

.dl-spoke .dl-performance__contact .dl-form {
	display: grid;
	gap: .75rem;
}
.dl-spoke .dl-performance__contact .dl-field {
	display: grid;
	gap: .35rem;
}
.dl-spoke .dl-performance__contact .dl-field span {
	color: var(--text-2, #c7d2e0);
	font-size: .82rem;
}
.dl-spoke .dl-performance__contact .dl-form textarea {
	min-height: 5.5rem;
	padding: .75rem .85rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: .35rem;
	background: rgba(255, 255, 255, .035);
	color: var(--cloud, #f7fafc);
	resize: vertical;
}
.dl-spoke .dl-performance__contact .dl-form input,
.dl-spoke .dl-performance__contact .dl-form select,
.dl-spoke .dl-performance__contact .dl-form textarea {
	width: 100%;
	color: var(--cloud, #f7fafc);
}
.dl-spoke .dl-performance__contact .dl-form select option,
.dl-spoke .dl-performance__contact .dl-form select optgroup {
	color: var(--charcoal, #1f2937); /* contrast-ok: native select popup paints a light list */
	background-color: #fff;
}
.dl-spoke .dl-performance__contact .dl-check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	color: var(--text-2, #c7d2e0);
	font-size: .82rem;
}
.dl-spoke .dl-performance__contact .dl-check input {
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .15rem;
	flex: 0 0 auto;
}
.dl-spoke .dl-performance__contact .dl-form button {
	min-height: 48px;
	width: 100%;
}
.dl-spoke .dl-form-status {
	margin: .5rem 0 0;
	color: var(--amber, #ffb000);
	font-weight: 600;
}
.dl-spoke .dl-form-status.is-error {
	color: #ff8b9a; /* contrast-ok: error text on navy contact band */
}
.dl-spoke .dl-form-status.is-sending {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	min-height: 28px;
}

@media (min-width: 600px) {
	.dl-spoke__hero-actions {
		grid-template-columns: repeat(2, minmax(0, max-content));
		align-items: center;
	}
	.dl-spoke__cases-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke__problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke__fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke__hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke .dl-performance__contact .dl-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dl-spoke .dl-performance__contact .dl-field--wide,
	.dl-spoke .dl-performance__contact .dl-check,
	.dl-spoke .dl-performance__contact .dl-form button,
	.dl-spoke .dl-performance__contact .dl-form-status,
	.dl-spoke .dl-performance__contact .dl-performance__form-note {
		grid-column: 1 / -1;
	}
}