/* ===========================================================================
   Denote — download page (landing-styled: Söhne display, Roboto body)
   Loads AFTER landing.css + blog.css and leans on their tokens and
   scaffolding (body flex column, .wrap gutters, .fineprint). Covers only
   what the download page adds: the centered column, the CTA stack, and
   the release-notes card.
   =========================================================================== */

.download-main {
  flex: 1;
  padding-block: clamp(3rem, 8vw, 5.5rem) var(--section-y);
}

/* Narrower than the blog's reading column; everything centers. */
.download {
  max-width: 38rem;
  text-align: center;
}

.download__title {
  /* Same scale step as the landing's .section-title — no third display size. */
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.download__lead {
  margin-top: 0.9rem;
  font-size: 1.0625rem;
  color: hsl(var(--fg-soft));
}

.download__cta {
  margin-top: clamp(1.9rem, 4.5vw, 2.75rem);
}

/* Deliberately one step larger than the sitewide button: this page's whole
   job is this one action. */
.download__cta .btn-primary {
  font-size: 1.0625rem;
  padding: 1rem 1.75rem;
}

.download__meta {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: hsl(var(--fg-muted));
}

/* ---------- Post-click + non-Mac states ---------- */

/* The state script hides elements via the hidden attribute; make sure it
   beats .btn-primary's display: inline-flex. */
.download [hidden] {
  display: none !important;
}

/* Both CTA buttons flip label and icon once their action has happened
   (download started, link copied). One state class, two icons. */
.download .btn-primary .icon-done {
  display: none;
}

.download .btn-primary.is-done .icon-done {
  display: inline-block;
}

.download .btn-primary.is-done .icon-get {
  display: none;
}

/* Next steps, revealed after the download starts. */
.download__next {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  color: hsl(var(--fg-soft));
}

/* Non-Mac visitors (phones, in-app browsers, other desktops) get a
   copy-link action in place of a DMG they cannot use here. */
.download__other-note {
  margin-bottom: 1.1rem;
  font-size: 0.9375rem;
  color: hsl(var(--fg-muted));
}

/* The copy action is a real <button>; strip the element defaults that
   .btn-primary (written for anchors) does not cover. */
.download__other .btn-primary {
  border: 0;
  cursor: pointer;
}

/* ---------- Release notes card ---------- */

.download__notes {
  margin-top: clamp(2.75rem, 6vw, 4rem);
  text-align: left;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: clamp(1.4rem, 3.5vw, 2rem);
}

/* Same quiet-metadata treatment as the blog's .post__date — the landing
   language has no uppercase kicker idiom, so this label doesn't invent one. */
.download__notes-label {
  font-size: 0.9375rem;
  color: hsl(var(--fg-muted));
}

.download__notes-title {
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.3;
}

.download__notes-body {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
}

.download__notes-body p,
.download__notes-body li {
  color: hsl(var(--fg-soft));
  line-height: 1.65;
}

.download__notes-body p + p {
  margin-top: 0.75rem;
}

.download__notes-body ul {
  margin-top: 0.75rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
}

.download__notes-body strong {
  color: hsl(var(--fg));
  font-weight: 500;
}

/* ---------- GitHub link ---------- */

.download__github {
  margin-top: 2.25rem;
  font-size: 0.9375rem;
}

.download__github a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: hsl(var(--accent-strong));
  text-decoration: none;
  font-weight: 500;
}

.download__github a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.download__github svg {
  width: 1rem;
  height: 1rem;
}