/* /download/ — the QR card beside the hero, the install steps, the requirements. */
/* The hero's media column is sized for a photograph: a fixed height with the gold
   rule along its bottom edge. Here it holds a card, so it takes the card's height
   and the rule moves onto the card, where it reads as part of it. */
.download-page .page-hero-media{height:auto;border-bottom:0;overflow:visible}
.download-qr{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:28px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-bottom:7px solid var(--gold);padding:32px}
.download-qr svg{display:block;width:100%;height:auto}
.download-qr p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.download-qr strong{display:block;color:var(--ink);font-size:20px;letter-spacing:-.03em;margin-bottom:8px}
/* The hero styles every paragraph in its copy column at 19px; this one is a label. */
.page-hero-copy>.download-meta{margin:22px 0 0;max-width:none;font:700 10px/1.6 var(--font-geist-mono),monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.download-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.download-steps li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#ffffff42;padding:28px}
.download-steps span{font:700 9px/1 var(--font-geist-mono),monospace;letter-spacing:.08em;
  color:var(--green)}
.download-steps h3{font-size:22px;letter-spacing:-.04em;line-height:1.1;margin:22px 0 10px}
.download-steps p{color:var(--muted);font-size:13px;line-height:1.55;margin:0}
.download-needs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.download-needs li{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:24px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.download-needs strong{font-size:14px}
.download-needs span{color:var(--muted);font-size:13px;line-height:1.55}
@media(max-width:1000px){.download-steps{grid-template-columns:repeat(2,1fr)}}
/* Already on a phone: the code has nothing to do. */
@media(max-width:900px){.download-page .page-hero-media{display:none}}
@media(max-width:640px){
  .download-steps{grid-template-columns:1fr}
  .download-needs li{grid-template-columns:1fr;gap:6px}
}