.lp-demo__defs { position: absolute; }

.lp-demo__row { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 8vw, 140px) minmax(0, 1fr); }
.lp-demo__win { background: #fff; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08); color: #16181d; container-type: inline-size; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; overflow: hidden; position: relative; }
.lp-demo__chrome { align-items: center; background: #202124; display: flex; gap: 1cqi; height: 6cqi; padding: 0 2cqi; }
.lp-demo__chrome i { border-radius: 50%; flex: none; height: 1.4cqi; width: 1.4cqi; }
.lp-demo__chrome i:nth-child(1) { background: #ff5f57; }
.lp-demo__chrome i:nth-child(2) { background: #febc2e; }
.lp-demo__chrome i:nth-child(3) { background: #28c840; }
.lp-demo__url { background: #303134; border-radius: 99px; color: #e8eaed; flex: 1; font-size: 1.6cqi; line-height: 3.6cqi; margin-left: 1.4cqi; min-width: 0; overflow: hidden; padding: 0 2cqi; text-overflow: ellipsis; white-space: nowrap; }
.lp-demo__url em { color: #9aa0a6; font-style: normal; }
.lp-demo__screen { aspect-ratio: 16 / 10; font-size: 1.5cqi; line-height: 1.35; overflow: hidden; position: relative; }
.lp-demo__screen small { display: block; font-size: 0.62em; letter-spacing: 0.12em; text-transform: uppercase; }

.lp-demo__app { background: #eef2f7; display: grid; grid-template-columns: 3em 13em minmax(0, 1fr); }
.lp-demo__app--chat { grid-template-columns: 3em minmax(0, 1fr); }
.lp-demo__rail { align-items: center; background: #fff; border-right: 1px solid #dfe4eb; display: flex; flex-direction: column; gap: 1.1em; padding-top: 1em; }
.lp-demo__rail b { background: linear-gradient(135deg, #3c84d8, #1f5fbf); border-radius: 0.3em; height: 1.2em; margin-bottom: 0.6em; width: 1.4em; }
.lp-demo__rail span { background: #c5ccd6; border-radius: 0.25em; height: 0.8em; width: 0.8em; }
.lp-demo__rail .on { background: #1f5fbf; box-shadow: 0 0 0 0.35em #dbe7f8; }
.lp-demo__aside { background: #fff; border: 1px solid #dfe4eb; border-radius: 0.5em; display: flex; flex-direction: column; gap: 0.5em; margin: 1em 0 1em 1em; padding: 0.8em; }
.lp-demo__aside > small { color: #5f6b7b; letter-spacing: 0; text-transform: none; }
.lp-demo__thumb { background: #faf8f5; border: 1px solid #e3e6ea; border-radius: 0.3em; display: grid; gap: 0.3em; grid-template-columns: 1fr 1fr; height: 5.5em; padding: 0.6em; }
.lp-demo__thumb span { background: #2b2430; border-radius: 0.15em; grid-column: 1; height: 0.4em; width: 80%; }
.lp-demo__thumb span:nth-child(2) { background: #8e4a94; height: 0.7em; }
.lp-demo__thumb span:nth-child(3) { background: #c9c3cc; width: 60%; }
.lp-demo__thumb i { background: radial-gradient(circle at 30% 60%, #1d1a1c 0 16%, transparent 17%), radial-gradient(circle at 55% 55%, #8e4a94 0 22%, transparent 23%), radial-gradient(circle at 80% 62%, #f07b7f 0 14%, transparent 15%); grid-column: 2; grid-row: 1 / 4; }
.lp-demo__aside strong { font-size: 0.75em; overflow-wrap: anywhere; text-align: center; }
.lp-demo__badge { align-self: center; background: #e2f4ea; border-radius: 0.3em; color: #1f7d55; font: 600 0.55em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.1em; padding: 0.3em 0.7em; text-transform: uppercase; }
.lp-demo__aside ul { border-top: 1px solid #edf0f4; list-style: none; margin: 0.3em 0 0; padding: 0; }
.lp-demo__aside li { border-bottom: 1px solid #edf0f4; color: #16181d; display: flex; font-size: 0.72em; justify-content: space-between; padding: 0.75em 0.2em; }
.lp-demo__aside li span { color: #8a94a3; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp-demo__aside li.on { font-weight: 700; }

.lp-demo__panel { background: #fff; border: 1px solid #dfe4eb; border-radius: 0.5em; margin: 1em; min-width: 0; padding: 1.2em 1.4em; }
.lp-demo__ptitle { display: block; font-size: 0.85em; margin-bottom: 0.7em; }
.lp-demo__phead { align-items: baseline; display: flex; gap: 1.2em; margin-bottom: 1.2em; }
.lp-demo__phead strong { flex: none; font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-demo__phead span { color: #6b7686; font-size: 0.6em; }
.lp-demo__fields { display: grid; gap: 1em 1em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp-demo__field { min-width: 0; }
.lp-demo__field--wide { grid-column: span 2; grid-row: span 2; }
.lp-demo__field small { color: #5f6b7b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 0.45em; }
.lp-demo__field small i { color: #e0524a; font-style: normal; }
.lp-demo__field u { color: #1f7d55; display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.58em; margin-top: 0.4em; }
.lp-demo__input { background: #fff; border: 1px solid #d5dbe3; border-radius: 0.3em; display: block; font-size: 0.78em; min-height: 2.6em; overflow: hidden; padding: 0.65em 0.8em; transition: border-color 0.2s, box-shadow 0.2s; white-space: nowrap; }
.lp-demo__input--area { min-height: 7.4em; white-space: normal; }
.lp-demo__input.is-caret { border-color: #3c84d8; box-shadow: 0 0 0 0.25em rgba(60,132,216,0.18); }
.lp-demo__input.is-caret::after { animation: lpDemoBlink 1s steps(1) infinite; background: #16181d; content: ''; display: inline-block; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; width: 1px; }
@keyframes lpDemoBlink { 50% { opacity: 0; } }
.lp-demo__btns { border-top: 1px solid #edf0f4; display: flex; flex-wrap: wrap; gap: 0.7em; margin-top: 1.4em; padding-top: 1.2em; }
.lp-demo__btn { background: #1f5fbf; border-radius: 0.3em; color: #fff; display: inline-block; font-size: 0.68em; font-weight: 600; padding: 0.85em 1.2em; position: relative; transition: background 0.25s, transform 0.12s; white-space: nowrap; }
.lp-demo__btn--ghost { background: #fff; box-shadow: inset 0 0 0 1px #d5dbe3; color: #16181d; }
.lp-demo__btns .lp-demo__btn--go { background: #a9c3ea; }
.lp-demo__row.is-type:not(.is-live) .lp-demo__btns .lp-demo__btn--go { background: #1f5fbf; box-shadow: 0 0 0 0.3em rgba(31,95,191,0.18); }
.lp-demo__btn--go > span + span { display: none; }
.lp-demo__row.is-click:not(.is-live) .lp-demo__btn--go > span:first-child { display: none; }
.lp-demo__row.is-click:not(.is-live) .lp-demo__btn--go > span + span { display: inline; }
.lp-demo__row.is-click:not(.is-sent):not(.is-launch) [data-go] { transform: scale(0.94); }

.lp-demo__cursor { height: 2.2em; left: var(--cx, 86%); opacity: 0; pointer-events: none; position: absolute; top: var(--cy, 90%); transition: left 0.7s cubic-bezier(0.5, 0, 0.2, 1), top 0.7s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.3s; width: 1.6em; z-index: 3; }
.lp-demo__cursor::before { background: #16181d; clip-path: polygon(0 0, 0 78%, 24% 60%, 42% 100%, 58% 93%, 41% 55%, 72% 55%); content: ''; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); inset: 0; position: absolute; }
.lp-demo__cursor::after { border: 2px solid #3c84d8; border-radius: 50%; content: ''; height: 2.6em; left: -1.3em; opacity: 0; position: absolute; top: -1.3em; width: 2.6em; }
.lp-demo__row.is-type:not(.is-launch):not(.is-sent) .lp-demo__cursor { opacity: 1; }
.lp-demo__row.is-click .lp-demo__cursor::after { animation: lpDemoClick 0.5s ease-out; }
@keyframes lpDemoClick { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.2); } }

.lp-demo__launch { align-self: stretch; position: relative; z-index: 2; }
.lp-demo__track { inset: 0; position: absolute; }
.lp-demo__path { height: 80px; left: -20%; overflow: visible; position: absolute; top: calc(50% - 40px); width: 140%; }
.lp-demo__path path { fill: none; opacity: 0.45; stroke: var(--accent-neon); stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 2.5; transition: opacity 0.3s; }
.lp-demo__row.is-launch:not(.is-live) .lp-demo__path path { opacity: 1; }
.lp-demo__fly { left: -20%; margin-left: calc(var(--rk) / -2); opacity: 0; position: absolute; top: calc(50% - var(--rk) / 4); transition: opacity 0.4s; --rk: clamp(40px, 3.6vw, 60px); }
.lp-demo__rocket { display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45)); height: calc(var(--rk) / 2); overflow: visible; transform: translateY(20px) rotate(-32deg); width: var(--rk); }
.lp-demo__row.is-type .lp-demo__fly { opacity: 1; }
.lp-demo__row.is-type:not(.is-launch) .lp-demo__rocket { animation: lpDemoIdle 0.9s ease-in-out infinite alternate; }
.lp-demo__row.is-launch .lp-demo__fly { animation: lpDemoX 1.3s cubic-bezier(0.45, 0, 0.55, 1) both; }
.lp-demo__row.is-launch .lp-demo__rocket { animation: lpDemoArc 1.3s cubic-bezier(0.45, 0, 0.55, 1) both; }
.lp-demo__row.is-live:not(.is-type) .lp-demo__fly { left: 50%; opacity: 1; }
.lp-demo__row.is-live:not(.is-type) .lp-demo__rocket { transform: translateY(-20px); }
.lp-demo__flame { animation: lpDemoFlame 0.12s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: right center; }
@keyframes lpDemoIdle { to { transform: translateY(17px) rotate(-29deg); } }
@keyframes lpDemoX { 0% { left: -20%; opacity: 1; } 88% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
@keyframes lpDemoArc { 0% { transform: translateY(20px) rotate(-32deg); } 50% { transform: translateY(-20px) rotate(0deg); } 100% { transform: translateY(20px) rotate(32deg); } }
@keyframes lpDemoFlame { to { transform: scaleX(1.35) scaleY(0.85); } }

.lp-demo__site { background: #fff; color: #1b1720; display: flex; flex-direction: column; font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; }
.lp-demo__load { background: #8e4a94; height: 0.3em; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: left; z-index: 2; }
.lp-demo__row.is-launch .lp-demo__load { opacity: 0; transform: scaleX(1); transition: transform 1.4s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.3s 1.4s; }
.lp-demo__row[data-demo="form"]:not(.is-live) .lp-demo__in { opacity: 0; }
.lp-demo__row[data-demo="form"]:not(.is-live) .lp-demo__site { background: linear-gradient(#eef0f3, #eef0f3) 6% 34% / 36% 7% no-repeat, linear-gradient(#eef0f3, #eef0f3) 6% 46% / 26% 7% no-repeat, linear-gradient(#f2f3f5, #f2f3f5) 6% 58% / 32% 4% no-repeat, linear-gradient(#f4f2ee, #f4f2ee) 94% 52% / 42% 62% no-repeat, #fff; }
.lp-demo__row.is-live .lp-demo__in { animation: lpDemoIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes lpDemoIn { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
.lp-demo__strip { background: linear-gradient(90deg, #1d1420, #3b2342 50%, #1d1420); color: #f1e6f2; display: flex; font-size: 0.55em; font-weight: 600; gap: 2.4em; justify-content: flex-end; letter-spacing: 0.14em; padding: 0.9em 2.4em; text-transform: uppercase; }
.lp-demo__strip span:first-child::before { background: #c26fca; border-radius: 50%; content: ''; display: inline-block; height: 0.6em; margin-right: 0.7em; width: 0.6em; }
.lp-demo__nav { align-items: center; border-bottom: 1px solid #efedf0; display: flex; justify-content: space-between; padding: 0.9em 1.6em; }
.lp-demo__logo { align-items: center; display: flex; font-size: 0.72em; font-weight: 600; gap: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; }
.lp-demo__logo b { background: #16121a; color: #fff; display: grid; font-size: 0.9em; height: 1.9em; place-items: center; width: 1.9em; }
.lp-demo__links { display: flex; font-size: 0.5em; gap: 1.8em; letter-spacing: 0.12em; text-transform: uppercase; }
.lp-demo__hero { display: grid; flex: 1; grid-template-columns: 1.1fr 1fr; min-height: 0; }
.lp-demo__copy { display: flex; flex-direction: column; justify-content: center; padding: 0 1.6em; }
.lp-demo__copy small { color: #8e4a94; font-weight: 600; letter-spacing: 0.16em; margin-bottom: 1em; }
.lp-demo__copy strong { font-size: 2.6em; font-weight: 500; letter-spacing: -0.02em; line-height: 1.02; }
.lp-demo__copy strong em { color: #8e4a94; display: block; font-style: normal; }
.lp-demo__copy p { color: #5c5561; font-size: 0.72em; margin: 1.1em 0 1.4em; }
.lp-demo__ctas { display: flex; flex-wrap: wrap; gap: 0.6em; }
.lp-demo__ctas span { border: 1px solid #16121a; font-size: 0.5em; font-weight: 600; letter-spacing: 0.14em; padding: 1.1em 1.6em; text-transform: uppercase; }
.lp-demo__ctas span:first-child { background: #16121a; color: #fff; }
.lp-demo__copy .lp-demo__price { color: #6b6470; letter-spacing: 0.04em; margin: 1.6em 0 0; text-transform: none; }
.lp-demo__art { align-items: center; background: #f5f2ec; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lp-demo__art small { color: #8e4a94; font-size: 0.5em; font-weight: 600; letter-spacing: 0.18em; }
.lp-demo__art small:first-of-type { color: #6b6470; margin-top: 1.2em; }
.lp-demo__art strong { font-size: 1.35em; font-weight: 500; margin: 0.15em 0 0.2em; }
.lp-demo__bags { display: block; overflow: visible; width: 80%; }
.lp-demo__bag { animation: lpDemoSwing 2.6s ease-in-out infinite alternate; animation-delay: var(--d); transform-box: fill-box; transform-origin: 50% 0; }
.lp-demo__spark path { animation: lpDemoTwinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lp-demo__spark path:nth-child(2) { animation-delay: -0.6s; }
.lp-demo__spark path:nth-child(3) { animation-delay: -1.2s; }
@keyframes lpDemoSwing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes lpDemoTwinkle { 50% { opacity: 0.2; transform: scale(0.5); } }
.lp-demo__perks { border-top: 1px solid #efedf0; display: grid; font-size: 0.48em; grid-template-columns: repeat(4, 1fr); letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }
.lp-demo__perks span { border-left: 1px solid #efedf0; padding: 1.6em 0.6em; }
.lp-demo__perks span:first-child { border: 0; }

.lp-demo__builder { display: flex; flex-direction: column; min-width: 0; padding: 1.4em 1.6em 1.2em; }
.lp-demo__bhead small { color: #6b7686; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp-demo__bhead strong { display: block; font-size: 1.35em; letter-spacing: -0.02em; margin: 0.1em 0 0.2em; }
.lp-demo__bhead span { color: #5f6b7b; display: block; font-size: 0.66em; max-width: 60ch; }
.lp-demo__pick { align-items: center; display: flex; gap: 0.6em; margin: 1em 0; }
.lp-demo__pick small { color: #6b7686; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp-demo__pick span { background: #fff; border: 1px solid #d5dbe3; border-radius: 0.3em; font-size: 0.62em; margin-right: 0.8em; padding: 0.5em 0.9em; white-space: nowrap; }
.lp-demo__panes { display: grid; flex: 1; gap: 0.8em; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 0; }
.lp-demo__chat, .lp-demo__pv { background: #fff; border: 1px solid #dfe4eb; border-radius: 0.4em; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lp-demo__msgs { display: flex; flex: 1; flex-direction: column; gap: 0.7em; justify-content: flex-end; min-height: 0; overflow: hidden; padding: 0.8em; }
.lp-demo__msg { flex: none; max-width: 88%; }
.lp-demo__msg small { color: #8a94a3; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.5em; margin-bottom: 0.4em; }
.lp-demo__msg p { border: 1px solid #e3e7ed; border-left: 2px solid #8a94a3; border-radius: 0.3em; font-size: 0.7em; margin: 0; padding: 0.8em 1em; }
.lp-demo__msg--you { align-self: flex-end; text-align: right; }
.lp-demo__msg--you p { background: #eef4fd; border-color: #cfe0f7; text-align: left; }
.lp-demo__msg--ask, .lp-demo__msg--reply, .lp-demo__said { display: none; }
.lp-demo__row.is-sent .lp-demo__msg--ask { animation: lpDemoIn 0.35s ease-out both; display: block; }
.lp-demo__row.is-think .lp-demo__msg--reply, .lp-demo__row.is-reply .lp-demo__msg--reply { animation: lpDemoIn 0.35s ease-out both; display: block; }
.lp-demo__row.is-reply .lp-demo__said { display: inline; }
.lp-demo__row.is-reply .lp-demo__dots { display: none; }
.lp-demo__dots { display: inline-flex; gap: 0.3em; }
.lp-demo__dots i { animation: lpDemoDot 0.9s ease-in-out infinite; background: #8a94a3; border-radius: 50%; height: 0.5em; width: 0.5em; }
.lp-demo__dots i:nth-child(2) { animation-delay: 0.15s; }
.lp-demo__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes lpDemoDot { 50% { opacity: 0.3; transform: translateY(-0.25em); } }
.lp-demo__compose { align-items: flex-end; border-top: 1px solid #edf0f4; display: flex; gap: 0.6em; padding: 0.7em; }
.lp-demo__compose .lp-demo__input { flex: 1; font-size: 0.7em; min-height: 4.2em; }
.lp-demo__row.is-sent .lp-demo__compose .lp-demo__input { color: transparent; }
.lp-demo__compose .lp-demo__btn--go { background: #a9c3ea; }
.lp-demo__row.is-type:not(.is-sent) .lp-demo__compose .lp-demo__btn--go { background: #1f5fbf; }
.lp-demo__pv > small { border-bottom: 1px solid #edf0f4; color: #6b7686; display: flex; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.48em; justify-content: space-between; padding: 0.9em 1.2em; }
.lp-demo__pvsite { border: 1px solid #edf0f4; flex: 1; font-size: 0.62em; margin: 0.8em; overflow: hidden; position: relative; }
.lp-demo__pvsite .lp-demo__copy { padding: 1.4em 1.2em; }
.lp-demo__pvsite .lp-demo__copy strong { font-size: 1.9em; }
.lp-demo__row.is-launch .lp-demo__pvsite { animation: lpDemoReload 0.6s ease 0.4s; }
@keyframes lpDemoReload { 40% { opacity: 0.25; } }

.lp-demo__chatbtn { background: #16121a; border-radius: 99px; bottom: 1em; box-shadow: 0 0.4em 1em rgba(0,0,0,0.25); color: #fff; font-size: 0.62em; font-weight: 600; padding: 0.9em 1.4em; position: absolute; right: 1em; white-space: nowrap; }
.lp-demo__row:not(.is-live) .lp-demo__chatbtn { opacity: 0; transform: scale(0.6); }
.lp-demo__row.is-live .lp-demo__chatbtn { animation: lpDemoPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.5s both; }
@keyframes lpDemoPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

.lp-demo__site--update .lp-demo__nav { background: #fff; }
.lp-demo__find { padding: 2em 2.4em 1.6em; }
.lp-demo__find > strong { display: block; font-size: 1.7em; font-weight: 500; letter-spacing: -0.02em; }
.lp-demo__find > p { color: #6b6470; font-size: 0.66em; margin: 0.6em 0 1.6em; max-width: 46ch; }
.lp-demo__cards { display: grid; gap: 1em; grid-template-columns: repeat(3, 11.5em); }
.lp-demo__card { border: 1px solid #ece9ee; border-radius: 0.3em; font-size: 0.66em; padding: 0.6em 0.6em 1em; }
.lp-demo__card span { display: block; margin-top: 0.8em; }
.lp-demo__pic { background: linear-gradient(135deg, #f3eef4, #e6dbe8); display: block; height: 7em; }
.lp-demo__pic--new { background: radial-gradient(circle at 50% 60%, #8e4a94 0 20%, transparent 21%), linear-gradient(135deg, #f6f1ea, #ebe2d6); }
.lp-demo__pic--gift { background: linear-gradient(90deg, transparent 46%, #c26fca 46% 54%, transparent 54%), linear-gradient(transparent 46%, #c26fca 46% 54%, transparent 54%), linear-gradient(135deg, #f7e3e4, #eccfd2); }
.lp-demo__pic--truck { align-items: center; background: radial-gradient(circle at 60% 40%, rgba(194,111,202,0.35), transparent 45%), linear-gradient(135deg, #f6f0f7, #ece2ee); display: flex; justify-content: center; overflow: hidden; }
.lp-demo__pic--truck svg { width: 70%; }
.lp-demo__row.is-live .lp-demo__pic--truck svg { animation: lpDemoDrive 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both; }
@keyframes lpDemoDrive { from { transform: translateX(-120%); } to { transform: none; } }
.lp-demo__card--added { position: relative; }
.lp-demo__row[data-demo="chat"]:not(.is-live) .lp-demo__card--added { opacity: 0; transform: scale(0.9); }
.lp-demo__row.is-live .lp-demo__card--added { animation: lpDemoPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
.lp-demo__row.is-live .lp-demo__card--added::after { animation: lpDemoRing 1.6s ease-out 0.3s both; border-radius: 0.4em; box-shadow: 0 0 0 0.25em #c26fca; content: ''; inset: -0.3em; position: absolute; }
@keyframes lpDemoRing { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
.lp-demo__band { background: #f5f2ec; padding: 2.2em 2.4em; text-align: center; }
.lp-demo__band small { color: #8e4a94; font-size: 0.5em; font-weight: 600; letter-spacing: 0.18em; }
.lp-demo__band strong { display: block; font-size: 1.5em; font-weight: 500; margin-top: 0.4em; }
.lp-demo__widget { bottom: 0; position: absolute; right: 0; top: 0; width: 17em; }
.lp-demo__wpanel { background: #fff; border-radius: 0.5em; bottom: 3.4em; box-shadow: 0 0.6em 2em rgba(20,10,30,0.25); display: flex; flex-direction: column; font-size: 0.9em; height: 19em; left: 1em; overflow: hidden; position: absolute; right: 1em; transform-origin: 100% 100%; }
.lp-demo__wpanel b { background: #16121a; color: #fff; display: flex; font-size: 0.66em; justify-content: space-between; padding: 1em 1.2em; }
.lp-demo__wpanel b i { font-style: normal; }
.lp-demo__wpanel p { align-self: flex-start; background: #f2f0f4; border-radius: 0.4em; flex: none; font-size: 0.56em; margin: 1.2em; padding: 0.9em 1.1em; }
.lp-demo__wpanel > span { border-top: 1px solid #efedf0; color: #9a94a0; display: flex; font-size: 0.56em; gap: 0.8em; justify-content: space-between; margin-top: auto; padding: 0.8em; }
.lp-demo__wpanel em { background: #16121a; border-radius: 0.3em; color: #fff; font-style: normal; padding: 0.3em 0.8em; }
.lp-demo__row:not(.is-live) .lp-demo__wpanel { opacity: 0; transform: scale(0.7); }
.lp-demo__row.is-live .lp-demo__wpanel { animation: lpDemoPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1.4s both; }
.lp-demo__toast { background: #1f7d55; border-radius: 99px; color: #fff; font-size: 0.6em; font-weight: 600; left: 50%; padding: 0.7em 1.4em; position: absolute; top: 1em; transform: translateX(-50%); white-space: nowrap; }
.lp-demo__toast::before { content: '✓ '; }
.lp-demo__row:not(.is-live) .lp-demo__toast { opacity: 0; }
.lp-demo__row.is-live .lp-demo__toast { animation: lpDemoToast 3s ease both; }
@keyframes lpDemoToast { 0% { opacity: 0; transform: translate(-50%, -1em); } 12%, 80% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }

@media (max-width: 900px) {
    .lp-demo__row { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 120px auto; }
    .lp-demo__track { height: 200px; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-demo__row *, .lp-demo__row *::before, .lp-demo__row *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}