/* Page-specific tweaks for /download.
   Most styling comes from home.css to match the site UI. */

.download-hero {
  /* keep the same hero look but allow shorter height */
  min-height: auto;
  background: #fff;
}

.download-hero .content {
  max-width: 55%;
}

.download-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.download-actions .btn {
  animation: none;
}

/* Button variants while keeping homepage base button styles:
   - In hero, base styles come from `.hero .btn` in home.css
   - In cards, we apply button styling explicitly (home.css does not define a global .btn) */

.download-hero .btn.btn-outline {
  background: transparent;
  border: 2px solid #6A0DAD;
  color: #6A0DAD;
}

.download-hero .btn.btn-outline:hover {
  background: rgba(106, 13, 173, 0.08);
  color: #6A0DAD;
}

.download-hero .btn.btn-whatsapp {
  background: #25D366;
}

.download-hero .btn.btn-whatsapp:hover {
  background: #1fb85a;
}

.download-note {
  margin-top: 14px;
  color: #555;
  max-width: 820px;
}

.download-benefits .btn,
.download-card-actions .btn {
  display: inline-block;
  margin-top: 10px;
}

/* Card buttons: match homepage pill buttons */
.download-benefits .btn {
  background: #6A0DAD;
  color: #fff;
  padding: 12px 28px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.3s ease, background 0.3s ease;
}

.download-benefits .btn:hover {
  background: #5A0C9D;
  transform: scale(1.06);
}

.download-benefits .btn.btn-outline {
  background: transparent;
  border: 2px solid #6A0DAD;
  color: #6A0DAD;
}

.download-benefits .btn.btn-outline:hover {
  background: rgba(106, 13, 173, 0.08);
}

.download-benefits .btn.btn-whatsapp {
  background: #25D366;
  border: 2px solid #25D366;
  color: #fff;
}

.download-benefits .btn.btn-whatsapp:hover {
  background: #1fb85a;
  border-color: #1fb85a;
}

.download-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .download-hero .content {
    max-width: 100%;
  }
}