/* ===========================================================================
   Melstream HR — Toolkit / Lead-magnet LANDING PAGES
   Loaded AFTER styles.css. Only the few components the product pages add on top
   of the main design system (which they otherwise fully reuse).
   2026-06-26
   =========================================================================== */

/* --- Simplified header for standalone pages (logo + single CTA) --- */
.site-header.lp .wrap{justify-content:space-between}
.lp-back{font-size:var(--fs-body-sm);color:var(--slate);display:inline-flex;align-items:center;gap:.4em}
.lp-back:hover{color:var(--teal)}

/* --- Hero price + meta --- */
.lp-hero-price{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;margin:var(--sp-4) 0 var(--sp-2)}
.lp-hero-price .amt{font-family:var(--font-head);font-size:2.4rem;color:var(--charcoal);line-height:1}
.lp-hero-price .cur{font-size:var(--fs-body-sm);color:var(--slate);letter-spacing:.04em}
.lp-hero-price .was{font-size:1.05rem;color:var(--slate);text-decoration:line-through;opacity:.7}
.on-dark .lp-hero-price .amt{color:#fff}

/* product cover card in hero visual */
.lp-cover{position:relative;width:100%;max-width:380px;margin-inline:auto;aspect-ratio:1/1.3;
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--gold-soft);box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,var(--cream) 0%,var(--teal-tint) 100%)}
.lp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.lp-cover .lp-cover-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--charcoal);color:#fff;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;border-radius:999px}

/* --- "What's inside" module grid (reuses card look; auto-fits 1..5) --- */
.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.module{background:var(--cream-2);border:1px solid var(--teal-line);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:.5em}
.module .m-num{font-family:var(--font-head);font-size:.95rem;color:var(--gold);letter-spacing:.06em}
.module h4{font-size:1.12rem}
.module p{font-size:var(--fs-body-sm);color:var(--slate);margin:0}
.module ul{list-style:none;margin:.3em 0 0;padding:0;display:flex;flex-direction:column;gap:.35em}
.module ul li{position:relative;padding-left:1.4em;font-size:.92rem;color:var(--slate)}
.module ul li::before{content:"";position:absolute;left:0;top:.5em;width:.55em;height:.3em;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}

/* --- Download success reveal (free guide) --- */
.deliver{margin-top:var(--sp-4)}
.deliver .btn{display:inline-flex;align-items:center;gap:.5em}
.deliver small{display:block;margin-top:.5em;color:var(--slate);font-size:var(--fs-body-sm)}

/* --- Pending-checkout note (Stripe to come) --- */
.lp-pending{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-body-sm);color:var(--slate);
  background:#FFF6E6;border:1px dashed var(--gold);border-radius:999px;padding:.35em .9em;margin-top:.6em}
.lp-pending::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

/* --- Guarantee / value strip rows --- */
.value-rows{display:grid;gap:var(--sp-3);margin-top:var(--sp-5)}
.value-rows .vr{display:flex;gap:.8em;align-items:flex-start}
.value-rows .vr svg{flex:0 0 auto;width:22px;height:22px;color:var(--teal);margin-top:.15em}
.on-dark .value-rows .vr svg{color:#7FD0D6}

/* --- Sticky buy bar (mobile, toolkit page) --- */
.buy-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:.7em var(--gutter);background:rgba(36,48,66,.97);backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.12)}
.buy-bar .bb-price{color:#fff;font-family:var(--font-head);font-size:1.15rem;white-space:nowrap}
.buy-bar .bb-price small{display:block;font-family:var(--font-body);font-size:.7rem;color:#cdd7e0;letter-spacing:.04em}
.buy-bar .btn{flex:1;max-width:60%}
@media (max-width:760px){ .buy-bar{display:flex} body.has-buybar{padding-bottom:74px} }

/* --- Buy modal (email capture before Stripe checkout) --- */
.buy-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.buy-modal[hidden]{display:none}
.buy-modal-backdrop{position:absolute;inset:0;background:rgba(45,55,72,.55);backdrop-filter:blur(2px)}
.buy-modal-box{position:relative;background:var(--cream);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  max-width:420px;width:100%;padding:var(--sp-5);z-index:1}
.buy-modal-close{position:absolute;top:var(--sp-3);right:var(--sp-3);background:none;border:none;
  font-size:1.4rem;line-height:1;color:var(--slate);cursor:pointer;padding:.2em .4em}
.buy-modal-box h3{margin:0 0 .3em;font-size:var(--fs-h3);font-family:var(--font-head)}
.buy-modal-box p{color:var(--slate);font-size:var(--fs-body-sm);margin:0 0 var(--sp-3)}
.buy-modal-form{display:flex;flex-direction:column;gap:var(--sp-2)}
.buy-modal-form input[type=email],.buy-modal-form input[type=text]{padding:.85em 1em;border:1px solid var(--teal-line);
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:var(--fs-body-sm);background:#fff;width:100%}
.buy-modal-form .hp{position:absolute;left:-9999px}
.buy-modal-form .btn{margin-top:.3em}
.buy-modal-msg{min-height:1.2em;font-size:var(--fs-body-sm);margin:.4em 0 0}

/* --- Cross-sell / next-step band (cream card) --- */
.next-step{background:var(--cream-2);border:1px solid var(--gold-soft);border-radius:var(--r-xl);
  padding:var(--sp-6);display:grid;grid-template-columns:1.2fr .8fr;gap:var(--sp-5);align-items:center;
  box-shadow:var(--shadow-md)}
.next-step h3{margin-bottom:.4em}
.next-step .ns-cta{display:flex;flex-direction:column;gap:.6em;align-items:flex-start}
@media (max-width:760px){ .next-step{grid-template-columns:1fr;text-align:left} }

/* free-guide hero: keep the existing pdf-mock look usable in hero column */
.hero .pdf-mock{max-width:340px;margin-inline:auto}