/* ==========================================================================
   Capital Advisors Group — landing page patterns
   Colors per "Wireframe Notes.docx":
     navy #264264 · bright blue #3998F2 · sky #B2D3F2 · pale band #E4EDF5
     body text #454545 · fills #F7F7F7/#F5F5F5 · gray #D9D9D9
     outlines #D2D2D2 · lines/dots #B3B3B3 · highlight #3F5C7F
   ========================================================================== */

/* Element selectors match specificity (0,1,1) of the existing theme's
   .single-landing-page h1 rule; this file loads after style.css so wins on equal specificity. */
.cag-page,
.cag-page *,
.cag-page h1, .cag-page h2, .cag-page h3, .cag-page h4, .cag-page h5, .cag-page h6,
.cag-page p, .cag-page li, .cag-page a, .cag-page button {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.cag-page {
	--cag-navy: #264264;
	--cag-blue: #3998F2;
	--cag-sky: #B2D3F2;
	--cag-band: #E4EDF5;
	--cag-text: #454545;
	--cag-fill: #F7F7F7;
	--cag-fill-alt: #F5F5F5;
	--cag-gray: #D9D9D9;
	--cag-outline: #D2D2D2;
	--cag-line: #B3B3B3;
	--cag-highlight: #3F5C7F;
	/* Shared right-arrow glyph. Applied as a mask rather than a background so
	   each use paints it with currentColor — dark grey on the related rows,
	   navy beside Up Next.

	   The path sits low in its own square: it spans y 18-46, whose centre is 32
	   against the artboard's 28. Left alone that lands the glyph ~7% of its box
	   below wherever it's centred, which reads as the arrow sagging under the
	   text beside it. The viewBox origin is dropped 4 units to re-centre the
	   glyph on its box; the path is untouched. */
	--cag-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 56 56'%3E%3Cpath d='M14 30.5H36.5L26.5 20.5L29 18L43 32L29 46L26.5 43.5L36.5 33.5H14Z'/%3E%3C/svg%3E");
	/* Same glyph with the fill baked in, for the one place that needs it as a
	   background image rather than a mask: the navy disc paints the element's
	   background-color, so the arrow has to ride on top as its own layer. */
	--cag-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 4 56 56'%3E%3Cpath fill='%23ffffff' d='M14 30.5H36.5L26.5 20.5L29 18L43 32L29 46L26.5 43.5L36.5 33.5H14Z'/%3E%3C/svg%3E");
	color: var(--cag-text);
	font-size: 16px;
	line-height: 1.4;
}

/* If the outer group is turned into a Stack in the editor (as on the
   Cash Investment Fundamentals page), its sections become flex items, which
   won't shrink below their content's minimum width. The journey carousel's
   seven 150px cards then make its section ~1250px wide, cutting off the right
   side of the page on phones. Let the sections shrink to the screen. */
.cag-page.is-layout-flex > * {
	min-width: 0;
	max-width: 100%;
}

.cag-page .cag-wrap {
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.cag-page h1,
.cag-page h2,
.cag-page h3,
.cag-page h4 {
	color: var(--cag-navy);
	line-height: 1.2;
	margin-top: 0;
}

.cag-page img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Shared: eyebrow, tags, buttons
   -------------------------------------------------------------------------- */

.cag-eyebrow {
	color: var(--cag-navy);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.cag-tag {
	display: inline-block;
	border: 1px solid var(--cag-line);
	border-radius: 6px;
	color: var(--cag-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 14px;
	background: #fff;
}

a.cag-btn,
.cag-page a.cag-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--cag-navy);
	color: #fff;
	border: 1px solid var(--cag-navy);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 22px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

a.cag-btn:hover,
.cag-page a.cag-btn:hover {
	background: #1b3049;
	color: #fff;
}

.cag-btn .link-content .cag-btn__arrow {
	display: inline-block;
	width: 20px;
	height: 20px;
	font-size: 0;
	color: transparent;
	background-color: #fff;
	background-image: url(../img/arrow-blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	border-radius: 50%;
	vertical-align: middle;
}

a.cag-btn--white,
.cag-page a.cag-btn--white {
	background: #fff;
	border-color: #fff;
	color: var(--cag-navy);
}

a.cag-btn--white:hover,
.cag-page a.cag-btn--white:hover {
	background: var(--cag-band);
	color: var(--cag-navy);
}

a.cag-btn--outline-blue,
.cag-page a.cag-btn--outline-blue {
	display: inline-block;
	background: transparent;
	border: 1.5px solid var(--cag-blue);
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0 8px;
}

a.cag-btn--outline-blue:hover,
.cag-page a.cag-btn--outline-blue:hover {
	background: rgba(57, 152, 242, 0.15);
	color: #fff;
}

/* Outline button with a leading PDF icon: icon and label sit on one line,
   centred against each other. !important because the theme forces
   display/flex-direction on links inside .cag-page. */
a.cag-btn--pdf,
.cag-page a.cag-btn--pdf {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px;
}

/* Same .link-content wrapper as the download rows: without this the icon sits
   above the label instead of beside it. */
a.cag-btn--pdf .link-content,
.cag-page a.cag-btn--pdf .link-content {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
}

a.cag-btn--pdf img,
.cag-page a.cag-btn--pdf img {
	flex: 0 0 auto;
	display: block;
	width: auto;
	height: 22px;
}

.cag-breadcrumb {
	font-size: 12px;
	color: var(--cag-text);
	margin: 14px 0;
}

.cag-breadcrumb a {
	color: var(--cag-text);
	text-decoration: none;
}

.cag-breadcrumb a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Page 1 — hero
   -------------------------------------------------------------------------- */

.cag-hero {
	padding: 40px 0 48px;
}

.cag-hero .cag-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.cag-hero h1 {
	font-size: 40px;
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 22px;
}

.cag-hero img {
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Page 1 — journey carousel
   -------------------------------------------------------------------------- */

.cag-journey {
	background: var(--cag-band);
	padding: 44px 0 52px;
}

.cag-journey h2 {
	text-align: center;
	font-size: 30px;
	margin-bottom: 30px;
}

.cag-journey__row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cag-journey__arrow {
	flex: 0 0 auto;
	background: none;
	border: none;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	padding: 0;
	width: 40px;
	height: 40px;
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cag-journey__arrow[data-cag-prev] {
	transform: scaleX(-1);
}

.cag-journey__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.cag-journey__row {
	min-width: 0;
}

.cag-journey__viewport {
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
}

.cag-journey__track {
	display: flex;
	gap: 16px;
	position: relative;
	transition: transform 0.3s ease;
}

/* dashed connector line running behind the cards, visible in the gaps (per mockup) */
.cag-journey__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	border-top: 2px solid var(--cag-navy);
}

.cag-journey__card {
	position: relative;
	z-index: 1;
	flex: 0 0 calc(20% - 12.8px);
	min-width: 150px;
	min-height: 140px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1.5px solid var(--cag-navy);
	border-radius: 6px;
	padding: 12px 12px 16px;
	text-align: center;
	cursor: pointer;
	font-family: inherit;
}

/* Overrides Kadence's button:hover background (var(--global-palette2)).
   Kept above .is-active so the active card stays navy on hover. */
.cag-journey__card:hover {
	background: #cbd5e0;
}

.cag-journey__card .cag-journey__part {
	display: block;
	order: 1;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--cag-navy);
	text-align: left;
	margin-bottom: 8px;
}

.cag-journey__card .cag-journey__name {
	display: block;
	order: 2;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cag-text);
	margin: auto 0;
}

.cag-journey__card .cag-journey__line {
	display: block;
	order: 3;
	width: 60px;
	height: 2px;
	background: var(--cag-blue);
	margin: 10px auto 0;
}

.cag-journey__card.is-active {
	background: var(--cag-navy);
	border-color: var(--cag-navy);
}

.cag-journey__card.is-active .cag-journey__part {
	color: var(--cag-sky);
}

.cag-journey__card.is-active .cag-journey__line {
	background: #fff;
}

.cag-journey__card.is-active .cag-journey__name {
	color: #fff;
}

.cag-journey__detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	max-width: 860px;
	margin: 30px auto 0;
}

.cag-journey__topic {
	background: #fff;
	border: 1px solid var(--cag-outline);
	border-radius: 6px;
	padding: 18px 24px;
	text-align: left;
}

.cag-journey__topic-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.cag-journey__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--cag-navy);
	border-radius: 50%;
	color: var(--cag-navy);
	font-weight: 800;
	font-size: 15px;
	flex: 0 0 auto;
}

.cag-journey__topic-head h3 {
	font-size: 17px;
	margin: 0;
}

/* Kadence's `.single-content h3` margins load after this file and outrank the
   rule above, dropping the title below the number badge's centreline. Lock
   both items so they centre on each other. */
.cag-page .cag-journey__topic-head h3,
.cag-page .cag-journey__topic-head .cag-journey__num {
	margin: 0 !important;
	padding: 0 !important;
	align-self: center;
}

.cag-page .cag-journey__topic-head h3 {
	line-height: 1.2 !important;
}

.cag-page .cag-journey__topic-head .cag-journey__num {
	line-height: 1 !important;
}

.cag-journey__topic p {
	font-size: 14px;
	color: var(--cag-text);
	margin: 0;
}

/* The selected part's hero image. The img is absolutely positioned so the
   row height follows the topic box's text, not the photo's aspect ratio. */
.cag-journey__media {
	position: relative;
	min-height: 200px;
	margin: 0;
	border: 1px solid var(--cag-outline);
	border-radius: 6px;
	overflow: hidden;
	background: var(--cag-fill);
}

.cag-journey__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.cag-journey__cta {
	text-align: center;
	margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Page 1 — featured insights
   -------------------------------------------------------------------------- */

.cag-insights {
	padding: 0;
}

.cag-insights__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.cag-insights h2 {
	font-size: 30px;
	margin-bottom: 8px;
}

.cag-insights__intro {
	font-weight: 700;
	color: #1a1a1a;
	max-width: 560px;
	font-size: 13px;
	margin: 0 0 26px;
}

.cag-insights__arrows {
	display: flex;
	gap: 10px;
}

.cag-insights__arrow {
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cag-insights__arrow[data-cag-prev] {
	transform: scaleX(-1);
}

.cag-insights__arrow[hidden] {
	display: none !important;
}

/* Shown by [cag_featured_insights] only if capitaladvisors.com can't be read
   and there is no earlier result to fall back on. */
.cag-insights__empty {
	font-size: 14px;
	margin: 0;
}

.cag-insights__viewport {
	overflow: hidden;
}

/* Spacing measured off the mockup at 1440px: 59px from the journey band to
   the heading's cap height, 48px from the intro to the slide, 63px from the
   slide to the rule, 46px from the rule to the library heading's cap height. */
.cag-page .cag-insights {
	padding-top: 24px;
}

.cag-page .cag-insights__viewport {
	margin-top: 28px;
}

.cag-page .cag-insights hr.cag-hr-black {
	margin-top: 63px;
	margin-bottom: 11px;
}

/* The slides and rule belong inside .cag-wrap, but on the live page they sit
   directly in the section. Give them the wrap's content box so they line up
   with the heading and arrows either way. Keep the 1250px below in sync
   with .cag-wrap's max-width.

   The viewport copies .cag-wrap (max-width + auto margins) with its 24px
   gutters as transparent borders: it clips at its padding box, so padding
   would let the neighbouring slides show in the gutters. Avoid a calc()
   width here — the flex parent then sizes the section as if the slides were
   full width, and the taller wrapped text spills 16px out of the bottom. */
.cag-insights > .wp-block-group__inner-container > .cag-insights__viewport {
	box-sizing: border-box;
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
	border-left: 24px solid transparent;
	border-right: 24px solid transparent;
}

.cag-insights > .wp-block-group__inner-container > .cag-hr-black {
	width: calc(100% - 48px);
	max-width: calc(1250px - 48px);
	margin-left: auto;
	margin-right: auto;
}

.cag-insights__track {
	display: flex;
	transition: transform 0.3s ease;
}

.cag-insights__slide {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.cag-insights__slide h3 {
	font-size: 22px;
	color: var(--cag-text);
	margin: 16px 0 12px;
}

.cag-insights__slide p {
	font-size: 14px;
	margin: 0 0 18px;
}

.cag-insights__download,
.cag-page a.cag-insights__download {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	margin-top: 16px;
	color: var(--cag-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.cag-insights__download img {
	display: inline-block;
	width: 20px;
	height: auto;
}

.cag-insights__download:hover {
	text-decoration: underline;
}

/* Stretch to the slide's height: the text column is top-aligned, and the
   image should still reach the bottom of the slide as in the mockup. */
.cag-insights__image {
	align-self: stretch;
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 4px;
	min-height: 260px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	color: var(--cag-line);
	font-size: 13px;
	overflow: hidden;
}

.cag-insights__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* WordPress / Kadence wraps media in <span>; these rules let it stretch
   so images fill their containers the same way bare <img> elements do. */
.cag-hero-media > span,
.cag-insights__image > span {
	display: block;
	width: 100%;
	align-self: stretch;
}
.cag-hero-media > span img,
.cag-insights__image > span img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cag-hr-black {
	border: none;
	border-top: 1px solid #1a1a1a;
	margin: 40px 0 0;
}

/* --------------------------------------------------------------------------
   Page 1 — research library
   -------------------------------------------------------------------------- */

.cag-library {
	padding: 0;
}

/* Same size as the Featured Insights heading. Pages assembled in wp-admin
   have no section.cag-library, so also find the heading by the library
   widget beside it. */
.cag-library h2,
.cag-page .cag-wrap:has([data-cag-library]) h2 {
	font-size: 30px;
	margin-bottom: 24px;
}

.cag-library__filters {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.cag-filter {
	border: 1px solid var(--cag-line);
	border-radius: 6px;
	padding: 8px 14px;
	min-width: 170px;
	background: #fff;
}

.cag-filter label {
	display: block;
	font-size: 10px;
	color: #636161;
	letter-spacing: 0.05em;
}

/* appearance is none, so the native arrow is gone; this is the mockup's
   bold chevron in its place. */
.cag-filter select {
	border: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 14px 9px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
	width: 100%;
	padding: 0 24px 0 0;
	cursor: pointer;
}

.cag-library__viewall {
	margin-left: auto;
	color: var(--cag-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.cag-library__viewall:hover {
	color: var(--cag-navy);
}

/* A drawn arrow, heavier than the text "→". Masked so it takes the link's
   colour, hover included. cag-pages.js swaps it in on older pages. */
.cag-library__viewall-arrow {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	vertical-align: -3px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.cag-library__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

/* --- research library carousel ------------------------------------------ */

.cag-library__carousel {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cag-library__viewport {
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
}

.cag-library__track {
	display: flex;
	gap: 28px;
	transition: transform 0.3s ease;
	align-items: stretch;
}

/* Two cards per view, matching the static .cag-library__grid above. The
   basis subtracts half the gap so a full page of cards fills the viewport. */
.cag-library__track .cag-library__card {
	flex: 0 0 calc(50% - 14px);
	min-width: 0;
}

.cag-library__status {
	color: var(--cag-text);
	font-size: 14px;
	padding: 28px 0;
	margin: 0;
}

.cag-library.is-loading .cag-library__track {
	opacity: 0.4;
}

.cag-library__arrow[hidden] {
	display: none;
}

.cag-library__card {
	position: relative;
	border: 1px solid var(--cag-sky);
	border-radius: 4px;
	padding: 24px 24px 46px;
	background: #F5F5F5;
	display: block;
	text-decoration: none;
}

/* Library cards get a filled tag; Featured Insights keeps the outlined one. */
.cag-page .cag-library__card .cag-tag {
	background: var(--cag-navy);
	border-color: var(--cag-navy);
	color: #fff;
}

.cag-library__card h3 {
	color: #1a1a1a;
	font-size: 17px;
	margin: 14px 0 8px;
}

.cag-library__card p {
	color: var(--cag-text);
	font-size: 13px;
	margin: 0;
}

.cag-library__card .cag-library__go {
	position: absolute;
	right: 18px;
	bottom: 14px;
	color: #1a1a1a;
	font-size: 18px;
}

/* When the card is built by the carousel, .cag-library__go is an <a> through
   to the full article and renders as the round arrow icon from the mockup. */
.cag-library__card a.cag-library__go {
	display: block;
	width: 30px;
	height: 30px;
	font-size: 0;
	color: transparent;
	text-decoration: none;
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cag-library__arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cag-library__arrow[data-cag-prev] {
	transform: scaleX(-1);
}

.cag-library__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Pages that were hand-edited in wp-admin may use .research-btn + button
   instead of the canonical p.cag-library__go; style it identically. */
.cag-library__card .research-btn {
	position: absolute !important;
	right: 18px;
	bottom: 14px;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cag-library__card .research-btn button {
	background: none !important;
	background-image: none !important;
	border: none !important;
	color: #1a1a1a !important;
	font-size: 18px !important;
	width: auto !important;
	height: auto !important;
	padding: 0 !important;
	cursor: pointer;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   Page 2 — hero
   -------------------------------------------------------------------------- */

.cag-a2p2-hero {
	background: var(--cag-navy);
	border-radius: 6px;
	padding: 44px 48px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 44px;
	align-items: center;
}

.cag-a2p2-hero h1 {
	color: #fff;
	font-size: 38px;
	font-weight: 800;
	margin: 0 0 16px;
}

.cag-a2p2-hero p {
	color: var(--cag-gray);
	font-size: 15px;
	margin: 0 0 24px;
}

.cag-a2p2-hero .cag-hero-media,
.cag-article-hero .cag-hero-media {
	background: var(--cag-fill);
	border-radius: 12px;
	min-height: 200px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	color: var(--cag-line);
	font-size: 13px;
	overflow: hidden;
	max-width:433px !important;
}

.cag-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Page 2 — accordion
   -------------------------------------------------------------------------- */

.cag-explore {
	padding: 48px 0 20px;
}

.cag-explore h2 {
	text-align: center;
	font-size: 30px;
	margin-bottom: 22px;
}

.cag-explore__intro {
	font-size: 14px;
	max-width: 980px;
	margin: 0 auto 12px;
}

.cag-accordion {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 26px;
	margin-top: 30px;
	align-items: start;
}

.cag-accordion__pills {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cag-accordion__pill {
	background: var(--cag-fill);
	border: 1.5px solid var(--cag-gray);
	border-radius: 10px;
	padding: 13px 18px;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-family: inherit;
}

.cag-accordion__pill::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

.cag-accordion__pill.is-active::after {
	background-image: url(../../images/arrowRightVividBlue.svg);
}

/* Overrides Kadence's button:hover background (var(--global-palette2)). */
.cag-accordion__pill:hover {
	background: #cbd5e0;
}

.cag-accordion__pill.is-active {
	border-color: var(--cag-navy);
}

.cag-accordion__panel {
	background: var(--cag-fill);
	border: 1px solid var(--cag-gray);
	border-radius: 10px;
	padding: 24px 28px;
	position: relative;
	min-height: 200px;
}

.cag-accordion__panel h3 {
	font-size: 17px;
	margin: 0 0 12px;
	padding-right: 30px;
}

.cag-accordion__panel p,
.cag-accordion__panel li {
	font-size: 13.5px;
	color: var(--cag-text);
}

.cag-accordion__close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 18px;
	color: #1a1a1a;
	cursor: pointer;
	line-height: 1;
}

.cag-accordion__body {
	display: none;
}

.cag-accordion__body.is-active {
	display: block;
}

/* --------------------------------------------------------------------------
   Page 2 — key takeaways
   -------------------------------------------------------------------------- */

.cag-takeaways {
	background: var(--cag-band);
	border-radius: 6px;
	padding: 34px 38px 40px;
	margin: 40px 0;
}

.cag-takeaways h2 {
	font-size: 28px;
	margin-bottom: 22px;
}

.cag-takeaways__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.cag-takeaways__card {
	border: 1.5px solid var(--cag-blue);
	border-radius: 8px;
	padding: 16px;
	font-size: 12.5px;
	color: var(--cag-text);
	background: transparent;
}

.cag-takeaways__card strong {
	color: var(--cag-text);
}

/* --------------------------------------------------------------------------
   Page 2 — allocation calculator
   -------------------------------------------------------------------------- */

.cag-alloc {
	padding: 8px 0 10px;
}

.cag-alloc h2 {
	font-size: 30px;
	margin-bottom: 6px;
}

.cag-alloc__sub {
	color: #1a1a1a;
	font-size: 14px;
	max-width: 460px;
	margin: 0 0 24px;
}

.cag-alloc__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 26px;
	align-items: stretch;
}

/* Left column holds the two stacked cards; the chart card on the right is a
   grid item of its own. Stretching the column and letting its bottom card
   absorb the slack keeps all three cards flush at top and bottom, whichever
   side happens to be taller. */
.cag-alloc__grid > div:first-child {
	display: flex;
	flex-direction: column;
}

.cag-alloc__grid > div:first-child > .cag-alloc__card:last-child {
	flex: 1 1 auto;
}

.cag-alloc__card {
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 10px;
	padding: 22px 26px;
}

.cag-alloc__card + .cag-alloc__card {
	margin-top: 20px;
}

.cag-alloc__slider-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
}

.cag-alloc__slider-head .cag-alloc__label {
	color: var(--cag-navy);
	font-weight: 700;
	font-size: 15px;
}

.cag-alloc__slider-head .cag-alloc__value {
	color: var(--cag-blue);
	font-weight: 700;
	font-size: 31px;
}

/* 0% / 100% end labels — sized off the mockup. */
.cag-alloc__slider-row {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 19px;
	color: var(--cag-navy);
	font-weight: 600;
}

/* --cag-thumb-w is read by cag-pages.js to place the gradient's fill stop
   against the thumb's real travel. Keep it equal to the thumb width below. */
.cag-alloc input[type="range"] {
	--cag-thumb-w: 28px;
	flex: 1 1 auto;
	appearance: none;
	-webkit-appearance: none;
	/* Any padding or border here would inset the thumb's travel inside the
	   visible track, leaving a stub of track it can never reach at each end. */
	margin: 0;
	padding: 0;
	border: 0;
	min-height: 0;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--cag-blue) 0, var(--cag-blue) 25%, var(--cag-gray) 25%, var(--cag-gray) 100%);
	box-shadow: none;
	outline: none;
}

/* Pill, not a circle, per the mockup. */
.cag-alloc input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 28px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--cag-line);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.cag-alloc input[type="range"]::-moz-range-thumb {
	width: 28px;
	height: 18px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--cag-line);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.cag-alloc__metrics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cag-alloc__metrics li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 0;
	border-top: 1px solid var(--cag-outline);
	font-size: 15px;
}

.cag-alloc__metrics li:first-child {
	border-top: none;
}

.cag-alloc__metrics .cag-metric-label {
	color: var(--cag-navy);
	font-weight: 600;
}

.cag-alloc__metrics .cag-metric-value {
	color: var(--cag-blue);
	font-weight: 700;
}

.cag-alloc__charts {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 18px;
	align-items: center;
}

.cag-alloc__chart h3 {
	text-align: center;
	font-size: 15px;
	color: #1a1a1a;
	margin: 0 0 18px;
}

.cag-alloc__bars {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	height: 170px;
	margin-bottom: 14px;
}

.cag-alloc__bar {
	width: 16px;
	border-radius: 3px;
	background: var(--cag-navy);
	transition: height 0.2s ease;
}

/* Heavy stroked arrow, drawn to the wireframe: ~26px square, 3.5px strokes,
   flat ends, mitred tip. Was the &rarr; glyph, which rendered thin and small
   and changed weight with whatever font the theme happened to load. */
.cag-alloc__chart-arrow {
	color: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.cag-alloc__chart-arrow svg {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	overflow: visible;
}

.cag-alloc__legend {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

.cag-alloc__legend li {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	color: #1a1a1a;
}

.cag-alloc__legend .cag-legend-pct {
	color: var(--cag-blue);
	font-weight: 700;
}

.cag-disclaimer {
	color: var(--cag-gray);
	font-size: 12px;
	margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   Page 2 — webinars / downloads panels
   -------------------------------------------------------------------------- */

.cag-panels {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: stretch;
	gap: 26px;
	margin: 44px 0;
}

.cag-panel--navy {
	background: var(--cag-navy);
	border-radius: 10px;
	padding: 28px 30px;
	color: #fff;
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* In the editor's output each group's children sit inside an extra
   .wp-block-group__inner-container, which would otherwise swallow the column
   layout and leave the video box and the footer buttons unstretched. */
.cag-panel--navy > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Pins both panels' footer buttons to the same baseline, per the mockup.
   Needs .cag-page in front to outrank the later ".cag-page .wp-block-buttons
   { margin: 0 }" reset. */
.cag-panel--navy .wp-block-buttons,
.cag-panel--navy .cag-panel__foot,
.cag-page .cag-panel--navy .wp-block-buttons,
.cag-page .cag-panel--navy .cag-panel__foot {
	margin-top: auto;
}

.cag-panel--navy h2 {
	color: #fff;
	font-size: 24px;
	margin-bottom: 6px;
}

.cag-panel--navy .cag-panel__sub {
	color: var(--cag-gray);
	font-size: 12px;
	margin: 0 0 18px;
}

/* The video card is a link to the webinar replay on Zoom: poster frame plus a
   centered play badge. Zoom's share page is opened in a new tab rather than
   framed, so a recording that asks for a passcode still works normally. */
.cag-panel__video {
	position: relative;
	background: var(--cag-fill);
	border-radius: 6px;
	/* Locked to the video's 16:9 shape (the poster is 1400x788, within 0.07% of
	   16:9) so the frame fills the card edge to edge with no letterbox bars.
	   Deliberately NOT flex-grow: a card that stretched to the panel's height
	   would be taller than 16:9 and the bars would come straight back. No
	   min-height either, since below ~356px wide it would out-rank the ratio
	   and reintroduce them. The panel still stretches and the footer button is
	   still pinned by margin-top:auto, so both navy panels stay equal height.
	   This is also the shape a Vimeo embed wants, per the reference site. */
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cag-navy);
	font-size: 34px;
	margin-bottom: 18px;
	overflow: hidden;
}

a.cag-panel__video,
.cag-page a.cag-panel__video {
	text-decoration: none;
	cursor: pointer;
}

/* contain, not cover: the poster is a 16:9 slide while the card is taller and
   narrower (it stretches to match the Download Resources panel height), so
   cover cropped the logo and the ends of the title off the sides. The card's
   pale fill shows as letterbox bars above and below instead. No hover zoom
   here either — scaling the image would clip the frame this is showing in
   full; the play badge carries the hover feedback. */
.cag-panel__video img,
.cag-panel__video iframe {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border: 0;
	display: block;
}

.cag-panel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(38, 66, 100, 0.82);
	border: 2px solid #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
	transition: background 0.18s ease, transform 0.18s ease;
}

/* play triangle; nudged right of center so it reads as centered in the circle */
.cag-panel__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
}

.cag-panel__video:hover .cag-panel__play,
.cag-panel__video:focus-visible .cag-panel__play {
	background: var(--cag-blue);
	transform: translate(-50%, -50%) scale(1.06);
}

.cag-panel__video:focus-visible {
	outline: 3px solid var(--cag-blue);
	outline-offset: 2px;
}

/* Outlined video-camera glyph from the mockup, kept as the fallback: the img's
   onerror sets .is-noposter when a2p2-webinar-poster.jpg is missing, and the
   card falls back to the original placeholder look instead of an empty box. */
.cag-panel__video svg {
	width: 96px;
	height: 96px;
	flex: 0 0 auto;
}

.cag-panel__glyph {
	display: none;
}

.cag-panel__video.is-noposter .cag-panel__glyph {
	display: block;
}

.cag-panel__video.is-noposter .cag-panel__play {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.cag-panel__play {
		transition: none;
	}
}

/* Geometry measured off the mockup (PDF exported at 2x): row 49px tall, 40px
   circle, 23px document glyph, 20px download glyph, wide right gutter. */
.cag-dl-row,
.cag-page a.cag-dl-row {
	display: flex !important;
	align-items: center !important;
	gap: 18px;
	background: var(--cag-band);
	border-radius: 6px;
	padding: 5px 28px 5px 12px;
	margin-bottom: 12px;
	text-decoration: none;
}

/* The theme wraps anchor contents in a .link-content span. Left alone it
   becomes the row's only flex child and the icon, text and glyph stack
   vertically, so it has to carry the row layout itself (same fix as
   .cag-series__card). */
.cag-dl-row .link-content,
.cag-page a.cag-dl-row .link-content {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 18px !important;
	width: 100%;
	min-width: 0;
}

.cag-dl-row__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--cag-blue);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cag-band);
}

.cag-dl-row__icon img {
	display: block;
	width: auto;
	height: 23px;
}

.cag-dl-row__text {
	flex: 1 1 auto;
}

.cag-dl-row__text strong {
	display: block;
	color: var(--cag-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cag-dl-row__text span {
	display: block;
	color: var(--cag-navy);
	font-size: 12px;
}

/* The mockup's download glyph (arrow into a tray), not the theme's plain
   arrowDown.svg. The PNG is already navy on a transparent ground, so it is
   shown as-is: navy arrow, no filled disc behind it. The 40px box is kept for
   the tap target and to keep the arrow aligned with the document circle on the
   left. Carried as an <img> in the markup so it is visible and swappable from
   the block editor. */
.cag-dl-row__glyph {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	font-size: 0;
	color: transparent;
}

.cag-dl-row__glyph img {
	display: block;
	width: 20px;
	height: auto;
}

/* --------------------------------------------------------------------------
   Page 2 — CTA band  (also reused shapes on page 3)
   -------------------------------------------------------------------------- */

.cag-cta-band {
	background: var(--cag-band);
	border-radius: 10px;
	padding: 30px 36px;
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 10px 0 60px;
}

.cag-cta-band__icon {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cag-cta-band__icon img {
	width: 44px;
	height: auto;
}

.cag-cta-band__text {
	flex: 1 1 auto;
}

.cag-cta-band h2 {
	font-size: 24px;
	margin: 0 0 6px;
}

.cag-cta-band p {
	margin: 0;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Page 3 — article hero
   -------------------------------------------------------------------------- */

.cag-article-hero {
	background: var(--cag-navy);
	border-radius: 6px;
	padding: 40px 48px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 44px;
	align-items: center;
	margin-bottom: 40px;
}

.cag-article-hero .cag-eyebrow {
	color: var(--cag-sky);
}

.cag-article-hero h1 {
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	margin: 0 0 20px !important;
}

.cag-article-hero .cag-article-hero__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	font-size: 13px;
	padding-top: 16px;
}

/* --------------------------------------------------------------------------
   Page 3 — layout + sidebar
   -------------------------------------------------------------------------- */

.cag-page .cag-article-layout,
.cag-page .wp-block-columns.cag-article-layout {
	display: grid;
	/* 296px is the comp's card width. It used to be a 300px track less the 4px
	   the sidebar reserved for its scrollbar; with the scroll box gone the track
	   itself carries the measurement. */
	grid-template-columns: 296px 1fr;
	gap: 40px;
	align-items: start;
}

/* The comp runs this as a plain column that flows with the article — its cards
   stack to ~1600px, taller than any viewport, so there is nothing to pin. It
   used to be sticky inside a `max-height: 100vh` scroll box, which is where the
   scrollbar came from; pinning a column that tall would strand Related Content
   and Up Next below the fold with no way to reach them. */
.cag-article-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cag-side-card {
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 8px;
	padding: 18px 20px;
}

/* Every sidebar card heading — contents, the two icon cards, related, up next —
   is one size in the comp. Sized to match the icon-card heading rather than the
   comp's own ~20px so the whole column stays consistent; change this one
   declaration to move them all. */
.cag-side-card h3 {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--cag-navy);
	margin: 0 0 10px;
}

.cag-side-card p {
	font-size: 13px;
	color: var(--cag-text);
	margin: 0;
}

.cag-side-card p + p {
	margin-top: 8px;
}

/* The comp leaves these unmarked; the underline moves to hover so the link
   affordance survives. */
.cag-side-card a {
	color: var(--cag-text);
	text-decoration: none;
}

.cag-side-card a:hover {
	color: var(--cag-navy);
	text-decoration: underline;
}

/* --- Related Content rows ---------------------------------------------------
   Label left, arrow right, hairline between rows. Matched on :has(> a) rather
   than a new class because pages already built from this pattern keep their
   saved block markup — a class added to the pattern would never reach them,
   whereas this selector picks the link rows out of the existing HTML. */
.cag-side-card p:has(> a),
.cag-page .cag-side-card p:has(> a) {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 11px 0;
	line-height: 1.25;
}

.cag-side-card p:has(> a):first-of-type,
.cag-page .cag-side-card p:has(> a):first-of-type {
	padding-top: 0;
}

.cag-side-card p:has(> a):last-of-type,
.cag-page .cag-side-card p:has(> a):last-of-type {
	padding-bottom: 0;
}

/* Hairline between rows only — the comp runs none under the last one. */
.cag-side-card p:has(> a) + p:has(> a),
.cag-page .cag-side-card p:has(> a) + p:has(> a) {
	border-top: 1px solid var(--cag-outline);
}

/* Kadence forces links inside .cag-page to flex-column, which would stand the
   label's lines up in a narrow stack once the row itself became a flex box. */
.cag-page .cag-side-card p:has(> a) > a {
	display: block !important;
	flex: 0 1 auto;
}

.cag-side-card p:has(> a)::after,
.cag-page .cag-side-card p:has(> a)::after {
	content: "";
	flex: 0 0 auto;
	width: 33px;
	height: 33px;
	background-color: currentColor;
	-webkit-mask: var(--cag-arrow) no-repeat center / contain;
	mask: var(--cag-arrow) no-repeat center / contain;
}

/* The row treatment above keys off "a paragraph holding a link", which also
   describes the Key Insight and Next Step copy once it cites a page (Part 3's
   card links "Capital Advisors Group"). Those paragraphs follow the icon head,
   so put them back to prose: no flex row, no trailing arrow. Written as a
   separate reset rather than a :not() on the rules above so it holds in older
   browsers and reaches pages already built from these patterns. */
.cag-side-card .cag-side-card__iconhead ~ p,
.cag-page .cag-side-card .cag-side-card__iconhead ~ p {
	display: block !important;
	padding: 0 !important;
	border-top: none !important;
}

.cag-side-card .cag-side-card__iconhead ~ p::after,
.cag-page .cag-side-card .cag-side-card__iconhead ~ p::after {
	content: none !important;
}

/* The row rules also stand the link itself up as a block, which would break the
   sentence around it. Inline, and underlined as the comp draws it. */
.cag-side-card .cag-side-card__iconhead ~ p > a,
.cag-page .cag-side-card .cag-side-card__iconhead ~ p > a {
	display: inline !important;
	text-decoration: underline;
}

/* Key Insight / Next Step cards. Sizes taken off "Cash Series Blog Page.pdf",
   whose 2200px render works out at ~1.53 device px per CSS px (its sidebar card
   measures 452px against the 296px card this stylesheet produces). */
.cag-side-card__iconhead {
	display: flex;
	align-items: center;
	gap: 12px;
	/* The comp lets this row bleed past the card's text inset — the circle sits
	   ~12px from the card edge while the body copy below sits at ~25px. Without
	   the bleed the larger heading loses the width it needs to break over the
	   same lines as the PDF ("CFOS & TREASURY" needs 178px; the row gives 178). */
	margin: 0 -8px 17px;
}

.cag-side-card__iconhead .cag-side-card__circle {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Both source PNGs are cropped tight to the glyph but at different aspect
   ratios, so height is the dimension that matches the comp on each. */
.cag-side-card__circle img {
	width: auto;
	height: 52px;
}

.cag-side-card__iconhead h3,
.cag-page .cag-side-card__iconhead h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
	/* The comp's face sets ~5% narrower than Inter at this size, which is enough
	   to push "CFOS & TREASURY" onto its own line. This tracking brings each
	   line back to within a pixel of the PDF and restores its three-line break. */
	letter-spacing: -0.035em;
}

/* The comp sets this copy noticeably tighter than the page default of 1.55. */
.cag-side-card__iconhead + p,
.cag-page .cag-side-card__iconhead + p {
	line-height: 1.25;
}

/* table of contents */

.cag-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Kadence's `.single-content ol` padding outranks the rule above and pushed
   the dots ~32px in from the heading. Pin the list flush with "Table of
   Contents" so the dots line up under its first letter. */
.cag-page .cag-toc ol {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.cag-toc li {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 13px;
}

.cag-toc li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--cag-line);
}

.cag-toc li:first-child::before {
	top: 50%;
}

.cag-toc li:last-child::before {
	bottom: 50%;
}

.cag-toc li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--cag-line);
}

.cag-toc li.is-active::after {
	background: var(--cag-navy);
	border-color: var(--cag-navy);
}

.cag-toc a {
	color: #1a1a1a;
	text-decoration: none;
}

.cag-toc li.is-active > a {
	color: var(--cag-navy);
	font-weight: 700;
}

.cag-toc li.cag-toc__sub {
	padding-left: 40px;
	font-size: 12px;
}

.cag-download-btn,
.cag-page a.cag-download-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 8px;
	padding: 14px 18px;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.0em;
	text-transform: uppercase;
	text-decoration: none;
}

.cag-download-btn img {
	width: 24px;
	height: auto;
}

/* The comp sits the arrow immediately after the label, not out at the card's
   right edge. */
.cag-upnext__row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin-bottom: 11px;
}

/* align-items centres margin boxes, so the heading's own bottom margin would
   ride the label up off the arrow's centreline. */
.cag-upnext__row h3 {
	margin: 0;
}

/* On the live site the theme's heading margins/padding (e.g. Kadence's
   `.single-content h3` top/bottom margin) outrank the rule above and shove the
   label off the arrow's centreline. Lock both items so they centre on each
   other like the comp. */
.cag-page .cag-upnext .cag-upnext__row h3,
.cag-page .cag-upnext .cag-upnext__row .cag-upnext__arrow {
	margin: 0 !important;
	padding: 0 !important;
	align-self: center;
}

.cag-page .cag-upnext .cag-upnext__row h3 {
	line-height: 1.2 !important;
}

.cag-upnext__row .cag-upnext__arrow {
	flex: 0 0 auto;
	display: inline-block;
	width: 33px;
	height: 33px;
	font-size: 0;
	color: transparent;
	background-color: var(--cag-navy);
	-webkit-mask: var(--cag-arrow) no-repeat center / contain;
	mask: var(--cag-arrow) no-repeat center / contain;
}

.cag-upnext strong {
	display: block;
	color: var(--cag-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin-bottom: 1px;
}

/* Direct children only: Kadence injects a `<span class="link-content">` wrapper
   inside the Read More link, and a descendant selector here would paint that
   wrapper in body-text colour — which no amount of specificity on the anchor
   can undo, since a colour set on the span itself always beats one inherited
   from its parent. */
.cag-upnext > span {
	color: var(--cag-text);
	font-size: 13px;
}

/* An inline span takes its line spacing from the card's 1.4 line-height, so
   the subtitle is made a block to tighten it. The <br /> after it would then
   add an empty line, so it is hidden. */
.cag-page .cag-upnext > span {
	display: block;
	line-height: 1.25;
}

.cag-page .cag-upnext > span + br {
	display: none;
}

.cag-upnext .cag-btn {
	margin-top: 6px;
}

/* Pill: 12px label, 7px vertical padding, 18px disc. The label/arrow spacing
   lives on the arrow's margin, not `gap`: on the live site Kadence wraps both in
   a single `.link-content` span, so the anchor's `gap` has nothing to separate. */
.cag-upnext a.cag-btn,
.cag-upnext .cag-btn .wp-block-button__link {
	font-size: 12px;
	gap: 0;
	padding: 7px 12px 7px 16px;
}

.cag-upnext a.cag-btn .link-content,
.cag-page .cag-upnext a.cag-btn .link-content {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

/* The generic `.cag-side-card a` rule above has the same specificity as
   `a.cag-btn` but comes later in the file, so it was repainting the pill label
   in body text colour and underlining it. Re-assert the PDF treatment: white
   bold label on the navy pill. */
.cag-upnext a.cag-btn,
.cag-upnext .cag-btn .wp-block-button__link,
.cag-page .cag-upnext a.cag-btn,
.cag-page .cag-upnext .cag-btn .wp-block-button__link {
	background: var(--cag-navy);
	border-color: var(--cag-navy);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

/* Paint the label wrapper itself, not just the anchor, so the theme's injected
   `.link-content` span (and any other wrapper it decides to add) can't hold a
   darker inherited colour. The arrow is excluded — it needs transparent text
   to hide its literal glyph behind the disc. */
.cag-upnext a.cag-btn .link-content,
.cag-upnext a.cag-btn span:not(.cag-btn__arrow),
.cag-upnext .cag-btn .wp-block-button__link .link-content,
.cag-upnext .cag-btn .wp-block-button__link span:not(.cag-btn__arrow),
.cag-page .cag-upnext a.cag-btn .link-content,
.cag-page .cag-upnext a.cag-btn span:not(.cag-btn__arrow),
.cag-page .cag-upnext .cag-btn .wp-block-button__link .link-content,
.cag-page .cag-upnext .cag-btn .wp-block-button__link span:not(.cag-btn__arrow) {
	color: #fff !important;
	font-size: inherit;
	font-weight: 700;
	text-decoration: none;
}

.cag-upnext a.cag-btn:hover,
.cag-upnext a.cag-btn:focus,
.cag-upnext .cag-btn .wp-block-button__link:hover,
.cag-page .cag-upnext a.cag-btn:hover,
.cag-page .cag-upnext a.cag-btn:focus,
.cag-page .cag-upnext .cag-btn .wp-block-button__link:hover {
	background: #1b3049;
	color: #fff;
	text-decoration: none;
}

/* `.cag-upnext span` also caught the arrow glyph, so the trailing arrow came
   through as a dark literal character instead of the white disc in the PDF.
   Styled without the `.link-content` wrapper so it holds whether or not the
   theme injects one. */
.cag-upnext .cag-btn__arrow,
.cag-upnext .link-content .cag-btn__arrow,
.cag-page .cag-upnext .cag-btn__arrow,
.cag-page .cag-upnext .link-content .cag-btn__arrow {
	flex: 0 0 auto;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 16px;
	font-size: 0;
	color: transparent;
	background-color: #fff;
	background-image: url(../img/arrow-blue.png) !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 90%;
	border-radius: 50%;
	vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Page 3 — article body
   -------------------------------------------------------------------------- */

.cag-article-main > h2 {
	font-size: 18px;
	border-top: 1px solid var(--cag-line);
	padding-top: 20px;
	margin: 24px 0 10px;
}

/*.cag-article-main > h2:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 6px;
}
*/
.cag-article-main p,
.cag-article-main li {
	font-size: 14.5px;
	color: var(--cag-text);
}

.cag-numbered-box {
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 8px;
	padding: 20px 24px;
	margin: 18px 0;
}

.cag-numbered-box h3 {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.cag-numbered-box p,
.cag-numbered-box li {
	font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   Page 3 — framework band
   -------------------------------------------------------------------------- */

.cag-framework {
	background: var(--cag-navy);
	border-radius: 6px;
	padding: 36px 40px 28px;
	margin: 48px 0 0;
	color: #fff;
}

.cag-framework h2 {
	color: #fff;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 26px;
}

.cag-framework__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.cag-framework__col {
	display: flex;
	gap: 14px;
	border-radius: 8px;
	padding: 14px;
}

.cag-framework__col.is-highlight {
	background: var(--cag-highlight);
}

.cag-framework__circle {
	flex: 0 0 auto;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cag-framework__circle img {
	width: 42px;
	height: auto;
}

.cag-framework__col h3 {
	color: #fff;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.cag-framework__col p {
	color: #fff;
	font-size: 9px;
	margin: 0 !important;
}

.cag-framework__focus {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	margin-top: 24px;
	padding-top: 16px;
	font-size: 12px;
	color: #fff;
}

.cag-framework__focus strong {
	display: block;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Page 3 — continue banner + series cards
   -------------------------------------------------------------------------- */

.cag-continue {
	background: var(--cag-band);
	border-radius: 10px;
	padding: 26px 32px;
	margin: 26px 0 40px;
}

/* 21px matches the comp's cap height. Its 0.08em tracking goes with it: at this
   size that spread cost ~145px across the line, which this band can't spare. */
.cag-continue h2,
.cag-page .cag-continue h2 {
	font-size: 16px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
}

/* Navy disc with the white arrow, hung to the left of the heading as in the
   comp. Carried on the heading's ::before rather than added to the pattern
   markup so it reaches pages already built from this pattern. */
.cag-continue h2::before,
.cag-page .cag-continue h2::before {
	content: "";
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cag-navy) var(--cag-arrow-white) no-repeat center / 38px;
}

/* The comp lines the body copy up with the heading text, leaving the disc alone
   out in the margin — 48px of disc plus the 18px gap. */
.cag-continue p,
.cag-page .cag-continue p {
	margin-left: 56px;
}

/* The button is the exception: the comp centres it across the band rather than
   hanging it off the text column. display is set here too because the render
   harness loads this file without the block library's own flex rule. */
.cag-continue .wp-block-buttons,
.cag-page .cag-continue .wp-block-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-left: 0;
}

.cag-continue p {
	font-size: 12px;
	margin-bottom: 8px;
	margin-top: 0;
}

.cag-continue .cag-btn {
	margin-top: 10px;
}

/* The continue band should span the same width as the navy framework band
   above it. Both sit in identical .cag-wrap groups, but WordPress layout
   styles (constrained content widths, flex shrink-to-fit) can narrow either
   one on the live site. Pin both to the full width of their wrap. */
.cag-page .cag-framework,
.cag-page .cag-continue {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-self: stretch;
}

.cag-series {
	margin-bottom: 60px;
}

.cag-series h2 {
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 18px;
	color: #1a1a1a;
}

/* Kadence's heading margins outrank the rule above and left only 8px between
   "More in the Series" and the cards. Navy (#264264) per the series design. */
.cag-page .cag-series h2 {
	margin-bottom: 24px !important;
	color: var(--cag-navy) !important;
}

.cag-series__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}

/* The carousel shows three cards to a screen (~330px inside the theme's
   1140px wrap), so every series page has more cards than fit and the arrows
   always have somewhere to go. */
.cag-series__card {
	background: var(--cag-fill);
	border: 1px solid var(--cag-sky);
	border-radius: 10px;
	padding: 18px 20px;
	min-height: 120px;
	text-decoration: none;
	display: flex !important;
	align-items: flex-start !important; /* disc lines up with the top of the BLOG badge */
	gap: 16px !important;
	box-sizing: border-box;
}

.cag-series__card .link-content {
	display: flex !important;
	align-items: flex-start !important;
	gap: 16px !important;
	width: 100%;
	min-width: 0;
}

.cag-series__content {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.cag-series__badge {
	display: inline-block;
	align-self: flex-start;
	background: var(--cag-navy);
	color: #fff !important; /* beats .cag-series__card span { color: var(--cag-text) } (0,1,1) */
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 5px 8px;
	margin-bottom: 2px;
}

.cag-series__circle {
	width: 52px;
	height: 52px;
	min-width: 52px;
	border-radius: 50%;
	background: var(--cag-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
}

.cag-series__circle img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* The comp sets the card title above its blurb — 10px against 8px in a 250px
   card. These are the same pair scaled up to the ~330px carousel card. */
.cag-series__card strong {
	display: block;
	color: #163a67;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

.cag-series__card span {
	color: var(--cag-text);
	font-size: 13px;
	line-height: 1.4;
}

/* Every article in the series wraps its cards in a viewport the arrows
   scroll. A page without the wrapper falls back to the plain five-up grid. */
.cag-series__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
}

.cag-series__viewport {
	flex: 1 1 auto;
	min-width: 0; /* else a phone-width card's text widens it past the next arrow */
	overflow: hidden;
}

.cag-series__viewport .cag-series__grid {
	display: flex;
	flex-direction: row;
	gap: 14px;
	transition: transform 0.3s ease;
}

/* Three cards to a screen, sharing the two 14px gaps between them. */
.cag-series__viewport .cag-series__card {
	flex: 0 0 calc(33.3333% - 9.34px);
}

/* The comp draws these as bare arrow glyphs rather than the blue discs used on
   the journey and library carousels, so they take the shared mask painted in
   the body colour instead of the theme's disc SVG. */
.cag-series__arrow {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: none;
	background-color: var(--cag-text);
	-webkit-mask: var(--cag-arrow) no-repeat center / contain;
	mask: var(--cag-arrow) no-repeat center / contain;
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

/* Kadence paints a filled button box on hover for any bare <button>. */
.cag-series__arrow:hover,
.cag-series__arrow:focus,
.cag-page .cag-series__arrow:hover,
.cag-page .cag-series__arrow:focus {
	background-color: var(--cag-navy);
	border: none;
	box-shadow: none;
	color: transparent;
}

.cag-series__arrow[data-cag-prev] {
	transform: scaleX(-1);
}

.cag-series__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Parts 2-7 — article body components
   The later articles in the series carry section furniture Part 1 never used:
   icon-headed content boxes, card grids, icon bullet lists, and question
   panels. Sizes are taken off the 1440px mockup artboards.
   -------------------------------------------------------------------------- */

/* --- icon-headed content box ------------------------------------------------
   .cag-numbered-box with a navy disc and an uppercase label instead of a bare
   heading. The head keeps its own margin so a box can also open straight into
   body copy. */
.cag-numbered-box__head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 18px;
}

.cag-numbered-box__circle {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The comp's glyphs are cropped tight at differing aspect ratios, so height is
   what lines them up with each other inside the disc. */
.cag-numbered-box__circle img {
	width: auto;
	height: 56px;
}

.cag-numbered-box__head h3,
.cag-page .cag-numbered-box__head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--cag-navy);
}

/* The comp sets the item number apart from the label rather than running it in
   as part of the same phrase. */
.cag-numbered-box__n {
	margin-right: 7px;
}

.cag-numbered-box > p:first-child,
.cag-numbered-box > ul:first-child {
	margin-top: 0;
}

/* --- card grids -------------------------------------------------------------
   Two- and three-up panels of the same fill and outline as the content boxes,
   each opening with a short rule under its label. */
.cag-cards {
	display: grid;
	gap: 26px;
	margin: 18px 0;
	align-items: stretch;
}

.cag-cards--2 {
	grid-template-columns: repeat(2, 1fr);
}

.cag-cards--3 {
	grid-template-columns: repeat(3, 1fr);
}

.cag-card {
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 8px;
	padding: 20px 22px 24px;
}

.cag-card > h3,
.cag-page .cag-card > h3 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--cag-navy);
	margin: 0 0 20px;
	padding-bottom: 13px;
	position: relative;
}

/* The comps draw this rule in the sky blue, short under most card labels and
   the full width of the card under the paired RIA / broker-dealer panels. */
.cag-card > h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 66px;
	height: 1px;
	background: var(--cag-sky);
}

.cag-cards--rule-full .cag-card > h3::after {
	width: 100%;
}

.cag-card p,
.cag-card li {
	font-size: 13px;
}

.cag-card > :last-child {
	margin-bottom: 0;
}

/* Icon-over-label cards: the disc and label centre, the copy below stays
   ranged left as in the comp. */
.cag-cards--center .cag-card {
	text-align: center;
}

.cag-cards--center .cag-card > h3::after {
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
}

.cag-cards--center .cag-card > :not(h3):not(.cag-card__circle) {
	text-align: left;
}

/* Centred cards set the item number on its own line above the label. */
.cag-cards--center .cag-numbered-box__n {
	display: block;
	margin: 0 0 2px;
}

.cag-card__circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

/* --- icon bullet lists ------------------------------------------------------
   A label per row with its own glyph, replacing the disc bullet. Rows come in
   three weights: a navy disc, a bare navy glyph, and a disc plus a rule that
   separates a bold lead-in from its explanation. */
.cag-iconrows {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}

/* Kadence indents every content list (.single-content ul { padding-left: 2em }),
   which outranks the class alone. The icon rows sit flush with the copy above. */
.single-content ul.cag-iconrows,
.entry-content ul.cag-iconrows {
	padding-left: 0;
}

.cag-iconrows > li {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 7px 0;
	font-size: 13px;
	color: var(--cag-text);
}

.cag-iconrows__icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cag-iconrows__icon img {
	width: auto;
	height: 18px;
}

/* Part 6's "How Risk ... is Evolving" rows: the comp draws these glyphs at a
   21px width in a 35px disc, and the globe (a tall, narrow file) at 24px, so a
   shared 18px height left them small and the globe smallest of all. Keyed on
   the file names so already-published pages pick it up without re-editing. */
.cag-iconrows__icon:has(> img[src*="p6-bank-concentration"]),
.cag-iconrows__icon:has(> img[src*="p6-financial-complexity"]),
.cag-iconrows__icon:has(> img[src*="p6-reduced-support"]),
.cag-iconrows__icon:has(> img[src*="p6-global-contagion"]) {
	width: 35px;
	height: 35px;
}

.cag-iconrows__icon img[src*="p6-bank-concentration"],
.cag-iconrows__icon img[src*="p6-financial-complexity"],
.cag-iconrows__icon img[src*="p6-reduced-support"] {
	width: 21px;
	height: auto;
}

.cag-iconrows__icon img[src*="p6-global-contagion"] {
	width: 42px;
	height: auto;
}

/* Matched disc-and-rule rows: in the comp the rule beside a numbered row is
   only as tall as its disc, not the full copy, so the two read as a matched
   pair. The rule moves from the copy's border onto the disc so its height
   follows the disc. Used by Part 6's "Best Practices" list and every numbered
   list on Part 7. */
.cag-iconrows--rule > li:has(img[src*="p6-"]) .cag-iconrows__icon,
.cag-iconrows--rule > li:has(img[src*="p7-"]) .cag-iconrows__icon {
	position: relative;
}

.cag-iconrows--rule > li:has(img[src*="p6-"]) .cag-iconrows__icon::after,
.cag-iconrows--rule > li:has(img[src*="p7-"]) .cag-iconrows__icon::after {
	content: "";
	position: absolute;
	top: 0;
	left: calc(100% + 9px);
	width: 1px;
	height: 100%;
	background: var(--cag-sky);
}

.cag-iconrows--rule > li:has(img[src*="p6-"]) .cag-iconrows__body,
.cag-iconrows--rule > li:has(img[src*="p7-"]) .cag-iconrows__body {
	border-left: 0;
	margin-left: 20px;
	padding-left: 0;
}

/* Part 6's discs are 40px; glyph widths are the comp's, scaled to match. */
.cag-iconrows--rule > li:has(img[src*="p6-"]) .cag-iconrows__icon {
	width: 40px;
	height: 40px;
}

.cag-iconrows__icon img[src*="p6-risk-policy"] { width: 23px; height: auto; }
.cag-iconrows__icon img[src*="p6-risk-limits"] { width: 27px; height: auto; }
.cag-iconrows__icon img[src*="p6-credit-research"] { width: 22px; height: auto; }
.cag-iconrows__icon img[src*="p6-scenario-analysis"] { width: 17px; height: auto; }
.cag-iconrows__icon img[src*="p6-monitor-rebalance"] { width: 23px; height: auto; }

/* Part 7 draws its glyphs larger too, and at a size per glyph: 35px discs on
   the short rows, 45px discs on the numbered (rule) rows, and a 30px box for
   the bare glyphs. Widths are the comp's. The same file can appear in both a
   short and a numbered list, so each size is scoped to its list type. Keyed on
   file names for the same reason as Part 6 above. */
.cag-iconrows:not(.cag-iconrows--rule):not(.cag-iconrows--plain) .cag-iconrows__icon:has(> img[src*="p7-"]) {
	width: 35px;
	height: 35px;
}

.cag-iconrows--rule .cag-iconrows__icon:has(> img[src*="p7-"]) {
	width: 45px;
	height: 45px;
}

.cag-iconrows--plain .cag-iconrows__icon:has(> img[src*="p7-"]:not([src*="p7-check"])) {
	width: 30px;
	height: 30px;
}

.cag-iconrows__icon img[src*="p7-"]:not([src*="p7-check"]) {
	height: auto;
}

/* Short rows, 35px disc */
.cag-iconrows:not(.cag-iconrows--rule):not(.cag-iconrows--plain) {
	--p7-faster-settlement: 26px;
	--p7-greater-transparency: 27px;
	--p7-programmability: 23px;
	--p7-expanded-access: 19px;
}

/* Numbered rows, 45px disc */
.cag-iconrows--rule {
	--p7-faster-settlement: 32px;
	--p7-greater-transparency: 32px;
	--p7-programmability: 30px;
	--p7-expanded-access: 26px;
}

.cag-iconrows__icon img[src*="p7-faster-settlement"] { width: var(--p7-faster-settlement, 26px); }
.cag-iconrows__icon img[src*="p7-greater-transparency"] { width: var(--p7-greater-transparency, 27px); }
.cag-iconrows__icon img[src*="p7-programmability"] { width: var(--p7-programmability, 23px); }
.cag-iconrows__icon img[src*="p7-expanded-access"] { width: var(--p7-expanded-access, 19px); }
.cag-iconrows__icon img[src*="p7-regulatory-risk"] { width: 26px; }
.cag-iconrows__icon img[src*="p7-counterparty-risk"] { width: 28px; }
.cag-iconrows__icon img[src*="p7-liquidity-risk"] { width: 34px; }
.cag-iconrows__icon img[src*="p7-technology-risk"] { width: 31px; }
.cag-iconrows__icon img[src*="p7-stay-educated"] { width: 27px; }
.cag-iconrows__icon img[src*="p7-use-cases"] { width: 31px; }
.cag-iconrows__icon img[src*="p7-layered-strategy"] { width: 26px; }
.cag-iconrows__icon img[src*="p7-prioritize-transparency"] { width: 28px; }
.cag-iconrows__icon img[src*="p7-pilot-program"] { width: 24px; }
.cag-iconrows__icon img[src*="p7-direct-ownership"] { width: 25px; }
.cag-iconrows__icon img[src*="p7-customization"] { width: 29px; }
.cag-iconrows__icon img[src*="p7-transparency-holdings"] { width: 30px; }
.cag-iconrows__icon img[src*="p7-control-maturity"] { width: 27px; }

/* "Why Stablecoins Are Gaining Attention": at the comp's 19-25px these glyphs
   were too faint to make out on screen, so this list runs a larger disc and
   glyph than the comp. These three files appear only in this list. */
.cag-iconrows__icon:has(> img[src*="p7-faster-movement"]),
.cag-iconrows__icon:has(> img[src*="p7-operational-efficiency"]),
.cag-iconrows__icon:has(> img[src*="p7-global-flexibility"]) {
	width: 42px;
	height: 42px;
}

.cag-iconrows__icon img[src*="p7-faster-movement"] { width: 26px; }
.cag-iconrows__icon img[src*="p7-operational-efficiency"] { width: 27px; }
.cag-iconrows__icon img[src*="p7-global-flexibility"] { width: 30px; }

/* Bare glyphs: the artwork is already navy, so it needs no disc behind it and
   sits at the size the comp draws it. */
.cag-iconrows--plain .cag-iconrows__icon {
	width: 26px;
	height: 26px;
	border-radius: 0;
	background: none;
}

.cag-iconrows--plain .cag-iconrows__icon img {
	height: 22px;
}

.cag-iconrows__body {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}

/* Part 7's one-line rows (disc and plain) center their copy on the glyph
   rather than hanging it from the glyph's top edge. The numbered rule rows
   carry paragraphs, so they stay top-aligned. */
.cag-iconrows:not(.cag-iconrows--rule) > li:has(img[src*="p7-"]) {
	align-items: center;
}

.cag-iconrows:not(.cag-iconrows--rule) > li:has(img[src*="p7-"]) .cag-iconrows__body {
	padding-top: 0;
}

/* The rule variant hangs a hairline between the disc and the copy, so the
   numbered lead-ins read as a stack of separate practices. */
.cag-iconrows--rule > li {
	align-items: stretch;
	gap: 0;
	padding: 9px 0;
}

.cag-iconrows--rule .cag-iconrows__body {
	border-left: 1px solid var(--cag-sky);
	margin-left: 14px;
	padding: 0 0 0 14px;
}

/* Plain and disc rows run the label into its sentence, exactly as the bold
   lead-ins on the article's own bullets do. Only the rule variant stands the
   heading on its own line above the explanation. */
.cag-iconrows__body strong {
	font-size: 13px;
	line-height: 1.35;
}

.cag-iconrows--rule .cag-iconrows__body strong {
	display: block;
	color: var(--cag-navy);
	margin-bottom: 1px;
}

.cag-iconrows__body p,
.cag-page .cag-iconrows__body p {
	font-size: 13px;
	margin: 0;
}

.cag-iconrows__body ul {
	margin: 4px 0 0;
	font-size: 13px;
}

/* Needs to outrank `.cag-page .cag-iconrows__body p { margin: 0 }` above, which
   otherwise closes the gap the comp leaves before a trailing remark. */
.cag-page .cag-iconrows__body > ul + p,
.cag-page .cag-iconrows__body > p + p {
	margin-top: 10px;
}

/* --- icon label grid --------------------------------------------------------
   Two columns of glyph-plus-label, used for lists of advisory services. */
.cag-iconlist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 24px;
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.cag-iconlist > li {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--cag-text);
}

.cag-iconlist img {
	flex: 0 0 auto;
	width: auto;
	height: 34px;
}

/* --- question panels --------------------------------------------------------
   Glyph and label in a fixed left column, questions to the right of a rule. */
.cag-qbox {
	display: grid;
	grid-template-columns: 210px 1fr;
	align-items: center;
	background: var(--cag-fill);
	border: 1px solid var(--cag-outline);
	border-radius: 8px;
	padding: 22px 24px;
	margin: 16px 0;
}

.cag-qbox__side {
	text-align: center;
	padding-right: 24px;
	border-right: 1px solid var(--cag-outline);
}

.cag-qbox__circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--cag-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}

.cag-qbox__circle img {
	width: auto;
	height: 32px;
}

.cag-qbox__side strong {
	display: block;
	color: var(--cag-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.cag-qbox ul {
	margin: 0;
	padding-left: 42px;
	font-size: 13px;
}

.cag-qbox li {
	font-size: 13px;
}

/* --- inline lead-in with its own glyph -------------------------------------
   "Benefits may include:" and friends, where a bare navy mark replaces the
   bullet in front of a bold run-in heading. */
.cag-marklabel {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin: 16px 0 8px;
	color: var(--cag-navy);
	font-size: 13px;
	font-weight: 700;
}

.cag-marklabel img {
	flex: 0 0 auto;
	width: auto;
	height: 22px;
}

/* Acronym plurals keep their lowercase s in the comps — "SMAs", "(RIAs)",
   "(B-Ds)" — which the uppercase transform on these labels would flatten to
   "SMAS". Wrap just that word to opt it out. */
.cag-nocaps,
.cag-page .cag-nocaps {
	text-transform: none;
}

/* --- small navy lead-in line ------------------------------------------------ */
.cag-lead,
.cag-page p.cag-lead {
	color: var(--cag-navy);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 24px 0 10px;
}

/* --- arrow note -------------------------------------------------------------
   The italic "read more about X" lines the comps hang off a thin arrow. */
.cag-note,
.cag-page p.cag-note {
	position: relative;
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	color: var(--cag-text);
	margin: 18px 0;
	padding-left: 20px;
}

.cag-note::before {
	content: "\2192";
	position: absolute;
	left: 0;
	top: 0;
	font-style: normal;
}

.cag-note a {
	color: var(--cag-text);
}

/* --- framework band, three columns ------------------------------------------
   Parts 2-7 drop Operational Cash and run the remaining three tiers wide. */
.cag-framework--3 .cag-framework__grid,
.cag-page .cag-framework--3 .cag-framework__grid {
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 26px;
}

/* --- Previous card ----------------------------------------------------------
   Same card as Up Next; only the label differs, so it reuses .cag-upnext. */

/* --------------------------------------------------------------------------
   Native block compatibility
   Static sections are built from core blocks (group/heading/paragraph/
   image/buttons) carrying the cag- classes; these rules bridge the gaps
   between core block markup and the original hand-written HTML.
   -------------------------------------------------------------------------- */

.cag-page .wp-block-image {
	margin: 0;
}

.cag-page .wp-block-buttons,
.cag-page .wp-block-button {
	margin: 0;
}

/* Core Button blocks: className lands on the wrapper div, so style the inner link. */
.cag-page .wp-block-button.cag-btn .wp-block-button__link,
.cag-page .wp-block-button.cag-btn--white .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.cag-page .wp-block-button.cag-btn .wp-block-button__link {
	background: var(--cag-navy);
	border: 1px solid var(--cag-navy);
	color: #fff;
}

.cag-page .wp-block-button.cag-btn .wp-block-button__link:hover {
	background: #1b3049;
	color: #fff;
}

.cag-page .wp-block-button.cag-btn .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fff;
	background-image: url(../img/arrow-blue.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 110%;
	border-radius: 50%;
	vertical-align: middle;
}

/* White variant (A2/P2 "View More" / "More Resources"): the white disc vanishes
   on the white pill, so ring it in navy per the mockup. border-box keeps the
   ring inside the 20px so the button height doesn't change. */
.cag-page .wp-block-button.cag-btn--white .wp-block-button__link::after {
	box-sizing: border-box;
	border: 2px solid var(--cag-navy);
}

/* Icon variant (hero "Start Learning"): the arrow is the icon PNG carried in
   the markup instead of the ::after disc above, which shrinks the same artwork
   to 60% and thins the stroke. The PNG has a white square ground, so rounding
   it gives the disc. Beats `.cag-hero img`, which would stretch it full width. */
.cag-page .wp-block-button.cag-btn--icon .wp-block-button__link::after {
	content: none;
}

.cag-page .wp-block-button.cag-btn--icon .link-content {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
}

.cag-page .wp-block-button.cag-btn--icon img.cag-btn__icon {
	flex: 0 0 auto;
	display: block;
	width: 20px;
	height: 20px;
	max-width: none;
	margin: 0;
	border-radius: 50%;
}

.cag-page .wp-block-button.cag-btn--white .wp-block-button__link {
	background: #fff;
	border: 1px solid #fff;
	color: var(--cag-navy);
}

.cag-page .wp-block-button.cag-btn--white .wp-block-button__link:hover {
	background: var(--cag-band);
	color: var(--cag-navy);
}

/* Legacy form: the hero button before it became a Custom HTML block. Kept in
   step with a.cag-btn--outline-blue so a page still holding the old wp:button
   markup renders identically. */
.cag-page .wp-block-button.cag-btn--outline-blue .wp-block-button__link {
	display: inline-block;
	background: transparent;
	border: 1.5px solid var(--cag-blue);
	border-radius: 8px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0px 8px;
}

.cag-page .wp-block-button.cag-btn--outline-blue .wp-block-button__link:hover {
	background: rgba(57, 152, 242, 0.15);
	color: #fff;
}

/* Elements that used to be spans/divs and are now paragraphs or figures. */
.cag-page p.cag-tag {
	margin: 0 0 8px;
}

.cag-page p.cag-takeaways__card {
	margin: 0;
}

.cag-page p.cag-library__go {
	margin: 0;
}

.cag-library__card h3 a {
	color: inherit;
	text-decoration: none;
}

.cag-library__card h3 a:hover {
	text-decoration: underline;
}

.cag-page .cag-upnext__row p {
	margin: 0;
}

.cag-page .cag-upnext p {
	color: var(--cag-text);
	font-size: 12px;
	margin: 0 0 4px;
}

.cag-page p.cag-framework__focus {
	margin-bottom: 0;
}

.cag-page hr.cag-hr-black {
	background: none;
	border-bottom: none;
	height: auto;
	opacity: 1;
}

.cag-page .cag-cta-band .wp-block-buttons {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Layout hardening
   WordPress block-supports and theme layout styles (is-layout-*,
   wp-container-*, entry-content width caps) load after this stylesheet on
   some sites and flatten the multi-column sections into stacked columns.
   These re-declarations mirror the structural rules above and carry
   !important so the wireframe layout survives regardless of load order.
   The responsive overrides further down must stay !important too.
   -------------------------------------------------------------------------- */

/* Constrained group layouts cap every child's width; only .cag-wrap is
   allowed to own a max-width inside the patterns. */
.cag-page .wp-block-group > :where(:not(.cag-wrap)) {
	max-width: none;
}

.cag-page .cag-hero__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 48px !important;
	align-items: start !important;
}

.cag-page .cag-journey__row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-journey__track {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-journey__detail {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
}

.cag-page .cag-journey__topic-head {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-insights__head {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
}

.cag-page .cag-insights__arrows {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-insights__track {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-insights__slide {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	align-items: start !important;
}

.cag-page .cag-library__filters {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-library__grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
}

.cag-page .cag-a2p2-hero {
	display: grid !important;
	grid-template-columns: 1.1fr 1fr !important;
	align-items: center !important;
}

.cag-page .cag-accordion {
	display: grid !important;
	grid-template-columns: 300px 1fr !important;
}

.cag-page .cag-takeaways__grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
}

.cag-page .cag-alloc__grid {
	display: grid !important;
	grid-template-columns: 1fr 1.15fr !important;
	align-items: stretch !important;
}

.cag-page .cag-alloc__grid > div:first-child {
	display: flex !important;
	flex-direction: column !important;
}

.cag-page .cag-alloc__charts {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr !important;
}

/* The theme styles form controls generously (padding, border, min-height).
   On a range input that shrinks the thumb's travel without shrinking the
   track, so the thumb stops short of both ends. Background is deliberately
   absent here: cag-pages.js sets the fill gradient inline, and a stylesheet
   !important would override it. */
.cag-page .cag-alloc input[type="range"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
	height: 4px !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.cag-page .cag-alloc__chart-arrow {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.cag-page .cag-alloc__slider-head,
.cag-page .cag-alloc__slider-row,
.cag-page .cag-alloc__metrics li {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-panels {
	display: grid !important;
	grid-template-columns: 1fr 1.1fr !important;
	/* WP's generated flex-layout rule for this group sets align-items: center,
	   which stops the two navy panels from matching heights. */
	align-items: stretch !important;
}

.cag-page .cag-panel--navy {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

.cag-page .cag-cta-band {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-article-hero {
	display: grid !important;
	grid-template-columns: 1.2fr 1fr !important;
	align-items: center !important;
}

.cag-page .cag-article-hero__meta {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-article-layout,
.cag-page .wp-block-columns.cag-article-layout {
	display: grid !important;
	grid-template-columns: 296px 1fr !important;
}

.cag-page .cag-article-sidebar {
	display: flex !important;
	flex-direction: column !important;
}

/* The column's 20px gap spaces the sidebar boxes. Kadence's `.single-content`
   margins land on Group blocks (the Related Content box), doubling the gap
   below it, so clear the boxes' own margins. */
.cag-page .cag-article-sidebar > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.cag-page .cag-side-card__iconhead {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-upnext__row {
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: center !important;
}

.cag-page .cag-download-btn,
.cag-page a.cag-download-btn {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-framework__grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
}

.cag-page .cag-framework__col {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-series__grid {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
}

/* The carousel form of the series row is a flex track, not the five-up grid,
   so it has to win back the display the hardening rule above just set. */
.cag-page .cag-series__row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

.cag-page .cag-series__viewport .cag-series__grid {
	display: flex !important;
	flex-direction: row !important;
	grid-template-columns: none !important;
}

.cag-page .cag-cards {
	display: grid !important;
}

.cag-page .cag-cards--2 {
	grid-template-columns: repeat(2, 1fr) !important;
}

.cag-page .cag-cards--3 {
	grid-template-columns: repeat(3, 1fr) !important;
}

/* Kadence's list indent (`.single-content ul` padding) loads after this file
   and shoves the icons in from the intro text above them. */
.cag-page .cag-iconrows {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.cag-page .cag-iconrows > li {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

.cag-page .cag-numbered-box__head,
.cag-page .cag-iconrows > li,
.cag-page .cag-iconlist > li,
.cag-page .cag-marklabel {
	display: flex !important;
	flex-direction: row !important;
}

.cag-page .cag-qbox {
	display: grid !important;
	grid-template-columns: 210px 1fr !important;
	align-items: center !important;
}

.cag-page .cag-iconlist {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
}

/* --------------------------------------------------------------------------
   Responsive
   (!important + .cag-page prefix so these outrank the hardening rules)
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
	.cag-page .cag-article-layout,
	.cag-page .wp-block-columns.cag-article-layout,
	.cag-page .cag-accordion,
	.cag-page .cag-alloc__grid {
		grid-template-columns: 1fr !important;
	}

	.cag-page .cag-framework__grid,
	.cag-page .cag-takeaways__grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.cag-page .cag-series__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.cag-page .cag-series__viewport .cag-series__card {
		flex-basis: calc(50% - 7px);
	}

	.cag-page .cag-journey__card {
		flex-basis: calc(33.34% - 10.7px);
	}

	.cag-page .cag-cards--3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.cag-page .cag-framework--3 .cag-framework__grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 640px) {
	.cag-page .cag-hero__grid,
	.cag-page .cag-a2p2-hero,
	.cag-page .cag-article-hero,
	.cag-page .cag-insights__slide,
	.cag-page .cag-journey__detail,
	.cag-page .cag-library__grid,
	.cag-page .cag-panels,
	.cag-page .cag-framework__grid,
	.cag-page .cag-takeaways__grid {
		grid-template-columns: 1fr !important;
	}

	.cag-page .cag-hero h1,
	.cag-page .cag-a2p2-hero h1,
	.cag-page .cag-article-hero h1 {
		font-size: 30px;
	}

	.cag-page .cag-a2p2-hero,
	.cag-page .cag-article-hero {
		padding: 28px 24px;
	}

	.cag-page .cag-alloc__charts {
		grid-template-columns: 1fr !important;
	}

	.cag-page .cag-alloc__chart-arrow {
		text-align: center;
		transform: rotate(90deg);
	}

	.cag-page .cag-cta-band {
		flex-direction: column !important;
		text-align: center;
	}

	.cag-page .cag-series__grid {
		grid-template-columns: 1fr !important;
	}

	.cag-page .cag-series__viewport .cag-series__card {
		flex-basis: 100%;
	}

	.cag-page .cag-journey__card {
		flex-basis: calc(50% - 8px);
	}

	.cag-page .cag-cards--2,
	.cag-page .cag-cards--3,
	.cag-page .cag-iconlist,
	.cag-page .cag-framework--3 .cag-framework__grid {
		grid-template-columns: 1fr !important;
	}

	/* The label column would squeeze the questions to a few words a line. */
	.cag-page .cag-qbox {
		grid-template-columns: 1fr !important;
	}

	.cag-qbox__side {
		border-right: none;
		border-bottom: 1px solid var(--cag-outline);
		padding: 0 0 16px;
		margin-bottom: 16px;
	}

	.cag-qbox ul {
		padding-left: 20px;
	}
}

/* --------------------------------------------------------------------------
   Round arrow icon buttons - hover state.
   These arrows are bare <button> elements, so Kadence's global button:hover
   painted a solid button box behind the icon. Suppress the box and instead
   swap in the same arrow SVG with the circle in the lighter blue (#718096).
   -------------------------------------------------------------------------- */

.cag-journey__arrow,
.cag-insights__arrow,
.cag-library__arrow,
.cag-library__card a.cag-library__go {
	transition: background-image 0.15s ease;
}

.cag-journey__arrow:hover,
.cag-journey__arrow:focus,
.cag-journey__arrow:active,
.cag-insights__arrow:hover,
.cag-insights__arrow:focus,
.cag-insights__arrow:active,
.cag-library__arrow:hover,
.cag-library__arrow:focus,
.cag-library__arrow:active {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: transparent !important;
	transform: none;
	/* Kadence's button:focus/:hover use the `background` shorthand, which resets
	   background-image to none - restate the default icon so a clicked (still
	   focused) arrow doesn't vanish. The :hover rule below overrides it. */
	background-image: url(../../images/arrowRight.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.cag-journey__arrow[data-cag-prev]:hover,
.cag-journey__arrow[data-cag-prev]:focus,
.cag-journey__arrow[data-cag-prev]:active,
.cag-insights__arrow[data-cag-prev]:hover,
.cag-insights__arrow[data-cag-prev]:focus,
.cag-insights__arrow[data-cag-prev]:active,
.cag-library__arrow[data-cag-prev]:hover,
.cag-library__arrow[data-cag-prev]:focus,
.cag-library__arrow[data-cag-prev]:active {
	transform: scaleX(-1);
}

.cag-journey__arrow:not(:disabled):hover,
.cag-journey__arrow:not(:disabled):focus-visible,
.cag-insights__arrow:not(:disabled):hover,
.cag-insights__arrow:not(:disabled):focus-visible,
.cag-library__arrow:not(:disabled):hover,
.cag-library__arrow:not(:disabled):focus-visible,
.cag-library__card a.cag-library__go:hover,
.cag-library__card a.cag-library__go:focus-visible {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22210%22%20height=%22197%22%20viewBox=%220%200%20210%20197%22%20style=%22fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%22%3E%3Cg%20transform=%22matrix(1,0,0,1,0,-12247)%22%3E%3Cg%20transform=%22matrix(1,0,0,1,2546.27,-0.291243)%22%3E%3Crect%20x=%22-2546.27%22%20y=%2212247.3%22%20width=%22209.051%22%20height=%22196.176%22%20style=%22fill:none%22/%3E%3Cg%20transform=%22matrix(0,-8.33333,-8.33333,0,-2350.08,12437)%22%3E%3Ccircle%20cx=%2211%22%20cy=%2211%22%20r=%2211%22%20style=%22fill:%23718096%22/%3E%3C/g%3E%3Cg%20transform=%22matrix(8.33333,0,0,8.33333,-2475.08,12293.8)%22%3E%3Cpath%20d=%22M0,5.195L5.586,5.195L3.293,2.902C2.902,2.512%202.902,1.879%203.293,1.488C3.683,1.098%204.317,1.098%204.707,1.488L8.707,5.488C9.098,5.879%209.098,6.512%208.707,6.902L4.707,10.902C4.317,11.293%203.683,11.293%203.293,10.902C2.902,10.512%202.902,9.879%203.293,9.488L5.586,7.195L0,7.195C-0.552,7.195%20-1,6.748%20-1,6.195C-1,5.643%20-0.552,5.195%200,5.195Z%22%20style=%22fill:white%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}