/* §421 Genasys for brokers: two systems, two jobs */
.gn-bk-pos-heading { font-size: var(--gn-section-heading) !important; color: var(--wp--preset--color--primary); }
.gn-bk-pos-heading span { color: var(--wp--preset--color--accent); }
.gn-bk-pos-intro { max-width: 780px; margin: 20px auto 0 !important; font-size: 17px; line-height: 1.65; color: var(--wp--preset--color--ink); }
.gn-bk-sys { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.4fr); align-items: center; max-width: 1100px !important; margin: 44px auto 0 !important; text-align: left; }
.gn-bk-sys h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; }
.gn-bk-sys p { margin: 0 0 20px; font-size: 16px; line-height: 1.5; }

/* Theirs: quiet, grey, static */
.gn-bk-sys-them { padding: 28px; border: 1px solid var(--neutral-200); border-radius: var(--card-radius); background: var(--neutral-50); }
.gn-bk-sys-them h3 { color: var(--wp--preset--color--ink); }
.gn-bk-sys-them p { color: var(--neutral-600); }
.gn-bk-sys-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gn-bk-sys-list li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px !important; border: 1px solid var(--neutral-200); border-radius: 10px; background: var(--wp--preset--color--white); font-size: 14px; color: var(--neutral-600); }
.gn-bk-sys-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-300); }

/* The connection between them */
.gn-bk-sys-link { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gn-bk-sys-link small { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-600); }
.gn-bk-sys-wire { position: relative; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--neutral-300) 0 6px, transparent 6px 11px); }

/* Ours: solid blue, alive */
.gn-bk-sys-us { position: relative; overflow: hidden; padding: 32px; border-radius: var(--card-radius); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.gn-bk-sys-us::before { content: ""; position: absolute; right: -60px; bottom: -70px; width: 240px; height: 210px; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--wp--preset--color--accent); }
.gn-bk-sys-us h3 { font-size: 24px; color: var(--wp--preset--color--white); }
.gn-bk-sys-us p { position: relative; color: var(--wp--preset--color--white); }
.gn-bk-sys-screen { position: relative; border-radius: 12px; background: var(--wp--preset--color--white); box-shadow: 0 10px 28px var(--shadow-mid); color: var(--wp--preset--color--ink); }
.gn-bk-sys-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--neutral-100); font-size: 14px; }
.gn-bk-sys-status { display: grid; justify-items: end; }
.gn-bk-sys-status > span { grid-area: 1 / 1; padding: 3px 10px; border-radius: 50px; background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, var(--wp--preset--color--white)); font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; }
.gn-bk-sys-status > span:last-child { opacity: 1; }
.gn-bk-sys-track { position: relative; margin: 0 8px; padding: 18px 0 16px; }
.gn-bk-sys-track::before, .gn-bk-sys-fill { content: ""; position: absolute; top: 24px; left: 8.333%; width: 83.333%; height: 3px; border-radius: 2px; background: var(--neutral-200); }
.gn-bk-sys-fill { background: var(--wp--preset--color--accent); transform-origin: left; }
.gn-bk-sys-token { position: absolute; z-index: 2; top: 25.5px; left: 91.667%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--wp--preset--color--accent); box-shadow: 0 0 0 4px var(--wp--preset--color--white), 0 0 0 9px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); }
.gn-bk-sys-track ol { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.gn-bk-sys-track li { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; font-size: clamp(11px, 1.4vw, 12px); font-weight: 600; color: var(--neutral-600); }
.gn-bk-sys-track li::before { content: ""; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--wp--preset--color--accent); border-radius: 50%; background: var(--wp--preset--color--accent); }

@media (max-width: 860px) {
	.gn-bk-sys { grid-template-columns: minmax(0, 1fr); }
	.gn-bk-sys-link { padding: 12px 0; }
	.gn-bk-sys-wire { width: 2px; height: 56px; background: repeating-linear-gradient(180deg, var(--neutral-300) 0 6px, transparent 6px 11px); }
		.gn-bk-sys-us { padding: 24px; }
}

/* Once on screen: the panels arrive, then a policy runs its life on Genasys while data passes between the two. */
@media (prefers-reduced-motion: no-preference) {
	html.gn-js .gn-bk-sys > * { opacity: 0; translate: 0 18px; transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.23, 1, 0.32, 1); }
	html.gn-js .gn-bk-sys > :nth-child(2) { transition-delay: 0.25s; }
	html.gn-js .gn-bk-sys > :nth-child(3) { transition-delay: 0.4s; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys > * { opacity: 1; translate: 0 0; }

	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-fill { animation: gn-bk-fill 9s ease-in-out infinite; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-token { animation: gn-bk-token 9s ease-in-out infinite; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li::before { animation: 9s ease infinite; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(1)::before { animation-name: gn-bk-n0; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(2)::before { animation-name: gn-bk-n1; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(3)::before { animation-name: gn-bk-n2; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(4)::before { animation-name: gn-bk-n3; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(5)::before { animation-name: gn-bk-n4; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-track li:nth-child(6)::before { animation-name: gn-bk-n5; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span { opacity: 0; animation: gn-bk-status 9s ease infinite; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span:nth-child(2) { animation-delay: 1.5s; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span:nth-child(3) { animation-delay: 3s; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span:nth-child(4) { animation-delay: 4.5s; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span:nth-child(5) { animation-delay: 6s; }
	html.gn-js .gn-bk-pos.gn-in .gn-bk-sys-status > span:nth-child(6) { animation-delay: 7.5s; }
}
@keyframes gn-bk-fill {
	0%, 12% { transform: scaleX(0); opacity: 1; } 16.67%, 28.67% { transform: scaleX(0.2); } 33.33%, 45.33% { transform: scaleX(0.4); }
	50%, 62% { transform: scaleX(0.6); } 66.67%, 78.67% { transform: scaleX(0.8); } 83.33%, 95% { transform: scaleX(1); opacity: 1; } 99% { opacity: 0; } 100% { transform: scaleX(0); opacity: 0; }
}
@keyframes gn-bk-token {
	0% { left: 8.333%; opacity: 0; } 3%, 12% { left: 8.333%; opacity: 1; } 16.67%, 28.67% { left: 25%; } 33.33%, 45.33% { left: 41.667%; }
	50%, 62% { left: 58.333%; } 66.67%, 78.67% { left: 75%; } 83.33%, 95% { left: 91.667%; opacity: 1; } 99%, 100% { left: 91.667%; opacity: 0; }
}
@keyframes gn-bk-n0 { 0% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 3%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-n1 { 0%, 16% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 18%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-n2 { 0%, 33% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 35%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-n3 { 0%, 50% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 52%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-n4 { 0%, 66% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 68%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-n5 { 0%, 83% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } 85%, 95% { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); } 99%, 100% { background: var(--wp--preset--color--white); border-color: var(--neutral-300); } }
@keyframes gn-bk-status { 0%, 3% { opacity: 0; translate: 0 6px; } 6%, 18% { opacity: 1; translate: 0 0; } 20%, 100% { opacity: 0; translate: 0 -6px; } }