/* 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;
}

/* ---------------- the card ---------------- */
/* Everything under the lede sits in one rounded box: the two install panels in a
   row across the top, the product shot beneath them. The parts are told apart by
   hairlines rather than by gaps, which is why the panels below carry no radius,
   background or shadow of their own. overflow:hidden is what lets those
   hairlines run edge to edge without escaping the rounded corners. */
.dl-card {
  overflow: hidden;
  margin-top: 34px;
  background: var(--duet-surface);
  border: 1px solid var(--duet-stroke);
  border-radius: var(--duet-radius);
  box-shadow: var(--duet-shadow);
  text-align: left;
  transition: border-color .25s ease;
}

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

/* Two equal halves rather than the auto-fit this block used when the panels were
   separate cards: the point where they stack now has to be a known breakpoint,
   because it is also where the halves swap order and where the divider between
   them turns. */
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* The divider is a single hairline, drawn by whichever half sits second on the
   edge that faces the other — here the mobile panel's left edge. */
.dl-panel-mobile {
  border-left: 1px solid var(--duet-stroke);
}

.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: 26px 26px 24px;
}

.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;
}

.dl-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------- desktop download buttons ---------------- */
/* No border here. Only the secondary pill draws a ring, and it adds one back
   below with padding that gives the same outer size — so a filled button is a
   plain filled shape, with nothing around its edge to read as a frame.
   The ring is 1px rather than the 1.5px this used to carry, because a browser
   rounds a half-pixel border to whole device pixels and a whole one it does not:
   at 1x the old 1.5px ring rendered as 1px and left the outlined pill sitting 1px
   shorter than the filled ones beside it. */
.dl-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 19px;
  border: 0;
  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 nav's Sign Up button's confidence,
   with the weight a download deserves. The platform logos are white PNGs, which
   is also why these two sit on a filled pill rather than a light one.

   Deliberately NOT var(--duet-cta-grad): that ramp opens at #82baf2, and a pale
   top edge is what made these read as glassy rather than solid. This one is a
   narrow band around #5C98DE, the brand blue the nav's Sign Up button is painted
   in flat, so the two read as the same blue — it is lit, not tinted. Left local
   rather than pushed into the shared token, since the pricing CTA is not being
   restyled. */
.dl-btn.primary {
  background-image: linear-gradient(180deg, #66a0e4 0%, #5c98de 45%, #4e89d4 100%);
  color: var(--duet-blue-on);
  /* Solid, and strictly below: the first shadow is an unblurred ledge of darker
     blue, pulled in 2px by the negative spread. Without that spread the offset
     copy of a pill-shaped button peeks out around the lower curves too, and the
     ledge stops being a shadow and becomes an outline. */
  box-shadow: 0 4px 0 -2px #3d74bd,
              0 10px 18px -10px rgba(47, 111, 191, .55);
  transition: transform .12s ease, box-shadow .12s ease, filter .18s ease;
}

/* Hover and press work the ledge, not the colour: the button sinks onto its own
   shadow, which is the whole point of drawing a solid one. */
.dl-btn.primary:hover {
  color: var(--duet-blue-on);
  transform: translateY(2px);
  box-shadow: 0 3px 0 -2px #3d74bd,
              0 8px 14px -10px rgba(47, 111, 191, .5);
}

.dl-btn.primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 -2px #3d74bd;
}

/* Secondary: the two-layer gradient-border trick from the pricing CTA — a 1px
   gradient ring with the card colour painted inside it. The padding gives back
   exactly what the ring takes, so this pill and the filled ones above it are the
   same size to the pixel at any device ratio. */
.dl-btn.secondary {
  border: 1px solid transparent;
  padding: 13px 18px;
  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 ---------------- */
/* Centred in the panel rather than flush left: two badges of unequal width are
   the whole row, and they sit better as a pair than aligned to one edge. */
.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;
}

/* Capped in ch, not px: stacked, this row has the full card width to itself, and
   without a measure the caption would stretch into one thin line across it. */
.dl-qr-text {
  min-width: 0;
  max-width: 44ch;
  color: var(--duet-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------------- product shot ---------------- */
/* Closes the card: the panels say how to install, this shows what you get. It
   fills the row edge to edge like a cover photo — no padding, radius or shadow
   of its own, since the card's corners already clip it.

   The band's height comes from this ratio, never from the photo: left to its own
   proportions a full-width shot ran over 600px tall on a wide card and swamped
   the panels above it, and any replacement would resize the card again. The
   photo is cropped to fill instead, so swapping the src is a safe edit. */
.dl-visual {
  width: 100%;
  margin: 0;
  aspect-ratio: 2.6 / 1;
  border-top: 1px solid var(--duet-stroke);
}

.dl-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- stacked ---------------- */
/* One column, mobile half on top: on a narrow screen the visitor is likely
   holding the device the mobile panel is about, while the desktop links are
   something they can only act on later — kept, not dropped, because a narrow
   window on a desktop is the same layout. The divider turns with the stack: the
   half that now sits second draws it along its top edge instead. */
@media screen and (max-width: 760px) {
  .dl-grid {
    grid-template-columns: 1fr;
  }

  .dl-panel-mobile {
    order: -1;
    border-left: 0;
  }

  .dl-panel-desktop {
    border-top: 1px solid var(--duet-stroke);
  }
}

/* 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;
  }

  /* A 2.6:1 band is only ~190px tall once the card is phone-width, which is
     more letterbox than photo; a squarer crop gives it back some presence. */
  .dl-visual {
    aspect-ratio: 2 / 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* .dl-btn.primary is listed by its own two-class selector on purpose: it sets
     the transition shorthand at (0,2,0), so a bare .dl-btn rule here would lose
     to it and the press would keep animating. */
  .dl-btn,
  .dl-btn.primary,
  .dl-store,
  .dl-card {
    transition-duration: .001ms;
  }

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