/* Footworx — landing, privacy and support
   Colours are the app's own, taken from Palette.swift rather than picked
   again by eye: the family gold and plum, and the pace ramp the launch
   wordmark wears (deep plum through copper into bright gold).

   The mood is the reason anyone runs at that hour: first light, warm
   ground, the sky still going. Everything warm sits on top; the page
   underneath stays dark so the colour has somewhere to burn against. */

:root {
	/* The two families, everywhere run and walk stand side by side */
	--run-gold:   #f2b32b;
	--run-deep:   #dd9a10;
	--walk-plum:  #c25585;
	--walk-deep:  #a83a6e;
	--mixed:      #da866a;

	/* The pace ramp, dark-appearance anchors — 12 steps, plum to gold */
	--ramp-0:  #93295c;
	--ramp-1:  #a4365f;
	--ramp-2:  #b6435f;
	--ramp-3:  #c75156;
	--ramp-4:  #d3682c;
	--ramp-5:  #dd7b20;
	--ramp-6:  #e58e1c;
	--ramp-7:  #efa025;
	--ramp-8:  #f9b133;
	--ramp-9:  #ffc143;
	--ramp-10: #ffd053;
	--ramp-11: #ffe492;

	--ink:        #14101a;
	--ink-soft:   #1c1724;
	--ink-lift:   #241d2d;
	--warm-white: #fbf7f2;
	--muted:      rgba(251, 247, 242, 0.66);
	--faint:      rgba(251, 247, 242, 0.40);
	--rule:       rgba(251, 247, 242, 0.12);

	/* One measure and one gutter, used everywhere — the old page had the
	   hero centred on one width and the sections ragged on another. */
	--measure: 36rem;
	--page:    68rem;
	--gutter:  1.5rem;
	--section: 5.5rem;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	background: var(--ink);
	color: var(--warm-white);
	line-height: 1.62;
	min-height: 100%;
	overflow-x: hidden;
}

/* --- Language blocks: one shown, the other simply not rendered --- */
.language-en .for-language-de,
.language-de .for-language-en {
	display: none;
}

/* --- Dawn: the light that makes the whole page ---------------------- */
.glow {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(90% 60% at 50% -10%, rgba(255, 193, 67, 0.22) 0%, rgba(20, 16, 26, 0) 62%),
		radial-gradient(70% 50% at 12% 4%, rgba(168, 58, 110, 0.26) 0%, rgba(20, 16, 26, 0) 64%),
		radial-gradient(60% 45% at 88% 12%, rgba(221, 123, 32, 0.20) 0%, rgba(20, 16, 26, 0) 62%);
}

/* A little tooth, so the gradients read as light rather than as plastic. */
.grain {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.16;
	mix-blend-mode: overlay;
	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.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--page);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* --- Hero ----------------------------------------------------------- */
.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Not a full viewport any more: with the page down to a hero and its
	   closing words, a screen-high hero put a screen of nothing between the
	   stride and the line that finishes the thought. They read as one
	   column now. */
	padding: 5rem 0 0;
}

.hero .icon {
	/* Scales with the wordmark instead of sitting fixed beside it. */
	width: clamp(124px, 26vw, 184px);
	height: clamp(124px, 26vw, 184px);
	display: block;
	margin-bottom: 1.6rem;
	/* The mark stands on the page itself now, with the app-icon tile keyed
	   out — so no rounded corner to draw and no shadow to cast: both belonged
	   to the tile, not to the mark. */
}

/* The wordmark, letter by letter — the app's own signature: FOOT walks
   in, WORX follows after a breath, the X a letter like any other. */
.wordmark {
	display: flex;
	justify-content: center;
	font-size: clamp(2.6rem, 11vw, 5.2rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.02;
}

.wordmark span {
	background: linear-gradient(160deg, var(--ramp-0), var(--ramp-5) 55%, var(--ramp-11));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Each letter falls onto the line like a footfall. */
.wordmark span {
	animation: footfall 0.60s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wordmark span:nth-child(1) { animation-delay: 0.08s; }
.wordmark span:nth-child(2) { animation-delay: 0.21s; }
.wordmark span:nth-child(3) { animation-delay: 0.34s; }
.wordmark span:nth-child(4) { animation-delay: 0.47s; }
/* the breath between FOOT and WORX */
.wordmark span:nth-child(5) { animation-delay: 0.78s; }
.wordmark span:nth-child(6) { animation-delay: 0.91s; }
.wordmark span:nth-child(7) { animation-delay: 1.04s; }
.wordmark span:nth-child(8) { animation-delay: 1.17s; }

@keyframes footfall {
	from {
		opacity: 0;
		transform: translateY(-0.22em);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Brand voice, so it stays English in every language — as in the app. */
.tagline {
	margin-top: 0.35rem;
	/* The name's other half. It was set at 40 % opacity, which read as a
	   caption on the wordmark rather than the line the app is called after
	   — and in the app it is a beat of the launch, not a footnote. Gold,
	   because the wordmark's own ramp ends there. */
	font-size: clamp(1.2rem, 3.6vw, 1.85rem);
	font-weight: 600;
	color: var(--ramp-10);
	letter-spacing: 0.015em;
	animation: rise 0.7s ease-out 1.42s both;
}

.hero .lede {
	margin: 2.4rem auto 0;
	width: 100%;
	max-width: 30rem;
	font-size: clamp(1.05rem, 2.6vw, 1.28rem);
	color: var(--warm-white);
	animation: rise 0.7s ease-out 1.66s both;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(0.5rem); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- The stride: the pace ramp as a run's own shape ------------------ */
.stride {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	height: 54px;
	margin: 2.6rem auto 0;
	/* A flex item of the centred hero column shrink-wraps, which collapsed
	   every bar to zero width — max-width caps a width, it does not give one. */
	width: 100%;
	max-width: 30rem;
}

.stride i {
	flex: 1;
	border-radius: 2px;
	transform-origin: bottom;
	/* Each window draws itself in, left to right — the session laying itself
	   down rather than a decoration wobbling. The heights never change: what
	   is animated is the arrival, not the data. */
	animation: draw 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes draw {
	from { transform: scaleY(0); opacity: 0; }
	to   { transform: scaleY(1); opacity: 1; }
}

	50%      { transform: scaleY(1); }
}

/* --- Calls to action ------------------------------------------------ */
.actions {
	margin-top: 2.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	justify-content: center;
	animation: rise 0.5s ease-out 1.2s both;
}

.button {
	display: inline-block;
	padding: 0.85rem 1.7rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
	border: 1px solid transparent;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button.primary {
	background: linear-gradient(140deg, var(--ramp-7), var(--ramp-10));
	color: #2a1608;
	box-shadow: 0 12px 34px rgba(233, 150, 30, 0.30);
}

.button.primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(233, 150, 30, 0.42);
}

.button.quiet {
	border-color: var(--rule);
	color: var(--warm-white);
	background: rgba(251, 247, 242, 0.04);
}

.button.quiet:hover {
	border-color: rgba(251, 247, 242, 0.3);
	transform: translateY(-2px);
}

.note {
	margin-top: 1.1rem;
	font-size: 0.9rem;
	color: var(--faint);
	animation: rise 0.5s ease-out 1.3s both;
}

/* --- Sections ------------------------------------------------------- */
section {
	padding: var(--section) 0;
	border-top: 1px solid var(--rule);
	position: relative;
	z-index: 1;
}

.hero {
	border-top: none;
}

h1,
h2,
h3 {
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

h1 {
	font-size: clamp(1.9rem, 5vw, 2.5rem);
	margin-bottom: 0.6rem;
}

h2 {
	font-size: clamp(1.6rem, 4vw, 2.1rem);
	margin-bottom: 1rem;
}

h3 {
	font-size: 1.12rem;
	margin: 1.8rem 0 0.5rem;
	color: var(--run-gold);
}

p {
	max-width: var(--measure);
	margin-bottom: 1rem;
	color: var(--muted);
}

.kicker {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--walk-plum);
	margin-bottom: 0.7rem;
}

strong {
	color: var(--warm-white);
	font-weight: 600;
}

a {
	color: var(--run-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(242, 179, 43, 0.35);
}

a:hover {
	border-bottom-color: var(--run-gold);
}

a.button,
a.email-link {
	border-bottom: none;
}

ul {
	max-width: var(--measure);
	margin: 0 0 1.2rem 1.1rem;
	color: var(--muted);
}

li {
	margin-bottom: 0.45rem;
}

/* --- Features: alternating rows, one measure, generous air ---------- */
.feature {
	display: grid;
	/* minmax(0, 1fr), not 1fr: a plain fr track has an `auto` minimum, so a
	   1074px-wide screenshot refuses to shrink and crushes the text beside
	   it. The zero minimum lets the column size to the layout instead. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
	margin-bottom: 4.5rem;
}

.feature:last-child {
	margin-bottom: 0;
}

.feature:nth-child(even) .feature-text {
	order: 2;
}

.feature h3 {
	margin-top: 0;
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	color: var(--warm-white);
}

.feature p {
	max-width: none;
	margin-bottom: 0;
}

/* --- The privacy claim: the page's strongest argument ---------------- */
.claim {
	background: linear-gradient(150deg, rgba(168, 58, 110, 0.14), rgba(221, 123, 32, 0.10));
	border: 1px solid var(--rule);
	border-radius: 20px;
	padding: 2.4rem;
	margin-top: 1.6rem;
}

.claim p {
	max-width: 40rem;
	font-size: 1.06rem;
}

.claim p:last-child {
	margin-bottom: 0;
}

.claim .big {
	font-size: clamp(1.25rem, 3.2vw, 1.6rem);
	line-height: 1.4;
	color: var(--warm-white);
	font-weight: 600;
}

/* Three flat facts, no decoration needed */
.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.fact {
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: 1.2rem 1.3rem;
	background: rgba(20, 16, 26, 0.4);
}

.fact b {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--run-gold);
	line-height: 1.1;
	margin-bottom: 0.3rem;
}

.fact span {
	font-size: 0.92rem;
	color: var(--muted);
}

/* --- Closing call --------------------------------------------------- */
.closing {
	text-align: center;
	/* Follows the stride directly — no rule across the column, and no gap
	   pretending the two halves are separate sections. */
	border-top: none;
	padding-top: 2.6rem;
	padding-bottom: 2.4rem;
}

.closing p {
	margin-left: auto;
	margin-right: auto;
}

/* The last beat: the stride finishes at 1.2s, then the line that says what
   this is arrives — the sentence the whole entrance was walking towards. */
.closing h2 {
	animation: rise 0.7s ease-out 4.55s both;
}

.closing p {
	animation: rise 0.7s ease-out 4.80s both;
}

/* The last thing said, and the one that sets the app apart — so it lands
   after everything else and keeps its own weight rather than trailing the
   sentence above it. */
.closing .stays {
	margin-top: 1.2rem;
	margin-bottom: 0;
	color: var(--warm-white);
	font-weight: 500;
	animation-delay: 5.05s;
}

.closing .actions {
	animation: none;
}

/* --- The mark at the head of a document page ------------------------- */

/* Not the hero: no animation, no full-width wordmark. A masthead that says
   which site this is and gets you back to it. Language-neutral, so it sits
   outside the two document blocks rather than once in each. */
.masthead {
	/* Bottom padding matches `.doc`'s, so the rule under the mark is spaced
	   like the rule over the footer — one measure for both. */
	padding: 2.4rem 0 1rem;
}

.masthead a {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	border-bottom: none;
}

/* The same `.wordmark` the landing page uses — gradient, letter spacing and
   all — only smaller and standing still. Sharing the rule is the point: two
   copies of a gradient are two things to keep in step. */
.masthead .wordmark {
	justify-content: flex-start;
	font-size: clamp(2.1rem, 6vw, 3rem);
}

.masthead .wordmark span {
	animation: none;
}

/* --- Long-form legal pages ------------------------------------------ */
.doc {
	max-width: 46rem;
	/* The footer's own 1.4rem, so both rules clear their content equally. */
	padding-top: 1.4rem;
	padding-bottom: 1rem;
}

.doc p,
.doc ul {
	max-width: none;
}

.doc .updated {
	font-size: 0.9rem;
	color: var(--faint);
	margin-bottom: 2rem;
}

.doc .claim {
	background: var(--ink-soft);
	padding: 1.5rem 1.6rem;
	border-radius: 14px;
	border-left: 3px solid var(--run-gold);
}

.doc table {
	width: 100%;
	border-collapse: collapse;
	margin: 0.4rem 0 1.4rem;
	font-size: 0.95rem;
}

.doc th,
.doc td {
	text-align: left;
	vertical-align: top;
	padding: 0.6rem 0.9rem 0.6rem 0;
	border-bottom: 1px solid var(--rule);
	color: var(--muted);
}

.doc th {
	color: var(--warm-white);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Footer --------------------------------------------------------- */
footer {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--rule);
	padding: 1.4rem 0 2rem;
	font-size: 0.92rem;
	color: var(--faint);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin-bottom: 1.6rem;
}

.footer-links a {
	border-bottom: none;
	color: var(--muted);
}

.footer-links a:hover {
	color: var(--run-gold);
}

.language-chooser {
	display: flex;
	gap: 0.7rem;
}

/* Flags and the Impressum on one line — the only two things the finished
   page still needs at its foot. */
.footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.3rem;
}

.footer-row .legal {
	font-size: 0.92rem;
	color: var(--faint);
	border-bottom: none;
}

.footer-row .legal:hover {
	color: var(--muted);
}

.language-chooser a {
	border-bottom: none;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0.4;
	transition: opacity 0.15s ease;
}

.language-chooser a:hover {
	opacity: 0.8;
}

.language-en .highlight-language-en,
.language-de .highlight-language-de {
	opacity: 1;
}

/* --- Narrow ---------------------------------------------------------- */
@media (max-width: 52rem) {
	:root {
		--section: 3.8rem;
	}

	.feature {
		grid-template-columns: 1fr;
		gap: 1.6rem;
		margin-bottom: 3.2rem;
	}

	/* On one column the words always come first — an abstract picture
	   above an unread heading explains nothing. */
	.feature:nth-child(even) .feature-text {
		order: 0;
	}

	.claim {
		padding: 1.6rem;
	}
}

@media (max-width: 30rem) {
	.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.button {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	/* Without the animation the letters must still be visible. */
	.wordmark span,
	.tagline,
	.hero .lede,
	.stride,
	.stride i,
	.curve,
	.curve .frame,
	.curve .ink,
	.zone,
	.closing h2,
	.closing p {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}

/* --- Real screenshots, not decoration ------------------------------- */
.shot {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--rule);
	background: #000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.shot img {
	display: block;
	width: 100%;
	height: auto;
}

.shot figcaption {
	padding: 0.7rem 1rem;
	font-size: 0.82rem;
	color: var(--faint);
	border-top: 1px solid var(--rule);
	background: var(--ink-soft);
}

/* A run of real figures pulled from the shot beside it. */
.readout {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: 1.4rem;
}

.readout div {
	min-width: 5rem;
}

.readout b {
	display: block;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--run-gold);
	line-height: 1.1;
}

.readout span {
	font-size: 0.85rem;
	color: var(--faint);
}

/* --- The depth: everything else it actually works out --------------- */
.specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem 2.2rem;
	margin-top: 2.4rem;
}

.specs div {
	border-top: 1px solid var(--rule);
	padding-top: 0.9rem;
}

.specs b {
	display: block;
	font-weight: 600;
	color: var(--warm-white);
	margin-bottom: 0.25rem;
}

.specs span {
	font-size: 0.94rem;
	color: var(--muted);
}

/* The printed sheet and the report crops are light by design — they are
   paper. Give them a rim so they sit on the dark page as paper does. */
.shot.light {
	background: #fff;
	border-color: rgba(251, 247, 242, 0.22);
}

/* --- Heart-rate zones, the same session's own figures ---------------- */
.zones {
	width: 100%;
	max-width: 30rem;
	margin: 1.9rem auto 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	text-align: left;
}

.zone {
	display: grid;
	grid-template-columns: 1.7rem 3.6rem minmax(0, 1fr) 2.4rem 2.4rem;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.78rem;
	line-height: 1.2;
	animation: rise 0.6s ease-out both;
}

.zone b {
	font-weight: 700;
	color: var(--muted);
}

.zone .span,
.zone .pc {
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.zone .time {
	color: var(--warm-white);
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.zone .pc {
	text-align: right;
}

/* The bar is the share of time, scaled against the busiest zone so the
   shape of the session is readable rather than everything hugging the left. */
.zone .track {
	display: block;
	height: 9px;
	border-radius: 999px;
	background: rgba(251, 247, 242, 0.07);
	overflow: hidden;
}

.zone .track i {
	display: block;
	height: 100%;
	border-radius: 999px;
}

/* The zone distribution: time at each beat, banded at the same bounds the
   rows beneath quote. */
.curve {
	display: block;
	width: 100%;
	max-width: 30rem;
	height: 92px;
	margin: 1.7rem auto 0.2rem;
	overflow: visible;
}

/* The axis arrives first, then the session is drawn across it — the same
   left-to-right reading the pace bars above already set up. A wipe rather
   than a fade, because a distribution is accumulated, not revealed. */
.curve .frame {
	animation: rise 0.6s ease-out 2.60s both;
}

.curve .ink {
	animation: sweep 1.25s cubic-bezier(0.33, 1, 0.68, 1) 2.75s both;
}

@keyframes sweep {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}