/**
 * Layout for the dynamic navigation/context chrome (PublicPageChrome).
 * Depends on application-hub-tokens.css for variables and primitives.
 */

body.single-application_hub_node {
	background: var(--ah-color-page-background);
}

/* The full-bleed hero/secondary-nav's 100vw can overshoot by a scrollbar's
   width on non-overlay-scrollbar browsers. Clipping that on <html> — the
   actual root element — is the one place this is side-effect-free: in
   standards mode, the root element's overflow is what the browser uses for
   the real viewport's own scroll box, so this doesn't create a new nested
   scrolling context. Putting it on <body> (or on a wrapper div further down,
   both tried and both reverted) does create a new nested scroll box there
   instead, which breaks position:sticky's containing-block calculation and
   can fight the theme's own scroll handling — that's what caused the
   secondary nav to stick in the wrong place and the page to stop scrolling
   properly. */
html {
	overflow-x: hidden;
}

/* Clicking a "Content" rail (or mobile TOC) link jumps to a real #id already
   on the page — this is the only thing needed to make that jump smooth
   instead of an instant cut, no scroll JS required. Skipped entirely for
   anyone who's asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth; /* this stylesheet only loads on Application Hub node pages, so no extra scoping needed */
	}
}

.application-hub-page {
	/* padding-top removed: it was pushing the hero (Industry/Area/Application)
	   or the breadcrumb (Article) down from the theme's main navbar with an
	   extra, unwanted gap. padding-bottom is still needed — every page type
	   except Industry (which zeroes it back out below) relies on this to
	   keep its last section clear of the footer. */
	padding-bottom: var(--ah-space-6);
	background: var(--ah-color-page-background);
	color: var(--ah-color-text);
	font-size: var(--ah-font-size-body);
	line-height: 1.6;
}
/* Industry pages always end with the contact banner (BlockRegistrar's
   "Get in contact" promo-banner) — it should sit flush against the footer,
   not leave this page-level bottom padding as dead space beneath it. Every
   other node type keeps the normal padding-bottom above. */
.application-hub-page--industry {
	padding-bottom: 0;
}

/* The breadcrumb always renders its full ancestor chain (see
   BlockRegistrar::render_breadcrumb()) — on narrow viewports it scrolls
   horizontally instead of wrapping or collapsing, same technique as
   .ah-anchor-nav (application-hub-tokens.css) and the secondary nav above. */
.application-hub-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--ah-space-1);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--ah-space-4);
	font: 500 0.875rem/1.4 var(--ah-font-family);
}
.application-hub-breadcrumb__crumb {
	display: inline-flex;
	align-items: center;
	flex: none;
	white-space: nowrap;
	color: var(--ah-color-text-subtle);
}
.application-hub-breadcrumb__crumb a {
	color: inherit;
	text-decoration: none;
}
.application-hub-breadcrumb__crumb a:hover {
	color: var(--ah-color-brand);
}
.application-hub-breadcrumb__crumb--current {
	color: var(--ah-color-text);
	font-weight: 600;
}
.application-hub-breadcrumb__sep {
	margin: 0 var(--ah-space-2);
}
/* Article only: PublicPageChrome::extract_breadcrumb() pulls this out of the
   entity header and re-places it right above the 3-column layout on its
   own, with none of the hero/header spacing around it — sat too close to
   the content below. A little more room plus a light divider (same border
   token/treatment as the secondary nav's own bottom border) gives it a
   clean break from the article instead. */
.application-hub-page--article .application-hub-breadcrumb {
	padding-bottom: var(--ah-space-4);
	margin-bottom: var(--ah-space-7);
	border-bottom: 1px solid var(--ah-color-border);
}
.application-hub-breadcrumb--light,
.application-hub-breadcrumb--light .application-hub-breadcrumb__crumb {
	color: rgba(255, 255, 255, 0.75);
}
.application-hub-breadcrumb--light .application-hub-breadcrumb__crumb--current {
	color: #fff;
}
/* Industry, Application Area, and Application always render this variant
   (BlockRegistrar::render_breadcrumb()'s $light param — Article never does),
   over a blue hero background — the generic a:hover rules elsewhere
   (blocks/section/style.css, and .application-hub-breadcrumb__crumb a:hover
   above) turn a link a darker blue on hover, which barely shows up against
   that background. White reads clearly instead. Three classes so this wins
   over both of those regardless of stylesheet load order. */
.application-hub-breadcrumb--light .application-hub-breadcrumb__crumb a:hover {
	color: #fff;
}
.application-hub-page__anchor-nav {
	margin-bottom: var(--ah-space-5);
}

/* Fixed section-navigation band, right after an Industry, Application Area,
 * or Application hero (see PublicPageChrome::render_secondary_nav()).
 * Full-bleed + sticky are the same two techniques already used elsewhere in
 * this plugin (.application-hub-sensor-installation's full-bleed, .application-hub-page__toc-sticky's
 * sticky) — not a third pattern. The translucent/blurred background is
 * permanent, not scroll-triggered: it only reads as "appearing while
 * scrolling" because of whatever page content is moving underneath it once
 * the band sticks to the top of the viewport. */
.application-hub-secondary-nav {
	position: sticky;
	top: 60px;
	z-index: 90;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--ah-space-6);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--ah-color-border);
}
.application-hub-secondary-nav__inner {
	max-width: var(--ah-container-max);
	margin-inline: auto;
	padding: var(--ah-space-5) var(--ah-container-pad);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--ah-space-3);
}
@media (max-width: 1024px) {
	/* One row, horizontally scrollable, no visible scrollbar — same
	   technique used elsewhere on this page (breadcrumb, Applications tab
	   bar) — instead of wrapping onto several cramped lines. The active
	   link auto-scrolls into view as the reader scrolls the page itself
	   (initSecondaryNavScrollspy() in application-hub-page-chrome.js), so
	   it stays visible without the reader ever touching this row. */
	.application-hub-secondary-nav__inner {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.application-hub-secondary-nav__inner::-webkit-scrollbar {
		display: none;
	}
	.application-hub-secondary-nav__link {
		flex: none;
	}
}
.application-hub-secondary-nav__link {
	display: inline-flex;
	align-items: center;
	font: 500 14px/1.2 var(--ah-font-family);
	padding: var(--ah-space-2) var(--ah-space-4);
	border: 1px solid var(--ah-color-brand);
	border-radius: 5px;
	color: var(--ah-color-brand);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.application-hub-secondary-nav__link:hover,
.application-hub-secondary-nav__link.is-active {
	background: var(--ah-color-brand);
	color: var(--ah-color-text-inverse);
}

/* So a section scrolled-to via the nav doesn't end up hidden under the
 * sticky band — sized to roughly its own rendered height. */
#overview,
#installation,
#certificates,
#applications,
#articles {
	scroll-margin-top: 90px;
}

/* Industry, Application Area, and Application overviews commonly start with
 * a core Media & Text block. Its global 80px top margin plus the navigation
 * band's own bottom margin left an oversized gap after the hero/nav — first
 * found on Application pages, but Industry's own starter template opens with
 * the exact same block right after its secondary nav, so it needs the same
 * fix. Keep the standard section rhythm here and let the band's margin
 * provide the first separation. */
.application-hub-page.application-hub-page--application .wp-block-media-text,
.application-hub-page.application-hub-page--industry .wp-block-media-text,
.application-hub-page.application-hub-page--application-area .wp-block-media-text {
	margin-block: var(--ah-space-6);
	/* Same fix as .application-hub-advantage-media (the Rheonics Advantage
	   media-text block) — core's media-text block was overflowing past the
	   1200px container. This is the Overview media-text block's version of
	   that same constraint (it has no className of its own to hang a
	   dedicated rule off of, so it's added here on the shared selector). */
	max-width: var(--ah-container-max);
	margin-inline: auto;
}
/* When one of these is the very first section (the common Overview case),
   .application-hub-page__sections > *:first-child (blocks/section/style.css)
   already zeroes its margin-top and caps the container's own padding-top at
   40px total — this used to try doing that here too via
   ".application-hub-page__anchor + .wp-block-media-text", but that selector
   never matched: the anchor span is a sibling of the whole
   .application-hub-page__sections container, not of the block nested inside
   it. */
/* The canonical import recipe represents Overview copy and its parser image
 * as adjacent Introduction and Figure sections. Treat them as one visual
 * group instead of placing a full generic section gap between the two. */
.application-hub-page--application .application-hub-section--introduction {
	margin-bottom: var(--ah-space-5);
}
.application-hub-page__main {
	min-width: 0;
}

.application-hub-page strong {
	font-weight: 600;
}

/* core/media-text and core/separator — used directly by editors (e.g. an
   Industry page's Overview and section dividers) instead of a custom block,
   since core already covers "text with an image beside it" and "a divider"
   natively. Restyled to match the plugin's own section spacing/typography
   instead of theme defaults. */
.application-hub-page .wp-block-media-text {
	margin-block: 80px;
	/* Core sets no gap of its own between the media/content grid tracks —
	   relying only on __content's own padding (see below) for separation,
	   which touches directly on the media-facing side once that padding is
	   removed. An explicit gap covers both layouts: column-gap side-by-side
	   on desktop, row-gap between the stacked image/text on mobile. */
	gap: var(--ah-space-5);
}
.application-hub-page .wp-block-media-text .wp-block-media-text__content {
	/* Core's own default (padding: 0 8%) narrows the text column on both
	   sides on every viewport, including the stacked mobile layout — this
	   plugin's other sections don't inset their body text like that. The
	   gap above already provides the media-facing spacing, so this can be 0.
	   Three classes here (not two) deliberately outweighs core's own
	   `.wp-block-media-text>.wp-block-media-text__content` (also two
	   classes) regardless of stylesheet load order. */
	padding: 0;
}
.application-hub-page .wp-block-media-text .wp-block-heading {
	/* Matches .application-hub-section__heading exactly (same brand-blue
	   color + bottom margin only), so Overview's heading looks identical to
	   every other section's, not a plain unstyled core heading. */
	font: 500 30px var(--ah-font-family);
	color: var(--ah-color-brand);
	margin: 0 0 var(--ah-space-3);
}
.application-hub-page .wp-block-media-text p {
	font: 400 var(--ah-font-size-body)/1.6 var(--ah-font-family);
	color: var(--ah-color-text);
}
.application-hub-page .wp-block-media-text__media img {
	border-radius: var(--ah-radius-md);
}
/* Before an image is chosen, core/media-text's grid still reserves a full
   column for it — an empty <figure> with no min-height/background leaves
   that whole column visually blank, so the text column alone reads as
   shoved into the left half of the section instead of a balanced two-column
   layout. A placeholder fill keeps it looking properly proportioned until a
   real image is added (which simply fills this same box). */
.application-hub-page .wp-block-media-text__media:empty {
	display: block;
	min-height: 240px;
	background: var(--ah-color-surface-page);
	border: 1px dashed var(--ah-color-border);
	border-radius: var(--ah-radius-md);
}
.application-hub-page .wp-block-separator {
	margin-block: var(--ah-space-6);
	border-top-color: var(--ah-color-border);
}

/* Article 3-column layout: application area nav / main / table of contents.
   The middle column takes all remaining space. Collapses to a single column
   below the kit's desktop breakpoint (1025px). */
.application-hub-page__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ah-space-6);
}
@media (min-width: 1025px) {
	.application-hub-page__layout {
		grid-template-columns: 210px minmax(0, 1fr) 240px;
	}
}

/* Application area sub-navigation: the Area (or Vertical) titles the whole
   nav; every Application below it is a native <details> collapsible — its
   <summary> never navigates, it only opens the Application in place to show
   its Articles (the current Application starts open). The name="..."
   attribute makes them an accordion (one open at a time) in browsers that
   support it, and degrades harmlessly to independent toggles where it
   doesn't. Matches the Figma "cohort" nav component, with our real
   content-tree data in place of its placeholder labels. Sticky only on
   desktop, where it has a tall enough track (see .application-hub-page__layout,
   above) to follow scroll without floating oddly over a single mobile column.
   The Applications nav and the Editorial Collections nav (when present) stick
   together as one unit — sticky lives on the wrapper, not on each <nav>, so
   they don't independently stick to the same offset and overlap on scroll. */
.application-hub-page__area-nav-sticky {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
@media (min-width: 1025px) {
	.application-hub-page__area-nav-sticky {
		position: sticky;
		top: var(--ah-space-5);
	}
}
.application-hub-page__area-nav-label {
	display: block;
	color: var(--ah-color-brand);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--ah-color-brand);
	margin-bottom: var(--ah-space-5);
}
/* Shown instead of the Application list when the Article is orphaned (its
   Application, Application Area, or Industry ancestor isn't a real post
   yet) — the sidebar itself must never disappear, only its list content. */
.application-hub-page__area-nav-empty {
	margin: 0;
	color: var(--ah-color-text-subtle);
	font-size: var(--ah-font-size-sm);
	font-style: italic;
}
.application-hub-page__area-nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.application-hub-page__area-nav-application {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ah-space-2);
	min-height: 45px;
	padding: 5px 8px;
	border-radius: 15px;
	background: var(--ah-color-surface-card);
	font-size: var(--ah-font-size-sm);
	font-weight: 600;
	color: var(--ah-color-text-subtle);
	cursor: pointer;
	list-style: none;
	box-sizing: border-box;
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.application-hub-page__area-nav-application::-webkit-details-marker {
	display: none;
}
.application-hub-page__area-nav-application:hover {
	border-color: var(--ah-color-brand);
	color: var(--ah-color-brand);
}

.application-hub-page__area-nav-item {
	background: var(--ah-color-surface-card);
	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.14);
	border-radius: 10px;
	padding: 0px 5px;
}

.application-hub-page__area-nav-item[open] > .application-hub-page__area-nav-application {
	color: var(--ah-color-brand);
}
.application-hub-page__area-nav-application::after {
	content: "";
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
	margin-left: auto;
}
.application-hub-page__area-nav-item[open] > .application-hub-page__area-nav-application::after {
	transform: rotate(45deg); /* open: chevron points down, to the panel below */
}

/* The expanded panel under the current Application: its own overview link
   plus its Articles, with the current one marked. */
.application-hub-page__area-nav-panel {
	margin: -1px 0 0;
	padding: 18px 8px 26px;
	background: var(--ah-color-surface-card);
	border-radius: 0 0 15px 15px;
}
.application-hub-page__area-nav-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.application-hub-page__area-nav-panel li a,
.application-hub-page__area-nav-panel li span {
	display: block;
	padding: 0;
	font-size: var(--ah-font-size-sm);
	line-height: 1.25;
	color: var(--ah-color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.application-hub-page__area-nav-panel li.application-hub-page__area-nav-overview a {
	color: var(--ah-color-text);
	font-weight: 400;
	padding-bottom: 0;
	margin-bottom: 2px;
	border-bottom: 0;
}
.application-hub-page__area-nav-panel li.is-current span {
	color: var(--ah-color-brand);
	font-weight: 700;
}
.application-hub-page__area-nav-panel li a:hover {
	color: var(--ah-color-brand);
}

/* "View More" exits the compact article preview and opens the full current
   Application Area / Vertical page. */
.application-hub-page__area-nav-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	min-width: 148px;
	min-height: 47px;
	margin: 24px auto 0;
	padding: 0 22px;
	border: 1.5px solid var(--ah-color-brand);
	border-radius: 999px;
	color: var(--ah-color-brand);
	background: var(--ah-color-surface-card);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.application-hub-page__area-nav-more:hover,
.application-hub-page__area-nav-more:focus-visible {
	background: var(--ah-color-surface-accent);
	color: var(--ah-color-brand-hover);
	box-shadow: 0 2px 7px rgba(15, 83, 135, 0.12);
}

/* Content navigation ("Content" + section jump links): sticky desktop rail.
   Mobile's own collapsible accordion version was removed — mobile now shows
   only the Application area nav as its secondary nav on an article. */
.application-hub-page__toc-desktop {
	display: none;
}
@media (min-width: 1025px) {
	.application-hub-page__toc-desktop {
		display: block;
	}
	/* Sticky on this inner wrapper, NOT the <aside> itself — the <aside> is
	   a grid item stretched to the row's full height (matching the tall
	   main content column), and a sticky element with no room to move
	   inside its own containing block just sits still instead of
	   following scroll. This wrapper is only as tall as its own content
	   (the Content rail + divider + Talk to Rheonics box), so it has room
	   to stick within the taller <aside> around it. */
	.application-hub-page__toc-sticky {
		position: sticky;
		top: var(--ah-space-5);
	}
}
.application-hub-page__toc-label {
	display: block;
	color: var(--ah-color-brand);
	padding-bottom: var(--ah-space-3);
	border-bottom: 1px solid var(--ah-color-border);
}
.application-hub-page__toc-desktop ul {
	list-style: none;
	margin: var(--ah-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-2);
}
.application-hub-page__toc-desktop li a {
	display: block;
	padding-block: var(--ah-space-1);
	padding-left: var(--ah-space-3);
	border-left: 2px solid transparent;
	font-size: 0.875rem;
	color: var(--ah-color-text);
	text-decoration: none;
}
.application-hub-page__toc-desktop li a:hover,
.application-hub-page__toc-desktop li a.is-active {
	color: var(--ah-color-brand);
	border-left-color: var(--ah-color-brand);
	font-weight: 600;
}

/* "Talk to Rheonics" contact box: desktop-only companion to the Content
   rail above it in the same aside column (see PublicPageChrome::wrap()) —
   configured from Settings, hidden by PHP entirely when unconfigured. */
.application-hub-page__toc-divider {
	display: none;
	margin: var(--ah-space-5) 0;
	border: 0;
	border-top: 1px solid var(--ah-color-border);
}
.application-hub-page__talk-to-rheonics {
	display: none;
}
@media (min-width: 1025px) {
	.application-hub-page__toc-divider {
		display: block;
	}
	.application-hub-page__talk-to-rheonics {
		display: block;
		background: var(--ah-color-surface-dark);
		color: var(--ah-color-text-inverse);
		border-radius: var(--ah-radius-sm);
		padding: var(--ah-space-5) var(--ah-space-4);
	}
}
.application-hub-page__talk-to-rheonics-title {
	color: white;
	font: 700 1.25rem/1.3 var(--ah-font-family);
	margin: 0 0 var(--ah-space-3);
}

/* Related content, article pages: a single-column sidebar list on desktop
   (below), in the same aside column as the Content rail and contact box —
   the full-width carousel further down is its mobile stand-in only here,
   since only an article page has a sidebar to move it into. */
.application-hub-page__related-mobile-only {
	display: block;
}
.application-hub-page__related-sidebar {
	display: none;
}
@media (min-width: 1025px) {
	.application-hub-page__related-mobile-only {
		display: none;
	}
	.application-hub-page__related-sidebar {
		display: block;
	}
}
.application-hub-page__related-sidebar-label {
	display: block;
	color: var(--ah-color-brand);
	padding-bottom: var(--ah-space-3);
	padding-top: var(--ah-space-5);
	border-bottom: 1px solid var(--ah-color-border);
}
.application-hub-page__related-sidebar-list {
	list-style: none;
	margin: var(--ah-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-4);
}
.application-hub-page__related-sidebar-item + .application-hub-page__related-sidebar-item {
	padding-top: var(--ah-space-4);
	border-top: 1px solid var(--ah-color-border);
}
.application-hub-page__related-sidebar-item a {
	display: block;
	color: var(--ah-color-text);
	text-decoration: none;
}
.application-hub-page__related-sidebar-item h3 {
	color: var(--ah-color-brand);
}
.application-hub-page__related-sidebar-item:hover h3 {
	text-decoration: underline;
}
.application-hub-page__related-sidebar-item p {
	margin: var(--ah-space-1) 0 0;
	/* The 3-line truncation the sidebar list needs — line-clamp is the
	   modern standard property; the -webkit- form is still required for
	   full cross-browser coverage (Firefox only shipped unprefixed support
	   recently), so both are set rather than relying on either alone. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.application-hub-page__talk-to-rheonics p {
	margin: 0 0 var(--ah-space-4);
	font-size: var(--ah-font-size-sm);
	color: var(--ah-color-text-inverse);
}
.application-hub-page__talk-to-rheonics-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-3);
}
.application-hub-page__talk-to-rheonics-button {
	width: 100%;
	background: var(--ah-color-surface-card);
	color: var(--ah-color-brand);
}
.application-hub-page__talk-to-rheonics-button:hover,
.application-hub-page__talk-to-rheonics-button:focus-visible {
	background: var(--ah-color-surface-accent-strong);
	color: var(--ah-color-brand-hover);
}
/* Ready-to-buy path (e.g. "Request a Quote") — kept visually distinct from
   the "ask a question" button above so neither reads as competing for the
   same "primary" action. */
.application-hub-page__talk-to-rheonics-button--quote {
	background: #0490d3;
	color: var(--ah-color-text-inverse);
}
.application-hub-page__talk-to-rheonics-button--quote:hover,
.application-hub-page__talk-to-rheonics-button--quote:focus-visible {
	background: #0378b0;
	color: var(--ah-color-text-inverse);
}

/* Global support banner: rendered on Application Area, Application, and Article
   pages after the main content (inside the main column on Article pages). */
.application-hub-page__support-banner {
	position: relative;
	overflow: hidden;
	margin-top: var(--ah-space-7);
	padding: 30px;
	background:
		linear-gradient(110deg, rgba(55, 170, 225, 0.18), rgba(255, 255, 255, 0.55) 72%),
		linear-gradient(180deg, #e7f5ff 0%, #edf8ff 100%);
	border: 1px solid var(--ah-color-brand-light);
	border-radius: 22px;
	box-sizing: border-box;
	box-shadow: 0 22px 48px rgba(15, 83, 135, 0.10);
}
.application-hub-page__support-banner-content {
	max-width: 100%;
}
.application-hub-page__support-banner h2 {
	margin: 0;
	color: var(--ah-color-brand);
	font: 600 30px/1.12 var(--ah-font-family);
	letter-spacing: -0.02em;
}
.application-hub-page__support-banner p {
	max-width: 1180px;
	margin: 34px 0 0;
	color: var(--ah-color-text);
	font: 400 18px/1.45 var(--ah-font-family);
}
.application-hub-page__support-banner-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 34px;
}
.application-hub-page__support-banner-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border: 1px solid var(--ah-color-brand);
	border-radius: 10px;
	font: 500 18px/1.2 var(--ah-font-family);
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.application-hub-page__support-banner-button--primary {
	background: var(--ah-color-brand);
	color: var(--ah-color-text-inverse);
}
.application-hub-page__support-banner-button--secondary {
	background: var(--ah-color-surface-card);
	color: var(--ah-color-brand);
}
.application-hub-page__support-banner-button:hover,
.application-hub-page__support-banner-button:focus-visible {
	border-color: var(--ah-color-brand-hover);
	box-shadow: 0 10px 20px rgba(15, 83, 135, 0.18);
	transform: translateY(-1px);
}
.application-hub-page__support-banner-button--primary:hover,
.application-hub-page__support-banner-button--primary:focus-visible {
	background: var(--ah-color-brand-hover);
	color: var(--ah-color-text-inverse);
}
.application-hub-page__support-banner-button--secondary:hover,
.application-hub-page__support-banner-button--secondary:focus-visible {
	background: rgba(255, 255, 255, 0.72);
	color: var(--ah-color-brand-hover);
}

@media (max-width: 767px) {
	.application-hub-page__support-banner {
		margin-top: var(--ah-space-6);
		padding: clamp(28px, 8vw, 38px) clamp(24px, 7vw, 32px);
		border-radius: 22px;
	}
	.application-hub-page__support-banner h2 {
		font-size: clamp(1.75rem, 7.4vw, 2.25rem);
		line-height: 1.15;
		letter-spacing: -0.025em;
	}
	.application-hub-page__support-banner p {
		margin-top: clamp(24px, 7vw, 32px);
		font-size: clamp(1rem, 4.4vw, 1.125rem);
		line-height: 1.45;
	}
	.application-hub-page__support-banner-actions {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: clamp(30px, 8vw, 40px);
	}
	.application-hub-page__support-banner-button {
		min-height: 66px;
		padding: 0 20px;
		border-radius: 12px;
		font-size: clamp(1rem, 4.5vw, 1.125rem);
	}
}

/* Compact "boxed" variant — Application + Application Area only, replicating
   the narrower bottom CTA at rheonics.com/social-media (.rheonics-cta) rather
   than the full-bleed-feeling default banner above. Same content/markup,
   text/buttons unchanged — only the box's own shape and text alignment
   differ, so this only needs to override sizing, not redeclare colors. */
.application-hub-page__support-banner--compact {
	max-width: 100%;
	margin-inline: auto;
	padding: var(--ah-space-6) var(--ah-space-5);
	text-align: center;
}
.application-hub-page__support-banner--compact .application-hub-page__support-banner-content {
	margin-inline: auto;
}
.application-hub-page__support-banner--compact h2 {
	font-size: 28px;
}
.application-hub-page__support-banner--compact p {
	max-width: 620px;
	margin-inline: auto;
}
.application-hub-page__support-banner--compact .application-hub-page__support-banner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	grid-template-columns: none;
	gap: 20px;
}
.application-hub-page__support-banner--compact .application-hub-page__support-banner-button {
	min-height: 44px;
	padding: 0 22px;
	border-radius: 8px;
	font-size: 15px;
}

@media (max-width: 767px) {
	.application-hub-page__support-banner--compact {
		padding: clamp(24px, 8vw, 32px) clamp(20px, 6vw, 24px);
	}
	.application-hub-page__support-banner--compact .application-hub-page__support-banner-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.application-hub-page__support-banner--compact .application-hub-page__support-banner-button {
		min-height: 52px;
	}
}

/* Related content + tags */
.application-hub-page__related {
	margin-top: var(--ah-space-7);
}

/* Swiper carousel — slidesPerView/breakpoints/navigation/pagination are all
   configured in application-hub-page-chrome.js; this only styles spacing
   and theme color, never overflow/transform (that's Swiper's own CSS,
   assets/vendor/swiper/swiper-bundle.min.css). */
.application-hub-page__related-carousel {
	--swiper-theme-color: var(--ah-color-brand);
	--swiper-navigation-size: 20px;
	margin-top: var(--ah-space-4);
	padding-bottom: var(--ah-space-6); /* room for the pagination dots */
}
/* Swiper's own .swiper-wrapper stretches every .swiper-slide in the row to
   the tallest one's height — but a plain height:100% on our card (a
   percentage against a block box that only got its height from being a
   stretched flex item) is unreliable across browsers. Making the slide
   itself a flex container instead lets the card fill it via ordinary
   flex stretch, so all cards in a desktop row end up the same height
   instead of each hugging its own (varying-length) content. */
.application-hub-page__related-track > .swiper-slide {
	display: flex;
}
.application-hub-page__related-card {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ah-space-3);
}
.application-hub-page__related-card-media {
	width: 88px;
	height: 88px;
	aspect-ratio: 1 / 1;
	flex: none;
	margin: 0;
}
.application-hub-page__related-card-body {
	min-width: 0;
}
.application-hub-page__related-card-type {
	display: block;
	color: var(--ah-color-text-muted, #667085);
}
.application-hub-page__related-card h3 {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.application-hub-page__related-card p {
	margin: var(--ah-space-1) 0 0;
	/* Fixed and independently-scrollable at every breakpoint, not just
	   desktop — relying on descriptions of varying length to end up equal
	   via flex stretch alone kept producing mismatched card heights,
	   mobile included (only one card shows at a time there, so any height
	   difference reads as the whole carousel "jumping" between slides). */
	max-height: 95px;
	overflow-y: auto;
}
.application-hub-page__related-card a {
	color: var(--ah-color-text);
	text-decoration: none;
}

@media (min-width: 1025px) {
	/* A fixed card width is what actually guarantees every card in a
	   desktop row is the same width — Swiper needs slidesPerView: 'auto'
	   at this breakpoint (see application-hub-page-chrome.js) so it
	   measures this width from CSS instead of computing/overriding it via
	   an inline style. */
	.application-hub-page__related-track > .swiper-slide {
		width: 330px;
	}
}

@media (max-width: 767px) {
	/* A dedicated control row below the cards — arrows as circular
	   buttons at the right, pagination dots centered in the same row —
	   instead of Swiper's default vertically-centered arrows sitting on
	   top of the card content. */
	.application-hub-page__related-carousel {
		padding-bottom: 56px;
	}
	.application-hub-page__related-carousel .swiper-pagination {
		bottom: 14px;
	}
	.application-hub-page__related-carousel .swiper-button-prev,
	.application-hub-page__related-carousel .swiper-button-next {
		box-sizing: border-box;
		top: auto;
		bottom: 0;
		width: 36px;
		height: 36px;
		margin: 0;
		background: var(--ah-color-surface-card);
		border: 1px solid var(--ah-color-border);
		border-radius: 50%;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	}
	.application-hub-page__related-carousel .swiper-button-next {
		left: auto;
		right: 0;
	}
	.application-hub-page__related-carousel .swiper-button-prev {
		left: auto;
		right: 44px; /* clears .swiper-button-next (36px) + an 8px gap */
	}
	/* Swiper's icon svg defaults to width/height:100% of the button box,
	   filling the whole circle edge-to-edge — shrink it so the chevron
	   reads as an icon inside a button, not the button itself. */
	.application-hub-page__related-carousel .swiper-button-prev svg,
	.application-hub-page__related-carousel .swiper-button-next svg {
		width: 12px;
		height: 12px;
	}
}
.application-hub-page__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ah-space-2);
	margin-top: var(--ah-space-7);
	padding-top: var(--ah-space-5);
	border-top: 1px solid rgba(15, 83, 135, 0.14);
}

.application-hub-page__tag {
	display: flex;
	align-items: center;
	font-size: var(--ah-font-size-sm);
	color: #364153;
	height: 28px;
	padding: 4px 12px;
	border-radius: 999px;
	background: #F3F4F6;
}