/* kalikoDSP light scheme (preview sheet "light"). Fonts are served from fonts/, never from Google. */
@import url("fonts/lexend.css");

:root {
  --bg: #ededed;
  --surface: #f6f6f6;
  --paper: #ffffff;
  --fg: #1e1e1e;
  --text: #3e3e3a;
  --muted: #6e6e6a;
  --accent: #b99be0;
  --line: #d4d4d4;
  --outline: #c4c4c4;

  /* The logo's coat: k a l i k o */
  --mint: #8fd8c2;
  --lilac: #b99be0;
  --coral: #e8a08e;
  --sky: #8ec3e6;

  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --brand: "Lexend", var(--sans);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--fg); }

a { color: var(--fg); text-decoration-color: var(--outline); text-underline-offset: 3px; }
a:hover { color: var(--fg); text-decoration-color: var(--fg); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

header { padding: 30px 0; border-bottom: 1px solid var(--line); }

/* kaliko 500 at 92% (as scrawLFO's "scraw"), DSP 600 in white, no gap. */
.logo {
  display: inline-block;
  vertical-align: top;
  font-family: var(--brand);
  font-size: 32px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.logo .kaliko { font-size: 92%; font-weight: 500; letter-spacing: -0.02em; }
.logo b { font-weight: 600; letter-spacing: -0.06em; color: var(--paper); }
.kaliko span:nth-child(1) { color: var(--mint); }
.kaliko span:nth-child(2),
.kaliko span:nth-child(3),
.kaliko span:nth-child(4) { color: var(--lilac); }
.kaliko span:nth-child(5) { color: var(--coral); }
.kaliko span:nth-child(6) { color: var(--sky); }

.hero { padding: 96px 0 72px; }

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.hero p {
  margin-top: 24px;
  max-width: 52ch;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
}

.products { display: grid; gap: 20px; align-items: center; padding: 56px 24px 72px; }
.products > .k-video { margin-top: 0; }

@media (min-width: 720px) {
  .products { grid-template-columns: 1fr 1fr; }
}

.card {
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 32px 28px;
  background: var(--surface);
}

.card h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.card h2 b { font-weight: 700; }

/* scrawLFO's logo as the plug-in's header wears it: the scrawl tile, then "scraw" lettered
   in the coat (s mint, c r lilac, a coral, w sky) and "LFO" in white edged in grey. */
.card h2.product-logo,
.get h2.product-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 14px;
}
.product-logo img { flex: none; width: 52px; height: 52px; }
/* On the letters, not the h2: the style guide sets every heading's font. */
.product-logo > span { font-family: var(--brand); white-space: nowrap; }
.product-logo .scraw { font-size: 92%; font-weight: 500; letter-spacing: -0.02em; }
/* "LFO" is drawn, not typeset: Lexend SemiBold's L, F and O at 28px (cap height 20, stems and
   bars 4) on whole pixels, white with a 1px #b4b4b0 edge. An outline round the font's own
   letters never lands on whole pixels, so on a 1x screen the tops of the L and F smeared and the
   F's notch filled in. The text stays, transparent, for copying and screen readers; it only
   sets the width. Retune the drawing if the logo's font-size (28px) ever changes.
   The box is the drawing's height and clips the hidden text, so its bottom is the baseline (where
   the baseline falls inside a text box depends on how the browser rounds the font's ascent, and
   wandered by up to 1.5px); dropped by the edge's 1px, the white letters stand on scraw's baseline. */
.product-logo b {
  display: inline-block;
  overflow: hidden;
  width: 2.2143em;  /* the drawing's (62px at 28px), not the hidden text's (2.07em), or the O's right edge is cut */
  height: 22px;
  vertical-align: -1px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22' viewBox='0 -1 60 22'%3E%3Cg fill='%23fff' stroke='%23b4b4b0' stroke-width='2' paint-order='stroke'%3E%3Cpath d='M2 0H6V16H15V20H2Z'/%3E%3Cpath d='M20 0H33V4H24V8H32V12H24V20H20Z'/%3E%3Cpath fill-rule='evenodd' d='M36 10a10 10.2 0 1 0 20 0a10 10.2 0 1 0-20 0ZM40.3 10a5.7 6.1 0 1 0 11.4 0a5.7 6.1 0 1 0-11.4 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 1px 0 / 60px 22px;
}
.scraw span:nth-child(1) { color: var(--mint); }
.scraw span:nth-child(2),
.scraw span:nth-child(3) { color: var(--lilac); }
.scraw span:nth-child(4) { color: var(--coral); }
.scraw span:nth-child(5) { color: var(--sky); }

/* The two names in running text, lettered as their logos: "scraw" and "kaliko" in the coat at the
   same size (scrawLFO's 92%), "LFO" and "DSP" white with the card logo's grey edge so they read on any grey. */
.brand {
  font-family: var(--brand);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.brand .scraw { font-size: 92%; font-weight: 500; letter-spacing: -0.02em; }
.brand .kaliko { font-size: 92%; font-weight: 500; letter-spacing: -0.02em; }
.brand > b:last-child {
  font-weight: 600;
  color: var(--paper);
  -webkit-text-stroke: 1.5px #a4a4a0;
  paint-order: stroke fill;
}
/* scrawLFO's "LFO" in running text is the card logo's drawing (60 x 22 at 28px), scaled to the
   text: an outline round the font's letters lands between pixels at text sizes and smears the
   tops of the L and F. The L and F are drawn crisp-edged, so they snap to whole pixels at any size;
   the O stays smooth. The edge is twice the card's (4 of 60) so it stays a whole pixel at text sizes. The letters stay, transparent, for copying and screen readers.
   As on the card, the box is the drawing and stands on the baseline, dropped by the edge (2 of 24). */
.brand > .scraw + b {
  display: inline-block;
  overflow: hidden;
  width: 2.2143em;  /* the drawing's, not the hidden text's (2.07em), or the O's right edge is cut */
  height: 0.8571em;
  vertical-align: -0.0714em;
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='24' viewBox='0 -2 60 24'%3E%3Cg fill='%23fff' stroke='%23bcbcb8' stroke-width='4' paint-order='stroke'%3E%3Cpath shape-rendering='crispEdges' d='M2 0H6V16H15V20H2Z'/%3E%3Cpath shape-rendering='crispEdges' d='M20 0H33V4H24V8H32V12H24V20H20Z'/%3E%3Cpath fill-rule='evenodd' d='M36 10a10 10.2 0 1 0 20 0a10 10.2 0 1 0-20 0ZM40.3 10a5.7 6.1 0 1 0 11.4 0a5.7 6.1 0 1 0-11.4 0Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0.0357em 0 / 2.1429em 0.8571em;
}
.brand > .kaliko + b { letter-spacing: -0.06em; }

.tag {
  display: inline-block;
  vertical-align: top;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 16px;
}

.card p { color: var(--text); }

.buy {
  display: inline-block;
  vertical-align: top;
  margin-top: 24px;
  padding: 9px 20px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.buy:hover { color: var(--fg); background: var(--paper); border-color: var(--fg); }

/* Beside Buy, to the "Try scrawLFO" tour. Not a.buy: that class opens the checkout. Same
   pill, borderless until pointed at, in the Buy button's typeface (layout.css sets that one). */
.try {
  display: inline-block;
  vertical-align: top;
  margin: 24px 0 0 4px;
  padding: 9px 14px;
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: var(--outline);
  text-underline-offset: 3px;
}
.try:hover { color: var(--fg); text-decoration-color: var(--fg); }

.contact {
  padding: 56px 0;
}
.contact h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }

/* The light-skin shots are nearly the page's own grey, so they get the card's hairline edge.
   Drawn over the photo (not as its border) so it follows the carousel's rounded corners.
   A new light-skin photo needs its file name added here. */
.k-slide:has(img[src$="02-scrawl.png"], img[src$="09-lines-show-all.png"],
             img[src$="10-curves-lava-lamp.png"], img[src$="16-lfo-hybrid-green.png"])::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--outline);
  border-radius: 12px;
  pointer-events: none;
}
.contact p { color: var(--text); }

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 48px;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer nav a { margin-left: 16px; color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--fg); }
footer nav a:first-child { margin-left: 0; }
@media (max-width: 600px) { footer nav a, footer nav a:first-child { display: inline-block; margin: 0 20px 0 0; padding: 8px 0; } }
/* The name in the footer's small capitals, at the size of the words round it. */
footer .brand { font-size: 1.15em; }
footer .trademark { margin-top: 14px; text-transform: none; letter-spacing: 0.02em; font-size: 0.7rem; }

.legal { padding-top: 48px; padding-bottom: 72px; max-width: 70ch; }
/* Lexend runs wide: a long German word (Datenschutzerklärung) breaks rather than push a phone sideways. */
.legal h1 { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: 24px; hyphens: auto; overflow-wrap: break-word; }
.legal h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--text); margin-bottom: 10px; }
.legal ul { padding-left: 20px; }
.fill { background: #f6ddd5; color: #7a3524; padding: 0 4px; border-radius: 3px; }

/* The start page: the "Try scrawLFO" tour (tutorial/) is its main feature, straight under a short
   introduction, with buying, the screenshots and the description after it. Every part runs as
   wide as the tour. */
.home .wrap { max-width: 1280px; }

header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.site-nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; font-weight: 500; }
.site-nav a { text-decoration: none; color: var(--text); }
.site-nav a:hover { color: var(--fg); }
/* The header's one solid button, to the price and checkout on the start page. */
.site-nav .nav-buy {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.site-nav .nav-buy:hover { background: #000; color: #fff; }

/* "Try it": the demo's two downloads, in a small menu under the link (nav-try.js closes it on a
   click elsewhere). */
.nav-try { position: relative; }
.nav-try summary { list-style: none; cursor: pointer; color: var(--text); }
.nav-try summary::-webkit-details-marker { display: none; }
.nav-try summary:hover, .nav-try[open] summary { color: var(--fg); }
.nav-try-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 20;
  width: 260px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--outline); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); font-weight: 400;
}
.nav-try-menu p { margin: 0 0 10px; font-size: 0.9rem; color: var(--text); }
.site-nav .nav-try-menu a {
  display: block; padding: 7px 12px; margin-bottom: 6px; text-align: center;
  border: 1px solid var(--outline); border-radius: 999px; color: var(--fg); font-weight: 500;
}
.site-nav .nav-try-menu a:hover { border-color: var(--fg); background: var(--bg); }
@media (max-width: 600px) {
  header { padding: 20px 0 16px; }
  header .wrap { position: relative; row-gap: 14px; }
  .site-nav { flex: 1 1 100%; justify-content: space-between; gap: 4px 12px; }
  .site-nav .nav-buy { padding: 7px 14px; }
  .nav-try { position: static; }
  .nav-try-menu { top: 100%; left: 16px; right: 16px; width: auto; transform: none; }
}

/* The manuals page's introduction (it began as the start page's). */
.home-lede { margin-top: 18px; max-width: 64ch; font-size: 1.15rem; line-height: 1.5; color: var(--text); }
.home-lede b { color: var(--fg); font-weight: 600; }

/* The start page, top to bottom: the hero, the "Try scrawLFO" tour (tutorial/), what it does, the
   photos, buying it, then the requirements. Nothing in it may push the page sideways on a phone
   (the hero's glow reaches past its picture). */
.home main { overflow-x: clip; }

/* Shared by its sections: a centred heading block, and the pill buttons. */
.home .sec-head { max-width: 60ch; margin: 0 auto 28px; text-align: center; }
.eyebrow {
  margin-bottom: 12px;
  font: 600 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sec-head h2 { margin-bottom: 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.sec-head p { font-size: 1.05rem; color: var(--text); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
}
.btn-primary { background: var(--fg); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-ghost { border-color: var(--outline); background: var(--paper); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); color: var(--fg); }

/* 1. The hero: the name, what it is and the two ways in, beside a Scrawl. */
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 48px; }
@media (min-width: 960px) { .home-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
/* The wordmark at twice the card logo's 28px, its drawn "LFO" doubled with it so it stays on whole
   pixels (as tutorial.css does for the tour's own title, there without the grey edge). */
.hero-logo { margin-bottom: 22px; font-size: 56px; line-height: 1; }
.hero-logo b { height: 44px; vertical-align: -2px; background-position: 2px 0; background-size: 120px 44px; }
/* The title's "LFO" in plain white letters, without the grey edge, as kalikoDSP's "DSP" in the header. */
.hero-logo b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='22' viewBox='0 -1 60 22'%3E%3Cg fill='%23fff'%3E%3Cpath d='M2 0H6V16H15V20H2Z'/%3E%3Cpath d='M20 0H33V4H24V8H32V12H24V20H20Z'/%3E%3Cpath fill-rule='evenodd' d='M36 10a10 10.2 0 1 0 20 0a10 10.2 0 1 0-20 0ZM40.3 10a5.7 6.1 0 1 0 11.4 0a5.7 6.1 0 1 0-11.4 0Z'/%3E%3C/g%3E%3C/svg%3E"); }
.headline { margin-bottom: 18px; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; }
.headline em {
  font-style: normal;
  background: linear-gradient(90deg, var(--mint), var(--lilac) 45%, var(--coral) 75%, var(--sky));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { max-width: 46ch; margin-bottom: 28px; font-size: 1.15rem; line-height: 1.55; color: var(--text); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The demo's downloads, under the hero buttons (same links as the price box). */
.hero-demo { margin-top: 18px; }
.hero-demo .demo-label { margin: 0 0 8px; font-size: 0.9rem; color: var(--muted); }
.hero-demo .demo-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; }
.hero-demo .btn { padding: 10px 18px; font-size: 0.92rem; }
.hero-meta { margin-top: 18px; font-size: 0.85rem; color: var(--muted); }
.hero-meta span { white-space: nowrap; }
.hero-meta span + span::before { content: "·"; margin: 0 8px 0 4px; }
.hero-shot { position: relative; min-width: 0; }
.hero-shot::before {
  content: "";
  position: absolute;
  inset: 8% -4% -6% 6%;
  border-radius: 28px;
  background: conic-gradient(from 200deg, var(--mint), var(--lilac), var(--coral), var(--sky), var(--mint));
  filter: blur(46px);
  opacity: 0.55;
}
.hero-shot img { position: relative; display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45); }
@media (max-width: 600px) {
  .home-hero { gap: 32px; padding-top: 36px; padding-bottom: 32px; }
  .hero-logo { font-size: 42px; margin-bottom: 18px; }
  .hero-logo b { height: 33px; vertical-align: -1.5px; background-position: 1.5px 0; background-size: 90px 33px; }
  .hero-sub { font-size: 1.05rem; }
}

/* 2. The tour, framed as its own band. */
.home .demo-sec { padding: 64px 0 56px; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 0; }
@media (max-width: 600px) { .home .demo-sec { padding: 44px 0 40px; } }

/* 3. What it does: the two modes as cards, then four numbers, each edged in an engine's colour (--c). */
.features { padding-top: 72px; padding-bottom: 24px; scroll-margin-top: 16px; }
.mode-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .mode-cards { grid-template-columns: 1fr 1fr; } }
.mode-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.mode-media { background: #fafafa; }
.mode-media img { display: block; width: 100%; height: auto; }
.mode-body { flex: 1; padding: 22px 24px 24px; border-top: 4px solid var(--c); }
.mode-body h3 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.mode-body p { line-height: 1.55; color: var(--text); }
.stat-tiles { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 760px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat-tiles > div { padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; background: var(--paper); }
.stat-tiles b { display: block; font-family: var(--brand); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--fg); }
.stat-tiles span { font-size: 0.92rem; color: var(--text); }
.features-note { margin-top: 18px; font-size: 0.92rem; color: var(--muted); text-align: center; }

/* 4. The photos, on a row of their own. */
.gallery { padding-top: 56px; padding-bottom: 24px; }
.gallery .k-carousel { max-width: 980px; margin: 0 auto; }
.gallery .k-slides { border-radius: 16px; box-shadow: 0 24px 50px -24px rgb(0 0 0 / 0.4); }
.gallery .k-slides .k-slide::after { border-radius: 16px; }

/* 5. Buying it: a dark card, what you get beside the price. */
.get { padding-top: 64px; padding-bottom: 64px; scroll-margin-top: 16px; }
.buy-card { display: grid; gap: 28px; align-items: center; padding: 40px; border-radius: 22px; background: #1e1e1e; color: #ddd; }
@media (min-width: 900px) { .buy-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 48px 56px; } }
.buy-tag { margin: 4px 0 18px; font-size: 1.15rem; font-weight: 600; color: #fff; }
.ticks { display: grid; gap: 8px; list-style: none; color: #cfcfcf; }
.ticks li { position: relative; padding-left: 1.6em; }
.ticks li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; color: var(--mint); }
.price-box { padding: 28px; border-radius: 16px; background: #2a2a2a; text-align: center; }
.price { font: 600 3.4rem/1 var(--brand); color: #fff; }
.price small { margin-left: 6px; font-size: 1rem; font-weight: 400; color: #999; }
/* The checkout button: links to the Moonbase product page. */
.price-box .buy { display: flex; width: 100%; margin-top: 18px; border: 0; background: var(--mint); color: #10261f; }
.price-box .buy:hover { background: #a6e6d3; color: #10261f; }
.demo-label { margin-top: 18px; font-size: 0.9rem; color: #bbb; }
.demo-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.price-box .btn-ghost { padding: 11px 16px; border-color: #555; background: transparent; color: #fff; font-size: 0.92rem; }
.price-box .btn-ghost:hover { border-color: #fff; color: #fff; }
.price-note { margin-top: 14px; font-size: 0.82rem; color: #999; }
@media (max-width: 600px) {
  .get { padding-top: 40px; padding-bottom: 40px; }
  .buy-card { padding: 28px 20px; border-radius: 18px; }
  .price-box { padding: 22px 18px; }
  .price { font-size: 2.8rem; }
}

/* 6. Which version: a card for each, the full table folded under them. */
.reqs { padding-top: 24px; padding-bottom: 56px; }
.req-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .req-grid { grid-template-columns: 1fr 1fr; } }
.req { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.req h3 { margin-bottom: 14px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.req dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; font-size: 0.93rem; }
.req dt { color: var(--muted); }
.req dd { color: var(--text); }
@media (max-width: 400px) { .req dl { grid-template-columns: 84px minmax(0, 1fr); } }
.req-full { margin-top: 18px; }
.req-full summary { cursor: pointer; font-weight: 500; color: var(--text); }
.req-full summary:hover { color: var(--fg); }
.req-full .sysreq { margin-top: 14px; }
/* The full requirements table, folded under the two cards; it scrolls sideways on a narrow phone. */
.sysreq { min-width: 0; }
.sysreq-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.sysreq table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .92rem; line-height: 1.45; }
.sysreq th, .sysreq td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.sysreq tbody tr:last-child > * { border-bottom: 0; }
.sysreq thead th { background: var(--surface); color: var(--fg); font-weight: 600; }
.sysreq tbody th { width: 16%; color: var(--fg); font-weight: 600; }
.sysreq td { width: 42%; }
@media (max-width: 600px) {
  .sysreq-scroll { overflow: visible; }
  .sysreq table { min-width: 0; font-size: .88rem; }
  .sysreq thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sysreq tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .sysreq tbody tr:last-child { border-bottom: 0; }
  .sysreq tbody th, .sysreq td { width: auto; padding: 0; border-bottom: 0; }
  .sysreq tbody th { grid-column: 1 / -1; margin-bottom: 4px; }
  .sysreq td::before { content: "Max for Live"; display: block; margin-bottom: 1px; color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
  .sysreq td + td::before { content: "VST3"; }
}
@media (max-width: 600px) {
  .home-lede { font-size: 1rem; margin-top: 12px; }
}

/* The manuals page: one card per guide, its first page as the cover, side by side when there's room. */
.manuals-intro { padding-top: 40px; padding-bottom: 28px; }
.manuals-intro h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.02em; }
.manuals-grid { display: grid; gap: 24px; padding-bottom: 24px; }
@media (min-width: 820px) { .manuals-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.manual {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--outline);
  border-radius: 14px;
  background: var(--surface);
}
.manual-cover { display: block; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.manual-cover img { display: block; width: 100%; height: auto; transition: transform 0.25s ease; }
.manual-cover:hover img { transform: scale(1.015); }
.manual .tag { margin-bottom: 6px; }
.manual h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.manual p { color: var(--text); }
.manual p b { color: var(--fg); font-weight: 600; }
.manual-contents {
  margin: 16px 0 0;
  padding: 14px 0 0 2.2em;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: 32px;
  font-size: 0.92rem;
  color: var(--muted);
}
.manual-contents li { break-inside: avoid; padding-left: 4px; }
.manual-contents li::marker { font-family: var(--mono); font-size: 0.8em; }
.manual-meta {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted) !important;
}
.manual-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
/* The Buy button's pill, without its class: a.buy opens the checkout. */
.pill, .pill-quiet {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  color: var(--fg);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.pill:hover { background: var(--paper); border-color: var(--fg); }
.pill-quiet { border-color: transparent; text-decoration: underline; text-decoration-color: var(--outline); text-underline-offset: 3px; }
.pill-quiet:hover { text-decoration-color: var(--fg); }
.site-nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--outline); text-underline-offset: 6px; }
@media (max-width: 600px) {
  .manuals-intro { padding-top: 28px; }
  .manual { padding: 18px; }
  .manual-contents { columns: 1; }
}

/* A manual drawn in the page (manuals/viewer.js): a bar to go back or download, then the pages. */
.manual-bar { position: sticky; top: 0; z-index: 2; background: var(--bg); border-bottom: 1px solid var(--line); }
.manual-bar .wrap { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.manual-bar h1 { flex: 1 1 auto; font-size: 1.05rem; font-weight: 600; }
.manual-back { color: var(--text); text-decoration: none; font-weight: 500; }
.manual-back:hover { color: var(--fg); }
.manual-bar .pill { padding: 6px 16px; }
.manual-viewer-wrap { padding-top: 28px; padding-bottom: 56px; }
#manual-viewer { max-width: 1000px; margin: 0 auto; display: grid; gap: 24px; }
.manual-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--outline);
  border-radius: 6px;
  background: #e9e9e9;
  box-shadow: 0 2px 14px rgb(0 0 0 / 0.06);
}
.manual-page canvas { display: block; width: 100%; height: 100%; }
.manual-link { position: absolute; z-index: 2; }
.manual-loading, .manual-error { padding: 48px 0; text-align: center; color: var(--muted); }
@media (max-width: 600px) { #manual-viewer { gap: 14px; } .manual-viewer-wrap { padding-left: 12px; padding-right: 12px; } }

/* PDF.js's text layer (from its pdf_viewer.css): invisible words over the canvas for selecting and ⌘F. */
.textLayer {
  position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial;
  -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none;
  transform-origin: 0 0; caret-color: CanvasText; z-index: 0;
}
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgb(0 0 255 / 0.25); background: color-mix(in srgb, AccentColor, transparent 75%); }
.textLayer br::selection { background: transparent; }