/* Connectivity rebuild, 22 September 2026. See STYLE-NOTES.md §320, §329 (the redesign
   after Ed's review of the first pass). */

/* ---- Insurance software integrations in practice (Ed's handoff, 24 September 2026) ----
   Three layouts from the section's OWN width (container queries), so it behaves
   the same in any column: a table at 1000px and up, a 2 x 3 grid of cells from
   640px, one centred column below. The header and body each carry their own
   radius: one white card clipped under a dark header leaves white fringes on
   the rounded corners. The logo column is fixed at 384px = four 84px boxes and
   three 16px gaps, the most logos any row has. Handoff hexes mapped to tokens;
   h2 at the site's section-heading size (--gn-section-heading) rather than the handoff's 46 (Ed's rule). */
.gn-uc.gn-uc {   /* width, full-bleed margins and the gradient: the deep band shell in style.css (§427) */
	container-type: inline-size;
	font-family: var(--wp--preset--font-family--body);
}
.gn-uc-in { max-width: var(--wp--style--global--content-size); margin: 0 auto; padding: var(--gn-section-space) 32px; }   /* the site's band spacing, like every other painted band (Ed) */
.gn-uc-intro { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.gn-uc .gn-uc-h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--gn-section-heading);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
	text-wrap: balance;
}
.gn-uc-h2 span { color: var(--wp--preset--color--cta-hover); }
.gn-uc .gn-uc-dek { margin: 18px auto 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--white); text-wrap: pretty; }

.gn-uc-table { border-radius: 16px; box-shadow: 0 12px 32px rgb(from var(--genasys-space-blue) r g b / 0.3); }
.gn-uc-head, .gn-uc-row { display: grid; grid-template-columns: minmax(200px, 0.85fr) minmax(0, 1.4fr) 384px; column-gap: 32px; }
.gn-uc-head { background: var(--wp--preset--color--ink); padding: 0 32px; border-radius: 16px 16px 0 0; }
.gn-uc-head div { padding: 20px 0; font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--white); }
.gn-uc-body { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; background: var(--wp--preset--color--white); padding: 0 32px; border-radius: 0 0 16px 16px; }
.gn-uc-row { align-items: center; padding: 26px 0; border-top: 1px solid var(--border-subtle); min-width: 0; }
.gn-uc-row:first-child { border-top: 0; }
.gn-uc-use { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gn-uc-cat { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.gn-uc .gn-uc-title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); text-wrap: pretty; }
.gn-uc .gn-uc-desc { margin: 0; min-width: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-body); text-wrap: pretty; }
.gn-uc-int { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gn-uc-intlabel { display: none; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral-600); }
.gn-uc .gn-uc-logos { display: flex; flex-wrap: nowrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gn-uc .gn-uc-logo { flex: none; display: flex; align-items: center; justify-content: flex-start; width: 84px; height: 36px; margin: 0; padding: 0; }
.gn-uc-logo::before { content: none; }
/* width/height auto: a logo linked to the Media Library gets width and height
   attributes from WordPress, and those would otherwise fill the 84px box and
   shift a narrow logo sideways (26 September). */
.gn-uc-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Each use case's category in its own Genasys colour, in the run the numbered
   sections use (Ed). */
.gn-uc-row:nth-child(6n+2) .gn-uc-cat { color: var(--wp--preset--color--primary); }
.gn-uc-row:nth-child(6n+3) .gn-uc-cat { color: var(--wp--preset--color--cta-hover); }
.gn-uc-row:nth-child(6n+4) .gn-uc-cat { color: var(--wp--preset--color--cta); }
.gn-uc-row:nth-child(6n+5) .gn-uc-cat { color: var(--wp--preset--color--purple); }
.gn-uc-row:nth-child(6n)   .gn-uc-cat { color: var(--wp--preset--color--steel); }
/* Logos zoom on hover (Ed); the box keeps its size so nothing reflows. */
.gn-uc-logo img { transition: transform 0.25s ease; }
.gn-uc-logo:hover img { transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) { .gn-uc-logo img { transition: none; } }

@container (max-width: 999px) {
	.gn-uc-in { padding-inline: 16px; }
	.gn-uc-head { display: none; }
	.gn-uc-body { padding: 0 20px; border-radius: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gn-uc-row { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-items: start; align-content: start; padding: 24px 0; }
	.gn-uc-row:nth-child(2) { border-top: 0; }
	.gn-uc-intlabel { display: block; }
	.gn-uc .gn-uc-logos { flex-wrap: wrap; gap: 12px; }
	.gn-uc .gn-uc-logo { width: min(84px, calc((100cqw - 180px) / 8)); height: 32px; }
}
@container (max-width: 639px) {
	.gn-uc-body { grid-template-columns: minmax(0, 1fr); }
	.gn-uc-row:nth-child(2) { border-top: 1px solid var(--border-subtle); }
	.gn-uc-row { text-align: center; }
	.gn-uc .gn-uc-desc, .gn-uc-intlabel { display: none; }
	.gn-uc .gn-uc-logos { justify-content: center; }
	.gn-uc .gn-uc-logo { justify-content: center; width: min(84px, calc((100cqw - 108px) / 4)); }
}

/* ---- The wheel needs the whole content width, so this hero stacks ----
   The shared hero puts its graphic in a 530px side column. At that size the
   wheel is half its design scale and the pill labels fall to about 6px, which
   is unreadable and would be worse once they are logos. This modifier is
   page-scoped: the shared hero is untouched for every other page that uses it. */


/* Ed: the Technology Ecosystem section is a white block sitting beneath the
   hero, not a continuation of the navy. */
.gn-eco-section {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--white);
}

/* The wheel is round and its container is square, so the section needs room
   under it or the next block clips the arc at the bottom. */


/* Ed: the wheel sits to the RIGHT of the headline, not centred beneath it.
   The shared hero gives its graphic a 530px column; this page takes a bigger
   share instead, because the wheel needs the width and the copy does not. */
.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-inner {
	display: flex;
	align-items: center;
	gap: 40px;
}
.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-text {
	flex: 0 1 38%;
	max-width: none;
}
.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-graphic {
	flex: 1 1 58%;
	width: auto;
	max-width: none;
	margin-top: 0;
}
.gn-conn-wheel-hero .gn-eco-wheel { width: 100%; max-width: none; }

@media (max-width: 900px) {
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-inner { display: block; }
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-graphic { margin-top: 40px; }
}

/* The shared hero rounds its bottom and tucks the next block under it. On this
   page that pulled the white ecosystem block 65px up into the wheel, so the
   two are separated explicitly: Ed wants that section self-contained. */
.gn-product-hero.gn-conn-wheel-hero { margin-bottom: 0; }

/* Nothing may clip the wheel once a wedge grows past it; the wheel's own half is in style.css (STYLE-NOTES §383). */
.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-graphic { overflow: visible; }

/* The wheel became a dot between the flex hero and the 900px stack, because a
   58% column of a shrinking container has no floor. It keeps a usable size and
   stacks sooner. */
@media (max-width: 1200px) {
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-inner { display: block; }
	/* Once the wheel drops below the text, the whole hero centres (Ed). */
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-text { max-width: 760px; margin-inline: auto; text-align: center; }
	/* The body has its own max-width, so centring the text is not enough: it
	   needs auto margins too, or between 1025 and 1200px it sits left. */
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-body { margin-inline: auto; }
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-graphic { margin-top: 44px; }
	.gn-conn-wheel-hero .gn-eco-wheel { max-width: 620px; margin-inline: auto; }
}


/* Room between the Technology ecosystem intro and its carousel. */
.gn-carousel { margin-top: 56px !important; }
@media (max-width: 600px) { .gn-carousel { margin-top: 40px !important; } }

/* ---- One edge for the framed sections on this page (Ed, 24 September 2026) ----
   The integrations table sits 32px inside the 1100px content width (its
   handoff padding), so the Benefits split and Craig's quote, both at the full
   1100px, read wider when you scroll between them. On this page they line up
   with the table instead. Page-scoped: both components are shared, and Speed
   to Market's neighbours are 1100px. */
.gn-split.gn-split { max-width: calc(var(--wp--style--global--content-size) - 64px); }
/* Desktop only: on tablets the case template narrows this grid to 620px itself. */
@media (min-width: 901px) {
	.gn-case .gn-case-grid { max-width: calc(var(--wp--style--global--content-size) - 64px); margin-inline: auto; }
}

/* §433 in STYLE-NOTES.md (repo root): on phones the wheel runs to 16px from the screen edge, so its logos are large enough to read */
@media (max-width: 600px) {
	.gn-product-hero.gn-conn-wheel-hero .gn-product-hero-graphic { margin-inline: -36px; }
}