/*  ── Moved from site.css (October 2026) ──────────────────────────────────────
 *  The rules from site.css that only this page uses. site.css is render-blocking on every
 *  page, so they no longer ride along with the rest of the site. They come first in this
 *  file, so the rules after them still override them as they did before. */

/* ── Downloads page (downloads.html) ──────────────────────────────────────────
   Reuses the site tokens and the .site-btn / .eyebrow / .mono-label vocabulary,
   so a plugin card here reads like a product section on /plugins. Nothing below
   introduces a new colour, font or radius. */

.dl-detect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .02em;
}

.dl-detect::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--meter);
  content: "";
}

.page-hero p.dl-detect {
  color: var(--ink-dim);
  font-size: 13px;
}

.dl-band {
  padding-top: 24px;
}

.dl-list {
  display: grid;
  gap: 18px;
}

.dl-card {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 28px;
  scroll-margin-top: 96px;
}

.dl-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.dl-card-intro {
  max-width: 640px;
}

.dl-card-intro h3 {
  margin-bottom: 8px;
  font-size: 30px;
}

.dl-card-intro p {
  margin-bottom: 0;
}

.dl-release {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 12px 16px;
  text-align: right;
}

.dl-release strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 20px;
}

.dl-release span:last-child {
  color: var(--ink-mut);
  font-family: var(--mono);
  font-size: 12px;
}

.dl-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dl-platform {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 22px;
}

/* The visitor's own platform is promoted to the left and outlined. Set by
   js/downloads-page.js — with no JS the two panels stay side by side, equal. */
.dl-platform.is-recommended {
  order: -1;
  border-color: rgba(26, 147, 111, .5);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px rgba(26, 147, 111, .16);
}

.dl-platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dl-platform-head .mono-label {
  color: var(--ink);
  font-size: 13px;
}

.dl-file {
  color: var(--ink-mut);
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.dl-file-soon {
  color: var(--accent-2);
}

.dl-badge-you {
  display: inline-block;
  margin-left: 8px;
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dl-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.dl-formats li {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 4px 10px;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* "Built, not shipped" badge. Dashed rather than faded: opacity at the level this
   needed to read as pending took the text under 3:1, and a dashed edge says
   provisional without touching the contrast. */
.dl-formats li.is-muted {
  border-style: dashed;
  background: none;
  color: var(--ink-mut);
}

.dl-facts {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.dl-facts li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 16px;
  color: var(--ink-dim);
  font-size: 14px;
  line-height: 1.5;
}

.dl-facts li:last-child {
  margin-bottom: 0;
}

.dl-facts li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: 5px;
  height: 1px;
  background: var(--line-2);
  content: "";
}

.dl-card code,
.dl-help code {
  border-radius: 4px;
  background: var(--panel-2);
  padding: 1px 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.dl-card-note {
  margin: 16px 0 0;
  color: var(--ink-mut);
  font-size: 14px;
}

.dl-platform-soon {
  background: var(--panel-2);
  border-style: dashed;
}

.dl-soon-note {
  margin: 0;
  color: var(--ink-mut);
  font-size: 14px;
}

/* A card whose builds exist but are not published: no button anywhere in it, so it
   is toned down to read as an announcement rather than an offer. */
.dl-card.is-pending {
  border-style: dashed;
  background: var(--panel);
}

.eyebrow.mut {
  color: var(--ink-mut);
}

/* A product group inside one card — Sounds Good ships a plugin and a tray app
   independently, and each needs its own name, version and pair of platforms. */
.dl-group + .dl-group {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.dl-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin-bottom: 14px;
}

.dl-group-head .mono-label {
  flex: 0 0 auto;
  font-size: 13px;
}

.mono-label.blue {
  color: var(--accent-2);
}

.dl-group-head p {
  flex: 1 1 320px;
  max-width: 620px;
  margin-bottom: 0;
  font-size: 14px;
}

.dl-card-note a {
  color: var(--ink);
  text-decoration-color: var(--line-2);
}

.dl-card-note a:hover {
  text-decoration-color: var(--accent);
}

.site-btn.sg {
  border-color: rgba(47, 110, 168, .6);
  background: rgba(47, 110, 168, .16);
}

.site-btn.sg:hover {
  border-color: rgba(47, 110, 168, .85);
  background: rgba(47, 110, 168, .26);
}

.dl-help-band {
  border-top: 1px solid var(--line);
  padding-top: 72px;
}

.dl-help {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dl-help-col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 26px;
}

.dl-steps {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--ink-dim);
}

.dl-steps li {
  margin-bottom: 8px;
  padding-left: 4px;
  line-height: 1.5;
}

.dl-steps li::marker {
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 13px;
}

.dl-help-note {
  margin: 0;
  color: var(--ink-mut);
  font-size: 14px;
}

.dl-strip {
  align-items: center;
}

.dl-strip h3 {
  margin-bottom: 6px;
}

.dl-strip p {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .dl-card-head {
    flex-direction: column;
    gap: 16px;
  }

  .dl-release {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .dl-platforms,
  .dl-help {
    grid-template-columns: 1fr;
  }

  .dl-card,
  .dl-help-col {
    padding: 22px;
  }

  .dl-card-intro h3 {
    font-size: 26px;
  }

  .dl-strip {
    flex-direction: column;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .dl-platform {
    padding: 18px;
  }
}

/*  ── The public downloads page ────────────────────────────────────────────────
    Its own wrapper rather than .acct-main. That class hides every .acct-panel unless a
    data-acct-state attribute matches — a state machine the account page needs and these
    pages do not have, so borrowing the class rendered them completely blank. */
.dl-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 60px 22px 86px;
}

.dl-panel {
  display: block;
}

/* The marketing palette, open layout and slow floating motion. */
.downloads-page .dl-main {
  width: min(1440px, calc(100% - 64px));
  max-width: none;
  margin: 0 auto;
  padding: 64px 0 76px;
}

.downloads-page .site-orb-1 {
  top: -14vh; right: -8vw; width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(26, 147, 111, .17), transparent 68%);
  animation-duration: 26s;
}
.downloads-page .site-orb-2 {
  top: 40vh; left: -12vw; width: 38vw; height: 38vw;
  background: radial-gradient(circle, rgba(213, 185, 66, .2), transparent 68%);
  animation-duration: 34s;
  animation-direction: reverse;
}
.downloads-page .site-orb-3 {
  right: 16vw; bottom: -10vh; width: 32vw; height: 32vw;
  background: radial-gradient(circle, rgba(162, 103, 105, .14), transparent 70%);
  animation-duration: 30s;
}

.dl-products { display: grid; gap: 96px; min-height: 540px; }
.dl-product {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 70px;
  scroll-margin-top: 100px;
  animation: dl-arrive .8s cubic-bezier(.2, .7, .2, 1) both;
}
.dl-product.is-text-only { grid-template-columns: minmax(0, 1fr); }
.dl-copy { min-width: 0; }
.dl-product-name {
  max-width: 10ch;
  margin: 0 0 36px;
  color: var(--accent-ink);
  font-size: clamp(42px, 4.9vw, 70px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.dl-free { margin: -20px 0 32px; color: var(--accent-ink); font-family: var(--mono); font-size: 13px; }
.dl-os-options { display: grid; gap: 34px; }
.dl-os-name {
  margin: 0 0 4px;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.dl-os-meta { margin: 0 0 14px; color: var(--ink-dim); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.dl-os-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; }
.dl-download, .dl-extra {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  text-decoration: none;
}
.dl-download {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(47, 47, 47, .16);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.dl-download.is-preferred { background: var(--accent-solid); }
.dl-download:hover { transform: translateY(-3px); background: var(--accent-solid); box-shadow: 0 18px 32px rgba(47, 47, 47, .2); }
.dl-extra {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 6px;
  transition: color .2s ease;
}
.dl-filetype { font-family: var(--mono); font-size: 12px; font-weight: 400; }
.dl-arrow { font-size: 22px; line-height: 1; transition: transform .2s ease; }
.dl-download:hover .dl-arrow, .dl-extra:hover .dl-arrow { transform: translateY(3px); }
.dl-extra:hover { color: var(--accent-ink); }
.dl-about {
  display: inline-block;
  margin-top: 32px;
  padding: 8px 0;
  color: var(--ink-dim);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 5px;
}
.dl-about:hover { color: var(--accent-ink); }

.dl-art { position: relative; min-width: 0; margin: 0; padding: 34px 26px 44px; }
.dl-art::before {
  position: absolute;
  inset: 20% -8% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(162, 103, 105, .12), transparent 70%);
  filter: blur(20px);
  content: '';
}
.dl-art-float { position: relative; animation: ww-float 12s ease-in-out infinite; }
.dl-plugin-image { display: block; width: 100%; height: auto; transform: rotate(-3deg); box-shadow: 0 36px 60px -18px rgba(47, 47, 47, .3); }

.dl-guides { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 44px; margin-top: 64px; }
.dl-guides a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--ink-dim); font-size: 15px; text-decoration: none; }
.dl-guides a:hover { color: var(--accent-ink); }
.dl-guides span { font-size: 22px; }
.dl-error { margin: 40px 0; color: var(--ink-dim); }
.dl-download:focus-visible, .dl-extra:focus-visible, .dl-about:focus-visible, .dl-guides a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 5px; }
@keyframes dl-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .dl-product { gap: 36px; }
  .dl-product-name { font-size: clamp(42px, 5.3vw, 58px); }
  .dl-os-links { gap: 10px 16px; }
  .dl-art { padding: 28px 18px 40px; }
}
@media (max-width: 820px) {
  .downloads-page .dl-main { padding-top: 40px; }
  .dl-product { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .dl-product-name { max-width: none; font-size: clamp(42px, 7vw, 64px); }
  .dl-os-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .dl-art { width: min(620px, 100%); justify-self: center; }
  .dl-guides { margin-top: 42px; }
}
@media (max-width: 560px) {
  .downloads-page .dl-main { width: calc(100% - 40px); padding: 32px 0 52px; }
  .dl-products { gap: 70px; min-height: 0; }
  .dl-product-name { max-width: 10ch; margin-bottom: 30px; font-size: 48px; }
  .dl-os-options { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dl-os-name { font-size: 25px; }
  .dl-os-meta { font-size: 11px; }
  .dl-os-links { gap: 10px 18px; }
  .dl-download { padding: 12px 18px; }
  .dl-extra { font-size: 14px; gap: 8px; }
  .dl-art { padding: 22px 12px 34px; }
  .dl-guides { justify-content: start; gap: 8px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-product, .dl-art-float { animation: none; }
  .dl-download, .dl-extra, .dl-arrow { transition: none; }
  .dl-download:hover, .dl-download:hover .dl-arrow, .dl-extra:hover .dl-arrow { transform: none; }
}