/* ─────────────────────────────────────────────────────────────────────────────
   Landing page.

   Treatment: an instrument panel rather than a brochure, dense where it should
   be dense, one accent (Velocity Cyan, the product's own), numbers in tabular
   mono because the numbers are the argument. Semantic colour is used only for
   measured win/loss, never as decoration.
   ───────────────────────────────────────────────────────────────────────────── */

/* Brand: Velocity Cyan. These are the same four values the panel's own
   stylesheet defines — ink #04222b, deep #00728f, mid #0093b8, bright #31c6e6.
   The site and the product must not drift apart.

   Contrast note: --faint and --emerald are used for small text (eyebrows, units,
   figcaptions, the delta column), so both are set to clear WCAG AA at 4.5:1
   against their own ground in each theme — measured, not eyeballed. The earlier
   values (#8590a0, #059669) came out at 3.23:1 and 3.77:1 on white. */
:root {
  --blue: #00728f;
  /* Filled surfaces need a blue that carries white text at 4.5:1. The link blue
     is lightened in dark mode for legibility against the page, which takes it
     to 3.07:1 under white button text — so buttons get their own token. */
  --blue-solid: #00728f;
  --emerald: #047857;
  --rose: #be123c;
  --ink: #12181f;
  --muted: #55606f;
  --faint: #6b7482;
  --line: #e3e8ef;
  --line-soft: #eef1f6;
  --panel: #ffffff;
  --bg: #ffffff;
  --bg-alt: #f7f9fb;
  --shadow: 0 1px 2px rgba(16, 24, 32, 0.05), 0 12px 32px rgba(16, 24, 32, 0.07);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
}

:root[data-theme="dark"] {
  --blue: #31c6e6;
  --blue-solid: #00728f;
  --emerald: #34d399;
  --rose: #fb7185;
  --ink: #e9eef4;
  --muted: #9ba6b5;
  --faint: #7d8695;
  --line: #232c38;
  --line-soft: #1b2530;
  --panel: #151b24;
  --bg: #0d1117;
  --bg-alt: #11161e;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 36px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { margin: 0 auto; }

h1, h2, h3 { letter-spacing: -0.021em; text-wrap: balance; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* The wake mark: three bars of decreasing length, the low-pressure wake behind
   something moving fast. Same geometry as the panel sidebar and the favicon.
   The wordmark splits by weight, not by colour, so it holds together small. */
/* 19px, not 16px. At 16 the wordmark sat 1.5px above the 14.5px nav links next
   to it and read as another nav item rather than the brand — too timid under a
   62px hero. The panel sidebar deliberately stays smaller: there the logo is
   orientation inside dense chrome, not a statement. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 19px;
  letter-spacing: -0.028em;
}
.brand:hover { text-decoration: none; }
.brand .wake { width: 25px; height: auto; flex: none; color: var(--blue); }
.brand .n1 { font-weight: 720; }
.brand .n2 { font-weight: 340; }
.topbar nav { margin-left: auto; display: flex; gap: 22px; align-items: center; }
.topbar nav a { color: var(--muted); font-size: 14.5px; font-weight: 500; }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
.topbar nav a.ghost {
  border: 1px solid var(--line);
  padding: 6px 13px;
  border-radius: 8px;
  color: var(--ink);
}
.theme {
  background: none; border: 1px solid var(--line); color: var(--muted);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
}
.theme:hover { color: var(--ink); }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* Centred. Everything inside inherits the alignment, so the two children that
   carry their own horizontal constraints (.lede's measure, .cta's flex row)
   have to be re-centred explicitly rather than left at their default. */
.hero {
  padding: 68px 0 40px;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.eyebrow {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 620; margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 62px);
  line-height: 1.04;
  margin: 0 0 20px;
  font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--blue); }
/* margin-inline auto, not just text-align — the measure cap would otherwise sit
   flush left inside the centred hero. */
.lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); margin: 0 auto 30px; max-width: 62ch; }
.lede strong { color: var(--ink); font-weight: 640; }

/* A flex row ignores the inherited text-align, so the buttons need centring on
   the container's own axis. */
.cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.btn {
  display: inline-block; padding: 11px 20px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--ink);
  font-weight: 590; font-size: 15px;
}
.btn:hover { text-decoration: none; border-color: var(--faint); }
.btn.primary {
  background: var(--blue-solid); border-color: var(--blue-solid); color: #fff;
  box-shadow: 0 1px 2px rgba(0, 114, 143, 0.3);
}
.btn.primary:hover { filter: brightness(1.07); }
.note { font-size: 14px; color: var(--faint); margin: 0; }

/* ── metrics ─────────────────────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 28px;
}
.metric { background: var(--panel); padding: 22px 22px 20px; }
.metric-value {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 680; letter-spacing: -0.02em; color: var(--emerald);
}
.metric-value .unit { font-size: 14px; font-weight: 560; color: var(--faint); }
.metric-label { font-size: 14px; color: var(--ink); margin-top: 8px; line-height: 1.45; }
.metrics-foot {
  font-size: 14px; color: var(--muted); margin: 14px 0 0; max-width: 74ch;
}
.metrics-foot strong { color: var(--ink); font-weight: 620; }

/* ── screenshots ─────────────────────────────────────────────────────────── */
.shot-hero { margin: 54px 0 0; }
.shot-hero img,
.gallery img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow);
}

/* ── split (Safe Push) ───────────────────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center;
  margin: 84px 0; padding-top: 20px;
}
.kicker {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); font-weight: 660; margin: 0 0 12px;
}
.split h2 { font-size: clamp(25px, 3.4vw, 33px); margin: 0 0 16px; font-weight: 690; }
.split p { color: var(--muted); margin: 0 0 14px; }
.link { font-weight: 570; font-size: 15px; }

.verdict {
  margin: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
.verdict figcaption {
  font-size: 12px; color: var(--faint); padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft); letter-spacing: 0.02em;
}
.verdict pre { margin: 0; padding: 18px 16px; overflow-x: auto; }
.verdict code {
  font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--ink);
}
.c-dim { color: var(--faint); }
.c-bad { color: var(--rose); font-weight: 680; }

/* ── features ────────────────────────────────────────────────────────────── */
.features { margin: 84px 0; }
.features h2, .gallery h2, .honest h2, .install h2 {
  font-size: clamp(25px, 3.4vw, 33px); margin: 0 0 8px; font-weight: 690;
}
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px 34px; margin-top: 30px;
}
.grid article h3 { font-size: 16.5px; margin: 0 0 7px; font-weight: 650; }
.grid article p { margin: 0; color: var(--muted); font-size: 15px; }

/* ── gallery ─────────────────────────────────────────────────────────────── */
.gallery { margin: 84px 0; }
.sub { color: var(--muted); margin: 0 0 30px; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.shots figure { margin: 0; }
.shots figcaption {
  font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.5;
}
.shots figcaption strong { color: var(--ink); font-weight: 620; }

/* ── comparison table ────────────────────────────────────────────────────── */
.compare { margin: 84px 0; }
.compare .sub { max-width: 74ch; }
.compare .sub strong { color: var(--ink); font-weight: 620; }

/* The table scrolls inside its own box so the page body never scrolls sideways
   on a narrow screen. */
.cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.cmp {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 15px;
}
.cmp thead th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 620;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cmp tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  padding: 13px 18px;
}
.cmp td { padding: 13px 18px; white-space: nowrap; }
.cmp tbody tr + tr th,
.cmp tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.cmp .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.cmp .num.lead { color: var(--ink); font-weight: 640; }
.cmp .num.trail { color: var(--muted); }
.cmp .delta {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 620;
  text-align: right;
}
.cmp .delta.up { color: var(--emerald); }
.cmp .delta.down { color: var(--rose); }
.compare .note { margin-top: 14px; max-width: 74ch; line-height: 1.55; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── honesty ─────────────────────────────────────────────────────────────── */
.honest {
  margin: 84px 0; padding: 34px 32px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
}
.honest-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px; margin-top: 24px;
}
.honest h3 { font-size: 15.5px; margin: 0 0 8px; font-weight: 650; }
.honest p { margin: 0; color: var(--muted); font-size: 14.5px; }
.honest code {
  font-family: var(--mono); font-size: 12.5px;
  background: var(--line-soft); padding: 1px 5px; border-radius: 4px;
}

/* ── install ─────────────────────────────────────────────────────────────── */
.install { margin: 84px 0 96px; }
.install > p { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }
.install pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; overflow-x: auto; box-shadow: var(--shadow); margin: 0 0 16px;
}
.install code { font-family: var(--mono); font-size: 13.5px; line-height: 1.8; color: var(--ink); }

/* ── footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); background: var(--bg-alt); }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 42px 24px 52px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px;
}
.foot-inner p { color: var(--muted); font-size: 14.5px; margin: 14px 0 0; max-width: 46ch; }
.foot-inner nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-content: start; }
.foot-inner nav a { color: var(--muted); font-size: 14.5px; }
.foot-inner nav a:hover { color: var(--ink); text-decoration: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 30px; margin: 60px 0; }
  .shots { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; }
  .topbar nav { gap: 15px; }
  .topbar nav a:not(.ghost) { display: none; }
  .hero { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── theme-aware screenshots ─────────────────────────────────────────────────
   The panel has its own light and dark themes, so show the matching capture.
   Driven by data-theme (not prefers-color-scheme) so the manual toggle in the
   header switches the screenshots too, not just the page chrome. */
/* Specificity matters here: the base rule is `.shot-hero img` / `.gallery img`
   (0,1,1), so a bare `.shot-dark` (0,1,0) loses and BOTH variants render. Match
   the element in the selector so these actually win. */
.shot-hero img.shot-dark,
.gallery img.shot-dark { display: none; }

:root[data-theme="dark"] .shot-hero img.shot-light,
:root[data-theme="dark"] .gallery img.shot-light { display: none; }

:root[data-theme="dark"] .shot-hero img.shot-dark,
:root[data-theme="dark"] .gallery img.shot-dark { display: block; }