/* One look, dark, mono. The palette is the app's own default theme (Nord) so the
   screenshots sit in the page instead of on it. Same structure as the Transcription
   Tool's landing, which this page was copied from. Self-hosted JetBrains Mono (variable, latin
   range, OFL) because the CSP allows nothing off-origin; the fallback stack is
   what Windows ships. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --bg: #2e3440;
  --panel: #2b303b;
  --panel-2: #3b4252;
  --line: #434c5e;
  --line-2: #4c566a;
  --text: #d8dee9;
  --bright: #eceff4;
  --head: #eceff4;
  --muted: #b4bccb;
  --dim: #a9b1c1;
  --faint: #949ca9;
  --accent: #88c0d0;
  --accent-2: #8fbcbb;
  --btn: #5e81ac;
  --btn-hover: #6d8fba;
  --btn-line: #88c0d0;
  --ok: #a3be8c;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: #a8d4e0; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; color: var(--head); letter-spacing: -0.02em; }
p { margin: 0; }

.wrap { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---- top bar */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--head); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand:hover { color: var(--bright); }
/* The waveform is an inline SVG on a 34-unit grid, so every bar is exactly 2 wide,
   the five sit at x = 8, 12, 16, 20, 24 (2 wide, 2 apart, mirrored around 17), and
   the heights 8/14/20/14/8 are all even and centred on y = 17. No flex rounding, no
   half pixels. */
.mark {
  width: 34px; height: 34px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-2);
  box-sizing: border-box; display: block; color: var(--accent-2); overflow: hidden;
}
.mark svg { display: block; width: 32px; height: 32px; }
.pills { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
#pill-version { color: var(--accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }

/* ---- hero */
.hero { padding: 72px 0 0; display: grid; gap: 28px; justify-items: start; }
.kicker, .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.eyebrow { letter-spacing: 0.18em; color: var(--accent); }
h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; color: var(--bright); max-width: 18ch; text-wrap: balance; }
.lead { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.lead strong { color: var(--head); font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--btn); border: 1px solid var(--btn-line); color: #fff;
  padding: 16px 26px; border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
}
.btn:hover { background: var(--btn-hover); color: #fff; }
.btn .arrow { font-size: 17px; }
.btn[aria-disabled="true"] { background: var(--panel-2); border-color: var(--line-2); color: var(--dim); pointer-events: none; }
.btn.ghost { background: transparent; color: var(--accent); padding: 13px 22px; font-size: 14px; gap: 10px; }
.btn.ghost:hover { background: var(--panel-2); color: var(--bright); }
.meta { font-size: 12.5px; line-height: 1.7; color: var(--dim); }
.fine { font-size: 12.5px; color: var(--faint); }

/* ---- framed screenshots */
.frame {
  margin: 56px auto 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 10px;
  box-shadow: 0 24px 60px rgba(6, 11, 24, 0.6);
}
.frame img { width: 100%; border-radius: 8px; }
.frame[hidden] { display: none; }

/* ---- feature cards */
.features { margin: 64px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 22px; }
.card .eyebrow { margin-bottom: 12px; }
.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.card p { font-size: 13.5px; line-height: 1.65; color: var(--dim); }

/* ---- library split */
.split { margin: 72px auto 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; }
.split .frame { margin: 0; }
.split-text { display: grid; gap: 14px; }
.split h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; text-wrap: balance; }
.split p { font-size: 14px; color: var(--muted); }

/* ---- specs / install / faq */
.two { margin: 64px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 13.5px; }
.specs dt { color: var(--head); font-weight: 700; }
.specs dd { margin: 0; color: var(--dim); line-height: 1.55; }
.steps { margin: 0; padding-left: 1.4em; font-size: 13.5px; color: var(--dim); display: grid; gap: 10px; line-height: 1.55; }
.steps b, .faq b { color: var(--head); font-weight: 700; }
.faq { margin: 16px auto 0; }
.faq dl { margin: 0; display: grid; gap: 16px; }
.faq dt { color: var(--head); font-weight: 700; font-size: 14px; }
.faq dd { margin: 4px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.6; }
code { background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 6px; font-size: 0.92em; color: var(--bright); }

/* ---- band + footer */
.band {
  margin: 56px auto 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.band-title { font-size: 16px; font-weight: 700; color: var(--head); }
.band-sub { font-size: 13px; color: var(--dim); margin-top: 6px; }
footer {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 12px; color: var(--faint);
}

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .hero { padding-top: 48px; }
  .frame { margin-top: 40px; }
}
@media (max-width: 480px) {
  .pills { display: none; }
  .specs { grid-template-columns: 1fr; gap: 2px 0; }
  .specs dd { margin-bottom: 8px; }
}