:root {
  --bg: #060608;
  --bg-raised: #0d0d12;
  --bg-card: #0a0a0e;
  --border: #23232e;
  --border-strong: #33333f;
  --text: #f2f2f0;
  --text-dim: #8a8a94;
  --text-faint: #55555f;
  --accent-purple: #7b5cf5;
  --accent-teal: #00ffe0;
  --radius: 2px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}


/* ── Page measure ───────────────────────────────────────────────────────
   .container defines the 1200px measure but is never applied to anything
   in index.html, so every section ran the full width of the viewport.
   These rules apply that measure to the content while the header rule and
   the MIDI bar borders stay full-bleed, as in the design. */

.hero,
.section {
  max-width: calc(1200px + 64px);   /* measure + 32px gutter each side */
  margin-inline: auto;
}

/* Full-bleed background and border, content on the measure. The padding
   trick keeps the element itself edge-to-edge while pushing its content
   into the centred column — no extra wrapper element needed. */
.site-header,
.midi-bar {
  padding-inline: max(32px, calc((100% - 1200px) / 2));
}

/* ---------- header / nav ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
  border-bottom: 0.5px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.site-header .logo { font-weight: 600; }

.site-header nav { display: flex; gap: 28px; }

.site-header nav a {
  color: var(--text-dim);
  transition: color 0.15s ease;
}

.site-header nav a:hover,
.site-header nav a.active { color: var(--text); }

/* ---------- hero ---------- */
.hero {
  padding: 64px 32px 48px;
}

.hero .kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.hero h1 {
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.98;
  margin-bottom: 24px;
}

.hero p.lede {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-dim);
  max-width: 620px;
  margin-bottom: 32px;
}

.hero .cta-row { display: flex; gap: 12px; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-primary { border-color: var(--accent-teal); color: var(--accent-teal); }
.btn-primary:hover { background: rgba(0, 255, 224, 0.08); }

.btn-purple { border-color: var(--accent-purple); color: var(--accent-purple); }
.btn-purple:hover { background: rgba(123, 92, 245, 0.08); }

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

/* ---------- midi status bar ---------- */
.midi-bar {
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding-block: 12px;
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.midi-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent-teal);
  margin-left: 6px;
}

/* ---------- image strip divider ---------- */
.art-strip {
  display: flex;
  height: 120px;
  overflow: hidden;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
}

.art-strip img {
  height: 100%;
  width: auto;
  flex: 1;
  object-fit: cover;
  filter: brightness(0.55);
}

/* ---------- section heading row ---------- */
.section {
  padding: 56px 32px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 20px;
}

.section-head h2 { font-size: 34px; }

.section-head .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-align: right;
}

/* ---------- filter tabs ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 28px; }

.tab {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  background: none;
}

.tab.active { color: var(--accent-teal); border-color: var(--accent-teal); }

/* ---------- tool card grid ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
}

.tool-card {
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  position: relative;
}

.tool-card .art {
  aspect-ratio: 16 / 10;
  background: var(--bg-raised);
  background-size: cover;
  background-position: center;
  position: relative;
}

.tool-card .art .badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.tool-card .art .title-block {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.tool-card .art .title-block h3 {
  font-size: 20px;
  color: #fff;
}

.tool-card .art .title-block .subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tool-card .body { padding: 16px; }

.tool-card .body p {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  line-height: 1.5;
}

.tool-card .footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pill {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border: 0.5px solid;
  border-radius: 2px;
}

.pill-free { color: var(--accent-teal); border-color: var(--accent-teal); }
.pill-pass { color: var(--accent-purple); border-color: var(--accent-purple); }

/* ---------- hardware editor list rows ---------- */
.hw-list { border-top: 0.5px solid var(--border); }

.hw-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 0.5px solid var(--border);
}

.hw-row .name {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hw-row .right { display: flex; align-items: center; gap: 16px; }

.hw-row .proto {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.hw-open {
  font-family: var(--font-mono);
  font-size: 12px;
  border: 0.5px solid var(--border-strong);
  padding: 6px 12px;
  color: var(--text-dim);
}

.hw-open:hover { color: var(--text); border-color: var(--text-dim); }

/* ---------- instrument / library cards ---------- */
.instrument-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  border: 0.5px solid var(--border);
  background: var(--bg-card);
  padding: 20px;
  margin-bottom: 20px;
}

.instrument-card .art {
  background-size: cover;
  background-position: center;
  aspect-ratio: 3 / 4;
}

.instrument-card h3 { font-size: 26px; margin-bottom: 8px; }

.instrument-card .desc { color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }

.instrument-card .meta-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin-top: 12px;
}

.instrument-card .meta-line a { color: var(--accent-teal); }

/* ---------- pass box ---------- */
.pass-box {
  border: 1px solid var(--accent-purple);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pass-box .top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pass-box h2 { font-size: 40px; }

.pass-box .price {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--accent-purple);
  text-align: right;
}

.pass-box .price .sub {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.pass-box .headline { font-size: 26px; }

.pass-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0.5px solid var(--accent-purple);
  padding: 16px 22px;
  color: var(--accent-purple);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  max-width: 340px;
}

.pass-cta-row:hover { background: rgba(123, 92, 245, 0.08); }

/* ---------- pass activation form ---------- */
#cb-pass-form {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

#cb-pass-key {
  flex: 1;
  background: var(--bg-raised);
  border: 0.5px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 14px;
  border-radius: var(--radius);
}

#cb-pass-error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #ff5c5c;
  margin-top: 8px;
}

/* body classes toggled by pass-check.js */
body.cb-pass-active .pass-only-hide { display: none; }
body.cb-pass-inactive .pass-only-show { display: none; }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
}

.about-grid p { color: var(--text-dim); margin-bottom: 16px; line-height: 1.7; }
.about-grid p.dim { color: var(--text-faint); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 0.5px solid var(--border);
  padding: 32px;
}

.site-footer .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.site-footer .brand {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}

.site-footer .brand .sub {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 4px;
}

.site-footer .legal-links {
  display: flex;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
}

.site-footer .legal-links a:hover { color: var(--text); }

.site-footer .bottom-line {
  border-top: 0.5px solid var(--border);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .instrument-card { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .site-header nav { gap: 16px; }
  .hero, .section { padding-inline: 20px; }
  .site-header, .midi-bar { padding-inline: 20px; }
}