/* ── Shared lead form (klf-*) ── */
.klf-card{position:relative;background:#fff;border:1px solid var(--rule);border-radius:20px;box-shadow:0 2px 4px rgba(10,14,26,.04),0 26px 54px -26px rgba(10,14,26,.28);padding:26px 20px 22px;scroll-margin-top:90px;text-align:left}
.klf-badge{position:absolute;top:-12px;left:18px;background:var(--red);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:100px;white-space:nowrap}
.klf-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;letter-spacing:-0.02em;color:var(--ink);margin-top:2px}
.klf-d{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--muted);margin:5px 0 18px}
.klf-steplbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.klf-steplbl b{color:var(--red)}
.klf-steprow{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.klf-back{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:4px 0}
.klf-back:hover{color:var(--red)}
.klf-q{font-family:'Manrope',sans-serif;font-weight:700;font-size:16.5px;letter-spacing:-0.015em;color:var(--ink);margin-bottom:14px}
.klf-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.klf-chip{height:56px;border:1.5px solid var(--rule);border-radius:14px;background:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .1s}
.klf-chip:hover{border-color:var(--red);color:var(--red)}
.klf-chip:active{transform:scale(.97);background:rgba(208,30,44,.05)}
.klf-skip{display:block;margin:14px auto 0;background:none;border:none;font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px}
.klf-skip:hover{color:var(--ink)}
.klf-field{margin-bottom:13px}
.klf-label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.klf-label em{color:var(--red);font-style:normal}
.klf-label span{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:.02em}
.klf-input{width:100%;height:52px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;padding:0 14px;font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);outline:none;transition:border-color .15s;-webkit-appearance:none;appearance:none}
.klf-input:focus{border-color:var(--red)}
.klf-input.err{border-color:var(--red);background:rgba(208,30,44,.03)}
.klf-area{height:auto;min-height:64px;padding:12px 14px;resize:vertical}
.klf-hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.klf-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;background:var(--red);color:#fff;border:none;border-radius:14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;letter-spacing:-0.01em;cursor:pointer;margin-top:4px;transition:background .2s,transform .15s}
.klf-submit:hover{background:var(--ink);transform:translateY(-1px)}
.klf-submit:disabled{opacity:.65;cursor:default;transform:none}
.klf-fine{font-family:'Inter',sans-serif;font-size:11.5px;line-height:1.55;color:var(--muted);text-align:center;margin-top:12px}
.klf-fine a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.klf-err{margin-top:12px;padding:10px 12px;background:rgba(208,30,44,.06);border-left:3px solid var(--red);font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink);line-height:1.5;border-radius:0 8px 8px 0}
.klf-success{text-align:center;padding:26px 4px 18px}
.klf-success-ic{width:54px;height:54px;border-radius:50%;background:rgba(10,138,78,.1);color:var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.klf-success-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;letter-spacing:-0.02em;color:var(--ink)}
.klf-success-d{font-family:'Inter',sans-serif;font-size:14px;line-height:1.6;color:var(--ink-soft);margin:8px auto 14px;max-width:300px}
.klf-success-m{font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;color:var(--red);text-decoration:none}

/* ── Demo band wrapper ── */
.klf-band{background:radial-gradient(120% 130% at 85% 0%,#13233c,var(--navy)),var(--navy);padding:52px 20px;scroll-margin-top:70px}
.klf-band-in{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
.klf-band-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FF7884}
.klf-band-eyebrow::before{content:"";width:22px;height:1.5px;background:#FF7884;flex-shrink:0}
.klf-band-h{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(26px,7vw,38px);line-height:1.06;letter-spacing:-0.035em;color:#fff;margin-top:14px}
.klf-band-h em{font-style:normal;color:#FF7884}
.klf-band-bullets{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.klf-band-bullets li{display:flex;gap:11px;align-items:flex-start;font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.klf-band-bullets li svg{flex-shrink:0;margin-top:2px;color:#FF7884}
.klf-band .klf-card{border:none}
@media(min-width:900px){
  .klf-band{padding:76px 40px}
  .klf-band-in{display:grid;grid-template-columns:1fr .92fr;gap:64px;align-items:center}
}

/* ── Sticky mobile CTA bar ── */
.klf-bar{position:fixed;left:0;right:0;bottom:0;z-index:590;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-top:1px solid var(--rule);transform:translateY(0);transition:transform .3s}
.klf-bar[hidden]{display:block;transform:translateY(110%)}
.klf-bar-cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;background:var(--red);color:#fff;border-radius:14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15.5px;text-decoration:none}
@media(min-width:900px){.klf-bar,.klf-bar[hidden]{display:none}}

/* ── Mobile CRO (ad landing pages) ─────────────────────────────────
   On the module pages the 2-step form lives in the hero's right column
   (id="demo"). On desktop that's beside the headline; on mobile the grid
   stacks, which would push the form below the headline + copy + stats —
   off the first screen. Pull the form ABOVE the copy on small screens so
   the ask is the first thing an ad visitor sees, and make the card fit
   narrow viewports so nothing overflows horizontally. */
@media(max-width:960px){
  .phero-in > #demo{order:-1;margin-bottom:24px}
  .phero-in > #demo .klf-card{scroll-margin-top:80px}
  /* Let the single-column 1fr hero track shrink to the viewport. Grid items
     default to min-width:auto, so the form's content was forcing the track
     wider than the screen and clipping the right-hand chips. */
  .phero-in, .phero-in > *{min-width:0}
  .klf-chips{min-width:0}
  .klf-chip{min-width:0}
}
@media(max-width:640px){
  .klf-card{padding:24px 15px 20px;border-radius:16px;max-width:100%}
  .klf-badge{max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis}
  .klf-chip{height:52px;font-size:15px}
  .klf-t{font-size:20px}
  .phero-stats{flex-wrap:wrap;row-gap:20px;column-gap:32px}
}