/* LEADR search landing pages (/leadr-vst-crack/, /leadr-vst-free-download/).
   Loaded after blog.css: same dungeon palette and type, plus a wide hero,
   two offers and a feature row. */
.lp{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px); overflow-x:clip; }

/* hero: text left, plugin right */
.lp-hero{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); align-items:center;
  gap:clamp(28px,4.5vw,56px); padding:clamp(40px,7vw,84px) 0 clamp(40px,6vw,64px);
}
.lp-hero h1{ font-size:clamp(34px,5vw,56px); margin-bottom:18px; }
.lp-hero .lede{ max-width:44ch; }
.lp-actions{ display:flex; flex-wrap:wrap; gap:14px; margin:28px 0 0; }
/* a little narrower than the post buttons so the two choices sit side by side at desktop widths */
.lp-actions .btn, .lp-actions .btn-alt{ padding-left:18px; padding-right:18px; }
.btn-alt{
  display:inline-block; background:var(--paper-2); color:var(--gold); font-weight:700; letter-spacing:0.02em;
  padding:11px 22px; border:2px solid #000; box-shadow:3px 3px 0 #000;
}
.btn-alt:hover{ text-decoration:none; background:#30251a; }
.btn:active, .btn-alt:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #000; }
.lp-note{ margin:16px 0 0; font-family:var(--mono); font-size:13px; color:var(--muted); }
.lp-shot{ margin:0; }
/* hard pixel shadow, same language as the buttons, so the screenshot sits on the page like a window */
.lp-shot img{ display:block; width:100%; height:auto; border:2px solid #000; box-shadow:6px 6px 0 #000; }

/* section heads outside the reading column */
.lp-head{ margin:0 0 20px; font-size:clamp(22px,2.8vw,30px); font-weight:800; color:var(--ink); letter-spacing:-0.01em; }
.lp-sub{ margin:-8px 0 22px; max-width:60ch; }

/* two ways in: the main offer carries the red frame, the other stays quiet */
.lp-offers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.offer{ display:flex; flex-direction:column; padding:26px 26px 26px; background:var(--paper); border:1px solid var(--line); }
.offer.main{ background:var(--paper-2); border:2px solid var(--red); box-shadow:5px 5px 0 #000; }
.offer .tag{ margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.offer h3{ margin:0 0 6px; font-family:"Cinzel", serif; font-weight:700; font-size:clamp(22px,2.5vw,27px); line-height:1.15; color:var(--ink); }
.offer .price{ margin:0 0 16px; font-family:var(--mono); font-size:13px; color:var(--muted); }
.offer ul{ margin:0 0 24px; padding:0; list-style:none; }
.offer li{ position:relative; padding:3px 0 3px 22px; }
.offer li::before{ content:""; position:absolute; left:2px; top:13px; width:7px; height:7px; background:var(--green); }
.offer .btn, .offer .btn-alt{ margin-top:auto; align-self:flex-start; }
.lp-once{ margin:20px 0 0; font-size:15px; color:var(--muted); }
.lp-later{ margin-top:clamp(56px,8vw,96px); }

/* feature row: text left, picture right, the picture flies in on scroll */
.lp-feature{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  gap:clamp(28px,5vw,60px); padding:clamp(56px,8vw,96px) 0 0;
}
.lp-feature ul{ margin:0; padding:0; list-style:none; }
.lp-feature li{ position:relative; padding:4px 0 4px 22px; margin:0 0 4px; }
.lp-feature li::before{ content:""; position:absolute; left:2px; top:14px; width:7px; height:7px; background:var(--green); }
.lp-feature b{ color:var(--ink); }

/* reading column, left edge lined up with the hero text */
.lp-read{ max-width:720px; margin-top:clamp(40px,6vw,64px); }
.lp-read h3{ margin:28px 0 6px; font-size:18px; font-weight:800; color:var(--ink); }
.lp-read h3 + p{ margin-bottom:0; }
.lp-steps{ margin:0 0 8px; padding:0; list-style:none; counter-reset:step; }
article .lp-steps li{ counter-increment:step; padding:2px 0 0 60px; margin:0 0 24px; min-height:42px; }
article .lp-steps li::before{
  content:counter(step); top:0; left:0; width:42px; height:42px; display:grid; place-items:center;
  font-family:"Cinzel", serif; font-weight:700; font-size:20px; color:#fff;
  background:var(--red); border:2px solid #000; box-shadow:2px 2px 0 #000;
}
.lp-specs{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 24px; margin:0 0 18px; }
.lp-specs dt{ font-weight:800; color:var(--ink); }
.lp-specs dd{ margin:0; }
.lp .cta-row .alt{ display:block; margin-top:16px; font-size:15px; }

/* fly-in: only when JS runs, so the picture is never stuck invisible */
html.js .fly{ opacity:0; transform:translateX(56px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
html.js .fly.in{ opacity:1; transform:none; }

@media (max-width:860px){
  .lp-hero, .lp-feature, .lp-offers{ grid-template-columns:minmax(0,1fr); }
  .lp-hero{ padding-top:34px; }
  .lp-actions .btn, .lp-actions .btn-alt, .offer .btn, .offer .btn-alt{ flex:1 1 100%; align-self:stretch; text-align:center; }
  .lp-specs{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .lp-specs dd{ margin-bottom:12px; }
  /* on phones the picture rises instead, nothing pushes past the screen edge */
  html.js .fly{ transform:translateY(28px); }
}
@media (prefers-reduced-motion: reduce){
  html.js .fly{ opacity:1; transform:none; transition:none; }
}