/* Chord Lens — /download, the desktop app page (P320). Built on base.css's tokens, pill and buttons. */

.sprite { display: none; }

/* Blocks below set display, which outranks the user agent's [hidden] rule. */
.dl [hidden] { display: none; }

.dl { padding: clamp(2rem, 6vw, 4.5rem) 0 2rem; }

.dl__body {
  width: min(720px, 100% - 3rem);
  margin-inline: auto;
  display: grid;
  gap: 1.25rem;
}

.dl svg { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

.dl__pill { justify-self: start; }
.dl h1 { font-size: clamp(2.3rem, 5vw, 2.9rem); margin-top: 0.75rem; }
.dl__lede { margin-top: 0.25rem; }

/* ---- The Mac download ------------------------------------------------- */

.dl__get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.75rem;
}
.dl__btn { padding: 0.85rem 1.4rem; font-size: 1rem; }
.dl__meta { font-size: 0.86rem; color: var(--text-dim); }

.dl__tiles, .dl__choice, .dl__list, .dl__steps ol { list-style: none; margin: 0; padding: 0; }

.dl__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
}
.dl__tiles li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.dl__tiles strong { color: var(--text-dim); }
.dl__tiles span { color: var(--text-faint); font-size: 0.84rem; }

/* ---- Coming soon on this OS ------------------------------------------- */

.dl__soon {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-700);
  margin-top: 0.75rem;
}
.dl .dl__soon-icon { width: 2rem; height: 2rem; color: var(--text-dim); }
.dl__soon div { flex: 1; }
.dl__soon h2 { font-size: 1.05rem; letter-spacing: -0.01em; }
.dl__soon p { margin-top: 0.3rem; color: var(--text-dim); font-size: 0.92rem; }
.dl__soon p a { text-decoration: underline; text-underline-offset: 3px; }
.dl__jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  white-space: nowrap;
}
.dl__jump:hover { color: var(--text); }

.dl__too { font-size: 1.05rem; letter-spacing: -0.01em; margin-top: 1rem; scroll-margin-top: 5rem; }

/* ---- OS unknown: pick one --------------------------------------------- */

.dl__choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.dl__pick {
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-700);
}
.dl .dl__pick svg { width: 1.8rem; height: 1.8rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.dl__pick strong { font-size: 1.05rem; }
.dl__pick span { color: var(--text-faint); font-size: 0.92rem; }
.dl__pick--live { border-color: var(--accent-hot); transition: background 0.18s; }
.dl__pick--live:hover { background: var(--ink-600); }
.dl .dl__pick--live svg { color: var(--text); }
.dl__pick--live span { color: var(--accent-hot); font-weight: 600; }

/* ---- Phone ------------------------------------------------------------ */

.dl__card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--ink-700);
  margin-top: 0.75rem;
}
.dl .dl__card svg { width: 1.6rem; height: 1.6rem; color: var(--text-dim); }

.dl__list { margin-top: 1rem; }
.dl__list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.dl .dl__list svg { width: 1.4rem; height: 1.4rem; color: var(--text-dim); }
.dl__list span { margin-left: auto; color: var(--text-faint); font-size: 0.92rem; }
.dl__list .dl__ok { color: var(--sect-text); font-weight: 600; }

.dl__studio { justify-self: start; margin-top: 1.25rem; }

/* ---- Mac steps -------------------------------------------------------- */

.dl__steps {
  margin-top: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.dl__steps h2 { font-size: 1.35rem; scroll-margin-top: 4.5rem; }
.dl__why { margin-top: 1.1rem; color: var(--text-dim); font-size: 0.95rem; }

.dl__steps ol { counter-reset: step; display: grid; gap: 1.6rem; margin-top: 1.6rem; }
.dl__steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: 1rem;
  row-gap: 0.25rem;
}
.dl__steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink-700);
  font-size: 0.8rem;
  font-weight: 700;
}
.dl__steps li strong { font-weight: 600; }
.dl__steps li span { color: var(--text-dim); font-size: 0.95rem; }

.dl__term {
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-800);
}
.dl__term p { color: var(--text-dim); font-size: 0.86rem; font-weight: 600; }
.dl__term code {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.dl__note { margin-top: 1.5rem; color: var(--text-faint); font-size: 0.86rem; }