/*
 * Blue E product page sections.
 * Values measured from Figma node 174:256. Decimal line heights in the
 * design come from a 1.2698x scale off a 1512px base; they are kept as
 * measured rather than rounded.
 */

.blue-e-section-heading {
	/* Figma heading baseline to first content row: 1196->1332 and
	   2220->2355, i.e. ~136px on the dark sections. */
	margin: 0 0 60px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 45.714px;
}

/*
 * Carousel panels set an explicit display, which beats the [hidden]
 * attribute's default display:none — so every slide rendered at once.
 * Shared by all four product pages.
 */
[hidden] {
	display: none !important;
}

.blue-e-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 230px;
	max-width: 100%;
	height: 40px;
	background-color: #e50043;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 22.857px;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	box-sizing: border-box;
	transition: background-color .3s;
}

/* Kept as a hook; all buttons now share the Figma 230x40. */
.blue-e-button--wide {
	width: 230px;
}

.blue-e-button:hover,
.blue-e-button:focus {
	background-color: #c8003a;
}

/* ==========================================
   Sticky section navigation — Figma 174:524
========================================== */

.blue-e-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	height: 80px;
	background-color: #000;
	border-bottom: 1px solid #1c1c1c;
}

/*
 * Anchored sections stop below the sticky bar instead of sliding under
 * it. The nav itself needs no offset — it is the scroll target for the
 * hero button and should come to rest at the top of the window.
 */
[id]:not(#section-nav) {
	scroll-margin-top: 80px;
}

.blue-e-nav__list {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	height: 80px;
	margin: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.blue-e-nav__list::-webkit-scrollbar {
	display: none;
}

.blue-e-nav__link {
	display: block;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 30.476px;
	text-decoration: none;
	white-space: nowrap;
}

.blue-e-nav__link:hover,
.blue-e-nav__link:focus,
.blue-e-nav__link.is-active {
	border-bottom-color: #e50043;
}

/* ==========================================
   Key Attributes
========================================== */

.blue-e-attr {
	background-color: #000;
	/* Figma sub-nav bottom 1107 -> heading 1196 = 89px. */
	padding: 89px 0 48px;
}

.blue-e-attr__stage {
	position: relative;
	display: grid;
	grid-template-columns: 1fr minmax(0, 562px) 1fr;
	align-items: center;
	gap: 32px;
}

.blue-e-attr__media {
	position: relative;
	grid-column: 2;
	margin: 0;
	/* Panels overhang the image into the side columns. */
	overflow: visible;
}

.blue-e-attr__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* 40px ring with an 18px #e50043 core — Figma List Item (RITTAL). */
.blue-e-attr__hotspot {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	padding: 0;
	background-color: rgba(0, 0, 0, .5);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .2s;
}

.blue-e-attr__hotspot:hover,
.blue-e-attr__hotspot:focus-visible,
.blue-e-attr__hotspot.is-active {
	transform: scale(1.12);
}

.blue-e-attr__hotspot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * Pulse ring. Sits behind the dot and expands outward, so a marker
 * reads as live without needing an image asset.
 */
.blue-e-attr__hotspot::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 18px;
	height: 18px;
	background-color: #e50043;
	border-radius: 50%;
	animation: rittal-hotspot-pulse 2s ease-out infinite;
}

.blue-e-attr__hotspot.is-active::before {
	animation-play-state: paused;
}

@keyframes rittal-hotspot-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.blue-e-attr__hotspot::before {
		animation: none;
	}

	.blue-e-attr__hotspot {
		transition: none;
	}
}

/* Solid core; ::before is the animated ring behind it. */
.blue-e-attr__hotspot::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 18px;
	height: 18px;
	background-color: #e50043;
	border-radius: 50%;
}

.blue-e-callout {
	padding: 24px 28px;
	background-color: #fff;
	color: #000;
}

/*
 * Callouts stack in a column either side of the product image, so the
 * section takes any number of them rather than the three the design
 * places by hand.
 */
.blue-e-attr__column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.blue-e-attr__column--left {
	grid-column: 1;
	grid-row: 1;
}

.blue-e-attr__column--right {
	grid-column: 3;
	grid-row: 1;
}

.blue-e-attr__column:empty {
	display: none;
}

/*
 * The figure spans the whole stage so its side rails have room; the
 * image itself stays at its designed width inside it.
 */
.blue-e-attr__figure {
	grid-column: 1 / -1;
	grid-row: 1;
}

.blue-e-attr__figure .blue-e-attr__media {
	width: 100%;
	max-width: 562px;
}

/*
 * Blue E only: hold the section to one viewport, less the sticky sub-nav.
 * The heading and padding take what they need and the product image
 * absorbs the remainder, so nothing is clipped on a short window.
 * svh rather than vh so mobile browser chrome does not overshoot.
 */
/*
 * Fit one viewport at most, but never stretch past the content. A hard
 * height added ~120px of dead space at 1920x1080 by inflating the
 * product image beyond its Figma ratio; max-height keeps the shrink
 * behaviour on short windows without the padding out.
 */
.blue-e-attr--fit {
	display: flex;
	flex-direction: column;
	max-height: calc(100svh - 80px);
	min-height: 620px;
	padding-top: 48px;
	padding-bottom: 48px;
}

/*
 * As a flex item the container would shrink to its content and then
 * centre itself via site-container's auto margins, pulling the heading
 * off the 260px grid line. align-self keeps it full width.
 */
.blue-e-attr--fit .blue-e-attr__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	/*
	 * width:100% stops the flex item shrinking to content; the explicit
	 * auto margins keep site-container's own centring, so the container
	 * still caps at 1400 and the heading stays on the 260px grid line.
	 */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	min-height: 0;
}

/* Headings are flex items here too; keep them on the full container. */
.blue-e-attr--fit .blue-e-section-heading {
	flex: 0 0 auto;
	align-self: stretch;
}

/*
 * The stage is a grid; giving the row a minmax(0, 1fr) track lets its
 * contents shrink below their intrinsic height, which a plain "height:
 * 100%" on a flex child will not do.
 */
.blue-e-attr--fit .blue-e-attr__stage {
	flex: 1 1 auto;
	grid-template-rows: minmax(0, 1fr);
	/* The base rule centres items, which sizes the row to content and
	   stops the image shrinking; stretch lets it take the track height. */
	align-items: stretch;
	min-height: 0;
}

.blue-e-attr--fit .blue-e-attr__figure {
	min-height: 0;
	height: 100%;
	overflow: visible;
}

/*
 * The image scales to the space left, keeping its ratio. The figure uses
 * the same aspect ratio so it shrinks with the image — the dots are
 * positioned against this box, so if it kept its full width they would
 * drift off the picture.
 */
/*
 * The ratio is a custom property so pages whose product shot is a
 * different shape can override it without duplicating these rules;
 * the default is Blue E's 562x681.
 */
/*
 * max-height rather than height:100%: a hard 100% overrode the ratio and
 * stretched the product shot to 798px against Figma's 680. The cap still
 * lets the image shrink on a short window, while the ratio governs it at
 * full size.
 */
.blue-e-attr--fit .blue-e-attr__media {
	display: block;
	min-height: 0;
	max-height: 100%;
	width: auto;
	aspect-ratio: var(--attr-media-ratio, 562 / 681);
	margin: 0 auto;
}

.blue-e-attr--fit .blue-e-attr__media img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: contain;
}

/*
 * Edge DC's product shot is taller than Blue E's, and its section has
 * a 89px top pad from the sub-nav rather than the shared 48px.
 */
.blue-e-attr--fit-edge {
	--attr-media-ratio: 562 / 845;

	padding-top: 48px;
}

/*
 * The figure holds the image plus two side rails. The image keeps its
 * own width; the rails occupy the space either side, so a revealed
 * panel sits clear of the product rather than on top of it.
 */
.blue-e-attr__figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * The rails span the image itself rather than the gutter beside it, so
 * a panel can be placed from its own dot. Panels may overlap the
 * product; being close to the dot matters more than keeping the
 * picture clear.
 */
.blue-e-attr__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - var(--media-half));
	width: calc(var(--media-half) * 2);
	pointer-events: none;
}

/*
 * --media-half is half the image width, published by hotspots.js so the
 * rails follow the picture when it scales down to fit the viewport.
 */
.blue-e-attr__figure {
	--media-half: 281px;
}

/*
 * --dot-x is the dot's own position across the image, set per panel.
 * A dot on the left half hangs its panel to its left and one on the
 * right half to its right, so each panel sits outboard of its own dot
 * rather than crossing the product's middle. The 32px clears the 40px
 * dot's radius plus a little air.
 */
.blue-e-attr__rail .blue-e-callout {
	position: absolute;
	width: 340px;
	max-width: 100%;
	transform: translateY(-50%);
	pointer-events: auto;
}

.blue-e-attr__rail--left .blue-e-callout {
	right: calc(100% - var(--dot-x, 0%) + 32px);
}

.blue-e-attr__rail--right .blue-e-callout {
	left: calc(var(--dot-x, 100%) + 32px);
}

/*
 * Reveal on hover/click. Scoped to .has-hotspots, which the script adds,
 * so without JS every callout stays visible.
 */
.has-hotspots .blue-e-attr__rail .blue-e-callout {
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s, visibility .25s;
}

.has-hotspots .blue-e-attr__rail .blue-e-callout.is-visible {
	opacity: 1;
	visibility: visible;
	    min-width: 185px;
}

@media (prefers-reduced-motion: reduce) {
	.has-hotspots .blue-e-attr__rail .blue-e-callout {
		transition: none;
	}
}

.blue-e-callout__title {
	margin: 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 20.687px;
}

.blue-e-callout__text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

/* ==========================================
   Key Features
========================================== */

.blue-e-features {
	background-color: #000;
	/* Adjacent black section: half the ~100px gap each side. */
	padding: 48px 0;
}

.blue-e-features__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.blue-e-feature {
	background-color: #141414;
	overflow: hidden;
}

.blue-e-feature__media {
	aspect-ratio: 32 / 25;
	background-color: #0b0b0b;
	overflow: hidden;
}

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

.blue-e-feature__body {
	padding: 40px 32px 54px;
}

.blue-e-feature__title {
	margin: 0 0 12px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 25.397px;
}

.blue-e-feature__text {
	margin: 0;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 25.397px;
}

/*
 * Blue E only: hold Key Features to one viewport. The heading, card text
 * and CTA keep their designed sizes; only the card image area flexes to
 * absorb what is left, so the copy never becomes unreadable.
 */
.blue-e-features--fit {
	display: flex;
	flex-direction: column;
	/*
	 * Sized by its content at the Figma card ratio, which comes to ~881px
	 * — inside one viewport already. A min-height of 100svh only stretched
	 * the cards past the design; the section grows naturally if the copy
	 * needs more room.
	 */
	height: max-content;
}

/*
 * width:100% with explicit auto margins: as a flex item the container
 * would otherwise shrink to content and site-container's auto margins
 * would centre it, pulling the heading off the 260px grid line.
 */
.blue-e-features--fit .blue-e-features__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	min-height: 0;
}

.blue-e-features--fit .blue-e-section-heading,
.blue-e-features--fit .blue-e-features__cta {
	flex: 0 0 auto;
}

/*
 * min-height:0 so the row can compress; the text is protected by the
 * body block's own min-content floor, not by inflating the whole grid.
 */
.blue-e-features--fit .blue-e-features__grid {
	flex: 1 1 auto;
	align-items: stretch;
	min-height: 0;
}

/*
 * The card may shrink, but never past its text: min-content on the card
 * blocked the image from flexing at all, while no floor at all let the
 * text run past the card's overflow:hidden edge. The image carries the
 * floor and the body is flex:none, so the text is always fully drawn.
 */
.blue-e-features--fit .blue-e-feature {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/*
 * Figma's 32:25 card image (450 x 352). Measured at every breakpoint:
 * the ratio yields a ~881px section at 1920 and ~839px at 900px tall,
 * so it fits the viewport on its own and letting the image stretch
 * instead only added ~120px of dead height. The <img> stays out of flow
 * so its intrinsic ratio sets no floor under the card.
 */
.blue-e-features--fit .blue-e-feature__media {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 32 / 25;
	min-height: 0;
}

.blue-e-features--fit .blue-e-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blue-e-features--fit .blue-e-feature__body {
	flex: 0 0 auto;
	min-height: min-content;
}

/*
 * On short viewports the card padding is what pushes the section past
 * one screen. Tightening it (40/54 -> 24/28) buys ~42px per card and
 * keeps the type at its designed size.
 */
@media (max-height: 900px) {
	.blue-e-features--fit .blue-e-feature__body {
		padding: 24px 32px 28px;
	}

	.blue-e-features--fit .blue-e-feature__media {
		min-height: 160px;
	}
}

/* Centred on the page in Figma, not on the container. */
/*
 * The section's 48px padding-bottom left the button sitting tighter to
 * the section edge than to the card row above it (54px). The extra
 * margin gives it room to breathe before the next section.
 */
.blue-e-features__cta {
	margin-top: 54px;
	margin-bottom: 40px;
	text-align: center;
}

/* ==========================================
   Shared carousel — Key Benefits, Industry Showcase
========================================== */

.blue-e-carousel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.blue-e-carousel__tabs {
	display: flex;
	align-items: center;
	gap: 42px;
	margin: 0 auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.blue-e-carousel__tabs::-webkit-scrollbar {
	display: none;
}

.blue-e-carousel__tab {
	padding: 0 0 6px;
	background: none;
	border: 0;
	border-bottom: 1.875px solid transparent;
	color: #000;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	cursor: pointer;
}

.blue-e-carousel__tab.is-active {
	border-bottom-color: #e50043;
	color: #e50043;
}

/*
 * Figma "Button - Previous/Next" (174:420 / 174:424), 51 x 56 with a
 * 24px chevron. The glyph is a mask rather than an <img> so it inherits
 * currentColor and works on both the white and the dark carousels. The
 * &lsaquo;/&rsaquo; character in the markup stays as the fallback and is
 * hidden here by the transparent colour.
 */
.blue-e-carousel__arrow {
	flex: 0 0 auto;
	position: relative;
	width: 51px;
	height: 56px;
	background: none;
	border: 0;
	color: #1f1f1f;
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: opacity .2s;
}

.blue-e-carousel__arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 24px 24px;
	mask-size: 24px 24px;
}

.blue-e-carousel__arrow[data-carousel-prev]::before {
	-webkit-mask-image: url("../img/arrow-prev.svg");
	mask-image: url("../img/arrow-prev.svg");
}

.blue-e-carousel__arrow[data-carousel-next]::before {
	-webkit-mask-image: url("../img/arrow-next.svg");
	mask-image: url("../img/arrow-next.svg");
}

/* Figma draws the first-slide Previous button at 65% opacity. */
.blue-e-carousel__arrow.is-disabled {
	opacity: .65;
}

/* ==========================================
   Key Benefits — white band
========================================== */

.blue-e-benefits {
	background-color: #fff;
	/* Figma 3035 -> 3137 = 102px before the white band. */
	padding: 86px 0;
}

.blue-e-section-heading--dark {
	color: #000;
}

/* Figma 195:664 — 1398 x 549 inside the 1400 container. */
.blue-e-benefits__panel {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	align-items: center;
	gap: 80px;
	height: 549px;
	padding: 61px 86px;
	background-color: #000;
}

/*
 * Blue E only: hold Key Benefits to one viewport. The heading, tab bar
 * and bullet list keep their sizes; the panel image absorbs the slack.
 * The <img> is taken out of flow so its intrinsic aspect ratio cannot
 * set a floor under the panel.
 */
/*
 * One viewport tall where the content allows it. min-height rather than
 * a fixed height, so a tab whose bullets need more room grows instead
 * of clipping its own title.
 */
.blue-e-benefits--fit {
	display: flex;
	flex-direction: column;
	min-height: min(calc(100svh - 80px), 100%);
	height: auto;
	/* Matches .ri4-design's 91px band padding. */
	padding-top: 91px;
	padding-bottom: 91px;
}

/*
 * width:100% with explicit auto margins: as a flex item the container
 * would shrink to content and site-container's auto margins would
 * centre it, pulling the heading off the 260px grid line.
 */
.blue-e-benefits--fit .blue-e-benefits__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	min-height: 0;
}

.blue-e-benefits--fit .blue-e-section-heading {
	flex: 0 0 auto;
}

.blue-e-benefits--fit .blue-e-carousel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: min-content;
}

.blue-e-benefits--fit .blue-e-carousel__bar {
	flex: 0 0 auto;
}

.blue-e-benefits--fit .blue-e-carousel__panels {
	flex: 1 1 auto;
	min-height: min-content;
}

/*
 * min-content floor: the panels share a height, so on a short window
 * the tallest tab's bullet list was taller than the panel. Being
 * centred, it overflowed equally top and bottom and pushed its title
 * out above the black plate. The floor lets the panel grow to fit the
 * text instead of clipping it.
 */
/*
 * Holds the Figma 549px where the window allows it. Below ~880px tall
 * the section could not fit one viewport at that height, so the panel
 * is allowed to compress there (see the short-viewport block).
 */
.blue-e-benefits--fit .blue-e-benefits__panel {
	height: 549px;
	min-height: min-content;
	align-items: center;
}

/* The image cell fills the panel; the bullet list keeps its height. */
.blue-e-benefits--fit .blue-e-benefits__media {
	position: relative;
	align-self: stretch;
	min-height: 0;
}

/*
 * Both media children are laid out normally, but their images fill the
 * available height with object-fit so the intrinsic aspect ratio sets
 * no floor under the panel.
 */
.blue-e-benefits--fit .blue-e-benefits__product,
.blue-e-benefits--fit .blue-e-benefits__graphic {
	position: relative;
	align-self: stretch;
	min-height: 0;
	padding-top: 0;
}

.blue-e-benefits--fit .blue-e-benefits__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.blue-e-benefits--fit .blue-e-benefits__product img {
	object-position: center;
}

/*
 * The scale sits level with the upper third of the product rather than
 * centred, matching the design. The box is stretched to full height, so
 * object-position places the image inside it without absolute offsets.
 */
.blue-e-benefits--fit .blue-e-benefits__graphic img {
	object-position: center 22%;
}

.blue-e-benefits--fit .blue-e-benefits__body {
	min-height: 0;
}

/*
 * Between ~740 and ~880px tall the panel can still hold its Figma 549px
 * if the surrounding spacing gives way instead. A maximised browser on a
 * 1080p screen sits in this band, so the panel keeps its design height
 * where it matters most.
 */
@media (max-height: 880px) and (min-height: 741px) {
	.blue-e-benefits--fit .blue-e-section-heading {
		margin-bottom: 24px;
	}

	.blue-e-benefits--fit .blue-e-carousel__bar {
		margin-bottom: 20px;
	}

	/* Padding tightens, but the panel itself holds 549. */
	.blue-e-benefits--fit .blue-e-benefits__panel {
		height: 549px;
		padding: 32px 48px;
	}
}

/*
 * Below ~740px the section can no longer be both one viewport tall and
 * hold the Figma 549px panel. The panel height is the requested
 * constraint, so it wins and the section is allowed to exceed the
 * window; spacing is trimmed as far as it will go first.
 */
@media (max-height: 740px) {
	.blue-e-benefits--fit {
		max-height: none;
	}

	.blue-e-benefits--fit .blue-e-section-heading {
		margin-bottom: 16px;
	}

	.blue-e-benefits--fit .blue-e-carousel__bar {
		margin-bottom: 16px;
	}

	.blue-e-benefits--fit .blue-e-benefits__panel {
		height: 549px;
		padding: 24px 40px;
	}
}

/* Tighter panel padding on short viewports. */
@media (max-height: 900px) {
	.blue-e-benefits--fit .blue-e-benefits__panel {
		padding: 32px 48px;
		gap: 48px;
	}

	.blue-e-benefits--fit .blue-e-benefits__title {
		margin-bottom: 12px;
		line-height: 1.3;
	}
}

/*
 * Under ~760px the tallest tab's bullets alone exceed the window, so
 * the section padding and the gaps between bullets tighten to bring it
 * back inside rather than letting the section run over.
 */
@media (max-height: 760px) {
	.blue-e-benefits--fit .blue-e-section-heading {
		margin-bottom: 20px;
	}

	.blue-e-benefits--fit .blue-e-benefits__panel {
		padding: 24px 40px;
	}

	/* The gap between bullets is padding-bottom on each item. */
	.blue-e-benefits--fit .blue-e-benefits__list li {
		padding-bottom: 10px;
	}
}

/*
 * The media cell holds the product photo and, optionally, a supporting
 * graphic beside it (the temperature scale on the Flexible tab). With
 * no graphic the product keeps the full cell, so panels without one
 * are unchanged.
 */
.blue-e-benefits__media {
	display: flex;
	align-items: stretch;
	gap: 24px;
}

.blue-e-benefits__product {
	flex: 1 1 auto;
	align-self: center;
	min-width: 0;
}

/*
 * Proportional, not a fixed basis: the media cell is only 420px wide,
 * so a 244px basis would starve the product photo. The product keeps
 * roughly two thirds.
 */
.blue-e-benefits__graphic {
	flex: 0 1 38%;
	align-self: flex-start;
	min-width: 0;
	max-width: 244px;
	padding-top: 18%;
}

.blue-e-benefits__media img {
	display: block;
	width: 100%;
	height: auto;
}

.blue-e-benefits__title {
	margin: 0 0 24px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 57.143px;
}

.blue-e-benefits__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blue-e-benefits__list li {
	position: relative;
	padding: 0 0 17.778px 26px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
}

/* Square marker, not a circle — Figma 12.698px. */
.blue-e-benefits__list li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 0;
	width: 12.698px;
	height: 12.698px;
	background-color: #e50043;
}

/* ==========================================
   Accessories
========================================== */

.blue-e-acc {
	background-color: #000;
	/* Figma 4051 -> 4175 = 124px. */
	padding: 124px 0 48px;
}

.blue-e-acc__subheading {
	margin: 0 0 32px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 35.556px;
}

.blue-e-acc__grid {
	display: grid;
	gap: 38px;
	margin-bottom: 72px;
}

.blue-e-acc__grid:last-child {
	margin-bottom: 0;
}

.blue-e-acc__grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blue-e-acc__grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 39px;
}

.blue-e-acc__card {
	background-color: #141414;
	overflow: hidden;
}

.blue-e-acc__media {
	aspect-ratio: 321 / 294;
	overflow: hidden;
}

.blue-e-acc__card--wide .blue-e-acc__media {
	aspect-ratio: 678 / 314;
}

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

.blue-e-acc__caption {
	margin: 0;
	padding: 24px 36px 32px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 24.555px;
}

.blue-e-acc__card--wide .blue-e-acc__caption {
	padding-left: 48px;
}

/* ==========================================
   Digital Scan & Service App
========================================== */

.blue-e-app {
	background-color: #000;
	/* Figma 5388 -> 5485 = 97px; halved against the section above. */
	padding: 48px 0 97px;
}

.blue-e-app__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 684px);
	align-items: center;
	gap: 64px;
}

.blue-e-app__text {
	margin: 0 0 40px;
	max-width: 549px;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
}

.blue-e-app__qr {
	width: 122px;
	margin-bottom: 32px;
}

.blue-e-app__qr img {
	display: block;
	width: 100%;
	height: auto;
}

/* 7.619px left rule in the design. */
.blue-e-app__callout {
	margin: 0 0 32px;
	padding: 0 0 0 19px;
	border-left: 7.619px solid #e50043;
	color: #fbfbfb;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 30.476px;
}

.blue-e-app__badges {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.blue-e-app__badge img {
	display: block;
	height: 56px;
	width: auto;
}

.blue-e-app__media img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: screen;
}

/* ==========================================
   Industry Showcase — white band
========================================== */

.blue-e-showcase {
	background-color: #fff;
	padding: 86px 0 0;
}

.blue-e-showcase__slide {
	display: grid;
	grid-template-columns: minmax(0, 683px) minmax(0, 1fr);
	align-items: center;
	gap: 104px;
	padding: 62px;
	background-color: #000;
}

.blue-e-showcase__media {
	aspect-ratio: 683 / 327;
	overflow: hidden;
}

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

.blue-e-showcase__title {
	margin: 0 0 16px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 57.232px;
}

.blue-e-showcase__text {
	margin: 0;
	max-width: 494px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 30.524px;
}

/* ==========================================
   SEER Advantage — shares the white band
========================================== */

.blue-e-seer {
	background-color: #fff;
	padding: 101px 0 86px;
}

.blue-e-section-heading--bold {
	font-weight: 700;
}

.blue-e-seer__intro {
	margin: 0 0 40px;
	max-width: 929px;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
}

.blue-e-seer__subheading {
	margin: 0 0 40px;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 35.556px;
}

.blue-e-seer__charts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	padding: 28px 40px;
	background-color: #000;
}

.blue-e-seer__chart img {
	display: block;
	width: 100%;
	height: auto;
}

.blue-e-seer__chart--narrow {
	flex: 0 0 auto;
	max-width: 230px;
}

.blue-e-seer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 56px;
}

.blue-e-seer__poc {
	display: flex;
	align-items: center;
	gap: 36px;
}

.blue-e-seer__poc img {
	flex: 0 0 auto;
	width: 75px;
	height: auto;
	/* Never crop: the icon's own proportions decide its height. */
	object-fit: contain;
}

.blue-e-seer__poc-text {
	margin: 0;
	max-width: 799px;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 35.657px;
}

/* ==========================================
   Final CTA
========================================== */

/*
 * No padding at the foot: the product image is meant to sit flush with
 * the bottom of the section. It carries ~14px of its own black margin,
 * which the negative margin on the media below cancels out.
 */
.blue-e-cta {
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 96px 0 0;
}

.blue-e-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
	align-items: center;
	gap: 64px;
}

.blue-e-cta__heading {
	margin: 0 0 43px;
	max-width: 446px;
	color: #fff;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 51px;
}

.blue-e-cta__buttons {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

/* White fill, near-black label — Figma 206:778. */
.blue-e-button--secondary {
	background-color: #fff;
	color: #030303;
}

.blue-e-button--secondary:hover,
.blue-e-button--secondary:focus {
	background-color: #d9d9d9;
}

/*
 * The image sits flush with the section foot rather than centred, and
 * the negative margin swallows the ~14px of black the PNG carries below
 * the product so the artwork itself lands on the edge.
 */
.blue-e-cta__media {
	align-self: end;
	margin-bottom: -14px;
}

.blue-e-cta__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================
   Responsive — not designed in Figma.
   Breakpoints follow the spec's recommendations.
========================================== */

@media (max-width: 1023px) {
	.blue-e-attr__stage {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Product image leads, callouts follow as a stacked list. */
	.blue-e-attr__media {
		grid-column: 1;
		order: -1;
		max-width: 562px;
		margin: 0 auto;
	}

	.blue-e-attr__column--left,
	.blue-e-attr__column--right {
		grid-column: 1;
		grid-row: auto;
	}

	/* Hotspots don't survive a narrow viewport; the callouts stack instead. */
	.blue-e-attr__hotspot {
		display: none;
	}

	.blue-e-features__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Too many items to fit, so the row scrolls. It needs its own side
	 * padding: as a scroll container the site-container padding does not
	 * apply to the scrolled-away end, leaving items flush to the edge.
	 */
	.blue-e-nav__list {
		justify-content: flex-start;
		gap: 32px;
		padding-right: 20px;
		padding-left: 20px;
		scroll-snap-type: x proximity;
		margin-left: 20px;
	}

	.blue-e-nav__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.blue-e-benefits__panel {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px;
	}

	.blue-e-benefits__media {
		max-width: 420px;
	}

	.blue-e-benefits__graphic {
		max-width: 180px;
	}

	.blue-e-acc__grid--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.blue-e-app__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.blue-e-showcase__slide {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px;
	}

	.blue-e-cta__inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.blue-e-seer__foot {
		flex-direction: column;
		align-items: flex-start;
	}
	.blue-e-app{
		    padding-top: 0 !important;
	}
}

@media (max-width: 767px) {
	.blue-e-attr,
	.blue-e-features {
		padding: 32px 0;
	}

	.blue-e-section-heading {
		margin-bottom: 28px;
		line-height: 1.4;
	}

	.blue-e-features__grid {
		grid-template-columns: 1fr;
	}

	.blue-e-feature__body {
		padding: 28px 24px 36px;
	}

	/* .blue-e-feature__title font-size handled by the shared responsive type scale. */

	.blue-e-feature__text,
	.blue-e-callout__text {
		line-height: 1.6;
	}

	/* 230x40 on mobile too; max-width:100% still shrinks it if needed. */
	.blue-e-button,
	.blue-e-button--wide {
		width: 230px;
	}

	.blue-e-benefits,
	.blue-e-acc,
	.blue-e-app {
		padding: 64px 0;
	}

	.blue-e-benefits__panel {
		padding: 28px 24px;
	}

	.blue-e-benefits__title {
		line-height: 1.4;
	}

	.blue-e-benefits__list li {
		line-height: 1.7;
	}

	.blue-e-benefits__list li::before {
		top: 9px;
	}

	.blue-e-acc__grid--four,
	.blue-e-acc__grid--two {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.blue-e-acc__subheading {
		line-height: 1.4;
	}

	.blue-e-acc__caption,
	.blue-e-acc__card--wide .blue-e-acc__caption {
		padding: 20px 24px 24px;
		font-size: 16px;
	}

	.blue-e-app__text,
	.blue-e-app__callout {
		line-height: 1.7;
	}

	/* Below the 44px tap-target minimum otherwise. */
	.blue-e-carousel__arrow {
		width: 44px;
		height: 44px;
	}

	/* The 24px glyph already fits the 44px tap target; leave it be. */

	.blue-e-carousel__tabs {
		gap: 24px;
	}

	.blue-e-showcase,
	.blue-e-seer,
	.blue-e-cta {
		padding: 64px 0;
	}

	.blue-e-showcase {
		padding-bottom: 0;
	}

	.blue-e-showcase__slide {
		padding: 28px 24px;
	}

	.blue-e-showcase__title,
	.blue-e-cta__heading {
		line-height: 1.4;
	}

	.blue-e-showcase__text,
	.blue-e-seer__intro,
	.blue-e-seer__poc-text {
		line-height: 1.7;
	}

	.blue-e-seer__charts {
		flex-direction: column;
		gap: 24px;
		padding: 24px;
	}

	.blue-e-seer__chart--narrow {
		max-width: 180px;
	}

	.blue-e-seer__poc {
		gap: 20px;
	}

	.blue-e-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}
}

/* ==========================================
   Responsive — viewport-fit release + tablet/mobile
   The --fit variants pin sections to the window height and drive width
   from an aspect-ratio. That is a desktop behaviour: on a narrow screen
   it forces the stage wider than the viewport. Release it below 1024
   and let the sections take their natural height.
========================================== */

@media (max-width: 1023px) {
	.blue-e-attr--fit,
	.blue-e-benefits--fit,
	.blue-e-features--fit {
		display: block;
		height: auto;
		min-height: 0;
	}

	.blue-e-attr--fit .blue-e-attr__inner,
	.blue-e-benefits--fit .blue-e-benefits__inner,
	.blue-e-features--fit .blue-e-features__inner {
		display: block;
		height: auto;
		min-height: 0;
	}

	/*
	 * Width was being derived from the pinned height; let it be fluid.
	 * Unscoped as well as --fit, because the sibling product pages use
	 * the same stage without the viewport-fit modifier.
	 */
	.blue-e-attr__media,
	.blue-e-attr--fit .blue-e-attr__media,
	.blue-e-attr__figure .blue-e-attr__media {
		width: 100%;
		max-width: 562px;
		height: auto;
		aspect-ratio: auto;
	}

	.blue-e-attr__media img,
	.blue-e-attr--fit .blue-e-attr__media img {
		height: auto;
		object-fit: contain;
	}

	.blue-e-attr__stage,
	.blue-e-attr__figure {
		display: block;
		height: auto;
		min-height: 0;
	}

	.blue-e-attr--fit .blue-e-attr__stage,
	.blue-e-attr--fit .blue-e-attr__figure {
		display: block;
		height: auto;
		min-height: 0;
	}

	.blue-e-benefits--fit .blue-e-carousel,
	.blue-e-benefits--fit .blue-e-carousel__panels,
	.blue-e-benefits--fit .blue-e-benefits__panel {
		display: block;
		height: auto;
		min-height: 0;
	}

	.blue-e-benefits--fit .blue-e-benefits__panel.is-active {
		display: grid;
	}

	/* Image was absolutely positioned to defeat its aspect-ratio floor. */
	.blue-e-benefits--fit .blue-e-benefits__media,
	.blue-e-benefits--fit .blue-e-benefits__product,
	.blue-e-benefits--fit .blue-e-benefits__graphic {
		position: static;
		width: auto;
		height: auto;
		min-height: 0;
		margin: 0;
	}

	.blue-e-benefits--fit .blue-e-benefits__media img {
		position: static;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.blue-e-features--fit .blue-e-feature__media {
		position: relative;
		height: auto;
		min-height: 0;
		aspect-ratio: 32 / 25;
	}

	.blue-e-features--fit .blue-e-feature__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/*
	 * The rails are fixed-width boxes offset from the image centre, so
	 * they sit outside a narrow viewport. Every callout on this page is
	 * linked to a dot and lives in a rail, so hiding them would lose the
	 * content entirely — instead the rails become normal blocks below
	 * the image and their panels stack as a readable list.
	 */
	.blue-e-attr__rail {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 24px;
        width: auto;
        margin-top: 24px;
        pointer-events: auto;
        top: unset;
        bottom: unset;
        right: unset;
        left: unset;
	}

	/*
	 * The dot-anchored offsets go with the rails; stacked panels are a
	 * plain list, so they take no left/right placement at all.
	 */
	.blue-e-attr__rail .blue-e-callout,
	.blue-e-attr__rail--left .blue-e-callout,
	.blue-e-attr__rail--right .blue-e-callout {
		position: static;
		width: auto;
		max-width: none;
		left: auto;
		right: auto;
		transform: none;
	}

	/*
	 * Hotspots are hidden at this width, so the JS reveal never fires;
	 * every callout has to be visible on its own.
	 */
	.has-hotspots .blue-e-attr__rail .blue-e-callout,
	.has-hotspots .blue-e-attr__rail .blue-e-callout.is-visible {
		opacity: 1;
		visibility: visible;
	}

	.blue-e-attr__column:empty {
		display: none;
	}
	.blue-e-attr--fit{
		    max-height: unset;
	}
}

/*
 * Small desktop, 1024-1447. The design's 1400px container no longer
 * fits with its 260px margins, so the rails must narrow with the
 * gutter instead of keeping their 340px desktop width.
 */
/*
 * Small desktop: 1024 up to the point the container fills out. The
 * bound is 1439 because .site-container reaches its full 1400px at
 * exactly 1400 + (2 x 20px minimum padding) = 1440px. Below that the
 * content is genuinely compressed and the tighter gaps earn their
 * place; at 1440 and above the layout is full size and takes the
 * desktop values.
 */
@media (min-width: 1024px) and (max-width: 1439px) {
	/*
	 * Figma's 124px lead-in is proportioned to a 1920 frame; at small
	 * desktop it reads as a gap rather than a section break.
	 */
	.blue-e-acc {
		padding-top: 80px;
	}

	/*
	 * The rail spans the image, so its width is set by --media-half and
	 * needs no small-desktop override. The panels inside it narrow
	 * instead, keeping them on the picture at this width.
	 */
	.blue-e-attr__rail .blue-e-callout {
		width: 280px;
	}

	.blue-e-attr__stage {
		gap: 24px;
	}

	.blue-e-features__grid,
	.blue-e-acc__grid--four {
		gap: 24px;
	}

	.blue-e-benefits__panel {
		gap: 48px;
		padding: 48px 56px;
	}

	.blue-e-acc__grid--two {
		gap: 24px;
	}
}

/*
 * Tablet landscape, 768-1023. Two columns where the design has three
 * or four, and the stacked-callout layout from the block above.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	/*
	 * 48px, matching the viewport-fit sections just above this
	 * breakpoint. An earlier 80px here made tablet padding larger than
	 * desktop, which read as an inversion rather than a step down.
	 */
	.blue-e-attr,
	.blue-e-features,
	.blue-e-benefits,
	.blue-e-acc,
	.blue-e-app,
	.blue-e-showcase,
	.blue-e-seer {
		padding-top: 48px;
		padding-bottom: 48px;
		position: relative;
	}

	/* The accessories band alone carries a 124px Figma top pad. */
	.blue-e-acc__grid--four,
	.blue-e-acc__grid--two {
		gap: 24px;
	}

	.blue-e-section-heading {
		margin-bottom: 40px;
		line-height: 1.45;
	}

	/* Callouts read as a row of cards under the product, not a column. */
	.blue-e-attr__stage {
		gap: 32px;
	}

	.blue-e-attr__column {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.blue-e-benefits__media {
		max-width: 460px;
		margin: 0 auto;
	}
}

/*
 * Mobile, <= 480. The 767 block already stacks the grids; this tightens
 * spacing and type for a 390px viewport specifically.
 */
@media (max-width: 480px) {
	.blue-e-attr,
	.blue-e-features,
	.blue-e-benefits,
	.blue-e-acc,
	.blue-e-app,
	.blue-e-showcase,
	.blue-e-seer {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.blue-e-section-heading {
		margin-bottom: 24px;
		line-height: 1.4;
	}

	.blue-e-attr__stage {
		gap: 20px;
	}

	.blue-e-callout {
		padding: 20px 20px;
	}

	.blue-e-callout__title {
		line-height: 1.3;
	}

	.blue-e-benefits__panel {
		padding: 24px 20px;
		gap: 24px;
	}

	/* Tabs scroll rather than wrap or squeeze. */
	.blue-e-carousel__tabs {
		gap: 20px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
	}

	.blue-e-carousel__tabs::-webkit-scrollbar {
		display: none;
	}

	.blue-e-carousel__tab {
		flex: 0 0 auto;
		scroll-snap-align: start;
		white-space: nowrap;
	}

	.blue-e-showcase__slide,
	.blue-e-cta__inner {
		padding: 24px 20px;
		gap: 24px;
	}

	.blue-e-cta__buttons {
		gap: 16px;
	}

	.blue-e-seer__panel {
		padding: 20px;
	}
}