/* ═══════════════════════════════════════════════════════════════════════
   SKI & SNOWBOARD APP — landing page (same build as the Bikepark app site)
   Concept: a race timing board on snow. Numbers are the hero typography,
   not decoration, because the product exists to produce numbers.
   Colour is semantic: slate is always the lift, piste blue is always the
   descent. Snow-white page, alpine-navy ink; the footer and the final call
   are the only dark bands.
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
	/* Snow under a clear sky: white with a cold blue cast, alpine-navy ink */
	--ink:        #F5F9FD;
	--ink-raised: #EAF1F9;
	--ink-card:   #FFFFFF;
	--line:       rgba(18, 102, 230, 0.16);
	--line-soft:  rgba(11, 31, 58, 0.10);

	--fg:      #0B1F3A;
	--fg-mid:  #2C4361;
	--fg-dim:  #586D86;

	/* The two semantic colours. Nothing else competes with them. */
	--descent: #1266E6;
	--lift:    #5E7C9C;
	--dust:    #8FB4DD;

	/* Dark bands (footer, final call) and the watch display */
	--night:      #0B1F3A;
	--night-deep: #071427;
	--on-accent:  #FFFFFF;

	--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.025;
	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(--on-accent); }

: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(--on-accent);
	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(--on-accent);
	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(18, 102, 230, 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(245, 249, 253, 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(245, 249, 253, 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; white-space: nowrap; }
/* The buy button is the one header action that stays on phones (the store link lives in the hero). */
.site-head__end .site-head__buy { display: inline-flex; }

/* ── 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.2rem; }
	.site-head__inner { gap: 0.5rem; }
	.site-head__end { gap: 0.5rem; }
	.site-head__end .site-head__buy { padding: 0.5rem 0.65rem; font-size: 0.625rem; letter-spacing: 0.04em; }
}
/* Narrow screens: the mark alone stands for the brand, so the language switcher and the buy
   button fit beside it (German/French labels are the widest). Since 2026-10-22 the name is
   "SKI & SNOWBOARD APP", 40 % longer than "SKI PRECISION": below 768 px it did not fit in
   French and Italian (measured in a browser, 8 languages x 24 widths), hence 767 instead of 479. */
@media (max-width: 767px) {
	.site-head .brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.site-head .brand { gap: 0; }
}
@media (min-width: 640px) and (max-width: 1199px) {
	.site-nav { gap: 1.1rem; }
	.site-head__end { gap: 0.6rem; }
}

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

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

.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(18, 102, 230, 0.13), transparent 62%);
	filter: blur(34px);
	pointer-events: none;
}

/* ── Section photos (2026-10-16): one soft winter photograph per section, in colour, the
   subject on the right. A snow-white veil (::after) is strongest under the text column on the
   left, so copy stays readable on any photo; on narrow screens the veil is even. The live
   section mirrors it: watch on the left, copy on the right. Masters: ski/_originals/. ── */

.hero,
.section[data-parallax] { overflow: hidden; }
.hero > *,
.section[data-parallax] > .shell { position: relative; z-index: 1; }

.hero::before,
.section--problem::before,
.section--how::before,
.section--live::before,
.section--summary::before,
.section--sync::before,
.section--devices::before,
.section--pricing::before,
.section--faq::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: right center;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 82%, transparent 100%);
	pointer-events: none;
}
.hero::before {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
}

.hero::after,
.section--problem::after,
.section--how::after,
.section--live::after,
.section--summary::after,
.section--sync::after,
.section--devices::after,
.section--pricing::after,
.section--faq::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(245, 249, 253, 0.86);
	pointer-events: none;
}
@media (min-width: 880px) {
	.hero::after,
	.section[data-parallax]::after {
		background: linear-gradient(90deg, rgba(245, 249, 253, 0.94) 0%, rgba(245, 249, 253, 0.86) 45%, rgba(245, 249, 253, 0.66) 100%);
	}
	.section--live::after {
		background: linear-gradient(270deg, rgba(245, 249, 253, 0.94) 0%, rgba(245, 249, 253, 0.86) 45%, rgba(245, 249, 253, 0.66) 100%);
	}
	/* Sections whose content spans the full width (tables, cards, lists): a calmer veil. */
	.section--summary::after,
	.section--sync::after,
	.section--devices::after,
	.section--pricing::after {
		background: linear-gradient(90deg, rgba(245, 249, 253, 0.93) 0%, rgba(245, 249, 253, 0.88) 45%, rgba(245, 249, 253, 0.76) 100%);
	}
}
.hero::before {
	background-image: url("../img/bg/hero-800.jpg");
	background-image: image-set(url("../img/bg/hero-800.webp") type("image/webp"), url("../img/bg/hero-800.jpg") type("image/jpeg"));
}
.section--problem::before {
	background-image: url("../img/bg/problem-800.jpg");
	background-image: image-set(url("../img/bg/problem-800.webp") type("image/webp"), url("../img/bg/problem-800.jpg") type("image/jpeg"));
}
.section--how::before {
	background-image: url("../img/bg/how-800.jpg");
	background-image: image-set(url("../img/bg/how-800.webp") type("image/webp"), url("../img/bg/how-800.jpg") type("image/jpeg"));
}
.section--live::before {
	background-image: url("../img/bg/live-800.jpg");
	background-image: image-set(url("../img/bg/live-800.webp") type("image/webp"), url("../img/bg/live-800.jpg") type("image/jpeg"));
}
.section--summary::before {
	background-image: url("../img/bg/summary-800.jpg");
	background-image: image-set(url("../img/bg/summary-800.webp") type("image/webp"), url("../img/bg/summary-800.jpg") type("image/jpeg"));
}
.section--sync::before {
	background-image: url("../img/bg/sync-800.jpg");
	background-image: image-set(url("../img/bg/sync-800.webp") type("image/webp"), url("../img/bg/sync-800.jpg") type("image/jpeg"));
}
.section--devices::before {
	background-image: url("../img/bg/devices-800.jpg");
	background-image: image-set(url("../img/bg/devices-800.webp") type("image/webp"), url("../img/bg/devices-800.jpg") type("image/jpeg"));
}
.section--pricing::before {
	background-image: url("../img/bg/pricing-800.jpg");
	background-image: image-set(url("../img/bg/pricing-800.webp") type("image/webp"), url("../img/bg/pricing-800.jpg") type("image/jpeg"));
}
.section--faq::before {
	background-image: url("../img/bg/faq-800.jpg");
	background-image: image-set(url("../img/bg/faq-800.webp") type("image/webp"), url("../img/bg/faq-800.jpg") type("image/jpeg"));
}
@media (min-width: 800px) {
	.hero::before {
		background-image: url("../img/bg/hero.jpg");
		background-image: image-set(url("../img/bg/hero.webp") type("image/webp"), url("../img/bg/hero.jpg") type("image/jpeg"));
	}
	.section--problem::before {
		background-image: url("../img/bg/problem.jpg");
		background-image: image-set(url("../img/bg/problem.webp") type("image/webp"), url("../img/bg/problem.jpg") type("image/jpeg"));
	}
	.section--how::before {
		background-image: url("../img/bg/how.jpg");
		background-image: image-set(url("../img/bg/how.webp") type("image/webp"), url("../img/bg/how.jpg") type("image/jpeg"));
	}
	.section--live::before {
		background-image: url("../img/bg/live.jpg");
		background-image: image-set(url("../img/bg/live.webp") type("image/webp"), url("../img/bg/live.jpg") type("image/jpeg"));
	}
	.section--summary::before {
		background-image: url("../img/bg/summary.jpg");
		background-image: image-set(url("../img/bg/summary.webp") type("image/webp"), url("../img/bg/summary.jpg") type("image/jpeg"));
	}
	.section--sync::before {
		background-image: url("../img/bg/sync.jpg");
		background-image: image-set(url("../img/bg/sync.webp") type("image/webp"), url("../img/bg/sync.jpg") type("image/jpeg"));
	}
	.section--devices::before {
		background-image: url("../img/bg/devices.jpg");
		background-image: image-set(url("../img/bg/devices.webp") type("image/webp"), url("../img/bg/devices.jpg") type("image/jpeg"));
	}
	.section--pricing::before {
		background-image: url("../img/bg/pricing.jpg");
		background-image: image-set(url("../img/bg/pricing.webp") type("image/webp"), url("../img/bg/pricing.jpg") type("image/jpeg"));
	}
	.section--faq::before {
		background-image: url("../img/bg/faq.jpg");
		background-image: image-set(url("../img/bg/faq.webp") type("image/webp"), url("../img/bg/faq.jpg") type("image/jpeg"));
	}
}

/* ── 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(143, 180, 221, 0.55);
	min-width: 0;
}
.compare__col--bad  { --tone: var(--dust); }
.compare__col--base { --tone: var(--lift); --tone-rule: rgba(94, 124, 156, 0.45); }
.compare__col--good { --tone: var(--descent); --tone-rule: rgba(18, 102, 230, 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;
}

/* Beta strip under the three steps: full width, the same card language as the board. */
.beta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	padding: 1.1rem 1.4rem;
	background: var(--ink-card);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
}
.beta__tag {
	flex: none;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(18, 102, 230, 0.10);
	color: var(--descent);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.beta__text {
	flex: 1 1 32ch;
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ── 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(18, 102, 230, 0.11), transparent 62%);
	filter: blur(36px);
	pointer-events: none;
}
/* Light page: no back-light. Blurred under a luminosity-blended photo it read as fog around
   the watch (Marcin, 2026-10-16); the dark theme needed it, this one does not. */
.hero__visual::before,
.live__visual::before { display: none; }
.watch--static .watch__frame { width: min(520px, 78%); }
/* Light page: a short navy-tinted shadow. The dark-theme 60 % black at 44 px read as grey haze. */
.watch--static .watch__case { filter: drop-shadow(0 18px 22px rgba(11, 31, 58, 0.26)); }

/* 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 16px 20px rgba(11, 31, 58, 0.24));
}
.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 blue 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(18, 102, 230, 0);
	transition: box-shadow 0.18s var(--ease), background-color 0.18s;
}
.watch__key:hover::after,
.watch__key:focus-visible::after {
	background: rgba(18, 102, 230, 0.16);
	box-shadow: 0 0 22px 6px rgba(18, 102, 230, 0.28);
}
.watch__key:active::after,
.watch__key.is-pressed::after {
	background: rgba(18, 102, 230, 0.45);
	box-shadow: 0 0 26px 8px rgba(18, 102, 230, 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: #7D90A6;
	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: #C3D0DE;
	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(18, 102, 230, 0.5); }
.fieldgroup--lift    { --tone: var(--lift);    --tone-rule: rgba(94, 124, 156, 0.5); }

.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);
	transition: color 0.18s var(--ease);
}
.fieldgroup__list li:last-child { border-bottom: 0; }
.fieldgroup__list li:hover { color: var(--descent); }

/* 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.85;
	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); }

/* The piste row: the board's last cell, full width — the explanation on the left, the
   steepest stretch of the day on a blue / red / black scale on the right. Track 0-60 %:
   blue to 30 (50 %), red to 40 (66.7 %), black beyond. */
.board__cell--piste {
	grid-column: 1 / -1;
	background: var(--ink-card);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.piste__text {
	color: var(--fg-mid);
	font-size: 0.9375rem;
	line-height: 1.7;
	max-width: 58ch;
}
.piste { display: grid; gap: 0.9rem; }
.piste__track {
	position: relative;
	display: grid;
	grid-template-columns: 50fr 16.667fr 33.333fr;
	gap: 3px;
	height: 10px;
	margin-top: 2.1rem;
}
.piste__seg { border-radius: 2px; }
.piste__seg--blue  { background: #1266E6; }
.piste__seg--red   { background: #D63B2F; }
.piste__seg--black { background: #0B1F3A; }
.piste__marker {
	position: absolute;
	left: var(--at);
	top: -6px;
	bottom: -6px;
	width: 2px;
	margin-left: -1px;
	background: var(--fg);
	z-index: 1;
}
.piste__value {
	position: absolute;
	bottom: calc(100% + 0.35rem);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--fg);
}
.piste__legend {
	display: grid;
	grid-template-columns: 50fr 16.667fr 33.333fr;
	gap: 3px;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.piste__name { display: grid; gap: 0.15rem; font-weight: 600; }
.piste__name em { font-style: normal; font-weight: 400; letter-spacing: 0.04em; color: var(--fg-dim); text-transform: none; }
.piste__name--blue  { color: #1266E6; }
.piste__name--red   { color: #C2352A; }
.piste__name--black { color: #0B1F3A; }
@media (min-width: 880px) {
	.board__cell--piste { grid-template-columns: 1fr 1fr; }
}


.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 blue 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(18, 102, 230, 0.08);
	border: 1px solid rgba(18, 102, 230, 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; }
/* Short tags, two columns: the long sentences were a wall nobody reads (Marcin, 2026-10-16).
   The details live in the sections above and in the FAQ. */
.custom__list--tags { grid-template-columns: 1fr; gap: 0.5rem 1.5rem; color: var(--fg); font-size: 0.875rem; line-height: 1.45; }
@media (min-width: 560px) { .custom__list--tags { grid-template-columns: 1fr 1fr; } }

/* 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 #1B2533;
	box-shadow: 0 0 0 1px #2A3546, 0 24px 40px rgba(11, 31, 58, 0.35);
	--fg: #FFFFFF; --fg-mid: #C9D3DE; --fg-dim: #8A97A6; --descent: #4D9BFF; --lift: #9DB4CC;
}
/* 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 #3A4656, 20px 0 0 #3A4656, -10px 0 0 #3A4656, -20px 0 0 #3A4656;
}
.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(18, 102, 230, 0.08); border-color: rgba(18, 102, 230, 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(18, 102, 230, 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(18, 102, 230, 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: #8FA3BA; stroke-width: 1.5; }
.layouts circle { stroke: var(--line); }
.layouts rect { fill: rgba(11, 31, 58, 0.04); }
.layouts rect.is-hero { fill: rgba(18, 102, 230, 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(18, 102, 230, 0.3);
	background: linear-gradient(160deg, rgba(18, 102, 230, 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-card);
	border: 2px solid var(--descent);
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--descent);
	box-shadow: 0 2px 6px rgba(11, 31, 58, 0.12);
}
.flow__track { position: relative; }
.flow__piste, .flow__skier, .flow__snow { display: none; }
.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(--on-accent); }
.flow__step.is-last .flow__text { color: var(--descent); }

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

.faq { display: grid; align-items: start; }
@media (min-width: 1024px) {
	.faq { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}

.faq__item { border-top: 1px solid var(--line-soft); }
.faq__col:last-child .faq__item:last-child { border-bottom: 1px solid var(--line-soft); }
@media (min-width: 1024px) {
	.faq__col .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;
	background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%);
	--fg: #FFFFFF; --fg-mid: #B9C7D8; --fg-dim: #8396AE; --line-soft: rgba(255, 255, 255, 0.10);
	--descent: #6EAEFF; --lift: #9DB4CC; --on-accent: #0B1F3A;
	color: var(--fg);
}
.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: var(--night);
	--fg: #FFFFFF; --fg-mid: #B9C7D8; --fg-dim: #8396AE; --line-soft: rgba(255, 255, 255, 0.10); --descent: #6EAEFF;
	color: var(--fg);
}

.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;
}


/* ── 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(11, 31, 58, 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 blue 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(18, 102, 230, 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; }
}

/* Section links from 1240 px (were 1024), set a little tighter. Measured in a browser: two-word
   links ("Come funziona", "Vos données") already broke onto two lines at 1024-1150 px in French,
   Italian and Spanish, and with the longer name (2026-10-22) in every language and, in Italian,
   at every width, because the header row is capped. From 1240 px everything sits on one line. */
@media (min-width: 1240px) {
	.site-nav { display: flex; gap: 1.25rem; letter-spacing: 0.05em; }
}
@media (min-width: 1024px) {
	/* 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 { display: none; }
	.flow__step { grid-template-columns: 1fr; gap: 1.6rem; }
	.flow__text { padding-top: 0; }

	/* ── The slope ───────────────────────────────────────────────────────
	   Every step sits --drop lower than the one before, so the five nodes lie on
	   one straight fall line. --run is the horizontal distance node 1 -> node 5
	   (4 columns + 4 gaps of a 5-column grid), --fall the vertical one. */
	.flow__track { --drop: 18px; --gap: 1.5rem; --n: 1.125rem; --run: calc((100% + var(--gap)) * 4 / 5); --fall: calc(var(--drop) * 4); }
	.flow__step:nth-child(2) { margin-top: calc(var(--drop) * 1); }
	.flow__step:nth-child(3) { margin-top: calc(var(--drop) * 2); }
	.flow__step:nth-child(4) { margin-top: calc(var(--drop) * 3); }
	.flow__step:nth-child(5) { margin-top: calc(var(--drop) * 4); }

	/* piste-marker pole under every plate, standing in the snow */
	.flow__node::after {
		content: "";
		position: absolute;
		left: 50%; top: 100%;
		width: 3px; height: 14px;
		margin-left: -1.5px;
		background: repeating-linear-gradient(to bottom, var(--descent) 0 5px, #fff 5px 7px);
		border-radius: 0 0 2px 2px;
	}
	/* finish: a small flag on the last pole */
	.flow__step.is-last .flow__node::before {
		content: "";
		position: absolute;
		left: calc(100% - 2px); top: -9px;
		width: 18px; height: 12px;
		background: conic-gradient(#0B1F3A 25%, #fff 0 50%, #0B1F3A 0 75%, #fff 0) 0 0 / 6px 6px;
		clip-path: polygon(0 0, 100% 15%, 85% 50%, 100% 85%, 0 100%);
		border-left: 2px solid var(--fg);
	}

	/* the groomed piste: a soft pale band along the fall line, node 1 -> node 5 */
	.flow__piste {
		display: block;
		position: absolute;
		left: var(--n); top: var(--n);
		width: var(--run); height: var(--fall);
		background: linear-gradient(to top right, transparent calc(50% - 7px), rgba(18, 102, 230, 0.10) calc(50% - 6px), rgba(18, 102, 230, 0.10) calc(50% - 1px), rgba(18, 102, 230, 0.55) 50%, rgba(18, 102, 230, 0.10) calc(50% + 1px), rgba(18, 102, 230, 0.10) calc(50% + 6px), transparent calc(50% + 7px));
		pointer-events: none;
	}

	/* the skier: rides the fall line node to node, slaloms round every pole */
	.flow__skier {
		display: block;
		position: absolute;
		left: calc(var(--n) + var(--run) - 3.2rem); top: calc(var(--n) + var(--fall) - 0.75rem);
		width: 44px; height: 44px;
		margin: -46px 0 0 -10px;
		color: var(--descent);
		z-index: 2;
		pointer-events: none;
	}
	.flow__skier-body { display: block; width: 100%; height: 100%; }
	.flow__skier svg { width: 100%; height: 100%; }
	.flow.is-in .flow__skier { animation: ski-run 5.5s cubic-bezier(0.45, 0, 0.3, 1) 0.6s both; }
	.flow.is-in .flow__skier-body { animation: ski-slalom 5.5s ease-in-out 0.6s both; }
	@keyframes ski-run {
		from { left: var(--n); top: var(--n); }
		to   { left: calc(var(--n) + var(--run) - 3.2rem); top: calc(var(--n) + var(--fall) - 0.75rem); }   /* stops short of the finish pole */
	}
	/* out and back between each pair of poles: four turns, then a stop-turn at the finish */
	@keyframes ski-slalom {
		0%    { transform: translateY(0) rotate(0deg); }
		12.5% { transform: translateY(-14px) rotate(-8deg); }
		25%   { transform: translateY(0) rotate(0deg); }
		37.5% { transform: translateY(14px) rotate(8deg); }
		50%   { transform: translateY(0) rotate(0deg); }
		62.5% { transform: translateY(-14px) rotate(-8deg); }
		75%   { transform: translateY(0) rotate(0deg); }
		87.5% { transform: translateY(14px) rotate(8deg); }
		100%  { transform: translateY(0) rotate(0deg); }
	}

	/* light snowfall over the slope */
	.flow__snow {
		display: block;
		position: absolute;
		inset: -2.5rem 0 0;
		overflow: hidden;
		pointer-events: none;
	}
	.flow__snow i {
		position: absolute;
		top: -1rem;
		font-style: normal;
		font-size: 1rem;
		color: #7FA8D8;
		opacity: 0;
		animation: flow-snow 9s linear infinite;
	}
	.flow__snow i:nth-child(1) { left: 6%;  animation-delay: 0s;   font-size: 0.7rem; }
	.flow__snow i:nth-child(2) { left: 19%; animation-delay: 2.4s; animation-duration: 11s; }
	.flow__snow i:nth-child(3) { left: 33%; animation-delay: 5.1s; font-size: 0.6rem; }
	.flow__snow i:nth-child(4) { left: 46%; animation-delay: 1.2s; animation-duration: 10s; font-size: 0.9rem; }
	.flow__snow i:nth-child(5) { left: 58%; animation-delay: 6.3s; }
	.flow__snow i:nth-child(6) { left: 71%; animation-delay: 3.6s; animation-duration: 12s; font-size: 0.65rem; }
	.flow__snow i:nth-child(7) { left: 84%; animation-delay: 7.4s; }
	.flow__snow i:nth-child(8) { left: 95%; animation-delay: 4.4s; animation-duration: 10.5s; font-size: 0.75rem; }
	@keyframes flow-snow {
		0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
		10%  { opacity: 0.95; }
		85%  { opacity: 0.75; }
		100% { transform: translate(24px, 12rem) rotate(160deg); opacity: 0; }
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.flow__snow { display: none !important; }
	.flow.is-in .flow__skier, .flow.is-in .flow__skier-body { animation: none; }
	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; }
	
}

/* 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: #FFFFFF;
	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);
}

/* ── Buy dialog (inc/paddle.php, assets/js/buy.js) — reuses the consent modal frame ── */
.buy__label { display: block; margin-bottom: 0.4rem; font: 600 0.75rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-dim); }
.buy__input {
	width: 100%; padding: 0.8rem 1rem;
	border: 1px solid var(--line-soft); border-radius: var(--radius);
	background: var(--ink); color: var(--fg);
	font: 600 1.35rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.buy__input:focus-visible { outline: 2px solid var(--descent); outline-offset: 2px; }
.buy__hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--fg-mid); }
.buy__error { margin: 0.5rem 0 0; font-size: 0.85rem; color: #C8321E; }
.buy__small { margin: 1rem 0 0; font-size: 0.78rem; color: var(--fg-dim); }
.buy__code {
	margin: 0.25rem 0 0.5rem; padding: 1rem; text-align: center;
	border: 1px solid var(--descent); border-radius: var(--radius);
	font: 700 1.9rem/1 var(--font-mono); letter-spacing: 0.14em; color: var(--descent);
	user-select: all;
}
.buy__steps { margin: 1rem 0 0; padding-left: 1.4rem; list-style: decimal; font-size: 0.9rem; color: var(--fg-mid); }
.buy__steps li + li { margin-top: 0.3rem; }
.buy .btn[disabled] { opacity: 0.6; cursor: progress; }
.consent-modal.buy { z-index: 300; }
.buy__code--confirm { color: var(--fg); border-color: var(--line-soft); }
.buy__progress { margin: 1rem 0 0; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.buy__progress-bar { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--descent); transition: width 1s linear; }
.buy__progress-bar--pulse { animation: buy-pulse 1.2s ease-in-out infinite; }
@keyframes buy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }