/* hero refinements */
	.page-hero h1 { font-weight: 700; }
	/* hero architecture diagram card */
	.hero-arch { max-width: 880px; margin: clamp(3rem, 6vw, 4.5rem) auto 0; }
	.hero-arch svg { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 12px 28px rgba(7,38,48,.12), 0 32px 70px rgba(0,100,120,.14); }

	/* the stack flow: numbered spine + tiers with real technology logos */
	.stackflow { position: relative; max-width: 880px; margin: 0 auto; }
	.stackflow::before { content: ""; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px; background: #cfe0e6; }
	.sf-tier { position: relative; padding: 0 0 3.4rem 92px; }
	.sf-tier:last-child { padding-bottom: 0; }
	.sf-node { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 14px rgba(0,70,85,.14); }
	.sf-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin: .35rem 0 .4rem; }
	.sf-tier h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin: 0 0 .55rem; }
	.sf-tier p { color: var(--body); line-height: 1.65; max-width: 62ch; margin: 0; }
	.sf-logos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.8rem 2.6rem; margin-top: 1.6rem; }
	.sf-logo { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
	.sf-logo img, .sf-logo > svg { height: 58px; width: auto; display: block; }
	.sf-logo.sm img { height: 48px; }
	.sf-logo.wordmark img { height: 40px; }
	.sf-logos.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.2rem; justify-items: center; max-width: 640px; }
	.sf-logo span { font-size: .84rem; font-weight: 600; color: #6e7680; } /* --muted fails AA at this size */
	/* plug-in branch: dashed socket panel wired to the spine (tier 4) */
	.sf-branch { position: relative; margin-top: 2.4rem; padding: 1.4rem 1.7rem 1.6rem; border: 2px dashed #a9c3cc; border-radius: 16px; background: #f6fafb; }
	.sf-branch::before { content: ""; position: absolute; left: -64px; top: 50%; width: 64px; border-top: 2px dashed #a9c3cc; }
	.sf-branch::after { content: ""; position: absolute; left: -71px; top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); }
	.sf-branch-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
	.sf-branch-head svg { flex: none; color: var(--accent); }
	.sf-branch-head h4 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }
	.sf-branch p { font-size: .95rem; }
	.sf-branch .sf-logos { margin-top: 1.3rem; }
	/* labeled sub-rows with dividers (tier 6) */
	.sf-group { display: flex; align-items: center; gap: 2rem; border-top: 1px solid var(--line); padding: 1.5rem 0 .5rem; margin-top: 1.6rem; }
	.sf-glabel { flex: 0 0 170px; display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6e7680; }
	.sf-glabel svg { flex: none; color: var(--accent); }
	.sf-group .sf-logos { margin-top: 0; flex: 1 1 auto; }
	@media (max-width: 700px) {
		.sf-group { flex-direction: column; align-items: flex-start; gap: 1rem; }
	}
	@media (max-width: 575px) {
		.stackflow::before { left: 21px; }
		.sf-node { width: 44px; height: 44px; font-size: .95rem; }
		.sf-tier { padding-left: 64px; }
		.sf-logos { gap: 1.3rem 1.7rem; }
		.sf-logo img, .sf-logo > svg { height: 46px; }
		.sf-logo.sm img { height: 40px; }
		.sf-logo.wordmark img { height: 32px; }
		.sf-branch::before { left: -42px; width: 42px; }
		.sf-branch::after { left: -49px; }
		.sf-logos.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}