/* =======================================================================
 * ax-single — single "Learning Corner" (academypost) article template.
 *
 * Sections: purple hero (back-link / title / meta / category / share),
 * two-column body with a sticky numbered Contents sidebar (desktop) that
 * becomes a collapsible purple pill menu (mobile), a Splide gallery that
 * accepts images + variable-width videos (reels), per-post FAQs (reuse the
 * ax-faqs styling from the Support page) and a "You might also like" grid
 * (reuse the ax-collection card classes).
 *
 * The Contents column is optional: the ACF "Show Contents (ToC)" toggle
 * adds .ax-article__body--no-toc, which collapses the body to a single
 * centred column.
 *
 * All selectors are prefixed with #top to beat Enfold specificity.
 * ===================================================================== */
#top .ax-single {
	--ax-purple: #444192;
	--ax-green: #00bd87;
	--ax-ink: #1a1a1a;
	font-family: "Montserrat", sans-serif;
	background: #ffffff;
}
#top .ax-gallery {
	--ax-purple: #444192;
	--ax-green: #00bd87;
	--ax-ink: #1a1a1a;
}
/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */
#top .ax-hero {
	position: relative;
	background: var(--ax-purple);
	color: #fff;
	padding: 156px 0 74px;
	overflow: hidden;
}
#top .ax-hero__inner {
	max-width: 1446px;
	margin: 0 auto;
	padding: 0 50px;
	position: relative;
}
#top .ax-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-bottom: 26px;
}
#top .ax-hero__back svg {
	width: 18px;
	height: 18px;
	flex: none;
}
#top .ax-hero__title {
	font-size: 55px;
	font-weight: 700;
	line-height: 1.117;
	margin: 0 0 26px;
	max-width: 820px;
	color: #fff;
}
#top .ax-hero__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
#top .ax-hero__read {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}
#top .ax-hero__read svg {
	width: 20px;
	height: 20px;
	flex: none;
}
#top .ax-hero__cat {
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding: 0 16px;
	border-radius: 77px;
	background: #fff;
	border: .6px solid rgba(0,0,0,.2);
	color: var(--ax-purple);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 500;
	transition: color .3s ease, background .3s ease, border-color .3s ease;
}
#top .ax-hero__cat:hover {
	border-color: #00BD87 !important;
	background: #00BD87 !important;
	color: #ffffff !important;
}
/* Share ---------------------------------------------------------------- */
#top .ax-share {
    position: absolute;
    right: 40px;
    top: 54px;
    z-index: 60;
}
#top .ax-share__toggle {
	width: 47px;
	height: 47px;
	border-radius: 77px;
	background: #fff;
	border: .3px solid rgba(0,0,0,.4);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .18s ease;
	padding: 0;
}
#top .ax-share__toggle svg {
	width: 20px;
	height: 20px;
}
#top .ax-share__toggle svg path,
#top .ax-share__toggle svg circle,
#top .ax-share__toggle svg line {
	stroke: var(--ax-purple);
	transition: stroke .18s ease;
}
#top .ax-share.is-open .ax-share__toggle,
#top .ax-share__toggle:hover {
	background: var(--ax-purple);
	border: 0.3px solid #444192 !important;
}
#top .ax-share.is-open .ax-share__toggle svg path,
#top .ax-share.is-open .ax-share__toggle svg circle,
#top .ax-share.is-open .ax-share__toggle svg line,
#top .ax-share__toggle:hover svg path,
#top .ax-share__toggle:hover svg circle,
#top .ax-share__toggle:hover svg line {
	stroke: #fff;
}
#top .ax-share__menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 172px;
	background: #fff;
	border: .3px solid rgba(0,0,0,.55);
	border-radius: 22px;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
#top .ax-share.is-open .ax-share__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* The hero clips its overflow (overflow:hidden), which cuts the open share
 * dropdown at the hero's bottom edge. Lift the clip only while it's open. */
#top .ax-hero:has(.ax-share.is-open) {
	overflow: visible;
}
#top .ax-share__item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 18px;
	background: none;
	border: 0;
	border-top: .3px solid rgba(0,0,0,.14);
	color: var(--ax-purple);
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
#top .ax-share__item:first-child {
	border-top: 0;
}
#top .ax-share__item svg {
	width: 15px;
	height: 15px;
	flex: none;
}
#top .ax-share__item svg path,
#top .ax-share__item svg circle {
	fill: var(--ax-purple);
	transition: fill .15s ease;
}
#top .ax-share__item:hover {
	background: var(--ax-purple);
	color: #fff;
	font-weight: 600;
}
#top .ax-share__item:hover svg path,
#top .ax-share__item:hover svg circle {
	fill: #fff;
}
#top .ax-share__item.is-copied {
	background: var(--ax-green);
	color: #fff;
}
#top .ax-share__item.is-copied svg path,
#top .ax-share__item.is-copied svg circle {
	fill: #fff;
}
/* ---------------------------------------------------------------------
 * Body layout
 * ------------------------------------------------------------------- */
#top .ax-article {
	max-width: 1456px;
	margin: 0 auto;
	padding: 56px 50px 40px;
}
#top .ax-article__body {
	display: grid;
	grid-template-columns: minmax(0,1fr) 300px;
	gap: 32px 56px;
	align-items: start;
}
/* The featured image and Contents render first in the markup (so on mobile
 * the image sits at the top and the Contents pill directly under it). On
 * desktop the featured image and prose stay in the left column while the
 * Contents occupies the right column and spans the rows so it stays sticky. */
#top .ax-article__body .ax-featured {
	grid-column: 1;
	margin-bottom: 0;
}
#top .ax-article__body .ax-prose {
	grid-column: 1;
}
#top .ax-article__body .ax-toc {
	grid-column: 2;
	grid-row: 1 / span 3;
}
/* ToC toggled off in ACF (.ax-article__body--no-toc) — collapse to a single,
 * centred content column. Drop the max-width/margin pair if you'd rather the
 * prose run the full 1456px width of .ax-article. */
#top .ax-article__body--no-toc {
	grid-template-columns: minmax(0,1fr);
	gap: 0;
	max-width: 1000px;
	margin: 0 auto;
}
#top .ax-article__body--no-toc .ax-featured,
#top .ax-article__body--no-toc .ax-prose,
#top .ax-article__body--no-toc .ax-single__faqs {
	grid-column: 1;
}
#top .ax-article__body--no-toc .ax-featured {
	margin-bottom: 34px;
}
/* Contents (ToC) ------------------------------------------------------- */
#top .ax-toc {
	position: sticky;
	top: 110px;
	background: transparent;
	backdrop-filter: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}
#top .ax-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
#top .ax-toc__title {
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--ax-purple);
	margin: 0;
}
#top .ax-toc__chev {
	display: none;
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .25s ease;
}
#top .ax-toc__list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}
#top .ax-toc__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 9px 0;
}
#top .ax-toc__num {
	flex: none;
	width: 27px;
	height: 27px;
	border-radius: 77px;
	background: rgba(255,255,255,.45);
	border: .6px solid rgba(0,0,0,.2);
	display: grid;
	place-items: center;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--ax-purple);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#top .ax-toc__link {
	font-family: "Montserrat", sans-serif !important;
	font-size: 15px;
	font-weight: 500;
	color: var(--ax-purple) !important;
	line-height: 1.223;
	text-decoration: none !important;
	transition: color .2s ease, font-weight .2s ease;
}
#top .ax-toc__link:hover {
	color: var(--ax-purple) !important;
	text-decoration: none !important;
}
#top .ax-toc__item.is-active .ax-toc__num {
	background: var(--ax-green);
	border-color: var(--ax-green);
	color: #fff;
}
#top .ax-toc__item.is-active .ax-toc__link {
	color: var(--ax-green) !important;
	font-weight: 700;
}
/* ---------------------------------------------------------------------
 * Prose
 * ------------------------------------------------------------------- */
#top .ax-prose__lead-cta {
	font-weight: 700;
	color: var(--ax-purple);
	font-size: 20px;
}
/* ---------------------------------------------------------------------
 * Featured image (top of the article content)
 * ------------------------------------------------------------------- */
#top .ax-featured {
	margin: 0 0 34px;
}
#top .ax-featured__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 25px;
}
/* ---------------------------------------------------------------------
 * Gallery (Splide)
 * ------------------------------------------------------------------- */
#top .ax-gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 40px 0 8px;
}
/* inset the carousel so the arrows have side gutters to sit in */
#top .ax-gallery .splide {
	position: relative;
	align-self: stretch;
	margin: 0 84px !important;
}
#top .ax-gallery .splide__track {
	border-radius: 25px;
}
/* one slide per view — center the media (full-width images fill; reels stay
 * their natural portrait width, centered, with controls aligned to them) */
#top .ax-gallery .splide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}
#top .ax-gallery__slide {
	position: relative;
	height: 412px;
	border-radius: 25px;
	overflow: hidden;
	background: #c6c6c6;
}
#top .ax-gallery__slide--image {
	width: 100%;
}
#top .ax-gallery__slide--video {
	width: auto;
}
#top .ax-gallery__slide img,
#top .ax-gallery__slide video {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}
#top .ax-gallery__slide--image img {
	width: 100%;
	object-fit: cover;
}
/* video overlay chips */
#top .ax-gallery__label {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border-radius: 77px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.52);
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 4px rgba(0,0,0,.05);
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .14px;
	display: none;
}
#top .ax-gallery__label img,
#top .ax-gallery__label svg {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex: none;
}
#top .ax-gallery__btn {
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 77px;
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.52);
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 4px rgba(0,0,0,.05);
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
#top .ax-gallery__btn svg {
    width: 13px;
    height: 13px;
    fill: #fff;
}
#top .ax-gallery__btn--play {
	left: 16px;
	bottom: 16px;
}
#top .ax-gallery__btn--mute {
	right: 16px;
	bottom: 16px;
}
#top .ax-gallery__slide.is-playing .ax-gallery__ico-play {
	display: none;
}
#top .ax-gallery__slide:not(.is-playing) .ax-gallery__ico-pause {
	display: none;
}
#top .ax-gallery__slide.is-muted .ax-gallery__ico-unmute {
	display: none;
}
#top .ax-gallery__slide:not(.is-muted) .ax-gallery__ico-mute {
	display: none;
}
#top .ax-gallery__caption {
	text-align: center;
	color: var(--ax-purple) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 12px auto 6px;
	max-width: 460px;
}
/* pagination — zoom-style pill */
#top .ax-gallery .splide__pagination {
	display: flex;
	position: relative;
    justify-content: center;
    gap: 12px;
    padding: 0;
    margin: 32px 0 0;
}
#top .ax-gallery .splide__pagination li {
	line-height: 0;
}
#top .ax-gallery .splide__pagination__page {
	width: 12px;
	height: 12px;
	margin: 0;
	border-radius: 16px;
	background: #d9d9d9;
	opacity: 1;
	transform: none;
	transition: width .3s ease-in-out, background .3s ease-in-out, transform .3s ease-in-out;
}
#top .ax-gallery .splide__pagination__page:hover {
    transform: scale(1.2);
}
#top .ax-gallery .splide__pagination__page.is-active {
	width: 31px;
	background: var(--ax-purple);
}
/* prev / next arrows — purple circles with white chevrons.
 * position/top/transform are forced with !important because Enfold's button
 * reset can override Splide's absolute positioning and drop the arrows into
 * normal flow (i.e. stacked at the top). */
#top .ax-gallery .splide {
	position: relative;
}
#top .ax-gallery .splide__arrows {
	pointer-events: none;
}
#top .ax-gallery .splide__arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 4;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ax-purple);
	box-shadow: 0 6px 16px rgba(68,65,146,.28);
	opacity: 1;
	pointer-events: auto;
	transition: background .2s ease, opacity .2s ease;
}
#top .ax-gallery .splide__arrow svg {
    width: auto;
    height: 18px;
    fill: #fff;
    transform: none !important;
    position: relative;
    top: 1px;
    left: 1px;
}
#top .ax-gallery .splide__arrow--prev {
	left: -64px !important;
	right: auto !important;
}
#top .ax-gallery .splide__arrow--next {
	right: -64px !important;
	left: auto !important;
}
#top .ax-gallery .splide__arrow:hover {
	background: var(--ax-green);
}
#top .ax-gallery .splide__arrow:disabled {
	opacity: .55;
	cursor: default;
}
/* dots sit under the caption (image -> caption -> dots) */
#top .ax-gallery .ax-gallery__caption {
	order: 1;
}
#top .ax-gallery .splide__pagination {
	order: 2;
}
/* ---------------------------------------------------------------------
 * FAQs (title only — the accordion reuses ax-faqs.css)
 * ------------------------------------------------------------------- */
#top .ax-single__faqs {
	max-width: 1180px;
	margin: 30px auto 0;
	padding: 0 40px;
}
/* When rendered inside the two-column body, the FAQs sit under the content
 * in the main (left) column — not as a full-width band. */
#top .ax-article__body .ax-single__faqs {
	grid-column: 1;
	max-width: none;
	margin: 46px 0 0;
	padding: 0;
}
#top .ax-single__faqs-title {
	font-size: 30px;
	font-weight: 700;
	color: var(--ax-purple);
	margin: 0 0 22px;
}
/* ---------------------------------------------------------------------
 * Related ("You might also like") — its own full-width grey band.
 * Cards reuse the ax-collection card classes (styled by ax-collection.css).
 * ------------------------------------------------------------------- */
#top .ax-related {
	background: #f5f5f5;
	margin: 0px;
	padding: 60px 0 66px;
}
#top .ax-related__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 50px;
}
#top .ax-related__title {
	font-size: 30px;
	font-weight: 700;
	color: var(--ax-purple);
	margin: 0 0 30px;
}
/* Desktop / no-JS: the related list is a plain 3-up grid. Scoped to
 * :not(.is-active) so it doesn't fight Splide once it mounts on mobile. */
#top .ax-related .ax-related__grid {
	list-style: none;
	margin: 0;
	padding: 0;
}
#top .ax-related .ax-related__grid > .splide__slide {
	list-style: none;
}
#top .ax-related .splide:not(.is-active) .ax-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
/* Related carousel pagination (mobile) — same zoom-pill style as the gallery */
#top .ax-related .splide__pagination {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 0;
	margin: 30px 0 0;
}
#top .ax-related .splide__pagination li {
	line-height: 0;
}
#top .ax-related .splide__pagination__page {
	width: 12px;
	height: 12px;
	margin: 0;
	border-radius: 16px;
	background: #d9d9d9;
	opacity: 1;
	transform: none;
	transition: width .3s ease-in-out, background .3s ease-in-out;
}
#top .ax-related .splide__pagination__page.is-active {
	width: 31px;
	background: var(--ax-purple);
}
/* Self-contained card styling so the related grid renders even if
 * ax-collection.css isn't enqueued on this page. Uses the same
 * ax-collection__* classes for visual parity and is scoped to .ax-related so
 * it never collides with the collection grid elsewhere. */
#top .ax-related .ax-collection__card {
	position: relative;
	display: block;
	height: 411px;
	border-radius: 25px;
	overflow: hidden;
	text-decoration: none;
	background: #c6c6c6;
	transition: box-shadow .55s ease;
	grid-column: unset;
}
#top .ax-related .ax-collection__card:hover {
	box-shadow: -2px 3px 10px rgba(0,0,0,.28);
}
#top .ax-related .ax-collection__card-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .55s ease, filter .35s ease;
}
#top .ax-related .ax-collection__card:hover .ax-collection__card-media {
	transform: scale(1.05);
	filter: brightness(1.06);
}
#top .ax-related .ax-collection__card-tag {
	position: absolute;
	top: 17px;
	left: 17px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding: 0 15px;
	border-radius: 77px;
	background: rgba(255,255,255,.65);
	border: .6px solid rgba(0,0,0,.2);
	color: var(--ax-purple);
	font-family: "Inter", sans-serif;
	font-size: 13px;
	font-weight: 600;
}
#top .ax-related .ax-collection__card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	gap: 14px;
	padding: 24px 24px 26px;
	background: rgba(0,0,0,.14);
	backdrop-filter: blur(12px);
	border-top: 1px solid rgba(255,255,255,.3);
}
#top .ax-related .ax-collection__card-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	line-height: 27px;
}
#top .ax-related .ax-collection__card-cta {
	position: relative;
	flex: 0 0 116px;
	height: 44px;
}
#top .ax-related .ax-collection__card-arrow {
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	transition: opacity .3s ease;
}
#top .ax-related .ax-collection__card-arrow svg {
	width: 18px;
	height: 18px;
}
#top .ax-related .ax-collection__card-read {
	position: absolute;
	right: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: 77px;
	background: var(--ax-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .3s ease;
	transform: unset;
}
#top .ax-related .ax-collection__card:hover .ax-collection__card-arrow {
	opacity: 0;
}
#top .ax-related .ax-collection__card:hover .ax-collection__card-read {
	opacity: 1;
}
#top .ax-related__more {
	display: flex;
	justify-content: center;
	margin: 44px 0 0;
}
#top .ax-related__more a {
	display: inline-flex;
	align-items: center;
	height: 51px;
	padding: 0 34px;
	border-radius: 77px;
	background: var(--ax-purple);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}
#top .ax-hero__mobile {
	display: none !important;
}
/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------- */
@media (max-width: 989px) {
	#top .ax-hero {
		padding: 30px 0 30px;
	}

	#top .ax-article {
		padding: 30px 50px 40px;
	}
	#top .ax-hero__title {
		font-size: 32px;
	}
	#top .ax-share {
        position: absolute;
        margin-top: 0px;
        top: -10px;
        right: 20px;
    }
	#top .ax-share__menu {
		left: unset;
		right: 0px;
	}

	#top .ax-share__toggle {
		width: 40px;
		height: 40px;
	}
	#top .ax-article__body {
		grid-template-columns: 1fr;
		gap: 0;
	}
	#top .ax-article__body--no-toc {
		max-width: none;
	}
	#top .ax-article__body .ax-toc {
		grid-column: 1;
		grid-row: auto;
	}
	#top .ax-article__body .ax-featured {
		margin-bottom: 24px;
	}
	#top .ax-article__body--no-toc .ax-featured {
		margin-bottom: 24px;
	}
	/* ToC becomes a collapsible pill menu */
	#top .ax-toc {
		position: static;
		margin: 0 0 30px;
		padding: 0;
		background: var(--ax-purple);
		border: .6px solid rgba(0,0,0,.2);
		border-radius: 77px;
		backdrop-filter: none;
		box-shadow: none;
		overflow: hidden;
		transition: border-radius .2s ease, background .2s ease;
	}
	#top .ax-toc.is-open {
		background: #fff;
		border-color: rgba(0,0,0,.18);
		border-radius: 35px 33px 23px 23px;
	}
	#top .ax-toc__head {
		cursor: pointer;
		padding: 11px 26px;
	}
	#top .ax-toc.is-open .ax-toc__head {
		padding: 18px 26px 10px;
	}
	#top .ax-toc__title {
		font-family: "Inter", sans-serif;
		font-size: 17px;
		font-weight: 600;
		color: #fff;
		text-transform: uppercase;
	}
	#top .ax-toc.is-open .ax-toc__title {
		font-size: 18px;
		color: var(--ax-purple);
	}
	#top .ax-toc__chev {
		display: block;
	}
	#top .ax-toc__chev path {
		stroke: #fff;
	}
	#top .ax-toc.is-open .ax-toc__chev {
		transform: rotate(180deg);
	}
	#top .ax-toc.is-open .ax-toc__chev path {
		stroke: var(--ax-purple);
	}
	#top .ax-toc__list {
		display: none;
		margin: 0;
		padding: 4px 12px 16px;
	}
	#top .ax-toc.is-open .ax-toc__list {
		display: block;
	}
	#top .ax-toc__item {
		padding: 9px 10px;
		border-top: .3px solid rgba(0,0,0,.1);
		border-radius: 32px;
	}
	#top .ax-toc__item:first-child {
		border-top: 0;
	}
	#top .ax-toc__num {
		background: rgba(255,255,255,.45);
		border-color: rgba(0,0,0,.2);
	}
	#top .ax-toc__item.is-active {
		background: var(--ax-green);
	}
	#top .ax-toc__item.is-active .ax-toc__num {
		background: #fff;
		border-color: #fff;
		color: var(--ax-green);
	}
	#top .ax-toc__item.is-active .ax-toc__link {
		color: #fff !important;
		font-weight: 500;
	}
	#top .ax-featured__img {
		border-radius: 18px;
	}
	#top .ax-gallery .splide {
		margin: 0 !important;
	}
	#top .ax-gallery__slide {
		height: 380px;
	}
	#top .ax-gallery .splide__arrow--prev {
		left: 8px !important;
	}
	#top .ax-gallery .splide__arrow--next {
		right: 8px !important;
	}
	#top .ax-related .splide:not(.is-active) .ax-related__grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767px) {
	#top .ax-hero__inner {
		padding: 0 20px;
	}

	#top .ax-article {
		padding: 30px 20px 40px;
	}

	#top .ax-hero__back {
		gap: 6px;
	}

	#top .ax-related {
		padding: 60px 0 60px;
	}
	#top .ax-related__inner {
		padding: 0 0px;
	}

	#top .ax-related .ax-collection__card-cta {
		flex: 0 0 80px;
	}

	#top .ax-related__title {
		padding: 0px 20px;
	}

	#top .ax-related .ax-collection__card {
		height: 378px;
		min-height: 378px;
	}

	#top .ax-gallery .splide {
		min-height: 265px;
	}

	#top .splide__slide .ax-gallery__slide {
        height: 232px;
		transition: height .2s ease;
    }

	#top .splide__slide.is-active .ax-gallery__slide {
        height: 265px;
    }

	#top .splide__arrows {
		display: none !important;
	}

	#top .ax-gallery .splide__track {
		overflow: visible;
	}

	#top .ax-gallery__slide video {
		width: 100%;
	}

	#top .ax-hero {
        padding: 100px 0 30px !important;
    }

	#top.single-post .ax-hero__mobile {
		display: block !important;
	}

	#top.single-post .ax-article__body .ax-featured {
		display: none !important;
	}

	#top.single-post .ax-featured {
		margin: 0 0 26px;
	}
}