/* ─────────────────────────────────────────────────────────────
   Long-form sales page (/home-v2/).

   Everything is scoped under .lp so this cannot reach the live
   homepage or any other page. Loaded only where it's needed.

   Type: Bricolage Grotesque for headings, Inter for body — both
   self-hosted, same as the rest of the site.

   Text is LEFT-ALIGNED, never justified. The wireframe came out of
   Canva with justified paragraphs, which stretches word spacing into
   rivers of white space. Ragged right is what actually reads.
   ───────────────────────────────────────────────────────────── */
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

.lp{
  --lp-w:660px;              /* one narrow column, ~75 characters */
  --lp-gap:34px;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.62;
  letter-spacing:-.003em;
}
.lp-wrap{max-width:var(--lp-w);margin:0 auto;padding:0 22px}
.lp section{padding:0}
.lp p{margin:0 0 15px;text-align:left;text-wrap:pretty}
.lp p:last-child{margin-bottom:0}
.lp strong{font-weight:650}
.lp a:not(.lp-cta){color:var(--ink);text-underline-offset:3px}

/* ---------- masthead ---------- */
.lp-top{padding:54px 0 0}
.lp-brand{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.lp-mark{width:56px;height:56px;border-radius:15px;flex:none;display:block}
/* The page's only h1. It replaced the wordmark, so it carries that weight —
   the brand is already in the nav directly above it. */
.lp-h1{min-width:0;margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:21px;line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
.lp-lede{font-style:italic;font-size:15px;line-height:1.5;margin:0 0 20px;max-width:56ch}

/* ---------- headings ---------- */
.lp h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18.5px;
  line-height:1.25;letter-spacing:-.02em;margin:0 0 13px}
.lp h2 em{font-style:italic}
.lp h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15.5px;
  line-height:1.3;letter-spacing:-.015em;margin:0 0 11px}
.lp h3.i{font-style:italic}
.lp-sec{margin-top:var(--lp-gap)}

/* A hairline instead of a heading gap where the wireframe had one. */
.lp-rule{width:30px;height:1px;background:var(--ink);opacity:.35;margin:26px 0}

/* ---------- lists ---------- */
.lp ul,.lp ol{margin:0 0 15px;padding-left:20px}
.lp li{margin-bottom:7px;padding-left:2px}
.lp li:last-child{margin-bottom:0}
.lp li b{font-weight:650}
.lp ol{padding-left:22px}
.lp-note{font-style:italic;font-size:13.5px;opacity:.8;margin:14px 0 0}

/* ---------- buttons ---------- */
.lp .lp-cta{display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13.5px;
  letter-spacing:-.01em;padding:11px 20px;border-radius:9px;margin:4px 0 0;
  transition:transform .14s ease,background .14s ease}
.lp .lp-cta:hover{background:#000;transform:translateY(-1px)}
.lp .lp-cta:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- showcase strip ---------- */
.lp-strip{display:flex;gap:7px;margin:18px 0 0;overflow:hidden}
.lp-strip img{width:calc((100% - 28px) / 5);aspect-ratio:3/4;object-fit:cover;
  border-radius:4px;border:1px solid var(--line);background:var(--cream)}

/* ---------- pricing table ---------- */
.lp-table-wrap{overflow-x:auto;margin:16px 0 0;
  border:1px solid var(--line);border-radius:10px}
.lp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:540px}
.lp-table th{text-align:left;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.03em;text-transform:uppercase;
  padding:11px 13px;background:var(--cream);border-bottom:1px solid var(--line);white-space:nowrap}
.lp-table td{padding:12px 13px;border-bottom:1px solid var(--line-soft,#EDEAE2);vertical-align:top}
.lp-table tr:last-child td{border-bottom:0}
.lp-table td:first-child{font-weight:650;white-space:nowrap}
.lp-table td:last-child{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;white-space:nowrap}

/* ---------- faq ---------- */
.lp-faq{margin-top:14px}
.lp-faq details{border-top:1px solid var(--line);padding:13px 0}
.lp-faq details:last-of-type{border-bottom:1px solid var(--line)}
.lp-faq summary{cursor:pointer;list-style:none;display:flex;gap:9px;align-items:flex-start;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:14.5px;line-height:1.35}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::before{content:"+";font-weight:800;line-height:1.2;flex:none}
.lp-faq details[open] summary::before{content:"–"}
.lp-faq details p{margin:10px 0 0}

.lp-end{padding-bottom:64px}

@media (max-width:640px){
  .lp{font-size:16px}
  .lp-top{padding-top:34px}
  .lp-mark{width:48px;height:48px;border-radius:13px}
  .lp-h1{font-size:19px}
  .lp-strip{gap:5px}
  .lp-strip img{width:calc((100% - 15px) / 4)}
  .lp-strip img:nth-child(n+5){display:none}
}