/* Download page: the shared frame comes from style.css; this file only lays out the device grid. */
.download-hero h1 { max-width: 16ch; }
.download-hero p { max-width: 64ch; margin-top: 14px; font-size: 1.15rem; }
.download-hero .download-button { margin-top: 26px; }
.download-secondary { display: inline-block; margin: 26px 0 0 18px; padding: 12px 0; font-weight: 700; }

.download-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px;
  border-radius: var(--radius); background: transparent; color: var(--paper); border: 2px solid var(--line-strong);
  font-weight: 700; text-align: center; line-height: 1.3; text-decoration: none;
}
.download-button:hover { border-color: var(--paper); color: var(--paper); }
/* One red action: the hero button and the card for the detected device */
.download-hero .download-button, .platform-card.detected .download-button { background: var(--signal); border-color: var(--signal); color: #fff; }
.download-hero .download-button:hover, .platform-card.detected .download-button:hover { background: var(--signal-press); color: #fff; }

.download-section { padding-top: clamp(48px, 7vw, 80px); padding-bottom: 8px; }
.download-section h2 { position: relative; padding-top: 22px; margin-bottom: 16px; }
.download-section h2::before { content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 4px; background: var(--paper-3); }
.download-section > p { margin-bottom: 28px; max-width: 64ch; }

.platform-grid, .qr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.platform-card, .qr-grid figure, .download-faq details {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 20px; min-width: 0;
}
.platform-card { scroll-margin: 96px; }
.platform-card.detected { border-color: var(--paper-3); }
.platform-card h3 { margin-bottom: 18px; }
.platform-card .download-button { width: 100%; }
.download-file { margin-bottom: 14px; }
.file-meta { font-size: 0.85rem; overflow-wrap: anywhere; margin-top: 10px; color: var(--paper-3); }
.platform-card details { margin-top: 14px; }
.platform-card summary, .download-faq summary { cursor: pointer; color: var(--paper); font-weight: 700; min-height: 44px; padding: 10px 0; }
.platform-card ol { padding-left: 22px; color: var(--paper-2); }
.platform-card li { margin-bottom: 8px; }
.platform-card code { overflow-wrap: anywhere; color: var(--paper); background: var(--ink-3); padding: 1px 6px; border-radius: 4px; }
.qr-grid img { margin: 0 auto 16px; background: #fff; padding: 10px; border-radius: var(--radius); }
.qr-grid figcaption { text-align: center; }
.download-faq { max-width: 860px; display: grid; gap: 10px; }
.download-faq details { margin-top: 0; }
.download-faq p { margin-top: 6px; }
.open-source { padding-top: 40px; padding-bottom: 72px; font-size: 0.95rem; }

@media (max-width: 1024px) {
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .platform-grid, .qr-grid { grid-template-columns: 1fr; }
  .download-hero .download-button { width: 100%; }
  .download-secondary { margin-left: 0; }
}