/* Timeslide landing page. Tokens follow the app (src/styles/global.css). */
:root {
  color-scheme: light;
  /* Headlines: Figtree. */
  --head-font: 'Figtree', 'Inter', system-ui, sans-serif;
  --h1w: 700;
  --h2w: 700;
  --h3w: 700;
  --head-ls: -0.03em;
  --head-scale: 1.06;
  --head-lh: 1.1;
  --ink: #1e1e1e;
  --text: #3a3a3c;
  --muted: #7a7a80;
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --surface: #ffffff;
  --line: #e7e7ea;
  --red: #ff3833;
  --red-hover: #e62f2a;
  --cyan: #35d8d0;
  --orange: #ff7950;
  --yellow: #ffba0d;
  --on-event: #fff;
  --breaker-bg: #35cfc7;
  --breaker-ink: #0d2f2d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.05), 0 30px 80px rgba(0, 0, 0, 0.12);
  --demo-bg: #f0f0f0;
  --demo-step1: #fafafa;
  --demo-step2: #f5f5f5;
  --demo-open: #ffffff;
  --radius: 18px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  /* Friendly dark, as in the app ("satt"): deep slate with a faint blue tint; the demo screens use the app's own colours. */
  --ink: #eef0f4;
  --text: #ccd0d8;
  --muted: #8f929b;
  --bg: #18191d;
  --bg-soft: #1f2025;
  --surface: #25272c;
  --line: #323439;
  --red: #f6574f;
  --red-hover: #f96d66;
  --cyan: #5cd4cd;
  --orange: #f88c68;
  --yellow: #f4c044;
  --on-event: #1c1e23;
  --breaker-bg: #1e4342;
  --breaker-ink: #d8f6f3;
  --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.44);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.52);
  --demo-bg: #1c1e23;
  --demo-step1: #26282d;
  --demo-step2: #212328;
  --demo-open: #2c2e34;
  --statusbar: #23252b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { color: var(--ink); font-family: var(--head-font, inherit); letter-spacing: var(--head-ls, -0.025em); line-height: var(--head-lh, 1.1); margin: 0; }
h1 { font-size: calc(clamp(40px, 6.4vw, 76px) * var(--head-scale, 1)); font-weight: var(--h1w, 800); }
h2 { font-size: calc(clamp(30px, 4vw, 46px) * var(--head-scale, 1)); font-weight: var(--h2w, 750); }
h3 { font-size: calc(19px * var(--head-scale, 1)); font-weight: var(--h3w, 650); letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
section { padding: 112px 0; }
.eyebrow { color: var(--red); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 14px;
  font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: 0;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* The logo file as it is: icon, wordmark and its long shadow (the lower part of the file). */
.brand-logo { height: 54px; width: auto; position: relative; top: 12px; }
/* Dark mode: the same file with only the wordmark colour lightened. */
[data-theme='light'] .logo-dark, [data-theme='dark'] .logo-light { display: none; }
.nav-links { display: flex; gap: 26px; margin-right: auto; }
.nav-links a { text-decoration: none; font-size: 15px; color: var(--muted); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.seg { display: flex; background: var(--bg-soft); border-radius: 10px; padding: 3px; box-shadow: inset 0 0 0 1px var(--line); }
.seg button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 9px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 0; background: var(--bg-soft); color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn:hover { color: var(--red); }
[data-theme='light'] .i-moon, [data-theme='dark'] .i-sun { display: none; }

/* Hero */
.hero { padding: 96px 0 72px; }
.hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* The logo file, unchanged, as the eye-catcher. The file has empty room below the shadow, so only its upper part is shown. */
.hero-logo { width: min(400px, 78vw); aspect-ratio: 729.5 / 305; overflow: hidden; margin-bottom: 0;
  animation: icon-in 0.9s cubic-bezier(0.34, 1.5, 0.64, 1) both; }
.hero-logo img { display: block; width: 100%; height: auto; }
@keyframes icon-in { from { opacity: 0; transform: translateY(14px) scale(0.9); } }
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--red); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 640px; margin-top: 22px; text-wrap: balance; }
.hero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.fine { font-size: 14px; color: var(--muted); margin-top: 16px; }

/* Interactive month */
.demo-try { margin: 64px 0 14px; text-align: center; font-family: var(--head-font, inherit); font-size: calc(22px * var(--head-scale, 1)); font-weight: var(--h3w, 600); letter-spacing: var(--head-ls, 0); color: var(--ink); }
.demo {
  margin-top: 0; border-radius: 22px; overflow: hidden;
  background: var(--demo-bg); box-shadow: var(--shadow-lg);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.demo-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.demo-month { font-weight: 700; color: var(--ink); font-size: 15px; min-width: 9.5em; text-align: center; }
.demo-nav { display: flex; align-items: center; gap: 2px; }
.demo-arrow { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.demo-arrow:hover { background: var(--bg-soft); color: var(--ink); }
.demo-month b { color: var(--red); font-weight: 700; }
.demo-hint { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.demo-hint svg { flex: none; }
.demo-days { display: flex; height: 400px; position: relative; }
.day {
  position: relative; flex: 1 1 0; min-width: 0;
  transition: flex-grow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
  border-right: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
/* The "…" column where the month is cut off on narrow screens. */
.day.more { flex: 0 0 26px; border-right: 0; }
.day.more .day-head { color: var(--muted); font-size: 16px; }
.day.step2 { background: var(--demo-step2); }
.day.step1 { background: var(--demo-step1); }
.day.open { background: var(--demo-open); }
.day-head { height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; color: var(--ink); line-height: 1.25; }
.day-head small { color: var(--muted); font-size: 11px; }
.day.weekend .day-head span { font-weight: 700; }
.day.today .day-head span { background: var(--red); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 700; }
/* Like the app's list layout: events stacked from the top with a steady gap, bar length = duration. */
.evs { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; transition: gap 0.32s; }
.day.has-pill .evs { padding-top: 34px; }
.day.open.has-pill .evs { padding-top: 46px; }
.ev { position: relative; height: var(--h); flex: none; transition: min-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); min-height: 0; }
.ev i { position: absolute; top: 0; left: 50%; width: 4px; height: var(--h); margin-left: -2px; border-radius: 3px; background: var(--c); transition: left 0.32s, margin 0.32s; }
.ev.dot { --h: 8px; }
.ev.dot i { width: 8px; margin-left: -4px; border-radius: 50%; }
.ev-label {
  position: absolute; left: 30px; top: -3px; white-space: nowrap; font-size: 13px; line-height: 1.3; color: var(--ink);
  opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.day:not(.open) .ev-label { visibility: hidden; transition: opacity 0.1s, visibility 0s 0.1s; }
.ev-label b { display: block; color: var(--c); font-weight: 650; font-size: 12px; }
.day.open .evs { gap: 10px; }
.day.open .ev { min-height: 38px; }
.day.open .ev i { left: 18px; }
.day.open .ev-label { opacity: 1; transform: none; transition-delay: 0.12s; }
.pill {
  position: absolute; top: 60px; height: 22px; border-radius: 11px; background: var(--c); color: var(--on-event);
  font-size: 12px; font-weight: 650; line-height: 22px; padding: 0 10px; white-space: nowrap; overflow: hidden; z-index: 2;
}
.pill-t { display: block; overflow: hidden; white-space: nowrap; }
/* A one-day event in the open day spans the day, with the same margin as the events below. */
.day.open .pill.solo { left: 14px !important; right: 14px !important; }

/* Logos */
.logos { padding: 40px 0 24px; text-align: center; }
.logos p { font-size: 14px; color: var(--muted); font-weight: 500; }
.logos ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.logos li { display: flex; align-items: center; gap: 10px; font-family: var(--head-font, inherit); font-size: calc(20px * var(--head-scale, 1)); font-weight: 600; color: var(--muted); letter-spacing: -0.02em; }
/* Google and Microsoft in their colours, Apple in the text colour as Apple shows it; sizes balanced so the apple and the squares look as big as the G. */
.logos svg { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.logos .logo-apple { width: 27px; height: 27px; margin-top: -3px; }
.logos .logo-ms { width: 19px; height: 19px; }
.logos .logo-ics { fill: none; color: var(--ink); }

/* Promises */
.promises h2, .features h2, .devices h2, .faq h2 { text-align: center; max-width: 20ch; margin: 0 auto 56px; }
/* Laid out like the tour rows above it: eyebrow, the same heading size, the same spacing. */
.promises { text-align: center; }
.promises h2 { font-size: calc(clamp(28px, 3.2vw, 40px) * var(--head-scale, 1)); margin-bottom: 48px; }
.promises .card { text-align: left; background: none; box-shadow: none; padding: 0; }
/* minmax(0, 1fr): the three columns stay exactly equal, whatever their content would like. */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { background: var(--bg-soft); border-radius: var(--radius); padding: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.card h3 { margin: 24px 0 8px; }
.card p { color: var(--muted); font-size: 16px; }
.card-ill { position: relative; height: 140px; border-radius: 12px; background: var(--demo-bg); display: flex; align-items: flex-start; justify-content: center; gap: 14px; padding: 22px; overflow: hidden; }
/* The border is drawn on top, so columns and bars running to the edge don't cover it. */
.card-ill::after { content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; }
/* Small strokes as in the app: stacked from the top, length = duration. */
.mini { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mini i { display: block; width: 4px; border-radius: 2px; height: var(--h); background: var(--c); flex: none; }
.mini i.dot { width: 6px; height: 6px; border-radius: 50%; }

/* One glance: a busy stretch, quiet days either side. */
/* No day is open, so the days are white, as in the app at rest. */
.ill-glance { gap: 0; padding: 0 22px; justify-content: space-between; align-items: stretch; background: var(--demo-open); }
.ill-glance .mini { flex: 1; padding-top: 22px; }
/* The busy week stands out like a hover: a rounded panel inset from the edges, a faint tint, a hairline edge and a soft shadow. */
.ill-glance .busy { flex: 7; display: flex; padding: 0 8px; margin: 10px 2px; border-radius: 14px; position: relative; z-index: 1;
  background: color-mix(in srgb, var(--ink) 4%, var(--demo-open)); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, 0.08); }
.ill-glance .busy .mini { padding-top: 12px; }

/* One click: the fisheye – the day under the pointer opens, its neighbours a little. */
.ill-click { padding: 0; gap: 0; align-items: stretch; background: var(--demo-bg); }
.ill-click .col { flex: 1; padding-top: 16px; border-right: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.ill-click .col.s2 { flex: 1.5; background: var(--demo-step2); }
.ill-click .col.s1 { flex: 2.2; background: var(--demo-step1); }
.ill-click .open { flex: 11; background: var(--demo-open); padding: 14px 12px 0; display: flex; flex-direction: column; gap: 9px; position: relative; box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, 0.08); z-index: 1; }
.ill-click .open div { display: flex; gap: 8px; font-size: 12px; line-height: 1.25; color: var(--ink); white-space: nowrap; min-width: 0; }
.ill-click .open div i { flex: none; width: 3px; border-radius: 2px; background: var(--c); height: var(--h); min-height: 28px; }
.ill-click .open div i.dot { width: 6px; height: 6px; min-height: 0; border-radius: 50%; margin-top: 4px; }
.ill-click .open span { overflow: hidden; text-overflow: ellipsis; }
.ill-click .open b { display: block; color: var(--c); font-weight: 650; font-size: 11px; }
.ill-click .cursor { position: absolute; left: 62%; top: 62%; width: 16px; height: 16px; color: var(--ink); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }

/* One swipe: the month tab slides like the app's, and the month underneath slides with it. */
.ill-swipe { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 16px 14px 0; }
/* The month bar sits on a lighter strip, like the app's toolbar above the days. */
.ill-swipe { position: relative; }
.ill-swipe::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 56px; background: color-mix(in srgb, var(--demo-bg) 45%, var(--surface)); }
.ill-swipe .months { position: relative; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--muted); }
.ill-swipe .months span { position: relative; z-index: 1; width: 16.66%; text-align: center; line-height: 26px; transition: color 0.35s; }
.ill-swipe .months span.on { color: var(--bg); }
.ill-swipe .tab { position: absolute; top: 0; left: 0; width: 16.66%; height: 26px; border-radius: 8px; background: var(--ink); transition: transform 0.55s cubic-bezier(0.3, 0.8, 0.25, 1); }
/* No day is open here, so the days are white, as in the app at rest (grey only while its lens is open). */
.ill-swipe .view { overflow: hidden; flex: 1; margin: 0 -14px; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); background: var(--demo-open); }
.ill-swipe .track { display: flex; height: 100%; transition: transform 0.55s cubic-bezier(0.3, 0.8, 0.25, 1); }
.ill-swipe .page { flex: none; width: 100%; display: flex; justify-content: space-between; padding: 0 16px; }
.ill-swipe .page .mini { flex: 1; gap: 4px; padding-top: 12px; }
/* Fine lines between the days, as in the app (only when swiping through months). */
.ill-swipe .page .mini + .mini { border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }

/* Feature rows */
.feature.alt { background: var(--bg-soft); }
.feature-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: center; }
.feature-grid.reverse { grid-template-columns: 1fr 1fr; }
.feature-grid.reverse .feature-copy { order: 2; }
.feature-copy h2 { margin-bottom: 18px; }
.feature-copy > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }

/* Quick entry */
.quick { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; min-height: 210px; }
.quick-field { font-size: 22px; font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--line); padding-bottom: 14px; min-height: 48px; display: flex; align-items: center; }
.caret { display: inline-block; width: 2px; height: 26px; background: var(--red); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.quick-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; min-height: 40px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-soft); border-radius: 10px; padding: 8px 12px; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); animation: pop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
.chip small { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } }

/* Breaker */
.breaker { background: var(--breaker-bg); color: var(--breaker-ink); }
.breaker h2 { color: var(--breaker-ink); margin-bottom: 48px; }
.breaker h2 em { font-style: normal; color: #fff; }
/* In dark mode the heading is already near white, so the highlight is the bright turquoise. */
:root[data-theme='dark'] .breaker h2 em { color: var(--cyan); }
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.who h3 { color: var(--breaker-ink); margin-bottom: 8px; }
/* Audience icons: frosted glass tiles with fine line glyphs entirely in a deeper shade of the logo's turquoise. */
.who-icon { box-sizing: border-box; width: 72px; height: 72px; padding: 17px; margin: 0 0 22px; border-radius: 16px;
  fill: none; stroke: #2E9396; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  /* A raised light tile like the app icon, the same in both modes: a very gentle gradient from the top, a fine edge along the bottom, a soft drop shadow. */
  background: linear-gradient(180deg, #ffffff 0%, #f3f8f8 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 rgba(0, 70, 72, 0.18), 0 4px 8px -4px rgba(0, 60, 62, 0.14), 0 12px 20px -14px rgba(0, 60, 62, 0.18); }
.who-icon .acc { stroke: inherit; }
:root[data-theme='dark'] .who-icon { background: linear-gradient(180deg, #f2f7f6 0%, #e4eeed 100%); box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 rgba(0, 0, 0, 0.3), 0 4px 8px -4px rgba(0, 0, 0, 0.3), 0 12px 20px -14px rgba(0, 0, 0, 0.4); }
.who p { opacity: 0.82; font-size: 16px; }

/* Feature list */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 28px; }
.feat svg { width: 26px; height: 26px; color: var(--red); margin-bottom: 14px; }
.feat h3 { font-size: calc(17px * var(--head-scale, 1)); margin-bottom: 6px; }
.feat p { color: var(--muted); font-size: 15px; }

/* Devices */
.devices { background: var(--bg-soft); overflow: hidden; }
.devices h2 { margin-bottom: 16px; max-width: 24ch; }
.center-lead { text-align: center; color: var(--muted); font-size: 18px; max-width: 46ch; margin: 0 auto 56px; }
.devices .center-lead { max-width: 640px; text-wrap: balance; }
.device-row { position: relative; max-width: 1100px; margin: 0 auto; aspect-ratio: 2000 / 940; container-type: inline-size; }
.device { position: absolute; margin: 0; }
.device img { display: block; width: 100%; height: auto; }
/* Laid out like a classic device mock-up, everything sized to the row's width: the MacBook on the left,
   the iPad overlapping it on the right, the iPhone small in front between the two. Thin, even bezels,
   no notch and no island. */
.device.mac { left: 5.5%; top: 4cqw; width: 57%; }
.mac-screen { background: #0c0c0d; padding: 0.9cqw; border-radius: 2cqw 2cqw 0.6cqw 0.6cqw; box-shadow: inset 0 0 0 1px #2a2a2c; }
.mac-screen img { border-radius: 1.1cqw 1.1cqw 0 0; }
.mac-base { position: relative; width: 117%; margin-left: -8.5%; height: 0; padding-bottom: 3%; border-radius: 2px 2px 1.4cqw 1.4cqw / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #e7e8ea 0%, #d3d5d8 45%, #a9acb1 100%); box-shadow: 0 2cqw 3cqw -2cqw rgba(0, 0, 0, 0.45); }
.mac-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; margin-left: -7.5%; border-radius: 0 0 0.8cqw 0.8cqw; background: linear-gradient(180deg, #b9bcc0, #d3d5d8); }
[data-theme='dark'] .mac-base { background: linear-gradient(180deg, #5c5e63 0%, #45474b 45%, #2a2b2e 100%); }
[data-theme='dark'] .mac-base::before { background: linear-gradient(180deg, #333538, #45474b); }
.device.ipad, .device.phone { background: #0c0c0d; box-shadow: inset 0 0 0 1px #2a2a2c, var(--shadow-lg); }
.device.ipad { right: 7%; bottom: 1.9cqw; width: 42%; padding: 0.75cqw; border-radius: 1.6cqw; container-type: inline-size; }
/* Corners in Apple's proportions (iPad about 4 %, iPhone about 17 % of the width); inner corners = outer
   corners minus the bezel, so screen and frame run in parallel. The inner values are in the device's own
   units (cqw of its content box): (outer − bezel) / (width − 2 × bezel). */
.device.ipad img { border-radius: 0 0 2.1cqw 2.1cqw; }
.device.phone { left: 42.5%; bottom: 0; width: 13%; padding: 0.6cqw; border-radius: 2.4cqw; z-index: 2; }
.device.phone img { border-radius: 0; aspect-ratio: 393 / 720; object-fit: cover; object-position: top; }
/* Status bars of phone and iPad: time, signal, wifi and battery, on the app's grey like on the real devices. Sized to the device's width. */
.device.phone { container-type: inline-size; }
.statusbar { display: flex; align-items: center; justify-content: space-between; height: 12cqw; padding: 0 9cqw 0 11cqw; color: #111; background: #f6f6f6; }
[data-theme='dark'] .statusbar { color: #fff; background: var(--statusbar); }
.sb-time { font-size: 4cqw; font-weight: 600; letter-spacing: -0.01em; }
.sb-icons { display: flex; align-items: center; gap: 1.5cqw; }
.sb-icons svg { height: 3.3cqw; width: auto; fill: currentColor; }
.sb-icons svg:last-child { height: 3.7cqw; }
/* The phone's screen is rounded as one piece: its status bar is lower than the corner radius, so rounding
   the bar itself would cut the curve short. */
.phone-screen { overflow: hidden; border-radius: 15.25cqw; }
.ipad .statusbar { height: 3cqw; padding: 0 2.4cqw 0 2.6cqw; border-radius: 2.1cqw 2.1cqw 0 0; }
.ipad .sb-time { font-size: 1.25cqw; }
.ipad .sb-time span { margin-left: 0.4em; font-weight: 500; }
.ipad .sb-icons { gap: 0.6cqw; }
.ipad .sb-icons svg { height: 1.05cqw; }
.ipad .sb-icons svg:last-child { height: 1.2cqw; }

/* Pricing */
.price-card { max-width: 640px; margin: 0 auto; text-align: center; background: var(--surface); border-radius: 26px; padding: 56px 40px; box-shadow: var(--shadow-lg); }
.price-card h2 { margin-bottom: 14px; }
.price { color: var(--red); }
.price-card > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.price-card ul { list-style: none; padding: 0; margin: 32px auto 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; text-align: left; max-width: 460px; }
.price-card li { display: flex; gap: 10px; font-size: 16px; color: var(--ink); }
.price-card li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* In dark mode the turquoise is brighter, so the tick is dark on it. */
:root[data-theme='dark'] .price-card li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121214' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }

/* FAQ */
.faq { padding-top: 40px; }
/* The question itself carries the padding, so the whole row (not just the line of text) is the hover and click area. */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--head-font, inherit); font-weight: 600; font-size: 18px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--muted); transition: transform 0.25s, color 0.2s; }
/* Open, the plus turns into a cross. Touched by the pointer, even briefly, it spins one full turn
   (main.js adds .spin and takes it off when the spin is over). */
.faq summary { --turn: 0deg; }
.faq details[open] summary { --turn: 45deg; }
.faq summary::after { transform: rotate(var(--turn)); }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--red); }
.faq summary:hover::after { color: var(--muted); }
.faq summary.spin::after { animation: faq-spin 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes faq-spin { from { transform: rotate(var(--turn)); } to { transform: rotate(calc(var(--turn) + 360deg)); } }
.faq details p { margin: -10px 0 22px; color: var(--muted); }

/* Final */
/* Film */

/* Live demo */

/* Final: “slide” in italics. Once it scrolls into view the word spreads wider, a brush stroke paints
   underneath and stretches with it, and only then the question mark fades in. */
.slide { position: relative; display: inline-block; font-style: italic; color: var(--red); padding: 0 0.06em; white-space: nowrap; }
.slide-word { letter-spacing: 0; transition: letter-spacing 0.7s cubic-bezier(0.3, 0, 0.15, 1) 0.1s; }
.slide-word span:last-child { letter-spacing: 0; }
.final.in .slide-word { letter-spacing: 0.1em; }
.brush { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.32em; overflow: visible; }
.brush path { fill: none; stroke: var(--red); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.brush path:first-child { stroke-width: 5; opacity: 0.85; }
.brush path:last-child { stroke-width: 2.5; opacity: 0.45; }
.final.in .brush path { animation: paint 0.6s 0.15s ease-out forwards; }
.final.in .brush path:last-child { animation-delay: 0.35s; }
@keyframes paint { to { stroke-dashoffset: 0; } }
.q { display: inline-block; margin-left: 0.14em; opacity: 0; transform: translateX(-0.2em); transition: opacity 0.4s ease 0.8s, transform 0.4s ease 0.8s; }
.final.in .q { opacity: 1; transform: none; }
/* Tour: the app rebuilt in HTML (.ma), built at a fixed size and scaled down to its stage. */
.tour { overflow: hidden; padding-top: 40px; }
.tour-row { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 72px; align-items: center; padding: 64px 0; }
.tour-row.flip { grid-template-columns: 1.28fr 0.72fr; }
.tour-row.flip .tour-copy { order: 2; }
.tour-copy h2 { font-size: calc(clamp(28px, 3.2vw, 40px) * var(--head-scale, 1)); margin-bottom: 16px; }
.tour-copy > p:not(.eyebrow) { color: var(--muted); font-size: 18px; }
.tour-stage { position: relative; aspect-ratio: 1200 / 760; perspective: 2400px; perspective-origin: 50% 30%; }
.ma-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s; }
.ma-tilt.t-small { transform: scale(0.55); opacity: 0; }
.ma-tilt.t-angle { transform: rotateX(6deg) rotateY(-22deg) scale(0.9); }
.tour-row.flip .ma-tilt.t-angle { transform: rotateX(16deg) rotateY(12deg) scale(0.9); }

.ma {
  /* Zoomed rather than scaled down with a transform: the text is then drawn at its small size and stays
     sharp, instead of being drawn large and shrunk like a picture. */
  position: absolute; left: 0; top: 0; zoom: var(--k, 0.5); transform-origin: 0 0; transform-style: preserve-3d;
  display: flex; flex-direction: column; background: var(--demo-bg); color: var(--ink); font-size: 14px; line-height: 1.3;
  border-radius: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none;
}
.ma.clip { overflow: hidden; }
/* Mock-ups shown in 3D (lifted days, turned screens) are laid out at twice the size and shrunk back, so
   the parts that come closer still have resolution to spare and stay sharp. */
.ma.hi { zoom: calc(var(--k, 0.5) * 2); transform: scale3d(0.5, 0.5, 0.5); }
.ma svg { width: 20px; height: 20px; flex: none; }
.ma-top { height: 60px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 18px 18px 0 0; background: color-mix(in srgb, var(--demo-bg) 55%, var(--surface)); }
.ma-btn { height: 34px; padding: 0 15px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--line); }
.ma-ico { width: 34px; padding: 0; }
.ma-seg { display: flex; padding: 3px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ma-seg i { font-style: normal; padding: 5px 14px; border-radius: 8px; color: var(--muted); transition: background 0.25s, color 0.25s, box-shadow 0.25s; display: grid; place-items: center; }
.ma-seg i.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.ma-layout i { padding: 4px 10px; }
.ma-year { margin: 0 auto; display: flex; align-items: center; gap: 22px; color: var(--ink); }
.ma-year b { color: var(--red); font-size: 28px; font-weight: 750; letter-spacing: -0.02em; }
.ma-months { height: 46px; flex: none; display: flex; align-items: center; padding: 0 16px; gap: 4px; color: var(--ink); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--demo-bg) 55%, var(--surface)); }
.ma-months span { flex: 1; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: 0.03em; padding: 6px 0; border-radius: 9px; }
.ma-months span.on { background: var(--red); color: #fff; font-weight: 650; }
.ma-body { position: relative; flex: 1; min-height: 0; transform-style: preserve-3d; }
/* "Der ganze Monat": a screenshot of the app, rounded like the rebuilt screens (18 of 1200 px). */
.month-shot { position: absolute; inset: 0; border-radius: calc(18 / 1200 * 100%) / calc(18 / 760 * 100%); overflow: hidden; background: var(--demo-bg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.month-shot img { display: block; width: 100%; height: 100%; }
/* Flat, without 3D and without scaling it in: a scaled layer is drawn at its small size and only blown
   up afterwards, so the screenshot would stay blurry. It glides up and fades in instead. */
#tour-month { perspective: none; }
#tour-month .ma-tilt { transform-style: flat; transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s; }
#tour-month .ma-tilt.t-small { transform: translateY(48px); opacity: 0; }
.ma-view { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity 0.45s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.ma-view.on { opacity: 1; transform: none; }

/* List layout inside the app: the strokes draw in column by column; in 3D the lens rises out of the month. */
.ma-days { display: flex; transform-style: preserve-3d; }
/* Lens moves glide; the steps pop up with a little overshoot, but sink without one –
   overshooting below the month would hide them behind it for a moment. */
.ma .day { transition: flex-grow 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s, border-radius 0.4s, opacity 0.45s; }
.lift .ma .day { transition: flex-grow 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s, transform 0.85s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.85s, border-radius 0.4s, opacity 0.45s; }
.ma .ev i { transform-origin: top; transition: left 0.32s, margin 0.32s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d) * 28ms), opacity 0.3s calc(var(--d) * 28ms); }
.ma .pill { transform-origin: left; transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d) * 28ms), opacity 0.3s calc(var(--d) * 28ms); }
.ma.empty .ev i, .ma.empty .pill { transform: scale(1, 0); opacity: 0; transition-delay: 0s; transition-duration: 0.4s; }
.ma.empty .pill { transform: scale(0, 1); }
.ma.empty .ev-label { opacity: 0; }

/* One slide: the lens rises out of the month as steps – the open day highest, its neighbours lower
   and pushed outwards (--shift), so every step shows next to the big open card. */
/* The raised cards: a light top edge, a thin darker underside as thickness, light from above. */
.ma { --card-hi: color-mix(in srgb, #fff 80%, transparent); --card-edge: color-mix(in srgb, var(--demo-open) 82%, #000); }
:root[data-theme='dark'] .ma { --card-hi: color-mix(in srgb, #fff 10%, transparent); --card-edge: color-mix(in srgb, var(--demo-open) 70%, #000); }
.lift .ma .day.open, .lift .ma .day.step1, .lift .ma .day.step2 {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface) 70%, transparent), transparent 22%, color-mix(in srgb, var(--ink) 3%, transparent));
}
.lift .ma .day.open { transform: translateY(-10px) translateZ(120px) scale(1.42); box-shadow: inset 0 1px 0 var(--card-hi), 0 3px 0 var(--card-edge), 0 -30px 60px -18px rgba(20, 20, 30, 0.12), 0 60px 110px -36px rgba(20, 20, 30, 0.26); border-radius: 12px; }
.lift .ma .day.step1 { transform: translateX(var(--shift, 0px)) translateY(-6px) translateZ(66px) scale(1.2); box-shadow: inset 0 1px 0 var(--card-hi), 0 2px 0 var(--card-edge), 0 -20px 44px -16px rgba(20, 20, 30, 0.09), 0 40px 80px -30px rgba(20, 20, 30, 0.2); border-radius: 10px; }
.lift .ma .day.step2 { transform: translateX(var(--shift, 0px)) translateY(-2px) translateZ(28px) scale(1.08); box-shadow: inset 0 1px 0 var(--card-hi), 0 1.5px 0 var(--card-edge), 0 -12px 28px -12px rgba(20, 20, 30, 0.07), 0 26px 50px -22px rgba(20, 20, 30, 0.15); border-radius: 8px; }
/* While gliding, the script moves the lens frame by frame. */
/* The flat month needs no 3D, and without it the title day simply stacks above its neighbours. */
.ma-tilt:has(> .ma.flat), .ma.flat, .ma.flat .ma-body, .ma.flat .ma-days { transform-style: flat; }
/* Every day stacks as one piece, so a neighbour's segment can't rise above a title running into it. */
.ma .day { z-index: 0; }
.ma .day.pill-lead { z-index: 1; }
.lift .ma .day.pill-lead:not(.open):not(.step1):not(.step2) { transform: translateZ(1px); }
.sliding .ma .day { transition: background 0.2s, box-shadow 0.3s, border-radius 0.3s; }

/* Three views, full width: side by side, the outer two turned slightly in, the list flat in the middle. */
.tour-row.wide { grid-template-columns: 1fr; gap: 48px; }
.tour-row.wide .tour-copy { text-align: center; max-width: 640px; margin: 0 auto; }
.tour-row.wide .tour-stage { aspect-ratio: 1200 / 330; perspective: 3000px; }
/* Each screen's place is a shift (--tx), a turn (--ry) and a size (--s); hover and the stack only change those. */
.v3 { --tx: 0%; --ry: 0deg; --s: 1; position: absolute; bottom: 0; margin: 0; width: 35%; aspect-ratio: 980 / 660; transform: translateX(var(--tx)) rotateY(var(--ry)) scale(var(--s)); transition: transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1); transform-style: preserve-3d; }
.v3-tiles { left: 0; --ry: 16deg; }
.v3-zoom { right: 0; --ry: -16deg; }
/* The list is the hero: a little bigger, facing the viewer flat, without any 3D: drawn as plain 2D it stays
   as sharp as the page text. It sits in front by stacking order (the stage doesn't sort its screens in 3D).
   All three stand on the same bottom line. */
.v3-list { left: 30%; width: 40%; z-index: 2; transform: translateX(var(--tx)) scale(var(--s)); transform-style: flat; }
/* Before they come into view: one stack in the middle, the outer two a step behind. */
.stacked .v3-tiles { --tx: 90%; --s: 0.92; }
.stacked .v3-zoom { --tx: -90%; --s: 0.92; }
/* A screenshot of the app, rounded like the other screens of the tour (18 of 980 px), sized to the screen. */
.v3 { container-type: inline-size; }
.v3-shot { position: absolute; inset: 0; border-radius: calc(18 / 980 * 100cqw); overflow: hidden; }
.v3-shot img { display: block; width: 100%; height: 100%; }
.v3-label { position: absolute; top: 100%; left: 0; right: 0; margin: 22px 0 0; text-align: center; font-size: 16px; font-weight: 500; color: var(--ink); }
.tour-row.wide .tour-stage { margin: 16px 0 40px; }
.v3 .v3-shot { box-shadow: 0 30px 60px -20px rgba(30, 30, 40, 0.3), 0 0 0 1px var(--line); }
/* Kompakt or Zeitachse: one month, the switch above it cross-fades the two screenshots (main.js plays it). */
#tour-times { aspect-ratio: auto; perspective: none; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.times-switch { display: flex; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.times-switch button { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.times-switch button:hover:not([aria-checked='true']) { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.times-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.times-switch button[aria-checked='true'] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.times-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.times-shot { position: relative; width: 100%; aspect-ratio: 980 / 660; border-radius: 10px; overflow: hidden; background: var(--demo-bg); box-shadow: 0 30px 60px -20px rgba(30, 30, 40, 0.3), 0 0 0 1px var(--line); }
.times-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transition: opacity 0.7s; }
#tour-times:not(.on) .times-shot img[data-shot='times-on'] { opacity: 0; }
/* Interactive, moving like Timeslide's lens: the screen under the pointer pops out large with a little
   overshoot and a deep shadow, turned to face the viewer and pulled a little towards the middle; the
   screens left of it make room to the left, those right of it to the right, and sink back a step.
   The z-index switches at once on the way in and only after the shrink on the way out, so nothing jumps. */
@media (hover: hover) {
  #tour-views:not(.stacked) .v3 { cursor: pointer; transition: transform 0.85s cubic-bezier(0.34, 1.5, 0.64, 1), z-index 0s 0.5s; }
  #tour-views:not(.stacked) .v3:hover { z-index: 5; --ry: 0deg; --s: 1.4; transition: transform 0.85s cubic-bezier(0.34, 1.5, 0.64, 1), z-index 0s; }
  #tour-views:not(.stacked) .v3-tiles:hover { --tx: 6%; --s: 1.45; }
  #tour-views:not(.stacked) .v3-list:hover { --s: 1.3; }
  #tour-views:not(.stacked) .v3-zoom:hover { --tx: -6%; --s: 1.45; }
  #tour-views:not(.stacked) .v3:has(~ .v3:hover) { --tx: -14%; --s: 0.9; }
  #tour-views:not(.stacked) .v3:hover ~ .v3 { --tx: 14%; --s: 0.9; }
  /* Going from one screen straight to the next: the one left behind drops below at once and fades
     back, so the new one rises cleanly over it. */
  #tour-views:has(.v3:hover):not(.stacked) .v3:not(:hover) { z-index: 4; transition: transform 0.85s cubic-bezier(0.34, 1.5, 0.64, 1), z-index 0s; }
  /* The fade is a veil in the page colour on top, not transparency, so overlapping screens never show through each other. */
  .v3 .v3-shot::after { content: ''; position: absolute; inset: 0; z-index: 10; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.5s; border-radius: inherit; }
  #tour-views:has(.v3:hover):not(.stacked) .v3:not(:hover) .v3-shot::after { opacity: 0.45; }
  .v3 .v3-shot { transition: box-shadow 0.85s; }
  #tour-views:not(.stacked) .v3:hover .v3-shot { box-shadow: 0 -30px 60px -18px rgba(20, 20, 30, 0.12), 0 60px 110px -36px rgba(20, 20, 30, 0.4), 0 0 0 1px var(--line); }
}
/* Without hover (phones, tablets) the same, on a tap: the picked screen comes forward, turned flat
   and large, the others step aside behind a veil. main.js sets .picked and .has-pick. */
@media (hover: none) {
  #tour-views:not(.stacked) .v3 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1), z-index 0s 0.5s; }
  #tour-views:not(.stacked) .v3.picked { z-index: 5; --ry: 0deg; --s: 1.4; transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1), z-index 0s; }
  #tour-views:not(.stacked) .v3-tiles.picked { --tx: 6%; --s: 1.45; }
  #tour-views:not(.stacked) .v3-list.picked { --s: 1.3; }
  #tour-views:not(.stacked) .v3-zoom.picked { --tx: -6%; --s: 1.45; }
  #tour-views:not(.stacked) .v3:has(~ .v3.picked) { --tx: -14%; --s: 0.9; }
  #tour-views:not(.stacked) .v3.picked ~ .v3 { --tx: 14%; --s: 0.9; }
  #tour-views.has-pick:not(.stacked) .v3:not(.picked) { z-index: 4; transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1), z-index 0s; }
  .v3 .v3-shot::after { content: ''; position: absolute; inset: 0; z-index: 10; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.5s; border-radius: inherit; }
  #tour-views.has-pick:not(.stacked) .v3:not(.picked) .v3-shot::after { opacity: 0.45; }
  .v3 .v3-shot { transition: box-shadow 0.85s; }
  #tour-views:not(.stacked) .v3.picked .v3-shot { box-shadow: 0 -30px 60px -18px rgba(20, 20, 30, 0.12), 0 60px 110px -36px rgba(20, 20, 30, 0.4), 0 0 0 1px var(--line); }
  /* Labels of the screens behind would sit under the big one: only the picked one keeps its label. */
  .v3-label { transition: opacity 0.4s; }
  #tour-views.has-pick .v3:not(.picked) .v3-label { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-word, .q { transition: none; }
  .brush path, .final.in .brush path { animation: none; stroke-dashoffset: 0; }
}

.final { text-align: center; padding: 96px 0 120px; }
.final h2 { max-width: 16ch; margin: 0 auto 36px; }

/* Impressum and Datenschutz */
.legal { max-width: 720px; padding-top: 72px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 28px; }
.legal h2 { font-size: 20px; margin: 40px 0 10px; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--text); font-size: 17px; line-height: 1.6; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 10px; }
.legal p + p { margin-top: 12px; }
.legal strong { color: var(--ink); }
.legal a { color: var(--ink); }
.legal-lead { font-size: 19px !important; color: var(--ink) !important; }
.legal-date { margin-top: 48px; color: var(--muted) !important; font-size: 15px !important; }
.legal .btn { display: inline-flex; margin-top: 4px; } /* .btn-sm is hidden on phones (nav) */

/* Consent banner for visitors from a Google ad (ads.js); both answers weigh the same. */
.consent {
  position: fixed; z-index: 50; right: 16px; bottom: 16px; left: 16px; max-width: 460px; margin-left: auto;
  padding: 18px 20px; border-radius: var(--radius); background: var(--surface); color: var(--text);
  box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.16);
}
.consent p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.consent a { color: var(--ink); }
.consent-actions { display: flex; gap: 10px; }
.consent-actions .btn { display: inline-flex; flex: 1; }
.footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 14px; color: var(--muted); }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; }
/* Icon and copyright on one line, the icon centred on the text. */
.footer-brand { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-brand img { flex: none; border-radius: 5px; }
.footer nav { display: flex; gap: 22px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* Responsive */
@media (max-width: 960px) {
  section { padding: 80px 0; }
  .nav-links { display: none; }
  /* Tablets: one column, but not stretched across the whole width. */
  .grid3 { grid-template-columns: minmax(0, 1fr); max-width: 500px; margin-left: auto; margin-right: auto; }
  .faq .wrap.narrow { max-width: 540px; }
  .feature-grid, .feature-grid.reverse { grid-template-columns: 1fr; gap: 40px; }
  .tour-row, .tour-row.flip { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .tour-row.flip .tour-copy { order: 0; }
  .tour-row.wide .tour-copy { text-align: left; margin: 0; }
  .feature-grid.reverse .feature-copy { order: 0; }
  .who, .grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tour-row.wide .tour-stage { aspect-ratio: 1200 / 620; }
  .v3 { width: 60%; }
  .v3-tiles { left: -8%; }
  .v3-list { left: 16%; width: 68%; }
  .v3-zoom { right: -8%; }
  /* Phones: the picked screen moves to the very middle and fills nearly the whole width. */
  #tour-views:not(.stacked) .v3-tiles.picked { --tx: 47%; --s: 1.5; }
  #tour-views:not(.stacked) .v3-zoom.picked { --tx: -47%; --s: 1.5; }
  #tour-views:not(.stacked) .v3-list.picked { --tx: 0%; --s: 1.32; }
  /* The label grows with its screen: set smaller so it shows at the usual size. */
  #tour-views:not(.stacked) .v3.picked .v3-label { font-size: 11px; margin-top: 14px; }
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .faq .wrap.narrow { max-width: none; }
  .hero { padding: 56px 0 48px; }
  .demo { margin-top: 44px; border-radius: 16px; }
  .demo-days { height: 360px; }
  .demo-hint { display: none; }
  .day-head { font-size: 12px; }
  .who, .grid4 { grid-template-columns: 1fr; gap: 28px; }
  /* Phones: the buttons stack, and the second one under the first is just a text link. */
  .hero-ctas { flex-direction: column; align-items: center; gap: 6px; }
  .hero-ctas .btn-ghost { box-shadow: none; height: auto; padding: 10px 16px; }
  .hero-ctas .btn-ghost:hover { background: none; }
  /* Audience: a smaller icon on the left, its heading and text beside it. */
  .who > div { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
  .who-icon { grid-row: span 2; width: 52px; height: 52px; padding: 12px; margin: 0; border-radius: 13px; }
  /* The heading starts half the tile's corner radius lower, so it lines up with the tile's straight edge. */
  .who h3 { margin: 6.5px 0 4px; font-size: calc(17px * var(--head-scale, 1)); }
  .btn-sm { display: none; }
  .price-card { padding: 40px 22px; }
  /* Devices zoomed in: the row is wider than the screen and centred, MacBook and iPad run off the sides. */
  .device-row { width: 220%; margin-left: -60%; }
  /* One column: the list as a block in the middle, the ticks still in line. */
  .price-card ul { grid-template-columns: max-content; justify-content: center; }
  /* The closing buttons as wide as the card or column, the long text still on one line. */
  .price-card .btn, .final .btn { width: 100%; padding: 0 12px; white-space: nowrap; }
  .footer-inner { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Logo lockup (v2): the icon from the logo file, unchanged and softly faded at the edges, with the name set live in the headline font. */
.lockup { --ic: 36px; display: flex; align-items: flex-start; }
.lockup .logo-mark { position: relative; flex: none; width: calc(var(--ic) * 1.24); height: calc(var(--ic) * 1.3); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent), linear-gradient(180deg, #000 79%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 82%, transparent), linear-gradient(180deg, #000 79%, transparent); mask-composite: intersect; }
.lockup .logo-mark img { position: absolute; left: 0; top: 0; width: calc(var(--ic) * 3.789); height: auto; max-width: none; }
/* A fine edge along the bottom of the icon tile, following its rounded corners. */
.lockup .logo-mark::after { content: ''; position: absolute; left: 0; top: calc(var(--ic) * 0.7); width: var(--ic); height: calc(var(--ic) * 0.3);
  box-sizing: border-box; border-radius: 0 0 calc(var(--ic) * 0.22) calc(var(--ic) * 0.22); border-bottom: calc(var(--ic) * 0.0192) solid rgba(0, 0, 0, 0.2); pointer-events: none; }
/* The name sits in a box exactly as tall as the icon, so its middle is the icon's middle. */
.lockup .logo-word { position: relative; margin-left: calc(var(--ic) * 0.03); height: var(--ic); display: flex; align-items: center;
  font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: 0;
  font-size: calc(var(--ic) * 0.7 * 1.05); line-height: 1; color: #333; }
/* Where supported, the box is trimmed to the capital letters, so the middle of the letters is exactly the middle of the icon. */
@supports (text-box: trim-both cap alphabetic) { .lockup .logo-word > span { text-box: trim-both cap alphabetic; } }
@supports not (text-box: trim-both cap alphabetic) { .lockup .logo-word > span { transform: translateY(-0.035em); } }
[data-theme='dark'] .lockup .logo-word { color: #f2f2f2; }
.brand.lockup { --ic: 34px; gap: 0; }
/* The icon crop runs on below the tile (its shadow); in the header only the tile counts for centring. */
.brand.lockup .logo-mark { margin-bottom: calc(var(--ic) * -0.3); }
.brand.lockup .logo-word { font-size: calc(var(--ic) * 0.56 * 1.05); }
/* The big logo scales with the window in step with the headline (clamp(40px, 6.4vw, 76px)). */
.hero-logo.lockup { --ic: clamp(55px, 8.75vw, 104px); width: auto; aspect-ratio: auto; overflow: visible; margin-bottom: 8px; }
.hero-logo.lockup .logo-word { font-size: calc(var(--ic) * 0.54 * 1.05); }
/* At the end only the icon, centred on the tile (the crop reaches a little past it on the right). */
.final-logo.lockup { --ic: 64px; justify-content: center; margin-bottom: 28px; }
.final-logo .logo-mark { margin: 0 calc(var(--ic) * -0.24) calc(var(--ic) * -0.3) 0; }