/* ============================================================
   LeadFlow — Landing page styles
   Builds on brand.css (tokens + components). lp- = landing only.
   ============================================================ */

:root {
  --fb: #1877F2;          /* Facebook channel */
  --web: #5A6B86;         /* Website chat channel */
  --maxw: 1160px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
body { background: var(--cream); overflow-x: hidden; }

.lp-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
section { position: relative; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--coral-deep); background: var(--coral-bg);
  padding: 7px 14px; border-radius: var(--r-pill);
}
.lp-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: lpPulseDot 2.2s ease-in-out infinite; }
@keyframes lpPulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(224,122,99,.5);} 50% { box-shadow: 0 0 0 6px rgba(224,122,99,0);} }

.lp-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
h2.lp-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 0; max-width: 20ch; }
h2.lp-h.center { margin-left: auto; margin-right: auto; text-align: center; }
p.lp-sub { font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--ink-soft); max-width: 56ch; margin: 16px 0 0; }
p.lp-sub.center { margin-left: auto; margin-right: auto; text-align: center; }
.lp-sec-head { margin-bottom: 44px; }
.lp-sec-head.center { text-align: center; display: flex; flex-direction: column; align-items: center; }

/* ---------- Nav ---------- */
.lnav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,241,234,0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s;
}
.lnav.scrolled { border-color: var(--border-soft); box-shadow: 0 8px 24px -22px rgba(39,49,60,.5); }
.lnav .inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 14px; }
.lnav .brand { display: flex; align-items: center; gap: 10px; }
.lnav .brand img { width: 30px; height: 30px; object-fit: contain; }
.lnav .brand .wm { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); }
.lnav .links { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.lnav .links a { font-size: 14.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color .15s; }
.lnav .links a:hover { color: var(--ink); }
.lnav .nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 880px) { .lnav .links a { display: none; } }

/* ---------- Hero ---------- */
.hero-sec {
  padding: 64px 0 72px;
  background:
    radial-gradient(80% 60% at 78% 8%, rgba(251,232,225,0.55) 0%, rgba(251,232,225,0) 60%),
    radial-gradient(70% 50% at 12% 30%, rgba(233,237,242,0.5) 0%, rgba(233,237,242,0) 55%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: 56px; align-items: center; }
.hero-copy h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); margin: 20px 0 0; max-width: 14ch; }
.hero-copy h1 em { font-style: normal; color: var(--coral-deep); }
.hero-copy .sub { font-size: 18.5px; line-height: 1.6; font-weight: 500; color: var(--ink-soft); max-width: 50ch; margin: 22px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.hero-trust .item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.hero-trust .item svg { flex-shrink: 0; }

.btn-lg { height: 56px; padding: 0 30px; font-size: 16px; border-radius: 15px; }
.btn-ghost.btn-lg { border-color: var(--border); }
.btn-ghost:hover { border-color: var(--coral); color: var(--coral-deep); }

/* channel chip */
.ch-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 12px 6px 8px; }
.ch-ico { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* hero before/after visual */
.hero-visual { position: relative; }
.ba {
  background: #fff; border: 1px solid var(--border); border-radius: 24px;
  box-shadow: 0 40px 90px -50px rgba(39,49,60,.45); padding: 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch;
}
.ba-col { border-radius: 16px; padding: 14px; min-height: 300px; }
.ba-col.before { background: var(--card-soft); border: 1px solid var(--border-soft); position: relative; overflow: hidden; }
.ba-col.after { background: linear-gradient(180deg, #FCFAF5, #F6F2EA); border: 1px solid var(--coral-bg); }
.ba-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.ba-col.after .ba-lbl { color: var(--coral-deep); }
.ba-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ba-arrow { width: 38px; height: 38px; border-radius: 50%; background: var(--coral); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); }
.ba-mid .lf-spin-mark { width: 26px; height: 26px; }

/* messy bubbles */
.bubble {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 11px; display: flex; align-items: center; gap: 9px;
  box-shadow: 0 4px 12px -8px rgba(39,49,60,.4); margin-bottom: 9px; position: relative;
}
.bubble .b-txt { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.bubble .b-name { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.bubble .unread { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.bubble.tilt-1 { transform: rotate(-2.2deg); }
.bubble.tilt-2 { transform: rotate(1.6deg); }
.bubble.tilt-3 { transform: rotate(-1.1deg); }

/* mini lead card for hero after */
.mini-lead { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 11px; margin-bottom: 9px; box-shadow: 0 4px 12px -9px rgba(39,49,60,.35); position: relative; overflow: hidden; }
.mini-lead.top { border-color: var(--coral-bg); box-shadow: 0 10px 22px -14px rgba(190,86,64,.45); }
.mini-lead .ml-acc { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--coral); opacity:.5; }
.mini-lead.top .ml-acc { background: var(--coral-deep); opacity: .95; }
.mini-lead .ml-top { display: flex; align-items: center; gap: 8px; }
.mini-lead .ml-name { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.mini-lead .ml-intent { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.mini-lead .ml-next { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.mini-lead .ml-next .k { font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: var(--coral-deep); background: var(--coral-bg); border-radius: 5px; padding: 2px 5px; }
.mini-badge { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 3px 8px; margin-left: auto; white-space: nowrap; }
.mini-badge.high { background: var(--coral-deep); color: #fff; }
.mini-badge.med { background: var(--amber-bg); color: #9C7833; }
.mini-av { width: 26px; height: 26px; border-radius: 50%; background: var(--coral-bg); color: var(--coral-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 10px; flex-shrink: 0; }

/* ---------- Section rhythm ---------- */
.band { padding: 92px 0; }
.band.tint { background: linear-gradient(180deg, #FBF8F2 0%, #F4F1EA 100%); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.band.ink { background: linear-gradient(160deg, #3C4956 0%, #2D3742 100%); }
.band.ink h2.lp-h, .band.ink .lp-kicker { color: #F4F1EA; }
.band.ink p.lp-sub { color: #C3CAD2; }

/* ---------- Problem section ---------- */
.prob-stage { position: relative; height: 360px; border-radius: 24px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.prob-stage .float {
  position: absolute; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 9px 12px; display: flex; align-items: center; gap: 9px; box-shadow: 0 8px 20px -12px rgba(39,49,60,.4);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.prob-stage.in .float { opacity: 1; transform: translateY(0) scale(1); }
.prob-stage .float .ft { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.prob-stage .float .fn { font-size: 11.5px; font-weight: 800; color: var(--ink); }
.prob-stage .center-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  background: var(--coral-deep); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: var(--r-pill); box-shadow: var(--shadow-pop); white-space: nowrap; z-index: 5;
}
.prob-points { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 30px; }
.prob-points .pt { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.prob-points .pt .x { width: 22px; height: 22px; border-radius: 50%; background: var(--card-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 22px 20px;
  position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(39,49,60,.5); }
.step .sn { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--coral-deep); background: var(--coral-bg); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.step h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); margin: 16px 0 6px; letter-spacing: -0.01em; }
.step p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.step .viz { background: var(--card-soft); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px; min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }

/* tiny viz helpers */
.vbubble { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 7px 9px; }
.vbubble .vt { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.vrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ink); }
.vrow .vk { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); width: 52px; flex-shrink: 0; }
.vchip { font-size: 9.5px; font-weight: 800; border-radius: 6px; padding: 3px 7px; }
.vchip.coral { background: var(--coral-bg); color: var(--coral-deep); }
.vchip.amber { background: var(--amber-bg); color: #9C7833; }
.vchip.high { background: var(--coral-deep); color: #fff; }

/* ---------- Product demo ---------- */
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.win {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
  box-shadow: 0 50px 100px -55px rgba(39,49,60,.5);
}
.win .bar { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--card-soft); border-bottom: 1px solid var(--border-soft); }
.win .bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.win .bar .title { margin-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.win .body { padding: 18px; background: var(--cream); }
.demo-inbox-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.demo-inbox-head img { width: 24px; height: 24px; object-fit: contain; }
.demo-inbox-head .wm { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }
.demo-inbox-head .cnt { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.demo-stack { display: flex; flex-direction: column; gap: 11px; }
.demo-stack .lead-card { width: 100%; }

/* detail panel */
.detail .d-head { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); margin-bottom: 14px; }
.detail .d-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.detail .d-channel { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.ai-block { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; }
.ai-row { display: flex; gap: 10px; align-items: baseline; }
.ai-row + .ai-row { margin-top: 11px; }
.ai-row .ak { font-size: 12px; font-weight: 700; color: var(--muted); width: 92px; flex-shrink: 0; }
.ai-row .av { font-size: 14px; font-weight: 700; color: var(--ink); }
.next-chip { display: flex; align-items: center; gap: 10px; background: var(--coral-bg); border-radius: 13px; padding: 12px 14px; margin: 13px 0; }
.next-chip .k { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--coral-deep); border-radius: 6px; padding: 4px 8px; }
.next-chip .v { font-size: 14px; font-weight: 800; color: var(--ink); }
.reply-label { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
.reply-label .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.detail-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.detail-actions .row2 { display: flex; gap: 8px; }
.detail-actions .row2 .btn { flex: 1; }

/* ---------- Benefits ---------- */
.ben-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ben {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.ben:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(39,49,60,.5); border-color: var(--coral-bg); }
.ben .cue { height: 56px; border-radius: 12px; background: var(--card-soft); border: 1px solid var(--border-soft); margin-bottom: 16px; display: flex; align-items: center; padding: 0 12px; gap: 8px; overflow: hidden; }
.ben h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 7px; letter-spacing: -.01em; line-height: 1.25; }
.ben p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.cue-tick { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--coral-bg); align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Use cases ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.uc {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 12px; transition: transform .2s var(--ease), border-color .2s;
}
.uc:hover { transform: translateY(-3px); border-color: var(--coral-bg); }
.uc .uc-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--coral-bg); display: flex; align-items: center; justify-content: center; }
.uc .uc-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }

/* ---------- AI receptionist comparison ---------- */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp-card { border-radius: var(--r-xl); padding: 26px; }
.cmp-card.bot { background: var(--card-soft); border: 1px solid var(--border); }
.cmp-card.lf { background: #fff; border: 1.5px solid var(--coral-bg); box-shadow: 0 30px 60px -45px rgba(190,86,64,.5); }
.cmp-card .tag2 { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; display: inline-block; }
.cmp-card.bot .tag2 { color: var(--muted); }
.cmp-card.lf .tag2 { color: var(--coral-deep); }
.cmp-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); margin: 0 0 16px; letter-spacing: -.01em; }
.cmp-list { display: flex; flex-direction: column; gap: 11px; }
.cmp-list .li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.cmp-list .li .mk { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.cmp-card.bot .mk { background: #E7E2D6; }
.cmp-card.lf .mk { background: #EBF3EE; }

.modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 26px; }
.mode { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.mode .mn { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-deep); }
.mode h5 { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 8px 0 6px; }
.mode p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* ---------- Trust ---------- */
.trust-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.trust-list { display: flex; flex-direction: column; gap: 16px; }
.trust-list .tl { display: flex; align-items: flex-start; gap: 13px; }
.trust-list .tl .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--coral-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-list .tl .tt { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.trust-list .tl .td { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 2px; }
.control-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; box-shadow: 0 40px 80px -55px rgba(39,49,60,.5); }
.control-card .cc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ctrl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 16px; }
.ctrl-btn { height: 46px; border-radius: 12px; font-family: var(--font-ui); font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 1.5px solid var(--border); background: #fff; color: var(--ink-soft); transition: border-color .15s, transform .12s; }
.ctrl-btn:hover { border-color: var(--coral); color: var(--coral-deep); }
.ctrl-btn:active { transform: scale(.97); }
.ctrl-btn.primary { background: var(--coral); color: #fff; border-color: var(--coral); box-shadow: var(--shadow-btn); }
.ctrl-btn.primary:hover { color: #fff; filter: brightness(1.03); }

/* ---------- Waitlist ---------- */
.wait-sec { padding: 96px 0; }
.wait-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 52px; align-items: start; }
.wait-badges { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.wait-badges .wb { display: flex; align-items: flex-start; gap: 12px; }
.wait-badges .wb .ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(224,122,99,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.band.ink .wait-badges .wb .tt { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: #F4F1EA; }
.band.ink .wait-badges .wb .td { font-size: 13px; color: #B7BFC8; margin-top: 2px; line-height: 1.45; }

.form-card { background: #fff; border-radius: 22px; padding: 30px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.5); }
.form-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 4px; letter-spacing: -.02em; }
.form-card .fsub { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: span 2; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.field label .opt { color: var(--faint); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: var(--ink);
  background: var(--card-soft); border: 1.5px solid var(--border); border-radius: 11px; padding: 12px 13px;
  outline: none; transition: border-color .15s, background .15s; width: 100%;
}
.field textarea { resize: vertical; min-height: 76px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); font-weight: 500; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--coral); background: #fff; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C8676' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.form-actions { display: flex; gap: 12px; margin-top: 22px; align-items: center; flex-wrap: wrap; }
.form-actions .btn { flex: 1; min-width: 160px; }
.form-qual { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: -8px 0 20px; font-weight: 500; font-style: italic; }
.form-fine { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

/* success state */
.form-success { display: none; text-align: center; padding: 30px 20px; }
.form-success.show { display: block; animation: lpFade .5s var(--ease) both; }
.form-card.done .form-inner { display: none; }
.form-success .ring { width: 76px; height: 76px; border-radius: 50%; background: var(--coral); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; box-shadow: 0 20px 40px -16px rgba(224,122,99,.8); animation: lpPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.form-success h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--ink); margin: 0 0 8px; letter-spacing: -.02em; }
.form-success p { font-size: 15px; color: var(--ink-soft); max-width: 38ch; margin: 0 auto; line-height: 1.55; }
@keyframes lpPop { 0% { transform: scale(.4);} 60% { transform: scale(1.08);} 100% { transform: scale(1);} }
@keyframes lpFade { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }

/* ---------- Final CTA ---------- */
.final { text-align: center; padding: 104px 0; background: radial-gradient(70% 100% at 50% 0%, #FBE8E1 0%, rgba(251,232,225,0) 60%), var(--cream); }
.final img.mk { width: 56px; height: 56px; object-fit: contain; margin-bottom: 22px; }
.final h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px,4.4vw,50px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); margin: 0 auto; max-width: 18ch; }
.final p { font-size: 18px; color: var(--ink-soft); max-width: 50ch; margin: 18px auto 0; line-height: 1.55; font-weight: 500; }
.final .cta { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.foot { background: #2D3742; padding: 40px 0; }
.foot .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot .brand { display: flex; align-items: center; gap: 10px; }
.foot .brand img { width: 26px; height: 26px; object-fit: contain; }
.foot .brand .wm { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #F4F1EA; letter-spacing: -.02em; }
.foot .tagline { font-size: 13px; color: #9AA4AE; }
.foot .copy { margin-left: auto; font-size: 12.5px; color: #7C8893; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .lp-eyebrow .dot, .lf-spin-mark { animation: none !important; }
}

/* spinning mark accent */
.lf-spin-mark { animation: lpDrift 3s ease-in-out infinite; }
@keyframes lpDrift { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }

/* ---------- 3-step how it works variant ---------- */
.steps.steps-3 .step { padding: 28px 26px 24px; }
.steps.steps-3 .step h4 { font-size: 18.5px; }
.steps.steps-3 .step p { font-size: 14.5px; line-height: 1.6; }
.steps.steps-3 .step .viz { min-height: 88px; }

/* ---------- 4-col benefits (override) ---------- */
.ben-grid-4 { grid-template-columns: repeat(4,1fr); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; transition: border-color .2s;
}
.faq-item.open { border-color: var(--coral-bg); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; cursor: pointer; background: none; border: none; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--ink);
  transition: color .15s;
}
.faq-q:hover { color: var(--coral-deep); }
.faq-icon { flex-shrink: 0; color: var(--muted); transition: transform .25s var(--ease), color .15s; }
.faq-item.open .faq-q .faq-icon { transform: rotate(180deg); color: var(--coral-deep); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease), padding-bottom .35s var(--ease);
  padding: 0 22px; padding-bottom: 0;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 20px; }
.faq-a p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ---------- Automation panel (How It Works) ---------- */
.auto-panel {
  background: var(--card); border: 1.5px solid var(--coral-bg); border-radius: var(--r-xl);
  padding: 26px 30px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center;
}
.ap-label {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--coral-deep); margin-bottom: 10px;
}
.ap-copy p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; font-weight: 500; }
.ap-stages { display: flex; align-items: center; gap: 10px; }
.ap-stage {
  flex: 1; background: var(--card-soft); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.ap-stage.active { background: #fff; border-color: var(--coral-bg); }
.ap-sn { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ap-stage strong { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ap-stage span:last-child { font-size: 11px; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }

/* ---------- Knowledge panel (Not a Chatbot) ---------- */
.know-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 28px 32px; margin-top: 28px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center;
}
.kp-head { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 10px; letter-spacing: -.01em; }
.kp-sub { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; font-weight: 500; }
.kp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-tag {
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .demo-grid, .trust-grid, .wait-grid, .cmp { grid-template-columns: 1fr; gap: 26px; }
  .steps, .modes { grid-template-columns: 1fr 1fr; }
  .ben-grid, .ben-grid-4 { grid-template-columns: 1fr 1fr; }
  .auto-panel, .know-panel { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 20px; }
  .lnav .inner { padding: 12px 20px; }
  .band { padding: 64px 0; }
  .steps, .steps.steps-3, .modes, .ben-grid, .ben-grid-4, .prob-points, .fgrid { grid-template-columns: 1fr; }
  .field.full { grid-column: span 1; }
  .ba { grid-template-columns: 1fr; }
  .ba-mid { flex-direction: row; padding: 4px 0; }
  .ba-mid .ba-arrow { transform: rotate(90deg); }
  .hero-sec { padding: 40px 0 56px; }
  .form-card { padding: 22px; }
  .hero-copy .sub { font-size: 16px; }
  .faq-q { font-size: 14.5px; padding: 16px 18px; }
  .faq-a { padding: 0 18px; }
  .faq-item.open .faq-a { max-height: 360px; padding-bottom: 16px; }
  .auto-panel { padding: 20px; }
  .ap-stages { flex-direction: column; }
  .know-panel { padding: 20px; }
  .btn-lg { height: 50px; padding: 0 24px; font-size: 15px; }
  .final { padding: 72px 0; }
  .final h2 { font-size: clamp(26px, 7vw, 38px); }
  .wait-sec { padding: 72px 0; }

  /* --- Problem section: collapse inline grid, shrink visual --- */
  .prob-wrap { grid-template-columns: 1fr !important; gap: 28px !important; }
  .prob-stage { height: 240px; border-radius: 18px; }
  .prob-stage .float { padding: 5px 8px; gap: 6px; border-radius: 8px; box-shadow: 0 4px 10px -8px rgba(39,49,60,.4); }
  .prob-stage .float .fn { font-size: 9.5px; }
  .prob-stage .float .ft { font-size: 9px; }
  .prob-stage .float .ch-ico { width: 15px; height: 15px; border-radius: 4px; }
  .prob-stage .center-tag { font-size: 11.5px; padding: 8px 14px; }
  .prob-points { gap: 10px; }
  .prob-points .pt { font-size: 14px; }
}