/*
 * R03 service-network-security presentation contract.
 * F05 is the connectivity/topology variant; F06 is the digital
 * identity/policy-boundary variant. F12 physical access control is outside
 * both roots and is intentionally not styled by this file.
 */

[data-renderer="service-network-security"][data-family="F05"] {
	--r03-accent: #52d1cc;
	--r03-accent-strong: #b8fffa;
	--r03-accent-soft: rgba(82, 209, 204, .15);
	--r03-surface: #081f2c;
	--r03-surface-deep: #06151f;
	--r03-line: rgba(82, 209, 204, .34);
	isolation: isolate;
}

[data-renderer="service-network-security"][data-family="F06"] {
	--r03-accent: #efb05a;
	--r03-accent-strong: #ffd59b;
	--r03-accent-soft: rgba(239, 176, 90, .14);
	--r03-surface: #2a2119;
	--r03-surface-deep: #171820;
	--r03-line: rgba(239, 176, 90, .34);
	isolation: isolate;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-page {
	--network-content-accent: var(--r03-accent);
	--network-content-accent-soft: var(--r03-accent-soft);
	--network-content-panel: var(--r03-surface);
	border-top: 1px solid var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-page {
	--network-content-accent: var(--r03-accent);
	--network-content-accent-soft: var(--r03-accent-soft);
	--network-content-panel: var(--r03-surface);
	border-top: 1px solid var(--r03-line);
}

/* F05: a wide-area connectivity rhythm with a cool topology signal. */
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero {
	background:
		radial-gradient(circle at 84% 14%, var(--r03-accent-soft), transparent 30%),
		linear-gradient(135deg, var(--r03-surface-deep) 0%, #0b2635 58%, #071824 100%);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-grid {
	grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-media {
	border-radius: 0 30px 0 30px;
	box-shadow: 0 28px 72px rgba(0, 18, 30, .34);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-actions .button-primary {
	background: var(--r03-accent);
	color: #04181e;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-jump {
	border-bottom-color: var(--r03-line);
	background: rgba(6, 21, 31, .92);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-jump a:first-child,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-jump a:hover,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-jump a:focus-visible {
	color: var(--r03-accent-strong);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-intro,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture {
	background: linear-gradient(90deg, rgba(82, 209, 204, .045), transparent 42%, rgba(82, 209, 204, .025));
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem .service-network-content-card,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture .service-network-content-card {
	border-top: 2px solid var(--r03-accent);
	background: linear-gradient(145deg, rgba(82, 209, 204, .11), rgba(8, 31, 44, .88));
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--delivery .service-network-content-card {
	border-top-color: var(--r03-accent);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-step-list {
	border-top-color: var(--r03-line);
}

/* F06: a denser digital-control rhythm with a warm policy/audit signal. */
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero {
	background:
		radial-gradient(circle at 82% 16%, var(--r03-accent-soft), transparent 28%),
		linear-gradient(135deg, var(--r03-surface-deep) 0%, #1c202b 58%, #15161f 100%);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-grid {
	grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-media {
	border-radius: 22px;
	border-top: 3px solid var(--r03-accent);
	box-shadow: 0 24px 66px rgba(18, 13, 8, .38);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-actions .button-primary {
	background: var(--r03-accent);
	color: #21170d;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-jump {
	border-bottom-color: var(--r03-line);
	background: rgba(23, 24, 32, .94);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-jump a:first-child,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-jump a:hover,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-jump a:focus-visible {
	color: var(--r03-accent-strong);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-intro,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture {
	background: linear-gradient(90deg, rgba(239, 176, 90, .055), transparent 44%, rgba(239, 176, 90, .025));
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem .service-network-content-card,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture .service-network-content-card {
	border-top: 2px solid var(--r03-accent);
	background: linear-gradient(145deg, rgba(239, 176, 90, .12), rgba(42, 33, 25, .9));
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--delivery .service-network-content-card {
	border-top-color: var(--r03-accent);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-step-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 5vw, 76px);
	border-top-color: var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-related-grid a,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-related-grid a {
	border-top-color: var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-related-grid a:hover,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-related-grid a:focus-visible,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-related-grid a:hover,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-related-grid a:focus-visible {
	border-top-color: var(--r03-accent);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-cta {
	background: linear-gradient(135deg, #0a2938, #0c1c28);
	border-top: 1px solid var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-cta {
	background: linear-gradient(135deg, #302519, #1b1b24);
	border-top: 1px solid var(--r03-line);
}

@media (max-width: 1024px) {
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture .service-network-content-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-grid {
		grid-template-columns: 1fr;
	}

	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-step-list {
		display: block;
	}
}

@media (max-width: 560px) {
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem .service-network-content-card-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture .service-network-content-card-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * R03 visual consolidation.
 * The Factory root carries routing metadata only; the family content owns the
 * visible narrative. F05 reads as a connected path, while F06 reads as a
 * bounded policy and audit surface. Keep every rule inside the R03 roots.
 */

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-page {
	border-top: 0;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-page {
	border-top: 0;
}

/* F05: topology / path — open composition, directional image frame, route list. */
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero {
	padding: clamp(76px, 8.5vw, 126px) 0 clamp(54px, 6vw, 88px);
	background:
		radial-gradient(circle at 88% 16%, rgba(82, 209, 204, .18), transparent 24%),
		linear-gradient(135deg, #06151f 0%, #0a2938 58%, #071824 100%);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero::after {
	position: absolute;
	inset: auto -6% 0 48%;
	height: 82%;
	background:
		linear-gradient(135deg, transparent 0 46%, rgba(184, 255, 250, .2) 46.2% 46.45%, transparent 46.65%),
		repeating-linear-gradient(135deg, transparent 0 52px, rgba(82, 209, 204, .1) 52px 53px, transparent 53px 112px);
	clip-path: polygon(0 0, 100% 0, 100% 76%, 57% 100%, 0 100%);
	content: '';
	opacity: .62;
	pointer-events: none;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-grid {
	grid-template-columns: minmax(0, .94fr) minmax(400px, 1.06fr);
	gap: clamp(34px, 5.4vw, 88px);
	align-items: end;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-copy {
	max-width: 720px;
	padding-inline-end: clamp(0px, 2.5vw, 42px);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero h1 {
	max-width: 680px;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-summary {
	max-width: 640px;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-media {
	margin-bottom: 10px;
	border-radius: 0 34px 0 34px;
	box-shadow: 0 30px 80px rgba(0, 18, 30, .42);
	transform: translateY(12px);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-media::after {
	position: absolute;
	inset: 14px;
	border-top: 1px solid rgba(184, 255, 250, .32);
	border-inline-end: 1px solid rgba(184, 255, 250, .22);
	content: '';
	pointer-events: none;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-signals {
	max-width: 700px;
	margin-top: 30px;
	border-top: 1px solid var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-signals li {
	min-height: 76px;
	padding: 14px 16px 12px 0;
	border-top: 0;
	border-bottom: 1px solid rgba(82, 209, 204, .18);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-signals li + li {
	padding-inline-start: 16px;
	border-inline-start: 1px solid rgba(82, 209, 204, .2);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-intro-grid {
	grid-template-columns: minmax(220px, .56fr) minmax(0, 1.44fr);
	gap: clamp(34px, 6.5vw, 104px);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture {
	padding-inline: clamp(0px, 5vw, 80px);
	border-inline-start: 1px solid rgba(82, 209, 204, .18);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem .service-network-content-card,
[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture .service-network-content-card {
	border-top: 0;
	border-inline-start: 2px solid var(--r03-accent);
	border-bottom: 1px solid rgba(82, 209, 204, .2);
	background: linear-gradient(180deg, rgba(82, 209, 204, .1), rgba(8, 31, 44, .5));
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: none;
	border-top-color: var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list li {
	display: block;
	min-width: 0;
	padding: 20px 18px 24px;
	border-bottom: 0;
	border-inline-end: 1px solid rgba(82, 209, 204, .2);
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list li:first-child {
	padding-inline-start: 0;
}

[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list li:last-child {
	padding-inline-end: 0;
	border-inline-end: 0;
}

/* F06: policy / boundary — framed control surface with denser audit rhythm. */
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero {
	padding: clamp(70px, 7.8vw, 116px) 0 clamp(58px, 6.5vw, 92px);
	background:
		radial-gradient(circle at 84% 18%, rgba(239, 176, 90, .16), transparent 22%),
		linear-gradient(135deg, #15161f 0%, #1d222d 57%, #14151c 100%);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero::after {
	position: absolute;
	inset: 0 0 0 54%;
	background:
		linear-gradient(90deg, transparent 0 16%, rgba(239, 176, 90, .16) 16.2% 16.45%, transparent 16.65% 63%, rgba(239, 176, 90, .1) 63.2% 63.45%, transparent 63.65%),
		repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 213, 155, .07) 34px 35px, transparent 35px 72px);
	mask-image: linear-gradient(90deg, transparent, #000 24%, #000 84%, transparent);
	content: '';
	opacity: .72;
	pointer-events: none;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-grid {
	grid-template-columns: minmax(0, .96fr) minmax(400px, 1.04fr);
	gap: clamp(34px, 5vw, 82px);
	align-items: stretch;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-copy {
	max-width: 700px;
	padding-inline-start: clamp(24px, 3.8vw, 58px);
	border-inline-start: 1px solid var(--r03-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero h1 {
	max-width: 640px;
	font-size: clamp(38px, 4.2vw, 58px);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-summary {
	max-width: 620px;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-media {
	align-self: stretch;
	border-radius: 12px;
	border: 1px solid rgba(239, 176, 90, .6);
	box-shadow: 12px 12px 0 rgba(239, 176, 90, .1), 0 28px 72px rgba(18, 13, 8, .42);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-image {
	height: 100%;
	min-height: clamp(320px, 35vw, 520px);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-media::after {
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(255, 213, 155, .2);
	border-radius: 6px;
	content: '';
	pointer-events: none;
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-signals {
	grid-template-columns: 1fr;
	max-width: 560px;
	margin-top: 28px;
	border-top: 1px solid var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-signals li {
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: start;
	padding: 13px 0;
	border-top: 0;
	border-bottom: 1px solid rgba(239, 176, 90, .2);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-intro-grid {
	grid-template-columns: minmax(0, .98fr) minmax(320px, 1.02fr);
	gap: clamp(34px, 5.5vw, 88px);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture {
	padding-inline: clamp(0px, 3vw, 48px);
	border-inline-start: 2px solid rgba(239, 176, 90, .22);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem .service-network-content-card,
[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture .service-network-content-card {
	border-top: 0;
	border-inline-start: 2px solid var(--r03-accent);
	background: linear-gradient(135deg, rgba(239, 176, 90, .13), rgba(42, 33, 25, .72));
	box-shadow: inset 0 -1px 0 rgba(239, 176, 90, .16);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--implementation .service-network-content-step-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 5vw, 76px);
	max-width: 1040px;
	border-top-color: var(--r03-line);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--implementation .service-network-content-step-list li {
	min-height: 138px;
	padding: 24px 0;
	border-bottom-color: rgba(239, 176, 90, .18);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--implementation .service-network-content-step-list li:nth-child(odd) {
	padding-inline-end: 26px;
	border-inline-end: 1px solid rgba(239, 176, 90, .18);
}

[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--implementation .service-network-content-step-list li:nth-child(even) {
	padding-inline-start: 26px;
}

/* Keep the two variants legible at tablet and phone widths. */
@media (max-width: 820px) {
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-copy,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-copy {
		order: 0;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-media,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-media {
		order: 1;
		margin-bottom: 0;
		transform: none;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list {
		display: block;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--implementation .service-network-content-step-list li,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--implementation .service-network-content-step-list li {
		min-height: 0;
		padding: 18px 0 20px;
		border-inline-end: 0;
	}

	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-copy {
		padding-inline-start: 20px;
	}
}

@media (max-width: 560px) {
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero {
		padding: 54px 0 46px;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero h1,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero h1 {
		font-size: clamp(31px, 9.2vw, 44px);
		line-height: 1.22;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-summary,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-summary {
		margin-top: 19px;
		font-size: 16px;
		line-height: 1.78;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-media,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-media {
		width: 100%;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-hero-image,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-image {
		min-height: 0;
		height: auto;
		aspect-ratio: 1.28 / 1;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-intro-grid,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-intro-grid {
		gap: 28px;
	}

	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--problem,
	[data-renderer="service-network-security"][data-family="F05"] .service-network-content-section--architecture,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--problem,
	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-section--architecture {
		padding-inline: 0;
		border-inline-start: 0;
	}

	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-hero-copy {
		padding-inline-start: 16px;
	}

	[data-renderer="service-network-security"][data-family="F06"] .service-network-content-signals {
		margin-top: 24px;
	}
}

/* PHASE 12B.2: R03 exposes path/control logic as a rail, not a color theme. */
[data-renderer="service-network-security"] .yuqi-factory-composition {
	width: 100%;
}

[data-renderer="service-network-security"] .yuqi-family-composition--r03 {
	max-width: 1240px;
	margin: 0 auto;
	padding: 20px clamp(20px, 4vw, 56px) 22px;
	border-block: 1px solid var(--factory-line, rgba(155, 190, 205, .22));
	background: var(--factory-surface-1, rgba(10, 31, 45, .72));
}

[data-renderer="service-network-security"] .yuqi-family-composition__intro {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 16px;
}

[data-renderer="service-network-security"] .yuqi-family-composition__eyebrow {
	margin: 0;
	color: var(--factory-accent, #83d0d2);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

[data-renderer="service-network-security"] .yuqi-family-composition__intro h2 {
	margin: 0;
	color: var(--factory-text, #f1f6f7);
	font-size: clamp(18px, 2vw, 25px);
	line-height: 1.25;
}

[data-renderer="service-network-security"] .yuqi-composition-path,
[data-renderer="service-network-security"] .yuqi-composition-control {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-renderer="service-network-security"] .yuqi-composition-path {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

[data-renderer="service-network-security"] .yuqi-composition-path__item,
[data-renderer="service-network-security"] .yuqi-composition-control__item {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 10px;
	min-width: 0;
	padding: 14px 16px 8px;
	border-inline-start: 1px solid var(--factory-line, rgba(155, 190, 205, .22));
}

[data-renderer="service-network-security"] .yuqi-composition-path__item:first-child,
[data-renderer="service-network-security"] .yuqi-composition-control__item:nth-child(3n + 1) {
	border-inline-start: 0;
}

[data-renderer="service-network-security"] .yuqi-composition-step {
	color: var(--factory-accent, #83d0d2);
	font-size: 11px;
	letter-spacing: .12em;
}

[data-renderer="service-network-security"] .yuqi-composition-path__item strong,
[data-renderer="service-network-security"] .yuqi-composition-control__item strong {
	color: var(--factory-text, #f1f6f7);
	font-size: 14px;
	line-height: 1.45;
}

[data-renderer="service-network-security"] .yuqi-composition-control {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-block-start: 1px solid var(--factory-line, rgba(155, 190, 205, .22));
}

[data-renderer="service-network-security"] .yuqi-family-composition--security-control {
	--factory-accent: #d8a45e;
}

@media (max-width: 760px) {
	[data-renderer="service-network-security"] .yuqi-family-composition--r03 {
		padding: 18px 18px 20px;
	}

	[data-renderer="service-network-security"] .yuqi-family-composition__intro {
		display: block;
		margin-bottom: 12px;
	}

	[data-renderer="service-network-security"] .yuqi-family-composition__intro h2 {
		margin-top: 6px;
	}

	[data-renderer="service-network-security"] .yuqi-composition-path,
	[data-renderer="service-network-security"] .yuqi-composition-control {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	[data-renderer="service-network-security"] .yuqi-composition-path__item:nth-child(odd),
	[data-renderer="service-network-security"] .yuqi-composition-control__item:nth-child(odd) {
		border-inline-start: 0;
	}

	[data-renderer="service-network-security"] .yuqi-composition-path__item:nth-child(n + 3),
	[data-renderer="service-network-security"] .yuqi-composition-control__item:nth-child(n + 3) {
		border-block-start: 1px solid var(--factory-line, rgba(155, 190, 205, .22));
	}
}