/* LinkPounce marketing site (linkpounce.com). Same tokens as the app (public/app/app.css): navy for the one
   dark moment, "pounce" orange for the loud button, warm paper page, Fraunces headings with Inter. Classes use lp-. */
:root {
  --paper: #f6f4ef; --card: #fffdf9; --ink: #131c2c; --muted: #5b6475; --line: #e4dfd4; --soft: #efece5;
  --navy: #0b1d36; --navy2: #12294a; --blue: #0a66c2; --pounce: #ff7a1a; --pounce-deep: #d95f06; --pounce-ink: #1c0f03; --pounce-soft: #ffe9d6;
  --good: #14733a; --good-bg: #e5f4ea; --warn: #8a5a00; --warn-bg: #fdf0dc; --bad: #b42318; --bad-bg: #fbe7e5; --info-bg: #e7f0fa;
  --plum: #6b4fb0; --rust: #c1552b;
  --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 14px 34px rgba(19, 28, 44, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h2 { font: 600 40px/1.12 var(--serif); letter-spacing: -.015em; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 700; }
p { margin: 0; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.lp-eyebrow { display: block; font: 800 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pounce-deep); margin-bottom: 14px; }
.lp-eb-light { color: var(--pounce); }

/* buttons */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; padding: 10px 16px; font: 700 14.5px/1.2 var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-go { background: var(--pounce); color: var(--pounce-ink); box-shadow: 0 8px 20px rgba(255, 122, 26, .28); }
.lp-btn-go:hover { background: #ff8a35; }
.lp-btn-dark { background: var(--navy); color: #fff; }
.lp-btn-line { border-color: var(--line); color: var(--ink); background: var(--card); }
.lp-btn-ghost { border-color: rgba(255,255,255,.25); color: #fff; }
.lp-btn-soft { background: var(--soft); color: var(--ink); }
.lp-btn-big { padding: 14px 22px; font-size: 16px; border-radius: 14px; }
.lp-btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; box-shadow: none; }

/* header */
.lp-top { position: sticky; top: 0; z-index: 10; background: rgba(246, 244, 239, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lp-topin { display: flex; align-items: center; gap: 28px; height: 66px; }
.lp-brand { display: flex; align-items: center; gap: 9px; font: 600 22px/1 var(--serif); color: var(--ink); text-decoration: none; }
.lp-brand-s { font-size: 18px; }
.lp-nav { display: flex; gap: 24px; margin-left: 12px; }
.lp-nav a { color: var(--muted); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.lp-nav a:hover { color: var(--ink); }
.lp-topbtns { margin-left: auto; display: flex; gap: 10px; }

/* hero */
.lp-hero { position: relative; overflow: hidden; color: #fff; padding: 76px 0 84px;
  background:
    radial-gradient(600px 380px at 88% 8%, rgba(255, 122, 26, .22), transparent 70%),
    radial-gradient(520px 420px at 6% 100%, rgba(10, 102, 194, .35), transparent 70%),
    linear-gradient(160deg, #0b1d36 0%, #0e2442 60%, #0a1830 100%); }
.lp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px; pointer-events: none; }
.lp-herogrid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lp-herogrid > * { min-width: 0; }
.lp-hero h1 { font: 600 58px/1.06 var(--serif); letter-spacing: -.02em; }
.lp-hero h1 em { color: var(--pounce); font-style: italic; }
.lp-lede { margin-top: 20px; max-width: 540px; font-size: 18px; color: #c9d4e4; }
.lp-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; max-width: 560px; }
.lp-tile { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 16px; }
.lp-tile b { display: block; font: 600 34px/1 var(--serif); color: #fff; }
.lp-tile span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #b3c1d6; }

.lp-herovis { position: relative; height: 540px; }
.lp-mock { position: absolute; background: var(--card); color: var(--ink); border-radius: 20px; padding: 16px 18px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.lp-m1 { left: 0; top: 0; width: 400px; transform: rotate(-1.2deg); }
.lp-m2 { right: 0; top: 388px; width: 340px; transform: rotate(.8deg); }
.lp-m3 { left: 24px; top: 404px; width: 200px; padding: 12px 14px; transform: rotate(-.6deg); }
.lp-mhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.lp-mtag { font: 800 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lp-person, .lp-reply { display: flex; align-items: center; gap: 10px; }
.lp-person small, .lp-reply small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.lp-person b, .lp-reply b { font-size: 14px; }
.lp-av { flex: none; width: 36px; height: 36px; border-radius: 10px; color: #fff; display: grid; place-items: center; font: 800 13px/1 var(--sans); }
.lp-score { margin-left: auto; font: 700 28px/1 var(--serif); color: var(--good); }
.lp-score i { font: 600 13px var(--sans); color: var(--muted); font-style: normal; }
.lp-reason { margin-top: 12px; font-size: 13px; background: var(--info-bg); color: #1d3f66; border-radius: 10px; padding: 8px 10px; }
.lp-draft { margin-top: 10px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; }
.lp-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lp-checks span { font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--good-bg); border-radius: 99px; padding: 3px 9px; }
.lp-mbtns { display: flex; gap: 6px; margin-top: 12px; }
.lp-m2 .lp-pill { margin-top: 12px; }
.lp-ramp { display: flex; align-items: flex-end; gap: 8px; height: 60px; }
.lp-ramp i { flex: 1; background: #9dbfe6; border-radius: 6px 6px 3px 3px; }
.lp-ramp i.lp-r-max { background: var(--pounce); }
.lp-ramplab { display: flex; gap: 8px; margin-top: 5px; }
.lp-ramplab span { flex: 1; text-align: center; font-size: 10.5px; color: var(--muted); font-weight: 600; }

/* pills and tags */
.lp-pill { display: inline-block; font: 700 11.5px/1 var(--sans); border-radius: 99px; padding: 5px 10px; }
.lp-p-neutral { background: #f0eee8; color: var(--muted); }
.lp-p-good { background: var(--good-bg); color: var(--good); }
.lp-p-wait { background: var(--warn-bg); color: var(--warn); }
.lp-p-bad { background: var(--bad-bg); color: var(--bad); }
.lp-tag { display: inline-block; font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border-radius: 99px; padding: 6px 10px; }
.lp-tag-blue { background: var(--info-bg); color: var(--blue); }
.lp-tag-orange { background: var(--pounce-soft); color: var(--pounce-deep); }
.lp-tag-green { background: var(--good-bg); color: var(--good); }
.lp-tag-plum { background: #efeaf8; color: var(--plum); }
.lp-tag-rust { background: #f8e6de; color: var(--rust); }

/* sections */
.lp-sec { padding-top: 96px; }
.lp-sechead { max-width: 720px; margin-bottom: 36px; }
.lp-sechead p { margin-top: 14px; color: var(--muted); font-size: 17px; }

/* why: contrast */
.lp-vs { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: stretch; }
.lp-vs > * { min-width: 0; }
.lp-vscol { border-radius: 24px; padding: 26px 28px; }
.lp-vs-bad { background: #f1ede4; border: 1px dashed #d9cfbd; }
.lp-vs-good { background: var(--card); box-shadow: 0 20px 50px rgba(19, 28, 44, .1); border: 1px solid var(--line); }
.lp-vsarrow { display: grid; place-items: center; font-size: 28px; color: var(--pounce); font-weight: 800; }
.lp-msg { margin: 16px 0; border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.lp-msg-bad { background: #e6e1d6; color: #6c6a63; text-decoration: line-through; text-decoration-color: rgba(193, 85, 43, .5); }
.lp-msg-good { background: var(--info-bg); color: #15365c; }
.lp-vscol ul { margin: 0; padding: 0; list-style: none; }
.lp-vscol li { padding: 6px 0 6px 26px; position: relative; font-size: 15px; }
.lp-vs-bad li { color: var(--muted); }
.lp-vs-bad li::before { content: "\00d7"; position: absolute; left: 4px; color: var(--rust); font-weight: 800; }
.lp-vs-good li::before { content: "\2713"; position: absolute; left: 3px; color: var(--good); font-weight: 800; }

/* journey */
.lp-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.lp-journey::before { content: ""; position: absolute; top: 25px; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--pounce)); }
.lp-journey li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 66px 20px 20px; box-shadow: var(--shadow); }
.lp-num { position: absolute; top: 4px; left: 20px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 700 20px/1 var(--serif); color: #fff; background: var(--navy); border: 4px solid var(--paper); }
.lp-journey li:nth-child(4) .lp-num { background: var(--pounce); color: var(--pounce-ink); }
.lp-journey p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lp-chips span { font-size: 12px; font-weight: 700; background: var(--soft); border-radius: 99px; padding: 4px 10px; }

/* bento */
.lp-bento { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.lp-bento > * { min-width: 0; }
.lp-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); }
.lp-card h3 { font: 600 24px/1.2 var(--serif); margin-top: 14px; letter-spacing: -.01em; }
.lp-card p { margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.lp-b-audit { grid-row: span 2; display: flex; flex-direction: column; }
.lp-b-audit .lp-pill { margin-top: auto; align-self: flex-start; }
.lp-b-audit .lp-tag { align-self: flex-start; }
.lp-b-audit p { margin-bottom: 16px; }
.lp-auditrow { display: flex; align-items: center; gap: 22px; margin-top: 22px; padding: 18px; background: var(--paper); border-radius: 16px; }
.lp-ring { width: 120px; height: 120px; flex: none; }
.lp-ring text { font: 600 34px var(--serif); fill: var(--ink); }
.lp-todo { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lp-todo li { padding: 5px 0 5px 28px; position: relative; font-weight: 600; }
.lp-todo li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 6px; border: 2px solid #cfc8b8; }
.lp-todo li.lp-done { color: var(--muted); font-weight: 500; }
.lp-todo li.lp-done::before { background: var(--good); border-color: var(--good); }
.lp-todo li.lp-done::after { content: "\2713"; position: absolute; left: 4px; top: 4px; color: #fff; font-size: 12px; font-weight: 800; }
.lp-voice { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.lp-voice span { font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 99px; background: var(--pounce-soft); color: #7a3a05; }
.lp-voice span.lp-off { background: #f0eee8; color: var(--muted); text-decoration: line-through; }
.lp-replies { display: grid; gap: 9px; margin-top: 16px; }
.lp-replies div { display: flex; align-items: center; gap: 10px; }
.lp-replies .lp-pill { flex: none; min-width: 86px; text-align: center; }
.lp-replies small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.lp-b-modes { grid-column: span 2; }
.lp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.lp-modes div { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--paper); }
.lp-modes b { display: block; font-size: 15px; }
.lp-modes small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.lp-modes .lp-mode-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.lp-modes .lp-mode-on small { color: var(--pounce); font-weight: 700; }

/* safety */
.lp-safe { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: #efe9dc; border-radius: 28px; padding: 48px; position: relative; overflow: hidden; }
.lp-safe::after { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; background: radial-gradient(closest-side, rgba(255, 122, 26, .2), transparent); pointer-events: none; }
.lp-safe > * { min-width: 0; position: relative; }
.lp-safecopy > p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.lp-ticks { list-style: none; margin: 22px 0 0; padding: 0; }
.lp-ticks li { position: relative; padding: 7px 0 7px 32px; font-weight: 600; }
.lp-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 7px; background: var(--good); color: #fff; font-size: 13px; display: grid; place-items: center; }
.lp-chart { background: var(--card); border-radius: 22px; padding: 28px 28px 18px; box-shadow: var(--shadow); position: relative; }
.lp-chartbars { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 22px; align-items: end; }
.lp-chartbars div { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; min-width: 0; }
.lp-chartbars b { font: 600 22px/1 var(--serif); margin-bottom: 8px; white-space: nowrap; }
.lp-chartbars i { display: block; background: linear-gradient(180deg, #4b8fd6, var(--blue)); border-radius: 10px 10px 4px 4px; }
.lp-chartbars i.lp-cap { background: linear-gradient(180deg, #ffa25e, var(--pounce)); }
.lp-chartbars span { margin-top: 8px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.lp-capline { position: absolute; left: 0; right: 0; bottom: calc(29px + 180px); border-top: 2px dashed var(--bad); }
.lp-capline span { position: absolute; left: 0; top: -20px; margin: 0; font-size: 11.5px; font-weight: 800; color: var(--bad); }
.lp-small { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* who */
.lp-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lp-who > div { min-width: 0; padding: 22px; border-top: 3px solid var(--ink); }
.lp-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 16px; margin-bottom: 16px; }
.lp-who p { margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* pricing */
.lp-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.lp-price { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.lp-price-hi { border: 2px solid var(--pounce); }
.lp-price h3 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lp-amt { font: 600 52px/1 var(--serif); margin-top: 12px; letter-spacing: -.02em; }
.lp-amt small { font: 600 15px var(--sans); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.lp-price p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.lp-price ul { list-style: none; margin: 18px 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); }
.lp-price li { padding: 5px 0 5px 26px; position: relative; font-size: 15px; font-weight: 600; }
.lp-price li::before { content: "\2713"; position: absolute; left: 2px; color: var(--good); font-weight: 800; }
.lp-price li.lp-tbc { color: var(--bad); }
.lp-price .lp-btn { margin-top: auto; }
.lp-promise { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 24px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.lp-promise span { color: var(--ink); }

/* pilot form */
.lp-pilot { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; background: var(--card); border: 2px dashed #d9cfbd; border-radius: 28px; padding: 48px; }
.lp-pilot > * { min-width: 0; }
.lp-pilotcopy > p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.lp-form { display: flex; flex-direction: column; background: var(--paper); border-radius: 20px; padding: 26px; }
.lp-form label { font-size: 13.5px; font-weight: 700; margin: 12px 0 6px; }
.lp-form label:first-child { margin-top: 0; }
.lp-form label small { font-weight: 500; color: var(--muted); }
.lp-form input { font: 15px var(--sans); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.lp-form input:focus { outline: 2px solid var(--pounce); outline-offset: 1px; border-color: transparent; }
.lp-form button { margin-top: 20px; }
.lp-form button[disabled] { opacity: .7; cursor: default; transform: none; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp-formmsg:empty { display: none; }
.lp-formmsg { margin-top: 12px; border-radius: 12px; padding: 12px 14px; font-size: 14.5px; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.lp-formmsg.lp-ok { background: var(--good-bg); color: var(--good); }
.lp-formmsg.lp-err { background: var(--bad-bg); color: var(--bad); }
.lp-formmsg.lp-busy { background: var(--soft); color: var(--muted); }
.lp-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lp-spin .8s linear infinite; margin-top: 2px; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

.lp-next { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: n; }
.lp-next li { counter-increment: n; display: flex; gap: 12px; align-items: center; background: var(--paper); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.lp-next li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 14px var(--serif); }
.lp-next b { display: block; font-size: 14.5px; }
.lp-next small { color: var(--muted); font-size: 13px; }

/* footer */
.lp-foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 28px 0 40px; }
.lp-footin { display: flex; align-items: center; gap: 24px; font-size: 13.5px; color: var(--muted); }
.lp-footin .lp-btn { margin-left: auto; }

:focus-visible { outline: 2px solid var(--pounce); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* tablet */
@media (max-width: 1080px) {
  .lp-herogrid { grid-template-columns: 1fr; }
  .lp-herovis { max-width: 560px; }
  .lp-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-journey::before { display: none; }
  .lp-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-bento { grid-template-columns: 1fr 1fr; }
  .lp-b-audit { grid-row: auto; grid-column: span 2; }
}

/* phone */
@media (max-width: 720px) {
  .lp-wrap { padding: 0 16px; }
  .lp-nav, .lp-hide-s { display: none; }
  .lp-topin { height: 58px; }
  h2 { font-size: 30px; }
  .lp-hero { padding: 44px 0 48px; }
  .lp-hero h1 { font-size: 38px; }
  .lp-lede { font-size: 16.5px; }
  .lp-ctas .lp-btn { width: 100%; }
  .lp-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -16px; padding-right: 16px; }
  .lp-tile { flex: 0 0 62%; scroll-snap-align: start; }
  .lp-herovis { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .lp-mock { position: static; width: auto; transform: none; }
  .lp-m3 { display: none; }
  .lp-sec { padding-top: 64px; }
  .lp-sechead p { font-size: 16px; }
  .lp-vs { grid-template-columns: minmax(0, 1fr); }
  .lp-vsarrow { transform: rotate(90deg); height: 44px; }
  .lp-vscol { padding: 22px 20px; }
  .lp-journey, .lp-who, .lp-prices, .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-b-audit, .lp-b-modes { grid-column: auto; }
  .lp-b-modes { display: block; }
  .lp-modes { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
  .lp-auditrow { flex-direction: column; align-items: flex-start; }
  .lp-safe, .lp-pilot { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 28px; border-radius: 22px; }
  .lp-chart { padding: 22px 16px 14px; }
  .lp-chartbars { gap: 10px; }
  .lp-chartbars b { font-size: 17px; }
  .lp-form { padding: 18px; }
  .lp-form button { width: 100%; }
  .lp-promise { justify-content: flex-start; flex-direction: column; }
  .lp-footin { flex-wrap: wrap; gap: 12px; }
  .lp-footin .lp-btn { margin-left: 0; }
}

/* comparison strip: what the same job costs elsewhere */
.lp-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 28px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--card); }
.lp-compare > div { min-width: 0; padding: 22px 24px; border-right: 1px solid var(--line); }
.lp-compare > div:last-child { border-right: 0; background: var(--navy); color: #fff; }
.lp-compare small { display: block; font: 800 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lp-compare > div:last-child small { color: var(--pounce); }
.lp-compare b { display: block; font: 600 30px/1.1 var(--serif); margin-top: 10px; }
.lp-compare p { margin-top: 8px; font-size: 14px; color: var(--muted); }
.lp-compare > div:last-child p { color: #c9d4e4; }
.lp-src { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* plan feature lists */
.lp-price .lp-plus { font-size: 13px; font-weight: 800; color: var(--muted); padding-left: 0; letter-spacing: .02em; }
.lp-price .lp-plus::before { content: none; }
.lp-price .lp-later { color: var(--muted); font-weight: 500; }
.lp-price .lp-later::before { content: "\2026"; color: var(--muted); }
.lp-founding { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--pounce-deep); background: var(--pounce-soft); border-radius: 99px; padding: 4px 10px; align-self: flex-start; }

/* FAQ: plain questions and answers in the HTML (the first few open), so readers and answer engines get the text */
.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; }
.lp-faq details { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.lp-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--pounce-deep); font-weight: 800; }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq p { margin-top: 10px; color: var(--muted); font-size: 15px; }
.lp-ico-s { flex: none; font-weight: 800; }

@media (max-width: 720px) {
  .lp-compare, .lp-faq { grid-template-columns: minmax(0, 1fr); }
  .lp-compare > div { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* plan point help: a small "?" that opens a plain-English bubble on hover, tap or keyboard focus */
.lp-price li { display: flex; align-items: flex-start; gap: 6px; }
.lp-price li > span:first-child { flex: 1; min-width: 0; }
.lp-q { position: relative; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid #cfc8b8; background: var(--paper); color: var(--muted); font: 800 11px/1 var(--sans); display: grid; place-items: center; cursor: help; padding: 0; }
.lp-q:hover, .lp-q:focus-visible, .lp-q:focus { border-color: var(--pounce); color: var(--pounce-deep); outline: none; }
.lp-tip { position: absolute; z-index: 20; right: -8px; bottom: calc(100% + 10px); width: 260px; padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #e9eef6; font: 500 13.5px/1.5 var(--sans); text-align: left; box-shadow: 0 14px 34px rgba(11, 29, 54, .3); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.lp-tip::after { content: ""; position: absolute; right: 12px; top: 100%; border: 7px solid transparent; border-top-color: var(--navy); }
.lp-q:hover .lp-tip, .lp-q:focus .lp-tip { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 720px) { .lp-tip { width: min(260px, calc(100vw - 64px)); } }

/* ---------- LinkedIn "in" tile (house pattern: glyph on brand colour, never the real logo file) ---------- */
.lp-li { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 4px; background: #0a66c2; color: #fff; font: 800 11px/1 var(--sans); letter-spacing: -.03em; text-transform: none; }
.lp-li-lg { width: 22px; height: 22px; font-size: 13px; border-radius: 5px; }
.lp-dmhead { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }

/* ---------- FACTORY ---------- */
.lp-fx-panel { position: relative; background: #efe9dc; border-radius: 28px; padding: 28px 28px 20px; overflow: hidden; }
.lp-fx-ex { position: absolute; top: 18px; right: 20px; z-index: 3; }
.lp-fx-lab { display: block; font: 800 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.lp-fx-sh { font: 600 20px/1.2 var(--serif); margin: 0 0 14px; display: flex; gap: 10px; align-items: center; }
.lp-fx-sh span { width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 14px var(--serif); flex: none; }

/* scenes: storyboard by default (no JS / reduced motion), one stage when live */
.lp-fx-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; position: relative; }
.lp-fx-scene { min-width: 0; background: var(--card); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); }
.lp-fx-live .lp-fx-scenes { display: block; height: 330px; }
.lp-fx-live .lp-fx-scene { position: absolute; inset: 0; background: none; box-shadow: none; padding: 8px 4px 0; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .45s, transform .45s, visibility .45s; }
.lp-fx-live .lp-fx-scene.on { opacity: 1; visibility: visible; transform: none; }
.lp-fx-live .lp-fx-sh { display: none; }
.lp-fx-scene > div { display: flex; align-items: center; justify-content: center; gap: 22px; height: 100%; }


/* 1 setup */
.lp-fx-src { width: 300px; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px rgba(19,28,44,.1); padding: 12px 14px 14px; }
.lp-fx-browser { display: flex; align-items: center; gap: 5px; background: var(--soft); border-radius: 10px; padding: 7px 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.lp-fx-browser i { width: 8px; height: 8px; border-radius: 50%; background: #d6cfbf; }
.lp-fx-browser span { margin-left: 6px; }
.lp-fx-lines { padding: 12px 2px 6px; display: grid; gap: 7px; }
.lp-fx-lines b { display: block; height: 8px; border-radius: 4px; background: #e9e4d8; }
.lp-fx-post-s { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 10px; border-radius: 10px; background: var(--info-bg); font-size: 13px; font-weight: 700; color: #1d3f66; }
.lp-fx-arrow { font-size: 30px; color: var(--pounce); font-weight: 800; }
.lp-fx-out { display: grid; gap: 10px; width: 330px; max-width: 100%; }
.lp-fx-chip { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 14px; box-shadow: 0 10px 24px rgba(19,28,44,.07); }
.lp-fx-chip small { display: block; font: 800 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pounce-deep); margin-bottom: 6px; }
.lp-fx-sw { display: inline-block; width: 22px; height: 22px; border-radius: 7px; margin-right: 6px; border: 1px solid var(--line); vertical-align: middle; }

/* 2 find */
.lp-fx-s2 { position: relative; }
.lp-fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 720px; max-width: 100%; }
.lp-fx-pc { position: relative; display: flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 8px 20px rgba(19,28,44,.06); min-width: 0; }
.lp-fx-pc > div { min-width: 0; flex: 1; }
.lp-fx-pc b { display: block; font-size: 13.5px; }
.lp-fx-pc small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-fx-pc em { position: absolute; top: -9px; right: 10px; font: 800 10.5px/1 var(--sans); font-style: normal; border-radius: 99px; padding: 4px 8px; }
.lp-fx-pc.lp-fit em { background: var(--good-bg); color: var(--good); }
.lp-fx-pc.lp-nofit { opacity: .55; }
.lp-fx-pc.lp-nofit em { background: #f0eee8; color: var(--muted); }
.lp-fx-lens { display: none; }

/* 3 read */
.lp-fx-post, .lp-fx-invite, .lp-fx-compose, .lp-fx-thread, .lp-fx-review { width: 400px; max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 40px rgba(19,28,44,.1); padding: 16px 18px; }
.lp-fx-ph { display: flex; align-items: center; gap: 10px; }
.lp-fx-ph > div { flex: 1; min-width: 0; }
.lp-fx-ph b { display: block; font-size: 14px; }
.lp-fx-ph small { display: block; font-size: 12px; color: var(--muted); }
.lp-fx-post p { margin: 12px 0 10px; font-size: 14.5px; line-height: 1.55; }
.lp-fx-post mark { background: linear-gradient(#ffe2c4, #ffe2c4) no-repeat 0 0 / 100% 100%; color: inherit; border-radius: 4px; padding: 0 2px; }
.lp-fx-react { display: flex; align-items: center; gap: 0; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px; }
.lp-fx-react i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card); margin-right: -5px; }
.lp-fx-react span { margin-left: 10px; }
.lp-fx-verdict { width: 300px; max-width: 100%; position: relative; }
.lp-fx-score { font: 600 64px/1 var(--serif); color: var(--good); }
.lp-fx-score span { font-size: 22px; color: var(--muted); }
.lp-fx-verdict > p { margin-top: 8px; font-size: 14px; }
.lp-fx-park { margin-top: 16px; display: inline-block; font-size: 12.5px; font-weight: 700; background: #f0eee8; color: var(--muted); border-radius: 10px; padding: 7px 10px; }
.lp-fx-bin { margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); border: 2px dashed #e3c48a; border-radius: 10px; padding: 8px 10px; text-align: center; width: 230px; }

/* 4 write */
.lp-fx-ch { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.lp-fx-compose p { margin-top: 12px; font-size: 15px; line-height: 1.55; min-height: 96px; }
.lp-fx-compose p.lp-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; background: var(--blue); vertical-align: -2px; margin-left: 1px; animation: lp-caret .8s steps(1) infinite; }
.lp-fx-stamps { display: grid; gap: 10px; }
.lp-fx-stamps span { font-weight: 800; font-size: 14px; color: var(--good); background: var(--good-bg); border: 2px solid #b9dfc6; border-radius: 12px; padding: 9px 14px; transform: rotate(-2deg); }
.lp-fx-stamps span:nth-child(2) { transform: rotate(1.5deg); }

/* 5 approve */
.lp-fx-review { position: relative; }
.lp-fx-review p { margin-top: 10px; font-size: 14px; color: var(--muted); }
.lp-fx-stamp { position: absolute; right: 18px; bottom: 14px; font: 800 22px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--good); border: 4px solid var(--good); border-radius: 10px; padding: 6px 12px; transform: rotate(-10deg); background: rgba(229, 244, 234, .85); }
.lp-fx-modes { width: 330px; max-width: 100%; }
.lp-fx-modes p { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.lp-fx-toggle { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.lp-fx-toggle span { position: relative; z-index: 1; text-align: center; font-size: 12.5px; font-weight: 800; padding: 9px 4px; border-radius: 10px; color: var(--ink); }
.lp-fx-toggle i { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 10px; background: var(--pounce-soft); border: 2px solid var(--pounce); }

/* 6 send */
.lp-fx-invite { position: relative; }
.lp-fx-connect { position: relative; margin-top: 14px; height: 38px; }
.lp-fx-connect span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 99px; font-weight: 800; font-size: 14px; }
.lp-fx-c1 { border: 2px solid var(--blue); color: var(--blue); }
.lp-fx-c2 { background: var(--good-bg); color: var(--good); opacity: 0; }
.lp-fx-plane { position: absolute; right: 18px; top: 14px; opacity: 0; }
.lp-fx-gauge { width: 300px; max-width: 100%; }
.lp-fx-gnum { font-size: 15px; font-weight: 700; }
.lp-fx-gnum b { font: 600 44px/1 var(--serif); }
.lp-fx-gbar { margin-top: 10px; height: 14px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.lp-fx-gbar i { display: block; height: 100%; width: 80%; border-radius: 99px; background: linear-gradient(90deg, var(--blue), #4b8fd6); }
.lp-fx-gauge p { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* 7 reply and goal */
.lp-fx-b { margin-top: 12px; max-width: 85%; padding: 10px 14px; font-size: 14px; line-height: 1.45; border-radius: 16px; }
.lp-fx-them { background: var(--soft); border-bottom-left-radius: 4px; }
.lp-fx-you { margin-left: auto; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.lp-fx-goal { position: relative; width: 320px; max-width: 100%; }
.lp-fx-days, .lp-fx-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lp-fx-days span { text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.lp-fx-slots { margin-top: 6px; }
.lp-fx-slots i { height: 92px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); font-style: normal; }
.lp-fx-slots i.lp-fx-booked { display: grid; place-items: center; text-align: center; background: var(--pounce); border-color: var(--pounce); color: var(--pounce-ink); font-size: 12px; font-weight: 800; line-height: 1.3; }
.lp-fx-win { background: var(--good-bg); border-radius: 16px; padding: 18px; }
.lp-fx-win b { display: block; font: 600 26px/1.2 var(--serif); color: var(--good); }
.lp-fx-win span { font-size: 14px; color: var(--ink); }
.lp-fx-confetti { position: absolute; inset: 0; pointer-events: none; }
.lp-fx-confetti i { position: absolute; left: 50%; top: 40%; width: 8px; height: 12px; border-radius: 2px; opacity: 0; }
.lp-fx-confetti i:nth-child(odd) { background: var(--pounce); } .lp-fx-confetti i:nth-child(even) { background: var(--blue); } .lp-fx-confetti i:nth-child(3n) { background: #6dae4f; }
/* goal variants: one shows at a time (the storyboard shows the meeting) */
.lp-g-signup, .lp-g-click { display: none !important; }
.lp-fx-panel[data-goal="signup"] .lp-g-meeting, .lp-fx-panel[data-goal="click"] .lp-g-meeting { display: none !important; }
.lp-fx-panel[data-goal="signup"] .lp-g-signup, .lp-fx-panel[data-goal="click"] .lp-g-click { display: block !important; }
.lp-fx-panel[data-goal="signup"] small .lp-g-signup, .lp-fx-panel[data-goal="click"] small .lp-g-click, .lp-fx-panel[data-goal="signup"] .lp-fx-you .lp-g-signup, .lp-fx-panel[data-goal="click"] .lp-fx-you .lp-g-click { display: inline !important; }
.lp-fx-cal.lp-g-meeting { display: block; }

/* the line */
.lp-fx-line { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-bottom: 48px; }
.lp-fx-st { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; border-radius: 18px; padding: 10px 4px 0; transition: background .3s; }
.lp-fx-pp { width: 66px; height: 82px; display: block; transform-origin: 50% 100%; }
.lp-fx-desk { width: 92px; height: 34px; margin-top: -14px; border-radius: 10px; background: var(--navy); display: grid; place-items: center; position: relative; z-index: 1; box-shadow: 0 6px 14px rgba(11, 29, 54, .2); transition: background .3s; }
.lp-fx-desk svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-fx-st b { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.lp-fx-you-st .lp-fx-desk { background: var(--pounce-deep); }
.lp-fx-st.on { background: rgba(255, 255, 255, .55); }
.lp-fx-st.on .lp-fx-desk { background: var(--pounce); }
.lp-fx-st.on b { color: var(--ink); }
.lp-fx-belt { position: absolute; left: 0; right: 0; bottom: 6px; height: 22px; border-radius: 99px; background: repeating-linear-gradient(90deg, #1b3150 0 18px, #0b1d36 18px 36px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.lp-fx-token { position: absolute; left: 0; bottom: 8px; display: flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 5px 8px 5px 5px; box-shadow: 0 8px 18px rgba(11,29,54,.25); transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.lp-fx-token .lp-av { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.lp-fx-tk { font: 800 11px/1 var(--sans); font-style: normal; color: var(--good); }
.lp-fx-tk:empty { display: none; }

/* control bar */
.lp-fx-bar { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.lp-fx-play { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--navy); cursor: pointer; display: grid; place-items: center; }
.lp-fx-pause-i { width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.lp-fx-play.paused .lp-fx-pause-i { width: 0; height: 0; border: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.lp-fx-cap { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.lp-fx-dots { display: flex; gap: 6px; flex: none; }
.lp-fx-dots button { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); font: 800 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.lp-fx-dots button[aria-current="step"] { background: var(--pounce); border-color: var(--pounce); color: var(--pounce-ink); }
.lp-fx:not(.lp-fx-live) .lp-fx-bar { display: none; }

/* motion, only while live and only in the active scene (.run restarts each time a scene opens) */
@keyframes lp-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lp-caret { 50% { opacity: 0; } }
@keyframes lp-bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-5px) rotate(-3deg); } 75% { transform: translateY(-2px) rotate(3deg); } }
@keyframes lp-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.025); } }
@keyframes lp-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes lp-lens { 0% { transform: translate(40px, 20px); } 30% { transform: translate(300px, 30px); } 60% { transform: translate(540px, 110px); } 100% { transform: translate(110px, 110px); } }
@keyframes lp-sweep { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
@keyframes lp-park { 0% { opacity: 0; transform: translateY(-14px); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(20px, 40px) rotate(14deg) scale(.7); } }
@keyframes lp-stamp { 0% { opacity: 0; transform: rotate(-10deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-10deg) scale(.92); } 100% { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes lp-slide3 { 0%, 30% { transform: translateX(0); } 45%, 65% { transform: translateX(100%); } 80%, 100% { transform: translateX(200%); } }
@keyframes lp-fly { 0% { opacity: 0; transform: translate(-30px, 20px) rotate(-10deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(80px, -60px) rotate(10deg); } }
@keyframes lp-fade-out { to { opacity: 0; } }
@keyframes lp-dim { to { opacity: .4; filter: grayscale(1); } }
@keyframes lp-fade-in { to { opacity: 1; } }
@keyframes lp-grow { from { width: 60%; } to { width: 80%; } }
@keyframes lp-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(260deg); } }
@keyframes lp-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, .55); } 100% { box-shadow: 0 0 0 14px rgba(255, 122, 26, 0); } }

.lp-fx-live .lp-fx-pp { animation: lp-breathe 3.2s ease-in-out infinite; }
.lp-fx-live .lp-fx-eyes { transform-box: fill-box; transform-origin: center; animation: lp-blink 4.5s infinite; }
.lp-fx-live .lp-fx-st:nth-child(2n) .lp-fx-eyes { animation-delay: 1.7s; }
.lp-fx-live .lp-fx-st.on .lp-fx-pp { animation: lp-bob .9s ease-in-out infinite; }
.lp-fx-live .run .lp-d1 { animation: lp-pop .45s .5s both; }
.lp-fx-live .run .lp-d2 { animation: lp-pop .45s 1.2s both; }
.lp-fx-live .run .lp-d3 { animation: lp-pop .45s 1.9s both; }
.lp-fx-live .run .lp-fx-src { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-pc { animation: lp-pop .35s both; }
.lp-fx-live .run .lp-fx-pc:nth-child(2) { animation-delay: .1s; } .lp-fx-live .run .lp-fx-pc:nth-child(3) { animation-delay: .2s; } .lp-fx-live .run .lp-fx-pc:nth-child(4) { animation-delay: .3s; } .lp-fx-live .run .lp-fx-pc:nth-child(5) { animation-delay: .4s; } .lp-fx-live .run .lp-fx-pc:nth-child(6) { animation-delay: .5s; }
.lp-fx-live .run .lp-fx-pc em { animation: lp-pop .35s 2.2s both; }
.lp-fx-live .run .lp-fx-pc.lp-nofit { animation: lp-pop .35s both, lp-dim .5s 2.4s forwards; }
.lp-fx-live .lp-fx-pc.lp-nofit { opacity: 1; }
.lp-fx-live .lp-fx-lens { display: block; position: absolute; left: 0; top: 0; width: 74px; height: 74px; border-radius: 50%; border: 6px solid var(--navy); background: rgba(255, 255, 255, .25); box-shadow: 0 10px 24px rgba(11,29,54,.25); pointer-events: none; }
.lp-fx-live .lp-fx-lens::after { content: ""; position: absolute; width: 34px; height: 8px; border-radius: 4px; background: var(--navy); right: -30px; bottom: -8px; transform: rotate(45deg); }
.lp-fx-live .run .lp-fx-lens { animation: lp-lens 2.4s ease-in-out both; }
.lp-fx-live .run .lp-fx-post { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-post mark { animation: lp-sweep 1s .9s both; }
.lp-fx-live .run .lp-fx-verdict { animation: lp-pop .45s 1.6s both; }
.lp-fx-live .run .lp-fx-park { animation: lp-park 2.2s 2.6s both; }
.lp-fx-live .run .lp-fx-bin { animation: lp-pop .4s 2.4s both; }
.lp-fx-live .run .lp-fx-compose { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-stamps .lp-d1 { animation-delay: 3.4s; } .lp-fx-live .run .lp-fx-stamps .lp-d2 { animation-delay: 3.8s; } .lp-fx-live .run .lp-fx-stamps .lp-d3 { animation-delay: 4.2s; }
.lp-fx-live .run .lp-fx-review { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-stamp { animation: lp-stamp .5s 1s both; }
.lp-fx-live .run .lp-fx-toggle i { animation: lp-slide3 4s 1.4s both; }
.lp-fx-live .run .lp-fx-invite { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-c1 { animation: lp-fade-out .3s 1.2s forwards; }
.lp-fx-live .run .lp-fx-c2 { animation: lp-fade-in .3s 1.2s forwards; }
.lp-fx-live .run .lp-fx-plane { animation: lp-fly 1.2s 1.1s both; }
.lp-fx-live .run .lp-fx-gauge { animation: lp-pop .45s .3s both; }
.lp-fx-live .run .lp-fx-gbar i { animation: lp-grow .8s 1.5s both; }
.lp-fx-live .run .lp-fx-thread { animation: lp-pop .45s both; }
.lp-fx-live .run .lp-fx-them { animation: lp-pop .4s .6s both; }
.lp-fx-live .run .lp-fx-you { animation: lp-pop .4s 1.6s both; }
.lp-fx-live .run .lp-fx-goal { animation: lp-pop .45s 2.3s both; }
.lp-fx-live .run .lp-fx-booked, .lp-fx-live .run .lp-fx-win { animation: lp-pop .45s 3s both, lp-ping 1.2s 3.3s 2; }
.lp-fx-live .run .lp-fx-confetti i { animation: lp-confetti 1.3s 3.2s ease-out both; }
.lp-fx-confetti i:nth-child(1) { --dx: -120px; --dy: -90px; } .lp-fx-confetti i:nth-child(2) { --dx: 110px; --dy: -100px; } .lp-fx-confetti i:nth-child(3) { --dx: -60px; --dy: -130px; } .lp-fx-confetti i:nth-child(4) { --dx: 70px; --dy: -140px; }
.lp-fx-confetti i:nth-child(5) { --dx: -140px; --dy: -20px; } .lp-fx-confetti i:nth-child(6) { --dx: 150px; --dy: -30px; } .lp-fx-confetti i:nth-child(7) { --dx: -20px; --dy: -150px; } .lp-fx-confetti i:nth-child(8) { --dx: 30px; --dy: -110px; }

/* ---------- reveal on scroll (first view only; html.js set inline in <head>) ---------- */
html.js [data-anim] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js [data-anim].is-in { opacity: 1; transform: none; }
html.js .lp-journey li[data-anim]:nth-child(2) { transition-delay: .12s; } html.js .lp-journey li[data-anim]:nth-child(3) { transition-delay: .24s; } html.js .lp-journey li[data-anim]:nth-child(4) { transition-delay: .36s; }
html.js .lp-ring .lp-ring-arc { stroke-dashoffset: 314; transition: stroke-dashoffset 1.4s .3s ease-out; }
html.js .is-in .lp-ring .lp-ring-arc { stroke-dashoffset: 110; }
html.js .lp-voice span { opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s; }
html.js .is-in .lp-voice span { opacity: 1; transform: none; }
html.js .is-in .lp-voice span:nth-child(2) { transition-delay: .12s; } html.js .is-in .lp-voice span:nth-child(3) { transition-delay: .24s; } html.js .is-in .lp-voice span:nth-child(4) { transition-delay: .36s; } html.js .is-in .lp-voice span:nth-child(5) { transition-delay: .48s; }
html.js .lp-replies > div { opacity: 0; transform: translateX(-14px); transition: opacity .4s, transform .4s; }
html.js .is-in .lp-replies > div { opacity: 1; transform: none; }
html.js .is-in .lp-replies > div:nth-child(2) { transition-delay: .2s; } html.js .is-in .lp-replies > div:nth-child(3) { transition-delay: .4s; }
html.js .lp-chartbars i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
html.js .is-in .lp-chartbars i { transform: none; }
html.js .is-in .lp-chartbars div:nth-child(2) i { transition-delay: .15s; } html.js .is-in .lp-chartbars div:nth-child(3) i { transition-delay: .3s; } html.js .is-in .lp-chartbars div:nth-child(4) i { transition-delay: .45s; }
html.js .lp-capline { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s .8s ease-out; }
html.js .is-in .lp-capline { transform: none; }
/* hero: checks pop in, the reply card lands with a ping */
html.js .lp-m1 .lp-checks span { animation: lp-pop .4s both; }
html.js .lp-m1 .lp-checks span:nth-child(1) { animation-delay: 1.1s; } html.js .lp-m1 .lp-checks span:nth-child(2) { animation-delay: 1.35s; } html.js .lp-m1 .lp-checks span:nth-child(3) { animation-delay: 1.6s; }
html.js .lp-m1 .lp-reason { animation: lp-pop .45s .6s both; }
html.js .lp-m2 { animation: lp-pop .6s 2.1s both; }
.lp-newdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pounce); margin-left: 8px; animation: lp-ping 1.4s 2.6s 3; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-anim], html.js .lp-voice span, html.js .lp-replies > div { opacity: 1 !important; transform: none !important; }
  html.js .lp-chartbars i, html.js .lp-capline { transform: none !important; }
  html.js .lp-ring .lp-ring-arc { stroke-dashoffset: 110 !important; }
}

/* factory on tablets and phones: the stage stays, the line shrinks to a row of faces */
@media (max-width: 1080px) {
  .lp-fx-pp { width: 52px; height: 64px; }
  .lp-fx-desk { width: 70px; }
  .lp-fx-st b { font-size: 11px; }
}
@media (max-width: 720px) {
  .lp-fx-panel { padding: 18px 14px 14px; border-radius: 22px; }
  .lp-fx-ex { top: 12px; right: 12px; }
  .lp-fx-scenes { grid-template-columns: minmax(0, 1fr); }
  .lp-fx-live .lp-fx-scenes { height: 560px; }
  .lp-fx-scene > div { flex-direction: column; gap: 14px; justify-content: flex-start; padding-top: 30px; }
  .lp-fx-arrow { transform: rotate(90deg); line-height: 1; }
  .lp-fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lp-fx-pc { padding: 10px; gap: 8px; }
  .lp-fx-pc .lp-li { display: none; }
  .lp-fx-pc .lp-av { width: 30px; height: 30px; font-size: 11px; }
  .lp-fx-pc b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lp-fx-pc small { white-space: normal; line-height: 1.3; }
  .lp-fx-live .run .lp-fx-lens { animation: none; display: none; }
  .lp-fx-score { font-size: 48px; }
  .lp-fx-bin { width: auto; }
  .lp-fx-line { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding-bottom: 40px; margin-top: 10px; }
  .lp-fx-pp { width: 38px; height: 48px; }
  .lp-fx-desk { width: 40px; height: 22px; margin-top: -10px; border-radius: 7px; }
  .lp-fx-desk svg { width: 13px; height: 13px; }
  .lp-fx-st { padding: 6px 0 0; border-radius: 12px; }
  .lp-fx-st b { display: none; }
  .lp-fx-token { padding: 3px; gap: 3px; }
  .lp-fx-token .lp-li, .lp-fx-tk { display: none; }
  .lp-fx-belt { height: 16px; }
  .lp-fx-bar { flex-wrap: wrap; gap: 10px; }
  .lp-fx-cap { order: 3; flex-basis: 100%; font-size: 14.5px; }
  .lp-fx-dots { margin-left: auto; gap: 4px; }
  .lp-fx-dots button { width: 28px; height: 28px; }
  .lp-fx-goal, .lp-fx-verdict, .lp-fx-gauge, .lp-fx-modes, .lp-fx-out { width: 100%; }
}

/* ---------- SEO pages (guides, alternatives, pricing): built by scripts/build-pages.js ---------- */
.lp-art-hero { position: relative; overflow: hidden; color: #fff; padding: 46px 0 52px; background: radial-gradient(520px 320px at 90% 0%, rgba(255, 122, 26, .2), transparent 70%), linear-gradient(160deg, #0b1d36, #0e2442 60%, #0a1830); }
.lp-art-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px; pointer-events: none; }
.lp-art-wrap { position: relative; max-width: 860px; }
.lp-art-hero h1 { font: 600 44px/1.1 var(--serif); letter-spacing: -.02em; margin: 0; }
.lp-art-hero .lp-lede { margin-top: 14px; font-size: 18px; }
.lp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #9fb0c8; margin-bottom: 18px; }
.lp-crumbs a { color: #c9d4e4; text-decoration: none; } .lp-crumbs a:hover { color: #fff; }
.lp-art-meta { margin-top: 16px; font-size: 13.5px; color: #9fb0c8; }
.lp-art { padding-top: 34px; font-size: 17px; line-height: 1.7; }
.lp-qa { background: var(--card); border: 2px solid var(--pounce); border-radius: 18px; padding: 18px 22px; box-shadow: 0 14px 30px rgba(255, 122, 26, .1); }
.lp-qa b { display: block; font: 800 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pounce-deep); margin-bottom: 8px; }
.lp-qa p { font-size: 17px; font-weight: 600; line-height: 1.55; }
.lp-toc { margin-top: 22px; background: var(--soft); border-radius: 16px; padding: 16px 22px; }
.lp-toc b { font-size: 14px; }
.lp-toc ol { margin: 8px 0 0; padding-left: 20px; font-size: 15px; }
.lp-toc a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .lp-toc a:hover { border-color: var(--pounce); }
.lp-art-sec { margin-top: 38px; scroll-margin-top: 80px; }
.lp-art-sec h2 { font: 600 30px/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 12px; }
.lp-art-sec h3 { font-size: 19px; margin: 22px 0 6px; }
.lp-art-sec p { margin: 0 0 14px; }
.lp-art-sec ul, .lp-art-sec ol { margin: 0 0 14px; padding-left: 22px; } .lp-art-sec li { margin: 4px 0; }
.lp-art-sec a { color: var(--blue); }
.lp-art-sec blockquote { margin: 16px 0; padding: 12px 18px; border-left: 4px solid var(--pounce); background: var(--card); border-radius: 0 12px 12px 0; font-style: italic; }
.lp-art-sec table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 15px; background: var(--card); border-radius: 14px; overflow: hidden; display: block; overflow-x: auto; }
.lp-art-sec th, .lp-art-sec td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.lp-art-sec th { background: var(--soft); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.lp-art-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.lp-art-faq summary { cursor: pointer; font-weight: 700; }
.lp-art-faq p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.lp-art-cta { margin-top: 42px; text-align: center; background: var(--card); border: 2px dashed #d9cfbd; border-radius: 24px; padding: 30px 24px; }
.lp-art-cta h2 { font: 600 28px/1.2 var(--serif); margin: 0; }
.lp-art-cta p { margin: 8px 0 18px; color: var(--muted); }
.lp-art-small { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.lp-art-src { margin-top: 36px; font-size: 14px; } .lp-art-src h2 { font: 600 20px var(--serif); } .lp-art-src ol { padding-left: 20px; } .lp-art-src a { color: var(--muted); }
.lp-art-rel { margin-top: 36px; } .lp-art-rel h2 { font: 600 22px var(--serif); }
.lp-art-relgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.lp-art-relgrid a { min-width: 0; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s; }
.lp-art-relgrid a:hover { transform: translateY(-2px); }
.lp-art-relgrid b { font: 600 17px/1.3 var(--serif); } .lp-art-relgrid span { font-size: 14px; color: var(--muted); line-height: 1.5; } .lp-art-relgrid em { font-size: 12px; color: var(--muted); font-style: normal; }
.lp-hubgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-footcols { flex-wrap: wrap; } .lp-footnav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .lp-footnav a { color: var(--muted); text-decoration: none; font-weight: 600; } .lp-footnav a:hover { color: var(--ink); }
@media (max-width: 720px) {
  .lp-art-hero { padding: 30px 0 36px; } .lp-art-hero h1 { font-size: 31px; }
  .lp-art { font-size: 16.5px; } .lp-art-sec h2 { font-size: 25px; }
  .lp-art-relgrid, .lp-hubgrid { grid-template-columns: minmax(0, 1fr); }
}