/* Mac and Windows downloads. platform.js sets <html data-os="mac|windows|other">.
   Without it (no JavaScript), the page uses the "other" layout: both buttons, Mac first. */

/* Two-line button labels: the action, then the requirements. */
.download-label {
  display: grid;
  gap: 2px;
  text-align: left;
  line-height: 1.25;
}
.download-label small {
  font-size: 10.5px;
  font-weight: 450;
  opacity: 0.72;
  white-space: nowrap;
}
.button-download > svg:first-child {
  flex-shrink: 0;
}

/* Header: one download link, matching the visitor's computer. */
html:not([data-os="mac"]) .site-header .header-download--mac,
html:not([data-os="windows"]) .site-header .header-download--windows,
html[data-os="mac"] .site-header .header-download--other,
html[data-os="windows"] .site-header .header-download--other {
  display: none;
}

/* Hero and closing: the other platform's button steps back to a small link. */
html[data-os="mac"] .download-windows,
html[data-os="windows"] .download-mac {
  display: none;
}
html[data-os="windows"] .hero-actions .download-windows {
  order: -1;
}
.download-alt {
  display: none;
  width: fit-content;
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html[data-os="mac"] .download-alt--mac,
html[data-os="windows"] .download-alt--windows {
  display: inline-block;
  padding-block: 6px;
}

/* The unsigned-installer note only matters where the Windows button shows. */
html[data-os="mac"] .windows-first-run {
  display: none;
}
.download-extras {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 12px;
}
.windows-first-run {
  max-width: 400px;
  font-size: 12px;
}
.windows-first-run summary {
  width: fit-content;
  padding-block: 6px;
  cursor: pointer;
  font-weight: 500;
}
.windows-first-run p {
  margin-top: 4px;
  line-height: 1.65;
}

/* Both downloads side by side: drop the trailing arrows so they fit one row, and let
   the GitHub button (or, in a narrow column, the Windows button) wrap below. */
html:not([data-os="mac"]):not([data-os="windows"]) .hero-actions {
  flex-wrap: wrap;
}
html:not([data-os="mac"]):not([data-os="windows"]) .hero .button-download > svg:last-child {
  display: none;
}

/* Hero colors (light text over the video). */
.hero .download-alt,
.hero .windows-first-run {
  color: #fffaf3;
  text-shadow: 0 1px 8px #141a1680;
}
.hero .windows-first-run p {
  color: #fff4e5;
}
.hero .download-alt:hover,
.hero .windows-first-run summary:hover {
  color: #ffe0a6;
}

/* Closing section (dark text on paper). */
.closing-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.closing-section .closing-downloads .button {
  margin-top: 0;
}
.closing-section .download-extras {
  justify-items: center;
}
.closing-section .download-alt,
.closing-section .windows-first-run {
  color: #5d4d36;
}
.closing-section .windows-first-run p {
  color: #75654f;
}

@media (max-width: 760px) {
  .hero .download-extras {
    justify-items: center;
  }
  .download-label small {
    font-size: 10px;
  }
  /* Two-line download labels don't fit beside the GitHub button; stack them full width. */
  .hero .hero-actions {
    flex-wrap: wrap;
  }
  .hero .button-download,
  .closing-downloads .button-download {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Shortcut keys in the illustrations: ⌃⌥ on a Mac (and by default), Ctrl Alt on Windows. */
.os-keys {
  display: contents;
}
.os-keys--windows,
html[data-os="windows"] .os-keys--mac {
  display: none;
}
html[data-os="windows"] .os-keys--windows {
  display: contents;
}
.ln-key-hint .os-keys--windows kbd {
  padding-inline: 3px;
}
.ln-shortcut .os-keys--windows kbd {
  font-size: 13px;
}

/* Under the hero buttons: the trial terms in one line of small print. */
.hero .hero-meta { margin: 14px 0 0; font-size: 12px; }
@media (max-width: 760px) {
  .hero .hero-meta { text-align: center; }
}