/* ============================================================
   download.css — Download page
   ============================================================ */
.dl-hero { display: grid; grid-template-columns: 1fr 42%; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }
.dl-hero--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.dl-hero--solo .dl-hero__body { max-width: 640px; }
.dl-hero--solo .dl-badges { justify-content: center; }
.dl-hero__body h1 { font-size: clamp(2rem, 6vw, var(--text-5xl)); margin-block: var(--space-3) var(--space-4); }
.dl-hero__body p.lead { color: var(--clr-text-muted); font-size: var(--text-lg); margin-bottom: var(--space-6); max-width: 52ch; }
.dl-badges { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.dl-badges img { height: 54px; width: auto; transition: transform var(--duration); }
.dl-badges a:hover img { transform: translateY(-2px); }
.dl-mockup { position: relative; display: flex; justify-content: center; align-items: center; padding-block: var(--space-8); min-height: 420px; }
.dl-apk { display: inline-flex; align-items: center; gap: 8px; color: var(--clr-accent-gold); font-family: var(--font-display); font-weight: 600; }
.dl-apk:hover { text-decoration: underline; }

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* stepper */
.stepper { max-width: 640px; margin-inline: auto; position: relative; }
.stepper::before { content: ''; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--clr-accent-gold), var(--clr-border)); }
.stepper .step { position: relative; padding-bottom: var(--space-6); }
.stepper .step__num { position: relative; z-index: 1; }

.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.req-card { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-6); }
.req-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-4); color: var(--clr-accent-gold); display: flex; align-items: center; gap: 8px; }
.req-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); }
.req-card dt { color: var(--clr-text-muted); font-size: var(--text-sm); }
.req-card dd { font-weight: 600; text-align: right; font-size: var(--text-sm); }

@media (max-width: 820px) {
  .dl-hero { grid-template-columns: 1fr; }
  .dl-mockup { max-width: 340px; margin-inline: auto; order: -1; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .req-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr; }
}