/* Landing page, everything below the hero (resources/views/home/sections.blade.php). The page itself is a Webflow export whose global
   rules (body, h1-h6, p, a, img) still apply, so every rule here is scoped under .lp and every class carries the lp- prefix; the hero
   and the navbar keep the Webflow styles untouched.
   The patterns are the 21st.dev ones (bento grid, text reveal, logo marquee, wall of love, accordion, glow CTA) written as plain
   Blade + CSS, because the app has no React build. Brand: Inter, ink #171717, blue #4160fe (the logo's blue). */

.lp {
    --lp-ink: #171717;
    --lp-body: #4b4b57;
    --lp-muted: #6e6e7a;
    --lp-faint: #a1a1ad;
    --lp-line: #ececf2;
    --lp-line-firm: #dcdce6;
    --lp-bg: #ffffff;
    --lp-sunk: #f7f7fb;
    --lp-blue: #4160fe;
    --lp-blue-hover: #3450e6;
    --lp-blue-soft: #eef1ff;
    --lp-blue-edge: #d6ddff;
    --lp-good: #16a34a;
    --lp-good-soft: #e8f7ee;
    --lp-bad: #d8434f;
    --lp-bad-soft: #fdecee;
    --lp-gold: #f5a524;
    --lp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px -18px rgba(16, 24, 40, .16);
    --lp-shadow-lift: 0 2px 4px rgba(16, 24, 40, .05), 0 26px 50px -22px rgba(65, 96, 254, .35);
    color: var(--lp-ink);
    font-family: Inter, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
/* The resets sit in :where() so they carry no specificity: Webflow's element rules are still undone, but a class such as .lp-lead or
   .lp-tcard (one class) is never beaten by them. */
.lp :where(h1, h2, h3, h4, p, ul, ol, li, dl, dd, figure) { margin: 0; padding: 0; }
.lp :where(ul, ol) { list-style: none; }
/* Webflow gives blockquote a grey bar, indent and 18px type; the review cards want none of it. */
.lp :where(blockquote) { margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; color: inherit; }
.lp :where(a) { color: inherit; text-decoration: none; }
.lp :where(img, svg, video) { display: block; max-width: 100%; }
.lp :where(button) { font: inherit; cursor: pointer; }
.lp .lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.lp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lp-section { padding: 96px 0; }
.lp-section--tint { background: var(--lp-sunk); }

/* section heading */
.lp-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border: 1px solid var(--lp-blue-edge); border-radius: 99px; background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 13px; font-weight: 600; line-height: 1; }
.lp-eyebrow svg { width: 14px; height: 14px; }
.lp-title { color: var(--lp-ink); font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.lp-title em { font-style: normal; color: var(--lp-blue); }
.lp-lead { margin-top: 16px; color: var(--lp-muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; text-wrap: balance; }

/* buttons */
.lp .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 30px; border: 0; border-radius: 99px; background: var(--lp-blue); color: #fff; font-size: 16px; font-weight: 600; transition: background .2s, transform .2s, box-shadow .2s; box-shadow: 0 10px 24px -10px rgba(65, 96, 254, .7); }
.lp .lp-btn:hover { background: var(--lp-blue-hover); transform: translateY(-2px); }
.lp .lp-btn svg { width: 18px; height: 18px; transition: transform .2s; }
.lp .lp-btn:hover svg { transform: translateX(3px); }
.lp .lp-btn--white { background: #fff; color: var(--lp-ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.lp .lp-btn--white:hover { background: #fff; }

/* scroll reveal */
/* Hidden only once the page script has run (it puts .lp-js on <html>), so with scripts off or failing nothing is left invisible. */
html.lp-js .lp [data-lp-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--lp-d, 0ms); }
html.lp-js .lp [data-lp-reveal].is-in { opacity: 1; transform: none; }

/* ── 1. How it works: three nodes on a line that fills in, each with a small picture ────── */
.lp-flow { padding: 100px 0 30px; }
.lp-head--tight { margin-bottom: 40px; }
.lp-flow-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.lp-flow-line { position: absolute; top: 27px; left: calc(16.666% + 4px); right: calc(16.666% + 4px); height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--lp-line-firm) 0 6px, transparent 6px 12px); }
.lp-flow-line i { position: absolute; inset: 0; border-radius: 2px; background: var(--lp-blue); transform-origin: left; }
html.lp-js .lp-flow-line i { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) .25s; }
html.lp-js .lp-flow-grid.is-in .lp-flow-line i { transform: scaleX(1); }
.lp-flow-item { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lp-flow-node { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 1px solid var(--lp-blue-edge); border-radius: 50%; background: #fff; color: var(--lp-blue); box-shadow: 0 0 0 6px #fff, 0 12px 24px -12px rgba(65, 96, 254, .55); }
.lp-flow-node svg { width: 24px; height: 24px; }
.lp-flow-node span { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lp-ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 3px #fff; }
.lp-flow-card { display: flex; flex-direction: column; flex: 1; width: 100%; margin-top: 22px; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s; }
.lp-flow-item:hover .lp-flow-card { transform: translateY(-4px); border-color: var(--lp-blue-edge); box-shadow: var(--lp-shadow-lift); }
.lp-flow-visual { display: grid; place-items: center; min-height: 196px; padding: 26px 24px; background: radial-gradient(120% 90% at 50% 0%, var(--lp-blue-soft), transparent 70%), var(--lp-sunk); border-bottom: 1px solid var(--lp-line); }
.lp-flow-text { padding: 24px 26px 28px; color: var(--lp-ink); font-size: clamp(21px, 2vw, 25px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.lp-flow-text b { font-weight: inherit; color: var(--lp-blue); }

/* the three little pictures */
.lp-conn { display: grid; gap: 9px; width: 100%; max-width: 250px; }
.lp-conn-row { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border: 1px solid var(--lp-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .25); font-size: 13.5px; font-weight: 600; }
.lp-conn-row img, .lp-conn-ic { flex: none; width: 24px; height: 24px; object-fit: contain; }
.lp-conn-ic { display: grid; place-items: center; border-radius: 8px; background: var(--lp-blue-soft); color: var(--lp-blue); }
.lp-conn-ic svg { width: 15px; height: 15px; }
.lp-conn-row em { display: grid; place-items: center; margin-left: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--lp-good); color: #fff; }
.lp-conn-row em svg { width: 11px; height: 11px; }
html.lp-js .lp-conn-row em { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
html.lp-js .lp-flow-grid.is-in .lp-conn-row em { transform: scale(1); }
html.lp-js .lp-flow-grid.is-in .lp-conn-row:nth-child(1) em { transition-delay: .5s; }
html.lp-js .lp-flow-grid.is-in .lp-conn-row:nth-child(2) em { transition-delay: .75s; }
html.lp-js .lp-flow-grid.is-in .lp-conn-row:nth-child(3) em { transition-delay: 1s; }

.lp-sms { display: grid; gap: 8px; width: 100%; max-width: 250px; }
.lp-sms-bubble { max-width: 88%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--lp-line); box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .25); color: var(--lp-body); font-size: 12.5px; line-height: 1.45; }
.lp-sms-bubble--in { justify-self: end; padding: 8px 12px; border-radius: 18px 18px 6px 18px; background: var(--lp-blue); border-color: var(--lp-blue); }
.lp-sms-bubble--in .lp-stars { color: #ffd166; }
.lp-sms-bubble--in .lp-stars svg { width: 14px; height: 14px; }
.lp-sms-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-left: 4px; padding: 6px 12px; border-radius: 99px; background: var(--lp-blue-soft); border: 1px solid var(--lp-blue-edge); color: var(--lp-blue); font-size: 12px; font-weight: 700; }
.lp-sms-link svg { width: 12px; height: 12px; color: var(--lp-gold); }

.lp-rise { width: 100%; max-width: 250px; padding: 14px 16px 12px; border: 1px solid var(--lp-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 22px -14px rgba(16, 24, 40, .3); }
.lp-rise-top { display: flex; align-items: center; gap: 12px; }
.lp-rise-top > b { font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-rise-top .lp-stars svg { width: 13px; height: 13px; }
.lp-rise-top small { display: block; margin-top: 3px; color: var(--lp-faint); font-size: 11.5px; font-weight: 600; }
.lp-rise-bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; margin-top: 14px; }
.lp-rise-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: var(--lp-blue); transform-origin: bottom; }
.lp-rise-bars i:not(:last-child) { opacity: calc(.4 + var(--i) * .1); }
html.lp-js .lp-rise-bars i { transform: scaleY(0); transition: transform .8s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--i) * 90ms + .9s); }
html.lp-js .lp-flow-grid.is-in .lp-rise-bars i { transform: scaleY(1); }

/* ── 2. Bento ─────────────────────────────────────────────────────────────────────────── */
.lp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.lp-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s; }
.lp-card:hover { transform: translateY(-4px); border-color: var(--lp-blue-edge); box-shadow: var(--lp-shadow-lift); }
.lp-card-copy { padding: 30px 30px 0; }
.lp-card h3 { color: var(--lp-ink); font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.lp-card p { margin-top: 8px; color: var(--lp-muted); font-size: 15px; line-height: 1.6; }
.lp-card-media { flex: 1; display: grid; place-items: center; min-height: 190px; padding: 22px 30px 26px; }
.lp-card--wide { grid-column: span 4; }
.lp-card--narrow, .lp-card--third { grid-column: span 2; }
.lp-card--wide .lp-card-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); height: 100%; align-items: center; }
.lp-card--wide .lp-card-media { padding: 26px 30px 26px 0; }
.lp-card--wide .lp-card-copy { padding: 34px 10px 34px 34px; }
.lp-card--glow::before { content: ""; position: absolute; inset: auto -20% -45% -20%; height: 70%; background: radial-gradient(closest-side, rgba(65, 96, 254, .14), transparent); pointer-events: none; }
.lp-card-img { width: 100%; max-width: 330px; height: auto; filter: drop-shadow(0 18px 24px rgba(16, 24, 40, .12)); }

/* mini UI inside the cards */
.lp-ui { width: 100%; max-width: 330px; }
.lp-review { padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 18px -12px rgba(16, 24, 40, .18); }
.lp-review-top { display: flex; align-items: center; gap: 10px; }
.lp-avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 12px; font-weight: 700; }
.lp-review-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.lp-stars { display: inline-flex; gap: 2px; color: var(--lp-gold); }
.lp-stars svg { width: 13px; height: 13px; }
.lp-stars .is-off { color: #e3e3ea; }
.lp-review-text { margin-top: 8px; color: var(--lp-body); font-size: 12.5px; line-height: 1.5; }
.lp-reply { position: relative; margin: 10px 0 0 22px; padding: 12px 14px; border-radius: 16px; background: var(--lp-blue-soft); border: 1px solid var(--lp-blue-edge); }
.lp-reply-tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; color: var(--lp-blue); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.lp-reply-tag svg { width: 12px; height: 12px; }
.lp-reply-text { color: #34345a; font-size: 12.5px; line-height: 1.5; }
.lp-channels { display: grid; gap: 10px; }
.lp-channel { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--lp-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 18px -14px rgba(16, 24, 40, .2); font-size: 13px; font-weight: 600; }
.lp-channel:nth-child(2) { margin-left: 14px; }
.lp-channel:nth-child(3) { margin-left: 28px; }
.lp-channel img { width: 22px; height: 22px; object-fit: contain; }
.lp-channel small { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--lp-blue-soft); color: var(--lp-blue); font-size: 11px; font-weight: 700; }
.lp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 300px; }
.lp-cal i { aspect-ratio: 1; border-radius: 9px; background: var(--lp-sunk); border: 1px solid var(--lp-line); }
.lp-cal i.is-on { background: var(--lp-blue-soft); border-color: var(--lp-blue-edge); position: relative; }
.lp-cal i.is-on::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--lp-blue); }
.lp-cal-cap { margin-top: 12px; color: var(--lp-muted); font-size: 12.5px; font-weight: 600; text-align: center; }

/* ── 3. Steps ─────────────────────────────────────────────────────────────────────────── */
.lp-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: lp-step; }
.lp-step { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-step-media { display: grid; place-items: center; aspect-ratio: 5 / 4; padding: 6px; background: linear-gradient(180deg, var(--lp-sunk), #fff); border-bottom: 1px solid var(--lp-line); }
.lp-step-media img { width: 100%; height: 100%; object-fit: contain; }
.lp-step-body { padding: 24px 26px 30px; }
.lp-step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: 14px; border-radius: 50%; background: var(--lp-ink); color: #fff; font-size: 14px; font-weight: 700; }
.lp-step h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.lp-step p { margin-top: 8px; color: var(--lp-muted); font-size: 15px; line-height: 1.6; }

/* ── 4/5. Split features ──────────────────────────────────────────────────────────────── */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lp-split--flip .lp-split-media { order: -1; }
.lp-split-copy .lp-eyebrow { margin-bottom: 16px; }
.lp-split-copy .lp-title { font-size: clamp(28px, 3.6vw, 42px); }
.lp-split-copy .lp-lead { margin-top: 16px; }
.lp-checks { display: grid; gap: 14px; margin-top: 28px; }
.lp-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--lp-ink); font-size: 16px; font-weight: 500; line-height: 1.5; }
.lp-checks svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--lp-good-soft); color: var(--lp-good); }
.lp-frame { position: relative; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 32px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-frame video, .lp-frame img { width: 100%; height: auto; }
.lp-frame--sq video { aspect-ratio: 1 / 1; object-fit: cover; }
/* The social-posting mascot ships purple; this shifts it onto the logo blue (hue ~230) to match the brand. */
.lp-frame--brand video { filter: hue-rotate(-13deg) saturate(1.6) brightness(1.03); }
.lp-split-media { position: relative; }
.lp-split-media::before { content: ""; position: absolute; inset: -8% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(65, 96, 254, .13), transparent); }
.lp-float { position: absolute; display: flex; align-items: center; gap: 12px; max-width: 270px; padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: 18px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 40px -18px rgba(16, 24, 40, .35); backdrop-filter: blur(6px); }
.lp-float img { width: 74px; height: auto; flex: none; border-radius: 10px; }
.lp-float b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.lp-float span { display: block; margin-top: 3px; color: var(--lp-muted); font-size: 12.5px; line-height: 1.45; }
.lp-float--br { right: -14px; bottom: -22px; }
/* Autopilot panel: the four jobs from the checklist beside it. .is-on moves through both lists together. */
.lp-checks--auto { gap: 6px; margin: 22px 0 0 -12px; }
.lp-checks--auto li { padding: 9px 12px; border-radius: 14px; transition: background-color .35s ease; }
.lp-checks--auto li.is-on { background: var(--lp-blue-soft); }
.lp-auto { padding: 20px; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-auto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 16px; }
.lp-auto-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.lp-auto-title svg { width: 16px; height: 16px; color: var(--lp-blue); }
.lp-auto-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; background: var(--lp-good-soft); color: var(--lp-good); font-size: 12.5px; font-weight: 600; }
.lp-auto-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-good); }
.lp-auto-feed { display: grid; gap: 10px; }
.lp-auto-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1px solid var(--lp-line); border-radius: 18px; background: #fff; transition: border-color .35s ease, background-color .35s ease, box-shadow .35s ease; }
.lp-auto-row.is-on { border-color: var(--lp-blue-edge); background: #fafbff; box-shadow: 0 12px 26px -18px rgba(65, 96, 254, .5); }
.lp-auto-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--lp-sunk); color: var(--lp-muted); transition: background-color .35s ease, color .35s ease; }
.lp-auto-row.is-on .lp-auto-ic { background: var(--lp-blue); color: #fff; }
.lp-auto-ic svg { width: 19px; height: 19px; }
.lp-auto-body { flex: 1; min-width: 0; }
.lp-auto-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-auto-top b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.lp-auto-status { display: inline-flex; align-items: center; flex: none; gap: 5px; color: var(--lp-good); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.lp-auto-status svg { width: 11px; height: 11px; }
.lp-auto-text { display: block; margin-top: 3px; color: var(--lp-muted); font-size: 13.5px; line-height: 1.45; }

/* ── 6. Reputation: numbers on the left, a scrolling Google result list on the right ─────── */
.lp-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 20px 40px; margin-top: 34px; justify-content: start; }
.lp-stat b { display: block; font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lp-stat span { display: block; margin-top: 6px; color: var(--lp-muted); font-size: 14px; font-weight: 500; }
.lp-serp { position: relative; padding: 18px 18px 0; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-serp-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border: 1px solid var(--lp-line-firm); border-radius: 99px; background: #fff; box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .25); color: var(--lp-body); font-size: 14px; font-weight: 500; }
.lp-serp-bar svg { width: 17px; height: 17px; color: var(--lp-faint); }
.lp-serp-window { position: relative; height: 372px; margin-top: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent); }
.lp-serp-track { display: grid; gap: 12px; animation: lp-up 22s linear infinite; }
.lp-serp-window:hover .lp-serp-track { animation-play-state: paused; }
.lp-biz { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--lp-line); border-radius: 18px; background: #fff; }
.lp-biz-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--lp-blue-soft); color: var(--lp-blue); }
.lp-biz-ic svg { width: 22px; height: 22px; }
.lp-biz b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.lp-biz-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 3px; color: var(--lp-muted); font-size: 12.5px; }
.lp-biz-meta .lp-stars svg { width: 12px; height: 12px; }
.lp-biz-meta strong { color: var(--lp-ink); font-weight: 600; }
.lp-biz small { display: block; margin-top: 2px; color: var(--lp-faint); font-size: 12.5px; }
@keyframes lp-up { to { transform: translateY(calc(-50% - var(--lp-gap, 6px))); } }

/* ── 7. Integrations: two rows of logos drifting in opposite directions ─────────────────── */
.lp-logos { display: grid; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.lp-logos-row { display: flex; width: max-content; gap: 16px; animation: lp-left 38s linear infinite; }
.lp-logos-row--rev { animation-name: lp-right; animation-duration: 44s; }
.lp-logos:hover .lp-logos-row { animation-play-state: paused; }
.lp-logo { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 26px 0 20px; border: 1px solid var(--lp-line); border-radius: 99px; background: #fff; box-shadow: var(--lp-shadow); font-size: 16px; font-weight: 600; white-space: nowrap; }
.lp-logo img { width: 30px; height: 30px; object-fit: contain; }
@keyframes lp-left { to { transform: translateX(calc(-50% - 8px)); } }
@keyframes lp-right { from { transform: translateX(calc(-50% - 8px)); } to { transform: translateX(0); } }

/* ── 8. Comparison ────────────────────────────────────────────────────────────────────── */
.lp-compare { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.lp-compare-copy .lp-title { font-size: clamp(28px, 3.6vw, 42px); }
.lp-compare-copy .lp-btn { margin-top: 28px; }
.lp-table-wrap { overflow-x: auto; border: 1px solid var(--lp-line); border-radius: 28px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 500px; }
.lp-table th, .lp-table td { padding: 18px 20px; border: 0; border-top: 1px solid var(--lp-line); background: transparent; text-align: center; vertical-align: middle; }
.lp-table thead th { padding: 22px 20px; border-top: 0; color: var(--lp-muted); font-size: 14px; font-weight: 600; }
.lp-table tbody th { color: var(--lp-ink); font-size: 14px; font-weight: 600; letter-spacing: .02em; text-align: left; text-transform: uppercase; }
.lp-table .is-us { background: linear-gradient(180deg, var(--lp-blue-soft), #fafaff); border-left: 1px solid var(--lp-blue-edge); border-right: 1px solid var(--lp-blue-edge); }
.lp-table thead .is-us { position: relative; border-top-left-radius: 0; }
.lp-table thead .is-us img { width: 120px; margin: 0 auto; }
.lp-table tbody tr:last-child .is-us { border-bottom: 1px solid var(--lp-blue-edge); }
.lp-yes, .lp-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.lp-yes { background: var(--lp-good); color: #fff; }
.lp-no { background: var(--lp-bad-soft); color: var(--lp-bad); }
.lp-yes svg, .lp-no svg { width: 14px; height: 14px; }

/* ── 9. Founder ───────────────────────────────────────────────────────────────────────── */
.lp-founder { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1020px; margin: 0 auto; padding: 44px; overflow: hidden; border: 1px solid var(--lp-blue-edge); border-radius: 36px; background: linear-gradient(135deg, #fff, var(--lp-blue-soft) 140%); box-shadow: var(--lp-shadow); }
.lp-founder::after { content: "\201C"; position: absolute; top: -34px; right: 34px; color: rgba(65, 96, 254, .09); font-size: 260px; font-weight: 700; line-height: 1; pointer-events: none; }
.lp-founder-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 26px; background: var(--lp-sunk); box-shadow: 0 24px 44px -24px rgba(16, 24, 40, .45); }
.lp-founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lp-founder-tag { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); }
.lp-founder-tag b { display: block; font-size: 16px; font-weight: 600; }
.lp-founder-tag span { color: var(--lp-muted); font-size: 13px; font-weight: 500; }
.lp-founder-copy h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.lp-founder-copy p { margin-top: 16px; color: var(--lp-body); font-size: 17px; line-height: 1.7; }
.lp-founder-copy p:first-of-type { color: var(--lp-ink); font-size: 19px; font-weight: 500; }

/* ── 10. Wall of love ─────────────────────────────────────────────────────────────────── */
.lp-rating { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; }
.lp-rating img { height: 40px; width: auto; }
.lp-rating span { color: var(--lp-body); font-size: 15px; font-weight: 500; }
.lp-rating strong { color: var(--lp-ink); font-weight: 700; }
.lp-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; height: 640px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.lp-wall-col { min-width: 0; }
.lp-wall-track { display: grid; gap: 20px; animation: lp-up 60s linear infinite; }
.lp-wall-col:nth-child(2) .lp-wall-track { animation-duration: 76s; animation-direction: reverse; }
.lp-wall-col:nth-child(3) .lp-wall-track { animation-duration: 68s; }
.lp-wall:hover .lp-wall-track { animation-play-state: paused; }
.lp-tcard { padding: 24px; border: 1px solid var(--lp-line); border-radius: 24px; background: #fff; box-shadow: var(--lp-shadow); }
.lp-tcard-top { display: flex; align-items: center; gap: 12px; }
.lp-tcard-top img.lp-pic { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; }
.lp-tcard-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.lp-tcard-name img { width: 16px; height: 16px; }
.lp-tcard-meta { margin-top: 2px; color: var(--lp-faint); font-size: 12.5px; font-weight: 500; }
.lp-tcard .lp-stars { margin-top: 16px; }
.lp-tcard .lp-stars svg { width: 15px; height: 15px; }
.lp-tcard p { margin-top: 10px; color: var(--lp-body); font-size: 14.5px; line-height: 1.65; }
/* The photo a customer sent with their review: laptop photos are cropped to 4:3, the Search Console chart keeps its own shape. */
.lp-tcard-photo { margin-top: 16px; overflow: hidden; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-sunk); }
.lp-tcard-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 38%; }
.lp-tcard-photo.is-wide { background: #fff; }
.lp-tcard-photo.is-wide img { aspect-ratio: auto; object-fit: contain; }

/* ── 11. FAQ ──────────────────────────────────────────────────────────────────────────── */
.lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.lp-faq-side { position: sticky; top: 110px; }
.lp-faq-side .lp-title { font-size: clamp(30px, 4vw, 46px); }
.lp-faq-side .lp-lead { margin-top: 14px; }
.lp-faq-side .lp-lead a { color: var(--lp-blue); font-weight: 600; }
.lp-faq-side .lp-lead a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-acc { display: grid; gap: 12px; }
.lp-acc details { border: 1px solid var(--lp-line); border-radius: 20px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.lp-acc details[open] { border-color: var(--lp-blue-edge); box-shadow: var(--lp-shadow); }
.lp-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; color: var(--lp-ink); font-size: 17px; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; }
.lp-acc summary::-webkit-details-marker { display: none; }
.lp-acc summary:focus-visible { outline: 2px solid var(--lp-blue); outline-offset: 2px; border-radius: 20px; }
.lp-acc summary svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--lp-sunk); color: var(--lp-body); transition: transform .3s, background .2s, color .2s; }
.lp-acc details[open] summary svg { transform: rotate(45deg); background: var(--lp-blue); color: #fff; }
.lp-acc-body { padding: 0 24px 22px; color: var(--lp-body); font-size: 16px; line-height: 1.7; }
.lp-acc details[open] .lp-acc-body { animation: lp-fade .35s ease both; }
@keyframes lp-fade { from { opacity: 0; transform: translateY(-6px); } }

/* ── 12. Closing CTA ──────────────────────────────────────────────────────────────────── */
.lp-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 28px; overflow: hidden; border-radius: 40px; background: var(--lp-blue); color: #fff; }
.lp-cta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 90% at 20% 30%, #000, transparent); mask-image: radial-gradient(70% 90% at 20% 30%, #000, transparent); pointer-events: none; }
.lp-cta-copy { position: relative; padding: 64px 0 64px 64px; }
.lp-cta h2 { color: #fff; font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.lp-cta p { margin-top: 14px; color: rgba(255, 255, 255, .8); font-size: clamp(16px, 1.8vw, 20px); font-weight: 500; }
.lp .lp-cta .lp-btn { margin-top: 30px; }
.lp-cta-media { position: relative; align-self: stretch; min-height: 320px; margin: 22px 22px 22px 0; overflow: hidden; border-radius: 28px; background: #fff; }
.lp-cta-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Footer ───────────────────────────────────────────────────────────────────────────── */
.lp-footer { padding: 72px 0 34px; border-top: 1px solid var(--lp-line); background: #fff; }
.lp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.lp-footer-brand img { height: 30px; width: auto; }
.lp-footer-brand p { max-width: 290px; margin-top: 16px; color: var(--lp-muted); font-size: 14.5px; line-height: 1.65; }
.lp-trust { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 16px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-sunk); }
.lp-trust b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.lp-trust span { display: block; color: var(--lp-muted); font-size: 12px; font-weight: 600; }
.lp-trust img { width: 92px; height: auto; margin-bottom: 2px; }
.lp-footer h3 { margin-bottom: 16px; color: var(--lp-ink); font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.lp-footer li + li { margin-top: 11px; }
.lp-footer li a { color: var(--lp-muted); font-size: 14.5px; transition: color .15s; }
.lp-footer li a:hover { color: var(--lp-blue); }
.lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--lp-line); color: var(--lp-faint); font-size: 13.5px; }

/* ── Responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .lp-section { padding: 72px 0; }
    .lp-flow-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 560px; margin: 0 auto; }
    .lp-flow-line { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--lp-line-firm) 0 6px, transparent 6px 12px); }
    .lp-flow-line i { transform-origin: top; background: var(--lp-blue); }
    html.lp-js .lp-flow-line i { transform: scaleY(0); }
    html.lp-js .lp-flow-grid.is-in .lp-flow-line i { transform: scaleY(1); }
    .lp-flow-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 0 18px; }
    .lp-flow-card { margin-top: 0; }
    .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-card--wide { grid-column: span 2; }
    .lp-card--narrow, .lp-card--third { grid-column: span 1; }
    .lp-card--wide .lp-card-inner { grid-template-columns: minmax(0, 1fr); }
    .lp-card--wide .lp-card-media { padding: 22px 30px 26px; }
    .lp-card--wide .lp-card-copy { padding: 30px 30px 0; }
    .lp-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
    .lp-split, .lp-compare, .lp-faq { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .lp-split--flip .lp-split-media { order: 0; }
    .lp-faq-side { position: static; }
    .lp-founder { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
    .lp-founder-photo { max-width: 320px; aspect-ratio: 1 / 1; }
    .lp-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-wall-col:nth-child(3) { display: none; }
    .lp-cta { grid-template-columns: minmax(0, 1fr); }
    .lp-cta-copy { padding: 48px 32px 8px; }
    .lp-cta-media { margin: 14px 22px 22px; min-height: 260px; }
    .lp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .lp-wrap { padding: 0 18px; }
    .lp-section { padding: 60px 0; }
    .lp-flow { padding: 70px 0 20px; }
    .lp-head { margin-bottom: 36px; }
    .lp-bento { grid-template-columns: minmax(0, 1fr); }
    .lp-card--wide, .lp-card--narrow, .lp-card--third { grid-column: span 1; }
    .lp-card-copy, .lp-card--wide .lp-card-copy { padding: 26px 24px 0; }
    .lp-stats { grid-template-columns: repeat(2, auto); }
    .lp-serp-window { height: 320px; }
    .lp-auto { padding: 14px; border-radius: 22px; }
    .lp-auto-row { gap: 12px; padding: 12px; }
    .lp-float--br { right: 8px; bottom: -26px; max-width: 230px; }
    .lp-wall { grid-template-columns: minmax(0, 1fr); height: 560px; }
    .lp-wall-col:nth-child(2) { display: none; }
    .lp-acc summary { padding: 17px 18px; font-size: 16px; }
    .lp-acc-body { padding: 0 18px 18px; font-size: 15px; }
    .lp-cta { border-radius: 30px; }
    .lp-cta-copy { padding: 40px 24px 4px; }
    .lp .lp-btn { width: 100%; }
    .lp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .lp-founder { padding: 22px; border-radius: 28px; }
}

/* A visitor who asks for less motion gets everything at rest: no scrolling lists, the full wall laid out, text already lit. */
@media (prefers-reduced-motion: reduce) {
    html.lp-js .lp [data-lp-reveal] { opacity: 1; transform: none; transition: none; }
    html.lp-js .lp-flow-line i, html.lp-js .lp-conn-row em, html.lp-js .lp-rise-bars i { transform: none; transition: none; }
    .lp-flow-card { transition: none; }
    .lp-checks--auto li, .lp-auto-row, .lp-auto-ic { transition: none; }
    .lp-serp-track, .lp-logos-row, .lp-wall-track { animation: none; }
    .lp-serp-window { height: auto; -webkit-mask-image: none; mask-image: none; }
    .lp-serp-window [aria-hidden="true"], .lp-wall [aria-hidden="true"] { display: none; }
    .lp-logos { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .lp-logos-row { flex-wrap: wrap; width: auto; justify-content: center; }
    .lp-wall { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .lp-card, .lp .lp-btn { transition: none; }
}