/* ---------- tokens ---------- */
:root {
  --bg: #0c0d0f;
  --bg-raised: #14161a;
  --bg-raised-2: #1a1d22;
  --border: #26292f;
  --border-soft: #1e2025;
  --text: #ece9e4;
  --text-dim: #9a9c9f;
  --text-faint: #5e6166;
  --accent: #4fe07a;
  --accent-dim: #2f8f53;
  --accent-soft: rgba(79, 224, 122, 0.1);
  --amber: #e0a64f;
  --display: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}

a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); }

/* ---------- film grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll-driven wireframe ---------- */
.wireframe {
  position: fixed;
  top: 0;
  right: max(-70px, calc(50% - 690px));
  width: clamp(340px, 40vw, 580px);
  height: 100vh;
  z-index: -1;
  color: var(--accent);
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 64% 44% at 62% 50%, #000 44%, transparent 100%);
  mask-image: radial-gradient(ellipse 64% 44% at 62% 50%, #000 44%, transparent 100%);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 0 0 80px;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(79, 224, 122, 0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(224, 166, 79, 0.08), transparent 55%);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -160px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 224, 122, 0.07), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.topbar {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 0;
  position: relative;
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.brand-icon { width: 26px; height: 26px; border-radius: 6px; }

.topbar-links { display: flex; align-items: center; gap: 28px; font-size: 13px; color: var(--text-dim); }
.topbar-links a:hover { color: var(--text); }
.topbar-gh { color: var(--accent) !important; }

.hero-content {
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 32px 0;
  position: relative;
  z-index: 1;
}

.kicker {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
}

h1 {
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  max-width: 760px;
}

h1 em {
  font-style: italic;
  color: var(--amber);
}

.hero-sub {
  max-width: 560px;
  font-size: 15.5px;
  color: var(--text-dim);
  margin: 28px 0 0;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin: 36px 0 14px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #06120a;
}
.btn-primary:hover { background: #6ee896; transform: translateY(-1px); }

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-dim); }

.btn-large { padding: 15px 28px; font-size: 14.5px; }

.hero-meta {
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0 0 44px;
}

.version-tag {
  font-size: 12px;
  color: var(--text-faint);
}

#version-tag-install {
  margin: 10px 0 0;
}

/* terminal block */
.terminal {
  max-width: 460px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  overflow: hidden;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-raised-2);
}

.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot-r { background: #ff5f57; }
.dot-y { background: #febc2e; }
.dot-g { background: #28c840; }

.terminal-title {
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.terminal-body {
  margin: 0;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.prompt { color: var(--accent); margin-right: 6px; }

.terminal-inline { max-width: 480px; margin: 12px 0 0; }

/* ---------- strip ---------- */
.strip {
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-raised);
}
.strip p {
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 32px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.strip strong { color: var(--text); }

/* ---------- features ---------- */
.features {
  max-width: 1040px;
  margin: 0 auto;
  padding: 110px 32px 90px;
}

.features h2, .mice h2, .install h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.2;
  max-width: 620px;
  margin-bottom: 56px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature {
  background: var(--bg);
  padding: 28px 24px;
  transition: background 0.2s ease;
}
.feature:hover { background: var(--bg-raised); }

/* The grid's 1px gaps sit on a border-coloured background, so an unfilled cell reads as a
   grey block rather than as space. A ninth card would leave three of them; this spans the
   row instead, at every breakpoint, because `1 / -1` counts the columns that exist. */
.feature-wide { grid-column: 1 / -1; }

.feature-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--accent-dim);
  margin-bottom: 14px;
}

.feature h3 {
  font-size: 17px;
  margin-bottom: 10px;
  color: #fff;
}

.feature p {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.65;
}

/* ---------- screenshots ---------- */
.shots {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 110px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.shots figure {
  margin: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.shots img {
  max-width: 100%;
  max-height: 380px;
  border-radius: 8px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}

.shots figcaption {
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ---------- mice table ---------- */
.mice {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 110px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13.5px;
}

th, td {
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-soft);
}

th {
  background: var(--bg-raised);
  color: var(--text-faint);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-raised); }

.muted { color: var(--text-faint); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11.5px;
}
.badge-good { background: var(--accent-soft); color: var(--accent); }
.badge-mid { background: rgba(224, 166, 79, 0.1); color: var(--amber); }

.mice-note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}
.mice-note a { color: var(--accent); }

/* ---------- privacy ---------- */
.privacy {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 110px;
}

.privacy h2 {
  font-size: clamp(28px, 3.6vw, 38px);
  line-height: 1.2;
  max-width: 620px;
  margin-bottom: 18px;
}

.privacy-lead {
  max-width: 620px;
  color: var(--text-dim);
  margin: 0 0 40px;
}

.privacy-grid { grid-template-columns: repeat(3, 1fr); }

.privacy-note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--text-faint);
}
.privacy-note a { color: var(--accent); }

/* ---------- install ---------- */
.install {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 130px;
}

.steps {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}

.steps li {
  display: flex;
  gap: 18px;
}

.step-num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--accent);
  font-family: var(--display);
}

.steps p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
}

.steps strong { color: var(--text); }
.steps code {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12.5px;
  color: var(--accent);
}

/* ---------- support ---------- */
.support {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px 110px;
}

.support-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 600px 280px at 15% 0%, rgba(79, 224, 122, 0.08), transparent 60%),
    var(--bg-raised);
  padding: 56px;
  text-align: center;
}

.support-card h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 16px;
}

.support-card p {
  max-width: 540px;
  margin: 0 auto;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
}

.support-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ---------- footer ---------- */
.footer {
  border-top: 1px solid var(--border-soft);
  background: var(--bg-raised);
  /* Padding, not a margin on the last child: the footer has no bottom border or padding of
     its own, so a child's bottom margin collapses straight out of it and the background ends
     flush against that child. */
  padding-bottom: 48px;
}

.footer-grid {
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-disclaimer {
  max-width: 380px;
  font-size: 12px;
  color: var(--text-faint);
  margin: 14px 0 0;
  line-height: 1.6;
}
.footer-disclaimer a { color: var(--text-dim); text-decoration: underline; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  font-size: 13px;
  color: var(--text-dim);
}
.footer-links a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .wireframe { display: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .privacy-grid { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .topbar-links { gap: 16px; font-size: 12px; }
}

@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
  .topbar-links a:not(.topbar-gh) { display: none; }
  h1 { font-size: 38px; }
}

/* ---------- release notes ---------- */
.releases {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.releases-status { color: var(--text-dim); font-size: 14px; }
.releases-status a { color: var(--accent); }

.release {
  border-top: 1px solid var(--border-soft);
  padding: 34px 0 6px;
}
.release:first-child { border-top: 0; padding-top: 8px; }

.release-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.release-version { font-size: 26px; }
.release-version a:hover { color: var(--accent); }

.release-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.release-badge {
  background: rgba(224, 166, 79, 0.1);
  color: var(--amber);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
}

.release-body { color: var(--text-dim); font-size: 14px; }
.release-body a { color: var(--accent); }
.release-body code {
  background: var(--bg-raised-2);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
}
.release-body strong { color: var(--text); font-weight: 500; }

.release-section {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 26px 0 10px;
}

.release-text { margin: 0 0 14px; }

.release-callout {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent-dim);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.release-items { margin: 0 0 14px; padding-left: 20px; }
.release-items li { margin-bottom: 9px; }

@media (max-width: 640px) {
  .releases { padding: 48px 18px 64px; }
  .release-version { font-size: 22px; }
}

/* ---------- built with Hiveship ---------- */
.footer-hiveship {
  /* 1040 minus the footer grid's 32px of side padding, so this lines up with the links above
     it rather than sitting 32px wider on both sides. */
  max-width: 976px;
  width: calc(100% - 64px);
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.footer-hiveship:hover { border-color: var(--accent-dim); background: var(--bg-raised-2); }
.footer-hiveship:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-raised-2);
}

.footer-hiveship img { flex: none; }

.footer-hiveship-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.45;
}
.footer-hiveship-title { color: var(--text); font-weight: 500; font-size: 13.5px; }

.footer-hiveship-go {
  margin-left: auto;
  flex: none;
  font-size: 12.5px;
  color: var(--accent);
  white-space: nowrap;
}
.footer-hiveship-go::after { content: " →"; }

@media (max-width: 640px) {
  .footer { padding-bottom: 32px; }
  .footer-hiveship {
    /* Not a narrower inset: `.footer-grid` keeps its 32px of side padding at every width, so
       anything but `100% - 64px` here leaves the card overhanging the links above it. */
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /* Wrapped onto its own row, so it starts at the box's padding edge like everything else
     in it. The desktop rule pushes it to the far right, which leaves it floating here. */
  .footer-hiveship-go { margin-left: 0; }
}