/* Home scene 03: Why Choose Speed, instruments and differentiators (S01, COMPONENTS 12). */

.why {
	position: relative;
	padding-block: var(--sec);
	background: var(--ink-950);
	color: var(--fg);
}

.why::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

.why-head {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--margin);
	align-items: end;
	margin-block-end: clamp(40px, 6vw, 90px);
}

.why-head .lead {
	color: var(--fg2);
}

.inst {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(30px, 5vw, 90px);
	align-items: center;
}

.inst p {
	max-width: 38ch;
	color: var(--fg2);
}

.inst-side {
	display: grid;
	gap: clamp(34px, 5vw, 64px);
}

/* Dial: 61 ticks over 270 degrees, the needle stops at the 2.5 s target (tick 30 = top). */
.dial {
	position: relative;
	width: 100%;
	max-width: 620px;
	aspect-ratio: 1;
	justify-self: center;
}

.dial svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.dial .tk {
	stroke: var(--ln-s);
	stroke-width: 1.2;
}

.dial .tk.mj {
	stroke-width: 2;
}

.dial .tk.lit {
	stroke: var(--hi);
}

.dial .needle {
	transform-origin: 150px 150px;
	transition: transform 2.2s var(--ease-spring);
}

.dial .needle line {
	stroke: var(--hi);
	stroke-width: 2.5;
}

.dial .needle circle {
	fill: var(--ink-950);
	stroke: var(--hi);
	stroke-width: 2.5;
}

.dial-n text {
	fill: var(--fg2);
	font: 500 9px var(--font-mono);
	letter-spacing: 1px;
	text-anchor: middle;
}

.dial .read {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	max-width: none;
	padding-block-start: 36%;
	text-align: center;
}

.dial .read b {
	font: 300 clamp(54px, 7vw, 104px) / 1 var(--font-display);
	letter-spacing: -0.05em;
}

.dial .read small {
	color: var(--hi);
	font-size: 0.32em;
	font-weight: 500;
}

.dial .read .mono {
	display: block;
	margin-block-start: 6px;
	color: var(--fg2);
}

.js:not(.rm) .dial:not(.in) .needle {
	transform: rotate(-135deg);
}

.odo-wrap {
	display: grid;
	gap: 10px;
	justify-items: start;
}

/* Caliper: the jaws open to the real minimum touch target, drawn at a larger scale. */
.cap {
	display: grid;
	gap: 12px;
}

.jaws {
	--open: min(264px, calc(100cqw - 40px));
	position: relative;
	height: 66px;
	container-type: inline-size;
	background:
		repeating-linear-gradient(90deg, var(--ln-s) 0 1px, transparent 1px 10px) 0 100% / 100% 10px no-repeat,
		repeating-linear-gradient(90deg, var(--hi) 0 1px, transparent 1px 100px) 0 100% / 100% 20px no-repeat;
}

html[dir="rtl"] .jaws {
	background-position: 100% 100%, 100% 100%;
}

.jaw {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 14px;
	border-inline: 2px solid var(--hi);
	background: var(--hi-wash);
}

.jaw.r {
	transform: translateX(calc(var(--dir) * var(--open)));
	transition: transform 2s var(--ease);
}

.meas {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 14px;
	width: calc(var(--open) - 14px);
	height: var(--hairline);
	background: var(--hi);
	transition: width 2s var(--ease);
}

.js:not(.rm) .cap:not(.in) .jaws {
	--open: 14px;
}

.rd {
	font: 300 clamp(40px, 4.4vw, 64px) / 1 var(--font-display);
	letter-spacing: -0.04em;
}

.rd small {
	margin-inline-start: 8px;
	color: var(--hi);
	font: 500 13px var(--font-mono);
	letter-spacing: 0.1em;
}

/* Differentiators */
.diff {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin: clamp(60px, 8vw, 120px) 0 0;
	padding: 0;
	border-block-start: var(--hairline) solid var(--ln-s);
	list-style: none;
}

.diff li {
	display: grid;
	gap: 12px;
	align-content: start;
	justify-items: start;
	padding-block-start: 24px;
}

.diff b {
	color: var(--hi);
	font-weight: 500;
}

.diff h3 {
	font-size: clamp(24px, 2.2vw, 34px);
	font-weight: 300;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

.diff h3 strong {
	font-weight: 800;
}

.diff p {
	max-width: 34ch;
	color: var(--fg2);
	font-size: 15px;
}

@media (max-width: 999px) {
	.why-head,
	.inst {
		grid-template-columns: minmax(0, 1fr);
	}

	.why-head {
		align-items: start;
	}

	/* The small dial has little room inside its ring: a smaller label keeps it off the ticks. */
	.dial .read {
		padding-block-start: 30%;
	}

	.dial .read .mono {
		font-size: 10px;
		letter-spacing: 0.04em;
	}
}