/* Rigsight site. Black and white like the app; colour only where it means something. */
/* Inter (SIL Open Font License, fonts/OFL.txt), latin subset, served from here: no third-party requests. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --stroke: #1f1f1f;
  --stroke-2: #2a2a2a;
  --text: #fff;
  --muted: #a3a3a3;
  --faint: #7c7c7c;
  --dim: #6b6b6b;
  --blue: #5699ef;
  --green: #42d0a8;
  --cpu: #5b8cff;
  --gpu: #3ddc97;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #b18cff;
  --cyan: #38bdf8;
  --brand: linear-gradient(120deg, #5699ef 0%, #4cb4cb 50%, #42d0a8 100%);
  --radius: 18px;
  --wrap: 1180px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: clamp(32px, 5vw, 56px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 7px; border-radius: 6px;
  border: 1px solid var(--stroke-2); border-bottom-width: 2px; background: var(--surface-2);
  font: 600 .82em/1.5 Inter, "Segoe UI", sans-serif; color: var(--text); text-align: center;
}
code { font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.dim { color: var(--dim); }
.grad { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.sub { color: var(--muted); font-size: 18px; max-width: 620px; }
.mobile-only.mobile-only { display: none; }

/* ── Background ─────────────────────────────────────────── */
.bg-glow {
  position: fixed; inset: -20vh -10vw auto; height: 110vh; pointer-events: none; z-index: -1;
  background:
    radial-gradient(42% 38% at 30% 30%, rgba(86, 153, 239, .20), transparent 70%),
    radial-gradient(40% 36% at 72% 38%, rgba(66, 208, 168, .15), transparent 70%);
  filter: blur(10px);
}
/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 14px; border: 1px solid transparent;
  font: 600 16px/1 Inter, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 10px 40px -10px rgba(86,153,239,.55); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 16px 50px -8px rgba(66,208,168,.6); }
.btn-ghost { color: var(--text); border-color: var(--stroke-2); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: #444; background: rgba(255,255,255,.06); }
.btn-small { height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #e8e8e8; }
.btn-big { height: 58px; padding: 0 34px; font-size: 17px; }

/* ── Nav ────────────────────────────────────────────────── */
/* Fixed, and hidden over the hero: it slides in once you scroll (app.js toggles .scrolled). */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(0,0,0,.72); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--stroke);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .45s var(--ease), opacity .35s, visibility 0s .45s;
}
.nav.scrolled { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--ease), opacity .35s, visibility 0s; }
[id] { scroll-margin-top: 80px; }
.nav-inner { height: 68px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; text-decoration: none; }
.brand img { border-radius: 7px; }
.nav-links { display: flex; gap: 28px; margin-left: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 15px; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.nav-coffee { color: #FFDD00; font-weight: 600; }
.nav-links a.nav-coffee:hover { color: #fff3a3; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.icon-link { color: var(--muted); display: inline-flex; transition: color .2s; }
.icon-link:hover { color: var(--text); }

/* ── Hero ───────────────────────────────────────────────── */
/* Exactly one screen tall. Five rows of real app screenshots drift past in alternating directions behind everything;
   a soft black veil sits behind the centre copy so it always reads. The rows scroll away with the hero. */
.hero {
  position: relative; isolation: isolate; overflow: hidden; background: #000;
  height: 100vh; height: 100svh; display: grid; place-items: center; padding: 64px 0;
}
.marquee {
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-rows: repeat(5, 1fr); gap: var(--gap); padding: var(--gap) 0;
  --gap: clamp(10px, 1.2vw, 16px); --fade: 10%;
  transform: perspective(1400px) rotateX(9deg) scale(1.14); transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.row { overflow: hidden; min-height: 0; }
.lane { display: flex; height: 100%; width: max-content; will-change: transform; animation: slide var(--dur, 80s) linear infinite; }
.row:nth-child(1) .lane { --dur: 72s; }
.row:nth-child(2) .lane { --dur: 88s; animation-direction: reverse; }
.row:nth-child(3) .lane { --dur: 64s; }
.row:nth-child(4) .lane { --dur: 96s; animation-direction: reverse; }
.row:nth-child(5) .lane { --dur: 78s; }
/* The lane holds the same track twice; moving it by exactly one track loops without a seam. */
@keyframes slide { to { transform: translateX(-50%); } }
.track { display: flex; gap: var(--gap); height: 100%; padding-right: var(--gap); flex: none; }
.track img {
  display: block; height: 100%; width: auto; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: #0a0a0a; opacity: .58; box-shadow: 0 20px 60px -20px rgba(0,0,0,.9);
}
/* A card a phone can't see at the start sits in a <picture> with an empty stand-in; the card itself stays the row's item. */
.track picture { display: contents; }
.track source { display: none; }
.hero.paused .lane { animation-play-state: paused; }
.veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 58% at 50% 50%, #000 0%, rgba(0,0,0,.97) 40%, rgba(0,0,0,.72) 68%, rgba(0,0,0,.25) 88%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 14%, transparent 86%, #000 100%);
}
.hero-copy { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo { border-radius: 16px; box-shadow: 0 16px 50px -12px rgba(86,153,239,.6); }
.hero h1 { margin-top: 22px; font-size: clamp(56px, 9vw, 108px); font-weight: 800; letter-spacing: -0.055em; line-height: .95; }
.lead { margin-top: 20px; max-width: 560px; color: var(--muted); font-size: clamp(17px, 2vw, 20px); line-height: 1.5; text-wrap: balance; }
.cta-row { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.meta { margin-top: 18px; color: var(--faint); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.meta > span { white-space: nowrap; }
.meta > span + span::before { content: "·"; margin: 0 10px; opacity: .6; }
.meta a { color: var(--muted); }
.copy-link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px;
  background: transparent; border: 1px dashed var(--stroke-2); color: var(--muted); font: 500 14px Inter, sans-serif; cursor: pointer;
}
/* Short windows: tighter type and spacing so the whole centre block fits on the first screen. */
@media (max-height: 820px) and (min-width: 641px) {
  .hero { padding: 48px 0; }
  .hero-logo { width: 52px; height: 52px; border-radius: 13px; }
  .hero h1 { margin-top: 16px; font-size: clamp(52px, 8vw, 88px); }
  .lead { margin-top: 14px; font-size: 17px; }
  .cta-row { margin-top: 24px; }
  .meta { margin-top: 14px; }
  .term-wrap { margin-top: 22px; }
}
@media (max-height: 680px) and (min-width: 641px) {
  .hero h1 { font-size: clamp(44px, 7vw, 72px); }
  .term-wrap { display: none; }
}

/* ── Strip ──────────────────────────────────────────────── */
.strip { margin-top: 0; border-block: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 34px 24px; display: grid; gap: 6px; border-left: 1px solid var(--stroke); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; }
.stat span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }

/* ── Idea ───────────────────────────────────────────────── */
.idea { padding: 140px 0 40px; text-align: center; }
.compare { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
.cmp { border-radius: var(--radius); padding: 32px; border: 1px solid var(--stroke); background: var(--surface); }
.cmp h3 { margin-bottom: 18px; }
.cmp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cmp li { position: relative; padding-left: 30px; color: var(--muted); }
.cmp-old li::before { content: "×"; position: absolute; left: 4px; top: -1px; color: var(--faint); font-weight: 600; }
.cmp-new { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--brand) border-box; border: 1px solid transparent; box-shadow: 0 30px 80px -40px rgba(66,208,168,.45); }
.cmp-new li { color: #e6e6e6; }
.cmp-new li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.2 13.6 4.6 10l-1.4 1.4 5 5 9-9-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ── Features ───────────────────────────────────────────── */
.features { padding-top: 120px; display: grid; gap: 150px; }
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.feature.flip { grid-template-columns: 7fr 5fr; }
.feature.flip .f-copy { order: 2; }
.f-copy h2 { font-size: clamp(30px, 4vw, 46px); margin: 18px 0 18px; }
.f-copy > p { color: var(--muted); font-size: 17.5px; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; border-radius: 8px; }
.tag-blue { color: var(--cpu); background: rgba(91,140,255,.12); }
.tag-green { color: var(--gpu); background: rgba(61,220,151,.12); }
.tag-purple { color: var(--purple); background: rgba(177,140,255,.12); }
.tag-red { color: var(--red); background: rgba(248,113,113,.12); }
.tag-amber { color: var(--amber); background: rgba(251,191,36,.12); }
.tag-cyan { color: var(--cyan); background: rgba(56,189,248,.12); }
.checks { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: #d4d4d4; font-size: 15.5px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px;
  background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2342d0a8' d='M8.2 13.6 4.6 10l-1.4 1.4 5 5 9-9-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}
.shot {
  margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid #242424; cursor: zoom-in;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.shot picture { display: contents; }
.shot:hover { transform: translateY(-4px); box-shadow: 0 50px 110px -40px rgba(86,153,239,.35), 0 0 0 1px rgba(255,255,255,.06); }

/* ── Overlay section ────────────────────────────────────── */
.overlay-sec { margin-top: 170px; padding: 110px 0; background: radial-gradient(60% 80% at 80% 50%, rgba(251,191,36,.08), transparent 70%); border-block: 1px solid var(--stroke); }
.overlay-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.game { margin: 0; display: grid; justify-items: center; gap: 18px; }
.game-clip { width: min(100%, 420px); border-radius: 14px; overflow: hidden; border: 1px solid #2a2a2a; background: #000; box-shadow: 0 40px 100px -40px rgba(251,191,36,.35), 0 0 0 1px rgba(255,255,255,.04); }
.game-clip video { display: block; width: 100%; height: auto; }
.game figcaption { color: var(--faint); font-size: 14px; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; }
.game-hint { display: inline-flex; gap: 5px; }

/* ── More ───────────────────────────────────────────────── */
.more { padding: 150px 0 0; text-align: center; }
.cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.card { padding: 28px; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface); transition: border-color .3s, transform .4s var(--ease), background .3s; }
.card:hover { border-color: #333; transform: translateY(-3px); background: #0e0e0e; }
.card h3 { margin: 18px 0 8px; }
.card p { color: var(--muted); font-size: 15px; }
.c-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.c-icon svg { width: 22px; height: 22px; }

/* ── Themes ─────────────────────────────────────────────── */
.themes { padding: 160px 0 0; }
.themes-head { text-align: center; display: grid; justify-items: center; gap: 16px; }
.themes-head .eyebrow { margin: 0; }
.compare-slider { position: relative; margin-top: 50px; border-radius: 16px; overflow: hidden; border: 1px solid #2a2a2a; user-select: none; -webkit-user-select: none; box-shadow: 0 50px 120px -50px rgba(255,255,255,.18); }
.cs-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cs-top img { width: 100%; height: 100%; object-fit: cover; }
.cs-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.cs-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6 3 12l6 6V6zm6 0v12l6-6z'/%3E%3C/svg%3E"); background-size: 20px; background-position: center; background-repeat: no-repeat; }
.compare-slider input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.cs-label { position: absolute; bottom: 16px; padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; pointer-events: none; }
.cs-l { left: 16px; background: rgba(0,0,0,.08); color: #000; border: 1px solid rgba(0,0,0,.12); }
.cs-r { right: 16px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.15); }

/* ── Light ──────────────────────────────────────────────── */
.light { padding: 160px 0 0; }
.light-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.light-grid h2 { margin-bottom: 22px; }
.meters { display: grid; gap: 26px; padding: 34px; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface); }
.m-head { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.m-head b { color: var(--text); font-weight: 600; white-space: nowrap; }
.m-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.m-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--brand); transition: width 1.4s var(--ease); }
.m-bar i.m-muted { background: #3a3a3a; }
.meters.in .m-bar i { width: var(--w); }
.m-note { color: var(--faint); font-size: 13px; }
.lite { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lite > div { display: grid; gap: 6px; padding: 30px; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface); }
.lite b { white-space: nowrap; font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -0.04em; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lite span { color: var(--muted); font-size: 15px; }

/* ── Privacy ────────────────────────────────────────────── */
.privacy { padding: 160px 0 0; }
.privacy-card { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 52px; border-radius: 24px; border: 1px solid var(--stroke); background: radial-gradient(80% 120% at 0% 0%, rgba(86,153,239,.12), transparent 60%), var(--surface); }
.privacy-card h2 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px; }
.lock { width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; background: var(--brand); color: #000; box-shadow: 0 20px 60px -15px rgba(66,208,168,.6); }
.lock svg { width: 46px; height: 46px; }
.never { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--faint); font-size: 14px; }
.never span { color: var(--text); font-weight: 600; }
.never em { font-style: normal; color: var(--muted); padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid rgba(248,113,113,.28); background: rgba(248,113,113,.06); }
.never em::before { content: "\2715"; color: #f87171; font-size: 11px; font-weight: 700; margin-right: 8px; }

/* ── Install ────────────────────────────────────────────── */
.install { padding: 160px 0 0; text-align: center; }
.steps { margin: 56px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; counter-reset: s; }
.steps li { padding: 30px; border-radius: var(--radius); border: 1px solid var(--stroke); background: var(--surface); }
.steps h3 { margin: 18px 0 8px; }
.steps p { color: var(--muted); font-size: 15px; }
.n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #000; font-weight: 700; }
.smartscreen { margin: 26px auto 0; max-width: 780px; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(251,191,36,.25); background: rgba(251,191,36,.06); color: var(--muted); font-size: 14.5px; }
.smartscreen svg { color: var(--amber); flex: none; margin-top: 3px; }
.smartscreen b { color: var(--text); font-weight: 600; }

/* ── Install command ────────────────────────────────────── */
.term-wrap { margin-top: 30px; display: grid; justify-items: center; gap: 10px; }
.term-caption { color: var(--faint); font-size: 13px; }
.term {
  position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 7px 7px 7px 7px; border-radius: 14px;
  background: linear-gradient(#0b0b0b, #0b0b0b) padding-box, linear-gradient(120deg, rgba(86,153,239,.55), rgba(255,255,255,.08) 45%, rgba(66,208,168,.55)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 50px -24px rgba(86,153,239,.55), inset 0 1px 0 rgba(255,255,255,.04);
}
.term-badge {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: var(--brand); color: #04110d; font: 800 13px/1 "Cascadia Code", Consolas, monospace; letter-spacing: -1px;
}
.term code {
  font: 500 14.5px/1.4 "Cascadia Code", Consolas, ui-monospace, Menlo, monospace; background: none; padding: 0 4px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #d4d4d4;
}
.t-cmd { color: #7dd3fc; font-weight: 600; }
.t-url { color: #e5e5e5; }
.t-op { color: #86efac; padding: 0 2px; }
.term-copy {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--stroke-2);
  background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.term-copy:hover { background: rgba(255,255,255,.1); color: var(--text); border-color: #3a3a3a; }
.term-copy .i-done { display: none; }
.term-copy.done { color: var(--green); border-color: rgba(66,208,168,.5); }
.term-copy.done .i-copy { display: none; }
.term-copy.done .i-done { display: block; }
.term-big { display: flex; margin-top: 4px; padding: 9px; }
.term-big code { flex: 1; font-size: 15px; }
.cli-card { margin: 44px auto 0; max-width: 900px; display: grid; gap: 18px; text-align: left; padding: 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--stroke); }
.install-cta { margin-top: 36px; }
.install-cta + .steps { margin-top: 28px; }
.or + .cli-card { margin-top: 18px; }
.cli-card h3 { margin-bottom: 8px; }
.cli-card p { color: var(--muted); font-size: 15px; }
.cli-big { margin: 0; display: flex; padding-left: 18px; }
.cli-big code { flex: 1; font-size: 15px; }
.or { margin-top: 30px; color: var(--faint); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.or + .steps { margin-top: 18px; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { padding: 160px 0 0; max-width: 820px; }
.faq h2 { text-align: center; margin-bottom: 44px; }
.faq-list { display: grid; gap: 10px; }
details { border: 1px solid var(--stroke); border-radius: 14px; background: var(--surface); transition: border-color .2s; }
details[open] { border-color: #333; }
summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 16.5px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease); }
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
details p { padding: 0 22px 22px; color: var(--muted); }

/* ── Final ──────────────────────────────────────────────── */
.final { padding: 160px 0 120px; }
.final-card { text-align: center; padding: 80px 24px; border-radius: 28px; border: 1px solid var(--stroke); display: grid; justify-items: center; gap: 18px;
  background: radial-gradient(60% 90% at 50% 0%, rgba(86,153,239,.22), transparent 70%), radial-gradient(50% 70% at 50% 100%, rgba(66,208,168,.14), transparent 70%), var(--surface); }
.final-card img { border-radius: 18px; box-shadow: 0 20px 60px -10px rgba(86,153,239,.6); margin-bottom: 6px; }
.final-card h2 { font-size: clamp(40px, 7vw, 76px); font-weight: 800; letter-spacing: -0.05em; }
.final-card .btn { margin-top: 12px; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--stroke); padding: 36px 0 48px; }
.foot-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.foot-inner nav { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-inner nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.foot-inner nav a:hover { color: var(--text); }
.foot-inner nav a.support { display: inline-flex; align-items: center; gap: 6px; color: #FFDD00; }
.foot-inner nav a.support:hover { color: #fff3a3; }
.credits { width: 100%; color: var(--faint); font-size: 13px; }

/* ── Lightbox, toast ────────────────────────────────────── */
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: #000; font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.88); backdrop-filter: blur(8px); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-height: 92vh; width: auto; border-radius: 12px; border: 1px solid #333; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 110; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 12px; background: #fff; color: #000; font-weight: 600; font-size: 14px; transition: all .35s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Reveal on scroll ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal:nth-child(2) { transition-delay: .06s; }
.hero .reveal:nth-child(3) { transition-delay: .12s; }
.hero .reveal:nth-child(4) { transition-delay: .18s; }
.hero .reveal:nth-child(5) { transition-delay: .24s; }
.hero .reveal:nth-child(6) { transition-delay: .3s; }

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .feature, .overlay-grid, .light-grid { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip { grid-template-columns: 1fr; }
  .feature.flip .f-copy { order: 0; }
  .features { gap: 110px; }
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--stroke); padding: 26px 0; }
  .stat:nth-child(-n+2) { border-top: 0; }
  .stat:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--stroke); }
  .cards { grid-template-columns: 1fr 1fr; }
}

/* ── Phone ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .mobile-only.mobile-only { display: inline-flex; }
  .desktop-only { display: none; }
  .nav-inner { height: 60px; }
  /* Phones: all five rows fill the screen top to bottom (small cards, so plenty of them show), and the veil is a
     narrower band behind the copy, so the app stays visible above and below it. */
  .hero { padding: 24px 0; }
  .marquee { --gap: 8px; --fade: 4%; transform: perspective(900px) rotateX(6deg) scale(1.1); }
  .track img { border-radius: 8px; opacity: .62; }
  .veil { background: radial-gradient(ellipse 110% 44% at 50% 52%, #000 0%, rgba(0,0,0,.95) 62%, rgba(0,0,0,.6) 84%, transparent 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 10%, transparent 90%, #000 100%); }
  .hero-logo { width: 52px; height: 52px; border-radius: 13px; }
  .hero h1 { margin-top: 16px; }
  .lead { margin-top: 14px; }
  .cta-row { margin-top: 24px; width: 100%; flex-direction: column; }
  .cta-row .btn { width: 100%; }
  /* The version, Windows and licence line wraps without a stray leading dot. */
  .meta { font-size: 13px; gap: 4px 14px; }
  .meta > span + span::before { content: none; }
  .copy-link { font-size: 13px; padding: 9px 12px; }

  /* Whole-window screenshots give way to a few of the page's cards, each one whole and stacked (img/phone): a window
     shrunk to a phone's width can't be read, and a window cropped to fit looks cut. The cards bring their own edges. */
  .shot.win { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
  .shot.win img { width: 100%; height: auto; }
  .shot:hover { transform: none; }
  .strip-grid { grid-template-columns: 1fr 1fr; }
  .stat b { font-size: 21px; }
  .stat span { font-size: 13px; }
  .idea { padding-top: 72px; }
  .compare { grid-template-columns: 1fr; }
  .cmp { padding: 24px; }
  .features { padding-top: 72px; gap: 72px; }
  .f-copy > p { font-size: 16px; }
  .overlay-sec { margin-top: 80px; padding: 64px 0; }
  .more, .themes, .light, .privacy, .install, .faq { padding-top: 84px; }
  .cards, .steps { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  /* Cards and install steps: the icon or number beside the title instead of above it, so they take half the height. */
  .card, .steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 20px; }
  .card > .c-icon, .steps li > .n { grid-row: span 2; align-self: start; }
  .card h3, .steps h3 { margin: 0 0 4px; }
  .card p, .steps p { grid-column: 2; }
  .cli-card { padding: 22px 18px; }
  .lite > div { padding: 22px 18px; }
  .lite b { font-size: 30px; }
  .term-big { flex-wrap: wrap; }
  .term-big code { white-space: normal; font-size: 13px; flex-basis: calc(100% - 100px); }
  .term-big .t-cmd, .term-big .t-op { white-space: nowrap; }
  .privacy-card { grid-template-columns: 1fr; padding: 30px 24px; gap: 24px; }
  .lock { width: 68px; height: 68px; border-radius: 20px; }
  .lock svg { width: 34px; height: 34px; }
  .meters { padding: 24px; }
  .m-head { flex-direction: column; gap: 2px; }
  .final { padding: 84px 0 64px; }
  .final-card { padding: 56px 20px; }
  .final-card .btn { width: 100%; }
}

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

/* ── Groups: several pages under one heading, one shown at a time ─────────
   Without scripts there are no tabs and every page shows, one under the other. With them (html.js), the pages share one
   place: all are laid out there so the section keeps the height of its tallest, and the picked one fades in. */
.group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 54px; }
.g-head { text-align: center; display: grid; justify-items: center; }
.g-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.tabs { display: none; }
.panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 110px; }
.pane { min-width: 0; }
.f-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 16px; text-wrap: balance; }
.tag + .tag { margin-left: 8px; }
.tag-plain { color: var(--muted); background: rgba(255,255,255,.07); }

.js .tabs {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 30px; padding: 5px;
  border: 1px solid var(--stroke-2); border-radius: 14px; background: var(--surface);
}
.tab {
  font: inherit; font-size: 15px; font-weight: 600; color: #e5e5e5; background: rgba(255,255,255,.05); border: 0; cursor: pointer;
  padding: 9px 18px; border-radius: 10px; transition: color .2s, background .2s;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.1); }
.tab[aria-selected="true"] { color: #000; background: #fff; }
.tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.js .panes { gap: 0; }
.js .pane { grid-area: 1 / 1; transition: opacity .35s var(--ease), visibility 0s; }
.js .pane[inert] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s .2s; }

.overlay-sec .group { gap: 48px; }
.cards-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .cards-4 { grid-template-columns: 1fr 1fr; }
  /* One column: a hidden page takes no room (stacked in one place, the tallest would leave a gap under the others). */
  .js .pane[inert] { display: none; }
  .group { gap: 36px; }
  .panes { gap: 72px; }
}
@media (max-width: 640px) {
  .cards-4 { grid-template-columns: 1fr; }
  /* Every name on screen: they wrap onto a second row (a row you had to swipe hid the last ones). */
  /* The names stay under the top bar while their pages scroll by, so another page is one tap away without scrolling
     back up. For that they must be the group's own child: the heading's box steps aside (display: contents). */
  .js .group { gap: 0; }
  .js .g-head { display: contents; }
  .js .g-head > * { justify-self: center; text-align: center; }
  .js .tabs { position: sticky; top: 62px; z-index: 20; margin-top: 22px; background: #0c0c0c; box-shadow: 0 10px 28px rgba(0,0,0,.7); }
  .js .panes { margin-top: 36px; }
  .tab { white-space: nowrap; padding: 9px 14px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pane, .js .pane[inert] { transition: none; }
}

/* ── The idea's picture: a past day, right under the line ── */
.idea-sub { margin: 18px auto 0; max-width: 620px; }
.idea-shot { max-width: 1000px; margin: 48px auto 0; }
@media (max-width: 640px) { .idea-shot { margin-top: 32px; } }

/* The first screen's command box is the second way in: no glow, no colour, so the Download button leads. */
.hero .term { background: #0b0b0b; border-color: var(--stroke-2); box-shadow: none; }
.hero .term-badge { background: #1f1f1f; color: var(--muted); }
.hero .t-cmd, .hero .t-op { color: var(--muted); }
.hero .t-url { color: var(--muted); }