/* PowerBoxDJ — site theme
   Colours from the running app: near-black chrome, mid-grey panels (#2B2B2B/#3E3E3E/#414141),
   gold accent #FFC900 (the app's own highlight colour), grey text #ACACAC.
   Layout patterns: Apple-style sticky sub-nav + progressive disclosure, Serato-style tier
   comparison table, rekordbox-style monthly/yearly toggle, VirtualDJ-style caption gallery. */

:root {
  --bg:        #000000;
  --bg-2:      #0b0b0b;
  --panel:     #171717;
  --panel-2:   #212121;
  --panel-3:   #2b2b2b;
  --line:      #3a3a3a;
  --line-soft: #242424;

  --gold:      #ffc900;
  --gold-dim:  #a8871c;
  --gold-pale: #ffe98a;

  --teal:   #2fbfbf;
  --green:  #3aa83f;
  --red:    #d02a2a;
  --blue:   #3a72e0;
  --orange: #e8830f;
  --violet: #9b4fd0;

  --text:   #f0f0f0;
  --text-2: #adadad;
  --text-3: #7a7a7a;

  --radius: 0;
  --radius-sm: 0;
  --maxw: 1200px;
  --maxw-narrow: 860px;

  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --sans: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; }

body {
  margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.65;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1000px 520px at 78% -12%, rgba(255,201,0,.10), transparent 66%),
    radial-gradient(760px 420px at 4% 8%, rgba(47,191,191,.05), transparent 66%);
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

.home-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35em; text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  padding-top: 16px; padding-bottom: 16px;
}
.home-brand img { display: block; height: 1.2em; width: auto; }
.home-brand h1 { margin: 0; font-size: 1em; line-height: 1.2; }
.wrap.narrow { max-width: var(--maxw-narrow); }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-pale); }

/* THE PRODUCT NAME IS ALWAYS IN THE BRUSH COLOUR. Everywhere on the site, with no
   exceptions — in headings, in links, in the menu, on top of anything. Wrapped by
   js/nav.js wherever it appears, so this is the only place its colour is decided.
   --gold is aliased onto --accent by theme.css, so the name follows whichever brush is
   picked. Weight and size are inherited: it is the same word as the sentence around it,
   in the brand colour, not a badge.

   #ffc900 literally, NOT var(--gold): that variable is aliased onto --accent by theme.css,
   so it would change with the brush and differ between dark and light. The brand colour
   does not move.

   !important because it has to win against every rule that colours the thing it sits in —
   a:hover, .hs-cap h2, .btn-gold and the rest. js/nav.js also sets it inline and important
   on every span it wraps, which beats any stylesheet whatever the load order; this rule is
   what holds it if that inline style is ever stripped. */
.pbdj { color: #ffc900 !important; -webkit-text-fill-color: #ffc900 !important; white-space: nowrap; }

/* Type scale. Deliberately small — headings this big were eating a screenful each and
   pushing the pictures below the fold. Nothing here should shout. */
h1,h2,h3,h4 { line-height: 1.2; margin: 0 0 .45em; letter-spacing: -.02em; }
h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 750; }
h2 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 700; }
h3 { font-size: 1rem; font-weight: 640; }
h4 { font-size: .9rem; font-weight: 640; }
p { margin: 0 0 .8em; color: var(--text-2); }
.lede { font-size: .97rem; color: var(--text-2); max-width: 68ch; }
.lede-lg { font-size: 1.05rem; line-height: 1.5; color: var(--text-2); max-width: 34ch; font-weight: 500; }

/* ── header ─────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 60;
  background: rgba(0,0,0,.88); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
header.site .bar { display: flex; align-items: center; gap: 26px; height: 62px; }
/* The wordmark: white, one weight, no gold, nothing bold. Black on a light theme. */
.brand { display: flex; align-items: center; gap: 10px; font-weight: 400; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none; }
.brand img { width: 27px; height: 27px; display: block; }
.brand span { color: #fff; font-weight: 400; }
@media (prefers-color-scheme: light) {
  .brand, .brand span { color: #000; }
}
nav.main { display: flex; gap: 21px; margin-left: auto; align-items: center; }
/* :not(.btn) — a bar WORD is grey and small; a button in the bar is a button. Download Now carries
   the download page's own .btn.btn-gold.btn-lg, and this rule outranks those on specificity, so
   without the exclusion it would repaint the gold button's text grey and shrink it. */
nav.main a:not(.btn) { color: var(--text-2); font-size: .92rem; font-weight: 500; }
nav.main a:not(.btn):hover, nav.main a.on:not(.btn) { color: var(--gold); }

/* ── sticky local sub-nav (Apple pattern) ───── */
.subnav {
  position: sticky; top: 62px; z-index: 55;
  background: rgba(11,11,11,.93); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.subnav .inner { display: flex; align-items: center; gap: 4px; height: 54px; overflow-x: auto; scrollbar-width: thin; }
.subnav .title { font-weight: 700; font-size: .95rem; margin-right: 16px; white-space: nowrap; }
.subnav a {
  color: var(--text-2); font-size: .84rem; white-space: nowrap;
  padding: 6px 11px; border-radius: 0; font-weight: 500;
}
.subnav a:hover { color: var(--gold); background: rgba(255,201,0,.08); }
.subnav .cta { margin-left: auto; }

/* ── buttons ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 0;
  font-weight: 650; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.btn:active { transform: translateY(1px); }
/* The mark sits after the word — last in the flex row, so it is on the right of the
   button whatever the label says. Not a background: it has to keep its own colours
   against the gold rather than take the button's. */
.btn .btn-ico { display: block; flex: none; margin-left: 2px; width: 22px; height: 22px; object-fit: contain; }
.btn-gold { background: linear-gradient(180deg,#ffd42b,#dfa800); color: #1a1400; box-shadow: 0 6px 22px rgba(255,201,0,.18); }
.btn-gold:hover { color: #1a1400; box-shadow: 0 10px 30px rgba(255,201,0,.3); }
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn-sm { padding: 8px 15px; font-size: .86rem; }

/* ── sections ───────────────────────────────── */
section { padding: 52px 0; position: relative; z-index: 1; }
section.tight { padding: 32px 0; }
section.alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }
.section-head { max-width: 68ch; margin-bottom: 26px; }
#stems-separation .section-head,
#stems-separation .lede { max-width: none; }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  color: var(--gold); margin-bottom: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold-dim); }
.eyebrow.nolead::before { display: none; }
.rule { height: 1px; background: var(--line-soft); border: 0; margin: 0; }

/* ── hero picture ───────────────────────────────
   Full bleed: the image spans the viewport edge to edge, outside any .wrap. No frame,
   no caption, no border. Only the wordmark line and the buttons sit on top of it. */
.hero-shot { position: relative; padding: 0; line-height: 0; background: #000; }
.hero-shot > img {
  display: block; width: 100vw; max-width: 100%; height: auto; margin: 0;
}
.hero-over {
  position: absolute; inset: auto 0 0 0; line-height: normal;
  padding: 60px 0 22px;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,0) 100%);
}
/* Index mast: wedding photo as the band behind the H1. Full bleed, cropped to a viewport
   strip so the couple stays in frame and the words sit in the gradient at the bottom. */
section.hero-shot.mast {
  padding: 0;
  min-height: clamp(420px, 62vh, 720px);
  display: flex;
  align-items: flex-start;
  line-height: normal;
  overflow: hidden;
}
.hero-shot.mast > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
}
.hero-shot.mast .hero-over {
  position: relative;
  width: 100%;
  padding: 36px 0 88px;
  background: none;
}
.hero-shot.mast h1 { color: #fff; max-width: none; text-shadow: 0 1px 14px rgba(0,0,0,.75), 0 0 28px rgba(0,0,0,.45); }
.hero-shot.mast .lede { color: #f0f0f0; max-width: 54ch; text-shadow: 0 1px 12px rgba(0,0,0,.75), 0 0 22px rgba(0,0,0,.4); }
.hero-line { font-size: 1rem; color: var(--text-2); margin: 0 0 12px; letter-spacing: -.01em; }
.hero-line b { color: var(--text); font-weight: 700; }
.hero-over .cta { display: flex; gap: 11px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .hero-over { position: static; padding: 18px 0 4px; background: none; }
  .hero-shot.mast .hero-over {
    position: relative;
    padding: 24px 0 56px;
    background: none;
  }
  section.hero-shot.mast { min-height: clamp(340px, 70vh, 520px); }
}

/* ── hero (legacy text hero, still used by inner pages) ───── */
.hero { padding: 52px 0 30px; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero .meta { margin-top: 17px; font-family: var(--mono); font-size: .77rem; color: var(--text-3); }
.tagline {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .22em;
  color: var(--gold); margin-bottom: 22px;
}

/* ── screenshots ────────────────────────────── */
.shot { border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: #000; box-shadow: 0 28px 66px rgba(0,0,0,.78); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { font-family: var(--mono); font-size: .7rem; color: var(--text-3); padding: 9px 13px; border-top: 1px solid var(--line-soft); background: var(--panel); }
figure.shot { margin: 0; }
.shot-hero { margin-top: 48px; }
/* align-items:start so a short figure keeps its own height instead of stretching to the
   tallest in the row and leaving dead space under its caption. */
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
.gallery.two { grid-template-columns: repeat(2,1fr); }

/* Placeholder figure for a screenshot that hasn't been taken yet — same frame as .shot,
   dashed and gold so it reads as a gap rather than a picture. Drop the .todo and the .ph
   div when the real image lands. */
.shot.todo { border-style: solid; border-color: var(--gold-dim); background: rgba(255,201,0,.04); }
.shot.todo .ph {
  display: grid; place-items: center; text-align: center; min-height: 190px; padding: 26px;
  font-family: var(--mono); font-size: .8rem; line-height: 1.7; color: var(--gold-pale);
}
.shot.todo .ph span { color: var(--text-3); }

/* ── split ──────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.split.start { align-items: start; }
.split.start > ul.ticks { margin-top: 0; }
.split.keep { grid-template-columns: minmax(0, 1fr) minmax(220px, 18rem); }
.split.keep > .visual { min-width: 220px; }
.split.keep > .visual .ticks { margin-top: 0; }
.split + .split { margin-top: 52px; }
.split.flip .visual { order: -1; }
.split.lean-text { grid-template-columns: 1.15fr .85fr; }
.split.lean-visual { grid-template-columns: .85fr 1.15fr; }
.split ul, ul.ticks { margin: 18px 0 0; padding: 0; list-style: none; }
ul.ticks.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 9px; }
ul.ticks.two li { margin-bottom: 0; }
.split ul li, ul.ticks li { position: relative; padding-left: 22px; margin-bottom: 9px; color: var(--text-2); font-size: .95rem; }
.split ul li::before, ul.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 0; background: var(--gold); }
.split ul li b, ul.ticks li b { color: var(--text); font-weight: 600; }
[data-strip] ul.ticks li { cursor: pointer; outline: none; }
[data-strip] ul.ticks li:hover,
[data-strip] ul.ticks li.at { color: var(--text); }
[data-strip] ul.ticks li:hover::before,
[data-strip] ul.ticks li.at::before { background: var(--accent); }

/* ── cards ──────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.cards.two { grid-template-columns: repeat(2,1fr); }
.cards.four { grid-template-columns: repeat(4,1fr); }
.card {
  border: 1px solid var(--line-soft); border-radius: 0;
  background: linear-gradient(180deg, rgba(43,43,43,.5), rgba(11,11,11,.5));
  padding: 22px; transition: border-color .16s, transform .16s;
}
.card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.card .ico { width: 38px; height: 38px; border-radius: 0; display: grid; place-items: center; background: rgba(255,201,0,.10); border: 1px solid rgba(255,201,0,.22); margin-bottom: 14px; }
.card .ico svg { width: 19px; height: 19px; stroke: var(--gold); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin-bottom: 6px; }
.card p { margin: 0; font-size: .91rem; color: var(--text-2); }
.card p + p { margin-top: .6em; }

/* ── stats ──────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 0; overflow: hidden; }
.stats div { background: var(--bg-2); padding: 24px 14px; text-align: center; }
.stats strong { display: block; font-size: 1.75rem; color: var(--gold); font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
.stats span { font-family: var(--mono); font-size: .66rem; letter-spacing: .09em; color: var(--text-3); display: block; margin-top: 5px; }

/* ── spec / encyclopedia blocks ─────────────── */
.spec-block { border-top: 1px solid var(--line-soft); padding-top: 34px; margin-top: 46px; }
.spec-block:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.spec-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.spec-grid .label h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.spec-grid .label p { font-size: .88rem; color: var(--text-3); margin: 0; }
.spec-grid .label .n { font-family: var(--mono); font-size: .7rem; color: var(--gold-dim); letter-spacing: .12em; display: block; margin-bottom: 6px; }

table.spec { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.spec th, table.spec td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.spec th { font-family: var(--mono); font-size: .67rem; letter-spacing: .12em; color: var(--text-3); font-weight: 400; }
table.spec td { color: var(--text-2); }
table.spec td:first-child { color: var(--text); font-weight: 600; width: 30%; }
table.spec.beatgrid-cva { width: auto; }
table.spec.beatgrid-cva td:first-child { width: auto; }
table.spec tr:hover td { background: rgba(255,255,255,.018); }
table.spec code, code.k { font-family: var(--mono); font-size: .84em; color: var(--gold); background: rgba(255,201,0,.07); padding: 1px 5px; border-radius: 0; }

/* ── news ────────────────────────────────────────────────────────────────────────
   news.html: one row per release, the version on the left and its notes on the right,
   one note per line. No header row — the two columns say what they are. Every row is
   written by js/news.js from the feed the publisher uploads. */

table.news { width: 100%; border-collapse: collapse; }
table.news td { text-align: left; vertical-align: top; padding: 16px 14px; border-bottom: 1px solid var(--line-soft); }
table.news tbody tr:hover td { background: rgba(255,255,255,.018); }

.news-v { width: 190px; white-space: nowrap; font-family: var(--mono); font-size: .82rem; letter-spacing: .02em; color: var(--gold); }

.news-what p { margin: 0 0 7px; font-size: .95rem; line-height: 1.5; color: var(--text-2); }
.news-what p:last-child { margin-bottom: 0; }
.news-empty { margin: 0; padding: 28px 0; font-size: .95rem; color: var(--text-3); }

/* Two columns do not fit a phone, so the version stops being a column and becomes the
   heading of the release under it. Same rows, stacked. */
@media (max-width: 720px) {
  table.news, table.news tbody, table.news tr, table.news td { display: block; width: auto; }
  table.news tr { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  table.news td { padding: 0; border: 0; }
  table.news tbody tr:hover td { background: none; }
  .news-v { width: auto; margin-bottom: 8px; }
}

/* ── software update ─────────────────────────────────────────────────────────────
   updates.html: every release, newest first. The version is the heading and each item in it
   is a row of its own, separated by the hairline every list on this site is separated by —
   table.spec, .reqs and .faq all draw the same line. No bullet character: the rule between
   two rows already says they are two things, and drawing both says it twice.

   ONE MEASURE. The block is as wide as it is readable and no wider, whatever the window is
   doing: these are sentences, and a note running the full width of a 27-inch screen is one
   line the eye cannot get back to the start of.

   Written by js/updates.js from the updater's own feed — nothing here or in updates.html
   knows about any release. The two headings appear only on a release that has both lists,
   which is the app's own rule; see that file. */
.upd { max-width: 84ch; }
/* One release is one block, and the line between two of them is heavier than the line
   between two items inside one — otherwise every rule on the page is the same rule and the
   blocks run together. */
.upd + .upd { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); }

/* Mono and in the brush colour, the same treatment as the version on the download page
   (.dl-ver b): it is the same number, read for the same reason, so it looks the same. */
.upd-v {
  margin: 0; font-family: var(--mono); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .01em; color: var(--accent);
}

/* Updates / Bug Fixes. A label on the list under it, not a section of the page, so it is
   the quietest thing in the block rather than the loudest. */
.upd-head {
  margin: 24px 0 0; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .14em; color: var(--text-3);
}

.upd-rows { margin-top: 8px; }
.upd-row { margin: 0; padding: 12px 0; font-size: .95rem; line-height: 1.55; color: var(--text-2); }
.upd-row + .upd-row { border-top: 1px solid var(--line-soft); }

/* Loading, and the two ways it can come to nothing. */
.upd-note { margin: 0; padding: 28px 0; font-size: .95rem; color: var(--text-3); }

/* dense token list — for column dumps, preset dumps */
.tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.tokens li {
  font-family: var(--mono); font-size: .72rem; color: var(--text-2);
  border: 1px solid var(--line-soft); border-radius: 0; padding: 3px 8px;
  background: rgba(255,255,255,.02);
}
.tokens li.hi { color: var(--gold); border-color: var(--gold-dim); background: rgba(255,201,0,.06); }
.tokens.sm li { font-size: .68rem; padding: 2px 6px; }

/* two/three column bullet columns for long lists */
.collist { columns: 2; column-gap: 40px; margin: 16px 0 0; padding: 0; list-style: none; }
.collist.three { columns: 3; }
.collist li { break-inside: avoid; position: relative; padding-left: 18px; margin-bottom: 7px; font-size: .9rem; color: var(--text-2); }
.collist li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 0; background: var(--gold-dim); }
.collist li b { color: var(--text); font-weight: 600; }

/* ── pricing ────────────────────────────────── */
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 0; padding: 3px; gap: 3px; margin-bottom: 34px; }
.toggle button {
  border: 0; background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--sans); font-size: .86rem; font-weight: 600;
  padding: 7px 18px; border-radius: 0;
}
.toggle button.on { background: var(--gold); color: #1a1400; }
.toggle .save { font-family: var(--mono); font-size: .68rem; color: var(--gold); margin-left: 6px; }

.plans { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; align-items: stretch; }
.plan {
  border: 1px solid var(--line-soft); border-radius: 0;
  background: linear-gradient(180deg, rgba(43,43,43,.42), rgba(11,11,11,.42));
  padding: 22px 18px; display: flex; flex-direction: column;
}
.plan.feature { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(46,42,28,.7), rgba(11,11,11,.6)); }
.plan .pname { font-weight: 720; font-size: 1.12rem; margin-bottom: 3px; }
.plan .ptag { font-size: .8rem; color: var(--text-3); min-height: 2.6em; margin-bottom: 12px; }
.plan .price { font-size: 1.9rem; font-weight: 400; letter-spacing: -.03em; color: var(--gold); line-height: 1; }
.plan .price small { font-size: .72rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; display: block; margin-top: 5px; font-family: var(--mono); }
.plan ul { list-style: none; margin: 16px 0 18px; padding: 0; flex: 1; }
.plan ul li { font-size: .84rem; color: var(--text-2); padding-left: 17px; position: relative; margin-bottom: 6px; }
.plan ul li::before { content: "+"; position: absolute; left: 0; color: var(--gold); font-family: var(--mono); }
.plan .btn { width: 100%; justify-content: center; }
.badge { display: inline-block; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: #1a1400; background: var(--gold); padding: 2px 8px; border-radius: 0; margin-bottom: 8px; }

/* comparison matrix (Serato pattern) */
table.matrix { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.matrix th, table.matrix td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; }
table.matrix thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; color: var(--text-2); font-weight: 500; position: sticky; top: 116px; background: rgba(11,11,11,.97); backdrop-filter: blur(10px); z-index: 10; }
table.matrix thead th:first-child, table.matrix td:first-child { text-align: left; }
table.matrix td:first-child { color: var(--text-2); width: 44%; }
table.matrix tr.grp td { background: var(--panel); color: var(--gold); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; font-weight: 500; padding: 9px 12px; }
table.matrix .y { color: var(--gold); font-weight: 700; }
table.matrix .n { color: #3f3f3f; }
table.matrix tbody tr:hover td { background: rgba(255,255,255,.02); }
table.matrix tbody tr.grp:hover td { background: var(--panel); }

/* ── steps ──────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: s; }
.step { position: relative; padding-top: 42px; }
.step::before { counter-increment: s; content: counter(s,decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 1.5rem; color: var(--gold-dim); font-weight: 700; }
.step::after { content: ""; position: absolute; top: 14px; left: 44px; right: 0; height: 1px; background: var(--line-soft); }
.step:last-child::after { display: none; }

/* ── misc ───────────────────────────────────── */
.panel { border: 1px solid var(--line); border-radius: 0; background: var(--panel); padding: 18px; }
.panel .cap { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: var(--text-3); margin-bottom: 12px; }
.note { border-left: 2px solid var(--gold-dim); padding: 2px 0 2px 16px; color: var(--text-3); font-size: .88rem; }
.pull { font-size: 1.25rem; line-height: 1.5; color: var(--text); border-left: 2px solid var(--gold); padding-left: 20px; margin: 28px 0; font-weight: 500; }

.logos { display: flex; flex-wrap: wrap; gap: 10px; }
.logos span { border: 1px solid var(--line); border-radius: 0; padding: 10px 16px; font-size: .87rem; color: var(--text-2); background: rgba(255,255,255,.02); }
.logos span:hover { border-color: var(--gold-dim); color: var(--gold); }

/* download page — release panel beside requirements */
.dl { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: start; }

.reqs { list-style: none; margin: 0; padding: 0; }
.reqs li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: .89rem; color: var(--text-2); }
.reqs li:last-child { border-bottom: 0; }
.reqs li b { color: var(--text); font-weight: 600; }

.band {
  border: 1px solid rgba(255,201,0,.2); border-radius: 0;
  background: radial-gradient(700px 300px at 50% 0%, rgba(255,201,0,.1), transparent 70%), linear-gradient(180deg,#1c1810,#0b0b0b);
  padding: 52px 40px; text-align: center;
}
.band h2 { margin-bottom: 10px; }
.band p { max-width: 56ch; margin: 0 auto 24px; }
.band .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.faq details { border-bottom: 1px solid var(--line-soft); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--gold); font-family: var(--mono); font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::before { content: "\2013"; }
.faq details p, .faq details ul { margin: 10px 0 0 24px; font-size: .92rem; }

.todo { border: 1px solid var(--gold-dim); border-radius: 0; background: rgba(255,201,0,.05); color: var(--gold-pale); padding: 12px 16px; font-family: var(--mono); font-size: .77rem; margin: 16px 0; }

.pagehead { padding: 62px 0 36px; border-bottom: 1px solid var(--line-soft); }
.pagehead h1 { font-size: clamp(2.1rem,4.6vw,3.3rem); }

/* ── responsive ─────────────────────────────── */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(3,1fr); }
  .stats { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 980px) {
  .split, .split.lean-text, .split.lean-visual, .dl { grid-template-columns: 1fr; gap: 34px; }
  .split.flip .visual { order: 0; }
  .cards, .cards.four { grid-template-columns: repeat(2,1fr); }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .step::after { display: none; }
  .spec-grid { grid-template-columns: 1fr; gap: 18px; }
  .collist.three { columns: 2; }
  nav.main { display: none; }
  table.matrix thead th { top: 62px; }
}
@media (max-width: 640px) {
  .cards, .cards.two, .cards.four, .steps, .gallery, .gallery.two, .plans { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .collist, .collist.three { columns: 1; }
  section { padding: 58px 0; }
  html { scroll-padding-top: 130px; }
}