/* ============================================================
   lm.css — Mohd Saleem
   Lead magnet cards — light theme
   Used by: guides.html
============================================================ */

.lm-section{background:var(--white);padding:56px 0 80px;scroll-margin-top:80px}
.lm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.lm-card{
  background:var(--white);
  border:1px solid var(--card-border);
  border-radius:var(--r-sm);
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
  display:flex;flex-direction:column;
}
.lm-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.07);transform:translateY(-2px)}
.lm-card-top{padding:22px 22px 18px;border-bottom:1px solid var(--card-border);flex:1}
.lm-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .75rem;border-radius:20px;margin-bottom:12px;
}
.lm-pill.orange{background:rgba(255,119,89,.1);color:#b85c1e;border:1px solid rgba(255,119,89,.25)}
.lm-pill.green{background:rgba(0,60,51,.08);color:#003c33;border:1px solid rgba(0,60,51,.2)}
.lm-pill.blue{background:rgba(24,99,220,.08);color:#1863dc;border:1px solid rgba(24,99,220,.2)}
.lm-pill.purple{background:rgba(107,33,168,.07);color:#6b21a8;border:1px solid rgba(107,33,168,.18)}
.lm-pill.dim{background:var(--stone);color:var(--muted);border:1px solid var(--hairline)}
.lm-card-title{
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  color:var(--near-black);margin:0 0 .5rem;line-height:1.3;letter-spacing:-.01em;
}
.lm-card-desc{font-size:.82rem;color:var(--slate);line-height:1.65}
.lm-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:12px}
.lm-meta-tag{
  font-size:.68rem;color:var(--muted);
  background:var(--stone);border:1px solid var(--hairline);
  padding:.18rem .55rem;border-radius:3px;
}
.lm-card-bottom{padding:18px 22px}
.lm-includes{display:flex;flex-direction:column;gap:.35rem;margin-bottom:16px;list-style:none;padding:0}
.lm-includes li{
  font-size:.79rem;color:var(--slate);
  display:flex;gap:.5rem;line-height:1.5;
}
.lm-includes li::before{content:'\2713';color:var(--coral);flex-shrink:0;font-size:.7rem;margin-top:.15rem}
.lm-coming .lm-includes li::before{color:var(--muted)}

/* Form gate */
.lm-gate{
  background:var(--stone);border:1px solid var(--hairline);
  border-radius:var(--r-xs);padding:14px;
}
.lm-gate-title{
  display:flex;align-items:center;gap:6px;
  font-size:.76rem;font-weight:500;color:var(--ink);margin-bottom:10px;
}
.lm-form-row{display:flex;gap:.4rem;flex-wrap:wrap}
.lm-input{
  flex:1;min-width:110px;
  background:var(--white);border:1px solid var(--hairline);
  border-radius:var(--r-xs);padding:.5rem .7rem;
  font-size:.8rem;color:var(--ink);
  font-family:var(--font-body);outline:none;
  transition:border-color .18s;
}
.lm-input::placeholder{color:var(--muted)}
.lm-input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,119,89,.1)}
.lm-btn{
  background:var(--coral);color:#fff;
  border:none;border-radius:var(--r-xs);
  padding:.5rem 1rem;font-size:.78rem;font-weight:600;
  font-family:var(--font-body);cursor:pointer;
  white-space:nowrap;transition:opacity .18s;
}
.lm-btn:hover{opacity:.85}
.lm-btn:disabled{opacity:.4;cursor:not-allowed}

/* Download state */
.lm-dl{
  display:none;
  background:rgba(0,60,51,.06);
  border:1px solid rgba(0,60,51,.18);
  border-radius:var(--r-xs);
  padding:12px 14px;
  align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
}
.lm-dl.show{display:flex}
.lm-dl-msg{font-size:.8rem;color:var(--slate)}
.lm-dl-msg strong{display:block;font-size:.82rem;color:var(--near-black);margin-bottom:.15rem}
.lm-dl-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#003c33;color:#fff;
  border:none;border-radius:var(--r-xs);
  padding:.45rem 1rem;font-size:.78rem;font-weight:600;
  font-family:var(--font-body);cursor:pointer;
  text-decoration:none;transition:opacity .18s;white-space:nowrap;
}
.lm-dl-btn:hover{opacity:.85}

/* Coming soon */
.lm-coming{opacity:.4;pointer-events:none}
.lm-coming-overlay{
  font-size:.75rem;color:var(--muted);text-align:center;
  padding:14px;border:1px dashed var(--hairline);
  border-radius:var(--r-xs);letter-spacing:.06em;text-transform:uppercase;
}

/* How it works strip */
.lm-how{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--hairline);margin-top:3rem;
}
.lm-how-step{background:var(--stone);padding:28px 24px}
.lm-how-n{
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:rgba(23,23,28,.18);letter-spacing:-.02em;margin-bottom:8px;
}
.lm-how-title{font-size:.86rem;font-weight:600;color:var(--near-black);margin-bottom:.35rem}
.lm-how-text{font-size:.79rem;color:var(--slate);line-height:1.65}

/* Toast */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--near-black);
  border:1px solid rgba(255,119,89,.35);
  border-radius:var(--r-xs);
  padding:10px 16px;font-size:.8rem;
  font-family:var(--font-body);
  z-index:999;
  transform:translateY(80px);opacity:0;
  transition:.3s;pointer-events:none;
}
.toast.show{transform:translateY(0);opacity:1}
.toast.success{color:#3ecf8e}
.toast.error{color:#ff7759}

/* Responsive */
@media(max-width:960px){.lm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .lm-grid{grid-template-columns:1fr}
  .lm-how{grid-template-columns:1fr}
  .lm-form-row{flex-direction:column}
  .lm-btn{width:100%}
}