/* ============================================================
   OpenSave — website styles
   Themed to match the app exactly: neutral near-black surfaces,
   #8a63f4 accent, rounded cards + pills (Hydra-launcher lineage).
   ============================================================ */

:root {
  /* surfaces — identical tokens to the app's app.css */
  --bg: #0c0c0d;
  --bg-sidebar: #111112;
  --bg-raised: #17171a;
  --bg-hover: #1f1f23;
  --bg-active: #26262b;
  --border: #232328;
  --border-strong: #303038;

  /* card elevation for the marketing surfaces */
  --card: #141416;
  --card-hover: #191920;

  /* text */
  --text: #e8e8ea;
  --text-secondary: #9a9aa3;
  --text-dim: #5e5e66;

  /* accent — the app's violet */
  --accent: #8a63f4;
  --accent-hover: #9b7af7;
  --accent-soft: rgba(138, 99, 244, 0.14);
  --accent-line: rgba(138, 99, 244, 0.32);
  --grad: linear-gradient(135deg, #9b7af7 0%, #7346e6 100%);

  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #d95757;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Outfit', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --ease: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The page scrollbar was the browser default — a bright white strip down the
   right of a near-black site, on every page. color-scheme tells the browser
   the whole document is dark, which fixes the scrollbar and any native
   control along with it; the explicit rules below then match it to the
   surfaces rather than leaving it grey. */
:root { color-scheme: dark; }
html { scrollbar-width: thin; scrollbar-color: var(--bg-active) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-active);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-corner { background: transparent; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent-hover); text-decoration: none; transition: var(--ease); }
a:hover { color: #b8a0ff; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  color: #c9b6ff;
}

/* ---------- ambient glows (subtle — the app is neutral) ---------- */
/* The glows sit at negative offsets (partly off-screen by design). They live
   inside a fixed, overflow-hidden layer rather than being position:fixed
   themselves: a fixed element hanging past the right edge is NOT clipped by
   body{overflow-x:hidden} (fixed elements resolve against the viewport, not
   the body), so on mobile it widened the layout viewport and zoomed the whole
   page out. Clipping them in this wrapper fixes that on every engine while
   keeping them pinned to the viewport during scroll. */
.ambient-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ambient-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(10px); }
.glow-1 { width: 820px; height: 820px; background: radial-gradient(circle, rgba(138,99,244,0.16) 0%, transparent 60%); top: -340px; right: -220px; }
.glow-2 { width: 700px; height: 700px; background: radial-gradient(circle, rgba(115,70,230,0.10) 0%, transparent 62%); top: 44%; left: -320px; }

/* ---------- navbar ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(12, 12, 13, 0.74);
  border-bottom: 1px solid var(--border);
}
.nav-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 28px; width: auto; object-fit: contain; border-radius: 7px; }
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); letter-spacing: -0.02em; }
.logo-text span { color: var(--accent-hover); }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links > a {
  color: var(--text-secondary);
  font-size: 14.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
}
.nav-links > a:hover { color: var(--text); background: var(--bg-hover); }
.github-link {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px !important;
  padding: 7px 14px !important;
  color: var(--text) !important;
  margin-left: 4px;
}
.github-link:hover { border-color: var(--accent-line); background: var(--accent-soft) !important; }
.donate-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(233, 79, 133, 0.35);
  border-radius: 999px !important;
  padding: 7px 14px !important;
  color: #f0a3c2 !important;
  background: rgba(233, 79, 133, 0.1);
  margin-left: 4px;
}
.donate-link:hover { border-color: rgba(233, 79, 133, 0.6); background: rgba(233, 79, 133, 0.18) !important; color: #f6b9d3 !important; }
/* Discord blurple, shaped like the Donate pill beside it so the nav reads as
   one row of chips rather than a pill and a plain link. */
.discord-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(88, 101, 242, 0.4);
  border-radius: 999px !important;
  padding: 7px 14px !important;
  color: #b9bbfa !important;
  background: rgba(88, 101, 242, 0.12);
}
.discord-link:hover { border-color: #5865f2; background: #5865f2 !important; color: #fff !important; }
.nav-cta {
  background: var(--grad);
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  box-shadow: 0 6px 20px rgba(115, 70, 230, 0.35);
}
.nav-cta:hover { background: var(--grad) !important; filter: brightness(1.08); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--ease); }

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius);
  padding: 12px 24px;
  transition: var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 26px rgba(115, 70, 230, 0.38); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(115, 70, 230, 0.5); color: #fff; }
.btn-secondary { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent-line); color: var(--text); transform: translateY(-2px); }
.btn-ghost { color: var(--text-secondary); padding: 12px 8px; }
.btn-ghost:hover { color: var(--accent-hover); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; padding: 132px 24px 32px; }
.hero-container { max-width: 900px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 7px 16px;
  margin-bottom: 24px;
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-title { font-size: clamp(40px, 6vw, 66px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 22px; }
.hero-title span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-subtitle { font-size: 18px; color: var(--text-secondary); max-width: 620px; margin: 0 auto 32px; }
.hero-subtitle strong { color: var(--text); font-weight: 600; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-container > .hero-ctas { justify-content: center; }
.hero-ctas.center { justify-content: center; }
.hero-meta { margin-top: 18px; font-size: 13.5px; color: var(--text-dim); }
.hero-meta a { color: var(--text-secondary); }
.hero-meta a:hover { color: var(--accent-hover); }

/* real app screenshot in a window frame */
.hero-shot {
  max-width: 1080px;
  margin: 56px auto 0;
  position: relative;
  z-index: 1;
}
.hero-shot::after {
  /* soft floor glow under the window */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -40px; height: 120px;
  background: radial-gradient(ellipse at center, rgba(138,99,244,0.28) 0%, transparent 70%);
  filter: blur(30px); z-index: -1;
}
.app-window {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-sidebar);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.win-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border); }
.win-dots { display: flex; gap: 7px; }
.win-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--bg-active); }
.win-dots span:nth-child(1) { background: #e05561; }
.win-dots span:nth-child(2) { background: #e0a03a; }
.win-dots span:nth-child(3) { background: #4ea85a; }
.win-title { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.app-window img { display: block; width: 100%; height: auto; }

/* stats strip */
.stats-strip {
  max-width: var(--maxw);
  margin: 88px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative; z-index: 1;
}
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
}
.stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.stat-label { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }

/* ---------- sections ---------- */
.section { position: relative; z-index: 1; padding: 96px 24px; }
.section-tinted { background: var(--bg-sidebar); border-block: 1px solid var(--border); }
.section-container { max-width: var(--maxw); margin: 0 auto; }
.section-container.narrow { max-width: 760px; }
.section-container.center { text-align: center; }

.section-heading { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-hover);
  margin-bottom: 16px;
}
.section-heading h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.15; }
.section-sub { font-size: 17px; color: var(--text-secondary); margin-top: 14px; }

/* ---------- showcase ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.shot-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--ease);
}
.shot-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr 1fr; align-items: stretch; }
.shot-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: 0 20px 44px -22px rgba(0,0,0,0.8); }
.shot-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; cursor: zoom-in; background: var(--bg); }
.shot-card:not(.wide) img { aspect-ratio: 16 / 10; border-bottom: 1px solid var(--border); }
.shot-card.wide img { border-right: 1px solid var(--border); max-height: 460px; }
.shot-card figcaption { padding: 22px 24px; }
.shot-card.wide figcaption { align-self: center; }
.shot-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.shot-card p { font-size: 14.5px; color: var(--text-secondary); }
.shot-card p strong { color: var(--text); }

/* ---------- why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.why-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 28px; }
.why-card.bad { border-color: rgba(217, 87, 87, 0.22); }
.why-card.good { border-color: rgba(74, 222, 128, 0.24); }
.why-card h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.why-mark { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; }
.why-card.bad .why-mark { background: rgba(217, 87, 87, 0.16); color: #f08a8a; }
.why-card.good .why-mark { background: rgba(74, 222, 128, 0.14); color: var(--ok); }
.why-card ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.why-card li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-secondary); }
.why-card li::before { position: absolute; left: 0; top: 1px; font-size: 14px; }
.why-card.bad li::before { content: "✕"; color: #d95757; }
.why-card.good li::before { content: "✓"; color: var(--ok); }
.why-card li em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- features ---------- */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 24px; transition: var(--ease); }
.feature-card:hover { background: var(--card-hover); border-color: var(--accent-line); transform: translateY(-3px); }
.feature-icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.feature-card strong, .feature-card em { color: var(--text); font-style: normal; font-weight: 600; }

/* ---------- how it works ---------- */
.how-steps { display: flex; align-items: stretch; gap: 8px; margin-bottom: 40px; flex-wrap: wrap; justify-content: center; }
.how-step { flex: 1; min-width: 190px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; }
.how-num { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; border-radius: 9px; background: var(--grad); color: #fff; margin-bottom: 14px; }
.how-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 7px; }
.how-step p { font-size: 13.5px; color: var(--text-secondary); }
.how-arrow { display: flex; align-items: center; color: var(--accent); font-size: 22px; font-weight: 700; }

.arch-panel { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
/* overflow-x + a min-width on the SVG itself (not just width:100%) stops
   the diagram's text shrinking below legible size on narrow screens —
   viewBox scaling shrinks EVERYTHING proportionally, so a full-bleed SVG
   at ~300px wide renders its labels at a few px tall. Same contained-
   scroll pattern as the comparison table. */
.arch-diagram { overflow-x: auto; }
.arch-diagram svg { width: 100%; min-width: 560px; height: auto; display: block; }
.arch-diagram .d-box { fill: var(--bg); stroke: var(--border-strong); stroke-width: 1.5; }
.arch-diagram .r-box { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.5; }
.arch-diagram .d-title { fill: var(--text); font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.arch-diagram .d-row { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 14px; }
.arch-diagram .r-title { fill: var(--text); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.arch-diagram .r-sub { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 12.5px; }
.arch-diagram .wire { stroke: var(--accent); stroke-width: 2; }
.arch-diagram .wire-label { fill: var(--accent-hover); font-family: var(--font-mono); font-size: 12.5px; }
.arch-diagram .wan-chip { fill: var(--bg-raised); stroke: var(--border); stroke-width: 1; }
.arch-notes h3 { font-size: 20px; margin-bottom: 12px; }
.arch-notes p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 12px; }
.arch-notes strong { color: var(--text); }

/* ---------- open source ---------- */
.oss-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.oss-text h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 16px; }
.oss-text > p { font-size: 16px; color: var(--text-secondary); margin-bottom: 20px; }
.oss-text strong { color: var(--text); }
.oss-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; }
.oss-list li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text-secondary); }
.oss-list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

.oss-terminal { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: #0a0a0b; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9); }
.terminal-body { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; padding: 18px 20px; color: var(--text-secondary); overflow-x: auto; }
.t-prompt { color: var(--accent-hover); }
.t-ok { color: var(--ok); }
.t-sync { color: var(--warn); }

/* ---------- download ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dl-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; text-align: center; transition: var(--ease); display: flex; flex-direction: column; align-items: center; }
.dl-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.dl-os { font-size: 40px; margin-bottom: 14px; }
.dl-card h3 { font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.dl-card p { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; flex: 1; }
.dl-card .btn-primary, .dl-card .btn-secondary { width: 100%; }
.dl-choices { display: flex; gap: 10px; width: 100%; }
.dl-choices .btn-primary, .dl-choices .btn-secondary { flex: 1; flex-direction: column; gap: 1px; padding: 11px 12px; line-height: 1.15; }
.dl-sub { font-family: var(--font-sans); font-weight: 400; font-size: 11px; opacity: 0.72; }
.dl-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; font-family: var(--font-mono); }
.dl-upgrade { text-align: center; margin-top: 34px; font-size: 14.5px; color: var(--text-secondary); max-width: 720px; margin-inline: auto; }
.dl-upgrade strong { color: var(--text); }

/* A known failure someone is actively stuck on, so it reads as a notice
   rather than another line of prose. max-width matches .dl-upgrade; the
   left rule and tinted panel are the only things separating them. */
.dl-callout {
  margin-top: 34px;
  margin-inline: auto;
  max-width: 720px;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.dl-callout strong { color: var(--text); }
.dl-callout code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-raised);
  color: var(--text);
  /* A Windows path has no spaces to break at, so without this it forces the
     panel wider than the page on a narrow screen. */
  overflow-wrap: anywhere;
}

/* ---------- comparison page ---------- */
.compare-hero { padding-bottom: 12px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--card); }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.compare-table thead th { font-family: var(--font-display); font-weight: 600; color: var(--text); background: var(--bg-raised); }
.compare-table tbody td:first-child { color: var(--text); font-weight: 500; white-space: normal; min-width: 260px; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .col-us { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.compare-table thead th.col-us { color: var(--accent-hover); }
.compare-table .no { color: var(--text-dim); }
.table-note { margin-top: 16px; font-size: 13px; color: var(--text-dim); text-align: center; }

/* ---------- faq ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-family: var(--font-display); font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; transition: var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item p { padding: 16px 22px 20px; font-size: 14.5px; color: var(--text-secondary); }
.faq-item em { color: var(--text); font-style: italic; }

/* ---------- footer cta ---------- */
.footer-cta { text-align: center; }
.footer-cta h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.03em; }
.footer-cta .section-sub { margin-bottom: 30px; }

/* ---------- CLI page ---------- */

/* Bigger, more confident CTAs on this page. The default 15px/12px buttons
   read as secondary next to a full-width hero, which is the wrong signal for
   the primary action on the page. Scoped here rather than changed globally so
   the rest of the site is untouched. */
.cli-hero .btn-primary,
.cli-hero .btn-secondary,
.footer-cta .btn-primary,
.footer-cta .btn-secondary {
  font-size: 17px;
  padding: 16px 34px;
  border-radius: 12px;
}
.cli-hero .hero-ctas { gap: 16px; margin-top: 6px; }
.cli-hero { padding-bottom: 12px; }
.cli-hero .hero-subtitle code,
.cli-note code, .cli-fact code, .cli-callout code,
.faq-item code, .section-sub code, .cli-inline-note code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text);
}
/* The capture is 820px wide. The site's hero window is 1080px, and scaling a
   terminal screenshot past its native size makes the text visibly soft — so
   this one keeps its own width and stays centred. */
.cli-shot { margin-top: 48px; max-width: 860px; }
.cli-shot .app-window { background: #0c0c0d; }
.cli-shot img { display: block; width: 100%; height: auto; }
.cli-shot figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/* the nav item for the page you're on */
.nav-links a.is-active { color: var(--accent-hover); }

/* two-column fact list, used for "what it is" and "what changed" */
#why .section-heading, #steamdeck .section-heading { max-width: 820px; }

/* .features-grid is a four-column grid shared with the home page. This page
   has three cards, so they filled three of four columns and sat left of
   centre under a centred heading. */
#why .features-grid { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }

/* Sections holding terminal blocks need more room than the 760px "narrow"
   container: the install one-liner is ~94 characters, which overflowed and
   produced a horizontal scrollbar over the command itself. Wide enough that
   the longest line fits without one. */
#install .section-container,
#five-minutes .section-container,
#steamdeck .section-container,
#scripting .section-container { max-width: 940px; }

.cli-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.cli-fact {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.cli-fact h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.cli-fact p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }

/* Terminal blocks on this page carry real multi-line output, so they need
   more vertical room than the single-line ones elsewhere on the site. */
.cli-page .oss-terminal, .section .oss-terminal + .oss-terminal { margin-top: 0; }
#install .oss-terminal, #five-minutes .oss-terminal,
#steamdeck .oss-terminal, #scripting .oss-terminal {
  margin-bottom: 4px;
}
#install .terminal-body, #five-minutes .terminal-body,
#steamdeck .terminal-body, #scripting .terminal-body {
  padding: 20px 24px;
  line-height: 1.85;
  font-size: 13px;
  white-space: pre;
  margin: 0;
}

/* If a narrow viewport still forces a scroll, make it a thin unobtrusive bar
   rather than the browser default sitting across the command. */
.terminal-body::-webkit-scrollbar { height: 8px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb {
  background: var(--bg-active);
  border-radius: 4px;
}
.terminal-body { scrollbar-width: thin; scrollbar-color: var(--bg-active) transparent; }

.cli-sub {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 28px 0 10px;
}
.cli-sub:first-of-type { margin-top: 0; }

.cli-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-top: 18px;
}

.cli-callout {
  margin-top: 20px;
  padding: 18px 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
}
.cli-callout h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.cli-callout p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); }

/* numbered walkthrough */
.cli-steps { display: flex; flex-direction: column; gap: 42px; }
.cli-step { display: flex; gap: 20px; align-items: flex-start; }
.cli-step-body { flex: 1; min-width: 0; }
.cli-step-body h4 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.cli-step-body p { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; }
.cli-inline-note {
  margin-top: 14px;
  margin-bottom: 0 !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
}

/* dimmed comments inside terminal blocks */
.t-dim { color: var(--text-dim); }

/* command reference */
.cli-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cli-ref {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.cli-ref h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-hover);
  margin-bottom: 14px;
}
.cli-ref dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.cli-ref dt {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.cli-ref dd { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

@media (max-width: 860px) {
  .cli-facts, .cli-ref-grid { grid-template-columns: 1fr; }
  .cli-ref dl { grid-template-columns: 1fr; gap: 2px 0; }
  .cli-ref dd { margin-bottom: 10px; }
  .cli-step { gap: 14px; }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 40px 24px; background: var(--bg-sidebar); }
.footer-container { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--text-secondary); font-size: 14px; }
.footer-links a:hover { color: var(--accent-hover); }
.footer-donate { color: #e94f85 !important; font-weight: 600; }
.footer-donate:hover { color: #f0a3c2 !important; }
.footer-discord { color: #8b93f8 !important; font-weight: 600; }
.footer-discord:hover { color: #b9bbfa !important; }
.footer-note { width: 100%; font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 20px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 40px; background: rgba(6, 6, 8, 0.92); backdrop-filter: blur(8px); cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); box-shadow: 0 40px 100px rgba(0,0,0,0.7); }
.lightbox-close { position: absolute; top: 22px; right: 26px; background: var(--bg-raised); border: 1px solid var(--border-strong); color: var(--text); width: 40px; height: 40px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.lightbox-close:hover { background: var(--bg-hover); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .oss-panel, .arch-panel, .shot-card.wide { grid-template-columns: 1fr; }
  .shot-card.wide img { border-right: none; border-bottom: 1px solid var(--border); max-height: none; }
  .how-arrow { transform: rotate(90deg); }
}
@media (max-width: 720px) {
  .nav-links {
    position: fixed; inset: 60px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--bg-sidebar); border-bottom: 1px solid var(--border);
    padding: 14px 20px 20px;
    z-index: 99;
    /* Fixed-pixel offset + opacity/visibility, not a percentage transform:
       percentage translateY() resolves against the element's own computed
       height, which some engines fail to resolve for a fixed-position
       element sized by content — that left this menu rendered open at its
       natural position instead of off-screen. visibility (not just
       opacity) also keeps its links out of tab order while closed. */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .nav-links.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .nav-links > a { padding: 12px; }
  /* justify-content only centers the flex links (donate/github);
     .nav-cta is a plain anchor, so it needs text-align too. */
  .donate-link, .discord-link, .github-link, .nav-cta { margin: 4px 0 0 !important; justify-content: center; text-align: center; }
  .nav-toggle { display: flex; }
  .section { padding: 72px 20px; }
  .hero { padding: 116px 20px 24px; }
  .showcase-grid, .why-grid, .dl-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; margin-top: 60px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-primary, .hero-ctas .btn-secondary { width: 100%; }
  .footer-container { flex-direction: column; align-items: flex-start; }

  /* How-it-works: stack vertically. The arrow is rotated 90deg (from the
     940px breakpoint); without forcing a column + align-self:center it
     stays a flex item that STRETCHES to the step's full height, and the
     rotation turns that height into width — a ~224px-wide box that pushed
     the whole page wider than the viewport and caused the side-scroll. */
  .how-steps { flex-direction: column; align-items: stretch; gap: 6px; }
  .how-step { min-width: 0; width: 100%; }
  .how-arrow { align-self: center; }

  /* Showcase screenshots are wide desktop captures. object-fit:cover cropped
     them to fill the card (the "cropped halfway" look). On phones show them
     whole at natural aspect, scaled to the card width. */
  .shot-card img,
  .shot-card.wide img,
  .shot-card:not(.wide) img {
    object-fit: contain;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }
}