/* Lead-gen one-page theme. IDENTICAL in app.irecommend.pro and sites.irecommend.pro.
   Everything is scoped under .lg so the builder's dashboard CSS (Bootstrap etc.) can't leak in
   and this can't leak out. Ported from the one-page-site-builder demo (thenatemeyer.com). */

.lg{--ink:#14181f;--ink-2:#4a5260;--line:#e3e6eb;--paper:#ffffff;--paper-2:#f5f6f8;--accent:#e8590c;--accent-ink:#ffffff;--dark:#0f141b;--max:1120px;
  background:var(--paper);color:var(--ink);font:17px/1.6 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
.lg *,.lg *::before,.lg *::after{box-sizing:border-box}
.lg a{color:inherit}
.lg h1,.lg h2,.lg h3{font-family:inherit;color:inherit;text-transform:none}
.lg p,.lg ul,.lg ol{font-size:inherit}
.lg p,.lg li,.lg span,.lg label,.lg summary,.lg input,.lg select,.lg textarea,.lg button{font-family:inherit;letter-spacing:inherit}
.lg span{color:inherit}
.lg-wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* Site header */
.lg-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.lg-top .lg-wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.lg-brand{font-weight:600;letter-spacing:-.01em;text-decoration:none;display:flex;align-items:center;gap:10px}
.lg-brand i{width:12px;height:12px;border-radius:2px;background:var(--accent);display:inline-block}

/* Buttons */
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;line-height:1.2}
.lg .lg-btn-primary{background:var(--accent);color:var(--accent-ink)}
.lg .lg-btn-primary:hover{filter:brightness(.94);color:var(--accent-ink)}
.lg .lg-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.lg .lg-btn-ghost:hover{color:#fff}
.lg-top .lg-btn{min-height:40px;padding:0 16px;font-size:15px}

/* Hero */
.lg-hero{position:relative;color:#fff;background:var(--dark);padding:0;overflow:hidden}
.lg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.lg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,20,27,.95) 0%,rgba(15,20,27,.75) 50%,rgba(15,20,27,.2) 100%);pointer-events:none}
.lg-hero .lg-wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:96px}
.lg-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#ffb38a}
.lg-hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 18px;max-width:14ch;font-weight:600;color:#fff}
.lg-hero .lg-sub{font-size:clamp(18px,2vw,21px);max-width:38ch;color:#d5dae2;margin:0 0 30px}
.lg-ctas{display:flex;flex-wrap:wrap;gap:12px}
.lg-trust{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:#c3cad4}
.lg-trust li::before{content:"✓ ";color:#ffb38a}

/* Sections */
.lg section{padding:80px 0}
.lg section.lg-hero{padding:0}
.lg .lg-alt{background:var(--paper-2)}
.lg h2{font-size:clamp(27px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;margin:0 0 14px;font-weight:600}
.lg-lede{color:var(--ink-2);max-width:62ch;margin:0 0 40px}
.lg-intro p{max-width:68ch;color:var(--ink-2);margin:0 0 1em}
.lg-intro p:last-child{margin-bottom:0}
.lg-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.lg-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px}
.lg-card h3{margin:0 0 8px;font-size:19px;font-weight:600}
.lg-card p{margin:0;color:var(--ink-2);font-size:16px}
.lg-steps{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));counter-reset:s}
.lg-steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:18px}
.lg-steps li::before{content:"0" counter(s);font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:14px;display:block;margin-bottom:8px}
.lg-steps h3{margin:0 0 6px;font-size:19px;font-weight:600}
.lg-steps p{margin:0;color:var(--ink-2);font-size:16px}
.lg-split{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.lg-why{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.lg-why h3{margin:0 0 4px;font-size:18px;font-weight:600}
.lg-why p{margin:0;color:var(--ink-2);font-size:16px}
.lg-firstaid{background:var(--dark);color:#e6e9ee;border-radius:12px;padding:30px}
.lg-firstaid h3{margin:0 0 14px;font-size:20px;color:#fff;font-weight:600}
.lg-firstaid ul{margin:0;padding-left:20px;display:grid;gap:10px}
.lg-areas{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.lg-areas li{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:15px}
.lg-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.lg-faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.lg-faq summary::-webkit-details-marker{display:none}
.lg-faq summary::after{content:"+";color:var(--accent);font-size:24px;line-height:1}
.lg-faq details[open] summary::after{content:"–"}
.lg-faq details p{margin:12px 0 0;color:var(--ink-2);max-width:70ch}

/* CTA + form */
.lg .lg-cta{background:var(--dark);color:#fff}
.lg-cta h2{color:#fff}
.lg-cta .lg-lede{color:#c3cad4}
.lg-lead{display:grid;gap:14px;background:#fff;color:var(--ink);border-radius:12px;padding:26px;margin:0}
.lg-lead label{display:grid;gap:6px;font-size:15px;font-weight:500;margin:0;color:var(--ink)}
.lg-lead input,.lg-lead select,.lg-lead textarea{font:inherit;font-size:16px;padding:12px;border:1px solid #cdd2d9;border-radius:6px;width:100%;background:#fff;color:var(--ink);height:auto}
.lg-thanks{margin:0;font-weight:600;color:var(--ink)}
.lg-phone-big{font-size:clamp(28px,4vw,40px);font-weight:600;text-decoration:none;color:#fff;display:inline-block;margin:6px 0 22px}
.lg-phone-big:hover{color:#fff}

/* Footer + mobile call bar */
.lg-footer{padding:30px 0 90px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line)}
.lg-callbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;padding:10px 16px;background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.lg-callbar .lg-btn{width:100%}

@media (max-width:720px){
  .lg-top .lg-btn{display:none}
  .lg-callbar{display:block}
  .lg-hero .lg-wrap{padding-top:64px;padding-bottom:64px}
  .lg-hero::after{background:linear-gradient(180deg,rgba(15,20,27,.7),rgba(15,20,27,.92))}
  .lg section{padding:60px 0}
}

/* Builder only (.lg-edit): plain-text inline editing, hidden sections */
.lg-edit [data-lg-field]{outline:1px dashed transparent;outline-offset:3px;border-radius:2px;cursor:text;min-width:1ch}
.lg-edit [data-lg-field]:hover{outline-color:rgba(232,89,12,.55)}
.lg-edit [data-lg-field]:focus{outline:2px solid var(--accent)}
.lg-edit [data-lg-field]:empty::before{content:"Empty, click to add text";color:#9aa1ab;font-style:italic}
.lg-edit [data-lg-field].lg-saving{outline-color:#adb5bd}
.lg-edit .lg-top{position:relative}
.lg-edit .lg-off{opacity:.4;position:relative}
.lg-edit .lg-off::before{content:"Hidden on the live site";position:absolute;top:12px;right:12px;z-index:2;font:600 12px/1 system-ui,sans-serif;background:#212529;color:#fff;padding:6px 10px;border-radius:4px}