/* ==========================================================================
   download.css — Download / APK page (2jnew.pk)
   ========================================================================== */

.dl-hero {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 80% 55% at 50% -5%, rgba(212, 175, 55, 0.14), transparent 70%),
    linear-gradient(180deg, var(--color-surface), var(--color-bg));
  overflow: hidden;
}
.dl-hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 5vw, var(--space-16));
  align-items: center;
}
@media (min-width: 980px) { .dl-hero__grid { grid-template-columns: 1fr 0.86fr; } }

.dl-hero__copy { text-align: center; }
@media (min-width: 980px) { .dl-hero__copy { text-align: left; } }
@media (min-width: 980px) { .dl-hero__copy .ornament, .dl-hero__copy .btn-row { justify-content: flex-start; } }
.dl-hero__copy .flourish { margin-inline: auto; }
@media (min-width: 980px) { .dl-hero__copy .flourish { margin-inline: 0; } }

/* Spec chips under the CTA */
.spec-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-8);
  text-align: left;
}
@media (min-width: 560px) { .spec-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec-chip {
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.spec-chip span {
  display: block;
  margin-bottom: 2px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}
.spec-chip b { font-size: var(--text-sm); color: var(--color-charcoal); }

/* Install steps — 4 across */
.install-steps { counter-reset: istep; }

/* Platform cards */
.platforms { display: grid; gap: var(--space-6); }
@media (min-width: 800px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.platform {
  display: flex;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.platform:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.platform__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px; height: 54px;
  border-radius: var(--radius-md);
  background: var(--color-charcoal);
  color: var(--color-accent-bright);
}
.platform__ico svg { width: 26px; height: 26px; }
.platform h3 { margin-bottom: var(--space-2); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 800; }
.platform p { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-charcoal-muted); }

/* Troubleshoot rows */
.trouble { display: grid; gap: var(--space-4); }
.trouble__row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}
@media (min-width: 800px) { .trouble__row { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; } }
.trouble__q { margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 800; color: var(--color-charcoal); }
.trouble__a { margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); line-height: var(--line-height-loose); }
html[dir="rtl"] .trouble__row { border-left: 1px solid var(--color-border); border-right: 3px solid var(--color-accent); }

/* Version history */
.versions { display: grid; gap: var(--space-4); }
.version {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-md);
}
.version__tag {
  padding: 0.22rem 0.65rem;
  background: var(--color-accent-foil);
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-charcoal);
}
.version__date { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-charcoal-muted); }
.version__notes { flex: 1 1 100%; margin: 0; font-size: var(--text-sm); color: var(--color-charcoal-muted); }