/* Download block. Static markup lives in _includes/downloads.html — no JS.
   Palette comes from css/duet-tokens.css via the .duet-ui class on the section,
   shared with the pricing cards so the two read as one system on a page that
   carries both. */

#downloads {
  display: block;
  position: relative;
  padding: 64px 20px 72px;
  background-color: var(--duet-bg);
  /* Glows from the bottom, not the top: this block closes the page, and a top
     glow here would restart the gradient directly under the pricing block's
     faded-out one, drawing a visible band across the join. */
  background-image: var(--duet-bg-glow-bottom);
  background-repeat: no-repeat;
  color: var(--duet-text);
  font-family: "Nunito Sans", sans-serif;
  text-align: center;
}

/* Continuation: the block above already opened the surface, so close the gap it
   would otherwise leave. Written with the leading .duet-ui so it out-ranks the
   plain #downloads rule above (1-1-0 beats 1-0-0) — see css/duet-tokens.css. */
.duet-ui ~ #downloads {
  padding-top: 40px;
}

#downloads,
#downloads *,
#downloads *::before,
#downloads *::after {
  box-sizing: border-box;
}

.dl-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.dl-title {
  margin: 0;
  color: var(--duet-text);
  font-family: var(--duet-heading);
  /* clamp rather than breakpoints: the headline is the one element that has to
     stay readable at every width between a phone and a wide desktop. */
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.01em;
}

.dl-lede {
  max-width: 620px;
  margin: 12px auto 0;
  color: var(--duet-muted);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
}

/* Two panels, side by side on desktop, stacked below. auto-fit + minmax rather
   than a breakpoint so the switch happens when the panels actually stop fitting,
   which is what keeps this working inside the narrower content columns some
   subpages use. */
.dl-grid {
  display: grid;
  gap: 20px;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 34px;
  text-align: left;
}

.dl-panel {
  /* grid items default to min-width:auto, so one long unbroken label would push
     the track wider than the viewport on a phone */
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: var(--duet-surface);
  border: 1px solid var(--duet-stroke);
  border-radius: var(--duet-radius);
  box-shadow: var(--duet-shadow);
  transition: border-color .25s ease;
}

.dl-panel:hover {
  border-color: var(--duet-stroke-strong);
}

.dl-panel-title {
  margin: 0 0 4px;
  color: var(--duet-text);
  font-family: var(--duet-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .085em;
  text-transform: uppercase;
}

.dl-panel-note {
  margin: 0 0 16px;
  color: var(--duet-faint);
  font-size: 12.5px;
  line-height: 1.45;
}

/* margin-top:auto on the list pins both panels' content to a shared baseline
   when they sit side by side at unequal natural heights. */
.dl-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------- desktop download buttons ---------------- */
.dl-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s ease, border-color .18s ease;
}

/* Primary: solid Duet blue, white type — the same treatment the popular pricing
   card's CTA gets, so "download" and "buy" read as the same class of action.
   The platform logos are white PNGs, which is also why these two sit on a filled
   pill rather than a light one. */
.dl-btn.primary {
  background-image: var(--duet-cta-grad);
  background-clip: border-box;
  color: var(--duet-blue-on);
  text-shadow: 0 1px 1px rgba(20, 50, 100, .25);
  box-shadow: 0 10px 26px -12px rgba(92, 152, 222, .6),
              inset 0 1px 0 rgba(255, 255, 255, .34),
              0 0 6px 0 rgba(var(--duet-neon-rgb), .14);
}

.dl-btn.primary:hover {
  color: var(--duet-blue-on);
  filter: saturate(1.08) brightness(1.05);
}

/* Secondary: the two-layer gradient-border trick from the pricing CTA — a 1.5px
   gradient ring with the card colour painted inside it. */
.dl-btn.secondary {
  background-image:
    linear-gradient(var(--duet-surface), var(--duet-surface)),
    var(--duet-blue-line);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--duet-blue-ink);
}

.dl-btn.secondary:hover {
  color: var(--duet-blue-ink);
  filter: brightness(1.04);
}

.dl-btn-logo {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* min-width:0 so a long label wraps inside the pill instead of stretching it. */
.dl-btn-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.dl-btn-label {
  font-size: 15px;
  font-weight: 700;
}

.dl-btn-meta {
  font-size: 11.5px;
  font-weight: 600;
  opacity: .78;
}

/* ---------------- mobile panel ---------------- */
.dl-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.dl-store {
  display: inline-flex;
  border-radius: 9px;
  /* the badges are supplied artwork and must not be recoloured, so the only
     affordance available is the lift */
  transition: transform .18s ease, box-shadow .18s ease;
}

.dl-store:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(24, 20, 10, .5);
}

.dl-store img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 100%;
}

/* Pushed to the bottom of the panel so it lines up with the desktop panel's last
   button when the two sit side by side. */
.dl-qr {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--duet-stroke);
}

.dl-qr img {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: #fff;
}

.dl-qr-text {
  min-width: 0;
  color: var(--duet-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------------- product shot ---------------- */
/* Closes the section: the panels say how to install, this shows what you get.
   Capped at the asset's native 800px so it is never upscaled. */
.dl-visual {
  width: 100%;
  max-width: 760px;
  margin: 34px auto 0;
}

.dl-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--duet-shadow);
}

/* The QR is useless on the device it would be scanned with, and it is the first
   thing worth dropping when width is scarce. */
@media screen and (max-width: 560px) {
  #downloads {
    padding: 48px 16px 52px;
  }

  .dl-panel {
    padding: 20px 18px 18px;
  }

  .dl-qr {
    display: none;
  }

  .dl-stores {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-btn,
  .dl-store,
  .dl-panel {
    transition-duration: .001ms;
  }

  .dl-store:hover {
    transform: none;
  }
}