/* =========================================================================
   Paxia Webinars & Events — front-end styles
   Brand palette: Navy #0B1929 | Sky #1B7FE8 | Gold #F0A500 | Off-White #F4F8FC
                  Text Mid #3D5470 | Text Light #7A94B0 | Border #D4E3F5
   Fonts intentionally inherit from the theme (Divi global fonts). No font-family set.
   ========================================================================= */

/* ---------- Announcement bar (sitewide, top of body) ---------- */

.paxia-bar {
	background: #0B1929;
	color: #F4F8FC;
	font-size: 14px;
	line-height: 1.3;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.paxia-bar__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

/* v1.4.6: the dev site carries a sitewide Divi Theme Options Custom CSS rule that also
   targets `.paxia-bar__inner` -- selector text confirmed live via document.styleSheets
   enumeration: `.paxia-bar__inner{width:80%;max-width:1184px;margin:0 auto;padding:0;
   box-sizing:border-box}`, baked into EVERY page's et-core-unified-{postID}.min.css cache
   (so it's a sitewide rule, not a one-page leftover). It matches the site's documented
   Divi row-width standard (width:80%/max-width:1184px) almost exactly, suggesting someone
   tried to align the bar's content width with the standard row width at some point -- but
   an explicit `width:80%` beats this file's `max-width:1200px` outright (max-width can't
   overrule a smaller explicit width), and its `padding:0` was silently stripping this file's
   9px/20px padding too. Re-declaring width/padding here under a higher-specificity,
   ID-anchored selector (#paxia-bar has two classes' worth of specificity over the theme
   rule's one) wins on load order AND specificity, without touching the shared Theme
   Options field or resorting to !important.

   v1.4.7: v1.4.6 fixed the collision but still capped at the file's own max-width:1200px --
   correct on a normal desktop, but on a wide/ultrawide screen that still left the bar sitting
   in a fixed 1200px column with large empty margins on both sides, AND meant the item columns
   never got more than ~560px of room regardless of how wide the actual window was -- only
   ~10-25px more than the ~534-552px the content needs, razor-thin enough that a small
   rendering difference (font hinting, sub-pixel rounding) could tip it back to 2 lines. Ryan:
   "I want the event/blog/webinar bar to take up almost the full width ... so this does not
   happen so soon." Dropped the max-width cap entirely -- the bar's content column now scales
   with the actual window width, so the wrap margin only grows as screens get wider, never
   stays fixed. */
#paxia-bar .paxia-bar__inner {
	width: 100%;
	max-width: none;
	padding: 9px 20px;
	margin: 0;
}

/* v1.4.7: items no longer stretch to fill their share of the row (flex:1 1 0) -- on a wide
   bar that left head+foot's real content sitting flush left with a large dead gap of empty
   navy space before the next item. Content now sizes to itself.

   v1.4.8: v1.4.7 pushed the two items to the outer edges (justify-content:space-between),
   which does span full width, but Ryan wanted the opposite feel: "the left side event should
   be right aligned in the left column, and the right side event should be left aligned in the
   right column, so that both will be more towards the middle of the screen instead of out
   towards the edges." Since .paxia-bar__inner's three flex children are exactly
   [item, divider, item], justify-content:center packs all three together at the bar's
   horizontal center -- item 1's right edge and item 2's left edge sit against the divider,
   which is equivalent to "right-align in the left half / left-align in the right half" (both
   halves meet at the same center point). Verified live: item1-to-item2 gap holds at a
   constant 41px (2 × 20px flex gap + 1px divider) regardless of window width, from 1370px up
   through 2600px -- the two items stay together in the middle with symmetric margins growing
   outward, rather than drifting apart toward the edges. */
.paxia-bar__inner--dual {
	justify-content: center;
}

.paxia-bar__inner--dual .paxia-bar__item {
	flex: 0 1 auto;
}

.paxia-bar__inner--single {
	justify-content: center;
}

.paxia-bar__inner--single .paxia-bar__item {
	flex: 0 1 auto;
}

.paxia-bar__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	color: #F4F8FC;
	text-decoration: none;
	min-width: 0;
}

/* v1.4.5: chip+title and meta+cta are now real wrapper elements (.paxia-bar__head /
   .paxia-bar__foot), not four flat flex children. Previously .paxia-bar__item wrapped its
   four children independently, so whichever child ran out of room next dropped to its own
   line -- meta and cta could each land on separate lines depending on that item's own text
   length, with no relationship to the other bar item. Two items with different-length dates
   (e.g. a single-day webinar vs. a multi-day event range) could land on a different number
   of lines from each other at the same viewport width, purely by coincidence of text length
   -- confirmed live: at ~1112-1124px bar width the webinar item held at 2 lines while the
   event item (longer date range) dropped to 3. Grouping into two units means .paxia-bar__item
   now has exactly one wrap point (head / foot), so both items wrap at the same width and
   always agree on line count. */

/* Chip + title stay together as one unit and never split across lines — long titles
   (a blog headline standing in for an empty event slot, say) ellipsis instead of
   wrapping into a second line and shoving the CTA out of place.

   v1.4.6: flex-grow was 1 (`flex:1 1 auto`), which let this element greedily claim the
   ENTIRE item column before the browser even considered whether .paxia-bar__foot would
   fit alongside it -- confirmed live: head rendered at the full 527.5px item-column width
   even though chip+title only needed ~223-233px, leaving .paxia-bar__foot (which only
   needs ~291-309px) no room and forcing it onto its own line. Dropping flex-grow to 0 lets
   head size to its own content; .paxia-bar__title's own overflow/ellipsis rule below still
   protects it from being crushed if space ever does run short. */
.paxia-bar__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 30px;
	flex: 0 1 auto;
}

/* Meta + CTA stay together as the second unit -- they either both fit on line 1 (whole
   item on one line) or both move to line 2 together, never splitting onto separate lines
   of their own. In practice meta+cta together are short enough that they always fit within
   an item's own column width, so this pairing is what keeps both bar items' line counts
   in sync with each other. */
.paxia-bar__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	min-width: 0;
}

.paxia-bar__divider {
	flex: 0 0 auto;
	width: 1px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.14);
}

.paxia-bar__chip {
	display: inline-block;
	background: #F0A500;
	color: #0B1929;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 4px;
	flex: 0 0 auto;
}

.paxia-bar__title {
	font-weight: 700;
	color: #FFFFFF;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.paxia-bar__meta {
	color: #7A94B0;
	font-size: 13px;
}

.paxia-bar__cta {
	color: #1B7FE8;
	font-weight: 700;
	white-space: nowrap;
}

.paxia-bar__item:hover .paxia-bar__cta {
	text-decoration: underline;
}

/* ---------- "Latest from Paxia" strip ---------- */

.paxia-strip {
	max-width: 1140px;
	margin: 0 auto;
	padding: 8px 0;
}

.paxia-strip__kicker {
	color: #7A94B0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 54px;
}

.paxia-strip__grid {
	/* v1.5.7: auto-fill, not auto-fit. auto-fit collapses the empty tracks and lets the
	   remaining cards stretch to fill the row - which is exactly what flex-grow was doing
	   when a third card orphaned itself between ~850 and ~1030px and its 150px band became
	   a 5.45:1 letterbox. auto-fill keeps the empty track, so the orphan stays a column
	   wide. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 22px;
}

/* 1.5.41 — subscribe line under the strip's cards (Ryan, option B). Marker --pxstripsub 1. */
:root { --pxstripsub: 1; }
.paxia-strip__sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 22px; margin: 40px 0 0; text-align: center; }
.paxia-strip__subtxt { font-size: 16px; font-weight: 600; line-height: 1.5; color: #0B1929; text-wrap: balance; }
.paxia-strip a.paxia-strip__subbtn { display: inline-flex; align-items: center; gap: 8px; border: 2px solid #1B7FE8; border-radius: 8px; padding: 13px 28px; background: transparent; color: #1B7FE8 !important; text-decoration: none !important; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
.paxia-strip a.paxia-strip__subbtn:hover { background: #1B7FE8; color: #FFFFFF !important; }
.paxia-strip a.paxia-strip__subbtn:focus-visible { outline: 2px solid #F0A500; outline-offset: 3px; }

.paxia-card {
	/* v1.5.7: flex:1 1 280px removed - the grid sizes the track now, and flex-grow here is
	   what stretched an orphaned card to a full row. The basis lives in the grid's
	   minmax(280px, 1fr). */
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #D4E3F5;
	border-top: 4px solid #1B7FE8;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	min-height: 200px;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.paxia-card:hover {
	box-shadow: 0 10px 28px rgba(11, 25, 41, 0.10);
	transform: translateY(-2px);
}

/* Card media banner */
.paxia-card__media {
	display: block;
	width: 100%;
	/* v1.5.7: an aspect-ratio, NOT a fixed height. With height:150px and a fluid width the
	   window was a different shape at every viewport - measured 2.02:1 to 5.45:1 on dev -
	   so `cover` discarded a different part of the picture at each one. Ratio is the
	   1199x550 canvas the mastheads are authored at. */
	aspect-ratio: 1199 / 550;
	height: auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex: 0 0 auto;
}

.paxia-card__media--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.paxia-card__media-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.8;
}

.paxia-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/* v1.5.21: a NEUTRAL separator, not the accent. The card's 4px accent cycles by position
	   (php:707) while the library card's cycles by topic term (php:973) -- so the accent below
	   the image would assert a color code the strip does not have. #D4E3F5 is the card's own
	   border color: it divides the image from the chip without signaling anything. Earns its
	   keep on artwork with a light edge (the WAF logo plate), harmless on photographic edges. */
	border-top: 1px solid #D4E3F5;
	padding: 20px 22px;
}

.paxia-card__chip {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.paxia-card__title {
	color: #0B1929;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 8px;
}

.paxia-card__meta {
	color: #7A94B0;
	font-size: 13px;
	margin-bottom: 8px;
}

.paxia-card__blurb {
	color: #3D5470;
	font-size: 14.5px;
	line-height: 1.5;
	flex: 1 1 auto;
	margin-bottom: 14px;
}

.paxia-card__cta {
	font-size: 14px;
	font-weight: 700;
	margin-top: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 782px) {
	/* ID-anchored to match (not just tie-break against) the desktop #paxia-bar
	   .paxia-bar__inner override above -- otherwise that higher-specificity desktop rule's
	   padding:9px 20px would beat this media query's padding:8px 16px on mobile, regardless
	   of source order, since specificity always wins over cascade order. */
	#paxia-bar .paxia-bar__inner {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 16px;
		gap: 8px;
		/* v1.4.7: the desktop space-between/center justify-content is a horizontal-axis rule
		   meant for the single-row layout -- reset here since flex-direction:column makes
		   justify-content control vertical spacing instead, which isn't what either rule
		   intends once the bar is stacked. */
		justify-content: flex-start;
	}
	.paxia-bar__inner--dual .paxia-bar__item,
	.paxia-bar__inner--single .paxia-bar__item {
		flex: 1 1 auto;
	}
	.paxia-bar__divider {
		/* Stacked layout: the 1px vertical rule becomes a full-width horizontal one. */
		width: 100%;
		height: 1px;
		align-self: auto;
	}
	.paxia-bar__meta {
		display: none; /* keep each stacked row to chip + title + CTA */
	}
	.paxia-strip__grid {
		/* v1.5.7: flex-direction is inert on a grid. One column below 782px, as before. */
		grid-template-columns: 1fr;
	}
	.paxia-card {
		min-height: 0;
	}
}

/* Article body: match the text-module list spacing the hand-built articles use. */
.et-l--body .et_pb_post_content ul,
.et-l--body .et_pb_post_content ol {
	padding-bottom: 1em;
}

/* ---------------------------------------------------------------------------
   Article body typography for imported posts - those whose content is plain
   HTML with no inline styling. Scoped to the paxia-plain-article body class so
   it can never reach the 13 rebuilt articles, which style themselves inline.
   Values are lifted from those articles - see article_body_css.py.
   --------------------------------------------------------------------------- */

/* the article measure */
body.paxia-plain-article .et_pb_post_content p,
body.paxia-plain-article .et_pb_post_content h2,
body.paxia-plain-article .et_pb_post_content h3,
body.paxia-plain-article .et_pb_post_content ul,
body.paxia-plain-article .et_pb_post_content ol,
body.paxia-plain-article .et_pb_post_content blockquote,
body.paxia-plain-article .et_pb_post_content figure {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

body.paxia-plain-article .et_pb_post_content p {
	font-size: 17px;
	line-height: 1.78;
	color: #3D5470;
	margin-top: 0;
	margin-bottom: 20px;
}

body.paxia-plain-article .et_pb_post_content h2 {
	color: #0B1929;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.25;
	margin-top: 44px;
	margin-bottom: 16px;
}

body.paxia-plain-article .et_pb_post_content h3 {
	color: #0B1929;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 34px;
	margin-bottom: 14px;
}

body.paxia-plain-article .et_pb_post_content ul,
body.paxia-plain-article .et_pb_post_content ol {
	font-size: 17px;
	line-height: 1.7;
	color: #3D5470;
	margin-top: 0;
	margin-bottom: 22px;
	padding-left: 22px;
}

body.paxia-plain-article .et_pb_post_content li {
	font-size: 17px;
	line-height: 1.78;
	color: #3D5470;
	margin-bottom: 12px;
}

/* nested lists: the host forces list-style:disc at every level, so level 2 is
   put back to the browser's own convention and indented enough to read */
body.paxia-plain-article .et_pb_post_content li > ul {
	list-style-type: circle !important;
}

body.paxia-plain-article .et_pb_post_content li > ol {
	list-style-type: lower-alpha;
}

body.paxia-plain-article .et_pb_post_content li > ul,
body.paxia-plain-article .et_pb_post_content li > ol {
	margin-top: 12px;
	margin-bottom: 0;
	padding-left: 26px;
	padding-bottom: 0;
}

body.paxia-plain-article .et_pb_post_content li > ul > li:last-child,
body.paxia-plain-article .et_pb_post_content li > ol > li:last-child {
	margin-bottom: 0;
}

body.paxia-plain-article .et_pb_post_content a {
	color: #1B7FE8;
	text-decoration: none;
	font-weight: 600;
}

/* block images: the <figure> is what positions them, not the <img> */
body.paxia-plain-article .et_pb_post_content figure {
	float: none;
	width: 100%;
	margin-top: 26px;
	margin-bottom: 26px;
}

body.paxia-plain-article .et_pb_post_content img {
	display: block;
	max-width: 760px;
	width: 100%;
	height: auto;
	margin: 26px auto;
}

body.paxia-plain-article .et_pb_post_content figcaption {
	font-size: 15px;
	line-height: 1.7;
	color: #7A94B0;
	margin-top: 10px;
	text-align: center;
}

body.paxia-plain-article .et_pb_post_content blockquote {
	border-left: 4px solid #1B7FE8;
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 8px 0 8px 24px;
	font-size: 19px;
	line-height: 1.6;
	color: #0B1929;
	font-style: italic;
}

/* =========================================================================
   The library — [paxia_library] and [paxia_featured_story], v1.5.9
   Card geometry is the live /blog/ grid's. The one change is the image band:
   aspect-ratio, not a fixed height, so the crop is the same shape at every
   width. Same fix as the events strip in 1.5.7.
   ====================================================================== */

.pxlib-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.pxlib-chip {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid #D4E3F5;
	background: #FFFFFF;
	color: #3D5470;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .16s ease, color .16s ease;
}

/* The "All" chip only — the filter chips carry their own color inline. */
.pxlib-chip:hover { border-color: #1B7FE8; color: #0B1929; }
.pxlib-chip--on { background: #0B1929; border-color: #0B1929; color: #FFFFFF; }

/* v1.5.15, treatment C: the outline is the swatch, so it has to be thick enough to read and
   it must not be overridden on hover — a hover rule that sets border-color would wipe out the
   filter color, which is the whole point of the chip. Thicken with an inset ring in the
   chip's OWN color instead, which works for every filter without naming one. */
.pxlib-chip--c { border-width: 1.5px; }
.pxlib-chip--c:hover { border-color: currentColor; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pxlib-chip--c.pxlib-chip--on { color: #FFFFFF; }
.pxlib-chip--c.pxlib-chip--on:hover { box-shadow: none; filter: brightness(0.94); }

.pxlib-chip__n { opacity: .62; margin-left: 8px; font-weight: 600; }

/* v1.5.14: the gap above the grid belongs to the GRID, not to the count line. It used to
   ride on .pxlib-count's bottom margin, so when 1.5.12 stopped rendering that line on the
   unfiltered view the pills ended up sitting directly on row 1. */
.pxlib-count { font-size: 13px; color: #7A94B0; margin: 18px 0 0; }

.pxlib-grid {
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	align-items: stretch;
}

.pxlib-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #D4E3F5;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .18s ease, transform .18s ease;
}

.pxlib-card:hover { box-shadow: 0 14px 32px rgba(11,25,41,.12); transform: translateY(-2px); }

.pxlib-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 1199 / 550;
	height: auto;
	object-fit: cover;
	flex: 0 0 auto;
}

.pxlib-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	border-top: 4px solid #3D5470;
	padding: 22px;
}

.pxlib-card__chip {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.pxlib-card__title {
	font-size: 17px;
	font-weight: 700;
	color: #0B1929;
	line-height: 1.3;
	margin-bottom: 10px;
}

.pxlib-card__blurb { font-size: 13px; color: #3D5470; line-height: 1.6; flex: 1 1 auto; }

.pxlib-card__cta { margin-top: 16px; font-size: 13px; font-weight: 600; color: #1B7FE8; }

.pxlib-pager {
	display: flex;
	gap: 9px;
	justify-content: center;
	align-items: center;
	margin-top: 48px;
}

.pxlib-page {
	display: inline-block;
	min-width: 40px;
	text-align: center;
	padding: 9px 11px;
	border-radius: 9px;
	border: 1px solid #D4E3F5;
	background: #FFFFFF;
	color: #3D5470;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.pxlib-page:hover { border-color: #1B7FE8; }
.pxlib-page--on, .pxlib-page--on:hover { background: #0B1929; border-color: #0B1929; color: #FFFFFF; }
.pxlib-next { margin-left: 8px; font-size: 14px; font-weight: 600; color: #1B7FE8; text-decoration: none; }
.pxlib-prev { margin-right: 8px; font-size: 14px; font-weight: 600; color: #1B7FE8; text-decoration: none; }

/* v1.5.19: an end that has nowhere to go keeps its footprint and stops reading as a control.
   Dimming rather than hiding is what keeps the row one width — see paxia_library_end_control().
   #7A94B0 is the palette's secondary text, so this is a deliberate inactive tone rather than
   an opacity guess on top of the link blue. */
.pxlib-prev.is-off, .pxlib-next.is-off { color: #7A94B0; cursor: default; }
.pxlib-prev.is-off:hover, .pxlib-next.is-off:hover { color: #7A94B0; }

/* --- the featured story ------------------------------------------------
   v1.5.11: every value below is lifted from the inline styles on the live
   /blog/ featured block (Paxia_Blog_Page-v10.json), so swapping the hand-built
   markup for the shortcode changes nothing on screen. It is a gold-tinted card
   with the image full width on top — not a two-column block, which is what
   1.5.9 shipped by mistake.
   --------------------------------------------------------------------- */

.pxfeat {
	border: 1px solid rgba(240, 165, 0, 0.35);
	border-radius: 16px;
	overflow: hidden;
	background: rgba(240, 165, 0, 0.05);
}

.pxfeat__media { display: block; }

.pxfeat__media img {
	width: 100%;
	height: auto;
	display: block;
	border-bottom: 1px solid rgba(240, 165, 0, 0.35);
}

.pxfeat__body { padding: 34px; }

.pxfeat__kick {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #F0A500;
	margin-bottom: 14px;
}

.pxfeat__topics { font-size: 13px; font-weight: 600; color: #7A94B0; margin-bottom: 12px; }

.pxfeat__title {
	color: #0B1929;
	font-weight: 800;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.2;
	margin: 0 0 14px;
}

/* the headline and the picture link to the story. The hand-built block left both
   inert, so clicking the picture did nothing; inherit removes any visible change. */
.pxfeat__title a { color: inherit; text-decoration: none; }

.pxfeat__blurb { font-size: 16px; color: #3D5470; line-height: 1.7; margin: 0 0 22px; }

.pxfeat__cta {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	color: #1B7FE8;
	text-decoration: none;
}

/* Mobile last, per the house rule: media queries carry no specificity, so an identical
   selector further down the file would beat them regardless of source order. */
@media (max-width: 860px) {
	.pxfeat__body { padding: 24px; }
}

/* v1.5.12: the featured story's section belongs to the page, not the plugin, so on a filtered
   view it would still paint an empty off-white band. See paxia_library_body_class(). */
body.paxia-lib-filtered .pxblog-featured { display: none; }

/* v1.5.14: the filter links end #stories so a filter lands you back at the chip row instead
   of the top of the page. The global header is sticky and about 99px tall, so the anchor
   needs to clear it or the chips land underneath it. */
#stories { scroll-margin-top: 120px; }

/* ======================================================================
   v1.5.17 — the library filters in the browser
   ----------------------------------------------------------------------
   Two mutually exclusive scopes, so they can never compete on specificity:

     .pxlib-js            the controller is running and owns visibility
                          through one class per card
     .pxlib:not(.pxlib-js) no JavaScript: the topic filter is pure CSS off
                          the container's data-filter, and the pager — which
                          would need a script — is not shown at all

   The first attempt mixed them and lost: a page rule at (0,5,0) outranked
   the hide-other-topics rule at (0,4,0), so a filtered view showed 34 cards
   where 6 were wanted.
   ====================================================================== */

.pxlib-js .pxlib-card { display: none; }
.pxlib-js .pxlib-card.pxlib-card--on { display: flex; }

/* Without the controller there is no paging, so every filed item shows and the pager would
   be a row of buttons that reload the page to no visible effect. */
.pxlib:not(.pxlib-js) .pxlib-pager { display: none; }
.pxlib:not(.pxlib-js)[data-filter=""] .pxlib-card[data-feat] { display: none; }

.pxlib-page[hidden], .pxlib-next[hidden] { display: none; }

/* v1.5.18: the All view carries no count line. Stated explicitly rather than left to the UA
   sheet, because .pxlib-count is a div Divi's reset also has opinions about. The gap above
   the grid is .pxlib-grid's own margin-top, so hiding this does not move the chips onto
   row 1 — which is what went wrong in 1.5.14. */
.pxlib-count[hidden] { display: none; }

/* Where the fragment lands, for a reader without JavaScript — the controller measures the
   header itself and corrects this when it runs.

   Ryan's note: "it reloads at the very top of the story cards, with the filters not visible.
   probably keep the 'Latest Stories' heading visible too." So the target is the heading, not
   the chip row: the chips say what you can pick, the heading says what you are looking at.

   272px is the largest value the site needs, measured at five widths as
   (heading -> chips) + sticky header + 24px of air:

     1440px  header 99  heading->chips 149  ->  272
     1000px  header 62  heading->chips 146  ->  232
      780px  header 62  heading->chips 166  ->  252
      600px  header 62  heading->chips 164  ->  250
      420px  header 62  heading->chips 164  ->  250

   One number rather than a media query: at the narrow widths it lands the heading ~20px
   lower than strictly needed, which costs nothing, and a second number would be a second
   thing to keep in step with the header. */
#stories { scroll-margin-top: 272px; }


/* -------------------------------------------------------------------------
 * HubSpot meetings modal (v1.5.24)
 * ---------------------------------------------------------------------- */

/* z-index measured, not guessed: the live page carries two fixed HubSpot chat containers at
   2000000000. A booking window the chat widget can cover is broken, so this sits one above the
   highest thing actually on the page. */
.pxmeet {
	position: fixed;
	inset: 0;
	z-index: 2000000001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* [hidden] is 0,2,0 against the rule above at 0,1,0, so it wins without !important. */
.pxmeet[hidden] { display: none; }

.pxmeet__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 25, 41, 0.74);
}

.pxmeet__panel {
	position: relative;
	background: #FFFFFF;
	border-radius: 16px;
	border-top: 4px solid #3D5470;
	width: min(760px, 94vw);
	max-height: 88vh;
	overflow: auto;
	box-shadow: 0 30px 80px rgba(11, 25, 41, 0.45);
}

.pxmeet__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #0B1929;
	color: #FFFFFF;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(11, 25, 41, 0.35);
}

.pxmeet__close:hover { background: #1B7FE8; }
.pxmeet__close:focus-visible { outline: 3px solid #F0A500; outline-offset: 2px; }

/* The booking UI needs real height to show a month and its time slots side by side; below that it
   stacks and scrolls inside the panel. clamp() is safe here -- this is a plugin stylesheet, not
   page custom CSS, so nothing strips it. */
.pxmeet__frame iframe {
	display: block;
	width: 100%;
	height: clamp(520px, 78vh, 760px);
	border: 0;
	border-radius: 0 0 12px 12px;
}

@media (max-width: 600px) {
	.pxmeet { padding: 12px; }
	.pxmeet__panel { width: 100%; max-height: 92vh; }
	.pxmeet__frame iframe { height: clamp(460px, 84vh, 720px); }
}

/* ======================================================================
   v1.5.25 — [paxia_webinars]: live sessions, then replays
   ====================================================================== */

.pxwb-live {
	display: flex;
	align-items: center;
	gap: 28px;
	background: #0B1929;
	border-top: 4px solid #F0A500;
	border-radius: 12px;
	padding: 26px 30px;
	box-sizing: border-box;
}

.pxwb-live + .pxwb-live { margin-top: 16px; }

.pxwb-live__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	min-width: 64px;
	padding-right: 28px;
	border-right: 1px solid rgba(255,255,255,.14);
	line-height: 1;
}

.pxwb-live__mon {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #F0A500;
}

.pxwb-live__day {
	font-size: 34px;
	font-weight: 800;
	color: #FFFFFF;
	margin: 6px 0 5px;
	font-variant-numeric: tabular-nums;
}

.pxwb-live__yr { font-size: 12px; font-weight: 600; color: #DCE8F7; }

.pxwb-live__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.pxwb-live__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #F0A500;
	margin-bottom: 8px;
}

.pxwb-live__title { font-size: 20px; font-weight: 700; color: #FFFFFF; line-height: 1.3; }

.pxwb-live__blurb { font-size: 15px; color: #DCE8F7; line-height: 1.6; margin-top: 6px; }

.pxwb-live__cta {
	flex: 0 0 auto;
	display: inline-block;
	background: #1B7FE8;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 15px 24px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.pxwb-live__cta:hover {
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(27,127,232,.35);
	filter: brightness(1.05);
}

.pxwb-live__cta:focus-visible { outline: 2px solid #F0A500; outline-offset: 3px; }

.pxwb-sub {
	margin: 40px 0 18px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #3D5470;
	text-align: center;
}

/* Fewer than three replays sit centered at their true width rather than stretching. */
.pxwb-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.pxwb-grid > .pxlib-card { flex: 0 1 calc((100% - 60px) / 3); min-width: 0; }

.pxwb-all { margin-top: 34px; text-align: center; }

.pxwb-all a { font-size: 15px; font-weight: 700; color: #1B7FE8; text-decoration: none; }

.pxwb-all a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.pxwb-all a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ======================================================================
   v1.5.27 — link standard (PXLINKS-V2), on every page

   Roles:
     A  a standalone link ("Learn more →") underlines on hover and keyboard focus
     B  a link inside running text is underlined at rest and thickens on hover
     C  a whole-card link never underlines; its action line does while the card is hovered
     D  buttons, chips, pagers and navigation never underline

   !important is required: anchors built in the page builder carry
   text-decoration:none in their own style attribute. Scoped to page and article
   bodies only, so the global header and footer are untouched. One short rule
   per selector.
   ====================================================================== */

:root { --pxlinks: 2; --pxlinks-plugin: 1; }

:is(.et-l--post,.et-l--body) a:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
:is(.et-l--post,.et-l--body) a:focus-visible { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }

/* Role B: links in running text. Page-builder paragraphs that set their own line-height,
   and every paragraph or list item in an article body. */
:is(.et-l--post,.et-l--body) .et_pb_text p[style*="line-height"]>a:not([style*="position:absolute"]) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
:is(.et-l--post,.et-l--body) .et_pb_text li[style*="line-height"]>a:not([style*="position:absolute"]) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
.et-l--body .et_pb_post_content p>a:not([style*="padding:"]):not([style*="background"]) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
.et-l--body .et_pb_post_content li>a:not([style*="padding:"]):not([style*="background"]) { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
:is(.et-l--post,.et-l--body) a.pxlink { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; }
:is(.et-l--post,.et-l--body) .et_pb_text p[style*="line-height"]>a:not([style*="position:absolute"]):hover { text-decoration-thickness: 2px !important; }
.et-l--body .et_pb_post_content p>a:not([style*="padding:"]):not([style*="background"]):hover { text-decoration-thickness: 2px !important; }
.et-l--body .et_pb_post_content li>a:not([style*="padding:"]):not([style*="background"]):hover { text-decoration-thickness: 2px !important; }
:is(.et-l--post,.et-l--body) a.pxlink:hover { text-decoration-thickness: 2px !important; }

/* Roles C and D: cards, buttons, chips, pagers. */
:is(.et-l--post,.et-l--body) a.et_pb_button:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.et_pb_button:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxs-cta:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxs-cta:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxs-btn:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxs-btn:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxsvch-btn:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxsvch-btn:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxcta-btn:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxcta-btn:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxrh-btn:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxrh-btn:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.cta:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.cta:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxbpcta:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxbpcta:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxnav-cta:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxnav-cta:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.paxia-card:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.paxia-card:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-card:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-card:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-chip:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-chip:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-page:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-page:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-prev:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-prev:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-next:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxlib-next:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxwb-live__cta:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxwb-live__cta:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxuc-c:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxuc-c:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxbadge-li:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a.pxbadge-li:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="padding:"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="padding:"]:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="background"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="background"]:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="position:absolute"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a[style*="position:absolute"]:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) .pxfb a:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) .pxfb a:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) .mejs-container a:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) .mejs-container a:focus-visible { text-decoration: none !important; }

/* Padded text links (1.5.29). The exclusion above reads inline padding as a button tell, because that
   is how this site's buttons are built: of the 92 padded links on dev, 91 also carry a background, a
   border or a radius. The one that carries none of those, and no class of its own, is a text link —
   Why Paxia's "See How Paxia Compares" — so it takes the standard hover and focus underline again.
   Switched on first, then withdrawn from each button tell in turn, one tell per rule. A padded link
   that carries a class of its own is left to its class rule above, so badges and chips are untouched. */
:root { --pxlinks-padded: 1; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"]:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"]:focus-visible { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="background"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="background"]:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="border"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="border"]:focus-visible { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="position:absolute"]:hover { text-decoration: none !important; }
:is(.et-l--post,.et-l--body) a:not([class])[style*="padding:"][style*="position:absolute"]:focus-visible { text-decoration: none !important; }

/* Role C: the card lifts, and its action line underlines. */
.paxia-card:hover .paxia-card__cta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.paxia-card:focus-visible .paxia-card__cta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pxlib-card:hover .pxlib-card__cta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pxlib-card:focus-visible .pxlib-card__cta { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Whole-card links (1.5.28): a card that lifts on hover and holds exactly one text link becomes
   clickable anywhere. The link stays the one focusable, announced element; its ::after stretches
   over the card. The plugin's footer script marks the cards (.pxclick) and their link (.pxclick-go). */
:root { --pxclick: 1; }
:is(.et-l--post,.et-l--body) .pxclick-rel { position: relative; }
:is(.et-l--post,.et-l--body) .pxclick a.pxclick-go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
:is(.et-l--post,.et-l--body) .pxclick:hover a.pxclick-go { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
:is(.et-l--post,.et-l--body) .pxclick a.pxclick-go:focus-visible { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; outline: none; }
:is(.et-l--post,.et-l--body) .pxclick:has(a.pxclick-go:focus-visible) { outline: 2px solid #1B7FE8; outline-offset: 4px; }

/* Buttons and boxes react to the pointer (1.5.30). The site already had one hover treatment, on the
   pxs-cta class: lift 2px, a glow in the button's own color, 5% brighter, over 0.2s. Twenty boxes
   built as class-less anchors with inline styles never got it, so they sat dead while everything
   around them moved. These rules attach the same treatment by the shape of the inline style, the way
   the P0 card hovers are keyed, in the four forms that exist on the site: a Sky Blue button, a Gold
   button, a ghost button on dark, and a bordered white card with a colored left edge. The ghost button
   also takes a faint wash, because its glow is navy on navy and the border alone is too quiet
   (Ryan chose this over border-only on September 24); the wash needs !important because the button
   carries background:transparent in its own style attribute. The glow takes
   the button's own color — gold for the gold button — because a blue glow under a gold button reads
   as a mistake. Cards get the quieter card shadow, not the button glow. */
:root { --pxhover: 1; }
:is(.et-l--post,.et-l--body) a[style*="background:#1B7FE8"] { transition: transform .2s, box-shadow .2s, filter .2s; }
:is(.et-l--post,.et-l--body) a[style*="background:#1B7FE8"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(27,127,232,.35); filter: brightness(1.05); }
:is(.et-l--post,.et-l--body) a[style*="background:#F0A500"] { transition: transform .2s, box-shadow .2s, filter .2s; }
:is(.et-l--post,.et-l--body) a[style*="background:#F0A500"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(240,165,0,.38); filter: brightness(1.05); }
:is(.et-l--post,.et-l--body) a[style*="border:1px solid rgba(255,255,255,0.40)"] { transition: transform .2s, box-shadow .2s, border-color .2s, background-color .2s; }
:is(.et-l--post,.et-l--body) a[style*="border:1px solid rgba(255,255,255,0.40)"]:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,25,41,.45); border-color: rgba(255,255,255,.75); background-color: rgba(255,255,255,.10) !important; }
:is(.et-l--post,.et-l--body) a[style*="border:1px solid #D4E3F5"][style*="border-left:4px solid"] { transition: transform .2s, box-shadow .2s; }
:is(.et-l--post,.et-l--body) a[style*="border:1px solid #D4E3F5"][style*="border-left:4px solid"]:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11,25,41,.10); }

/* The /blog/ feature block's action line, on card hover. The two card rules above it cover
   .paxia-card and .pxlib-card; the feature was missed. It holds three links (image, title, action
   line), so 1.5.28's whole-card script skips it — this is what gives the reader the same signal. */
.pxfeat:hover .pxfeat__cta { text-decoration: underline 1px; text-underline-offset: 4px; }

/* The library pager. The current page and a disabled arrow stay inert; a live arrow underlines. */
:is(.et-l--post,.et-l--body) a.pxlib-prev:not(.is-off):hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }
:is(.et-l--post,.et-l--body) a.pxlib-next:not(.is-off):hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; }

/* Mobile last: media queries carry no specificity.
   The row is 80% of the viewport, capped at 1184px. Below 1125px a third of it is under 280px,
   the smallest card the /blog/ grid allows, so three columns become two; below 737px half of it
   is, so two become one. */
@media (max-width: 1124px) {
	.pxwb-grid > .pxlib-card { flex-basis: calc((100% - 30px) / 2); }
}

@media (max-width: 736px) {
	.pxwb-live {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		padding: 24px 22px;
	}
	.pxwb-live__date {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		min-width: 0;
		padding: 0 0 16px;
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,.14);
	}
	.pxwb-live__day { font-size: 26px; margin: 0; }
	.pxwb-live__cta { text-align: center; }
	.pxwb-grid > .pxlib-card { flex-basis: 100%; }
}