/* download.html (owner, 2026-10-22: a major improvement, with the visitor's device found by itself): one card per device
   to choose from, the visitor's own marked and opened first, then that device's download and steps. Same paper,
   type and motion as the rest of the site. */
.dl-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.dl-pick button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.dl-pick button:hover { transform: translateY(-2px); }
.dl-pick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl-pick button svg { width: 26px; height: 26px; color: var(--muted); transition: color .25s var(--ease); }
.dl-pick button b { font: 650 15.5px/1.2 var(--ui); }
.dl-pick button small { font-size: 13px; color: var(--muted); }
/* The chosen device is solid (owner, 2026-10-22: a faint tint isn't a choice), in ink, so Download stays the one orange thing to press. */
.dl-pick button.on { background: var(--ink); color: var(--surface); box-shadow: 0 10px 24px -14px rgba(23,23,26,.5); }
.dl-pick button.on svg { color: var(--surface); }
.dl-pick button.on small { color: rgba(255,255,255,.72); }
.dl-pick .here { font: 600 12.5px/1.2 var(--ui); color: var(--accent); margin-top: -4px; }
.dl-pick button.on .here { color: #FFB08A; }

.dl-pane { margin-top: 30px; }
.dl-pane[hidden] { display: none; }
.dl-pane.in { animation: dl-in .45s var(--ease) both; }
@keyframes dl-in { from { opacity: 0; transform: translateY(10px); } }
.dl-pane > h2 { font: 760 clamp(22px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.dl-pane > .sub { color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 60ch; margin: 0 0 22px; }

.dl-soon { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dl-soon h3 { margin: 0; font: 700 18px/1.25 var(--ui); }
.dl-soon p { margin: 0; color: var(--text-2); line-height: 1.55; max-width: 58ch; }
.dl-soon .acts { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .dl-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-pane.in { animation: none; }
  .dl-pick button, .dl-pick button svg { transition: none; }
}

/* The page is one column here, and the three cards sit along the foot. */
.dl-stage .q { max-width: 980px; }
.dl-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.dl-more .side-card .btn { margin-top: 14px; }
.dl-more .side-card a:not(.btn) { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .dl-more { grid-template-columns: 1fr; } }
.dl-soon .acts { margin-top: 4px; }