/* Landingspagina's onder /muffin/ (2026-09-25), zoals /muffin/batch-render-fl-studio/.
   Bouwt voort op muffin.css: zelfde tokens, nav, knoppen, feature-kaarten,
   flow-stappen, faq en footer. Hier alleen de kop en de screenshot. */

.lp-head{padding:160px 0 30px;text-align:center}
.lp-head h1{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(38px,6vw,72px);
  line-height:1;letter-spacing:-.035em;
  margin:0 auto 22px;max-width:900px;
}
.lp-lead{color:var(--muted);font-size:18px;line-height:1.7;max-width:680px;margin:0 auto 30px}
.lp-lead b{color:var(--white);font-weight:600}
.lp-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.lp-ctas .btn{text-decoration:none}
.lp-head .price-pill{margin-top:22px}

.lp-shot{margin:56px auto 0;max-width:1080px}
.lp-shot img{
  display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);box-shadow:var(--pop-hi);
}
.lp-shot figcaption{color:var(--muted);font-size:13px;margin-top:12px;text-align:center}

.lp-note{color:var(--muted);font-size:14px;margin-top:28px;max-width:640px}
.lp-note b{color:var(--white);font-weight:600}
.lp-note a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.4)}
.lp-note a:hover{border-bottom-color:var(--cyan)}

.lp .feature p{margin-bottom:0}
.lp .faq-col{margin-top:40px;max-width:820px}
.lp .final .btn{text-decoration:none}
.lp-foot{padding:40px 0}

@media (max-width:760px){
  .lp-head{padding-top:130px}
  .lp-lead{font-size:16.5px}
}