@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.lab-frozen-article {
	--white:	rgb(255,255,255);
	--black:	rgb(0,0,0);
	--grey-100:	rgb(26, 26, 26);
	--grey-75:	rgb(54, 54, 54);
	--grey-50:	rgb(78, 78, 78);
	--grey-25:	rgb(126, 126, 126);
	--grey-10:	rgb(238, 240, 241);
}
.lab-frozen-article .bootstrap-debug {
	width: 200px;
	height: 30px;
	position: fixed;
	bottom: 0;
	left: 0;
	color: var(--white);
	line-height: 30px;
	background: var(--black);
	z-index: 1000;
}

.lab-frozen-article {
	color: var(--black);
	font-family: 'Inter', 'Arial', sans-serif;
	font-optical-sizing: auto;
	font-size: 20px; /* TODO: Set to 20px, then adjust font-size on all other elements using 20px as the base for the em calculation. */
	font-weight: 500;
	line-height: 1.75em; /* 35 / 20 = 1.75 */
	background: var(--white);
}

/* TYPOGRAPHY */
.lab-frozen-article h1 {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 9.5em; /* 190 / 20 = 9.5 */
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.7727272727272727em; /* 170 / 220 = 0.7727272727272727 */
}
.lab-frozen-article h2 {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	/* Fluid from 64px on a 375px phone to 170px from about 1400px wide,
	   replacing the old fixed steps (170px, then 110px up to 1200px, then
	   64px at 992px and below). The 110px to 64px drop at 992px made
	   section headings shrink sharply on tablets and small laptops. At
	   820px this gives about 110px, so headings like Product Landscape
	   keep their two-line display size. (Finn, 29 Sep 2026) */
	font-size: clamp(3.2em, 1.26em + 10.34vw, 8.5em);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.8823529411764706em; /* 150 / 170 = 0.8823529411764706 */
}
.lab-frozen-article h3,
.lab-frozen-article h2.small,
.lab-frozen-article .section-quote {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	margin-bottom: 30px;
	font-size: 3em; /* 60 / 20 = 3 */
	font-weight: 700;
	line-height: 1em;
}
.lab-frozen-article h4 {
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 1.5em; /* 30 / 20 = 1.5 */
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1em;
	margin-bottom: 15px;
}
.lab-frozen-article sup {
	font-size: 0.5em;
}
.lab-frozen-article .eyebrow {
	margin-bottom: 10px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 1em; /* 20 / 20 = 1em */
	font-weight: 900;
	line-height: 1em;
	text-transform: uppercase;
	display: inline-block;
}
.lab-frozen-article .subhead {
	margin-top: 10px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 1.5em; /* 30 / 20 = 1.5 */
	display: inline-block;
	font-weight: 900;
	line-height: 1em;
	text-transform: uppercase;
	display: inline-block;
}
.lab-frozen-article .text-grey 	{ color: var(--grey-25); }
.lab-frozen-article .text-white	{ color: var(--white); }
.lab-frozen-article .text-black	{ color: var(--black); }

/* SPACING */
.lab-frozen-article .pad-b-500	{ padding-bottom: 500px; }
.lab-frozen-article .pad-t-150 	{ padding-top: 150px; }
.lab-frozen-article .pad-b-150 	{ padding-bottom: 150px; }
.lab-frozen-article .pad-t-100 	{ padding-top: 100px; }
.lab-frozen-article .pad-b-100 	{ padding-bottom: 100px; }
.lab-frozen-article .pad-t-50 	{ padding-top: 50px; }
.lab-frozen-article .pad-b-50 	{ padding-bottom: 50px; }
.lab-frozen-article .pad-b-10	{ padding-bottom: 10px; }

/* BUTTONS */
.lab-frozen-article .btn-base,
.lab-frozen-article .hs_submit input[type="submit"] {
	padding: 0;
	font-weight: 700;
	text-align: center;
	border-radius: 20px;
	display: inline-block;
	border: none;
}
	.lab-frozen-article .btn-white {
		padding: 0 20px;
		color: var(--black);
		font-size: 0.9em; /* 18 / 20 = 0.9 */
		line-height: 50px;
		background: var(--white);
		text-decoration: none;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	.lab-frozen-article .btn-black,
	.lab-frozen-article .hs_submit input[type="submit"] {
		padding: 0 20px;
		color: var(--white);
		font-size: 1.1em; /* 22 / 20 = 1.1 */
		line-height: 80px;
		background: var(--black);
		text-decoration: none;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}


/* FORMS */
.lab-frozen-article .form-wrapper {
	padding: 10px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
}
.lab-frozen-article .hbspt-form form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}
	.lab-frozen-article .hs_email {
		width: 58.47953216374269%; /* 300 / 513 = 0.5847953216374269 */
		float: left;
	}
		.lab-frozen-article .hs_email > label:first-child {
			display: none;
		}
		.lab-frozen-article .hs_email input[type="email"] {
			width: calc(100% - 30px);
			margin-left: 20px;
			margin-right: 10px;
			font-size: 1.1em; /* 22 / 20 = 1.1 */
			font-weight: 700;
			line-height: 80px;
			border: none;
			display: block;
			background: none;
		}
			.lab-frozen-article .hs_email input[type="email"]::placeholder {
				color: var(--black);
			}
			.lab-frozen-article .hs_email input[type="email"]:focus {
				outline: none;
			}
	.lab-frozen-article .hs_submit {
		width: 41.52046783625731%;
		float: left;
	}
		.lab-frozen-article .hs-submit input[type="submit"] {
			width: 100%;
		}
	/* HubSpot's own error sits inside the clipped pill; core.js mirrors it
	   into .form-error under the pill instead. */
	.lab-frozen-article .hs-error-msgs {
		display: none;
	}

/* LIQUID GLASS */
.lab-frozen-article .liquidGlass-wrapper {
  position: relative;
  display: flex;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  border-radius: 30px;
}
	.lab-frozen-article .liquidGlass-effect {
		position: absolute;
		z-index: 0;
		inset: 0;
		backdrop-filter: blur(3px);
		filter: url(#glass-distortion);
		overflow: hidden;
		isolation: isolate;
	}
	.lab-frozen-article .liquidGlass-tint {
		z-index: 1;
		position: absolute;
		inset: 0;
		background: rgba(255, 255, 255, 0.25);
	}
	.lab-frozen-article .liquidGlass-shine {
		position: absolute;
		inset: 0;
		z-index: 2;
		overflow: hidden;
		box-shadow: inset 1px 1px 1px 0 rgba(255, 255, 255, 0.5);
	}
	.lab-frozen-article .liquidGlass-content {
		width: 100%;
		z-index: 3;
	}

/* HEADER NAV */
.lab-frozen-article header {
	width: 100%;
	position: fixed;
	top: 20px;
	z-index: 20;
}
	.lab-frozen-article .header-wrapper {
		height: 70px;
		padding: 10px;
		border-radius: 20px;
		display: flex;
	}
		.lab-frozen-article .header-wrapper .logo {
			display: flex;
			align-items: center;
		}
			.lab-frozen-article .header-wrapper .logo .logo-white { display: none; }
			.lab-frozen-article header.theme-white .logo .logo-white { display: inline-block; }
			.lab-frozen-article header.theme-white .logo .logo-dark { display: none; }

		.lab-frozen-article .header-wrapper .actions {
			text-align: right; 
			align-items: center;
		}
			.lab-frozen-article .header-wrapper #nav-toggle {
				color: var(--grey-50);
				font-weight: 700;
				line-height: 50px;
				text-decoration: none;
				display: inline-block; 
			}
				.lab-frozen-article header.theme-white .header-wrapper #nav-toggle {
					color: var(--white);
				}
			.lab-frozen-article .header-wrapper .btn-base {
				padding: 0 20px;
				margin: 0 0 0 20px;
				line-height: 50px;
				font-size: 1em;
			}
			.lab-frozen-article .header-wrapper .btn-white { display: none; }
			.lab-frozen-article header.theme-white .header-wrapper .btn-white { display: inline-block; }
			.lab-frozen-article header.theme-white .header-wrapper .btn-black { display: none; }

/* OVERLAYS */
.lab-frozen-article .overlay-wrapper {
	width: 100%;
	height: 100vh;
	padding: 20px;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(10px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}
	.lab-frozen-article .overlay-wrapper.show {
		opacity: 1;
		visibility: visible;
	}
	.lab-frozen-article .primary-nav .container,
	.lab-frozen-article .primary-nav .row {
		height: 100vh;
	}
	.lab-frozen-article .overlay-wrapper .btn-white {
		font-size: 17px;
		line-height: 40px;
	}
	.lab-frozen-article .overlay-wrapper h3 {
		margin: 20px 0 20px 0;
	}
	.lab-frozen-article .overlay-wrapper h4 {
		margin: 10px 0 10px 0;
	}

	/* PRIMARY NAV */
	.lab-frozen-article .nav-list {
		align-self: center;
	}
	.lab-frozen-article .nav-list ul {
		padding: 0;
		margin: 0;
		list-style: none;	
	}
		.lab-frozen-article .nav-list ul li {
			margin-bottom: 30px;
		}
		.lab-frozen-article .nav-list ul li a {
			color: var(--black);
			font-family: 'Inter Tight', 'Arial', sans-serif;
			font-size: 3em; /* 60 / 20 = 3 */
			font-weight: 700;
			line-height: 1em;
			letter-spacing: -0.03em;
			text-decoration: none;		
		}
	.lab-frozen-article .primary-nav .btn-black {
		line-height: 50px;
	}

/* SMALL PRINT */
.lab-frozen-article .small-print {
	margin-top: 20px;
	color: var(--grey-50);
	font-size: 0.75em; /* 15 / 20 = 0.75 */
	line-height: 1em;
	display: block;
	transition: color 0.2s ease;
}
	.lab-frozen-article .theme-white .small-print {
		color: var(--white);
	}
	.lab-frozen-article .hero-form .small-print{
		margin-left: 20px;
	}
	.lab-frozen-article .form-error {
		margin: 14px 0 0 20px;
		color: var(--black);
		font-size: 0.75em; /* 15 / 20, the small-print size */
		font-weight: 600;
		line-height: 1.4;
	}
		.lab-frozen-article .form-error[hidden] {
			display: none;
		}
		.lab-frozen-article .form-error + .small-print {
			margin-top: 8px;
		}
		.lab-frozen-article .theme-white .form-error {
			color: var(--white);
		}
		.lab-frozen-article .sticky-cta .form-error {
			margin: 0 0 8px 0;
			padding-left: 30px;
			font-size: 13px;
		}
		.lab-frozen-article .sticky-cta.has-error .sticky-cta-text {
			display: none;
		}

/* SECTIONS */
/* PANELS */
.lab-frozen-article .panel {
	padding: 30px;
	margin-bottom: 10px;
	border-radius: 30px;
}
	.lab-frozen-article .panel:nth-child(even) {
		margin-left: 10px;
	}
	.lab-frozen-article .panel-grey-100 {
		color: var(--white);
		background: var(--grey-100);
	}
	.lab-frozen-article .panel-grey-10 {
		color: var(--black);
		background: var(--grey-10);
	}
	.lab-frozen-article .panel img {
		display: inline-block;
	}

	.lab-frozen-article .bar-wrapper {
		margin-bottom: 10px;
		position: relative;
	}
		.lab-frozen-article .bar-percentage {
			height: 160px;
			width: calc(35% - 30px);
			padding-left: 30px;
			color: var(--grey-50);
			font-size: 6.5em; /* 130 / 20 = 6.5 */
			font-weight: 400;
			letter-spacing: -0.05em;
			line-height: 160px;
			float: left;
			position: relative;
			z-index: 2;
		}
		.lab-frozen-article .bar-content {
			height: 160px;
			width: 65%;
			margin-top: 30px;
			font-size: 17px;
			float: left;
			position: relative;
			z-index: 2;
		}
		.lab-frozen-article .bar {
			height: 160px;
			background: var(--grey-75);
			border-radius: 30px;
			z-index: 1;
		}
			.lab-frozen-article .bar-100	{ width:100%; }
			.lab-frozen-article .bar-90		{ width: 90%; }
			.lab-frozen-article .bar-70		{ width: 70%; }
			.lab-frozen-article .bar-60		{ width: 60%; }
			.lab-frozen-article .bar-55		{ width: 55%; }
			.lab-frozen-article .bar-50		{ width: 50%; }
			.lab-frozen-article .bar-30		{ width: 30%; }
			.lab-frozen-article .bar-20		{ width: 20%; }

/* Foreword */
.lab-frozen-article #author-text {
	padding-left: 20px;
	line-height: 1.25em; /* 25 / 20 = 1.25 */
}
/* Security Outcomes */
.lab-frozen-article ul.video-credits {
	margin: 0;
	padding: 0;
	font-size: 0.85em; /* 17 / 20 = 0.85 */
	line-height: 1.764705882352941em; /* 30 / 17 = 1.764705882352941 */
	list-style: none;
}
	.lab-frozen-article .outcome-number {
		width: 25px;
		height: 25px;
		color: var(--white);
		font-size: 0.75em; /* 15 / 20 = 0.75 */
		line-height: 25px;
		text-align: center;
		border-radius: 9999px;
		background: var(--black);
		float: left;
	}
	.lab-frozen-article .outcome-content {
		width: calc(100% - 35px);
		padding-left: 10px;
		float: left;
	}
		.lab-frozen-article .outcome-content p {
			font-size: 17px;
		}
/* General */
.lab-frozen-article section.container-fluid {
	padding: 0;
}
	.lab-frozen-article .section-outer {
		margin: 0 30px;
		border-radius: 30px;
	}
		.lab-frozen-article .bkg-black {
			color: var(--white);
			background-color: var(--black);
		}
		.lab-frozen-article .bkg-grey {
			background-color: var(--grey-10);
		}
		.lab-frozen-article .bkg-grey-white {
			background: linear-gradient(var(--grey-10),var(--white));
		}

.lab-frozen-article .section-intro {
	margin-top: 30px;
	margin-bottom: 20px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 2em; /* 40 / 20 = 2 */
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2em; /* 48 / 40 = 1.2 */
}
	.lab-frozen-article .section-intro img {
		display: inline-block;
		margin: -6px 0 0 5px;
	}

.lab-frozen-article .video-wrapper {
	border-radius: 20px;
	overflow: hidden;
}

.lab-frozen-article #section-threat .section-outer {
	/* The landscape wave along the bottom was removed (Frank, 1 Oct 2026).
	   The Parabellum mark stays until Frank settles its size. */
	background: url('/research/lab-images/bkg-parabellum.png') no-repeat top right;
	background-color: var(--black);
}

.lab-frozen-article .cert-badge {
	margin-bottom: 10px;
}

.lab-frozen-article .cta-wrapper {
	padding: 50px;
	border-radius: 30px;
	/* Plain fill: the overlapping-circles image and the gradient that faded
	   it in were removed (Frank, 1 Oct 2026). The copy no longer needs to
	   stop short of the image, so it takes a reading measure instead. */
}
	.lab-frozen-article .cta-wrapper h3,
	.lab-frozen-article .cta-wrapper p {
		max-width: 760px;
	}
	.lab-frozen-article .cta-wrapper .btn-black {
		line-height: 60px;
	}
	/* "Book your session" and the gaps card's booking button are talk-to-Tekspace actions, and those turn the
	   site blue (Finn, 21 Oct 2026): black at rest, blue on hover. */
	.lab-frozen-article :is(#vef-split-link, .lab-gaps__book) {
		transition: background-color 0.15s, color 0.15s;
	}
	.lab-frozen-article :is(#vef-split-link, .lab-gaps__book):hover {
		background: var(--accent-interactive, #0072ff);
		color: var(--accent-interactive-fg, #fff);
	}
	.lab-frozen-article :is(#vef-split-link, .lab-gaps__book):focus-visible {
		outline: 2px solid var(--accent-interactive, #0072ff);
		outline-offset: 2px;
	}

/* CONTINUUM */
.lab-frozen-article .continuum-wrapper {
	background:
		linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 200px),
		linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 200px),
		linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,1)),
		url('/research/lab-images/bkg-cont-outlines.svg') repeat-y top left;
}
	.lab-frozen-article .left {
		min-height: 500px;
		position: relative;
		background: var(--black);
	}
		.lab-frozen-article .maturity-panel h3 {
			margin-bottom: 10px;
			text-shadow: 0px 3px 20px var(--black);
		}
		.lab-frozen-article .continuum-low {
			min-height: 601px;
			background:
				linear-gradient(to bottom, rgba(0,0,0,1) 0, rgba(0,0,0,0) 200px),
				url('/research/lab-images/bkg-cont-low.png') no-repeat top left,
				var(--black);
		}
		.lab-frozen-article .continuum-avg {
			min-height: 604px;
			background:
				url('/research/lab-images/bkg-cont-avg.png') no-repeat top left,
				var(--black);
		}
		.lab-frozen-article .continuum-high {
			background:
				linear-gradient(to top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 200px),
				url('/research/lab-images/bkg-cont-high.png') no-repeat top left,
				var(--black);
		}
		/* Once core.js draws the continuum as one lattice (.vef-field, Finn,
		   21 Oct 2026), the tier images give way to it; the rows sit above
		   the drawn field. Without JS the images above still show. */
		.lab-frozen-article .continuum-wrapper.vef-field {
			position: relative;
		}
		.lab-frozen-article .continuum-wrapper.vef-field > .container {
			position: relative;
			z-index: 1;
		}
		.lab-frozen-article .continuum-wrapper.vef-field .left {
			background: transparent;
		}
		/* The glass diamond, 51px (was 70; Finn, 16 Oct: about 14% smaller,
		   then 15% more), with 9.5px of margin so each sits centred where its
		   70px tile was. */
		/* 61px: rotated, it spans exactly a 2x2 block of the continuum's
		   lattice cells, so its edges line up with the cells around it
		   (Finn, 21 Oct 2026). */
		.lab-frozen-article .prod-icon {
			width: 61px;
			height: 61px;
			margin: 4.5px;
			text-align: center;
			display: flex;
			align-items: center;
			position: absolute;
			z-index: 2;
			transform: rotate(45deg);
			border-radius: 10px;
		}
			/* EMAIL SECURITY */
			/* Low */
			.lab-frozen-article .prod-icon.mesh				{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.hornet			{ top: 120px; left: 30px; }
			.lab-frozen-article .prod-icon.graphus			{ top: 240px; left: 30px; }
			.lab-frozen-article .prod-icon.material			{ top: 360px; left: 30px; }
			.lab-frozen-article .prod-icon.sublime			{ top: 480px; left: 30px; }

			/* Avg */
			.lab-frozen-article .prod-icon.sophos			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.paubox			{ top: 120px; left: 30px; }
			.lab-frozen-article .prod-icon.spamtitan		{ top: 170px; left: 130px; }
			.lab-frozen-article .prod-icon.ironscales		{ top: 190px; left: 230px; }
			.lab-frozen-article .prod-icon.cloudflare		{ top: 270px; left: 30px; }
			.lab-frozen-article .prod-icon.mimecast			{ top: 390px; left: 30px; }
			.lab-frozen-article .prod-icon.barracuda		{ top: 390px; left: 140px; }
			.lab-frozen-article .prod-icon.proofpoint		{ top: 510px; left: 30px; }

			/* High */
			.lab-frozen-article .prod-icon.knowbe4			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.darktrace		{ top: 50px; left: 130px; }
			.lab-frozen-article .prod-icon.abnormal			{ top: 190px; left: 30px; }
			.lab-frozen-article .prod-icon.microsoft		{ top: 220px; left: 30px; }
			.lab-frozen-article .prod-icon.checkpoint		{ top: 390px ; left: 30px; }

			/* SAT */
			/* Low */
			.lab-frozen-article .prod-icon.hackerrangers	{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.idagent			{ top: 120px; left: 30px; }
			.lab-frozen-article .prod-icon.cyberhoot		{ top: 200px; left: 80px; }
			.lab-frozen-article .prod-icon.boxphish			{ top: 280px; left: 30px; }
			.lab-frozen-article .prod-icon.riot				{ top: 400px; left: 30px; }
			.lab-frozen-article .prod-icon.mimecastsat		{ top: 480px; left: 70px; }

			/* Avg */
			.lab-frozen-article .prod-icon.huntress			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.usecure			{ top: 120px; left: 30px; }
			.lab-frozen-article .prod-icon.metacompliance	{ top: 120px; left: 160px; }
			.lab-frozen-article .prod-icon.sansinstitute	{ top: 190px; left: 90px; }
			.lab-frozen-article .prod-icon.ninjio			{ top: 190px; left: 230px; }
			.lab-frozen-article .prod-icon.infoseciq		{ top: 270px; left: 30px; }
			.lab-frozen-article .prod-icon.barracudasat		{ top: 340px; left: 90px; }
			.lab-frozen-article .prod-icon.immersive		{ top: 370px; left: 190px; }
			.lab-frozen-article .prod-icon.sosafe			{ top: 420px; left: 30px; }
			.lab-frozen-article .prod-icon.proofpointsat	{ top: 500px; left: 90px; }

			/* High */
			.lab-frozen-article .prod-icon.hoxhunt			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.adaptive			{ top: 120px; left: 30px; }
			.lab-frozen-article .prod-icon.phished			{ top: 240px; left: 30px; }
			.lab-frozen-article .prod-icon.knowbe4sat		{ top: 360px; left: 30px; }

			/* BROWSER SECURITY */
			/* Low */
			.lab-frozen-article .prod-icon.manageengine		{ top: 130px; left: 30px; }
			.lab-frozen-article .prod-icon.checkpointharmony{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.squarex			{ top: 280px; left: 30px; }

			/* Avg */
			.lab-frozen-article .prod-icon.layerx			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.apozy			{ top: 0; left: 160px; }
			.lab-frozen-article .prod-icon.conceal			{ top: 170px; left: 30px; }
			.lab-frozen-article .prod-icon.acium			{ top: 170px; left: 160px; }
			.lab-frozen-article .prod-icon.redaccess		{ top: 350px; left: 160px; }
			.lab-frozen-article .prod-icon.keepaware		{ top: 350px; left: 30px; }

			/* High */
			.lab-frozen-article .prod-icon.pushsecurity		{ top: 30px; left: 140px; }
			.lab-frozen-article .prod-icon.seraphic			{ top: 0; left: 30px; }
			.lab-frozen-article .prod-icon.menlo			{ top: 320px; left: 30px; }
			.lab-frozen-article .prod-icon.defensx			{ top: 470px; left: 30px; }


			.lab-frozen-article .prod-icon .liquidGlass-content {
				display: flex;
				align-self: stretch;
				justify-content: center;
				background: rgba(0,0,0,0.2);
			}
				.lab-frozen-article .prod-icon img {
					transform: rotate(-45deg);
					align-self: center;
				}
				/* Vendor logos in their own colour, floating in the glass
				   (George's brand review, 14 Oct 2026, decision 10), a quarter
				   smaller than they launched (Finn, 16 Oct: 32 to 24px), then
				   a tenth back up (26px) as the diamonds shrank, so the colour
				   adds breadth without taking over the section. */
				/* Every logo is a 42px square with slightly rounded corners,
				   about the largest upright square inside the 61px diamond
				   (Frank, 9 Nov 2026: clearer and larger; was 34px). How it gets there depends on the file
				   (src/lib/vendor-logo-kinds.ts, generated from the pixels):
				   - --square: the file is already a brand square (Mimecast
				     on white, Huntress on charcoal), shown as it is.
				   - --light: a bare mark, on a white holding square.
				   - --dark: a light bare mark, or a mono mark with no colour
				     file, on a charcoal holding square. */
				.lab-frozen-article .prod-icon img.lab-vlogo {
					box-sizing: border-box;
					width: 42px;
					height: 42px;
					object-fit: contain;
					border-radius: 6px;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
				}
				.lab-frozen-article .prod-icon img.lab-vlogo--light,
				.lab-frozen-article .prod-icon img.lab-vlogo--dark {
					padding: 6px;
				}
				.lab-frozen-article .prod-icon img.lab-vlogo--light {
					background: var(--white);
				}
				.lab-frozen-article .prod-icon img.lab-vlogo--dark {
					background: var(--grey-100);
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
				}

	.lab-frozen-article .right {
		background: linear-gradient(to left, rgba(0,0,0,1) 250px, rgba(0,0,0,0))
	}
		/* Tier lists sit in an even two-column grid, one vendor per cell,
		   so names of different lengths no longer wrap raggedly (Frank,
		   1 Oct 2026). Where the on-page name carries a vendor and a
		   product, the product sits beneath in smaller text. */
		.lab-frozen-article .prod-list {
			margin: 0;
			padding: 0;
			list-style: none;
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 16px 20px;
			padding-bottom: 20px;
		}
			.lab-frozen-article .prod-list li {
				margin: 0;
				font-size: 16px;
				font-weight: 600;
				line-height: 1.25;
				display: flex;
				align-items: center;
				gap: 10px;
				min-width: 0;
			}

				.lab-frozen-article .overlay-wrapper .prod-list {
					gap: 12px 16px;
				}
			.lab-frozen-article .prod-list-name {
				display: flex;
				flex-direction: column;
				min-width: 0;
				overflow-wrap: anywhere;
			}
				.lab-frozen-article .prod-list-name small {
					font-size: 14px;
					font-weight: 500;
					line-height: 1.3;
					color: var(--grey-25);
				}
			/* The named tile: one vendor with its name, its mono mark in
			   white on a dark rounded square. The continuum carries the
			   colour; the lists stay mono so the two sets don't compete
			   (Finn, 16 Oct). */
			.lab-frozen-article .prod-list-icon {
				flex: 0 0 40px;
				width: 40px;
				height: 40px;
				background: var(--grey-75);
				border-radius: 10px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
				.lab-frozen-article .overlay-wrapper .prod-list-icon {
					flex-basis: 30px;
					width: 30px;
					height: 30px;
					border-radius: 5px;
				}	
				.lab-frozen-article .prod-list-icon img {
					width: 20px;
					height: 20px;
					object-fit: contain;
				}
				.lab-frozen-article .overlay-wrapper .prod-list-icon img {
					width: 15px;
					height: 15px;
				}
		.lab-frozen-article .right .small-ul,
		.lab-frozen-article .overlay-wrapper .small-ul {
			line-height: 25px;
		}
.lab-frozen-article .small-ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}
	.lab-frozen-article .small-ul a {
		color: inherit;
		text-decoration: none;
	}
	.lab-frozen-article .right .small-ul li {
		transition: color ease 0.5s;
	}
	.lab-frozen-article .right .small-ul li:hover {
		color: var(--white);
	}
/* Addendum Credits "Contributors" list only -- sized down from the shared
   .small-ul (15px, also used by the unrelated Product Landscape vendor-tier
   cards, so that class itself stays untouched). Fine-print attribution
   reads cramped and over-weighted at the same size as the surrounding
   Credits body copy (Finn, 14 Sep 2026). */
.lab-frozen-article .contributor-list {
	font-size: 13px;
}
.lab-frozen-article .small-ol {
	margin: 0;
	padding: 0 0 0 20px;
	font-size: 15px;
}
	.lab-frozen-article .small-ol a {
		color: var(--grey-25);
		text-decoration-style: dashed;
	}

@media (min-width: 1400px) {
	.lab-frozen-article .container, .lab-frozen-article .container-lg, .lab-frozen-article .container-md, .lab-frozen-article .container-sm, .lab-frozen-article .container-xl, .lab-frozen-article .container-xxl {
		max-width: 1600px;
		padding: 0;
	}
}
@media (max-width: 1200px) {
	/* Split-desktop / tablet-landscape step: the only sizing this range had
	   before was h1 jumping UP to 10em, with h2 left completely uncapped at
	   its full-desktop 8.5em. Neither fits a ~700-1100px column -- h1 wrapped
	   long titles ("Vulnerability Management", "Security Awareness Training")
	   badly. Stepped down here, well short of the ≤992px mobile size, so long
	   titles still wrap onto two lines cleanly instead of overflowing
	   (Finn, 15 Sep 2026). h2 is now fluid in its base rule rather than
	   stepped here (29 Sep 2026). */
	.lab-frozen-article h1 {
		font-size: 6em; /* 120px / 20 = 6 */
	}
	/* h1's tight custom line-height (0.7727em, tuned for the single-line full-desktop
	   size) lets descenders on a wrapped second line hang below the calculated line
	   box. At this step h1 wraps to two lines but the subhead still uses its base
	   10px margin-top, so descenders collided with the subhead text (e.g. VM's
	   "Vulnerability Management" -- Finn, 24 Sep 2026). Give it the same headroom
	   the ≤992px step already uses, scaled up for the larger font here. */
	.lab-frozen-article .subhead {
		margin-top: 30px;
	}
	.lab-frozen-article .pad-b-500 {
		padding-bottom: 350px;
	}
	.lab-frozen-article .continuum-avg {
		min-height: 654px;
	}
	.lab-frozen-article .cyber-lab-sat .continuum-avg {
		min-height: 750px;
	}	
	.lab-frozen-article #section-threat .section-outer {
		padding-top: 500px;
		background-size: 150%;
	}
}
@media (max-width: 992px) {
	.lab-frozen-article h1 {
		font-size: 3.5em; /* 170px / 20 = 8.5 */
	}
	.lab-frozen-article h3,
	.lab-frozen-article h2.small,
	.lab-frozen-article .section-quote {
		font-size: 2em; /* 40 / 20 = 2 */
	}
	.lab-frozen-article h4 {
		font-size: 1.5em; /* 30 / 20 = 1.5 */
	}
	.lab-frozen-article .subhead {
		margin-top: 20px;
		font-size: 1.25em; /* 25 / 20 = 1.25 */
	}

	.lab-frozen-article #section-threat .section-outer {
		padding-top: 400px;
		background-size: 150%;
	}
	.lab-frozen-article .bar-percentage,
	.lab-frozen-article .bar-content,
	.lab-frozen-article .bar-content p {
		width: 100%;
	}
	.lab-frozen-article .panel:nth-child(even) {
		margin-left: 0;
	}
	/* CONTINUUM */
	.lab-frozen-article .continuum-low { min-height: 696px;}

	.lab-frozen-article .continuum-high { min-height: 600px;}

		/* EMAIL SECURITY */
		/* Low */
		.lab-frozen-article .prod-icon.mesh				{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.hornet			{ top: 240px; left: 30px; }
		.lab-frozen-article .prod-icon.graphus			{ top: 360px; left: 30px; }
		.lab-frozen-article .prod-icon.material			{ top: 480px; left: 30px; }
		.lab-frozen-article .prod-icon.sublime			{ top: 600px; left: 30px; }

		/* Avg */
		.lab-frozen-article .prod-icon.sophos			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.paubox			{ top: 240px; left: 30px; }
		.lab-frozen-article .prod-icon.spamtitan		{ top: 290px; left: 130px; }
		.lab-frozen-article .prod-icon.ironscales		{ top: 310px; left: 230px; }
		.lab-frozen-article .prod-icon.cloudflare		{ top: 350px; left: 30px; }
		.lab-frozen-article .prod-icon.mimecast			{ top: 460px; left: 30px; }
		.lab-frozen-article .prod-icon.barracuda		{ top: 510px; left: 140px; }
		.lab-frozen-article .prod-icon.proofpoint		{ top: 570px; left: 30px; }

		/* High */
		.lab-frozen-article .prod-icon.knowbe4			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.darktrace		{ top: 170px; left: 130px; }
		.lab-frozen-article .prod-icon.abnormal			{ top: 280px; left: 30px; }
		.lab-frozen-article .prod-icon.microsoft		{ top: 350px; left: 30px; }
		.lab-frozen-article .prod-icon.checkpoint		{ top: 490px ; left: 30px; }

		/* SAT */
		/* Low */
		.lab-frozen-article .prod-icon.hackerrangers	{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.idagent			{ top: 240px; left: 30px; }
		.lab-frozen-article .prod-icon.cyberhoot		{ top: 320px; left: 80px; }
		.lab-frozen-article .prod-icon.boxphish			{ top: 400px; left: 30px; }
		.lab-frozen-article .prod-icon.riot				{ top: 520px; left: 30px; }
		.lab-frozen-article .prod-icon.mimecastsat		{ top: 600px; left: 70px; }

		/* Avg */
		.lab-frozen-article .prod-icon.huntress			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.usecure			{ top: 240px; left: 30px; }
		.lab-frozen-article .prod-icon.metacompliance	{ top: 240px; left: 160px; }
		.lab-frozen-article .prod-icon.sansinstitute	{ top: 310px; left: 90px; }
		.lab-frozen-article .prod-icon.ninjio			{ top: 310px; left: 230px; }
		.lab-frozen-article .prod-icon.infoseciq		{ top: 390px; left: 30px; }
		.lab-frozen-article .prod-icon.barracudasat		{ top: 460px; left: 90px; }
		.lab-frozen-article .prod-icon.immersive		{ top: 490px; left: 190px; }
		.lab-frozen-article .prod-icon.sosafe			{ top: 540px; left: 30px; }
		.lab-frozen-article .prod-icon.proofpointsat	{ top: 620px; left: 90px; }

		/* High */
		.lab-frozen-article .prod-icon.hoxhunt			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.adaptive			{ top: 240px; left: 30px; }
		.lab-frozen-article .prod-icon.phished			{ top: 360px; left: 30px; }
		.lab-frozen-article .prod-icon.knowbe4sat		{ top: 480px; left: 30px; }

		/* BROWSER SECURITY */
		/* Low */
		.lab-frozen-article .prod-icon.manageengine		{ top: 250px; left: 30px; }
		.lab-frozen-article .prod-icon.checkpointharmony{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.squarex			{ top: 400px; left: 30px; }

		/* Avg */
		.lab-frozen-article .prod-icon.layerx			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.apozy			{ top: 120px; left: 160px; }
		.lab-frozen-article .prod-icon.conceal			{ top: 290px; left: 30px; }
		.lab-frozen-article .prod-icon.acium			{ top: 290px; left: 160px; }
		.lab-frozen-article .prod-icon.redaccess		{ top: 470px; left: 160px; }
		.lab-frozen-article .prod-icon.keepaware		{ top: 470px; left: 30px; }

		/* High */
		.lab-frozen-article .prod-icon.pushsecurity		{ top: 150px; left: 140px; }
		.lab-frozen-article .prod-icon.seraphic			{ top: 120px; left: 30px; }
		.lab-frozen-article .prod-icon.menlo			{ top: 380px; left: 30px; }
		.lab-frozen-article .prod-icon.defensx			{ top: 510px; left: 30px; }

	.lab-frozen-article .cta-wrapper h3,
	.lab-frozen-article .cta-wrapper p {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.lab-frozen-article h1 {
		font-size: 3.5em; /* 170px / 20 = 8.5 */
	}
	.lab-frozen-article .pad-b-500 {
		padding-bottom: 200px;
	}
	.lab-frozen-article .panel {
		padding: 20px;
	}
	.lab-frozen-article .nav-list ul li a {
		font-size: 1.5em; /* 30 / 20 = 1.5 */	
	}
}
@media (max-width: 576px) {

	/* HEADER */
	.lab-frozen-article .header-wrapper {
		width: calc(100% - 24px);
		margin-left: 12px;
	}
	.lab-frozen-article .section-outer {
		margin: 0;
	}
	/* FORMS */
	.lab-frozen-article .hs-email, 
	.lab-frozen-article .hs-submit {
		width: 100%;
	}
	.lab-frozen-article .hero-form .small-print,
	.lab-frozen-article .hero-form .form-error {
		margin-left: 0;
		text-align: center;
	}
}

/* TABLE OF CONTENTS */
.lab-frozen-article #section-toc h2.small {
	margin-bottom: 0;
}
.lab-frozen-article .toc-card {
	color: inherit;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 10px;
	transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease;
}
	.lab-frozen-article .toc-card:hover {
		color: inherit;
		transform: translateY(-4px);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	}
	.lab-frozen-article .toc-card:focus-visible {
		outline: 2px solid var(--black);
		outline-offset: 4px;
	}
	.lab-frozen-article .toc-icon {
		width: 64px;
		height: 64px;
		flex: 0 0 64px;
		border-radius: 10px;
	}
	.lab-frozen-article .toc-content {
		flex: 1;
		min-width: 0;
	}
		.lab-frozen-article .toc-content h4 {
			margin-bottom: 6px;
		}
		.lab-frozen-article .toc-content p {
			margin: 0;
			color: var(--grey-50);
			font-size: 17px;
			line-height: 1.4em;
		}
	.lab-frozen-article .toc-chip {
		padding: 0 10px;
		margin-left: 8px;
		font-family: 'Inter Tight', 'Arial', sans-serif;
		font-size: 12px;
		font-weight: 700;
		line-height: 22px;
		color: var(--white);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		background: var(--black);
		border-radius: 9999px;
		display: inline-block;
		vertical-align: middle;
	}

@media (max-width: 992px) {
	.lab-frozen-article .toc-card {
		margin-bottom: 12px;
	}
		.lab-frozen-article .toc-card .toc-icon {
			width: 56px;
			height: 56px;
			flex-basis: 56px;
		}
}

/* STICKY CTA */
.lab-frozen-article .sticky-cta {
	position: fixed;
	z-index: 100;
	bottom: 30px;
	left: 50%;
	width: calc(100% - 60px);
	max-width: 350px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(20px);
	transition:
		opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 400ms;
}
	.lab-frozen-article .sticky-cta.visible {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition:
			opacity 400ms cubic-bezier(0.22, 1, 0.36, 1),
			transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0s;
	}
	.lab-frozen-article .sticky-cta.submitted {
		display: none !important;
	}
	.lab-frozen-article .form-success {
		margin: 0;
		padding: 1em 0;
		font-weight: 600;
	}
	.lab-frozen-article .sticky-cta .liquidGlass-wrapper {
		border-radius: 9999px;
	}
	.lab-frozen-article .sticky-cta-text {
		display: block;
		margin: 0 0 8px 0;
		padding-left: 30px;
		font-family: 'Inter Tight', 'Arial', sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		line-height: 1em;
		color: var(--black);
		white-space: nowrap;
		transition: color 200ms ease;
	}
	.lab-frozen-article .sticky-cta.theme-white .sticky-cta-text {
		color: var(--white);
	}
	.lab-frozen-article .sticky-cta-content {
		display: block;
		padding: 6px 6px 6px 16px;
	}
		.lab-frozen-article .sticky-cta-form {
			flex: 1;
			min-width: 0;
		}
		/* Compact HubSpot form overrides scoped to sticky CTA */
		.lab-frozen-article .sticky-cta form {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 6px;
			justify-content: flex-end;
		}
		.lab-frozen-article .sticky-cta .hs_email {
			width: auto;
			flex: 1;
			min-width: 0;
		}
			.lab-frozen-article .sticky-cta .hs_email > label:first-child {
				display: none;
			}
			.lab-frozen-article .sticky-cta .hs_email input[type="email"] {
				width: 100%;
				min-width: 0;
				margin: 0;
				padding: 0 14px;
				font-family: 'Inter Tight', 'Arial', sans-serif;
				font-size: 14px;
				font-weight: 600;
				line-height: 40px;
				color: var(--black);
				border: none;
				outline: none;
				background: transparent;
				display: block;
				transition: color 200ms ease;
			}
				.lab-frozen-article .sticky-cta .hs_email input[type="email"]::placeholder {
					color: var(--grey-50);
					transition: color 200ms ease;
				}
				.lab-frozen-article .sticky-cta.theme-white .hs_email input[type="email"] {
					color: var(--white);
				}
				.lab-frozen-article .sticky-cta.theme-white .hs_email input[type="email"]::placeholder {
					color: rgba(255, 255, 255, 0.6);
				}
		.lab-frozen-article .sticky-cta .hs_submit {
			width: auto;
			flex: 0 0 auto;
		}
			.lab-frozen-article .sticky-cta .hs_submit input[type="submit"] {
				padding: 0 18px;
				font-family: 'Inter Tight', 'Arial', sans-serif;
				font-size: 14px;
				font-weight: 700;
				line-height: 40px;
				color: var(--white);
				background: var(--black);
				border: none;
				border-radius: 9999px;
				cursor: pointer;
				box-shadow: none;
				transition: background 200ms ease, color 200ms ease;
			}
				.lab-frozen-article .sticky-cta.theme-white .hs_submit input[type="submit"] {
					background: var(--white);
					color: var(--black);
				}
		.lab-frozen-article .sticky-cta .hs-error-msgs {
			display: none;
		}
		.lab-frozen-article .sticky-cta .submitted-message {
			padding: 0 14px;
			font-family: 'Inter Tight', 'Arial', sans-serif;
			font-size: 14px;
			font-weight: 600;
			line-height: 40px;
			color: var(--black);
		}

@media (max-width: 992px) {
	.lab-frozen-article .sticky-cta {
		left: 0;
		right: auto;
		bottom: 0;
		width: 100%;
		max-width: none;
		transform: translateY(20px);
	}
	.lab-frozen-article .sticky-cta.visible {
		transform: translateY(0);
	}
		.lab-frozen-article .sticky-cta .liquidGlass-wrapper {
			border-radius: 0;
			box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
		}
		.lab-frozen-article .sticky-cta .liquidGlass-tint {
			background: rgba(0, 0, 0, 0.92);
		}
		.lab-frozen-article .sticky-cta-content {
			padding: 10px 10px 10px 14px;
			padding-bottom: calc(10px + env(safe-area-inset-bottom));
		}
		.lab-frozen-article .sticky-cta-text {
			display: none;
		}
		.lab-frozen-article .sticky-cta .form-error {
			margin: 0;
			padding: 10px 14px 0;
			color: var(--white);
			background: rgba(0, 0, 0, 0.92);
		}
		.lab-frozen-article .sticky-cta .hs_email input[type="email"] {
			color: var(--white);
		}
			.lab-frozen-article .sticky-cta .hs_email input[type="email"]::placeholder {
				color: rgba(255, 255, 255, 0.6);
			}
		.lab-frozen-article .sticky-cta .hs_submit input[type="submit"] {
			background: var(--white);
			color: var(--black);
		}
		.lab-frozen-article .sticky-cta .submitted-message {
			color: var(--white);
		}
}

/* HEADER SCROLL PROGRESS BAR */
.lab-frozen-article .header-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	z-index: 4;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.06);
}
	.lab-frozen-article .header-progress-fill {
		width: 0%;
		height: 100%;
		background: var(--black);
		transition: width 80ms linear;
	}
	.lab-frozen-article header.theme-white .header-progress {
		background: rgba(255, 255, 255, 0.12);
	}
	.lab-frozen-article header.theme-white .header-progress-fill {
		background: var(--white);
	}

/* HEADER MARQUEE
   Gated on header.has-marquee so the shared production CSS only squares the nav
   and shows the strip on pages that actually render a marquee. */
.lab-frozen-article header.has-marquee .header-wrapper {
	position: relative;
	z-index: 2;        /* keep the pill above the marquee */
	/* stay rounded until the marquee drops at 3s, then square the bottom in sync so the two merge */
	animation: header-nav-square 600ms cubic-bezier(0.22, 1, 0.36, 1) 3000ms both;
}
@keyframes header-nav-square {
	from { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
	to   { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
.lab-frozen-article header.has-marquee .header-marquee-col {
	position: relative;
	z-index: 1;            /* sits behind the header pill so it reads as sliding from behind the nav */
	padding-left: 0;       /* drop the Bootstrap gutter so the strip edges line up with the nav */
	padding-right: 0;
	pointer-events: none;
}
	/* Mask hides the strip AND its drop shadow while they are tucked behind the nav, so the two only ever
	   appear together. It is taller than the strip purely to leave room for the shadow below. */
	.lab-frozen-article header.has-marquee .header-marquee-mask {
		height: 46px;
		overflow: hidden;
	}
		.lab-frozen-article header.has-marquee .header-marquee {
			display: block;
			height: 30px;
			overflow: hidden;  /* clips the scrolling track */
			background: #0072ff;
			border-radius: 0 0 20px 20px;   /* rounded bottom matches the nav's rounded top for one continuous pill */
			box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);   /* shadow rides with the strip, so it is clipped until reveal */
			text-decoration: none;
			pointer-events: auto;   /* re-enable clicks on the visible strip (the col is pointer-events:none) */
			transform: translateY(-100%);   /* start hidden behind the nav */
			animation: header-marquee-drop 600ms cubic-bezier(0.22, 1, 0.36, 1) 3000ms both;   /* reveal 3s after load */
		}
		@keyframes header-marquee-drop {
			from { transform: translateY(-100%); }
			to   { transform: translateY(0); }
		}
			.lab-frozen-article header.has-marquee .header-marquee-track {
				display: flex;
				width: max-content;
				height: 100%;
				animation: header-marquee-scroll 30s linear infinite;
			}
			@keyframes header-marquee-scroll {
				from { transform: translateX(0); }
				to   { transform: translateX(-50%); }   /* two identical sequences loop seamlessly */
			}
				.lab-frozen-article header.has-marquee .header-marquee-seq {
					display: flex;
					flex: 0 0 auto;
					align-items: center;
					height: 100%;
				}
					/* "LIVE" pill: white background, blue uppercase text */
					.lab-frozen-article header.has-marquee .header-marquee-pill {
						flex: 0 0 auto;
						margin-right: 10px;
						padding: 3px 9px;
						background: var(--white);
						color: #0072ff;
						border-radius: 9999px;
						font-family: 'Inter Tight', 'Arial', sans-serif;
						font-size: 11px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.06em;
						text-transform: uppercase;
						white-space: nowrap;
					}
					.lab-frozen-article header.has-marquee .header-marquee-text,
					.lab-frozen-article header.has-marquee .header-marquee-cta {
						flex: 0 0 auto;
						color: var(--white);
						font-family: 'Inter Tight', 'Arial', sans-serif;
						font-size: 13px;
						font-weight: 700;
						letter-spacing: 0.02em;
						line-height: 30px;
						white-space: nowrap;
					}
					.lab-frozen-article header.has-marquee .header-marquee-text {
						margin-right: 10px;
						opacity: 0.85;
					}
					.lab-frozen-article header.has-marquee .header-marquee-cta {
						margin-right: 48px;   /* larger gap before the next unit's pill */
						opacity: 1;
						text-decoration: underline dashed;
						text-decoration-thickness: 1px;
						text-underline-offset: 3px;
					}
	@media (prefers-reduced-motion: reduce) {
		.lab-frozen-article header.has-marquee .header-wrapper {
			animation: none;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
		.lab-frozen-article header.has-marquee .header-marquee {
			transform: translateY(0);
			animation: none;
		}
		.lab-frozen-article header.has-marquee .header-marquee-track {
			animation: none;
		}
	}
	@media (max-width: 576px) {
		/* the nav becomes inset on mobile (.header-wrapper: width 100% - 24px; margin-left 12px),
		   so restore a matching 12px gutter on the marquee column to keep their edges aligned */
		.lab-frozen-article header.has-marquee .header-marquee-col {
			padding-left: 12px;
			padding-right: 12px;
		}
	}

/* BAR CHART FILL ANIMATION */
@media (prefers-reduced-motion: no-preference) {
	.lab-frozen-article .bar {
		transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.lab-frozen-article .bar-wrapper:not(.in-view) .bar {
		width: 0;
	}
}

/* CURSOR-REACTIVE SHINE */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.lab-frozen-article .toc-card .liquidGlass-shine,
	.lab-frozen-article .prod-icon .liquidGlass-shine {
		background:
			radial-gradient(
				circle 120px at var(--shine-x, 50%) var(--shine-y, 50%),
				rgba(255, 255, 255, 0.45),
				transparent 70%
			);
		transition: background 120ms linear;
	}
}

/* CONSULTATION CTA (secondary variant) */
.lab-frozen-article .cta-wrapper.cta-secondary {
	padding: 30px 40px;
}
	.lab-frozen-article .cta-wrapper.cta-secondary h4 {
		max-width: 760px;
		margin-bottom: 10px;
		font-size: 1.4em; /* 28 / 20 */
	}
	.lab-frozen-article .cta-wrapper.cta-secondary p {
		max-width: 760px;
		margin-bottom: 20px;
		font-size: 17px;
	}
	.lab-frozen-article .cta-wrapper.cta-secondary .btn-white {
		line-height: 50px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}
	.lab-frozen-article .cta-wrapper.cta-secondary .small-print {
		margin: 0 0 0 15px;
		display: inline-block;
		vertical-align: middle;
	}
@media (max-width: 992px) {
	.lab-frozen-article .cta-wrapper.cta-secondary h4,
	.lab-frozen-article .cta-wrapper.cta-secondary p {
		width: 100%;
	}
	.lab-frozen-article .cta-wrapper.cta-secondary .small-print {
		display: block;
		margin: 15px 0 0 0;
	}
}

/* CONCLUSION SUBSCRIBE BLOCK */
.lab-frozen-article .conclusion-subscribe-block {
	padding: 50px;
}
	.lab-frozen-article .conclusion-subscribe-block h3 {
		margin-bottom: 10px;
	}
	.lab-frozen-article .conclusion-subscribe-block > p {
		margin-bottom: 30px;
		color: var(--grey-50);
	}
	.lab-frozen-article .conclusion-form-wrapper {
		border-radius: 30px;
	}
	.lab-frozen-article .conclusion-subscribe-block .small-print {
		margin-top: 15px;
	}
@media (max-width: 768px) {
	.lab-frozen-article .conclusion-subscribe-block {
		padding: 30px;
	}
}

/* PUSH SCROLL ANCHORS BELOW FIXED HEADER
   The site now reserves the sticky header's height on every page
   (`html { scroll-padding-top }` in src/styles/styles.css: 81px from 768px,
   73px below), so this only adds the breathing room on top. Was 110px,
   which now stacks with the site offset; 29px keeps the same 110px desktop
   landing (81 + 29). */
.lab-frozen-article section[id^="section-"] {
	scroll-margin-top: 29px;
}

/* Hero title fit (Finn, 2 Oct 2026). A long single word in the title
   ("Awareness", "Management") can be wider than the hero column at the
   shared h1 sizes, which pushed the page wider than a phone screen so it
   scrolled sideways. An article whose title has such a word sets
   --hero-fit on its h1 (about 95% of the column divided by that word's
   width in em), capping the title to its column. Without it the title
   keeps the shared size. */
.lab-frozen-article #section-hero .col-12:has(> h1) {
	container-type: inline-size;
}
.lab-frozen-article #section-hero h1 {
	font-size: min(9.5em, var(--hero-fit, 100cqi));
}
@media (max-width: 1200px) {
	.lab-frozen-article #section-hero h1 {
		font-size: min(6em, var(--hero-fit, 100cqi));
	}
}
@media (max-width: 992px) {
	.lab-frozen-article #section-hero h1 {
		font-size: min(3.5em, var(--hero-fit, 100cqi));
	}
}

/* Headroom under the hero title (Finn, 5 Oct 2026). The h1's tight line
   height lets descenders on its second line ("Management", "Security",
   "Training") hang below its box, so above 1200px they ran into the
   subhead. A bottom margin in em scales with the title, leaving a clear
   gap of roughly a fifth of the title size at every width. */
.lab-frozen-article #section-hero h1 {
	margin-bottom: 0.3em;
}
@media (max-width: 1200px) {
	.lab-frozen-article #section-hero h1 {
		margin-bottom: 0.15em;
	}
}
@media (max-width: 992px) {
	.lab-frozen-article #section-hero h1 {
		margin-bottom: 0.1em;
	}
}

/* The Browser article's "50%+" is wider than a phone column at 130px. */
@media (max-width: 576px) {
	.lab-frozen-article .bar-percentage {
		font-size: 5em; /* 100px */
	}
}

/* =========================================================================
   v79 REFRESH (Finn, 10 Oct)
   - Section cards: white with a hairline and the card shadow (were grey),
     lifting on hover.
   - Their icons: thin black line marks on a light tile (were white on solid
     black), one solid detail each; diamonds where the shape fits.
   - The "which of these fits" card: the Lab's lattice as a band along its
     foot, fading left. A band under the button, never behind the copy, so
     it holds on a phone. George's brand review, 14 Oct 2026: drawn for the
     grey card (8% black), with no solid cells.
   ========================================================================= */
.lab-frozen-article .toc-card.panel-grey-10 {
	background: var(--white);
	box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 28px rgba(20, 20, 20, 0.05);
}
	.lab-frozen-article .toc-card.panel-grey-10:hover {
		box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.16), 0 14px 34px rgba(20, 20, 20, 0.08);
	}
	.lab-frozen-article .toc-card .toc-icon {
		box-sizing: border-box;
		padding: 12px;
		border-radius: 16px;
		background: linear-gradient(160deg, var(--white), #f4f5f6);
		box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08);
	}
@media (max-width: 992px) {
	.lab-frozen-article .toc-card .toc-icon {
		padding: 11px;
		border-radius: 14px;
	}
}

.lab-frozen-article .cta-wrapper.bkg-grey {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-bottom: 120px;
}
	.lab-frozen-article .cta-wrapper.bkg-grey::after {
		content: '';
		position: absolute;
		left: 50px;
		right: 50px;
		bottom: 30px;
		z-index: -1;
		height: 38px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='38' viewBox='0 0 28 38'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.08'%3E%3Crect x='6.5' y='4.5' width='15' height='15' rx='3' transform='rotate(45 14 12)'/%3E%3Crect x='-7.5' y='18.5' width='15' height='15' rx='3' transform='rotate(45 0 26)'/%3E%3Crect x='20.5' y='18.5' width='15' height='15' rx='3' transform='rotate(45 28 26)'/%3E%3C/g%3E%3C/svg%3E") right bottom / 28px 38px repeat-x;
		-webkit-mask-image: linear-gradient(to left, #000 15%, transparent 75%);
		mask-image: linear-gradient(to left, #000 15%, transparent 75%);
		pointer-events: none;
	}
@media (max-width: 767.98px) {
	.lab-frozen-article .cta-wrapper.bkg-grey {
		padding-bottom: 100px;
	}
		.lab-frozen-article .cta-wrapper.bkg-grey::after {
			bottom: 24px;
			left: 30px;
			right: 30px;
			-webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%);
			mask-image: linear-gradient(to left, #000 25%, transparent 95%);
		}
}

/* Capability gaps card (Finn, 22 Oct 2026): the article's closing callout
   joins the CTA card's family, so it stands out as one compact module rather
   than a grey aside. White with the card hairline and shadow (no grey cards),
   the CTA's 50px padding, and the same diamond corner piece, set top right so
   the pair mirrors the CTA's bottom-right corner. No blue wash: that stays
   the article's one ask.
   23 Oct: built like the v3 outcomes card, so the two read as one system.
   "Before you buy" is an eyebrow over a rule, the features are numbered rows
   on hairlines (number and name in a 250px column, the question beside it),
   and the booking ask sits clear of the last row. */
.lab-frozen-article .cta-wrapper.lab-gaps {
	--cta-pad: 50px;
	--gaps-rule: rgba(20, 20, 20, 0.12);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-top: 100px;
	padding: var(--cta-pad);
	background: var(--white);
	box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 28px rgba(20, 20, 20, 0.05);
	counter-reset: lab-gap;
}
.lab-frozen-article .cta-wrapper.lab-gaps > * {
	position: relative;
	margin: 0;
}
.lab-frozen-article .cta-wrapper.lab-gaps::after {
	z-index: -1;
	inset: 0;
	width: auto;
	height: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.08'%3E%3Crect x='6.5' y='6.5' width='15' height='15' rx='3' transform='rotate(45 14 14)'/%3E%3Crect x='-7.5' y='-7.5' width='15' height='15' rx='3' transform='rotate(45 0 0)'/%3E%3Crect x='20.5' y='-7.5' width='15' height='15' rx='3' transform='rotate(45 28 0)'/%3E%3Crect x='-7.5' y='20.5' width='15' height='15' rx='3' transform='rotate(45 0 28)'/%3E%3Crect x='20.5' y='20.5' width='15' height='15' rx='3' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E") right top / 28px 28px repeat;
	-webkit-mask-image: radial-gradient(45% 70% at 100% 0%, #000 20%, transparent 100%);
	mask-image: radial-gradient(45% 70% at 100% 0%, #000 20%, transparent 100%);
	pointer-events: none;
}
/* Eyebrow: the report's label (14px, 800, tracked caps) running into a rule,
   like the section numbers. */
.lab-frozen-article .cta-wrapper.lab-gaps > .lab-gaps__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 50%;
	margin-bottom: 24px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--black);
}
.lab-frozen-article .cta-wrapper.lab-gaps > .lab-gaps__eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--gaps-rule);
}
.lab-frozen-article .cta-wrapper.lab-gaps h3 {
	margin-bottom: 16px;
	text-wrap: balance;
}
.lab-frozen-article .cta-wrapper.lab-gaps h3 + p {
	color: var(--grey-25);
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms {
	display: block;
	margin: 40px 0 0;
	border-bottom: 1px solid var(--gaps-rule);
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms > div,
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms > div:last-child {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: baseline;
	gap: 8px 50px;
	padding: 20px 0;
	border-top: 1px solid var(--gaps-rule);
	font-size: 17px;
	line-height: 1.6;
	counter-increment: lab-gap;
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms :is(dt, dd) {
	display: block;
	margin: 0;
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms dt {
	display: flex;
	gap: 12px;
	font-family: 'Inter Tight', 'Arial', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms dt::before {
	content: counter(lab-gap, decimal-leading-zero);
	flex: 0 0 auto;
	padding-top: 2px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms dd::before {
	content: none;
}
.lab-frozen-article .cta-wrapper.lab-gaps > .lab-gaps__book {
	align-self: flex-start;
	margin-top: 50px;
	padding: 0 30px;
}
@media (max-width: 991.98px) {
	.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms > div,
	.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms > div:last-child {
		grid-template-columns: minmax(0, 1fr);
	}
	.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms dd {
		padding-left: 32px;
	}
}
@media (max-width: 767.98px) {
	.lab-frozen-article .cta-wrapper.lab-gaps {
		--cta-pad: 30px;
		margin-top: 80px;
	}
	.lab-frozen-article .cta-wrapper.lab-gaps::after {
		-webkit-mask-image: radial-gradient(80% 40% at 100% 0%, #000 20%, transparent 100%);
		mask-image: radial-gradient(80% 40% at 100% 0%, #000 20%, transparent 100%);
	}
	.lab-frozen-article .cta-wrapper.lab-gaps > .lab-gaps__eyebrow {
		max-width: none;
	}
	.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms {
		margin-top: 30px;
	}
	.lab-frozen-article .cta-wrapper.lab-gaps .lab-terms dd {
		padding-left: 0;
	}
	.lab-frozen-article .cta-wrapper.lab-gaps > .lab-gaps__book {
		align-self: stretch;
		margin-top: 40px;
		padding: 18px 24px;
		line-height: 1.3;
		text-align: center;
	}
}

/* The card to read first (Finn, 9 Oct): the Security Outcomes video, or the
   Product Landscape where an article has no video, takes v79's blue-wash
   corner (the card rule's open-featured gradient). Marked .toc-card--start
   in the frozen HTML. Since George's brand review (14 Oct 2026) the wash is
   the blue tint step (#E0ECFF, --v79-blue-tint), the focus colour. */
.lab-frozen-article .toc-card.toc-card--start {
	background:
		radial-gradient(85% 75% at 0% 0%, #E0ECFF, transparent 75%),
		var(--white);
}

/* No sideways scroll at 1400-1624px (Finn, 9 Oct): the rule above drops the
   container's side padding, so on a window narrower than its 1600px plus the
   rows' 12px gutters, each .row hung 12px past the edge. The padding comes
   back only where it is needed, so wider windows are unchanged. */
@media (min-width: 1400px) {
	.lab-frozen-article .container, .lab-frozen-article .container-lg, .lab-frozen-article .container-md, .lab-frozen-article .container-sm, .lab-frozen-article .container-xl, .lab-frozen-article .container-xxl {
		padding-inline: clamp(0px, (1624px - 100vw) / 2, 12px);
	}
}

/* No grey cards (Finn, 9 Oct): the "which of these fits" card goes white
   with the hairline and card shadow, like the section cards, and takes the
   blue-wash corner as the one ask in the article. (The Security Outcomes
   cards became the expand grid in charts.css, whose open detail area takes
   the same corner.) */
.lab-frozen-article .cta-wrapper.vef-split-cta {
	background: var(--white);
	box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.08), 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 28px rgba(20, 20, 20, 0.05);
}
.lab-frozen-article .cta-wrapper.vef-split-cta {
	background:
		radial-gradient(85% 75% at 0% 0%, #E0ECFF, transparent 75%),
		var(--white);
}

/* CTA card rhythm and corner (Finn, 21 Oct 2026; VM staging edit 8). Two
   values all the way down: the outer padding, the same top and bottom, and
   one gap between every element (toggle, heading, copy, button). The
   diamond pattern is a corner piece behind the content, out of the layout:
   it runs to the card's right and bottom edges, clipped by the rounded
   corner, and fades towards the centre, mirroring the blue wash top left. */
.lab-frozen-article .cta-wrapper.vef-split-cta {
	--cta-pad: 50px;
	--cta-gap: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--cta-gap);
	padding: var(--cta-pad);
}
.lab-frozen-article .cta-wrapper.vef-split-cta > * {
	position: relative;
	margin: 0;
}
/* The toggle keeps its full width (up to its 360px), so neither label
   wraps now that the column no longer stretches its children. */
.lab-frozen-article .cta-wrapper.vef-split-cta > .vef-split-pill {
	align-self: stretch;
}
.lab-frozen-article .cta-wrapper.vef-split-cta::after {
	inset: 0;
	width: auto;
	height: auto;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.08'%3E%3Crect x='6.5' y='6.5' width='15' height='15' rx='3' transform='rotate(45 14 14)'/%3E%3Crect x='-7.5' y='-7.5' width='15' height='15' rx='3' transform='rotate(45 0 0)'/%3E%3Crect x='20.5' y='-7.5' width='15' height='15' rx='3' transform='rotate(45 28 0)'/%3E%3Crect x='-7.5' y='20.5' width='15' height='15' rx='3' transform='rotate(45 0 28)'/%3E%3Crect x='20.5' y='20.5' width='15' height='15' rx='3' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E") right bottom / 28px 28px repeat;
	-webkit-mask-image: radial-gradient(55% 65% at 100% 100%, #000 20%, transparent 100%);
	mask-image: radial-gradient(55% 65% at 100% 100%, #000 20%, transparent 100%);
}
@media (max-width: 767.98px) {
	.lab-frozen-article .cta-wrapper.vef-split-cta::after {
		inset: 0;
		-webkit-mask-image: radial-gradient(80% 50% at 100% 100%, #000 20%, transparent 100%);
		mask-image: radial-gradient(80% 50% at 100% 100%, #000 20%, transparent 100%);
	}
}

/* ---------- ARTICLE TOP: EVEN MODULE SPACING (Finn, 21 Oct 2026) ----------
   Hero, contents cards, subscribe and video sit 75px apart on every
   article, between the 50 and 100 they had. */
.lab-frozen-article #section-hero > .section-outer,
.lab-frozen-article #section-hero-cta > .section-outer,
.lab-frozen-article #section-hero-video > .section-outer {
	padding-bottom: 75px;
}
.lab-frozen-article #section-toc > .section-outer {
	padding-top: 0;
	padding-bottom: 75px;
}

/* ---------- HERO LATTICE (Finn, 21 Oct 2026) ----------
   The continuum's lattice, the faintest white on the hero's grey, lit only
   where a soft spotlight passes: it circles slowly in the top right and
   breathes in and out, so the lattice surfaces and fades back into the
   page. Same cell geometry as the continuum (48.43 x 48, diamonds at the
   tile's corners and centre). */
@property --hero-sx { syntax: '<percentage>'; inherits: false; initial-value: 78%; }
@property --hero-sy { syntax: '<percentage>'; inherits: false; initial-value: 28%; }
.lab-frozen-article #section-hero {
	position: relative;
	overflow: hidden;
}
.lab-frozen-article #section-hero > .section-outer {
	position: relative;
	z-index: 1;
}
.lab-frozen-article #section-hero::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: min(900px, 70%);
	height: min(760px, 90%);
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.4262' height='48' viewBox='0 0 48.4262 48'%3E%3Cg fill='%23fff'%3E%3Cpath d='M0 -19l19 19l-19 19l-19 -19z'/%3E%3Cpath d='M48.4262 -19l19 19l-19 19l-19 -19z'/%3E%3Cpath d='M0 29l19 19l-19 19l-19 -19z'/%3E%3Cpath d='M48.4262 29l19 19l-19 19l-19 -19z'/%3E%3Cpath d='M24.2131 5l19 19l-19 19l-19 -19z'/%3E%3C/g%3E%3C/svg%3E") top right / 48.4262px 48px repeat;
	opacity: 0.6;
	-webkit-mask-image:
		radial-gradient(circle 300px at var(--hero-sx) var(--hero-sy), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%),
		linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 75%);
	-webkit-mask-composite: source-in;
	mask-image:
		radial-gradient(circle 300px at var(--hero-sx) var(--hero-sy), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%),
		linear-gradient(to bottom left, #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 75%);
	mask-composite: intersect;
}
@media (prefers-reduced-motion: no-preference) {
	.lab-frozen-article #section-hero::before {
		animation:
			hero-spot 36s linear infinite,
			hero-breathe 12s ease-in-out infinite;
	}
}
@keyframes hero-spot {
	0%     { --hero-sx: 78%; --hero-sy: 14%; }
	12.5%  { --hero-sx: 89%; --hero-sy: 19%; }
	25%    { --hero-sx: 93%; --hero-sy: 32%; }
	37.5%  { --hero-sx: 89%; --hero-sy: 45%; }
	50%    { --hero-sx: 78%; --hero-sy: 50%; }
	62.5%  { --hero-sx: 67%; --hero-sy: 45%; }
	75%    { --hero-sx: 63%; --hero-sy: 32%; }
	87.5%  { --hero-sx: 67%; --hero-sy: 19%; }
	100%   { --hero-sx: 78%; --hero-sy: 14%; }
}
@keyframes hero-breathe {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 0.85; }
}
@media (max-width: 767.98px) {
	.lab-frozen-article #section-hero::before {
		width: 100%;
		height: 60%;
	}
}

/* RECAPTCHA
   reCAPTCHA v3 is on for the subscribe form (11 Nov 2026). HubSpot drops
   Google's badge inline between the email field and the button, which
   breaks both two-item pills (hero and sticky). v3 runs from its script,
   not the badge, so the badge is visually hidden here and core.js adds
   Google's required disclosure to the hero form's small print. */
.lab-frozen-article .hs_recaptcha {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
	.lab-frozen-article .recaptcha-disclosure a {
		color: inherit;
		text-decoration: underline;
	}