/* ============ Download page ============ */
.dl-hero {
  text-align: center; padding-block: var(--space-16);
  background:
    linear-gradient(180deg, rgba(14,4,6,0.4), rgba(14,4,6,0.92)),
    radial-gradient(900px 400px at 50% -20%, rgba(216,31,58,0.18), transparent 60%),
    var(--color-bg);
}
.dl-hero__icon {
  width: 112px; height: 112px; border-radius: var(--radius-xl);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-glow);
  margin: 0 auto var(--space-6); object-fit: cover;
}
.dl-hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-3); }
.dl-hero p { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 56ch; margin: 0 auto var(--space-8); }
.dl-hero .store-badges { justify-content: center; }

/* Screenshots carousel */
.shots {
  display: flex; gap: var(--space-4); overflow-x: auto; padding-block: var(--space-4);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
}
.shots::-webkit-scrollbar { height: 8px; }
.shots::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
.shots figure {
  flex: 0 0 auto; width: 220px; scroll-snap-align: center;
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border);
  background: var(--color-surface); box-shadow: var(--shadow-card);
}
.shots img { width: 100%; aspect-ratio: 9/19.5; object-fit: cover; }
.shots figcaption { font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; padding: var(--space-2); }

/* Install steps */
.steps { display: grid; gap: var(--space-6); grid-template-columns: 1fr; counter-reset: step; }
.step {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: var(--space-4); top: var(--space-6);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-full);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
}
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

.req-card { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); text-align: center; }
.req-card .req { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); }
.req-card .req .icon { font-size: var(--text-2xl); }
.req-card .req strong { display: block; font-family: var(--font-display); margin-top: var(--space-2); }
.req-card .req span { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}