/* ==========================================================================
   App install - clean & concise
   ========================================================================== */

.app-hero .app-lead{
  text-align: center;
  margin: 0 auto;
  max-width: 65ch;
}

/* Container */
.app-container{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Installed msg */
.app-installed{
  text-align: center;
  font-weight: 900;
  color: var(--success);
  margin-bottom: 18px;
}

/* Card */
.app-card{
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

[data-theme="dark"] .app-card{
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 2px 10px rgba(255,255,255,0.05);
}

.app-platform{
  font-weight: 700;
  margin-bottom: 14px;
}

.app-block{
  margin-top: 12px;
}

.app-block-title{
  font-weight: 900;
  margin-bottom: 6px;
}

.app-block-text{
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 600;
}

.app-steps{
  padding-left: 18px;
  margin: 8px 0 0;
}

.app-steps li{
  margin-bottom: 6px;
}

/* Why */
.app-why{
  margin-top: 28px;
}

.app-why h2{
  margin-bottom: 10px;
}

.app-why ul{
  padding-left: 18px;
}

.app-why li{
  margin-bottom: 6px;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 640px){
  .app-card{
    padding: 18px;
  }
}