/* ═══════════════════════════════════════════════════════════════════════
   DOWNHILL — landing page
   Concept: a downhill race timing board. Numbers are the hero typography,
   not decoration, because the product exists to produce numbers.
   Colour is semantic: steel blue is always the lift, acid lime is always
   the descent. The reader learns it once in the hero and never needs a
   legend again.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
	/* Dusk in the trees: near-black with a cold green cast, not neutral grey */
	--ink:        #0A0D0C;
	--ink-raised: #101615;
	--ink-card:   #141B19;
	--line:       rgba(216, 255, 62, 0.10);
	--line-soft:  rgba(255, 255, 255, 0.08);

	--fg:      #E9EEEA;
	--fg-mid:  #A8B4AE;
	--fg-dim:  #6F7C76;

	/* The two semantic colours. Nothing else competes with them. */
	--descent: #D8FF3E;
	--lift:    #74AECB;
	--dust:    #C08A52;

	--font-display: "Chivo", "Helvetica Neue", Arial, sans-serif;
	--font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--shell:  1220px;
	--narrow: 760px;
	--gutter: clamp(1.25rem, 5vw, 3rem);

	--radius:    4px;
	--radius-lg: 10px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body.dh {
	margin: 0;
	background: var(--ink);
	color: var(--fg);
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Film grain. Fixed so it reads as an overlay on the lens, not as page texture. */
body.dh::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--descent); color: var(--ink); }

:focus-visible {
	outline: 2px solid var(--descent);
	outline-offset: 3px;
}

.skip {
	position: absolute;
	left: -9999px;
}
.skip:focus {
	left: 1rem;
	top: 1rem;
	z-index: 10000;
	padding: 0.75rem 1.25rem;
	background: var(--descent);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
}

/* ── Layout primitives ───────────────────────────────────────────────── */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--narrow); }

.section {
	position: relative;
	padding-block: clamp(4.5rem, 11vw, 8.5rem);
	border-top: 1px solid var(--line-soft);
}

.section__head {
	max-width: 64ch;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section__title {
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	text-transform: uppercase;
	max-width: 22ch;
	text-wrap: balance;
}

.section__lead {
	margin-top: 1.25rem;
	color: var(--fg-mid);
	font-size: clamp(1rem, 2.3vw, 1.125rem);
	max-width: 52ch;
}

/* Mono micro-label above every section title. The rule anchors it optically. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--descent);
}
.eyebrow__rule {
	width: 2.25rem;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.note {
	margin-top: 2.5rem;
	max-width: 60ch;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--fg-dim);
	border-left: 2px solid var(--line-soft);
	padding-left: 1rem;
}

.callout {
	margin-top: 2.5rem;
	padding: 1.5rem;
	max-width: 62ch;
	background: var(--ink-raised);
	border-left: 3px solid var(--dust);
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	padding: 0.9rem 1.6rem;
	background: var(--descent);
	color: var(--ink);
	border: 1px solid var(--descent);
	border-radius: var(--radius);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
}
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px -12px rgba(216, 255, 62, 0.55);
}
.btn:active { transform: translateY(0); }

.btn__note {
	font-size: 0.625rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	opacity: 0.6;
}

.btn--lg { padding: 1.15rem 2.25rem; font-size: 0.875rem; }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.6875rem; }

.btn--ghost {
	background: transparent;
	color: var(--fg);
	border-color: var(--line-soft);
}
.btn--ghost:hover {
	border-color: var(--descent);
	color: var(--descent);
	box-shadow: none;
}

/* ── Elevation profile: the signature graphic ────────────────────────── */

/* The sheet never renders narrower than this, so on a phone the band shows
   a cropped window onto the zigzag at its true proportions rather than
   squeezing six laps into 390px. The container crops and fades the edges. */
.profile-sheet {
	position: relative;
	flex: none;
	width: 100%;
	min-width: 940px;
	height: 100%;
}

.profile {
	display: block;
	width: 100%;
	height: 100%;
}
.profile path {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
/* The final section is far taller than a band, so the sheet keeps its own
   proportions there and sits centred instead of being stretched into spikes. */
.profile-sheet.profile--final {
	height: auto;
	aspect-ratio: 1400 / 140;
}

.profile__lift    { stroke: var(--lift); opacity: 0.75; }
.profile__descent { stroke: var(--descent); opacity: 0.9; }

/* The gondola and the rider. Positioned in percent of the sheet, so they
   land on the line whatever the band is stretched to, and sized in px, so
   they are the one thing on the graphic the stretch never touches. */
.pmark {
	position: absolute;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	width: max-content;
	font-family: var(--font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	pointer-events: none;
}
.pmark__icon {
	width: 26px;
	height: 26px;
}

/* The cabin rides above its cable, the rider above the track, and each
   caption sits where it does in the drawing: over the lift, beside the run. */
.pmark--lift {
	align-items: center;
	transform: translate(-50%, calc(-100% - 5px));
	color: var(--lift);
}
.pmark--lift .pmark__label { order: -1; }

.pmark--descent {
	align-items: flex-start;
	transform: translate(-30%, calc(-100% - 4px));
	color: var(--descent);
}
/* The rider sits on the track and the caption hangs off to its right, the
   only spare room a descent has. */
.pmark--descent .pmark__label { order: -1; margin-left: 1.3rem; }

@media (max-width: 599px) {
	/* Two laps fit on a phone; the captions would otherwise collide. */
	.pmark__icon { width: 22px; height: 22px; }
	.pmark { font-size: 0.5rem; }
}

/* Drawn on load: the day builds itself lap by lap */
.profile--hero path {
	/* Longer than the path can ever render, so this reads as one line being
	   drawn rather than as a dash pattern sliding into place. */
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	animation: draw 2.4s var(--ease) 0.3s forwards;
}
.profile--hero .profile__descent { animation-delay: 0.55s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-head {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	background: rgba(10, 13, 12, 0);
	transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.site-head.is-stuck {
	background: rgba(10, 13, 12, 0.94);
	backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--line-soft);
}

.site-head__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 4.25rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 1.0625rem;
}
.brand__mark svg {
	width: 1.75rem;
	height: auto;
	fill: none;
	stroke: var(--descent);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.site-nav {
	display: none;
	margin-inline: auto;
	gap: 1.75rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-mid);
}
.site-nav a { position: relative; padding-block: 0.25rem; transition: color 0.2s; }
.site-nav a:hover { color: var(--descent); }
.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--descent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }

.site-head__end {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}
.site-head__end .btn { display: none; }

/* ── Language switcher ───────────────────────────────────────────────── */

.langs {
	display: flex;
	gap: 0.125rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}
.langs__item {
	padding: 0.35rem 0.45rem;
	color: var(--fg-dim);
	border-radius: 3px;
	transition: color 0.18s, background-color 0.18s;
}
.langs__item:hover { color: var(--fg); background: var(--ink-card); }
.langs__item.is-current { color: var(--ink); background: var(--descent); }

.langs--foot { margin-top: 1.5rem; }

/* Seven languages next to the wordmark: on a phone the switcher has to
   shrink rather than wrap, or the header doubles in height. */
@media (max-width: 639px) {
	.site-head .langs { gap: 0; font-size: 0.625rem; letter-spacing: 0.04em; }
	.site-head .langs__item { padding: 0.55rem 0.3rem; }
	.site-head__inner { gap: 0.5rem; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
	position: relative;
	padding-top: clamp(2rem, 5vw, 3.25rem);
	overflow: hidden;
}

/* Fog-bound chairlift behind the hero: barely there, fading into the ink
   before the elevation band so it never competes with the numbers. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/hero/lift-fog-800.jpg");
	background-image: image-set(
		url("../img/hero/lift-fog-800.webp") type("image/webp"),
		url("../img/hero/lift-fog-800.jpg") type("image/jpeg")
	);
	background-size: cover;
	/* Narrow viewports see a ~20% slice of the frame: aim it at the chairs,
	   not the bare cable that would otherwise cut through the headline. */
	background-position: 62% 25%;
	opacity: 0.22;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
	pointer-events: none;
}
@media (min-width: 800px) {
	.hero::before {
		background-position: center 30%;
		background-image: url("../img/hero/lift-fog.jpg");
		background-image: image-set(
			url("../img/hero/lift-fog.webp") type("image/webp"),
			url("../img/hero/lift-fog.jpg") type("image/jpeg")
		);
	}
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(2.5rem, 6vw, 3.5rem);
	align-items: center;
	padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.hero__headline {
	font-size: clamp(2.4rem, 6.2vw, 4.5rem);
	text-transform: uppercase;
	max-width: 14ch;
	text-wrap: balance;
}
/* Every language but English runs 15-25% longer; the same size would push
   the primary CTA below the fold on a laptop. */
html:not([lang="en"]) .hero__headline { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 17ch; }

.hero__headline em {
	font-style: normal;
	color: var(--descent);
	display: inline-block;
}

.hero__lead {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
	max-width: 52ch;
	color: var(--fg-mid);
	font-size: clamp(1rem, 2.6vw, 1.125rem);
	line-height: 1.65;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-top: clamp(1.75rem, 4vw, 2.25rem);
}
.hero__actions .btn { flex: 1 1 auto; }

.hero__trust {
	margin-top: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--fg-dim);
}

/* The watch is lit from behind so it sits in the dark rather than on it. */
.hero__visual { position: relative; }
.hero__visual::before {
	content: "";
	position: absolute;
	inset: 4%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216, 255, 62, 0.13), transparent 62%);
	filter: blur(34px);
	pointer-events: none;
}

/* ── Problem: rider in the trees, mirrored so the sharp helmet sits on the
   right and the blurred forest carries the left-aligned copy. ──────── */

.section--problem { overflow: hidden; }
.section--problem > .shell { position: relative; z-index: 1; }
.section--problem::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/problem/rider-forest-800.jpg");
	background-image: image-set(
		url("../img/problem/rider-forest-800.webp") type("image/webp"),
		url("../img/problem/rider-forest-800.jpg") type("image/jpeg")
	);
	background-size: cover;
	background-position: 30% 0;
	transform: scaleX(-1);
	opacity: 0.16;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 55%, transparent 100%);
	pointer-events: none;
}
@media (min-width: 800px) {
	.section--problem::before {
		background-image: url("../img/problem/rider-forest.jpg");
		background-image: image-set(
			url("../img/problem/rider-forest.webp") type("image/webp"),
			url("../img/problem/rider-forest.jpg") type("image/jpeg")
		);
	}
}

/* ── Live data: wet rock and trail behind the watch, dark side under the copy.
   Slightly stronger than the other two because the subject is already dim. */

.section--live { overflow: hidden; }
.section--live > .shell { position: relative; z-index: 1; }
.section--live::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/data/rocky-trail-800.jpg");
	background-image: image-set(
		url("../img/data/rocky-trail-800.webp") type("image/webp"),
		url("../img/data/rocky-trail-800.jpg") type("image/jpeg")
	);
	background-size: cover;
	background-position: 35% 50%;
	opacity: 0.26;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 55%, transparent 100%);
	pointer-events: none;
}
@media (min-width: 800px) {
	.section--live::before {
		background-position: center 50%;
		background-image: url("../img/data/rocky-trail.jpg");
		background-image: image-set(
			url("../img/data/rocky-trail.webp") type("image/webp"),
			url("../img/data/rocky-trail.jpg") type("image/jpeg")
		);
	}
}

/* ── How it works: alpine ridge under storm cloud, peaks on the right,
   the dark valley on the left carries the headline. ───────────────── */

.section--how { overflow: hidden; }
.section--how > .shell { position: relative; z-index: 1; }
.section--how::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/how/alps-ridge-800.jpg");
	background-image: image-set(
		url("../img/how/alps-ridge-800.webp") type("image/webp"),
		url("../img/how/alps-ridge-800.jpg") type("image/jpeg")
	);
	background-size: cover;
	background-position: 70% 40%;
	opacity: 0.24;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 60%, transparent 100%);
	pointer-events: none;
}
@media (min-width: 800px) {
	.section--how::before {
		background-position: center 40%;
		background-image: url("../img/how/alps-ridge.jpg");
		background-image: image-set(
			url("../img/how/alps-ridge.webp") type("image/webp"),
			url("../img/how/alps-ridge.jpg") type("image/jpeg")
		);
	}
}

/* ── Terrain: one aerial forest sheet behind every section without its own
   photograph, so the page reads as one map rather than photo / void / photo.
   Each section crops the sheet elsewhere, so the same trail never repeats.
   (contours.svg is the earlier drawn version, kept as a fallback.) ─── */

.section--terrain { overflow: hidden; }
.section--terrain > .shell { position: relative; z-index: 1; }
.section--terrain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../img/terrain/forest-aerial-800.jpg");
	background-image: image-set(
		url("../img/terrain/forest-aerial-800.webp") type("image/webp"),
		url("../img/terrain/forest-aerial-800.jpg") type("image/jpeg")
	);
	background-size: cover;
	background-position: center;
	opacity: 0.11;
	mix-blend-mode: luminosity;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 70%, transparent 100%);
	pointer-events: none;
}
@media (min-width: 800px) {
	.section--terrain::before {
		background-image: url("../img/terrain/forest-aerial.jpg");
		background-image: image-set(
			url("../img/terrain/forest-aerial.webp") type("image/webp"),
			url("../img/terrain/forest-aerial.jpg") type("image/jpeg")
		);
	}
}
.section--summary::before { background-position: 20% 20%; }
.section--sync::before    { background-position: 80% 70%; transform: scaleX(-1); }
.section--devices::before { background-position: 50% 0%; }
.section--pricing::before { background-position: 10% 90%; transform: scaleX(-1); }
.section--faq::before     { background-position: 90% 30%; }

/* ── Hero band: the elevation profile ────────────────────────────────── */

.hero__band {
	position: relative;
	padding-bottom: clamp(2rem, 5vw, 3rem);
}

.hero__band-graphic {
	position: relative;
	height: clamp(88px, 13vw, 150px);
	margin-bottom: 1.5rem;
	/* Full-bleed: terrain should not obey the text column. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	display: flex;
	overflow: hidden;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.legend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.legend__item::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: currentColor;
}
.legend__item--lift    { color: var(--lift); }
.legend__item--descent { color: var(--descent); }
.legend__caption {
	color: var(--fg-dim);
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 0.75rem;
}

/* Staggered entrance. One orchestrated load beats scattered micro-motion. */
.hero .eyebrow,
.hero__headline,
.hero__lead,
.hero__actions,
.hero__trust,
.hero__visual,
.hero__band {
	animation: rise 0.9s var(--ease) both;
}
.hero .eyebrow  { animation-delay: 0.05s; }
.hero__headline { animation-delay: 0.15s; }
.hero__lead     { animation-delay: 0.3s; }
.hero__actions  { animation-delay: 0.42s; }
.hero__trust    { animation-delay: 0.52s; }
.hero__visual   { animation-delay: 0.35s; }
.hero__band     { animation-delay: 0.6s; }

@keyframes rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* ── Problem: the two-column contrast ────────────────────────────────── */

/* Same sheet as the field list in the live-data section: a rule in the tone
   colour, then numbered rows on hairlines. The two columns run in the same
   order, so row 03 on the left is answered by row 03 on the right and the
   comparison holds without drawing a single connecting line. The panel is
   transparent, so the rider behind the section carries through. */

.compare {
	display: grid;
	gap: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
}

.compare__col {
	--tone: var(--fg-dim);
	--tone-rule: rgba(192, 138, 82, 0.42);
	min-width: 0;
}
.compare__col--bad  { --tone: var(--dust); }
.compare__col--good { --tone: var(--descent); --tone-rule: rgba(216, 255, 62, 0.5); }

.compare__tag {
	display: flex;
	align-items: baseline;
	padding-top: 0.75rem;
	margin-bottom: 0.25rem;
	border-top: 2px solid var(--tone-rule);
	color: var(--fg-dim);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.compare__col--good .compare__tag { color: var(--descent); }

.compare__list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}
.compare__list li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: 0.6rem;
	align-items: baseline;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--fg-mid);
}
.compare__list li:last-child { border-bottom: 0; }

/* The claim the app fixes is the one worth reading, so it carries the
   brighter text; the standard-mode column stays a shade back. */
.compare__col--good .compare__list li { color: var(--fg); }

.compare__idx {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	color: var(--tone);
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* ── How it works ────────────────────────────────────────────────────── */

.steps {
	display: grid;
	gap: clamp(2rem, 5vw, 2.5rem);
	counter-reset: step;
}

.steps__item {
	position: relative;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line-soft);
}

.steps__num {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--descent);
	margin-bottom: 0.875rem;
}

.steps__title {
	font-size: clamp(1.25rem, 3.4vw, 1.625rem);
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.steps__body {
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.7;
}

/* ── Live data + watch ───────────────────────────────────────────────── */

/* Product shot on the left, copy on the right. */
.live {
	display: grid;
	gap: clamp(1.5rem, 5vw, 3rem);
	align-items: center;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}
.live__copy.section__head { margin-bottom: 0; }
.live__visual { position: relative; }
.live__visual::before {
	content: "";
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(216, 255, 62, 0.11), transparent 62%);
	filter: blur(36px);
	pointer-events: none;
}
.watch--static .watch__frame { width: min(520px, 78%); }
.watch--static .watch__case { filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.6)); }

/* The strip: four numbers with a mark each, one hairline grid. */
.strip {
	list-style: none;
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.strip__cell {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) 1rem;
	background: var(--ink-card);
	text-align: center;
}
.strip__icon {
	width: 28px;
	height: 28px;
	color: var(--descent);
}
.strip__value {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: clamp(1.5rem, 4.5vw, 2.125rem);
	line-height: 1;
	color: var(--fg);
	letter-spacing: -0.02em;
}
.strip__unit {
	margin-left: 0.25em;
	font-size: 0.5em;
	font-weight: 500;
	color: var(--fg-dim);
	letter-spacing: 0;
}
.strip__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.watch { margin: 0; }

/* Geometry of the case image (1243 x 1180): screen circle centre and
   radius, and the button rectangles, all as fractions of the box.
   tools/make-case.py fits the image to these numbers, not the reverse. */
.watch__frame {
	--case-ratio: 1243 / 1180;
	--screen-cx: 50.6%;
	--screen-cy: 50.0%;
	--screen-d: 61.14%;          /* 2 x 380 / 1243 */
	position: relative;
	width: min(430px, 86%);
	margin-inline: auto;
	aspect-ratio: var(--case-ratio);
}

.watch__screens {
	position: absolute;
	left: var(--screen-cx);
	top: var(--screen-cy);
	width: var(--screen-d);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	background: #000;
}
.watch__shot { position: absolute; inset: 0; }
.watch__shot[hidden] { display: none; }
.watch__screen { width: 100%; height: 100%; object-fit: cover; display: block; }

.watch__shot[data-active] { animation: watch-redraw 0.22s ease-out; }
@keyframes watch-redraw { from { opacity: 0.35; } to { opacity: 1; } }

.watch__case,
.watch__case img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}
.watch__case img { filter: none; }

/* Hit areas over the real buttons. Padded well beyond the metal so a thumb
   lands; visually silent until hovered, then a soft lime glow on the key. */
.watch__key {
	position: absolute;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.watch__key::after {
	content: "";
	position: absolute;
	inset: 18% 22% 18% 42%;
	border-radius: 999px;
	box-shadow: 0 0 0 0 rgba(216, 255, 62, 0);
	transition: box-shadow 0.18s var(--ease), background-color 0.18s;
}
.watch__key:hover::after,
.watch__key:focus-visible::after {
	background: rgba(216, 255, 62, 0.16);
	box-shadow: 0 0 22px 6px rgba(216, 255, 62, 0.28);
}
.watch__key:active::after,
.watch__key.is-pressed::after {
	background: rgba(216, 255, 62, 0.45);
	box-shadow: 0 0 26px 8px rgba(216, 255, 62, 0.4);
}
.watch__key:focus-visible { outline: none; }

/* UP/MENU: the middle-left button; DOWN: lower-left, set into the case at ~60° */
/* Hit areas reach further left than the metal so the cue sits inside them */
.watch__key--up   { left: -9%;  top: 40%;  width: 23%; height: 19%; }
.watch__key--down { left: -7%;  top: 65%;  width: 23%; height: 21%; }

/* The cue: a hairline chevron just outside the case, in the same tone as the
   engraved button captions so it reads as part of the object, not a UI badge.
   It breathes by two pixels — enough to say "this moves", not enough to nag. */
.watch__cue {
	position: absolute;
	left: 11%;
	top: 50%;
	width: 11px;
	height: auto;
	transform: translateY(-50%);
	fill: none;
	stroke: #6A7772;
	stroke-width: 1.25;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.75;
	transition: stroke 0.18s, opacity 0.18s;
	animation: cue-breathe 2.6s ease-in-out infinite;
}
.watch__key--down .watch__cue { animation-direction: reverse; }
.watch__key:hover .watch__cue,
.watch__key:focus-visible .watch__cue { stroke: var(--descent); opacity: 1; animation-play-state: paused; }

@keyframes cue-breathe {
	0%, 100% { transform: translateY(calc(-50% - 1px)); }
	50%      { transform: translateY(calc(-50% + 1px)); }
}

.watch__caption {
	margin-top: 1rem;
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.watch__dots { display: inline-flex; gap: 0.4rem; }
.watch__dots i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #3A4441;
	transition: background-color 0.18s, transform 0.18s;
}
.watch__dots i.is-on { background: var(--fg); transform: scale(1.25); }
.watch__name  { color: var(--fg); font-weight: 600; }
.watch__hint  { text-transform: none; letter-spacing: 0.04em; font-size: 0.75rem; }

/* The field list is the app's own settings screen, so it is laid out like
   one: a rule in the group colour, the count of fields, then numbered rows
   on hairlines. Pills were doing the opposite — ragged widths, no order to
   scan by, and four boxes of air. The panel is transparent now, so the
   terrain behind the section carries through instead of being boxed out. */

.live__groups {
	display: grid;
	gap: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.fieldgroup {
	--tone: var(--fg-dim);
	--tone-rule: var(--line-soft);
	min-width: 0;
}
.fieldgroup--descent { --tone: var(--descent); --tone-rule: rgba(216, 255, 62, 0.5); }
.fieldgroup--lift    { --tone: var(--lift);    --tone-rule: rgba(116, 174, 203, 0.55); }

.fieldgroup__tag {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding-top: 0.75rem;
	margin-bottom: 0.25rem;
	border-top: 2px solid var(--tone-rule);
	color: var(--tone);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.fieldgroup__count {
	margin-left: auto;
	color: var(--fg-dim);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.fieldgroup__list {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fieldgroup__list li {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: 0.6rem;
	align-items: baseline;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fg-mid);
	transition: color 0.18s var(--ease);
}
.fieldgroup__list li:last-child { border-bottom: 0; }
.fieldgroup__list li:hover { color: var(--fg); }

/* The index is the only thing here that carries the group colour into the
   rows, which is enough to keep the two halves of the day apart. */
.fieldgroup__idx {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	letter-spacing: 0.04em;
	color: var(--tone);
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}
.fieldgroup--neutral .fieldgroup__idx { opacity: 0.75; }

/* ── Summary board: the timing tower ─────────────────────────────────── */

.board {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.board__cell {
	padding: clamp(1.25rem, 3.5vw, 1.75rem);
	background: var(--ink-raised);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	justify-content: space-between;
}
.board__cell.is-big { background: var(--ink-card); }

.board__label {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.board__value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: clamp(1.5rem, 6vw, 2rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}
.board__cell.is-big .board__value { font-size: clamp(2rem, 9vw, 3.25rem); }
.board__cell--descent .board__value { color: var(--descent); }
.board__cell--lift    .board__value { color: var(--lift); }

.board__unit {
	margin-left: 0.3em;
	font-size: 0.45em;
	letter-spacing: 0.08em;
	color: var(--fg-dim);
}

/* ── Cards ───────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 1.25rem; }

.card {
	padding: clamp(1.75rem, 4vw, 2.25rem);
	background: var(--ink-raised);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.card:hover { border-color: var(--line); transform: translateY(-3px); }

.card__title {
	font-size: clamp(1.125rem, 3vw, 1.375rem);
	text-transform: uppercase;
	margin-bottom: 0.875rem;
}
.card__body { color: var(--fg-mid); font-size: 0.9375rem; line-height: 1.7; }

/* ── Sync flow: three stops on one line ────────────────────────────── */

/* The file is the same object at every stop, so the stops sit on one hairline
   that runs through the whole row; the lime dash travels along it. */
.stops {
	list-style: none;
	margin: 0 0 clamp(3rem, 7vw, 5rem);
	padding: 0;
	display: grid;
	gap: 1.25rem;
	position: relative;
	counter-reset: stop;
}
.stops__item {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--ink-raised);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	align-content: start;
}
.stops__icon {
	grid-row: 1 / 3;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--descent);
	background: rgba(216, 255, 62, 0.08);
	border: 1px solid rgba(216, 255, 62, 0.25);
}
.stops__num {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--fg-dim);
	align-self: end;
}
.stops__title {
	font-size: clamp(1.125rem, 3vw, 1.375rem);
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.stops__body { grid-column: 1 / -1; color: var(--fg-mid); font-size: 0.9375rem; line-height: 1.7; margin: 0.25rem 0 0; }

/* ── Customize: copy left, numbers + layout sketches right ─────────── */

.custom {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--ink-raised);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
}
.custom__copy .eyebrow { margin-bottom: 1rem; }
.custom__title { font-size: clamp(1.375rem, 3.4vw, 1.875rem); text-transform: uppercase; margin: 0 0 1rem; max-width: 18ch; }
.custom__lead { color: var(--fg-mid); font-size: 0.9375rem; line-height: 1.7; margin: 0 0 1.25rem; }
.custom__where {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.custom__where li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem 0.45rem 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg);
}
.custom__where svg { width: 18px; height: 18px; color: var(--descent); }
.custom__list { margin-top: 0; }

/* The numbers are the hero, like everywhere else on the page: big tabular
   mono on a hairline grid, caption underneath. */
.stats {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.stats__item { background: var(--ink); padding: 1.25rem 1.25rem 1.1rem; display: grid; gap: 0.35rem; }
.stats__value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1;
	color: var(--descent);
}
.stats__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); }

/* The demo face: a round black display with the layout's slots laid out in
   percentages. Every slot is a button; the hero slot carries the big number. */
.demo { display: grid; gap: 1rem; justify-items: center; }
.demo__face {
	position: relative;
	width: min(300px, 80vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #000;
	border: 6px solid #1B201E;
	box-shadow: 0 0 0 1px #2A302E, 0 24px 40px rgba(0, 0, 0, 0.5);
}
/* The status line and page dots the real app draws around every layout. */
.demo__face::before {
	content: "23:01  50%";
	position: absolute;
	left: 0; right: 0; top: 6%;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	color: var(--fg-dim);
}
.demo__face::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 7%;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--fg);
	transform: translateX(-50%);
	box-shadow: 10px 0 0 #3A4441, 20px 0 0 #3A4441, -10px 0 0 #3A4441, -20px 0 0 #3A4441;
}
.demo__slot {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--fg);
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 0.1em;
	cursor: pointer;
	font-family: var(--font-mono);
	transition: background-color 0.15s, border-color 0.15s;
	overflow: hidden;
}
.demo__slot:hover, .demo__slot:focus-visible { background: rgba(216, 255, 62, 0.08); border-color: rgba(216, 255, 62, 0.5); outline: none; }
.demo__label { font-size: 0.5rem; letter-spacing: 0.06em; color: var(--fg-dim); white-space: nowrap; line-height: 1; }
.demo__value { font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1; color: var(--descent); }
.demo__slot.is-hero .demo__value { font-size: 1.9rem; }
.demo__slot.is-hero { border-color: rgba(216, 255, 62, 0.35); }
.demo__slot.is-band { grid-auto-flow: column; gap: 0.6em; }
.demo__slot.is-band .demo__value { font-size: 0.9rem; }
.demo__hint { margin: 0; max-width: 34ch; text-align: center; font-size: 0.8125rem; line-height: 1.6; color: var(--fg-dim); }
.layouts__pick {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.4rem;
	background: var(--ink);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	cursor: pointer;
	transition: border-color 0.2s, transform 0.25s var(--ease);
}
.layouts__pick:hover { transform: translateY(-3px); }
.layouts__pick.is-on { border-color: var(--descent); background: rgba(216, 255, 62, 0.06); }
.layouts__pick:focus-visible { outline: 2px solid var(--descent); outline-offset: 2px; }

/* Seven tiny faces, one per layout; the first slot of each is lit. */
.layouts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem;
}
.layouts { width: 100%; }
.layouts svg { width: 100%; height: auto; display: block; fill: none; stroke: #3A4441; stroke-width: 1.5; }
.layouts circle { stroke: var(--line); }
.layouts rect { fill: rgba(255, 255, 255, 0.04); }
.layouts rect.is-hero { fill: rgba(216, 255, 62, 0.22); stroke: var(--descent); }

/* What the on-watch editor can do — a list inside a card, marked with the
   descent colour so it reads as app capability rather than body copy. */
.card__list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.card__list li { padding-left: 1.5rem; position: relative; }
.card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.5rem;
	height: 2px;
	background: var(--descent);
}

/* ── Devices ─────────────────────────────────────────────────────────── */

.devices { display: grid; gap: clamp(2rem, 5vw, 3rem); }

.devices__tag {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
	color: var(--fg-dim);
}
.devices__group--live .devices__tag { color: var(--descent); }

.devices__list { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
/* 18 families since V3.53: two columns once there is room, one on phones. */
@media (min-width: 720px) { .devices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.devices__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.95rem 1.125rem;
	background: var(--ink-raised);
}
.devices__name { font-weight: 700; font-size: 0.9375rem; }
.devices__variant {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--fg-dim);
}

.devices__group--live .devices__item { background: var(--ink-card); }
.devices__group--live .devices__name { color: var(--descent); }

.devices__group--planned .devices__item { opacity: 0.62; }
/* Edge group (V3.69): same card treatment as the watches, tag in the lift colour so the
   two groups read as "two kinds of device", not "supported vs. planned". */
.devices__group--edge .devices__tag { color: var(--lift); }
.devices__group--edge .devices__item { background: var(--ink-card); }
.devices__group--edge .devices__name { color: var(--lift); }

.devices__note {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--fg-dim);
	line-height: 1.6;
}

/* ── Pricing ─────────────────────────────────────────────────────────── */

.price { display: grid; gap: 1.25rem; }

.price__card {
	padding: clamp(1.75rem, 4.5vw, 2.5rem);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	background: var(--ink-raised);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.price__card--full {
	border-color: rgba(216, 255, 62, 0.3);
	background: linear-gradient(160deg, rgba(216, 255, 62, 0.06), transparent 60%), var(--ink-card);
}

.price__tag {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.price__card--full .price__tag { color: var(--descent); }

.price__value {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: clamp(2.25rem, 8vw, 3rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.price__card--full .price__value { color: var(--descent); }

.price__body { color: var(--fg-mid); font-size: 0.9375rem; line-height: 1.7; }

.price__note {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-dim);
}

.flow {
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding-top: clamp(2rem, 5vw, 2.5rem);
	border-top: 1px solid var(--line-soft);
}
.flow__tag {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin-bottom: 1.5rem;
}
/* The trial-to-full timeline: numbered nodes on one rail. Mobile: the rail runs
   down the left edge; desktop: across the top, one node per step, the last one lit. */
.flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
.flow__list::before {
	content: "";
	position: absolute;
	left: 1.1rem; top: 1rem; bottom: 1rem;
	width: 1px;
	background: linear-gradient(to bottom, var(--line), var(--descent));
}
.flow__step { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; font-size: 0.9375rem; color: var(--fg-mid); line-height: 1.55; }
.flow__node {
	position: relative; z-index: 1;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ink);
	border: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--fg-dim);
}
.flow__text { padding-top: 0.45rem; }
.flow__step.is-last { color: var(--fg); }
.flow__step.is-last .flow__node { background: var(--descent); border-color: var(--descent); color: var(--ink); }
.flow__step.is-last .flow__text { color: var(--descent); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { display: grid; }

.faq__item { border-top: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--line-soft); }

.faq__q {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: clamp(1rem, 2.6vw, 1.125rem);
	transition: color 0.2s;
}
.faq__q-text { display: inline; margin: 0; font: inherit; color: inherit; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "+";
	flex: none;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--descent);
	transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q { color: var(--descent); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a {
	padding-bottom: 1.5rem;
	max-width: 62ch;
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.75;
}

/* ── Final call ──────────────────────────────────────────────────────── */

.final {
	position: relative;
	overflow: hidden;
	padding-block: clamp(5rem, 13vw, 9rem);
	border-top: 1px solid var(--line-soft);
	text-align: center;
}
.final__bg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	opacity: 0.16;
	pointer-events: none;
}
.final__inner { position: relative; z-index: 1; }

.final__headline {
	font-size: clamp(2.25rem, 9vw, 4.5rem);
	text-transform: uppercase;
}
.final__headline em { font-style: normal; color: var(--descent); }

.final__lead {
	margin: 1.5rem auto 2.5rem;
	max-width: 44ch;
	color: var(--fg-mid);
	font-size: clamp(0.9375rem, 2.4vw, 1.0625rem);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-foot {
	border-top: 1px solid var(--line-soft);
	padding-top: clamp(3rem, 7vw, 4.5rem);
	background: #070A09;
}

.site-foot__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 3rem);
	padding-bottom: clamp(2.5rem, 6vw, 3.5rem);
}

.site-foot__tagline {
	margin-top: 1rem;
	max-width: 34ch;
	color: var(--fg-dim);
	font-size: 0.875rem;
	line-height: 1.65;
}

.site-foot__tag {
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fg-dim);
	margin-bottom: 1rem;
}
.site-foot__col ul { display: grid; gap: 0.6rem; }
.site-foot__col a { color: var(--fg-mid); font-size: 0.875rem; transition: color 0.18s; }
.site-foot__col a:hover { color: var(--descent); }

.is-pending { display: inline-flex; align-items: baseline; gap: 0.4rem; color: var(--fg-dim); font-size: 0.875rem; }
.is-pending em {
	font-style: normal;
	font-family: var(--font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.15rem 0.35rem;
	white-space: nowrap;
	border: 1px solid var(--line-soft);
	border-radius: 2px;
	opacity: 0.7;
}

.site-foot__legal {
	padding-block: 1.5rem;
	border-top: 1px solid var(--line-soft);
	display: grid;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--fg-dim);
	line-height: 1.6;
}

/* ── Scroll reveals ──────────────────────────────────────────────────── */

/* Gated on html.js: without scripting the sections must simply be there. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
/* Scrolled back up past it: it left downwards, so it returns from above. */
.js [data-reveal][data-dir="up"] { transform: translateY(-28px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Groups: the container is inert, each child comes in on its own, in order. */
.js [data-reveal="stagger"] { opacity: 1; transform: none; transition: none; }
.js [data-reveal="stagger"] > * {
	opacity: 0;
	transform: translateY(28px) scale(0.985);
	transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal="stagger"][data-dir="up"] > * { transform: translateY(-28px) scale(0.985); }
.js [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }

/* The product shot grows into place, then keeps floating. */
.js [data-reveal] .watch--static {
	transform: scale(0.9) translateY(20px);
	transition: transform 0.9s var(--ease);
}
.js [data-reveal].is-in .watch--static {
	transform: none;
	animation: dh-float 6s ease-in-out 0.9s infinite;
}
@keyframes dh-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* ── Parallax photos ─────────────────────────────────────────────────── */

/* Photos overscan the section and slide by --par (set per frame in JS);
   the overscan keeps the section covered at both ends of the travel. */
.js [data-parallax]::before {
	inset: -10% 0;
	transform: translate3d(0, var(--par, 0px), 0);
	will-change: transform;
}
.js .section--problem[data-parallax]::before,
.js .section--sync[data-parallax]::before {
	transform: translate3d(0, var(--par, 0px), 0) scaleX(-1);
}

/* ── Language suggestion bar ─────────────────────────────────────────── */

/* Overlays the top of the page instead of pushing it down: no layout shift
   when the script decides to show it after first paint. */
.langbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 200;
	background: var(--descent);
	color: var(--ink);
	transform: translateY(-100%);
	transition: transform 0.4s var(--ease);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.langbar.is-open { transform: none; }
.langbar[hidden] { display: none; }
.langbar__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem 1.25rem;
	min-height: calc(4.25rem + 1px); /* covers the header exactly */
	padding-block: 0.5rem;
	flex-wrap: wrap;
}
.langbar__text { margin: 0; font-weight: 600; font-size: 0.9375rem; flex: 1 1 auto; }
.langbar__cta {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--descent);
	background: var(--ink);
	padding: 0.55rem 0.9rem;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
}
.langbar__cta:hover, .langbar__cta:focus-visible { background: var(--ink-card); }
.langbar__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 1.5rem;
	line-height: 1;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius);
	cursor: pointer;
}
.langbar__close:hover, .langbar__close:focus-visible { background: rgba(10, 13, 12, 0.12); }
@media (max-width: 520px) {
	.langbar__inner {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: "text close" "cta cta";
		gap: 0.5rem 0.75rem;
		padding-block: 0.75rem;
	}
	.langbar__text  { grid-area: text; }
	.langbar__close { grid-area: close; }
	.langbar__cta   { grid-area: cta; justify-self: start; }
}

/* ── Breakpoints ─────────────────────────────────────────────────────── */

@media (min-width: 640px) {
	.compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.live__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.board { grid-template-columns: repeat(2, 1fr); }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.card--wide { grid-column: 1 / -1; }
	.stops { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
	/* A lime chevron in each gap: the file moves right, unchanged. */
	.stops__item + .stops__item::before {
		content: "";
		position: absolute;
		left: -2.5rem;
		top: 50%;
		width: 2.5rem;
		height: 1px;
		background: linear-gradient(to right, var(--line-soft), rgba(216, 255, 62, 0.6));
	}
	.stops__item + .stops__item::after {
		content: "";
		position: absolute;
		left: -0.9rem;
		top: calc(50% - 0.3rem);
		width: 0.6rem;
		height: 0.6rem;
		border-top: 1.5px solid var(--descent);
		border-right: 1.5px solid var(--descent);
		transform: rotate(45deg);
	}
	.custom { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
	.stats { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); margin-bottom: 0.5rem; }
	.hero__actions .btn { flex: 0 0 auto; }
	.site-head__end .btn { display: inline-flex; }
	.site-foot__legal { grid-template-columns: 1fr auto; align-items: baseline; }
}

@media (min-width: 880px) {
	.hero__inner { grid-template-columns: 1.1fr 0.9fr; }

	/* Title left, lead right: fills the measure without inventing filler,
	   and keeps both columns at a readable line length. */
	.section__head {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		column-gap: clamp(2rem, 5vw, 4.5rem);
		align-items: end;
	}
	.section__head .eyebrow { grid-column: 1 / -1; }
	/* The live-data head sits beside the watch, so it stacks instead. */
	.live__copy.section__head { display: block; max-width: 30ch; }
	.live__copy .section__lead { max-width: 44ch; margin-top: 1.25rem; }
	.section__title { max-width: 16ch; }
	.section__lead  { margin-top: 0; padding-bottom: 0.35rem; }

	.steps { grid-template-columns: repeat(3, 1fr); }
	.devices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
	.price { grid-template-columns: 1fr 1fr; }
	/* The trail in the background photo is in its left half, so the watch and
	   the copy are pushed right and leave that half uncovered.
	   The shift grows with the window: none at 880px, 10rem from about 1150px,
	   so on a narrow window the two columns still have room. */
	.live { grid-template-columns: 1.1fr 0.9fr; margin-left: clamp(0px, calc((100vw - 880px) * 0.6), 10rem); }
	.watch--static .watch__frame { margin-inline: 0; width: min(520px, 100%); }
	.strip { grid-template-columns: repeat(4, 1fr); }
	.site-foot__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (min-width: 1024px) {
	.site-nav { display: flex; }
	/* Four columns beat two-by-two: no group ends up alone in a quadrant. */
	.live__groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.board { grid-template-columns: repeat(4, 1fr); }
	.board__cell.is-big { grid-column: span 1; }
	.flow__list { grid-template-columns: repeat(var(--steps, 5), 1fr); gap: 1.5rem; }
	.flow__list::before { left: 1.1rem; right: calc(100% / var(--steps, 5) - 1.1rem); top: 1.1rem; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, var(--line), var(--descent)); }
	.flow__step { grid-template-columns: 1fr; gap: 1rem; }
	.flow__text { padding-top: 0; }
}

/* ── Motion preferences ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.profile--hero path { stroke-dashoffset: 0; }
	.watch__cue { animation: none; transform: translateY(-50%); }
	.js [data-reveal], .js [data-reveal="stagger"] > * { opacity: 1; transform: none; }
	.js [data-reveal] .watch--static { transform: none; animation: none; }
	.js [data-parallax]::before { inset: 0; transform: none; }
	.js .section--problem[data-parallax]::before,
	.js .section--sync[data-parallax]::before { transform: scaleX(-1); }
}

/* Session totals stay uncoloured: they belong to neither half of the day. */
.board__cell--neutral .board__value { color: var(--fg); }

/* ── 404 ─────────────────────────────────────────────────────────────── */

.notfound {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 78vh;
	padding-block: clamp(4rem, 12vw, 8rem);
}
.notfound__bg {
	position: absolute;
	inset: auto 0 12%;
	height: clamp(90px, 16vh, 170px);
	opacity: 0.22;
	pointer-events: none;
}
.notfound__inner { position: relative; z-index: 1; }

.notfound__code {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	color: var(--descent);
	margin-bottom: 1.25rem;
}
.notfound__headline {
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	text-transform: uppercase;
}
.notfound__lead {
	margin: 1.25rem 0 2.25rem;
	max-width: 46ch;
	color: var(--fg-mid);
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	line-height: 1.65;
}

/* ── Legal pages (privacy, terms, refunds, contact) ─────────────────── */
/* Reading page, not a landing section: narrow measure, calm type, one accent. */

.legal {
	max-width: var(--narrow);
	padding-block: clamp(7rem, 14vw, 9rem) clamp(4rem, 8vw, 6rem);
}
.legal__notice {
	margin: 0 0 2rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line-soft);
	border-left: 3px solid var(--lift);
	border-radius: var(--radius);
	background: var(--ink-raised);
	color: var(--fg-mid);
	font-size: 0.9375rem;
}
.legal__head { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-soft); }
.legal__title {
	margin: 0 0 1rem;
	font-weight: 900;
	font-size: clamp(2.25rem, 6vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.legal__lead { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.55; color: var(--fg); }
.legal__updated {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-dim);
}
.legal__body { color: var(--fg-mid); font-size: 1rem; line-height: 1.7; }
.legal__body h2 {
	margin: 2.75rem 0 0.85rem;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--fg);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin: 0 0 1rem; }
.legal__body ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; } /* global reset strips markers */
.legal__body li { margin-bottom: 0.45rem; }
.legal__body li::marker { color: var(--descent); }
.legal__body strong { color: var(--fg); font-weight: 700; }
.legal__body a { color: var(--descent); text-underline-offset: 0.2em; }
.legal__body table {
	width: 100%;
	margin: 0 0 1.25rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	display: block;
	overflow-x: auto;
}
.legal__body th, .legal__body td {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line-soft);
	text-align: left;
	vertical-align: top;
}
.legal__body th {
	background: var(--ink-raised);
	color: var(--fg);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.legal__todo {
	padding: 0.1em 0.35em;
	border-radius: var(--radius);
	background: #ff5a3c;
	color: #0a0d0c;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
}
.site-foot__operator { color: var(--fg-mid); }

/* ── Header on phones: eight languages since V3.55 (Spanish) ───────────── */
/* Wordmark 163 px + switcher 179 px did not fit the 350 px row of a 390 px
   phone, so the name broke onto two lines. Tighter language items keep one
   row down to 360 px; below that the header switcher goes (it is also in
   the footer). The name itself must never wrap. */
.brand__name { white-space: nowrap; }
@media (max-width: 420px) {
	.site-head .langs__item { padding-inline: 0.18rem; }
}
@media (max-width: 359px) {
	.site-head .langs { display: none; }
}

/* ── Consent banner (inc/consent.php, assets/js/consent.js) ───────────── */
/* Rendered visible from PHP (it can be the mobile LCP element); returning
   visitors are hidden by html.has-consent-decision set in <head>. Reject and
   Accept share one style on purpose: refusing must be as easy as agreeing. */
html.has-consent-decision .consent { display: none; }
.consent {
	position: fixed;
	left: 50%;
	bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	z-index: 90;
	width: min(40rem, calc(100% - 2rem));
	transform: translateX(-50%);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	background: var(--ink-card);
	box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.consent[hidden] { display: none; }
.consent.is-leaving { opacity: 0; transform: translate(-50%, 0.75rem); }
.consent__inner { display: grid; gap: 1rem; padding: 1.25rem 1.35rem; }
.consent__title { margin: 0 0 0.35rem; font-weight: 700; color: var(--fg); }
.consent__text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--fg-mid); }
.consent__text a { color: var(--descent); text-underline-offset: 0.2em; }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.consent__btn {
	flex: 1 1 8rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--descent);
	border-radius: var(--radius);
	background: transparent;
	color: var(--descent);
	font: 600 0.8125rem/1 var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.consent__btn:hover, .consent__btn:focus-visible { background: var(--descent); color: var(--ink); }
.consent__link {
	flex: 0 0 auto;
	padding: 0.5rem 0.25rem;
	border: 0;
	background: none;
	color: var(--fg-mid);
	font: inherit;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.consent__link:hover { color: var(--fg); }

.consent-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.consent-modal[hidden] { display: none; }
.consent-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.consent-modal__dialog {
	position: relative;
	width: min(34rem, 100%);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	padding: 1.5rem;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	background: var(--ink-card);
}
.consent-modal__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 0.75rem; }
.consent-modal__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
.consent-modal__close {
	width: 2.25rem; height: 2.25rem; flex: none;
	border: 1px solid var(--line-soft); border-radius: var(--radius);
	background: none; color: var(--fg); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.consent-modal__intro { margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--fg-mid); }
.consent-modal__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.consent-cat { padding: 1rem 0; border-top: 1px solid var(--line-soft); }
.consent-cat__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.consent-cat__title { font-weight: 700; color: var(--fg); }
.consent-cat__badge { font: 600 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.consent-cat__desc { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--fg-mid); }
.consent-toggle { position: relative; display: inline-block; width: 2.75rem; height: 1.5rem; flex: none; }
.consent-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.consent-toggle__track { position: absolute; inset: 0; border-radius: 999px; background: var(--line-soft); transition: background 0.15s; }
.consent-toggle__track::after {
	content: ""; position: absolute; top: 0.2rem; left: 0.2rem;
	width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--fg-mid);
	transition: transform 0.15s var(--ease), background 0.15s;
}
.consent-toggle input:checked + .consent-toggle__track { background: var(--descent); }
.consent-toggle input:checked + .consent-toggle__track::after { transform: translateX(1.25rem); background: var(--ink); }
.consent-toggle input:focus-visible + .consent-toggle__track { outline: 2px solid var(--descent); outline-offset: 2px; }
body.consent-open { overflow: hidden; }

.site-foot__consent { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.site-foot__consent a { color: var(--fg-mid); }
.consent-toast {
	padding: 0.2rem 0.6rem; border-radius: 999px;
	background: var(--descent); color: var(--ink);
	font: 600 0.75rem/1.4 var(--font-mono);
}