/* Generic marketing pages (pricing, about, blog, canada, customers, legal,
   free tools) — template site/page.html, body.lp. Same vocabulary as the
   feature / trade / compare pages: flat light ground, white rounded panels,
   sentence-case labels, ink text, Linq orange on the hero and closing CTAs,
   cobalt only for links and small accents. Loads after linq-site.css. */
body.lp{--lp-line:rgba(24,24,27,.12);--lp-tint:#F4F6FE;--lp-bg:#F3F5FB;--lp-gut:24px;--lp-gap:20px;
  --lp-shadow:0 1px 2px rgba(24,24,27,.04),0 18px 40px -26px rgba(24,24,27,.18);
  --cta:var(--linq-orange,#EA6A2C);--cta-dk:var(--linq-orange-dk,#C9551F);background:var(--lp-bg)}
body.lp::before,body.lp::after{display:none}
.lp .lq-navspacer{background:var(--lp-bg)}
.lp main{background:var(--lp-bg);padding-top:2px}
.lp .lq-navwrap.is-scrolled .phnav,.lp .lq-navwrap.is-menu-open .phnav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}

/* type: sentence case, no mono labels */
.lp .eb,.lp h1.eb{font:700 1rem/1.3 var(--body);letter-spacing:-.005em;text-transform:none;color:var(--signal);display:block;max-width:none}
.lp .eb::after{content:none}
.lp .dsp{font-family:var(--dsp);font-weight:800;letter-spacing:-.04em;line-height:1.04}
.lp .micro{font:500 .9rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.lp .lede a,.lp .bd a{color:var(--ink);text-decoration-color:rgba(46,75,224,.5)}
.lp .btn{border-radius:12px}
.lp .btn.primary{background:var(--ink);color:#fff;box-shadow:none}
.lp .btn.primary:hover{background:var(--ink-2)}
/* orange is for the page's call to action (a link: Start free, Join the
   list, See pricing); Send, Show my number and other form buttons stay ink.
   Was keyed on href*="register", so a Start free that pointed at /pricing
   while sign-up is paused rendered black on half the site. */
.lp a.btn.primary{background:var(--cta)}
.lp a.btn.primary:hover{background:var(--cta-dk)}
.lp .btn.ghost{background:#fff;border:1.5px solid var(--ink);color:var(--ink)}

/* hero: one white panel, copy left, real photo right */
.lph{background:var(--lp-bg);padding:0 var(--lp-gut) var(--lp-gap)}
.lph-in{max-width:1440px;margin:0 auto;background:#fff;border-radius:30px;box-shadow:var(--lp-shadow);
  padding:clamp(28px,4vw,64px) clamp(20px,3.6vw,54px) clamp(32px,4.4vw,64px);display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.lph.has-img .lph-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.lph .dsp{margin-top:18px;font-size:clamp(2.4rem,5vw,4.4rem);max-width:18ch}
.lph .lede{margin-top:22px;max-width:56ch;font:400 1.1rem/1.65 var(--body);color:var(--muted)}
.lph .phcta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.lph .micro{margin-top:16px}
.lph .micro.upd{margin-top:6px}
.lph .phjump{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}
.lph .phjump a{padding:8px 16px;border-radius:999px;background:var(--lp-tint);border:1px solid var(--lp-line);font:600 .88rem/1 var(--body);color:var(--ink);text-decoration:none}
.lph .phjump a:hover{border-color:var(--signal);color:var(--signal)}
.lph-media img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:28px;box-shadow:var(--lp-shadow)}
.lph-media img.is-shot{object-fit:contain;background:linear-gradient(135deg,#DDE3F8,#F3F5FB 75%);padding:clamp(12px,2vw,28px)}

/* sections: white rounded panels on the tinted ground */
.lp .band,.lp .band.night,.lp .band.bone,.lp .sp,.lp .sp.dk{--fg:var(--ink);--mu:var(--muted);background:transparent;color:var(--ink);padding:0 var(--lp-gut) var(--lp-gap)}
.lp .band>.wrap,.lp .band.night>.wrap,.lp .band.bone>.wrap,.lp .sp>.wrap,.lp .sp.dk>.wrap{max-width:1440px;margin:0 auto;background:#fff;color:var(--ink);border-radius:30px;box-shadow:var(--lp-shadow);padding:clamp(32px,5vw,64px) clamp(22px,5vw,72px)}
.lp .band .dsp,.lp .sp .dsp{margin-top:10px;font-size:clamp(1.9rem,3.4vw,2.9rem)}
.lp .band.night .dsp,.lp .sp.dk .dsp{color:var(--ink)}
.lp .bd,.lp .band.night .bd,.lp .sp.dk .bd{font-size:1.05rem;line-height:1.7;color:var(--muted);max-width:62ch}
.lp .bhead{max-width:none}
.lp .bhead .dsp{max-width:24ch}
.lp .cgrid>*,.lp .tline>*{border-radius:20px}
.lp .band.night .cgrid>*,.lp .band .cgrid>*{background:var(--lp-tint);color:var(--ink);border:1px solid transparent}
.lp .cgrid a:hover{color:var(--signal)}

/* faq: title left, answers right */
.lp .band>.wrap:has(.faq){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(28px,5vw,88px);align-items:start}
.lp .faq{margin-top:0;max-width:none;border-top:2px solid var(--ink)}
.lp .faq summary h3{font-size:1.12rem;letter-spacing:-.02em}
.lp .faq details[open] summary h3{color:var(--signal)}

/* mid CTA: light panel, ink text, orange button */
.lp .midcta{background:none;margin:0 0 var(--lp-gap);padding:0 var(--lp-gut);overflow:visible}
.lp .midcta::before,.lp .midcta::after,.lp .midcta .sky,.lp .midcta .rays,.lp .mcnum,.lp .mcdots{display:none}
.lp .midcta>.wrap{max-width:1440px;border-radius:30px;box-shadow:var(--lp-shadow);padding:clamp(32px,5vw,64px) clamp(22px,5vw,72px);background:#fff}
.lp .mcinner{align-items:center;gap:clamp(24px,5vw,80px)}
.lp .mcinner .dsp{color:var(--ink);max-width:18ch}
.lp .mcinner .bd{color:var(--muted)}
.lp .mcact{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* keep reading: plain link tiles */
.lp .rel{background:transparent}
.lp .rel>.wrap{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px)}
.lp .relhead{border-bottom:0;padding-bottom:0}
.lp .relgrid{gap:12px;background:none;border:0;border-radius:0}
.lp .relgrid a{background:#fff;border-radius:18px;padding:20px 22px;border:1px solid transparent;box-shadow:var(--lp-shadow)}
.lp .relgrid a:hover{border-color:var(--signal)}
.lp .relgrid a>span:not(.rhtag):not(.rhmark):not(.rhs){display:none}
.lp .relgrid .relhome{background:var(--ink);color:#fff}

/* closing CTA: light panel, orange button */
.lp .ctawrap{background:transparent;padding:0 var(--lp-gut) var(--lp-gap)}
.lp .ctaband{max-width:1440px;margin:0 auto;background:#fff;border-radius:30px;box-shadow:var(--lp-shadow);padding:clamp(48px,7vw,104px) clamp(24px,4vw,64px)}
.lp .ctaband::before,.lp .ctaband>.sky,.lp .ctaband>.rays{display:none}
.lp .ctaband .inner{align-items:flex-start;text-align:left;margin:0;padding:0;max-width:none;width:100%}
.lp .ctaband .dsp{color:var(--ink);max-width:16ch;font-size:clamp(2.2rem,4.6vw,4rem);margin-left:0;margin-right:0}
.lp .ctaband .bd{color:var(--muted);margin-left:0;margin-right:0}
.lp .ctaband .btn.ghost{background:#fff}

@media (max-width:900px){
  body.lp{--lp-gut:12px;--lp-gap:12px}
  .lph.has-img .lph-in,.lp .band>.wrap:has(.faq){grid-template-columns:minmax(0,1fr)}
  .lph-media{order:-1}
  .lph-media img{aspect-ratio:16/10;border-radius:22px}
  .lph-in,.lp .band>.wrap,.lp .ctaband,.lp .midcta>.wrap{border-radius:22px}
}

/* pages with their own template (contact, help, wordpress, calculators,
   sitemap, free tools) still open with the shared hero macro: give it the
   same white panel */
.lp .phx{background:var(--lp-bg);box-shadow:none;border-radius:0;padding:0 var(--lp-gut) var(--lp-gap);margin-bottom:0}
.lp .phx .phbody{background:#fff;border-radius:30px;box-shadow:var(--lp-shadow);padding:clamp(28px,4vw,64px) clamp(20px,3.6vw,54px) clamp(32px,4.4vw,64px);gap:clamp(24px,4vw,56px)}
.lp .phx .dsp{margin-top:18px;font-size:clamp(2.4rem,5vw,4.4rem);max-width:18ch}
.lp .phx .lede{margin-top:22px;max-width:56ch;font:400 1.1rem/1.65 var(--body);color:var(--muted)}
.lp .phx .phcta{margin-top:30px}
.lp .phx .btn{padding:15px 28px;font:600 16px/1 var(--body)}
.lp .phx .phjump a{background:var(--lp-tint);border:1px solid var(--lp-line)}
.lp .phx .micro{font:500 .9rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
@media (max-width:900px){.lp .phx .phbody{border-radius:22px}}

/* calculators: light result card, and the email gate (`.gate` is also the
   inline mono "gated copy" tag, so reset it here) */
.lp .cout{background:var(--lp-tint);color:var(--ink);border-radius:22px;box-shadow:none}
.lp .cout .ck{font:700 .95rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--signal)}
.lp .cout #calcgate,.lp .cout .gate{display:block;font:inherit;letter-spacing:0;text-transform:none;color:var(--ink)}
.lp .cout .gate::before{display:none}
.lp .cout .gate .bd{font-size:1rem;line-height:1.55;color:var(--muted);max-width:none}
.lp .cout .gate .bd b{color:var(--ink)}
.lp .cout .cform{grid-template-columns:minmax(0,1fr);margin-top:18px;max-width:none}
.lp .cout .cform .btn{margin-top:0}
.lp .cout .btn{background:var(--ink);color:#fff}
.lp .cout .btn.ghost{background:#fff;color:var(--ink)}
.lp .cout .csub,.lp .cout .crow,.lp .cout .cnote,.lp .cout .cform-line{color:var(--muted);border-color:var(--lp-line)}
.lp .cout .crow b,.lp .cout .cbig{color:var(--ink)}

/* closing CTA: the real photo fills the whole card and the copy sits on
   it, over an ink wash that is darkest behind the text (Sam, Nov 9) */
.lp .ctaband{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,42vw,560px);display:flex;align-items:center;
  background:var(--linq-ink,#0F1623) url('/static/img/home/van-street-1000.webp') 70% center/cover no-repeat;box-shadow:none}
.lp .ctaband::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(15,22,35,.92) 0,rgba(15,22,35,.78) 38%,rgba(15,22,35,.3) 72%,rgba(15,22,35,.12) 100%)}
.lp .ctaband .inner{position:relative;z-index:1;max-width:min(620px,100%)}
.lp .ctaband .eb{color:var(--linq-orange-lt,#FBE2D2)}
.lp .ctaband .dsp{color:#fff}
.lp .ctaband .bd{color:rgba(255,255,255,.82)}
.lp .ctaband .btn.ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.lp .ctaband .btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff}
@media (min-width:1000px){
  .lp .ctaband{background-image:url('/static/img/home/van-street-2000.webp')}
}
@media (max-width:640px){
  .lp .ctaband{min-height:0;background-position:62% center}
  .lp .ctaband::after{background:linear-gradient(180deg,rgba(15,22,35,.88) 0,rgba(15,22,35,.8) 60%,rgba(15,22,35,.6) 100%)}
}

/* forms fill their card instead of stopping at 720px */
.lp .cform{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.lp .cout .cform{grid-template-columns:minmax(0,1fr)}
/* the anti-spam widget is a grid child too; give it its own full row above
   the submit button instead of the first field's cell */
.lp .cform>.cf-turnstile{grid-column:1/-1;order:1;margin:0!important}
.lp .cform>.cfoot,.lp .cform>.ftoast{order:2}
@media (max-width:640px){.lp .cform{grid-template-columns:minmax(0,1fr)}}

/* contact: form on the left, real photo filling the right of the card.
   Scoped with :has(.cform): /blog's post grid is also section #s2, and the
   bare #s2 rule squeezed its cards into the right-hand column. */
@media (min-width:1000px){
  .lp #s2>.wrap:has(>.cform){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(28px,4vw,64px);align-items:stretch}
  .lp #s2 .bhead{grid-column:1}
  .lp #s2 .cform{grid-column:1}
  .lp #s2 .cphoto{grid-column:2;grid-row:1/span 2;margin:0}
}
.lp .cphoto img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:24px}
@media (max-width:999px){.lp .cphoto{margin-top:24px}.lp .cphoto img{aspect-ratio:16/10;height:auto}}