/*
 * Insight article layout (v1.8.42).
 * Editorial reading column in the Senior HR Forum teal system (Maven Pro + Lato).
 * The hero has no decorative fee. Key figures and the exhibit keep their numbers.
 * Scroll-linked hero motion and the reading-progress line are in assets/js/insight-hero.js.
 * Scroll fade for the three explainer cards is the shared reveal in assets/js/reveal.js
 * (class shf-reveal, added to .shf-reveal-stagger children). Nothing here is hidden
 * unless that script has added .shf-reveal-on, and the hide itself is only when the
 * visitor has not asked for reduced motion (brand.css).
 */

.shf-insight {
	--shf-insight-rule: var(--shf-teal, #0B6A85);
	color: var(--shf-slate, #3D4F66);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.shf-editor-note {
	margin: 0 0 1.35rem;
	padding: 12px 14px;
	border: 1.5px dashed var(--shf-insight-rule);
	border-radius: 12px;
	background: var(--shf-cyan-soft, #DFF4F8);
	color: var(--shf-ink, #0B1A33);
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Meta: eyebrow · date · reading time */
.shf-insight__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0;
	margin: 0 0 0.85rem;
	color: var(--shf-slate, #3D4F66);
	font-size: 0.95rem;
	line-height: 1.4;
}
.shf-insight__meta > * {
	margin: 0 !important;
}
.shf-insight__meta > :empty {
	display: none;
}
.shf-insight__meta > * + *::before {
	content: "\00b7";
	margin: 0 0.55rem;
	color: var(--shf-cyan, #22B8CF);
	font-weight: 700;
}
.shf-insight__eyebrow {
	margin: 0 !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.14em;
}
.shf-insight__date,
.shf-insight__date time,
.shf-insight__read {
	color: var(--shf-slate, #3D4F66);
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	text-transform: none;
}

.shf-insight .shf-insight__title {
	margin: 0.15rem 0 0.85rem !important;
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: clamp(2.35rem, 1.2rem + 2.8vw, 3.35rem) !important;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.08 !important;
	text-wrap: balance;
}

.shf-insight__standfirst {
	margin: 0 0 1.35rem !important;
	color: var(--shf-ink, #0B1A33);
	font-size: clamp(1.28rem, 1.08rem + 0.55vw, 1.55rem);
	line-height: 1.45;
	text-wrap: pretty;
}

/* Full-width hero: silent looping video (assets/media/insight-hero.mp4) under a dark wash.
   No photo, no people. Entrance is CSS. Reduced motion shows the poster still and hides the video. */
.shf-insight__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	min-height: clamp(520px, 78vh, 720px);
	margin: 0 0 2rem;
	padding: 0;
	background:
		linear-gradient(105deg, rgba(8, 18, 36, 0.94) 0%, rgba(11, 26, 51, 0.82) 46%, rgba(11, 106, 133, 0.55) 100%),
		#0B1A33;
	color: #fff;
}
.shf-insight__hero-art {
	position: absolute;
	inset: -14% 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.shf-insight__hero-poster,
.shf-insight__hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.shf-insight__hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 18, 36, 0.92) 0%, rgba(8, 18, 36, 0.78) 36%, rgba(8, 18, 36, 0.42) 68%, rgba(8, 18, 36, 0.22) 100%);
}
.shf-insight__hero-copy {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(520px, 78vh, 720px);
	padding: clamp(4.5rem, 10vh, 6.5rem) clamp(1.25rem, 5vw, 4rem) clamp(2.25rem, 6vh, 3.75rem);
}
.shf-insight__hero-text {
	max-width: 46rem;
}
.shf-insight__hero .shf-insight__meta {
	margin-bottom: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
}
.shf-insight__hero .shf-insight__meta > * + *::before {
	color: #22B8CF;
}
.shf-insight__hero .shf-insight__eyebrow {
	color: #7FE3F2 !important;
	font-size: 0.84rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.shf-insight__hero .shf-insight__date,
.shf-insight__hero .shf-insight__date time,
.shf-insight__hero .shf-insight__read {
	color: rgba(255, 255, 255, 0.82);
}
.shf-insight .shf-insight__hero .shf-insight__title {
	margin: 0.1rem 0 0.95rem !important;
	color: #fff;
	font-size: clamp(2.7rem, 1.2rem + 3.6vw, 4.35rem) !important;
	line-height: 1.05 !important;
	max-width: 16em;
}
.shf-insight__hero .shf-insight__standfirst {
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(1.28rem, 1.05rem + 0.85vw, 1.65rem);
	line-height: 1.4;
	max-width: 36em;
}
/* v1.8.41: no decorative fee on the hero. Drafts that still contain the old
   paragraph stay out of the page. Key figures and the exhibit keep their fees. */
.shf-insight__hero-figure {
	display: none !important;
}

/* Break the hero out of the article column on the published post.
   v1.8.41 also widens the reading measure on large screens and leaves the
   side gutters for the progress markers. Other articles, and event templates,
   stay on the 760px column. */
body.shf-insight-post .shf-single {
	overflow-x: clip;
}
body.shf-insight-post {
	--shf-insight-measure: min(720px, 100%);
}
@media (min-width: 782px) {
	body.shf-insight-post {
		--shf-insight-measure: min(840px, calc(100vw - 2.75rem));
	}
}
@media (min-width: 1280px) {
	body.shf-insight-post {
		--shf-insight-measure: min(960px, calc(100vw - 360px));
	}
}
body.shf-insight-post .shf-article.shf-article--v18 {
	padding-top: 0 !important;
}
body.shf-insight-post .shf-article.shf-article--v18 > .shf-article__content,
body.shf-insight-post .shf-article.shf-article--v18 > .shf-article__join,
body.shf-insight-post .shf-article.shf-article--v18 > .shf-article__pager {
	max-width: var(--shf-insight-measure) !important;
	width: 100%;
}
body.shf-insight-post .shf-article__content > .shf-insight {
	max-width: none !important;
	width: 100%;
}
body.shf-insight-post .shf-insight > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--shf-insight-measure) !important;
}
/* Key figures and the exhibit use the right-hand space past the reading column. */
@media (min-width: 1100px) {
	body.shf-insight-post .shf-article__content .shf-insight > .shf-insight__stats,
	body.shf-insight-post .shf-article__content .shf-insight > .shf-insight__stats-label,
	body.shf-insight-post .shf-article__content .shf-insight > .shf-insight__exhibit {
		box-sizing: border-box;
		width: min(1160px, calc(100vw - 13.5rem));
		max-width: min(1160px, calc(100vw - 13.5rem)) !important;
	}
}
body.shf-insight-post .shf-article__content .shf-insight__hero {
	width: 100vw;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}
.shf-insight :is(h2, h3) {
	scroll-margin-top: 5.5rem;
}
.admin-bar .shf-insight :is(h2, h3) {
	scroll-margin-top: 7.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.shf-insight__hero-art {
		animation: shf-hero-art-in 1.05s ease both;
	}
	.shf-insight__hero-poster,
	.shf-insight__hero-video {
		transform: translate3d(0, calc(var(--shf-hero-p, 0) * 8%), 0) scale(calc(1 + var(--shf-hero-p, 0) * 0.05));
		transform-origin: center center;
	}
	.shf-insight__hero-copy {
		opacity: calc(1 - var(--shf-hero-p, 0) * 0.72);
		transform: translate3d(0, calc(var(--shf-hero-p, 0) * -36px), 0);
	}
	.shf-insight__hero-text > * {
		animation: shf-hero-copy-in .75s cubic-bezier(.2, .7, .2, 1) both;
	}
	.shf-insight__hero-text > *:nth-child(1) { animation-delay: .04s; }
	.shf-insight__hero-text > *:nth-child(2) { animation-delay: .14s; }
	.shf-insight__hero-text > *:nth-child(3) { animation-delay: .24s; }
}
@keyframes shf-hero-copy-in {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to { opacity: 1; transform: none; }
}
@keyframes shf-hero-art-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.shf-insight__hero-art,
	.shf-insight__hero-poster,
	.shf-insight__hero-video,
	.shf-insight__hero-copy,
	.shf-insight__hero-text > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	/* Still first frame. The video does not play (insight-hero.js also refuses). */
	.shf-insight__hero-video {
		display: none !important;
	}
}
@media (max-width: 699px) {
	.shf-insight__hero,
	.shf-insight__hero-copy {
		min-height: clamp(460px, 82vh, 620px);
	}
	.shf-insight__hero-scrim {
		background: linear-gradient(180deg, rgba(8, 18, 36, 0.35) 0%, rgba(8, 18, 36, 0.55) 38%, rgba(8, 18, 36, 0.9) 100%);
	}
}

.shf-insight__answer {
	margin: 0 0 1.6rem;
	padding: 1rem 1.1rem 1.05rem 1.15rem;
	background: var(--shf-cyan-soft, #DFF4F8);
	border-left: 4px solid var(--shf-insight-rule);
	border-radius: 0 12px 12px 0;
}
.shf-insight__answer-kicker,
.shf-insight__stats-label,
.shf-insight__takeaways-label {
	margin: 0 0 0.45rem !important;
	color: var(--shf-insight-rule);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: 0.84rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.shf-insight__answer p:last-child {
	margin-bottom: 0;
}

.shf-insight__stats-label {
	margin-top: 0.4rem !important;
}

/* 2–4 figures. Block columns stay a grid so the row does not become brochure cards. */
.shf-insight .shf-insight__stats.wp-block-columns,
.shf-insight .shf-insight__cards.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 0.4rem !important;
	align-items: stretch;
}
.shf-insight .shf-insight__stats.wp-block-columns {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-bottom: 0.85rem !important;
}
.shf-insight .shf-insight__stats > .wp-block-column,
.shf-insight .shf-insight__cards > .wp-block-column {
	flex-basis: auto !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}
.shf-insight-stat {
	container-type: inline-size;
	padding: 1.35rem 1rem 1.15rem;
	border-top: 4px solid var(--shf-insight-rule);
	border-radius: 0 0 14px 14px;
	background: linear-gradient(180deg, rgba(223, 244, 248, 0.95) 0%, rgba(223, 244, 248, 0) 5.5rem);
}
.shf-insight-stat__num {
	margin: 0 0 0.7rem !important;
	color: var(--shf-insight-rule);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: clamp(3rem, 17cqi, 4.6rem) !important;
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.96;
	font-variant-numeric: tabular-nums;
}
.shf-insight-stat__num--todo {
	display: inline-block;
	padding: 0.35rem 0.5rem;
	border: 1.5px dashed var(--shf-insight-rule);
	border-radius: 8px;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
}
.shf-insight-stat__label {
	margin: 0 !important;
	color: var(--shf-slate, #3D4F66);
	font-size: 1.3rem !important;
	line-height: 1.4;
}
/* The three figure boxes fade and rise as they enter. Hidden only after the
   script adds .shf-insight-motion, so a page without JavaScript stays readable. */
@media (prefers-reduced-motion: no-preference) {
	.shf-insight-motion .shf-insight-stat {
		opacity: 0;
		transform: translate3d(0, 28px, 0);
	}
	.shf-insight-motion .shf-insight-stat.is-in {
		opacity: 1;
		transform: none;
		transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
		transition-delay: var(--shf-stat-delay, 0ms);
	}
}

.shf-insight > h2,
.shf-insight .shf-insight__means > h2,
.shf-insight .shf-insight__faq > h2,
.shf-insight .shf-insight__explain > h2 {
	margin: 2.15rem 0 0.45rem;
	color: var(--shf-ink, #0B1A33);
	font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.7rem);
	line-height: 1.25;
	text-wrap: balance;
}
.shf-insight > h2:first-of-type,
.shf-insight .shf-insight__explain > h2 {
	margin-top: 1.35rem;
}
.shf-insight p {
	text-wrap: pretty;
}

/* Pull quote: thick left rule, name and title in the cite. No portrait. */
.shf-insight figure.shf-pull.wp-block-pullquote,
.shf-quote-carousel figure.shf-pull.wp-block-pullquote {
	margin: 1.5rem 0;
	padding: 0.15rem 0 0.15rem 1.15rem;
	border: 0;
	border-left: 4px solid var(--shf-insight-rule, var(--shf-teal, #0B6A85));
	text-align: left;
	color: var(--shf-ink, #0B1A33);
}
.shf-insight .shf-pull blockquote,
.shf-quote-carousel .shf-pull blockquote {
	margin: 0;
}
.shf-insight .shf-pull p,
.shf-quote-carousel .shf-pull p {
	margin: 0;
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: clamp(1.25rem, 1rem + 0.7vw, 1.55rem);
	font-weight: 500;
	line-height: 1.35;
	text-wrap: balance;
}
.shf-insight .shf-pull cite,
.shf-quote-carousel .shf-pull cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--shf-slate, #3D4F66);
	font-family: var(--wp--preset--font-family--lato, Lato, sans-serif);
	font-size: 0.92rem;
	font-style: normal;
	line-height: 1.4;
}

/* Framed explainer. Cards themselves fade up via reveal.js. */
.shf-insight__explain {
	margin-top: 1.75rem;
	padding: 1.15rem 1rem 1rem;
	border: 1px solid var(--shf-line, #D5E6EA);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(223, 244, 248, 0.9) 0%, rgba(255, 255, 255, 0) 4.5rem);
}
.shf-insight__explain > .shf-eyebrow {
	margin-bottom: 0.25rem;
}
.shf-insight-card {
	padding: 0.95rem 0.9rem 1rem;
	background: #fff;
	border: 1px solid var(--shf-line, #D5E6EA);
	border-top: 3px solid var(--shf-insight-rule);
	border-radius: 12px;
}
.shf-insight-card .shf-eyebrow {
	margin: 0 0 0.35rem !important;
	font-size: 0.68rem !important;
}
.shf-insight-card__title {
	margin: 0 0 0.35rem !important;
	color: var(--shf-ink, #0B1A33);
	font-size: 1.05rem !important;
	line-height: 1.3 !important;
}
.shf-insight-card p:last-child {
	margin: 0 !important;
	font-size: 0.98rem;
	line-height: 1.45;
}

.shf-insight__exhibit,
.shf-insight__note {
	margin: 1.35rem 0;
	padding: 0.95rem 1rem 1rem;
	border-radius: 12px;
}
.shf-insight__exhibit {
	border: 1px solid var(--shf-line, #D5E6EA);
	background: var(--wp--preset--color--off-white, #F5FAFB);
	padding: 1.35rem 1.4rem 1.25rem;
	font-size: 1.35rem;
	line-height: 1.45;
}
.shf-insight__exhibit .shf-eyebrow {
	font-size: 1.02rem !important;
	letter-spacing: 0.14em;
}
.shf-insight__exhibit :is(h2, h3, h4, .wp-block-heading),
.shf-insight__note h3 {
	margin: 0.2rem 0 0.7rem;
	font-size: clamp(1.85rem, 1.3rem + 1.35vw, 2.55rem) !important;
	line-height: 1.18 !important;
}
.shf-insight__exhibit :is(p, li, td, th, figcaption, span) {
	font-size: 1.32rem !important;
	line-height: 1.45 !important;
}
.shf-insight__exhibit table {
	width: 100%;
	font-size: 1.32rem;
}
.shf-insight__exhibit :is(td, th) {
	padding: 0.7rem 0.55rem;
}
.shf-insight__exhibit-slot {
	margin: 0.6rem 0 !important;
	padding: 1.1rem 0.8rem;
	border: 1.5px dashed var(--shf-line, #D5E6EA);
	border-radius: 10px;
	color: var(--shf-slate, #3D4F66);
	text-align: center;
}
.shf-insight__exhibit-source,
.shf-insight__exhibit :is(p, figcaption):last-child,
.shf-insight__note p:last-child {
	margin-bottom: 0 !important;
	color: var(--shf-slate, #3D4F66);
	line-height: 1.45;
}
.shf-insight__exhibit-source,
.shf-insight__exhibit :is(p, figcaption):last-child {
	font-size: 1.15rem !important;
}
.shf-insight__note {
	background: var(--shf-cyan-soft, #DFF4F8);
	border-left: 4px solid var(--shf-insight-rule);
}

.shf-insight__takeaways {
	margin-top: 1.1rem;
	padding: 1rem 1rem 0.4rem;
	background: var(--wp--preset--color--off-white, #F5FAFB);
	border-radius: 12px;
	border: 1px solid var(--shf-line, #D5E6EA);
}
.shf-insight__takes {
	margin: 0.35rem 0 0.85rem;
	padding-left: 1.25rem;
}
.shf-insight__takes li {
	margin: 0 0 0.75rem;
	padding-left: 0.2rem;
	line-height: 1.5;
}
.shf-insight__takes li::marker {
	color: var(--shf-insight-rule);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700;
}
.shf-insight__takes strong {
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
}

.shf-insight__faq {
	margin-top: 0.5rem;
}
.shf-insight__faq-item {
	margin: 0;
	border-bottom: 1px solid var(--shf-line, #D5E6EA);
	padding: 0.15rem 0;
}
.shf-insight__faq-item summary {
	cursor: pointer;
	padding: 0.75rem 0.2rem;
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700;
	line-height: 1.35;
}
.shf-insight__faq-item summary:focus-visible {
	outline: 3px solid var(--shf-cyan, #22B8CF);
	outline-offset: 3px;
	border-radius: 4px;
}
.shf-insight__faq-item p {
	margin: 0 0 0.85rem;
}

.shf-insight__close {
	margin: 1.75rem 0 1.25rem !important;
	padding-top: 1.15rem;
	border-top: 1px solid var(--shf-line, #D5E6EA);
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: 1.28rem;
	font-weight: 500;
	line-height: 1.4;
	text-wrap: balance;
}

.shf-insight__sources {
	margin: 0.4rem 0 0.2rem;
	padding-left: 1.35rem;
	color: var(--shf-slate, #3D4F66);
	font-size: 0.92rem;
	line-height: 1.5;
}
.shf-insight__sources li {
	margin: 0 0 0.65rem;
	padding-left: 0.25rem;
}
.shf-insight__sources li::marker {
	color: var(--shf-insight-rule);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700;
}

/* Quote carousel. Until the script marks .is-ready, every quote is visible. */
.shf-quote-carousel.is-ready {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
.shf-quote-carousel.is-ready > .wp-block-pullquote {
	grid-row: 1;
	grid-column: 1;
	margin-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translate3d(0, 12px, 0);
}
.shf-quote-carousel.is-ready > .wp-block-pullquote.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.shf-quote-carousel.is-ready > .wp-block-pullquote.is-active {
		transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
	}
}
.shf-quote-carousel__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 0.75rem;
	margin-top: 0.35rem;
}
.shf-quote-carousel__nav button {
	appearance: none;
	min-height: 44px;
	margin: 0;
	padding: 0.4rem 0.95rem;
	border: 1px solid var(--shf-line, #D5E6EA);
	border-radius: 999px;
	background: #fff;
	color: var(--shf-teal-dark, #08546A);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}
.shf-quote-carousel__nav button:hover,
.shf-quote-carousel__nav button:focus-visible {
	border-color: var(--shf-teal, #0B6A85);
	background: var(--shf-cyan-soft, #DFF4F8);
}
.shf-quote-carousel__nav button:focus-visible {
	outline: 3px solid var(--shf-cyan, #22B8CF);
	outline-offset: 2px;
}
.shf-quote-carousel__status {
	margin: 0;
	color: var(--shf-slate, #3D4F66);
	font-size: 0.9rem;
}

/* Article template already spaces headings. Keep the insight measure in charge. */
.shf-article--v18 .shf-article__content .shf-insight :is(h2, h3, h4) {
	margin-block-start: 0.25em;
	margin-block-end: 0.4em;
	line-height: 1.25;
}
.shf-article--v18 .shf-article__content .shf-insight > h2,
.shf-article--v18 .shf-article__content .shf-insight .shf-insight__means > h2,
.shf-article--v18 .shf-article__content .shf-insight .shf-insight__faq > h2 {
	margin-top: 2.15rem;
}

/* Reduced motion: cards and quotes stay put, fully visible. reveal.js also bails out. */
@media (prefers-reduced-motion: reduce) {
	.shf-reveal-on .shf-insight .shf-reveal,
	.shf-quote-carousel.is-ready > .wp-block-pullquote,
	.shf-quote-carousel.is-ready > .wp-block-pullquote.is-active,
	.shf-insight__hero-art,
	.shf-insight__hero-poster,
	.shf-insight__hero-video,
	.shf-insight__hero-copy,
	.shf-insight__hero-text > * {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	.shf-insight__hero-video {
		display: none !important;
	}
	.shf-insight-motion .shf-insight-stat,
	.shf-insight-stat {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media (min-width: 700px) {
	.shf-insight .shf-insight__stats.wp-block-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.shf-insight .shf-insight__stats.wp-block-columns:has(> :nth-child(4)) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.shf-insight .shf-insight__cards.wp-block-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 699px) {
	.shf-insight .shf-insight__stats.wp-block-columns {
		grid-template-columns: 1fr;
	}
}

/* Reading progress. The script in insight-hero.js sets --shf-read from 0 to 1
   on every scroll frame. Side markers sit in the left gutter on a wide screen. */
.shf-insight-progress__top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	height: 5px;
	background: rgba(11, 26, 51, 0.16);
	pointer-events: none;
}
.admin-bar .shf-insight-progress__top {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .shf-insight-progress__top {
		top: 46px;
	}
}
.shf-insight-progress__top-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--shf-cyan, #22B8CF);
	transform: scaleX(var(--shf-read, 0));
	transform-origin: 0 50%;
}
/* v1.8.42: insight-hero.js sets top, left and width. The rail is centred in
   the left margin while the article is on screen, then pinned (absolute) to
   the end of the article so it scrolls away with it and never sits over the
   share icons, newsletter, or footer. It stays below the sticky header (50). */
.shf-insight-progress__rail {
	position: fixed;
	z-index: 2;
	top: 30%;
	left: 12px;
	width: 140px;
	box-sizing: border-box;
	display: none;
}
@media (min-width: 1180px) {
	.shf-insight-progress__rail {
		display: block;
	}
}
/* The hero title sits on the left. Keep the markers in the gutter once the
   hero has scrolled away, so they do not cover the headline. */
.shf-insight-progress__rail.is-over-hero,
.shf-insight-progress__rail.is-cramped {
	visibility: hidden;
	pointer-events: none;
}
.shf-insight-progress__rail-track {
	position: absolute;
	left: 10px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: rgba(11, 106, 133, 0.22);
	pointer-events: none;
}
.shf-insight-progress__rail-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--shf-cyan, #22B8CF);
	transform: scaleY(var(--shf-read, 0));
	transform-origin: top center;
}
.shf-insight-progress__markers {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 4px 0 0 4px;
	list-style: none;
}
.shf-insight-progress__markers li {
	margin: 0;
}
.shf-insight-progress__marker {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	max-width: 100%;
	margin: 0 0 0.85rem;
	color: var(--shf-slate, #3D4F66);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}
.shf-insight-progress__marker:hover,
.shf-insight-progress__marker:focus-visible {
	color: var(--shf-teal, #0B6A85);
	text-decoration: none;
}
.shf-insight-progress__marker:focus-visible {
	outline: 3px solid var(--shf-cyan, #22B8CF);
	outline-offset: 3px;
	border-radius: 4px;
}
.shf-insight-progress__box {
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 0.12rem;
	border: 2px solid var(--shf-teal, #0B6A85);
	border-radius: 3px;
	background: #fff;
	box-sizing: border-box;
}
.shf-insight-progress__marker.is-done .shf-insight-progress__box,
.shf-insight-progress__marker.is-current .shf-insight-progress__box {
	background: var(--shf-cyan, #22B8CF);
	border-color: var(--shf-teal, #0B6A85);
}
.shf-insight-progress__marker.is-current .shf-insight-progress__box {
	box-shadow: 0 0 0 3px rgba(34, 184, 207, 0.35);
}
.shf-insight-progress__marker.is-current .shf-insight-progress__label {
	color: var(--shf-ink, #0B1A33);
	font-weight: 700;
}
/* v1.8.42: full section titles; they wrap instead of stopping at "…". */
.shf-insight-progress__label {
	min-width: 0;
	flex: 1 1 auto;
	overflow-wrap: break-word;
}

@media print {
	.shf-editor-note,
	.shf-quote-carousel__nav,
	.shf-insight-progress {
		display: none !important;
	}
	.shf-insight__hero-art,
	.shf-insight__hero-poster,
	.shf-insight__hero-video,
	.shf-insight__hero-copy,
	.shf-insight__hero-text > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.shf-insight__hero-video {
		display: none !important;
	}
	.shf-quote-carousel.is-ready > .wp-block-pullquote {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		grid-row: auto !important;
		position: static !important;
	}
}

/* v1.8.42: Guide layout pieces. Byline under the hero title, a short-answer box
   that starts with "Short answer:" (no heading above it), a readable comparison
   table that scrolls sideways on a phone, small source lines, and a small
   disclaimer. Existing insight posts that do not use these classes are unchanged. */
.shf-insight__byline-top {
	margin: 0 0 0.95rem !important;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.98rem;
	line-height: 1.45;
}
.shf-insight__byline-top .shf-insight__author {
	color: #fff;
	font-weight: 700;
}
.shf-insight__answer .shf-insight__answer-sources,
.shf-insight .shf-insight__table-source {
	margin: 0.45rem 0 0 !important;
	color: var(--shf-slate, #3D4F66);
	font-size: 0.75rem !important;
	line-height: 1.4 !important;
}
.shf-insight .shf-insight__answer > p:first-child strong:first-child {
	color: var(--shf-ink, #0B1A33);
}
.shf-insight .shf-insight__compare {
	margin: 1rem 0 0.35rem;
	padding: 0 !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--shf-line, #D5E6EA);
	border-radius: 12px;
	background: #fff;
}
.shf-insight .shf-insight__compare table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.95rem;
	line-height: 1.45;
}
.shf-insight .shf-insight__compare :is(th, td) {
	padding: 0.7rem 0.8rem;
	border: 0;
	border-bottom: 1px solid var(--shf-line, #D5E6EA);
	text-align: left;
	vertical-align: top;
}
.shf-insight .shf-insight__compare thead th {
	background: var(--shf-ink, #0B1A33);
	color: #fff;
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700;
	line-height: 1.3;
}
.shf-insight .shf-insight__compare tbody th {
	width: 20%;
	min-width: 8.5rem;
	background: var(--shf-cyan-soft, #DFF4F8);
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-weight: 700;
}
.shf-insight .shf-insight__compare tbody tr:nth-child(even) td {
	background: var(--wp--preset--color--off-white, #F5FAFB);
}
.shf-insight .shf-insight__compare tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}
.shf-insight .shf-insight__compare figcaption {
	margin: 0;
	padding: 0.5rem 0.8rem;
	font-size: 0.75rem;
}
@media (max-width: 699px) {
	.shf-insight .shf-insight__compare table {
		min-width: 720px;
		font-size: 0.9rem;
	}
}
.shf-insight .shf-disclaimer {
	margin-top: 1.25rem !important;
	padding-top: 0.9rem;
	border-top: 1px solid var(--shf-line, #D5E6EA);
	color: var(--shf-slate, #3D4F66);
	line-height: 1.5;
}
.shf-insight .shf-disclaimer small {
	font-size: 0.85em;
}
/* Exhibit title written as a paragraph (the guide keeps its heading outline to
   the H2/H3s in the brief); same look as the exhibit heading. */
.shf-insight .shf-insight__exhibit .shf-insight__exhibit-title {
	margin: 0.2rem 0 0.7rem !important;
	color: var(--shf-ink, #0B1A33);
	font-family: var(--wp--preset--font-family--maven-pro, "Maven Pro", sans-serif);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
	font-weight: 700;
	line-height: 1.3 !important;
}
.shf-article--v18 .shf-article__content .shf-insight > h3,
.shf-article--v18 .shf-article__content .shf-insight .shf-insight__faq > h3 {
	margin-top: 1.75rem;
}