@layer components {

	.industries {
		--industries-rail-width: 380px;
		--industries-panel-fade: 380ms;
		--industries-panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
		position: relative;
		isolation: isolate;
		background: var(--body-bg);
		color: var(--text-main);
		overflow: hidden;
	}

	.industries::before {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(85% 75% at 95% 100%,
			color-mix(in oklch, var(--secondary-ultra-light) 60%, transparent) 0%,
			color-mix(in oklch, var(--primary-ultra-light) 45%, transparent) 40%,
			transparent 100%);
		pointer-events: none;
		z-index: -1;
	}

	.industries__inner {
		display: flex;
		flex-direction: column;
		gap: var(--container-gap);
		min-inline-size: 0;
	}

	.industries__eyebrow-row {
		display: flex;
		align-items: center;
	}

	.industries__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--industries-rail-width);
		gap: var(--container-gap);
		align-items: start;
	}

	.industries__stage {
		position: relative;
		min-inline-size: 0;
		min-block-size: 0;
	}

	.industries__panel {
		display: flex;
		flex-direction: column;
		gap: var(--content-gap-wide);
		min-inline-size: 0;
		transition: opacity var(--industries-panel-fade) var(--industries-panel-ease),
					transform var(--industries-panel-fade) var(--industries-panel-ease);
	}

	.industries__panel[hidden] {
		display: none;
	}

	.industries__panel.is-leaving {
		opacity: 0;
		transform: translateY(-12px);
	}

	.industries__panel.is-entering {
		opacity: 0;
		transform: translateY(12px);
	}

	.industries__panel.is-active {
		opacity: 1;
		transform: translateY(0);
	}

	.industries__meta {
		margin: 0;
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
	}

	.industries__meta-dot {
		display: inline-block;
		inline-size: 6px;
		block-size: 6px;
		border-radius: var(--radius-full);
		background: var(--secondary);
	}

	.industries__meta-label {
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--primary-active);
	}

	.industries__heading {
		margin: 0;
		font-size: var(--heading-l);
		font-weight: var(--weight-bold);
		line-height: 1.05;
		letter-spacing: var(--tracking-tight);
		color: var(--text-main);
		max-inline-size: 22ch;
		text-wrap: balance;
	}

	.industries__lead {
		margin: 0;
		max-inline-size: 60ch;
		font-size: var(--text-m);
		line-height: 1.55;
		color: var(--text-body);
	}

	.industries__row {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
	}

	.industries__row-label {
		margin: 0;
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--text-subtle);
	}

	.industries__row-body {
		margin: 0;
		font-size: var(--text-s);
		font-weight: var(--weight-medium);
		line-height: 1.5;
		color: var(--text-main);
	}

	.industries__focus-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--content-gap);
	}

	.industries__focus-item {
		min-inline-size: 0;
	}

	.industries__focus-link {
		display: inline-flex;
		align-items: center;
		gap: var(--space-xs);
		color: var(--text-main);
		font-size: calc(var(--text-s) * 1.1);
		font-weight: var(--weight-medium);
		line-height: 1.4;
		text-decoration: none;
		min-inline-size: 0;
		transition: color 160ms ease-out, transform 160ms ease-out;
	}

	.industries__focus-link > span {
		display: inline-block;
		min-inline-size: 0;
		padding-block-end: var(--space-2xs);
		background-image: linear-gradient(
			to right,
			var(--primary)   0%,
			var(--secondary) 100%
		);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 100% var(--line-thick);
		transition: background-image 160ms ease-out;
	}

	.industries__focus-arrow {
		flex-shrink: 0;
		inline-size: 0.9em;
		block-size: 0.9em;
		color: var(--text-muted);
		transition: color 160ms ease-out, transform 160ms ease-out;
	}

	a.industries__focus-link:hover,
	a.industries__focus-link:focus-visible {
		color: var(--text-main);
	}

	a.industries__focus-link:hover > span,
	a.industries__focus-link:focus-visible > span {
		background-image: linear-gradient(to right, var(--secondary), var(--primary));
	}

	a.industries__focus-link:hover .industries__focus-arrow,
	a.industries__focus-link:focus-visible .industries__focus-arrow {
		transform: translateX(3px);
		color: var(--primary);
	}

	.industries__row-body--regulatory {
		color: var(--primary);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-wide);
	}

	.industries__ctas {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--content-gap-wide);
	}

	.industries__rail {
		display: flex;
		flex-direction: column;
		gap: var(--content-gap);
		min-inline-size: 0;
	}

	.industries__rail-head {
		font-size: var(--text-2xs);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-overline);
		text-transform: uppercase;
		color: var(--text-subtle);
		padding-inline-start: var(--space-m);
	}

	.industries__tablist-wrap {
		display: contents;
	}

	.industries__tablist {
		display: flex;
		flex-direction: column;
	}

	.industries__tab {
		display: flex;
		align-items: center;
		gap: var(--space-m);
		padding-block: var(--space-s);
		padding-inline: var(--space-m) 0;
		background: transparent;
		border: 0;
		border-inline-start: 3px solid transparent;
		color: var(--text-subtle);
		font: inherit;
		text-align: start;
		cursor: pointer;
		transition: background-color 200ms ease-out,
					color 200ms ease-out,
					border-color 200ms ease-out;
	}

	.industries__tab:hover {
		color: var(--text-main);
		background: color-mix(in oklch, var(--primary) 5%, transparent);
	}

	.industries__tab:focus-visible {
		outline: var(--btn-focus-ring);
		outline-offset: var(--btn-focus-offset);
	}

	.industries__tab.is-active {
		background: color-mix(in oklch, var(--primary) 8%, transparent);
		border-inline-start-color: var(--primary);
		color: var(--text-main);
	}

	.industries__tab.is-active .industries__tab-label {
		font-weight: var(--weight-semibold);
	}

	.industries__tab-avatar {
		flex-shrink: 0;
		inline-size: var(--avatar-xl);
		block-size: var(--avatar-xl);
		border-radius: var(--radius-s);
		overflow: hidden;
		background: color-mix(in oklch, currentColor 10%, transparent);
		border: 1px solid color-mix(in oklch, currentColor 12%, transparent);
		display: grid;
		place-items: center;
	}

	.industries__tab-image {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		opacity: 0.7;
		transition: opacity 200ms ease-out;
	}

	.industries__tab.is-active .industries__tab-image,
	.industries__tab:hover .industries__tab-image {
		opacity: 1;
	}

	.industries__tab-label {
		font-size: var(--text-m);
		line-height: 1.3;
		text-wrap: balance;
	}

	.industries__rail-nav {
		display: flex;
		align-items: center;
		gap: var(--space-m);
		padding-block-start: var(--space-m);
		border-block-start: 1px solid var(--border-subtle);
	}

	/* Nav arrows — primary brand button with the same gradient + lift as the
	   .btn--primary system. 44px tap target. White icon on the teal gradient
	   makes the navigator feel intentional and inviting, not passive chrome. */
	.industries__nav-btn {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		border-radius: var(--radius-s);
		background: var(--btn-primary-gradient);
		border: 0;
		color: var(--text-on-primary);
		cursor: pointer;
		box-shadow: var(--btn-inset-highlight), var(--btn-shadow-primary);
		transition: background var(--btn-transition),
					box-shadow var(--btn-transition),
					transform var(--duration-instant) var(--ease-default);
	}

	.industries__nav-btn:hover {
		background: var(--btn-primary-gradient-hover);
		box-shadow: var(--btn-inset-highlight-hover), var(--btn-shadow-primary-hover);
		transform: translateY(-1px);
	}

	.industries__nav-btn:active {
		background-color: var(--btn-primary-bg-active);
		background-image: none;
		box-shadow: none;
		transform: translateY(1px);
		transition-duration: 80ms;
	}

	.industries__nav-btn:focus-visible {
		outline: var(--btn-focus-ring);
		outline-offset: var(--btn-focus-offset);
	}

	.industries__nav-btn .icon {
		inline-size: 18px;
		block-size: 18px;
	}

	@media (max-width: 60em) {

		.industries__grid {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--container-gap);
		}

		.industries__rail {
			order: -1;
		}

		.industries__rail-head,
		.industries__rail-nav {
			display: none;
		}

		/* On mobile the wrap becomes the positioning context for the
		   scroll-fade overlays. We stay inside the section's gutter — the
		   rail aligns with the rest of the content, no edge-bleed. */
		.industries__tablist-wrap {
			display: block;
			position: relative;
		}

		.industries__tablist-wrap::before,
		.industries__tablist-wrap::after {
			content: "";
			position: absolute;
			inset-block: 0;
			inline-size: var(--space-l);
			pointer-events: none;
			opacity: 0;
			transition: opacity 200ms ease-out;
			z-index: 1;
		}

		.industries__tablist-wrap::before {
			inset-inline-start: 0;
			background: linear-gradient(to inline-end, var(--body-bg), transparent);
		}

		.industries__tablist-wrap::after {
			inset-inline-end: 0;
			background: linear-gradient(to inline-start, var(--body-bg), transparent);
		}

		.industries__tablist-wrap.is-overflow-start::before,
		.industries__tablist-wrap.is-overflow-end::after {
			opacity: 1;
		}

		.industries__tablist {
			flex-direction: row;
			gap: var(--cluster-gap);
			overflow-x: auto;
			scroll-snap-type: x proximity;
			padding-block: var(--space-2xs);
			/* Tiny inline padding so the first/last tab's outline ring on
			   focus has room to render without clipping against the wrap edge. */
			padding-inline: var(--space-2xs);
			scrollbar-width: none;
		}

		.industries__tablist::-webkit-scrollbar {
			display: none;
		}

		.industries__tab {
			flex-shrink: 0;
			scroll-snap-align: start;
			padding-block: var(--space-2xs);
			padding-inline: var(--space-2xs) var(--space-m);
			border-radius: var(--radius-full);
			background: var(--surface-tinted);
			border: 1px solid color-mix(in oklch, var(--text-main) 14%, transparent);
			border-inline-start-width: 1px;
		}

		.industries__tab.is-active {
			border-color: var(--primary);
			background: color-mix(in oklch, var(--primary) 8%, transparent);
		}

		.industries__tab-avatar {
			inline-size: var(--avatar-s);
			block-size: var(--avatar-s);
			border-radius: var(--radius-full);
		}

		.industries__tab-label {
			font-size: var(--text-s);
		}

		.industries__heading {
			font-size: var(--heading-m);
			max-inline-size: none;
		}

		.industries__tab:not(.is-active) {
			opacity: 0.5;
		}

		.industries__tab:not(.is-active) .industries__tab-avatar {
			display: none;
		}

		.industries__tab:not(.is-active):hover {
			opacity: 1;
		}

		.industries__focus-list {
			grid-template-columns: 1fr;
			gap: var(--stack-gap);
		}

		.industries__ctas {
			flex-direction: column;
			align-items: stretch;
			gap: var(--stack-gap);
		}

		.industries__ctas .btn {
			inline-size: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.industries__panel,
		.industries__panel.is-leaving,
		.industries__panel.is-entering,
		.industries__panel.is-active {
			transition: none;
			transform: none;
		}

		.industries__nav-btn:hover {
			transform: none;
		}
	}
}