/* Download page (the browser-extension landing). Layout only: the store badges and
   the browser glyphs are styled globally (styles.b.css / _extension.html) so they
   match the footer. Loaded via {% block head %} so no other page carries this CSS. */

.hero-dl { padding-top: 8px; }
.hero-dl .eyebrow { margin-bottom: 10px; }
.hero-dl h1 { margin: 0 0 12px; }
/* The sub keeps a readable measure; the section spans full width (below). */
.hero-dl .sub { margin-bottom: 22px; max-width: 46ch; }

/* Full-width hero. The base .hero is a two-column grid (copy + readout) on desktop;
   this page has no readout, so without this the copy is stranded at half width with
   a big empty column on the right. Collapse to one full-width column, exactly as the
   tool pages do (.hero-tool), so the hero lines up edge to edge with the bands. */
@media (min-width: 900px) {
  .hero-dl { grid-template-columns: minmax(0, 1fr); }
}

/* The hero badge row: the four primary install targets, all the SAME width so the
   row reads as a set. Content-sizing made Chrome wider than Edge; a grid gives equal
   columns and the badge fills its cell and centres its mark + label. Two up on a
   phone, four up on desktop, capped so the buttons stay a sensible size in the
   full-width hero rather than stretching to a quarter of it each. */
.dl-badges {
  display: grid; gap: 12px; max-width: 260px;
  grid-template-columns: 1fr;
}
.dl-badges .storebadge { width: 100%; justify-content: center; }
/* One up on the smallest phones (a badge needs ~135px and two will not fit 320),
   two up once there is room, four up on desktop. */
@media (min-width: 400px) {
  .dl-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 340px; }
  /* A visitor on a browser outside the four primaries gets a FIFTH badge (their
     own, leading), which leaves an orphan on a two-up phone grid. Give the leader
     the full row: it is the badge that matters most to them anyway, and the other
     four then pair off underneath. `:first-child:nth-last-child(odd)` is how CSS
     counts: for the first child, nth-last-child is the total. */
  .dl-badges .storebadge:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .dl-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 680px; }
  /* Five across rather than a second row holding one. */
  .dl-badges:has(.storebadge:first-child:nth-last-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 850px;
  }
  .dl-badges .storebadge:first-child:nth-last-child(odd) { grid-column: auto; }
}
.dl-soon, .dl-free { margin-top: 14px; color: var(--ink-3); }

/* The "what it does" grid is three-up on desktop (the base .band.full .grid is four
   columns, which would leave an empty cell for three cards). */
@media (min-width: 720px) {
  .band.full .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The compatibility list: eight browsers as chips (logo, name, store), laid out as
   two rows of four on desktop and two columns on a phone. minmax(0,1fr) so a long
   store name can never push a column past its share. */
.bchips {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .bchips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bchip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; text-decoration: none;
  padding: 16px 12px; background: var(--surface-1);
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.bchip:hover { text-decoration: none; border-color: var(--ink-3); background: var(--surface-2); }
.bchip-mark { display: inline-flex; margin-bottom: 4px; }
.bchip-mark .bmark { width: 38px; height: 38px; }
.bchip-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bchip-store { font-size: 12px; color: var(--ink-3); }

/* Scan-to-mobile band: the QR left, the copy right, stacked on mobile. */
.dl-qr { display: grid; gap: 22px; align-items: center; }
.dl-qr-code {
  justify-self: center; padding: 14px; background: #fff;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.qr-img { display: block; width: 164px; height: 164px; }
.dl-qr-copy .eyebrow { margin-bottom: 8px; }
.dl-qr-copy p { color: var(--ink-2); max-width: 46ch; }
@media (min-width: 720px) {
  .dl-qr { grid-template-columns: auto 1fr; gap: 32px; }
}

/* The pricing band is full width (its eyebrow and heading line up with the bands
   above), but its prose keeps a readable measure instead of stretching edge to edge. */
.dl-pricing > p, .dl-pricing > .fine { max-width: 68ch; }

@media (max-width: 720px) {
  .dl-badges { gap: 10px; }
  /* The scan-to-mobile band is pointless on a phone: you are already on it. Hide the
     whole QR section there (it links the desktop visitor to the mobile site). */
  .dl-qr { display: none; }
}