/* VELTR — veltr.app. Deep black, graphite and silver; Geist, served from here. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #08080a;
  --bg-2: #0f0f12;
  --card: #121216;
  --card-2: #17171c;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f3;
  --sub: #9b9da3;
  --faint: #6a6c72;
  --silver: #d4d8df;
  --sage: #8fb3a3;
  --radius: 22px;
  --wrap: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }

.silver {
  background: linear-gradient(180deg, #ffffff 0%, #eceef1 55%, #b9bec6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- navigation */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--line);
}
.nav .wrap { display: flex; align-items: center; height: 64px; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: 0.14em; font-size: 15px; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--sub); }
.nav-links a:hover { color: var(--text); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.button:active { transform: scale(0.98); }
.button.primary {
  background: linear-gradient(180deg, #ffffff, #d9dce2);
  color: #0b0b0d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 30px rgba(210, 215, 225, 0.18);
}
.button.primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 40px rgba(210, 215, 225, 0.3); }
.button.ghost { border: 1px solid var(--line-2); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.button.ghost:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.button.small { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }

/* ---------------------------------------------------------------- hero: the name in chrome, the desktop before it */

.hero { position: relative; padding: 110px 0 30px; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -200px 0 auto 0;
  height: 1000px;
  background: radial-gradient(45% 40% at 50% 30%, rgba(190, 200, 215, 0.14), transparent 70%);
  pointer-events: none;
}
.corner {
  position: absolute;
  top: 82px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  z-index: 2;
}
.corner.left { left: 28px; }
.corner.right { right: 28px; }
.chrome {
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(80px, 25vw, 400px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.065em;
  user-select: none;
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 20%, #8a9099 43%, #f6f8fa 50%, #b1b7c0 60%, #4b4f56 80%, #8e949c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 30px 70px rgba(185, 195, 210, 0.16));
}
.chrome::after {
  content: "VELTR";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 7s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 54px; flex-wrap: wrap; }
.hero-foot .product { color: var(--sub); font-size: 18px; font-weight: 560; }
.hero-foot h1 { margin: 6px 0 0; font-size: clamp(46px, 7vw, 96px); line-height: 0.97; letter-spacing: -0.05em; font-weight: 650; }
.buy-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  font-size: 14.5px;
  color: var(--sub);
}
.buy-pill b { color: var(--text); font-weight: 600; }
.buy-pill .button { border-radius: 999px; height: 42px; }

/* The bar that stays once the hero has gone by: a little Dock of its own. */
.subnav {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: 18px;
  background: rgba(20, 20, 24, 0.74);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  font-size: 14px;
  transform: translate(-50%, 160%);
  transition: transform 0.55s cubic-bezier(.2, .8, .2, 1);
}
.subnav.shown { transform: translate(-50%, 0); }
.subnav .name { font-weight: 650; letter-spacing: 0.14em; font-size: 13px; }
.subnav .from { color: var(--sub); white-space: nowrap; }

/* ---------------------------------------------------------------- the idea, word by word */

.story { height: 200vh; position: relative; padding: 0; }
.story-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 24px; }
.story .corner { top: 92px; }
.statement {
  max-width: 1020px;
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.13;
  letter-spacing: -0.035em;
  font-weight: 620;
}
.statement .w { opacity: 0.13; transition: opacity 0.2s linear; }
.statement em { font-style: italic; font-weight: 540; color: var(--silver); }

/* ---------------------------------------------------------------- highlights, one film each */

.highlights { padding-top: 60px; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.head-row h2 { margin: 0; font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.035em; font-weight: 650; }
.arrows button {
  width: 44px; height: 44px; margin-left: 8px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit; font-size: 22px; line-height: 1;
  cursor: pointer;
}
.arrows button:hover { background: rgba(255, 255, 255, 0.1); }
.rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0 max(20px, calc((100vw - var(--wrap)) / 2));
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 min(900px, 86vw);
  height: min(560px, 74vw);
  border-radius: 28px;
  overflow: hidden;
  scroll-snap-align: center;
  border: 1px solid var(--line);
  background: #000;
}
.slide .caption {
  position: absolute;
  z-index: 2;
  top: 32px; left: 50%;
  transform: translateX(-50%);
  width: min(580px, 86%);
  margin: 0;
  text-align: center;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.45;
  color: #c4c6cc;
}
.slide .caption b { color: var(--text); font-weight: 620; }
.slide .scene { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 110px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); transition: width 0.3s, background 0.3s; }
.dots i.on { width: 26px; background: #e9ecf1; }

.s-island { background: radial-gradient(70% 70% at 50% 25%, #2b2755, #0b0b14 72%); }
.big-island {
  display: flex; align-items: center; gap: 18px;
  width: min(540px, 82%);
  padding: 18px 26px 18px 18px;
  border-radius: 46px;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: breathe 6s ease-in-out infinite;
}
.big-island .cover { width: 76px; height: 76px; border-radius: 18px; flex: none; background: linear-gradient(135deg, #f3b27a, #7a2e4f); }
.big-island .words { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.big-island .words b { font-size: 19px; font-weight: 620; }
.big-island .words span { color: rgba(255, 255, 255, 0.55); font-size: 14px; }
.big-island .bar { display: block; height: 4px; margin-top: 12px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.big-island .bar i { display: block; height: 100%; width: 40%; background: #fff; animation: grow 9s linear infinite; }
.big-island .eq { display: flex; align-items: center; gap: 3px; height: 26px; }
.big-island .eq b { width: 4px; border-radius: 2px; background: linear-gradient(180deg, #f3b27a, #c46a7d); animation: eq 0.85s ease-in-out infinite alternate; }
.big-island .eq b:nth-child(2) { animation-duration: 0.65s; }
.big-island .eq b:nth-child(3) { animation-duration: 1.05s; }
.big-island .eq b:nth-child(4) { animation-duration: 0.75s; }
@keyframes breathe { 50% { transform: scale(1.02); } }
@keyframes grow { from { width: 22%; } to { width: 64%; } }

.s-search { background: radial-gradient(70% 70% at 50% 35%, #23252c, #0b0b0e 72%); }
.spotlight { width: min(560px, 84%); border-radius: 18px; background: rgba(28, 29, 33, 0.95); border: 1px solid var(--line-2); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); overflow: hidden; }
.spotlight .field { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 20px; border-bottom: 1px solid var(--line); font-size: 21px; }
.spotlight .lens { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sub); position: relative; }
.spotlight .lens::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--sub); right: -6px; bottom: -3px; transform: rotate(45deg); }
.spotlight .typed { overflow: hidden; white-space: nowrap; width: 0; animation: type 6s steps(4) infinite; }
.spotlight .caret { width: 2px; height: 24px; background: var(--silver); animation: blink 1s step-end infinite; }
@keyframes type { 0%, 10% { width: 0; } 30%, 90% { width: 2.2ch; } 100% { width: 0; } }
@keyframes blink { 50% { opacity: 0; } }
.spotlight .result { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 16px; }
.spotlight .result em { margin-left: auto; font-style: normal; color: var(--faint); font-size: 13px; }
.spotlight .result.on { background: rgba(255, 255, 255, 0.08); }
.spotlight .result > span { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.spotlight .gear { background: linear-gradient(160deg, #6a707a, #2e3238); }
.spotlight .doc { background: linear-gradient(160deg, #ff8a7a, #c9283e); }

.s-looks { background: radial-gradient(70% 70% at 50% 35%, #1c1d22, #09090b 72%); }
.cycler { position: relative; width: min(660px, 84%); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.cycler span { position: absolute; inset: 0; opacity: 0; animation: cycle 15s infinite; }
.cycler span:nth-child(2) { animation-delay: 3s; }
.cycler span:nth-child(3) { animation-delay: 6s; }
.cycler span:nth-child(4) { animation-delay: 9s; }
.cycler span:nth-child(5) { animation-delay: 12s; }
.cycler::before { content: ""; position: absolute; z-index: 2; left: 18%; right: 18%; bottom: 7%; height: 10%; border-radius: 10px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); }
.cycler::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 6%; background: rgba(0, 0, 0, 0.28); }
@keyframes cycle { 0% { opacity: 0; } 5%, 20% { opacity: 1; } 26%, 100% { opacity: 0; } }


.s-edges { background: #000; }
.film { position: absolute; inset: 110px 40px 40px; border-radius: 16px; overflow: hidden; background: radial-gradient(60% 80% at 70% 40%, #4b2a63, transparent 70%), linear-gradient(160deg, #0e2a3a, #2c1840 60%, #0f0712); }
.film .peek { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: rgba(14, 14, 16, 0.72); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transform: translateY(-100%); animation: peek 6s ease infinite; }
.film .hold { position: absolute; top: 4px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.9); opacity: 0; animation: holdring 6s ease infinite; }
@keyframes peek { 0%, 32% { transform: translateY(-100%); } 40%, 76% { transform: none; } 84%, 100% { transform: translateY(-100%); } }
@keyframes holdring { 0%, 12% { opacity: 0; transform: scale(0.6); } 18%, 30% { opacity: 1; transform: scale(1); } 36%, 100% { opacity: 0; transform: scale(1.3); } }

/* ---------------------------------------------------------------- quiet by design, in figures */

.editorial { padding-top: 150px; text-align: center; }
.giant { margin: 14px 0 0; font-size: clamp(44px, 8vw, 112px); line-height: 0.97; letter-spacing: -0.055em; font-weight: 650; }
.giant.left { text-align: left; }
.prose { max-width: 780px; margin: 34px auto 0; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--sub); }
.prose b { color: var(--text); font-weight: 600; }
.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 70px; text-align: left; }
.figures div { padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.figures .n { display: block; font-size: 58px; font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.figures small { font-size: 24px; margin-left: 3px; color: var(--sub); font-weight: 500; }
.figures .l { display: block; margin-top: 10px; color: var(--sub); font-size: 15px; }

.band { margin-top: 140px; padding: 110px 0 120px; background: linear-gradient(180deg, #17171b, #0e0e11); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-head { margin-bottom: 50px; }

/* ---------------------------------------------------------------- the desktop, drawn */

.stage { position: relative; margin: clamp(-120px, -7.5vw, -40px) auto 0; width: min(1180px, calc(100% - 32px)); z-index: 1; }
.stage::after {
  content: "";
  position: absolute;
  inset: 8% 6% -6% 6%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 208, 222, 0.16), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
.desk {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #050506;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.desk * { --u: calc(100cqw / 1280); }
.desk .sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 72% 14%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 86% 38%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 34% 46%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 58% 30%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(120% 70% at 50% 120%, rgba(140,150,165,.10), transparent 60%),
    #050506;
}
.desk .planet {
  position: absolute;
  left: -30%; right: -30%;
  top: 71%;
  height: 220%;
  border-radius: 50%;
  background: radial-gradient(60% 30% at 50% 0%, #0c0c0e, #030304 70%);
  box-shadow:
    0 calc(var(--u) * -1.5) 0 rgba(235, 240, 248, 0.55),
    0 calc(var(--u) * -14) calc(var(--u) * 40) rgba(200, 210, 225, 0.28),
    0 calc(var(--u) * -60) calc(var(--u) * 160) rgba(160, 170, 190, 0.18);
}
.desk .glass {
  background: rgba(22, 23, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.m-bar {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--u) * 26);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u) * 14);
  background: rgba(14, 14, 16, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: calc(var(--u) * 11); color: rgba(245, 245, 243, 0.9); font-weight: 600;
}
.m-bar .left, .m-bar .right { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.m-bar .ring { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; border: calc(var(--u) * 1.6) solid #d8dce2; }
.m-bar .dot { width: calc(var(--u) * 12); height: calc(var(--u) * 7); border-radius: calc(var(--u) * 2); background: rgba(245,245,243,.75); }
.m-bar .clock { font-weight: 500; }

.m-island {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * 150); height: calc(var(--u) * 26);
  background: #000;
  border-radius: 0 0 calc(var(--u) * 14) calc(var(--u) * 14);
  animation: island 12s cubic-bezier(.34, 1.3, .64, 1) infinite;
  overflow: hidden;
  z-index: 3;
}
.m-island .pill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 10); animation: pill 12s ease infinite; }
.m-island .art { width: calc(var(--u) * 15); height: calc(var(--u) * 15); border-radius: calc(var(--u) * 4); background: linear-gradient(135deg, #c9ced6, #3a3f6e); }
.m-island .eq { display: flex; gap: calc(var(--u) * 2.5); align-items: center; height: calc(var(--u) * 14); }
.m-island .eq b { width: calc(var(--u) * 2.6); border-radius: 2px; background: #d8dce2; animation: eq 0.9s ease-in-out infinite alternate; }
.m-island .eq b:nth-child(2) { animation-duration: 0.7s; }
.m-island .eq b:nth-child(3) { animation-duration: 1.1s; }
.m-island .eq b:nth-child(4) { animation-duration: 0.8s; }
.m-island .player { position: absolute; inset: 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); opacity: 0; animation: player 12s ease infinite; }
.m-island .row { display: flex; align-items: center; gap: calc(var(--u) * 12); }
.m-island .cover { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: calc(var(--u) * 9); background: linear-gradient(135deg, #e6e9ee, #5a5f8e 60%, #23264a); flex: none; }
.m-island .title { font-size: calc(var(--u) * 13); font-weight: 650; color: #fff; white-space: nowrap; }
.m-island .artist { font-size: calc(var(--u) * 11); color: rgba(255,255,255,.55); white-space: nowrap; }
.m-island .track { margin-top: calc(var(--u) * 14); height: calc(var(--u) * 3.5); border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.m-island .track i { display: block; height: 100%; width: 38%; background: #f5f5f3; animation: progress 12s linear infinite; }
.m-island .controls { display: flex; justify-content: center; gap: calc(var(--u) * 30); margin-top: calc(var(--u) * 10); color: #fff; font-size: calc(var(--u) * 13); }

@keyframes island {
  0%, 46% { width: calc(var(--u) * 150); height: calc(var(--u) * 26); border-radius: 0 0 calc(var(--u) * 14) calc(var(--u) * 14); }
  52%, 88% { width: calc(var(--u) * 380); height: calc(var(--u) * 118); border-radius: 0 0 calc(var(--u) * 26) calc(var(--u) * 26); }
  94%, 100% { width: calc(var(--u) * 150); height: calc(var(--u) * 26); border-radius: 0 0 calc(var(--u) * 14) calc(var(--u) * 14); }
}
@keyframes pill { 0%, 46% { opacity: 1; } 49%, 91% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes player { 0%, 50% { opacity: 0; } 56%, 86% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes progress { from { width: 30%; } to { width: 46%; } }
@keyframes eq { from { height: 25%; } to { height: 100%; } }

.m-card {
  position: absolute;
  border-radius: calc(var(--u) * 16);
  padding: calc(var(--u) * 12);
  color: #f5f5f3;
  opacity: 0;
  transform: translateY(calc(var(--u) * 10));
  animation: arrive 0.8s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes arrive { to { opacity: 1; transform: none; } }
.m-label { font-size: calc(var(--u) * 10); color: #9b9da3; font-weight: 600; letter-spacing: 0.02em; }
.m-cal { left: calc(var(--u) * 20); top: calc(var(--u) * 50); width: calc(var(--u) * 112); height: calc(var(--u) * 112); animation-delay: 0.3s; }
.m-cal .day { font-size: calc(var(--u) * 10); color: #d8dce2; font-weight: 650; text-transform: capitalize; }
.m-cal .date { font-size: calc(var(--u) * 44); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; }
.m-cal .month { font-size: calc(var(--u) * 10); color: #9b9da3; text-transform: capitalize; }
.m-weather { left: calc(var(--u) * 144); top: calc(var(--u) * 50); width: calc(var(--u) * 112); height: calc(var(--u) * 112); animation-delay: 0.45s; }
.m-weather .sun { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ced6); box-shadow: 0 0 calc(var(--u) * 14) rgba(255,255,255,.35); }
.m-weather .temp { font-size: calc(var(--u) * 34); font-weight: 300; line-height: 1.1; margin-top: calc(var(--u) * 4); }
.m-files { left: calc(var(--u) * 20); top: calc(var(--u) * 174); width: calc(var(--u) * 236); height: calc(var(--u) * 112); animation-delay: 0.6s; }
.m-files .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.m-files .tiles span { aspect-ratio: 1; border-radius: calc(var(--u) * 9); display: grid; place-items: center; font-size: calc(var(--u) * 8); font-weight: 700; color: rgba(255,255,255,.9); }
.m-files .tiles .add { border: calc(var(--u) * 1.4) dashed rgba(255,255,255,.22); color: #9b9da3; font-size: calc(var(--u) * 16); font-weight: 300; }
.m-apps { left: calc(var(--u) * 20); top: calc(var(--u) * 298); width: calc(var(--u) * 112); height: calc(var(--u) * 112); animation-delay: 0.75s; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 9); }
.m-apps span { border-radius: calc(var(--u) * 10); }
.m-desk { right: calc(var(--u) * 20); top: calc(var(--u) * 50); width: calc(var(--u) * 236); height: calc(var(--u) * 250); animation-delay: 0.5s; }
.m-desk .task { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11); margin-top: calc(var(--u) * 9); color: #e9eaec; }
.m-desk .task i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; border: calc(var(--u) * 1.3) solid #9b9da3; flex: none; }
.m-desk .task.done { color: #6a6c72; text-decoration: line-through; }
.m-desk .task.done i { background: #d8dce2; border-color: #d8dce2; }
.m-desk .timer { display: flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 16); padding-top: calc(var(--u) * 14); border-top: 1px solid rgba(255,255,255,.07); }
.m-desk .ring {
  width: calc(var(--u) * 54); height: calc(var(--u) * 54); border-radius: 50%; flex: none;
  background: conic-gradient(#e9ecf1 0 68%, rgba(255,255,255,.1) 68% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 5), #000 calc(100% - var(--u) * 4.5));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 5), #000 calc(100% - var(--u) * 4.5));
}
.m-desk .time { font-size: calc(var(--u) * 22); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.m-screen { right: calc(var(--u) * 20); top: calc(var(--u) * 316); width: calc(var(--u) * 236); height: calc(var(--u) * 112); animation-delay: 0.65s; }
.m-screen .bars { display: flex; align-items: flex-end; gap: calc(var(--u) * 5); height: calc(var(--u) * 46); margin-top: calc(var(--u) * 10); }
.m-screen .bars i { flex: 1; border-radius: calc(var(--u) * 2.5); background: linear-gradient(180deg, #e9ecf1, #8d929b); }
.m-screen .total { font-size: calc(var(--u) * 18); font-weight: 400; margin-top: calc(var(--u) * 2); }

.m-dock {
  position: absolute; left: 50%; bottom: calc(var(--u) * 14);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 7);
  padding: calc(var(--u) * 7) calc(var(--u) * 9);
  border-radius: calc(var(--u) * 16);
  opacity: 0;
  animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) 0.2s forwards;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, calc(var(--u) * 30)); } to { opacity: 1; transform: translate(-50%, 0); } }
.m-dock .app { width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 10); position: relative; transition: transform 0.2s; }
.m-dock .app.on::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -5); width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: #d8dce2; transform: translateX(-50%); }
.m-dock .search { height: calc(var(--u) * 30); width: calc(var(--u) * 110); border-radius: calc(var(--u) * 15); background: rgba(255,255,255,.07); display: flex; align-items: center; padding-left: calc(var(--u) * 12); font-size: calc(var(--u) * 11); color: #9b9da3; }
.m-dock .sep { width: 1px; height: calc(var(--u) * 26); background: rgba(255,255,255,.12); }
.m-dock .start { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); background: rgba(255,255,255,.08); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.5); padding: calc(var(--u) * 8); }
.m-dock .start i { background: #e9ecf1; border-radius: calc(var(--u) * 1.5); }

/* ---------------------------------------------------------------- the desktop's looks (the hero is Signature) */

.desk {
  --glass: rgba(22, 23, 26, 0.72);
  --glass-line: rgba(255, 255, 255, 0.08);
  --ink: #f5f5f3;
  --muted: #9b9da3;
  --bar: rgba(14, 14, 16, 0.6);
  --tint: #d8dce2;
}
.desk[data-look="calm"] {
  --glass: rgba(255, 252, 247, 0.66);
  --glass-line: rgba(60, 45, 30, 0.08);
  --ink: #26221e;
  --muted: #7a7068;
  --bar: rgba(250, 246, 240, 0.72);
  --tint: #b77a52;
}
.desk[data-look="focus"] { --tint: #8fb3a3; }
.desk[data-look="studio"] { --tint: #8fa9cf; --glass: rgba(18, 22, 30, 0.82); }
.desk[data-look="minimal"] { --tint: #a9b8dc; }
.desk .glass { background: var(--glass); border-color: var(--glass-line); transition: background 0.8s ease, border-color 0.8s ease; }
.m-card { color: var(--ink); transition: color 0.8s ease; }
.m-label, .m-cal .month { color: var(--muted); }
.m-cal .day { color: var(--tint); }
.m-bar { background: var(--bar); color: var(--ink); transition: background 0.8s ease, color 0.8s ease, opacity 0.6s ease; }
.m-bar .ring { border-color: var(--tint); }
.m-bar .dot { background: var(--ink); opacity: 0.75; }
.m-desk .task { color: var(--ink); }
.m-desk .task.done { color: var(--muted); }
.m-desk .task.done i { background: var(--tint); border-color: var(--tint); }
.m-desk .ring { background: conic-gradient(var(--tint) 0 68%, rgba(128, 128, 128, 0.18) 68% 100%); }
.m-screen .bars i { background: var(--tint); opacity: 0.9; }
.m-dock .search { background: rgba(128, 128, 128, 0.14); color: var(--muted); }
.m-dock .start i { background: var(--ink); }

.wall { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.desk[data-look="signature"] .wall-signature,
.desk[data-look="focus"] .wall-focus,
.desk[data-look="calm"] .wall-calm,
.desk[data-look="studio"] .wall-studio,
.desk[data-look="minimal"] .wall-minimal { opacity: 1; }
.wall-focus { background: radial-gradient(55% 45% at 28% 30%, rgba(86, 128, 112, 0.34), transparent 70%), radial-gradient(45% 45% at 82% 78%, rgba(40, 64, 58, 0.5), transparent 70%), #060908; }
.wall-calm { background: radial-gradient(80% 40% at 50% 54%, rgba(255, 255, 255, 0.55), transparent 70%), linear-gradient(180deg, #f3ece2 0%, #ebe1d4 42%, #d5dcdc 50%, #bfcccd 55%, #e3d3bc 60%, #d3bd9d 80%, #c2a782 100%); filter: saturate(0.95); }
.wall-studio { background: radial-gradient(60% 60% at 72% 18%, #304664, transparent 70%), radial-gradient(40% 50% at 15% 85%, #1d2a3d, transparent 70%), linear-gradient(160deg, #131a26, #080b10); }
.wall-minimal { background: radial-gradient(70% 30% at 50% 72%, rgba(120, 145, 200, 0.45), transparent 70%), linear-gradient(180deg, #0a0f1d 0%, #151e38 55%, #2e3f66 71%, #10172a 84%, #06080f 100%); }

.m-studio {
  left: 50%; top: calc(var(--u) * 168);
  width: calc(var(--u) * 430); height: calc(var(--u) * 236);
  margin-left: calc(var(--u) * -215);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 18);
  padding: calc(var(--u) * 30);
  animation: none !important;
  opacity: 0;
}
.m-studio span { border-radius: calc(var(--u) * 16); }

.m-dock .app svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-dock .app.t8 svg { stroke: #2a2d33; }

/* The styles, tried here: the same desktop, changing look as a style is chosen. */
.band-lead { color: var(--sub); font-size: 18px; margin: 18px 0 0; max-width: 560px; }
.picker { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.picker button {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  color: var(--sub);
  font: inherit; font-size: 15px; font-weight: 560;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.picker button i { width: 10px; height: 10px; border-radius: 50%; }
.picker button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.picker button.on { background: #f3f4f6; color: #0b0b0d; border-color: transparent; }
.look-line { margin: 22px 0 0; color: var(--sub); font-size: 17px; max-width: 760px; min-height: 3em; transition: opacity 0.3s; }
.playground .desk { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); }
.playground .m-card, .playground .m-dock { animation: none; opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1), background 0.8s ease, color 0.8s ease; }
.playground .m-dock { transform: translateX(-50%); }
.playground .desk[data-look="focus"] :is(.m-cal, .m-weather, .m-files, .m-apps, .m-screen),
.playground .desk[data-look="studio"] :is(.m-cal, .m-weather, .m-files, .m-apps, .m-screen),
.playground .desk[data-look="minimal"] :is(.m-weather, .m-files, .m-apps, .m-screen) { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(0.97); }
.playground .desk .m-studio { opacity: 0; transform: scale(0.95); }
.playground .desk[data-look="studio"] .m-studio { opacity: 1; transform: none; }
.playground .desk[data-look="focus"] .m-bar, .playground .desk[data-look="minimal"] .m-bar { opacity: 0.3; }
.playground .desk[data-look="focus"] .m-dock { opacity: 0.4; }

/* The hero arrives: the name tracking in, the desktop tilted back, laid flat as the page goes by. */
.chrome { animation: chrome-in 1.6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes chrome-in { from { opacity: 0; letter-spacing: -0.01em; transform: translateY(30px); } to { opacity: 1; letter-spacing: -0.065em; transform: none; } }
.hero .stage { perspective: 1800px; animation: stage-in 1.3s cubic-bezier(.16, 1, .3, 1) 0.25s both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
.hero .desk { transform-origin: 50% 0%; transform: rotateX(var(--tilt, 14deg)) scale(var(--zoom, 0.94)); will-change: transform; }
.hero-foot { animation: stage-in 1.2s cubic-bezier(.16, 1, .3, 1) 0.5s both; }

/* App tile colours (flat, as VELTR's tiles style draws them). */
.t1 { background: linear-gradient(160deg, #6aa7ff, #2f62d9); }
.t2 { background: linear-gradient(160deg, #ffcf6a, #f08a24); }
.t3 { background: linear-gradient(160deg, #ff7a7a, #c9283e); }
.t4 { background: linear-gradient(160deg, #8de0b4, #2c9a68); }
.t5 { background: linear-gradient(160deg, #c7a2ff, #6b45d6); }
.t6 { background: linear-gradient(160deg, #5f6670, #2a2e35); }
.t7 { background: linear-gradient(160deg, #5ad2e8, #1683a6); }
.t8 { background: linear-gradient(160deg, #f6f7f9, #b7bcc5); }
.t9 { background: linear-gradient(160deg, #1ed760, #128a3e); }

/* ---------------------------------------------------------------- sections */

section { padding: 120px 0 0; }
.section-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.kicker { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sub); font-weight: 600; }
.section-head h2 { margin: 14px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; }
.section-head p { margin: 18px auto 0; color: var(--sub); font-size: 18px; max-width: 620px; }

.strip { display: flex; justify-content: center; gap: 12px 34px; flex-wrap: wrap; padding: 70px 0 0; color: var(--sub); font-size: 15px; }
.strip b { color: var(--text); font-weight: 600; }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.cell {
  position: relative;
  grid-column: span 2;
  min-height: 250px;
  padding: 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s;
}
.cell:hover { border-color: var(--line-2); }
.cell.wide { grid-column: span 3; }
.cell.hero-cell { grid-column: span 4; }
.cell h3 { margin: 16px 0 8px; font-size: 21px; letter-spacing: -0.015em; font-weight: 620; }
.cell p { margin: 0; color: var(--sub); font-size: 15.5px; }
.icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
}
.icon svg { width: 20px; height: 20px; stroke: var(--silver); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.keys { display: inline-flex; gap: 5px; margin-top: 14px; flex-wrap: wrap; }
kbd {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 9px 5px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2.5px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

/* The styles: five complete looks. */
.swatches { display: flex; gap: 10px; margin-top: 22px; }
.swatches span { flex: 1; height: 92px; border-radius: 14px; border: 1px solid var(--line); }
.looks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.look { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); transition: transform 0.3s, border-color 0.3s; }
.look:hover { transform: translateY(-4px); border-color: var(--line-2); }
.look .shot { aspect-ratio: 16 / 11; position: relative; overflow: hidden; }
.look .shot::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%; height: 9%; border-radius: 6px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14); }
.look .shot::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6%; background: rgba(0,0,0,.25); }
.look .shot.light::before { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.06); }
.look .shot.light::after { background: rgba(255,255,255,.45); }
.look .words { padding: 14px 16px 18px; }
.look h4 { margin: 0; font-size: 16px; font-weight: 620; }
.look p { margin: 4px 0 0; font-size: 13.5px; color: var(--sub); }
.w-signature { background: radial-gradient(130% 70% at 50% 135%, #050506 62%, rgba(230,235,242,.55) 63.2%, rgba(170,180,195,.2) 66%, transparent 76%), #050506; }
.w-focus { background: radial-gradient(80% 60% at 30% 30%, #1d2a26, transparent 70%), linear-gradient(160deg, #0d1312, #050807); }
.w-calm { background: linear-gradient(180deg, #efe7dc 0%, #e2d5c4 55%, #c8b59c 56%, #b7a183 100%); }
.w-studio { background: radial-gradient(70% 60% at 70% 20%, #2b3a52, transparent 70%), linear-gradient(160deg, #141b26, #0a0d12); }
.w-minimal { background: linear-gradient(180deg, #0e1424 0%, #1a2440 55%, #3a4a72 75%, #0b0f1a 100%); }

/* Peace of mind. */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust .cell { grid-column: auto; min-height: 210px; }

/* Price. */
.price-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px;
  border-radius: 28px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(210, 216, 226, 0.12), transparent 70%),
    linear-gradient(180deg, var(--card-2), var(--card));
  text-align: center;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}
.price-card .amount { font-size: 72px; font-weight: 650; letter-spacing: -0.04em; line-height: 1; margin-top: 18px; }
.price-card .once { color: var(--sub); margin-top: 8px; font-size: 15px; }
.price-card ul { list-style: none; padding: 0; margin: 28px 0 0; text-align: left; display: grid; gap: 12px; }
.price-card li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.price-card li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(143, 179, 163, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%238fb3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.price-card .actions { display: grid; gap: 10px; margin-top: 32px; }
.price-card .actions .button { height: 52px; font-size: 16px; }
.price-card .secure { margin-top: 16px; font-size: 13px; color: var(--faint); }

/* Questions. */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
.faq summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 560; display: flex; align-items: baseline; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq .num { color: var(--faint); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; flex: none; width: 24px; }
.faq details p { padding-left: 44px; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--sub); font-weight: 300; font-size: 24px; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--sub); margin: 12px 0 0; font-size: 16px; }

/* Last call. */
.final { text-align: center; padding: 140px 0 120px; position: relative; }
.final h2 { font-size: clamp(38px, 6vw, 76px); letter-spacing: -0.04em; line-height: 1; margin: 0; font-weight: 650; }
.final p { color: var(--sub); margin: 18px 0 0; font-size: 18px; }
.final .actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

footer { border-top: 1px solid var(--line); padding: 40px 0 50px; color: var(--sub); font-size: 14px; }
footer .wrap { display: flex; gap: 20px 40px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 10px 22px; flex-wrap: wrap; }
footer a:hover { color: var(--text); }

/* Reveal on scroll. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1); }
.reveal.shown { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- legal pages */

.legal { padding: 130px 0 90px; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -0.03em; margin: 0 0 8px; }
.legal .updated { color: var(--faint); font-size: 14px; margin: 0 0 36px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; letter-spacing: -0.01em; }
.legal p, .legal li { color: #c9cbd0; font-size: 16px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.todo { background: rgba(255, 196, 0, 0.14); color: #ffd666; border-radius: 4px; padding: 0 4px; }

/* ---------------------------------------------------------------- smaller screens */

.final .corner { top: 40px; }

@media (max-width: 980px) {
  .figures { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell.wide, .cell.hero-cell { grid-column: span 2; }
  .cell.half { grid-column: span 1; }
  .looks { grid-template-columns: repeat(2, 1fr); }
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav-links { display: none; }
  .nav .wrap { justify-content: space-between; }
  .hero { padding-top: 116px; }
  .cell.half { grid-column: span 2; }
  .looks { grid-template-columns: 1fr 1fr; }
  .looks .look:last-child { grid-column: span 2; }
  .trust { grid-template-columns: 1fr; }
  .price-card { padding: 30px 22px; }
  section { padding-top: 90px; }
  .story { padding-top: 0; }
  .corner { display: none; }
  .hero-foot { margin-top: 36px; }
  .buy-pill { width: 100%; justify-content: space-between; }
  .subnav .from { display: none; }
  .figures .n { font-size: 44px; }
  .slide .scene { padding-top: 140px; }
  .big-island { gap: 12px; padding: 14px 18px 14px 14px; }
  .big-island .cover { width: 54px; height: 54px; border-radius: 14px; }
  .big-island .words b { font-size: 16px; }
  .film { inset: 140px 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- the hero's promise, and the Dock's film */

.hero-lead { max-width: 560px; margin: 18px 0 0; color: var(--sub); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; }

.s-dock { background: radial-gradient(70% 70% at 50% 40%, #23262d, #09090b 72%); }
.glass-dark { background: rgba(30, 31, 36, 0.72); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.wave { display: flex; align-items: flex-end; gap: 12px; padding: 12px 16px; border-radius: 26px; }
.wave span { position: relative; width: 58px; height: 58px; border-radius: 16px; transform-origin: 50% 100%; animation: magnify 5s cubic-bezier(.4, 0, .2, 1) infinite; }
.wave span:nth-child(2) { animation-delay: 0.12s; }
.wave span:nth-child(3) { animation-delay: 0.24s; }
.wave span:nth-child(4) { animation-delay: 0.36s; }
.wave span:nth-child(5) { animation-delay: 0.48s; }
.wave span:nth-child(6) { animation-delay: 0.6s; }
.wave span:nth-child(7) { animation-delay: 0.72s; }
.wave span:nth-child(8) { animation-delay: 0.84s; }
.wave span svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes magnify { 0%, 26%, 100% { transform: none; } 13% { transform: translateY(-8px) scale(1.42); } }

/* ---------------------------------------------------------------- productivity: the shortcuts, each with its film */

.productive { padding-top: 150px; }
.console { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 26px; align-items: stretch; }
.moves { display: flex; flex-direction: column; gap: 6px; }
.move {
  position: relative;
  display: grid;
  gap: 9px;
  padding: 15px 18px 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sub);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s;
}
.move:hover { background: rgba(255, 255, 255, 0.03); }
.move.on { background: linear-gradient(180deg, var(--card-2), var(--card)); border-color: var(--line-2); }
.move .keys { display: flex; gap: 5px; align-items: center; margin: 0; }
.move .plus { color: var(--sub); font-size: 13px; margin-left: 4px; }
.move .what { font-size: 14px; line-height: 1.45; color: var(--faint); transition: color 0.3s; }
.move.on .what { color: var(--sub); }
.move .what b { display: block; color: var(--sub); font-size: 16px; font-weight: 600; margin-bottom: 2px; transition: color 0.3s; }
.move.on .what b { color: var(--text); }
.move .progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--silver); }
.move.on .progress { animation: fill 5.6s linear forwards; }
.console.paused .move.on .progress { animation-play-state: paused; }
.console.held .move.on .progress { animation: none; width: 100%; opacity: 0.3; }
@keyframes fill { to { width: 100%; } }

.screen { position: relative; min-height: 470px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: #060607; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5); }
.screen-wall { position: absolute; inset: 0; background: radial-gradient(130% 70% at 50% 132%, #050506 62%, rgba(230, 235, 242, 0.42) 63.2%, rgba(170, 180, 195, 0.14) 66%, transparent 76%), radial-gradient(80% 60% at 50% 0%, rgba(120, 130, 150, 0.12), transparent 70%), #050506; }
.demo { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.985); transition: opacity 0.45s ease, transform 0.45s ease; }
.demo.on { opacity: 1; transform: none; }
.demo .panel { width: min(440px, 82%); border-radius: 16px; background: rgba(28, 29, 33, 0.95); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; }
.demo .field { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 20px; }
.lens { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sub); position: relative; flex: none; }
.lens::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--sub); right: -6px; bottom: -3px; transform: rotate(45deg); }
.demo .typing { white-space: nowrap; clip-path: inset(0 100% 0 0); }
.demo .caret { width: 2px; height: 22px; background: var(--silver); animation: blink 1s step-end infinite; }
.demo .answer { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; background: rgba(255, 255, 255, 0.06); opacity: 0; }
.demo .answer .big { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.demo em { font-style: normal; color: var(--faint); font-size: 13px; }
.demo .row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 15px; opacity: 0; }
.demo .row em { margin-left: auto; }
.demo .row.on { background: rgba(255, 255, 255, 0.08); }
.demo .ic { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.demo .title { display: flex; justify-content: space-between; padding: 14px 18px 8px; font-size: 13px; color: var(--sub); font-weight: 600; }
.d-search.on .typing { animation: reveal-text 0.9s steps(4) 0.35s forwards; }
.d-search.on .answer { animation: appear 0.4s ease 1.45s forwards; }
.d-search.on .row:nth-of-type(1) { animation: appear 0.4s ease 1.7s forwards; }
.d-search.on .row:nth-of-type(2) { animation: appear 0.4s ease 1.85s forwards; }
.d-clip.on .row { animation: appear 0.35s ease forwards; }
.d-clip.on .row:nth-of-type(2) { animation-delay: 0.12s; }
.d-clip.on .row:nth-of-type(3) { animation-delay: 0.24s; }
.d-clip.on .row:nth-of-type(4) { animation-delay: 0.36s; }
.note .written { margin: 0; padding: 4px 18px 26px; font-size: 21px; min-height: 84px; clip-path: inset(0 100% 0 0); }
.note .saved { color: var(--sage); opacity: 0; font-weight: 600; }
.d-note.on .written { animation: reveal-text 2.3s steps(34) 0.3s forwards; }
.d-note.on .saved { animation: appear 0.4s ease 2.9s forwards; }
@keyframes reveal-text { to { clip-path: inset(0 0 0 0); } }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

.screen .win { position: absolute; border-radius: 12px; background: rgba(30, 31, 36, 0.95); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.screen .win b { display: block; height: 22px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); border-radius: 12px 12px 0 0; }
@keyframes pop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }

.zone { position: absolute; top: 6%; bottom: 14%; border-radius: 12px; border: 1.5px solid rgba(216, 220, 226, 0.7); background: rgba(216, 220, 226, 0.07); opacity: 0; }
.z1 { left: 3%; width: 30%; }
.z2 { left: 35%; width: 30%; }
.z3 { left: 67%; width: 30%; }
.d-zones.on .zone { animation: zones 3.4s ease 0.45s forwards; }
.d-zones.on .z1 { animation-name: zone-lit; }
.d-zones .moving { left: 40%; top: 24%; width: 36%; height: 46%; }
.d-zones.on .moving { animation: snap 3.6s cubic-bezier(.4, 0, .2, 1) 0.4s forwards; }
.d-zones .cursor { position: absolute; left: 52%; top: 27%; width: 15px; height: 22px; background: #fff; clip-path: polygon(0 0, 0 100%, 28% 76%, 48% 100%, 62% 94%, 44% 70%, 80% 70%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.d-zones.on .cursor { animation: drag 3.6s cubic-bezier(.4, 0, .2, 1) 0.4s forwards; }
@keyframes zones { 0% { opacity: 0; } 12%, 78% { opacity: 0.55; } 100% { opacity: 0; } }
@keyframes zone-lit { 0% { opacity: 0; } 12% { opacity: 0.55; } 40%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes snap { 0% { left: 40%; top: 24%; width: 36%; height: 46%; } 50% { left: 9%; top: 27%; width: 36%; height: 46%; } 62%, 100% { left: 3%; top: 6%; width: 30%; height: 80%; } }
@keyframes drag { 0% { left: 52%; top: 27%; opacity: 1; } 50% { left: 21%; top: 30%; opacity: 1; } 62% { left: 21%; top: 30%; opacity: 1; } 80%, 100% { left: 26%; top: 44%; opacity: 0; } }

.d-switch { background: rgba(5, 5, 6, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.strip-win { position: relative; display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: rgba(18, 18, 22, 0.66); border: 1px solid var(--line); }
.thumb { width: 104px; display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 12px; color: var(--sub); }
.thumb .win { position: relative; width: 104px; height: 70px; }
.strip-win .ring { position: absolute; top: 11px; left: 11px; width: 118px; height: 108px; border-radius: 14px; border: 2px solid var(--silver); }
.d-switch.on .ring { animation: hop 3.6s ease 0.3s forwards; }
@keyframes hop { 0%, 22% { transform: none; } 30%, 52% { transform: translateX(118px); } 60%, 100% { transform: translateX(236px); } }

/* The day, at hand. */
.day-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.day-grid .cell { grid-column: auto; min-height: 270px; }
.day-grid .cell > :first-child { height: 76px; margin-bottom: 6px; }
@property --left { syntax: "<number>"; inherits: false; initial-value: 100; }
.mini-timer { position: relative; width: 76px; }
.mini-timer .arc {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--silver) calc(var(--left) * 1%), rgba(255, 255, 255, 0.1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5.5px));
  animation: countdown 20s linear infinite;
}
.mini-timer .t { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes countdown { from { --left: 100; } to { --left: 0; } }
.mini-files { display: flex; gap: 8px; align-items: center; }
.mini-files span { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.92); opacity: 0; }
.mini-files .plus { border: 1.5px dashed rgba(255, 255, 255, 0.22); color: var(--sub); font-size: 20px; font-weight: 300; }
.mini-files .folder::before { content: ""; width: 22px; height: 16px; border-radius: 3px; border: 2px solid #fff; border-top-width: 4px; }
.cell.shown .mini-files span { animation: pop 0.5s cubic-bezier(.2, .8, .2, 1) forwards; }
.cell.shown .mini-files span:nth-child(2) { animation-delay: 0.1s; }
.cell.shown .mini-files span:nth-child(3) { animation-delay: 0.2s; }
.cell.shown .mini-files span:nth-child(4) { animation-delay: 0.3s; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; }
.mini-bars i { flex: 1; height: 4%; border-radius: 4px; background: linear-gradient(180deg, #e9ecf1, #8d929b); transition: height 1.1s cubic-bezier(.2, .8, .2, 1); }
.cell.shown .mini-bars i:nth-child(1) { height: 38%; transition-delay: 0.05s; }
.cell.shown .mini-bars i:nth-child(2) { height: 62%; transition-delay: 0.1s; }
.cell.shown .mini-bars i:nth-child(3) { height: 48%; transition-delay: 0.15s; }
.cell.shown .mini-bars i:nth-child(4) { height: 90%; transition-delay: 0.2s; }
.cell.shown .mini-bars i:nth-child(5) { height: 70%; transition-delay: 0.25s; }
.cell.shown .mini-bars i:nth-child(6) { height: 34%; transition-delay: 0.3s; }
.cell.shown .mini-bars i:nth-child(7) { height: 56%; transition-delay: 0.35s; }
.mini-corner { position: relative; width: 118px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.mini-corner i { position: absolute; top: -9px; left: -9px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 22%, rgba(255, 255, 255, 0.25) 24% 56%, transparent 58%); animation: corner 2.6s ease-in-out infinite; }
@keyframes corner { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1.25); opacity: 1; } }

@media (max-width: 980px) {
  .console { grid-template-columns: 1fr; }
  .screen { order: -1; min-height: 360px; }
  .moves { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .moves::-webkit-scrollbar { display: none; }
  .move { flex: 0 0 min(300px, 80vw); scroll-snap-align: start; }
  .day-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .screen { min-height: 300px; }
  .strip-win { transform: scale(0.7); }
  .day-grid { grid-template-columns: 1fr; }
  .wave span { width: 40px; height: 40px; border-radius: 12px; }
  .wave { gap: 8px; }
}

/* ---------------------------------------------------------------- the type: lighter titles, the name fine and spaced */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
.kicker, .corner, .move .keys kbd { font-family: "Geist Mono", ui-monospace, monospace; }
.kicker, .corner { font-size: 11.5px; letter-spacing: 0.22em; font-weight: 500; }
h1, h2, .giant, .statement, .final h2, .section-head h2, .head-row h2, .price-card .amount, .figures .n { font-weight: 500; letter-spacing: -0.035em; }
.giant { letter-spacing: -0.04em; }
h1 em, h2 em, .giant em, .statement em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(180deg, #ffffff 0%, #c9ced6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.chrome {
  font-size: clamp(46px, 9vw, 132px);
  font-weight: 250;
  letter-spacing: 0.34em;
  line-height: 1;
  padding-left: 0.34em; /* the last letter's spacing, so the word stays centred */
  margin-top: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #e4e7ec 40%, #9aa0a9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 18px 50px rgba(185, 195, 210, 0.14));
  animation: chrome-in 1.8s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes chrome-in { from { opacity: 0; letter-spacing: 0.6em; filter: blur(8px) drop-shadow(0 18px 50px rgba(185, 195, 210, 0.14)); } to { opacity: 1; letter-spacing: 0.34em; filter: blur(0) drop-shadow(0 18px 50px rgba(185, 195, 210, 0.14)); } }
.chrome::after { padding-left: 0.34em; }
.hero .stage { margin-top: clamp(36px, 5vw, 64px); }

/* ---------------------------------------------------------------- workspaces: the desk, ready for the work at hand */

.spaces-show { position: relative; }
.space-stage { position: relative; }
.space-stage::after {
  content: "";
  position: absolute;
  inset: 10% 8% -4% 8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(200, 208, 222, 0.12), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}
.space-stage .desk { box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); }
.space-stage .m-card { display: none; }
.space-stage .m-dock { animation: none; opacity: 1; transform: translateX(-50%); z-index: 3; }
.space-stage .m-bar, .space-stage .m-island { z-index: 3; }
.desk[data-look="signature"] { --win: rgba(23, 24, 28, 0.96); --win-2: rgba(255, 255, 255, 0.06); }
.desk[data-look="studio"] { --win: rgba(19, 24, 33, 0.96); --win-2: rgba(143, 169, 207, 0.1); }
.desk[data-look="focus"] { --win: rgba(17, 22, 21, 0.96); --win-2: rgba(143, 179, 163, 0.1); }

/* The windows, as they open: each comes up in turn, as VELTR launches them. */
.m-win {
  position: absolute;
  left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y));
  width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h));
  border-radius: calc(var(--u) * 10);
  background: var(--win);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 calc(var(--u) * 24) calc(var(--u) * 60) rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: win-open 0.6s cubic-bezier(.2, .8, .2, 1) forwards;
  transition: background 0.8s ease;
}
.m-win.out { animation: win-close 0.3s ease forwards; }
@keyframes win-open { from { opacity: 0; transform: translateY(calc(var(--u) * 18)) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes win-close { from { opacity: 1; } to { opacity: 0; transform: scale(0.98); } }
.m-win .tb {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--u) * 7);
  height: calc(var(--u) * 26);
  padding: 0 calc(var(--u) * 10);
  font-size: calc(var(--u) * 10); font-weight: 550; color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.m-win .tb .ic { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: calc(var(--u) * 3.5); }
.m-win .tb .ctl { margin-left: auto; display: flex; gap: calc(var(--u) * 16); }
.m-win .tb .ctl i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 1px; }
.m-win .tb .ctl i:first-child { height: 0; border-width: 1px 0 0; margin-top: calc(var(--u) * 4); }
.m-win .bd { flex: 1; min-height: 0; padding: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 12); }
.m-win .col { display: flex; flex-direction: column; gap: calc(var(--u) * 9); min-width: 0; }
.m-win .grow { flex: 1; }
.ln { display: block; height: calc(var(--u) * 7); border-radius: calc(var(--u) * 4); background: rgba(255, 255, 255, 0.1); }
.ln.hi { background: rgba(255, 255, 255, 0.55); height: calc(var(--u) * 9); }
.ln.s { width: 40%; } .ln.m { width: 65%; } .ln.l { width: 88%; }
.blk { border-radius: calc(var(--u) * 8); }

/* Mail: the list, one message open. */
.k-mail .row { display: flex; gap: calc(var(--u) * 10); align-items: center; padding: calc(var(--u) * 9); border-radius: calc(var(--u) * 8); }
.k-mail .row.on { background: var(--win-2); }
.k-mail .av { flex: none; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; }
.k-mail .row .col { flex: 1; gap: calc(var(--u) * 6); }
/* Browser: the address, a page. */
.k-web .bd { flex-direction: column; }
.k-web .url { height: calc(var(--u) * 22); border-radius: calc(var(--u) * 11); background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; padding-left: calc(var(--u) * 12); }
.k-web .url .ln { width: 30%; height: calc(var(--u) * 6); }
.k-web .banner { flex: 1; background: linear-gradient(120deg, rgba(106, 167, 255, 0.5), rgba(47, 98, 217, 0.25) 50%, rgba(199, 162, 255, 0.3)); }
.k-web .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); height: 34%; }
.k-web .cards span { background: rgba(255, 255, 255, 0.06); }
/* A document being written. */
.k-doc .bd { flex-direction: column; padding: calc(var(--u) * 18) calc(var(--u) * 60); }
/* Photo editing: the tools, the picture, the layers. */
.k-edit .tools { flex: none; width: calc(var(--u) * 26); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.k-edit .tools span { height: calc(var(--u) * 26); border-radius: calc(var(--u) * 7); background: rgba(255, 255, 255, 0.07); }
.k-edit .tools span:nth-child(2) { background: rgba(143, 169, 207, 0.45); }
.k-edit .canvas {
  flex: 1; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 68% 34%, #ffe2b8 0 6%, rgba(255, 196, 140, 0.5) 7%, transparent 24%),
    linear-gradient(180deg, #2c3c66 0%, #c98a7a 52%, #e8b58a 60%);
}
.k-edit .canvas::before, .k-edit .canvas::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; }
.k-edit .canvas::before { height: 46%; background: #3a3550; clip-path: polygon(0 60%, 18% 20%, 32% 48%, 50% 6%, 66% 40%, 80% 18%, 100% 52%, 100% 100%, 0 100%); }
.k-edit .canvas::after { height: 28%; background: #1d1b2b; clip-path: polygon(0 40%, 22% 70%, 40% 30%, 60% 64%, 78% 26%, 100% 56%, 100% 100%, 0 100%); }
.k-edit .canvas .sel { position: absolute; left: 52%; top: 18%; width: 30%; height: 34%; border: 1px dashed rgba(255, 255, 255, 0.85); z-index: 1; animation: marching 1.2s linear infinite; }
@keyframes marching { 50% { border-color: rgba(255, 255, 255, 0.35); } }
.k-edit .layers { flex: none; width: 24%; }
.k-edit .layer { display: flex; gap: calc(var(--u) * 8); align-items: center; }
.k-edit .layer .blk { flex: none; width: calc(var(--u) * 30); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 5); }
/* References, pinned. */
.k-refs .bd { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; }
/* Music, playing. */
.k-music .bd { align-items: center; }
.k-music .cover { flex: none; width: 34%; aspect-ratio: 1; border-radius: calc(var(--u) * 10); background: linear-gradient(135deg, #e6e9ee, #5a5f8e 60%, #23264a); }
.k-music .eq { display: flex; gap: calc(var(--u) * 3); align-items: flex-end; height: calc(var(--u) * 18); }
.k-music .eq b { width: calc(var(--u) * 3.5); border-radius: 2px; background: var(--tint); animation: eq 0.9s ease-in-out infinite alternate; }
.k-music .eq b:nth-child(2) { animation-duration: 0.7s; }
.k-music .eq b:nth-child(3) { animation-duration: 1.1s; }
.k-music .track { height: calc(var(--u) * 4); border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.k-music .track i { display: block; height: 100%; width: 42%; background: var(--tint); }
/* The game library. */
.k-games .bd { flex-direction: column; }
.k-games .art {
  flex: 1; position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 75% 30%, rgba(143, 179, 163, 0.55), transparent 70%), radial-gradient(50% 60% at 20% 90%, rgba(60, 110, 160, 0.5), transparent 70%), linear-gradient(160deg, #0f1b1a, #07100f);
}
.k-games .art .play { position: absolute; left: 5%; bottom: 10%; height: calc(var(--u) * 26); width: calc(var(--u) * 90); border-radius: calc(var(--u) * 13); background: #f3f4f6; }
.k-games .art .ttl { position: absolute; left: 5%; bottom: 26%; width: 34%; height: calc(var(--u) * 16); border-radius: calc(var(--u) * 5); background: rgba(255, 255, 255, 0.85); }
.k-games .covers { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 10); height: 30%; }
/* The voice chat, with the team. */
.k-chat .msg { display: flex; gap: calc(var(--u) * 8); align-items: flex-start; }
.k-chat .msg .av { flex: none; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; }
.k-chat .msg .col { flex: 1; gap: calc(var(--u) * 6); }
.k-chat .voice { margin-top: auto; display: flex; gap: calc(var(--u) * 6); align-items: center; padding: calc(var(--u) * 9); border-radius: calc(var(--u) * 8); background: var(--win-2); }
.k-chat .voice .av { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(30, 215, 96, 0.8); }

/* The Dock, in a workspace that keeps only its apps. */
.space-stage .m-dock .app { transition: width 0.45s cubic-bezier(.2, .8, .2, 1), margin 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.3s, transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.space-stage .m-dock .app.g,
.space-stage .desk[data-space="play"] .m-dock .app:not(.g):not(.keep) { width: 0; margin-left: calc(var(--u) * -7); opacity: 0; transform: scale(0.5); }
.space-stage .desk[data-space="play"] .m-dock .app.g { width: calc(var(--u) * 36); margin-left: 0; opacity: 1; transform: none; }

/* The workspaces to choose, under the desktop; the one on fills as it plays. */
.space-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.space-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  height: 52px; padding: 0 20px 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--sub);
  font: inherit; font-size: 16px; font-weight: 560;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.space-tab:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.space-tab.on { color: var(--text); background: linear-gradient(180deg, var(--card-2), var(--card)); border-color: rgba(255, 255, 255, 0.24); }
.space-tab .keys { display: flex; gap: 4px; }
.space-tab kbd { font-family: "Geist Mono", ui-monospace, monospace; }
.space-tab .progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--silver); }
.space-tab.on .progress { animation: fill 6.5s linear forwards; }
.spaces-show.paused .space-tab.on .progress { animation-play-state: paused; }
.spaces-show.held .space-tab.on .progress { animation: none; width: 100%; opacity: 0.3; }
.space-line { text-align: center; margin: 20px auto 0; min-height: 2.4em; }

/* Three things more. */
.space-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.space-points .cell { grid-column: auto; min-height: 260px; }
.space-points .cell > :first-child { height: 76px; margin-bottom: 6px; }
.sp-save { position: relative; width: 118px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.sp-save .w { position: absolute; border-radius: 4px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.12); }
.sp-save .a { left: 7%; top: 10%; width: 46%; height: 78%; }
.sp-save .b { left: 57%; top: 10%; width: 36%; height: 36%; }
.sp-save .c { left: 57%; top: 52%; width: 36%; height: 36%; }
.sp-save .frame { position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); opacity: 0; }
.cell.shown .sp-save .frame { animation: snap-frame 3.2s ease-in-out infinite; }
@keyframes snap-frame { 0%, 55%, 100% { opacity: 0; } 62% { opacity: 1; } 75% { opacity: 0.2; } }
.sp-clock { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; max-width: 250px; }
.sp-clock b { width: 100%; font-family: "Geist Mono", ui-monospace, monospace; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px; }
.sp-clock span { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--faint); }
.sp-clock span.on { color: #0b0b0d; background: #e9ecf1; border-color: transparent; }
.sp-ready { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; }
.sp-ready span { font-size: 13.5px; font-weight: 560; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); opacity: 0; }
.sp-ready .add { border-style: dashed; color: var(--sub); background: none; }
.cell.shown .sp-ready span { animation: pop 0.5s cubic-bezier(.2, .8, .2, 1) forwards; }
.cell.shown .sp-ready span:nth-child(2) { animation-delay: 0.12s; }
.cell.shown .sp-ready span:nth-child(3) { animation-delay: 0.24s; }
.cell.shown .sp-ready span:nth-child(4) { animation-delay: 0.36s; }

@media (max-width: 980px) {
  .space-points { grid-template-columns: 1fr; }
  .space-points .cell { min-height: 0; }
}
@media (max-width: 720px) {
  .space-tab { height: 44px; padding: 0 14px; gap: 10px; font-size: 15px; }
  .space-tab .keys { display: none; }
}

/* ---------------------------------------------------------------- highlights: made yours, and productive */

/* Made yours: a setting moves, the Dock follows (its size, its corners, its colour). */
.s-custom .scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; }
.tune { width: min(300px, 76%); padding: 16px 20px; border-radius: 18px; display: grid; gap: 14px; }
.knob { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; font-size: 13px; color: var(--sub); }
.knob .track { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.knob .thumb { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #f3f4f6; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.knob .thumb.a { left: 28%; animation: knob-a 9s ease-in-out infinite; }
.knob .thumb.b { left: 22%; animation: knob-b 9s ease-in-out infinite; }
.knob .sw { position: relative; display: flex; gap: 10px; }
.knob .sw i { width: 16px; height: 16px; border-radius: 50%; }
.knob .sw i:nth-child(1) { background: #3a3d44; }
.knob .sw i:nth-child(2) { background: #6b45d6; }
.knob .sw i:nth-child(3) { background: #2f62d9; }
.knob .sw i:nth-child(4) { background: #c9a27a; }
.knob .pick { position: absolute; top: -3px; left: -3px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px #f3f4f6; animation: pick 9s ease-in-out infinite; }
.s-custom .wave { transform-origin: 50% 100%; animation: dock-size 9s ease-in-out infinite, dock-tint 9s ease-in-out infinite; }
.s-custom .wave span { animation: magnify 5s cubic-bezier(.4, 0, .2, 1) infinite, round 9s ease-in-out infinite; }
@keyframes knob-a { 0%, 6% { left: 28%; } 16%, 24% { left: 78%; } 32%, 100% { left: 28%; } }
@keyframes dock-size { 0%, 6% { transform: scale(1); } 16%, 24% { transform: scale(1.12); } 32%, 100% { transform: scale(1); } }
@keyframes knob-b { 0%, 36% { left: 22%; } 46%, 56% { left: 88%; } 64%, 100% { left: 22%; } }
@keyframes round { 0%, 36% { border-radius: 16px; } 46%, 56% { border-radius: 50%; } 64%, 100% { border-radius: 16px; } }
@keyframes pick { 0%, 68% { left: -3px; } 72%, 79% { left: 23px; } 83%, 90% { left: 49px; } 94%, 100% { left: -3px; } }
@keyframes dock-tint { 0%, 68% { background-color: rgba(30, 31, 36, 0.72); } 72%, 79% { background-color: rgba(84, 58, 160, 0.62); } 83%, 90% { background-color: rgba(38, 84, 170, 0.62); } 94%, 100% { background-color: rgba(30, 31, 36, 0.72); } }

/* Productive: Alt+Space, a word, everything that matches. */
.prod { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.prod .caps { display: flex; gap: 8px; }
.prod .caps kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 15px; padding: 7px 14px 8px; border-radius: 10px; animation: press 7s ease infinite; }
.prod .caps kbd:nth-child(2) { animation-delay: 0.12s; }
.prod .spotlight { animation: spot 7s cubic-bezier(.2, .8, .2, 1) infinite; }
.prod .typed { width: 0; animation: type-word 7s steps(7) infinite; }
.prod .result { opacity: 0; animation: result 7s ease infinite; }
.prod .result:nth-of-type(3) { animation-delay: 0.15s; }
.prod .result:nth-of-type(4) { animation-delay: 0.3s; }
@keyframes press { 0%, 2% { transform: none; } 5% { transform: translateY(2px); border-bottom-width: 1px; } 9%, 100% { transform: none; } }
@keyframes spot { 0%, 8% { opacity: 0; transform: translateY(10px) scale(0.97); } 14%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.98); } }
@keyframes type-word { 0%, 16% { width: 0; } 36%, 100% { width: 6.6ch; } }
@keyframes result { 0%, 38% { opacity: 0; transform: translateY(6px); } 44%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------- highlights, huge: black cards on a grey band, a line in bold */

.highlights { --slide: min(1260px, 88vw); margin-top: 60px; padding: 100px 0 84px; background: #161618; }
.highlights .head-row { width: var(--slide); margin: 0 auto 38px; }
.rail { gap: 22px; padding: 0 calc((100% - var(--slide)) / 2); }
.slide { flex: 0 0 var(--slide); height: clamp(540px, 50vw, 720px); border-radius: 30px; border: 0; }
.slide .caption {
  top: clamp(36px, 4vw, 58px);
  width: min(700px, 84%);
  font-size: clamp(21px, 2.1vw, 29px);
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: #f5f5f7;
}
.slide .scene { padding-top: clamp(140px, 13vw, 190px); }

.big-island { width: min(800px, 86%); gap: 28px; padding: 26px 40px 26px 26px; border-radius: 74px; }
.big-island .cover { width: clamp(76px, 8vw, 116px); height: clamp(76px, 8vw, 116px); border-radius: 26px; }
.big-island .words b { font-size: clamp(19px, 2.2vw, 29px); }
.big-island .words span { font-size: clamp(14px, 1.5vw, 19px); }
.big-island .bar { height: 6px; margin-top: 18px; border-radius: 3px; }
.big-island .eq { gap: 5px; height: 42px; }
.big-island .eq b { width: 6px; border-radius: 3px; }

.s-custom .scene { gap: clamp(28px, 4vw, 54px); }
.tune { width: min(450px, 80%); padding: 24px 30px; border-radius: 26px; gap: 22px; }
.knob { grid-template-columns: 96px 1fr; font-size: 16px; }
.knob .track { height: 5px; }
.knob .thumb { top: -8px; width: 21px; height: 21px; margin-left: -10.5px; }
.knob .sw { gap: 14px; }
.knob .sw i { width: 22px; height: 22px; }
.knob .pick { top: -4px; left: -4px; width: 30px; height: 30px; animation-name: pick-big; }
@keyframes pick-big { 0%, 68% { left: -4px; } 72%, 79% { left: 32px; } 83%, 90% { left: 68px; } 94%, 100% { left: -4px; } }
.wave { gap: 16px; padding: 16px 20px; border-radius: 38px; }
.wave span { width: clamp(52px, 6.6vw, 86px); height: clamp(52px, 6.6vw, 86px); border-radius: 23px; }
.s-custom .wave span { animation-name: magnify, round-big; }
@keyframes round-big { 0%, 36% { border-radius: 23px; } 46%, 56% { border-radius: 50%; } 64%, 100% { border-radius: 23px; } }

.prod { gap: 26px; }
.prod .spotlight { width: min(780px, 86%); border-radius: 24px; }
.prod .spotlight .field { height: 76px; padding: 0 28px; gap: 16px; font-size: clamp(20px, 2.2vw, 28px); }
.prod .spotlight .caret { height: 32px; }
.prod .spotlight .result { padding: 16px 28px; gap: 16px; font-size: clamp(15px, 1.6vw, 20px); }
.prod .spotlight .result > span { width: 36px; height: 36px; border-radius: 10px; }
.prod .spotlight .result em { font-size: 14px; }
.prod .caps kbd { font-size: 18px; padding: 9px 18px 10px; border-radius: 12px; }

.s-looks .scene { place-items: start center; }
.cycler { width: min(940px, 84%); border-radius: 22px; }
.film { inset: clamp(140px, 13vw, 190px) clamp(24px, 5vw, 72px) clamp(24px, 4vw, 60px); border-radius: 22px; }
.film .peek { height: 36px; }

/* The controls, as a pill: the dot of the slide showing fills as it plays; pause and play beside. */
.rail-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.rail-controls .dots { margin: 0; height: 56px; padding: 0 24px; gap: 12px; align-items: center; border-radius: 28px; background: rgba(66, 66, 69, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.42); overflow: hidden; cursor: pointer; transition: width 0.45s cubic-bezier(.2, .8, .2, 1), background 0.3s; }
.dots button:hover { background: rgba(255, 255, 255, 0.7); }
.dots button.on { width: 50px; background: rgba(255, 255, 255, 0.42); }
.dots button.on::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: #f5f5f7; animation: fill 6.5s linear forwards; }
.rail-controls.paused .dots button.on::after { animation-play-state: paused; }
.rail-controls.held .dots button.on::after { animation: none; width: 100%; }
.playpause { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(66, 66, 69, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #f5f5f7; cursor: pointer; transition: background 0.2s; }
.playpause:hover { background: rgba(92, 92, 97, 0.85); }
.playpause svg { width: 22px; height: 22px; }
.playpause .pause { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.playpause .play { fill: currentColor; display: none; }
.rail-controls.held .playpause .pause { display: none; }
.rail-controls.held .playpause .play { display: block; }

@media (max-width: 720px) {
  .highlights { padding: 70px 0 60px; }
  .slide { height: 560px; border-radius: 24px; }
  .slide .caption { font-size: 21px; }
  .slide .scene { padding-top: 150px; }
  .wave { gap: 7px; padding: 9px 11px; border-radius: 18px; }
  .wave span { width: 30px; height: 30px; border-radius: 9px; }
  .s-custom .wave span { animation-name: magnify, round; }
  .knob { grid-template-columns: 70px 1fr; font-size: 14px; }
  .tune { padding: 18px 20px; gap: 18px; }
  .big-island { padding: 16px 22px 16px 16px; gap: 16px; }
  .prod .spotlight .field { height: 58px; padding: 0 18px; }
  .prod .spotlight .result { padding: 12px 18px; }
  .film .peek { height: 26px; }
}

/* ---------------------------------------------------------------- before, after: Windows as it comes, then VELTR */

.before-after { padding-top: 150px; }
.compare {
  --cut: 50%;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.compare * { --u: calc(100cqw / 1280); }
.compare .windows, .compare .veltr { position: absolute; inset: 0; }
.compare .veltr { clip-path: inset(0 0 0 var(--cut)); }
.compare .veltr .desk { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }

/* Windows 11 as it comes: the blue bloom, files all over the desktop, the grey bar. */
.windows { overflow: hidden; background: linear-gradient(180deg, #dce9f7 0%, #c6daf2 55%, #a9c5ea 100%); }
.bloom { position: absolute; left: 50%; top: 56%; width: calc(var(--u) * 820); height: calc(var(--u) * 820); transform: translate(-50%, -50%); }
.bloom i {
  position: absolute;
  left: 35%; top: 4%;
  width: 30%; height: 46%;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(120% 90% at 50% 100%, #0a3cb4 0%, #1f63e3 40%, #6fb0ff 78%, rgba(190, 222, 255, 0.85) 100%);
  box-shadow: inset 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(255, 255, 255, 0.35);
  opacity: 0.9;
  mix-blend-mode: multiply;
}
.bloom i:nth-child(1) { transform: rotate(-78deg); }
.bloom i:nth-child(2) { transform: rotate(-47deg); }
.bloom i:nth-child(3) { transform: rotate(-16deg); }
.bloom i:nth-child(4) { transform: rotate(16deg); }
.bloom i:nth-child(5) { transform: rotate(47deg); }
.bloom i:nth-child(6) { transform: rotate(78deg); }
.windows .icons {
  position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 10);
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(6, calc(var(--u) * 100));
  grid-auto-columns: calc(var(--u) * 88);
  gap: calc(var(--u) * 4);
}
.windows .icons span {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6);
  text-align: center; font-size: calc(var(--u) * 11); line-height: 1.25;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  overflow-wrap: anywhere;
}
.windows .icons i { flex: none; width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.windows .icons .bin { width: calc(var(--u) * 36); background: linear-gradient(180deg, #f2f5f9, #b8c3d1); clip-path: polygon(8% 10%, 92% 10%, 82% 100%, 18% 100%); }
.windows .icons .folder { background: linear-gradient(180deg, #ffd96a, #f0b02c); clip-path: polygon(0 6%, 40% 6%, 48% 18%, 100% 18%, 100% 92%, 0 92%); }
.windows .icons .zip { background: linear-gradient(90deg, transparent 46%, #7a5a10 46% 54%, transparent 54%), linear-gradient(180deg, #ffd96a, #f0b02c); clip-path: polygon(0 6%, 40% 6%, 48% 18%, 100% 18%, 100% 92%, 0 92%); }
.windows .icons .doc, .windows .icons .pdf { width: calc(var(--u) * 34); background: linear-gradient(180deg, #fff, #eef1f5); box-shadow: inset calc(var(--u) * 9) 0 0 #2f62d9; border-radius: calc(var(--u) * 3); }
.windows .icons .pdf { box-shadow: inset calc(var(--u) * 9) 0 0 #d93a3a; }
.windows .icons .img { background: radial-gradient(circle at 70% 30%, #fff3c4 0 14%, transparent 15%), linear-gradient(180deg, #6fb6ff 0 55%, #3f9a5a 55%); border: calc(var(--u) * 3) solid #fff; border-radius: calc(var(--u) * 3); }
.windows .taskbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * 48);
  display: flex; align-items: center; justify-content: center;
  background: rgba(236, 239, 244, 0.88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.taskbar .mid { display: flex; align-items: center; gap: calc(var(--u) * 6); }
.taskbar .start { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1.6); width: calc(var(--u) * 36); height: calc(var(--u) * 36); padding: calc(var(--u) * 9); }
.taskbar .start b { border-radius: 1px; background: linear-gradient(135deg, #42a5ff, #0a62d6); }
.taskbar .search {
  display: flex; align-items: center; gap: calc(var(--u) * 8);
  width: calc(var(--u) * 210); height: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 16);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.07);
  color: #5f6166; font-size: calc(var(--u) * 12);
}
.taskbar .search .lens { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border: calc(var(--u) * 1.6) solid #3d3f44; border-radius: 50%; }
.taskbar .search .lens::after { display: none; }
.taskbar .app { position: relative; width: calc(var(--u) * 30); height: calc(var(--u) * 30); margin: 0 calc(var(--u) * 3); border-radius: calc(var(--u) * 7); }
.taskbar .app:nth-of-type(2)::after, .taskbar .app:nth-of-type(3)::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -8); width: calc(var(--u) * 6); height: calc(var(--u) * 3); margin-left: calc(var(--u) * -3); border-radius: 2px; background: #6b6f76; }
.taskbar .tray { position: absolute; right: calc(var(--u) * 14); display: flex; align-items: center; gap: calc(var(--u) * 12); color: #1b1c1f; font-size: calc(var(--u) * 11); }
.taskbar .glyph { width: calc(var(--u) * 13); height: calc(var(--u) * 10); border-radius: 2px; background: rgba(0, 0, 0, 0.62); }
.taskbar .clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.taskbar .clock b { font-weight: 500; }

.compare .tag {
  position: absolute; bottom: 9%; z-index: 3;
  padding: 7px 14px; border-radius: 999px;
  font: 500 11.5px "Geist Mono", ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(10, 10, 12, 0.66); color: #f5f5f7;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none; transition: opacity 0.3s;
}
.compare .tag.before { left: 3%; }
.compare .tag.after { right: 3%; }
.compare.edge-l .tag.before, .compare.edge-r .tag.after { opacity: 0; }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 4; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 24px rgba(0, 0, 0, 0.35); pointer-events: none; }
.compare .handle span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(250, 250, 252, 0.94); color: #1b1c1f; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); transition: transform 0.2s; }
.compare:active .handle span { transform: scale(0.92); }
.compare .handle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.compare .slider { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compare:focus-within .handle span { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------------------------------------------------------------- the search, to try */

.try { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 24px 54px; align-items: start; margin-top: 100px; }
.try-head h3 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
.try-head p { margin: 14px 0 0; color: var(--sub); font-size: 17px; }
.try-box { grid-column: 2; grid-row: 1 / span 2; min-height: 430px; overflow: hidden; border-radius: 22px; background: rgba(28, 29, 33, 0.96); border: 1px solid var(--line-2); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); }
.try-box .field { display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 22px; border-bottom: 1px solid var(--line); cursor: text; }
.try-box .field .lens { flex: none; position: relative; width: 16px; height: 16px; border: 2px solid var(--sub); border-radius: 50%; }
.try-box input { flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 21px; }
.try-box input::placeholder { color: var(--faint); }
.try-box .keys { display: flex; gap: 4px; }
.try-box kbd { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; }
.try-answer { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.try-answer[hidden] { display: none; }
.try-answer .big { font-size: 34px; font-weight: 400; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.try-answer em { flex: none; font-style: normal; font-size: 13px; color: var(--faint); }
.try-answer.copied em { color: #8fb3a3; }
.try-results { min-height: 300px; padding: 8px; }
.try-results:empty { display: none; }
.try-results .group { padding: 10px 12px 6px; font-size: 12px; font-weight: 600; color: var(--faint); }
.try-results .res { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 15.5px; cursor: default; }
.try-results .res.on { background: rgba(255, 255, 255, 0.08); }
.try-results .res > span:first-child { position: relative; flex: none; width: 30px; height: 30px; border-radius: 8px; }
.try-results .res svg { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.try-results .res .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c4c6cc; }
.try-results .res .name b { color: var(--text); font-weight: 650; }
.try-results .res em { flex: none; margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--faint); }
.try-results .none { padding: 28px 12px; font-size: 15px; color: var(--faint); }
.try-chips { display: flex; flex-wrap: wrap; align-content: start; gap: 8px; }
.try-chips button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--sub); font: 500 13px "Geist Mono", ui-monospace, monospace; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.try-chips button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); }
@media (max-width: 980px) {
  .try { grid-template-columns: 1fr; }
  .try-box { grid-column: auto; grid-row: auto; }
  .try-box .keys { display: none; }
}

/* ---------------------------------------------------------------- the drawn Docks grow under the pointer */

.m-dock .app { transform-origin: 50% 100%; transition: transform 0.14s ease-out, margin 0.14s ease-out; }

/* ---------------------------------------------------------------- a light moment: Calm's warm whites, its shore */

.editorial.light {
  margin: 150px clamp(10px, 2vw, 28px) 0;
  padding: clamp(90px, 10vw, 140px) 0;
  border-radius: clamp(28px, 4vw, 48px);
  color: #1d1a17;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(180deg, #f6f0e7 0%, #efe6da 55%, #e3e4de 70%, #e8dccb 82%, #dbc5a5 100%);
}
.editorial.light .kicker { color: #8a7d70; }
.editorial.light .giant em { background-image: linear-gradient(180deg, #4f443a 0%, #a38e79 100%); }
.editorial.light .prose { color: #6f655c; }
.editorial.light .prose b { color: #1d1a17; }
.editorial.light .figures div { background: rgba(255, 255, 255, 0.55); border-color: rgba(60, 45, 30, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.editorial.light .figures small, .editorial.light .figures .l { color: #7a7068; }

/* ---------------------------------------------------------------- the name, very large, fading at the foot of the page */

footer:has(.footer-mark) { overflow: hidden; padding-bottom: 0; }
.footer-mark {
  margin: 60px 0 -0.14em;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(64px, 18vw, 300px);
  font-weight: 250;
  line-height: 0.8;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
  background: linear-gradient(180deg, rgba(245, 245, 247, 0.2) 0%, rgba(245, 245, 247, 0) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* ---------------------------------------------------------------- cards catch the light where the pointer is */

.cell::before, .cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.cell::after { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 60%); }
.cell::before {
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.4), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.cell:hover::before, .cell:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- after the purchase: three steps */

.thanks { padding: 150px 0 110px; }
.thanks .wrap { max-width: 860px; }
.thanks h1 { margin: 14px 0 0; font-size: clamp(44px, 7vw, 84px); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
.thanks .lead { margin: 22px 0 0; color: var(--sub); font-size: 19px; max-width: 560px; }
.steps { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 14px; }
.steps li { position: relative; padding: 28px 30px 30px 96px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.steps .n { position: absolute; left: 30px; top: 30px; font: 500 15px "Geist Mono", ui-monospace, monospace; letter-spacing: 0.1em; color: var(--faint); }
.steps h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.steps p { margin: 0; color: var(--sub); font-size: 16px; max-width: 600px; }
.steps p b { color: var(--text); font-weight: 600; }
.steps .button { margin-top: 18px; }
.thanks .help { margin: 34px 0 0; color: var(--faint); font-size: 15px; }
.thanks .help a { color: var(--sub); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .steps li { padding: 64px 22px 24px; }
  .steps .n { left: 22px; top: 24px; }
}

/* Before the launch: Buy waits, said so. */
.button.soon { opacity: 0.5; cursor: default; pointer-events: none; }