/*--------------------------------INSIGHT ARTICLE-----------------------------------*/
/*--------------------------------INSIGHT ARTICLE-----------------------------------*/
/*--------------------------------INSIGHT ARTICLE-----------------------------------*/
/* Templates: Long-form (.insHeader-lf / .insContent-lf) and Why We Invested (-wwi). */
/* Values come from the "Dev Handover" page of the Overmatch Web Updates Figma.     */

:root{
	--insWhite:#FFFFFF;
	--insGrey1:#E8E8E8;
	--insGrey2:#9C9C9C;
	--insGrey3:#636363;
	--insGrey4:#222222;
	--insPanel:#2B2A27;
	--insGreen:#C9E070;

	--insLine: 1px solid var(--insGrey3);
	--insNavH: 83px;
	--insBarH: 53px;
	--insGutter: 32px;
}

#insightBody{
	background: var(--insGrey4);
}

/* ScrollSmoother is off for the new templates so position: sticky works; keep the page from clipping it. */
#insightBody:not(.insClassic),
#insightBody:not(.insClassic) #smooth-content{
	overflow: visible;
}

#insightPage{
	opacity: 0;
}

/* Only one template shell is kept; this stops site styles from showing the hidden one. */
.insModern[hidden],
.insClassic[hidden]{
	display: none !important;
}

/* New templates only; the Classic template keeps the original page's own styles. */
#insightPage.insModernPage{
	padding-top: var(--insNavH);
	color: var(--insGrey1);
	font-family: "aktual-reg", sans-serif;
}

.ins_mono,
.insMeta, .insFact, .insShare, .insBack, .insTOCItem, .insCaption,
.insSubscribe, .insCardTag, .insCardFoot{
	font-family: "fragMono-reg", monospace;
	font-size: 12px;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

#insightPage.insModernPage a{ color: inherit; text-decoration: none; }


/*--------------------CAROUSEL: one-column image modules with several images-----------------------*/

.insCarouselTrack{
	position: relative;
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.insCarouselTrack::-webkit-scrollbar{
	display: none;
}

.insCarouselTrack:focus-visible{
	outline: 1px solid var(--insGreen);
	outline-offset: 4px;
}

.insSlide{
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.insSlide img,
.insSlide video{
	display: block;
	width: 100%;
	height: auto;
}

.insCarouselRail{
	height: 2px;
	margin-top: 16px;
	background: var(--insGrey3);
	overflow: hidden;
}

.insCarouselRail span{
	display: block;
	height: 100%;
	background: var(--insGreen);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.insCarouselBar{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-top: 12px;
}

.insCarousel .insCarouselCaption{
	flex: 1;
	min-width: 0;
	margin-top: 0;
	padding-top: 10px;
}

.insCarouselNav{
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
}

.insCarouselCount{
	margin-right: 8px;
	color: var(--insGrey2);
	font-variant-numeric: tabular-nums;
}

.insCarouselBtn{
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: var(--insLine);
	border-radius: 0;
	background: transparent;
	color: var(--insGrey1);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.insCarouselBtn:hover:not(:disabled),
.insCarouselBtn:focus-visible{
	border-color: var(--insGreen);
	color: var(--insGreen);
	outline: none;
}

.insCarouselBtn:disabled{
	opacity: 0.3;
	cursor: default;
}

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


/*--------------------TOP NAV: tucks away once the article bar sticks-----------------------*/

#insightBody .topNav{
	transition: transform 0.4s ease, opacity 0.4s ease;
}

#insightBody.insBarStuck .topNav{
	transform: translateY(-120%);
	opacity: 0 !important;
	pointer-events: none;
}

/* The nav disables the current page's link, but an article's way back to /insights should work. */
#insightBody .curr.navLink,
#insightBody .curr.navLink:hover{
	pointer-events: auto;
}


/*--------------------HEADER: SHARED-----------------------*/

.insHeader{
	position: relative;
}

.insMeta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	color: var(--insGrey2);
}

.insTitle{
	margin: 0;
	color: var(--insWhite);
	font-weight: normal;
}

.insFacts{
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 197px;
}

.insFact{
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--insWhite);
}

.insFactLabel{
	margin-bottom: 4px;
	color: var(--insGrey2);
}

.insFact:first-child .insFactValue{
	color: var(--insGrey1);
}

.insShare{
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 14px;
	color: var(--insGrey1);
}

.insShare span{
	margin-right: 9px;
}

.insShare a{
	display: flex;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.insShare a:hover{
	opacity: 0.6;
}

.insHero{
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #111;
}

.insHero > img,
.insHero > video{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insHero .insCaption{
	position: absolute;
	left: 16px;
	bottom: 16px;
	right: 16px;
}

.insEmbed{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.insEmbed iframe{
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}


/*--------------------HEADER: LONG-FORM-----------------------*/

.insHeader-lf{
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 724px;
	border-top: var(--insLine);
	border-bottom: var(--insLine);
}

.insHeader-lf .insHeadCopy{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 37px;
	padding: 35px var(--insGutter) 40px;
	border-right: var(--insLine);
}

.insHeader-lf .insHeadMain{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.insHeader-lf .insTitle{
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.insHeader-lf .insShare{
	margin-top: auto;
}

.insHeader-lf .insHero{
	height: 100%;
}

/* Video hero: the header shrinks to the video's 16:9 height instead of 724px. */
.insHeader-lf.insHeader-video{
	min-height: 0;
}

.insHeader-lf.insHeader-video .insHero{
	height: auto;
	align-self: start;
}

.insHeader-lf.insHeader-video .insHero > video{
	aspect-ratio: 16 / 9;
	height: auto;
}


/*--------------------HEADER: WHY WE INVESTED-----------------------*/

.insHeader-wwi{
	padding: 72px var(--insGutter) 0;
}

.insHeader-wwi .insHeadTop{
	display: grid;
	grid-template-columns: 197px 1fr;
	gap: 36px;
	margin-bottom: 129px;
}

.insHeader-wwi .insHeadMain{
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 1027px;
}

.insHeader-wwi .insTitle{
	font-size: 68px;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.insHeader-wwi .insFacts{
	gap: 24px;
}

.insHeader-wwi .insShare{
	font-size: 12px;
	gap: 12px;
}

.insHeader-wwi .insHero{
	aspect-ratio: 1376 / 774;
}

/* Subscribe box: pinned to the window's bottom-right while the header is on screen,
   then it comes to rest on the hero's bottom-right corner and scrolls away with it. */
.insSubscribeRail{
	position: absolute;
	top: 0;
	right: var(--insGutter);
	bottom: var(--insGutter);
	width: 307px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.insSubscribeRail .insSubscribe{
	position: sticky;
	bottom: var(--insGutter);
	pointer-events: auto;
}

#insightPage .insHeader-wwi .insBtn{
	background: var(--insGreen);
	color: var(--insGrey4);
}


/*--------------------STICKY BAR-----------------------*/

.insBar{
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 16px var(--insGutter);
	background: var(--insGrey4);
	border-bottom: var(--insLine);
}

.insBack{
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	color: var(--insGrey1);
}

.insBack:hover span{
	color: var(--insGreen);
}

.insBarTitle{
	max-width: 678px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--insGrey1);
}

.insProgress{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--insGreen);
	transform: scaleX(0);
	transform-origin: left center;
}


/*--------------------BODY: SHARED-----------------------*/

.insBody{
	display: grid;
}

.insModInner{
	font-size: 16px;
	line-height: 1.5;
	color: var(--insGrey1);
}

.insModInner p,
.insModInner .insList{
	margin: 0 0 24px;
}

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

.insSectTitle{
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: normal;
	color: var(--insWhite);
	scroll-margin-top: calc(var(--insBarH) + 24px);
}

.insModInner * + .insSectTitle{
	margin-top: 48px;
}

.insSubTitle{
	margin: 32px 0 16px;
	font-size: 18px;
	line-height: 1.2;
	font-weight: normal;
	color: var(--insWhite);
}

.insModInner strong{
	font-family: "aktual-bold", sans-serif;
	font-weight: normal;
}

.insList{
	padding-left: 24px;
}

.insList li + li{
	margin-top: 24px;
}

ul.insList{ list-style: disc; }
ol.insList{ list-style: decimal; }

#insightPage.insModernPage .insLink{
	color: var(--insGreen);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

#insightPage.insModernPage .insLink:hover{
	text-decoration-color: var(--insGreen);
}

#insightPage.insModernPage .insLink-ext{
	color: inherit;
	text-decoration-color: currentColor;
}

#insightPage.insModernPage .insLink-ext:hover{
	color: var(--insGreen);
	text-decoration-color: var(--insGreen);
}

.insModInner .insStatement{
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.2;
	color: var(--insWhite);
}

.insContent-lf .insList li + li{
	margin-top: 0;
}

.insMod-intro .insModInner{
	font-size: 22px;
	color: var(--insWhite);
}

.insMedia{
	margin: 0;
}

.insMediaGrid{
	display: grid;
	gap: 16px;
}

.insCols-2 .insMediaGrid{ grid-template-columns: repeat(2, 1fr); }
.insCols-3 .insMediaGrid{ grid-template-columns: repeat(3, 1fr); }

.insMediaItem img,
.insMediaItem video,
.insInlineIMG img{
	display: block;
	width: 100%;
	height: auto;
}

.insInlineIMG{
	margin: 0 0 24px;
}

.insCaption{
	margin-top: 12px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--insGreen);
}


/*--------------------BODY: LONG-FORM (bordered modules + sticky sidebar)-----------------------*/

.insBody-lf{
	grid-template-columns: 963fr 477fr;
}

.insContent-lf .insMod{
	border-left: var(--insLine);
	border-bottom: var(--insLine);
	padding: 40px 40px 72px;
}

.insContent-lf .insModInner{
	width: 100%;
	max-width: 542px;
	margin-left: auto;
}

.insContent-lf .insMod-intro{
	padding: 83px 40px 40px;
}

.insContent-lf .insMod-media{
	padding: 40px;
}

/* Breakout: wider than the text, still lined up with its right edge (Figma: 693-773px). */
.insContent-lf .insMedia-breakout .insModInner{
	max-width: 773px;
}

.insContent-lf .insMod.insMedia-full{
	padding: 0;
}

.insContent-lf .insMedia-full .insModInner{
	max-width: none;
}

.insContent-lf .insMedia-full .insCaption{
	padding: 0 40px 24px;
}

.insBody-lf .insSide{
	border-left: var(--insLine);
	padding: 0 var(--insGutter) 0;
}

.insBody-lf .insSide{
	position: sticky;
	top: var(--insBarH);
	height: calc(100vh - var(--insBarH));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 40px;
	align-self: start;
}

.insBody-lf .insTOC{
	padding-top: 88px;
	gap: 16px;
	overflow-y: auto;
}

/* Keeps the subscribe box at the bottom even when there's no contents list above it. */
.insBody-lf .insSide > .insSubscribe{
	margin-top: auto;
}


/*--------------------BODY: WHY WE INVESTED (single column + side TOC)-----------------------*/

.insBody-wwi{
	grid-template-columns: 265px minmax(0, 678px) 1fr 329px;
	padding-right: var(--insGutter);
}

.insContent-wwi{
	grid-column: 2;
	padding: 111px 0 120px;
}

.insContent-wwi .insMod + .insMod{
	margin-top: 56px;
}

.insContent-wwi .insModInner{
	max-width: 561px;
}

.insContent-wwi .insMod-intro .insModInner{
	max-width: none;
}

.insContent-wwi .insMod-highlights .insModInner{
	text-align: left;
}

.insDivider{
	display: block;
	margin: 56px 0 0 231px;
}

/* Breakout: 773px, centred on the 561px text column (Figma: x -106). */
.insContent-wwi .insMedia-breakout .insModInner,
.insContent-wwi .insMedia-full .insModInner{
	max-width: none;
	width: 773px;
	margin-left: -106px;
}

.insContent-wwi .insMedia-inline .insCaption,
.insContent-wwi .insMod-media .insCaption{
	padding-left: 0;
}

.insBody-wwi .insSide{
	grid-column: 4;
}

.insBody-wwi .insTOC{
	position: sticky;
	top: var(--insBarH);
	padding: 106px 0 24px;
	gap: 24px;
}


/*--------------------TABLE OF CONTENTS-----------------------*/

.insTOC{
	display: flex;
	flex-direction: column;
}

.insTOCItem{
	display: flex;
	align-items: center;
	gap: 16px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--insGrey1);
	transition: color 0.3s ease;
}

.insBody-wwi .insTOCItem{
	line-height: 1;
	letter-spacing: -0.02em;
}

.insTOCItem span{
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.insTOCItem i{
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--insGreen);
	opacity: 0;
	transition: opacity 0.3s ease;
}

#insightPage .insTOCItem.curr,
#insightPage .insTOCItem:hover{
	color: var(--insGreen);
}

.insTOCItem.curr span,
.insTOCItem:hover span,
.insTOCItem.curr i{
	opacity: 1;
}


/*--------------------SUBSCRIBE BOX-----------------------*/

.insSubscribe{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	min-height: 201px;
	padding: 25px;
	background: var(--insPanel);
	border: 1px solid var(--insGrey2);
	text-transform: none;
}

.insGlobe{
	opacity: 0.6;
	mix-blend-mode: lighten;
}

.insSubscribe p{
	margin: -8px 0 0;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--insGrey1);
}

#insightPage .insBtn{
	padding: 8px 16px;
	background: var(--insGrey3);
	font-size: 14px;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--insGrey1);
	transition: background 0.2s ease, color 0.2s ease;
}

#insightPage .insBtn:hover{
	background: var(--insGreen);
	color: var(--insGrey4);
}

/* corner handles */
.insSubscribe i{
	position: absolute;
	width: 9px;
	height: 9px;
	background: var(--insWhite);
}

.insSubscribe i:nth-of-type(1){ top: -5px; left: -5px; }
.insSubscribe i:nth-of-type(2){ top: -5px; right: -5px; }
.insSubscribe i:nth-of-type(3){ bottom: -5px; left: -5px; }
.insSubscribe i:nth-of-type(4){ bottom: -5px; right: -5px; }


/*--------------------READ MORE-----------------------*/

.insMore{
	padding: 68px var(--insGutter) 80px 381px;
	border-top: var(--insLine);
}

.insMoreTitle{
	max-width: 910px;
	margin: 0 0 32px;
	font-size: 22px;
	line-height: 1.2;
	font-weight: normal;
	color: var(--insWhite);
}

.insMoreGrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 910px;
}

.insCard{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 1px 1px 17px;
	border: var(--insLine);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.insCardIMG{
	height: 214px;
	overflow: hidden;
	background: var(--insGreen);
}

.insCardIMG img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.insCardCopy{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0 16px;
}

.insCardTag{
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--insGrey1);
}

.insCardTitle{
	margin: 16px 0 20px;
	font-size: 20px;
	line-height: 1.2;
	font-weight: normal;
	color: var(--insWhite);
}

.insCardSub{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 32px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--insGrey1);
}

.insCardFoot{
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	color: var(--insGrey2);
}

.insCard i{
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--insWhite);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.insCard i:nth-of-type(1){ top: -7px; left: -7px; }
.insCard i:nth-of-type(2){ top: -7px; right: -7px; }
.insCard i:nth-of-type(3){ bottom: -7px; left: -7px; }
.insCard i:nth-of-type(4){ bottom: -7px; right: -7px; }

.insCard:hover{
	background: var(--insPanel);
	border-color: var(--insWhite);
}

.insCard:hover i{
	opacity: 1;
}


/*--------------------MISSING / ERROR-----------------------*/

.insMissing{
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 120px var(--insGutter) 160px;
}

.insMissing h1{
	font-size: 48px;
	line-height: 1.15;
	font-weight: normal;
	color: var(--insWhite);
}


/*--------------------TABLET-----------------------*/

@media screen and (max-width: 1200px){

	.insHeader-wwi .insTitle{ font-size: 54px; }

	.insBody-wwi{
		grid-template-columns: 32px minmax(0, 1fr) 48px 260px;
	}

	.insContent-wwi .insMedia-breakout .insModInner,
	.insContent-wwi .insMedia-full .insModInner{
		width: 100%;
		margin-left: 0;
	}

	.insContent-lf .insMod{ padding-left: 32px; padding-right: 32px; }

	.insSubscribeRail{ display: none; }

	.insMore{ padding-left: var(--insGutter); }
}


/*--------------------MOBILE-----------------------*/

@media screen and (max-width: 768px){

	:root{
		--insNavH: 79px;
		--insGutter: 20px;
	}

	/* Long-form: hero on top, copy below */
	.insHeader-lf{
		display: flex;
		flex-direction: column-reverse;
		min-height: 0;
		border-top: 0;
	}

	.insHeader-lf .insHero{
		height: auto;
		aspect-ratio: 393 / 395;
		max-height: 60vh;
		border-bottom: var(--insLine);
	}

	.insHeader-lf.insHeader-video .insHero{ aspect-ratio: auto; }

	.insHeader-lf .insHeadCopy{
		border-right: 0;
		padding: 32px var(--insGutter) 32px;
		gap: 40px;
	}

	.insHeader-lf .insTitle{ font-size: 36px; line-height: 1.05; }

	/* Why We Invested */
	.insHeader-wwi{ padding-top: 27px; }

	.insHeader-wwi .insHeadTop{
		display: flex;
		flex-direction: column-reverse;
		gap: 40px;
		margin-bottom: 40px;
	}

	.insHeader-wwi .insTitle{ font-size: 44px; line-height: 1.05; }

	.insHeader-wwi .insHero{
		margin: 0 calc(var(--insGutter) * -1);
		aspect-ratio: 393 / 333;
	}

	/* Bar: hide the title, keep the back link and progress */
	.insBarTitle{ display: none; }

	/* Body: single column, no side TOC */
	.insBody-lf,
	.insBody-wwi{
		display: block;
		padding-right: 0;
	}

	.insSide{ display: none !important; }

	.insContent-lf .insMod,
	.insContent-lf .insMod-intro,
	.insContent-lf .insMod-media{
		border-left: 0;
		padding: 40px var(--insGutter);
	}

	.insContent-lf .insModInner{ max-width: none; }

	.insContent-lf .insMod.insMedia-full{ padding: 0; }

	.insContent-wwi{ padding: 40px var(--insGutter) 80px; }

	.insContent-wwi .insModInner{ max-width: none; }

	.insMod-intro .insModInner,
	.insModInner .insStatement{ font-size: 20px; }

	.insDivider{ margin-left: auto; margin-right: auto; }

	.insCols-3 .insMediaGrid{ grid-template-columns: 1fr; }

	.insMore{ padding: 48px var(--insGutter) 64px; }

	.insMoreGrid{ grid-template-columns: 1fr; }
}