/* ==========================================================================
   Home page: the single-line diagram.

   One wire runs from the hero to the submit button. Every section marker is a
   node on it, drawn with its IEC symbol; the amber current fills the wire as
   the page is read and lights each node it reaches (home.js sets --current and
   .is-live). Desktop: the wire sits in the left margin. Phone: 14px from the edge.
   ========================================================================== */

.is-sld {
	--wire-x: 14px;
	--gutter-l: 38px;
}
@media (min-width: 768px) {
	.is-sld { --wire-x: clamp(22px, 2.6vw, 44px); --gutter-l: max(var(--gutter), calc(var(--wire-x) + 44px)); }
}
.is-sld .wrap { padding-left: var(--gutter-l); }
.is-sld .main { position: relative; }

.sld-wire {
	position: absolute;
	left: var(--wire-x);
	top: var(--wire-top, 0px);
	height: var(--wire-h, 0px);
	width: 1px;
	z-index: 3;
	pointer-events: none;
}
.sld-wire__track { position: absolute; inset: 0; background: rgba(138, 150, 168, 0.55); }
.sld-wire__current {
	position: absolute;
	inset: 0;
	width: 2px;
	left: -0.5px;
	background: var(--amber);
	transform: scaleY(var(--current, 0));
	transform-origin: top;
}
.sld-wire__spark {
	position: absolute;
	left: -3.5px;
	top: calc(var(--current, 0) * 100% - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amber);
	box-shadow: 0 0 0 4px rgba(228, 157, 18, 0.18);
	opacity: var(--spark, 1);
}

/* Nodes: the section marker's symbol sits on the wire, a hairline ties it to the label. */
.is-sld .marker { position: relative; }
.is-sld .marker__sym {
	position: absolute;
	left: calc(var(--node-dx, -24px) - 12px);
	top: 50%;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	padding: 2px;
	border-radius: 50%;
	background: var(--paper);
	color: var(--dim);
	z-index: 4;
	transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.is-sld .on-dark .marker__sym { background: var(--deep); color: var(--on-deep-3); }
.is-sld .hero .marker__sym { background: rgba(4, 28, 66, 0.6); }
.is-sld .marker::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: calc(-1 * var(--node-dx, -24px) - 14px);
	margin-right: 6px;
	height: 1px;
	background: rgba(138, 150, 168, 0.55);
}
.is-sld .marker.is-live .marker__sym { color: var(--amber); }
.is-sld .marker.is-live::before { background: var(--amber); }
.is-sld .marker.is-live .sym-blade { transform: rotate(30deg); } /* clockwise: the blade shuts */

/* ==========================================================================
   §1 Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--deep-2);
	color: #fff;
}
.hero__media { position: absolute; inset: 0; }
.hero__poster img,
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}
.hero__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 28, 66, 0.9) 0%, rgba(4, 28, 66, 0.62) 34%, rgba(4, 28, 66, 0.08) 68%, rgba(4, 28, 66, 0) 100%),
		linear-gradient(0deg, rgba(4, 28, 66, 0.72) 0%, rgba(4, 28, 66, 0) 42%),
		linear-gradient(180deg, rgba(4, 28, 66, 0.55) 0%, rgba(4, 28, 66, 0) 22%);
}
/* .grain lives in main.css since 29.09 (the Growatt page's hero has it too). */
.hero__inner {
	position: relative;
	z-index: 2;
	padding-top: calc(var(--hdr-h) + var(--safe-top) + 48px);
	padding-bottom: clamp(64px, 11vh, 128px);
}
.hero .marker, .hero .marker__n { color: var(--on-deep-2); }
.hero .marker__label { color: #fff; }
.hero__h1 {
	max-width: 12.5ch;
	margin-top: 22px;
	font-size: clamp(2.75rem, 1.2rem + 5.4vw, 6.2rem);
	line-height: 0.98;
	font-stretch: 84%;
	font-weight: 580;
	letter-spacing: -0.024em;
	color: #fff;
}
.hero__lead {
	max-width: 34em;
	margin-top: 26px;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--on-deep-2);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__pause {
	position: absolute;
	right: var(--gutter);
	bottom: calc(24px + var(--safe-bottom));
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	background: rgba(4, 28, 66, 0.35);
}
.hero__pause .sym { width: 18px; height: 18px; }
.hero__pause-icon--play { display: none; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--play { display: block; fill: currentColor; }
.hero__pause[aria-pressed="true"] .hero__pause-icon--pause { display: none; }

@media (max-width: 767.98px) {
	.hero__poster img, .hero__video { object-position: 50% 50%; }
	.hero__scrim {
		background:
			linear-gradient(0deg, rgba(4, 28, 66, 0.94) 0%, rgba(4, 28, 66, 0.78) 38%, rgba(4, 28, 66, 0.2) 70%, rgba(4, 28, 66, 0.35) 100%);
	}
	.hero__h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); max-width: 11ch; }
	.hero__lead { font-size: 1.02rem; }
	.hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
	.hero__pause { top: calc(var(--hdr-h) + var(--safe-top) + 10px); bottom: auto; right: 14px; width: 38px; height: 38px; }
	/* The full-width buttons stay clear of the "Scroll" hint. */
	.hero__inner { padding-bottom: max(clamp(64px, 11vh, 128px), 80px); }
}

/* The category strip under the film was removed on 29.09; the headline keeps the size it had with it. */
.hero__h1 { max-width: 15ch; font-size: clamp(2.6rem, 1.3rem + 4.3vw, 5.4rem); }