/* Landing pages (single-lp.php). Builds on product.css (pp-*, pd-*); only the
   pieces product pages don't have live here. Namespaced lp-. */
.lp .pp-hero h1{max-width:17ch;font-size:clamp(2.3rem,4.6vw,3.8rem)}

/* where leads come from */
.lp-sources{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:6px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:28px;background:var(--surface)}
.lp-sources li{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;font-size:14.5px;font-weight:600;position:relative}
.lp-sources li+li::before{content:"";position:absolute;left:-6px;top:50%;width:6px;height:6px;border-top:2px solid var(--line);border-right:2px solid var(--line);transform:translate(-2px,-50%) rotate(45deg)}
.lp-sources .pp-tile{width:28px;height:28px;border-radius:50%}
.lp-sources-end{background:color-mix(in srgb,var(--c) 10%,#fff)}

/* steps */
.lp-num{font-family:var(--fd);font-weight:800;font-size:15px;color:var(--c);display:inline-flex;align-items:center;gap:10px}
.lp-num::after{content:"";width:40px;height:2px;background:var(--c)}
.lp-kw{font-weight:600;color:color-mix(in srgb,var(--c) 70%,var(--ink));font-size:16px;margin:-6px 0 0}
.lp-nodemo .pp-feat-in{grid-template-columns:1fr}

/* example funnel */
.lp-funnel-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
.lp-funnel-in .sec-head{margin:0;text-align:left;justify-items:start}
.lp-funnel{margin:0;display:grid;gap:12px;padding:clamp(18px,3vw,28px);border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.lp-f{display:grid;grid-template-columns:120px minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:14px;font-weight:600}
.lp-f i{display:block;height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.lp-f b{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c)}
.lp-f strong{font-family:var(--fd);font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.lp-funnel figcaption{font-size:12.5px;color:var(--muted);margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .lp-f b{transform-origin:left;animation:lpGrow 1s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes lpGrow{from{transform:scaleX(0)}}

/* versus table */
.lp-vs{border:1px solid var(--line);border-radius:24px;background:var(--surface);overflow:hidden;max-width:1040px;margin:0 auto}
.lp-vrow{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));align-items:center}
.lp-vrow+.lp-vrow{border-top:1px solid var(--line)}
.lp-vrow>span{padding:16px 18px;font-size:14.5px;display:flex;gap:8px;align-items:flex-start;color:var(--ink-2)}
.lp-vrow>span svg{flex:none;margin-top:3px;color:var(--muted)}
.lp-vrow>span[role=rowheader]{font-weight:700;color:var(--ink)}
.lp-vhead>span{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink);background:var(--bg-alt)}
.lp-vhead>span:last-child,.lp-win{background:color-mix(in srgb,var(--c-mon) 7%,#fff)}
.lp-win{color:var(--ink)!important;font-weight:600}
.lp-win svg{color:var(--c-mon)!important}

/* feature list */
.lp-feats{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:1040px}
.lp-feats li{display:flex;gap:10px;align-items:center;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600;font-size:14.5px}
.lp-feats svg{flex:none;color:var(--c-mon)}

@media (max-width:1000px){
  .lp-funnel-in{grid-template-columns:1fr}
  .lp-feats{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .lp-sources{justify-content:flex-start;border-radius:20px}
  .lp-sources li+li::before{display:none}
  .lp-vhead{display:none}
  .lp-vrow{grid-template-columns:1fr;padding:8px 0}
  .lp-vrow>span{padding:6px 16px}
  .lp-vrow>span[role=cell]::before{content:attr(data-l) ": ";font-weight:600;color:var(--muted);white-space:nowrap}
  .lp-vrow>span[role=cell]{display:block}
  .lp-vrow>span[role=cell] svg{display:inline-block;vertical-align:-2px;margin:0 6px 0 0}
  .lp-feats{grid-template-columns:1fr}
  .lp-f{grid-template-columns:96px minmax(0,1fr) 40px;font-size:13px}
}