/* industries.css — the sector list.

   Not in the Figma frame; from the client content plan. It used to be centred pale
   outlined pills, which left the seventh item ("Small and Mid-Market Businesses")
   orphaned on its own line and read as a tag cloud.

   Now a left-aligned inline list on a tinted ground, sized as content rather than as
   navigation. Seven items is a list, not a set of controls, so nothing here is
   pill-shaped or looks clickable. */

.gnt-industries__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 64rem;
}

.gnt-industries__list li {
	margin: 0;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	font-weight: var(--font-weight-medium);
	color: var(--ink-700);
	background-color: var(--color-surface-page);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-xs);
}

/* On the raised ground the chips need to be paper to separate; on paper they need
   the tint instead, or they disappear. */
.gnt-section:not(.gnt-section--raised):not(.gnt-section--dark) .gnt-industries__list li {
	background-color: var(--color-surface-raised);
}

.gnt-section--dark .gnt-industries__list li {
	color: var(--color-text-inverse);
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

@media (max-width: 767px) {
	.gnt-industries__list { gap: var(--space-2); }

	.gnt-industries__list li {
		font-size: var(--text-body-sm);
		padding: var(--space-2) var(--space-3);
	}
}