/* ============================================================
   home-v3.css — LeadMachine front page + integration pages
   Ported from leadmachine-homepage-v3.html. Every selector is
   scoped under .lmv3 so nothing leaks into Divi pages or posts.
   Tokens come from web3-tokens.css (loaded first).
   ============================================================ */

.lmv3{
  --lmv3-max:1160px;
  /* Nebula hero backdrop, shared across every web3 page. The image sits at the
     top behind all content; the overlay gradient reduces its intensity and fades
     it to solid black before the first content section, so it never competes
     with the copy. Pure black everywhere below. */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.52) 48%, var(--w3-bg-deep) 84%) top center / 100% 920px no-repeat,
    url(/wp-content/uploads/2025/12/LM-spcae-secondary.jpg) top center / 100% 920px no-repeat,
    var(--w3-bg-deep);
  color:var(--w3-text-primary);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.lmv3 *{box-sizing:border-box;margin:0;padding:0}
.lmv3 .wrap{max-width:var(--lmv3-max);margin:0 auto;padding:0 24px}
.lmv3 section{padding:100px 0}
.lmv3 a{color:inherit}
.lmv3 img{max-width:100%;display:block;height:auto}

.lmv3 h1{font-size:clamp(2.3rem,5.6vw,3.8rem);line-height:1.06;font-weight:var(--w3-display-weight);letter-spacing:var(--w3-display-tracking);color:var(--w3-text-primary)}
.lmv3 h2{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.16;font-weight:700;letter-spacing:-.03em;color:var(--w3-text-primary)}
.lmv3 h3{font-size:1.14rem;font-weight:700;letter-spacing:-.015em;color:var(--w3-text-primary)}
.lmv3 .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--w3-accent-cyan);margin-bottom:18px}
.lmv3 .lede{font-size:1.14rem;color:var(--w3-text-secondary);max-width:64ch}
.lmv3 .dek{color:var(--w3-text-secondary);font-size:.98rem}
.lmv3 .small{font-size:.86rem;color:var(--w3-text-muted)}

/* app chrome carried onto the site */
.lmv3 .glass{background:var(--w3-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--w3-glass-border);border-radius:var(--w3-radius-lg)}
.lmv3 .btn{display:inline-flex;align-items:center;gap:8px;padding:.75rem 1.5rem;border-radius:var(--w3-radius-md);font-weight:600;font-size:.95rem;text-decoration:none;transition:var(--w3-transition);border:1px solid transparent;font-family:inherit;cursor:pointer}
.lmv3 .btn-primary{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(167,139,250,.2));border-color:rgba(34,211,238,.3);color:var(--w3-accent-cyan)}
.lmv3 .btn-primary:hover{background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(167,139,250,.3));border-color:var(--w3-accent-cyan);box-shadow:var(--w3-glow-cyan)}
.lmv3 .btn-ghost{background:var(--w3-glass);border-color:var(--w3-glass-border);color:var(--w3-text-secondary)}
.lmv3 .btn-ghost:hover{background:var(--w3-glass-highlight);color:var(--w3-text-primary)}
.lmv3 .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.lmv3 .badge{padding:.25rem .625rem;font-size:.75rem;font-weight:600;border-radius:var(--w3-radius-sm);background:var(--w3-glass);border:1px solid var(--w3-glass-border);color:var(--w3-text-secondary);display:inline-flex;align-items:center;gap:6px}
.lmv3 .badge.cy{background:var(--w3-accent-cyan-soft);border-color:rgba(34,211,238,.3);color:var(--w3-accent-cyan)}
.lmv3 .badge.pu{background:var(--w3-accent-purple-soft);border-color:rgba(167,139,250,.3);color:var(--w3-accent-purple)}
.lmv3 .badge.gr{background:var(--w3-accent-emerald-soft);border-color:rgba(52,211,153,.3);color:var(--w3-accent-emerald)}
.lmv3 .badge.or{background:rgba(255,159,10,.15);border-color:rgba(255,159,10,.3);color:var(--w3-status-orange)}
.lmv3 .note{font-size:.82rem;color:var(--w3-text-muted);margin-top:18px}

/* hero */
.lmv3 .hero{padding:80px 0 70px;position:relative;overflow:hidden}
.lmv3 .hero::before{content:"";position:absolute;top:-320px;left:50%;transform:translateX(-50%);width:1100px;height:700px;background:radial-gradient(ellipse,rgba(34,211,238,.09),rgba(167,139,250,.05) 40%,transparent 70%);pointer-events:none}
.lmv3 .hero .wrap{position:relative;z-index:2;text-align:center}
.lmv3 .hero .lede{margin:24px auto 0}
.lmv3 .hero .btnrow{justify-content:center}
.lmv3 .hl{background:linear-gradient(135deg,var(--w3-accent-cyan),var(--w3-accent-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* framed app shot */
.lmv3 .frame{border:1px solid var(--w3-glass-border);border-radius:var(--w3-radius-lg);overflow:hidden;background:var(--w3-bg-surface);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),var(--w3-glow-cyan)}
.lmv3 .frame-bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--w3-glass-border)}
.lmv3 .frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);display:block}
.lmv3 .frame-bar .url{margin-left:10px;flex:1;font-size:.72rem;color:var(--w3-text-muted);background:rgba(0,0,0,.5);border:1px solid var(--w3-glass-border);border-radius:6px;padding:4px 12px}
.lmv3 .frame img{width:100%}
.lmv3 .frame.plain{box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.lmv3 .hero-shot{margin-top:52px;position:relative;z-index:2}
.lmv3 .hero-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(transparent,var(--w3-bg-deep));pointer-events:none}

.lmv3 .caption{margin-top:16px;color:var(--w3-text-secondary);font-size:.95rem;line-height:1.6}
.lmv3 .caption b{display:block;color:var(--w3-text-primary);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;margin-bottom:4px}

/* generic grids */
.lmv3 .g2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lmv3 .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:900px){.lmv3 .g2,.lmv3 .g3{grid-template-columns:1fr;gap:32px}}

/* contrast */
.lmv3 .pane{padding:32px}
.lmv3 .pane.calm{border-color:rgba(34,211,238,.28);box-shadow:var(--w3-glow-cyan)}
.lmv3 .noise{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.lmv3 .tile{background:var(--w3-glass);border:1px solid var(--w3-glass-border);border-radius:var(--w3-radius-sm);height:48px;padding:7px}
.lmv3 .tile span{display:block;font-size:.5rem;color:var(--w3-text-muted);letter-spacing:.03em}
.lmv3 .tile i{display:block;height:3px;border-radius:2px;background:var(--w3-text-muted);opacity:.45;margin-top:5px}
.lmv3 .calmbox{border:1px solid rgba(34,211,238,.3);border-radius:var(--w3-radius-md);background:rgba(34,211,238,.06);padding:22px;margin-top:16px;min-height:187px;display:flex;flex-direction:column;justify-content:center;gap:9px}
.lmv3 .calmbox .k{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--w3-accent-cyan);font-weight:700}
.lmv3 .calmbox .v{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}

/* phones */
.lmv3 .phones{display:flex;gap:22px;justify-content:center}
.lmv3 .phone{border:9px solid #1c1c1e;border-radius:38px;overflow:hidden;box-shadow:0 30px 70px -25px rgba(0,0,0,.95),0 0 0 1px var(--w3-glass-border);max-width:250px}

/* scoring */
.lmv3 .score{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.lmv3 .score{grid-template-columns:1fr 1fr}}
.lmv3 .dim{padding:28px}
.lmv3 .dim .pct{font-size:1.55rem;font-weight:var(--w3-display-weight);letter-spacing:var(--w3-display-tracking);background:linear-gradient(135deg,var(--w3-accent-cyan),var(--w3-accent-purple));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lmv3 .dim .nm{font-size:.92rem;font-weight:700;margin:6px 0 4px}
.lmv3 .dim .ds{font-size:.8rem;color:var(--w3-text-muted);line-height:1.5}
.lmv3 .dim .bar{height:4px;background:rgba(255,255,255,.07);border-radius:3px;margin-top:14px;overflow:hidden}
.lmv3 .dim .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--w3-accent-cyan),var(--w3-accent-purple));border-radius:3px}

/* integrations marketplace */
.lmv3 .mkt-group{margin-top:48px}
.lmv3 .mkt-ghead{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--w3-glass-border);margin-bottom:18px}
.lmv3 .mkt-ghead .n{font-size:.72rem;font-weight:700;color:var(--w3-text-muted);letter-spacing:.12em}
.lmv3 .mkt-ghead .g{margin-left:auto;color:var(--w3-text-muted);font-size:.85rem}
.lmv3 .mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.lmv3 .mkt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lmv3 .mkt-grid{grid-template-columns:1fr}}
.lmv3 .mkt-card{display:flex;align-items:flex-start;gap:14px;background:var(--w3-bg-card);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--w3-glass-border);border-radius:var(--w3-radius-lg);padding:24px;text-decoration:none;transition:var(--w3-transition);position:relative}
.lmv3 .mkt-card:hover{background:var(--w3-bg-card-hover);border-color:rgba(34,211,238,.3);transform:translateY(-2px);box-shadow:var(--w3-glow-cyan)}
.lmv3 .mkt-logo{display:block;width:44px;height:44px;border-radius:var(--w3-radius-avatar);overflow:hidden;flex:none;border:1px solid var(--w3-glass-border)}
.lmv3 .mkt-logo svg{width:100%;height:100%;display:block}
.lmv3 .mkt-body{min-width:0}
.lmv3 .mkt-name{display:block;font-weight:700;font-size:.98rem;letter-spacing:-.01em;color:var(--w3-text-primary)}
.lmv3 .mkt-name small{font-size:.7rem;font-weight:600;color:var(--w3-accent-cyan);background:var(--w3-accent-cyan-soft);border:1px solid rgba(34,211,238,.3);border-radius:var(--w3-radius-sm);padding:1px 7px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.lmv3 .mkt-desc{display:block;font-size:.84rem;color:var(--w3-text-muted);line-height:1.5;margin-top:3px}
.lmv3 .mkt-more{margin-left:auto;color:var(--w3-text-muted);font-size:1rem;transition:var(--w3-transition);align-self:center}
.lmv3 .mkt-card:hover .mkt-more{color:var(--w3-accent-cyan);transform:translateX(3px)}

/* bundle pricing tiers */
.lmv3 .tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
@media(max-width:1000px){.lmv3 .tier-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lmv3 .tier-grid{grid-template-columns:1fr}}
.lmv3 .tier{padding:30px 26px;display:flex;flex-direction:column;gap:8px}
.lmv3 .tier.pop{border-color:rgba(34,211,238,.3);box-shadow:var(--w3-glow-cyan)}
.lmv3 .tier .nm{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--w3-text-muted)}
.lmv3 .tier .pr{font-size:1.9rem;font-weight:var(--w3-display-weight);letter-spacing:var(--w3-display-tracking)}
.lmv3 .tier .pr small{font-size:.85rem;font-weight:500;color:var(--w3-text-muted);letter-spacing:0}
.lmv3 .tier .ds{font-size:.85rem;color:var(--w3-text-secondary);line-height:1.55}
.lmv3 .tier .seats{margin-top:auto;padding-top:14px;font-size:.82rem;color:var(--w3-accent-cyan);font-weight:600}

/* admachine loop */
.lmv3 .loop .step{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lmv3 .loop .step:last-child{border-bottom:none}
.lmv3 .loop .idx{width:30px;height:30px;border-radius:9px;background:var(--w3-accent-cyan-soft);border:1px solid rgba(34,211,238,.3);color:var(--w3-accent-cyan);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;flex:none}
.lmv3 .loop .t{font-weight:600;font-size:.98rem}
.lmv3 .loop .d{color:var(--w3-text-muted);font-size:.88rem;margin-top:2px}

/* pricing */
.lmv3 .ptw{overflow-x:auto;margin-top:38px}
.lmv3 .ptable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px}
.lmv3 .ptable th,.lmv3 .ptable td{padding:16px 16px;text-align:left;border-bottom:1px solid var(--w3-glass-border)}
.lmv3 .ptable th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--w3-text-muted);font-weight:700}
.lmv3 .ptable td:first-child{color:var(--w3-text-muted)}
.lmv3 .ptable .us{background:var(--w3-accent-cyan-soft);color:var(--w3-text-primary);font-weight:600}
.lmv3 .ptable th.us{color:var(--w3-accent-cyan)}

/* faq */
.lmv3 details{border-bottom:1px solid var(--w3-glass-border);padding:20px 0}
.lmv3 summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;gap:16px}
.lmv3 summary::-webkit-details-marker{display:none}
.lmv3 summary::after{content:"+";margin-left:auto;color:var(--w3-accent-cyan);font-weight:400;font-size:1.35rem;line-height:1}
.lmv3 details[open] summary::after{content:"\2212"}
.lmv3 details p{color:var(--w3-text-secondary);font-size:.96rem;margin-top:12px;max-width:74ch}

/* final cta */
.lmv3 .final{text-align:center}
.lmv3 .final .lede{margin:20px auto 0}
.lmv3 .final .btnrow{justify-content:center}

/* ============================================================
   Mobile-first hardening. The grids above collapse at 900px;
   these tighten rhythm, tap targets, and overflow on phones.
   ============================================================ */
@media(max-width:768px){
  .lmv3{font-size:16px}
  .lmv3 section{padding:64px 0}
  .lmv3 .hero{padding:48px 0 44px}
  .lmv3 .hero-shot{margin-top:36px}
  .lmv3 .wrap{padding:0 18px}
  .lmv3 .frame-bar{padding:9px 12px}
  .lmv3 .pane{padding:18px}
  .lmv3 .mkt-group{margin-top:28px}
  .lmv3 .int-hero{padding:48px 0 24px}
}
@media(max-width:640px){
  .lmv3 .phones{flex-wrap:wrap;gap:18px}
  .lmv3 .phone{max-width:230px}
  .lmv3 .noise{grid-template-columns:repeat(3,1fr)}
  .lmv3 .score{grid-template-columns:1fr}
  .lmv3 .caption{font-size:.9rem}
}
@media(max-width:480px){
  .lmv3 .btnrow{flex-direction:column;align-items:stretch}
  .lmv3 .btnrow .btn{justify-content:center}
  .lmv3 .hero .btnrow{margin-top:24px}
  .lmv3 .mkt-card{padding:15px}
  .lmv3 .calmbox{min-height:0}
}
/* wide content always scrolls inside its own container, never the page */
.lmv3 .ptw{-webkit-overflow-scrolling:touch}
.lmv3 .frame{max-width:100%}

/* scroll-in — hidden state only applies once JS has loaded (html.lmv3-js),
   so content is never invisible without JavaScript */
.lmv3-js .lmv3 .rise{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.lmv3-js .lmv3 .rise.in,.lmv3 .rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.lmv3 .rise{opacity:1;transform:none;transition:none}}
.lmv3 :focus-visible{outline:2px solid var(--w3-accent-cyan);outline-offset:3px;border-radius:6px}

/* blog archive */
.lmv3 .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.lmv3 .blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.lmv3 .blog-grid{grid-template-columns:1fr}}
.lmv3 .blog-card{display:flex;flex-direction:column;overflow:hidden;transition:var(--w3-transition)}
.lmv3 .blog-card:hover{background:var(--w3-bg-card-hover);border-color:rgba(34,211,238,.3);transform:translateY(-3px);box-shadow:var(--w3-glow-cyan)}
.lmv3 .blog-card--featured{grid-column:1 / -1;flex-direction:row;align-items:stretch}
@media(max-width:900px){.lmv3 .blog-card--featured{flex-direction:column}}
.lmv3 .blog-thumb{display:block;background:var(--w3-bg-surface);aspect-ratio:16/9;overflow:hidden;flex:none}
.lmv3 .blog-card--featured .blog-thumb{flex:1 1 55%;aspect-ratio:auto;min-height:280px}
@media(max-width:900px){.lmv3 .blog-card--featured .blog-thumb{aspect-ratio:16/9;min-height:0}}
.lmv3 .blog-thumb img{width:100%;height:100%;object-fit:cover;transition:var(--w3-transition)}
.lmv3 .blog-card:hover .blog-thumb img{transform:scale(1.04)}
.lmv3 .blog-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.lmv3 .blog-card--featured .blog-body{flex:1 1 45%;justify-content:center;padding:32px}
.lmv3 .blog-meta{display:flex;align-items:center;gap:12px}
.lmv3 .blog-title{font-size:1.08rem;line-height:1.35;letter-spacing:-.015em;margin:0}
.lmv3 .blog-card--featured .blog-title{font-size:1.5rem}
.lmv3 .blog-title a{text-decoration:none;color:var(--w3-text-primary);transition:var(--w3-transition)}
.lmv3 .blog-title a:hover{color:var(--w3-accent-cyan)}
.lmv3 .blog-excerpt{color:var(--w3-text-secondary);font-size:.9rem;line-height:1.6;margin:0}
.lmv3 .blog-more{margin-top:auto;font-size:.85rem;font-weight:600;color:var(--w3-accent-cyan)}
.lmv3 .blog-pagination{margin-top:44px;display:flex;justify-content:center}
.lmv3 .blog-pagination .page-numbers{display:inline-flex;align-items:center;padding:.55rem 1rem;margin:0 4px;border-radius:var(--w3-radius-md);background:var(--w3-glass);border:1px solid var(--w3-glass-border);color:var(--w3-text-secondary);text-decoration:none;font-size:.9rem;font-weight:600;transition:var(--w3-transition)}
.lmv3 .blog-pagination .page-numbers:hover{color:var(--w3-text-primary);background:var(--w3-glass-highlight)}
.lmv3 .blog-pagination .page-numbers.current{background:var(--w3-accent-cyan-soft);border-color:rgba(34,211,238,.3);color:var(--w3-accent-cyan)}
.lmv3 .blog-pagination .page-numbers.dots{background:none;border:none}

/* integration detail pages */
.lmv3 .int-hero{padding:70px 0 40px;text-align:left}
.lmv3 .int-hero .mkt-logo{width:64px;height:64px;margin-bottom:22px}
.lmv3 .int-content{padding:10px 0 90px}
.lmv3 .int-content .wrap{max-width:820px}
.lmv3 .int-content h2{font-size:1.45rem;margin:44px 0 14px}
.lmv3 .int-content p{color:var(--w3-text-secondary);margin:14px 0}
.lmv3 .int-content ul{margin:14px 0 14px 1.2em;color:var(--w3-text-secondary);list-style:disc}
.lmv3 .int-content li{margin:8px 0}
.lmv3 .int-content a{color:var(--w3-accent-cyan);text-decoration:none}
.lmv3 .int-content a:hover{text-decoration:underline}
.lmv3 .int-back{font-size:.85rem;color:var(--w3-text-muted);text-decoration:none;display:inline-block;margin-bottom:26px}
.lmv3 .int-back:hover{color:var(--w3-accent-cyan)}

/* ============================================================
   Dark treatment for the Divi header/footer, front page +
   integration pages only (body.lmv3-dark). Scoped so the rest
   of the site is untouched.
   ============================================================ */
body.lmv3-dark #main-content,
body.lmv3-dark #page-container{background:#000}