/* Independent HTML/SVG interface planes; photos use crops from the approved mockup. */
.lp-demo{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(ellipse at 65% 0%,#29302e 0,transparent 58%),radial-gradient(ellipse at 50% 100%,#1c2321 0,transparent 60%),#101212;color:#f7f7f3;border-radius:clamp(20px,2.4vw,36px);scroll-margin-top:100px}
.lp-demo::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../images/landing/demo-backdrop.svg') center / cover no-repeat;opacity:1;mask-image:linear-gradient(90deg,transparent 20%,#000 48%)}
.lp-demo-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);align-items:center;gap:32px;padding-block:92px}
.lp-demo-copy{position:relative;z-index:2;min-width:0}
.lp-demo-copy .lp-eyebrow{margin:0 0 24px;gap:10px;font-size:11px}
.lp-demo-dot{width:8px;height:8px;border-radius:50%;background:#1affd3}
.lp-demo h2{font-family:Unbounded,system-ui,sans-serif;font-size:clamp(30px,3.2vw,48px);line-height:1.22;letter-spacing:-.045em;font-weight:700}
.lp-demo h2>span{display:block}
.lp-demo h2>span:not(:first-child){color:#1affd3}
.lp-demo-lead{max-width:420px;margin:26px 0 30px!important;font-size:17px;line-height:1.75;color:#c4c9c6}
.lp-demo-note{display:flex;align-items:center;gap:9px;margin-top:22px!important;font-size:12px;color:#aab3ae}
.lp-demo-note svg{width:22px;height:22px;flex-shrink:0;color:#a9e1d4}
.lp-demo-stage{position:relative;min-width:0;aspect-ratio:1.12;isolation:isolate;perspective:1600px;font-size:clamp(12px,1.4vw,20px)}
.lp-demo-panel{position:absolute;display:block;min-width:0;text-decoration:none;color:inherit;border-radius:22px;backface-visibility:hidden;outline-offset:6px;box-shadow:0 2px 0 #728079,0 5px 0 #2b302e,0 24px 38px #0008;transition:filter .25s,box-shadow .25s}
.lp-demo-panel:focus-visible{outline:3px solid #1affd3}
.lp-demo-panel--stories{inset:2% 2% auto 2%;padding:22px 20px 18px;z-index:1;transform:rotateY(-8deg) rotateZ(-4deg);background:linear-gradient(145deg,#2d3739,#121615 70%);border:1px solid #687877}
.lp-demo-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-demo-story{min-width:0;text-align:center}
.lp-demo-story-ring{position:relative;width:100%;aspect-ratio:1;color:#1affd3}
.lp-demo-story-ring>svg:not(.lp-demo-cursor){position:absolute;inset:0;width:100%;height:100%}
.lp-demo-story-photo{display:block;border-radius:50%;background-image:url('../images/demo-previews/scene-photos.webp');background-repeat:no-repeat;background-size:948% 541%;background-color:#333}
.lp-demo-story-ring>.lp-demo-story-photo{position:absolute;inset:8%;border:2px solid #f7f7f3}
.lp-demo-story-photo--0{background-position:49.36% 18.44%}
.lp-demo-story-photo--1{background-position:67.22% 16.11%}
.lp-demo-story-photo--2{background-position:87.43% 13.91%}
.lp-demo-story>span{display:block;margin-top:8px;font-size:1em;line-height:1.4}
.lp-demo-play{position:absolute;right:1%;bottom:8%;display:grid;place-items:center;width:27%;aspect-ratio:1;border-radius:50%;background:#1affd3;color:#111;box-shadow:0 5px 16px #0005}
.lp-demo-play svg{width:48%;height:48%;margin-left:4%}
.lp-demo-story-ring .lp-demo-cursor{position:absolute;right:-10%;bottom:-4%;width:25%;height:25%;color:white;filter:drop-shadow(0 2px 2px #0008)}
.lp-demo-panel--reviews{top:43%;left:0;width:79%;padding:25px 28px 32px;transform:rotateY(5deg) rotateZ(5deg);z-index:3;background:linear-gradient(130deg,#fff,#eef0ef);color:#111;border:1px solid #e4e7e5}
.lp-demo-review{position:relative;padding-right:58px}
.lp-demo-review h3{font-family:Unbounded,system-ui,sans-serif;font-size:1.08em;line-height:1.5;letter-spacing:-.04em;margin:0 0 13px}
.lp-demo-rating{display:flex;align-items:center;gap:15px;margin-bottom:12px}
.lp-demo-rating>span{display:flex;gap:3px;color:#f6b31c}
.lp-demo-rating svg{width:1.35em;height:1.35em;flex-shrink:0}
.lp-demo-rating small{padding:5px 12px;border-radius:99px;background:#e9ebed;color:#46505a;font-size:.8em}
.lp-demo-review>p{font-size:1.08em;line-height:1.5;color:#6b7381;margin:0!important}
.lp-demo-review-author{display:flex;align-items:center;gap:14px;margin-top:17px;padding-top:15px;border-top:1px solid #d9dfdc;font-size:.85em;white-space:nowrap}
.lp-demo-review-author>.lp-demo-story-photo{width:54px;height:54px;flex-shrink:0}
.lp-demo-review-layouts{position:absolute;right:-8px;top:36px;display:grid;gap:3px;padding:7px;background:#e6eae9;border-radius:14px}
.lp-demo-review-layouts>span{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;color:#34434a}
.lp-demo-review-layouts>span:first-child{background:#a9f6e8;color:#102e28}
.lp-demo-review-layouts svg{width:23px;height:23px}
.lp-demo-review-stack{position:absolute;inset:46% 6% 13% 16%;z-index:2;transform:rotate(-3deg);pointer-events:none}
.lp-demo-review-stack span{position:absolute;inset:0;border:1px solid #4e595a;border-radius:22px;background:linear-gradient(125deg,#333d3f,#141918);box-shadow:0 16px 25px #0007}
.lp-demo-review-stack span:last-child{inset:7% -5% -5% 12%;z-index:-1;transform:rotate(-3deg)}
.lp-demo-pagination{position:absolute;right:0;top:61%;z-index:2;display:flex;gap:7px;justify-content:center;align-items:center;flex-wrap:wrap;width:48px;pointer-events:none}
.lp-demo-pagination>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border:2px solid #586262;border-radius:50%;background:#191e1c}
.lp-demo-pagination svg{width:23px;height:23px}
.lp-demo-pagination i{width:7px;height:7px;border-radius:50%;background:#53605c}
.lp-demo-pagination i:nth-child(2){background:#1affd3}
.lp-demo-panel--phone{bottom:0;right:0;width:74%;padding:19px 21px;transform:rotateZ(-3deg);z-index:4;background:#fff;color:#111;border:1px solid #25cbc2;box-shadow:0 3px 0 #11695d,0 18px 35px #0008,0 0 22px #1affd31a}
.lp-demo-phone-label{display:block;font-size:.9em;color:#768193;margin-bottom:8px}
.lp-demo-phone-input{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 12px;border:1px solid #d4dce3;border-radius:12px;white-space:nowrap}
.lp-demo-flag{display:block;width:24px;height:17px;border:1px solid #e3e6e4;border-radius:2px;background:linear-gradient(#fff 0 33.333%,#1655bc 33.333% 66.666%,#dc293c 66.666%);flex-shrink:0}
.lp-demo-phone-input>svg{width:12px;height:12px;flex-shrink:0;color:#778591}
.lp-demo-number{font-size:1.05em;letter-spacing:-.04em;padding-left:8px;border-left:1px solid #e7eaea}
.lp-demo-phone-input>.lp-demo-input-check{width:30px;height:30px;margin-left:auto;color:#009e58}
.lp-demo-phone-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:.7em}
.lp-demo-phone-valid,.lp-demo-phone-link{display:inline-flex;align-items:center;gap:6px}
.lp-demo-phone-valid{color:#009e58}
.lp-demo-phone-valid svg{width:22px;height:22px;flex-shrink:0}
.lp-demo-phone-link{text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.lp-demo-phone-link svg{width:14px;height:14px}
@media(hover:hover){.lp-demo-panel:hover{filter:brightness(1.06);box-shadow:0 2px 0 #728079,0 5px 0 #2b302e,0 28px 45px #000a}}
@media(max-width:1200px){.lp-demo-inner{gap:28px;padding-block:75px}.lp-demo-stage{font-size:14px;aspect-ratio:1}.lp-demo-panel--reviews{padding:20px;width:82%;top:41%}.lp-demo-review{padding-right:44px}.lp-demo-review-layouts{right:-8px}.lp-demo-review-layouts>span{width:30px;height:30px}.lp-demo-panel--phone{width:85%;padding:16px}.lp-demo-phone-input{gap:7px}.lp-demo-rating{gap:8px}.lp-demo-lead{font-size:15px}.lp-demo-stories{gap:12px}.lp-demo-panel--stories{padding:18px 15px}}
@media(max-width:1024px){.lp-demo-inner{grid-template-columns:minmax(0,1fr);gap:35px;padding-block:65px}.lp-demo-copy{max-width:620px}.lp-demo h2{font-size:40px}.lp-demo-lead{max-width:530px;font-size:16px}.lp-demo-stage{width:min(720px,96%);margin-inline:auto;aspect-ratio:1.12;font-size:18px}.lp-demo-panel--reviews{padding:25px;top:43%;width:79%}.lp-demo-panel--phone{width:76%;padding:19px}.lp-demo-phone-footer{font-size:.75em}}
@media(max-width:599px){.lp-demo-inner{padding-block:50px;gap:32px}.lp-demo h2{font-size:clamp(26px,7vw,35px)}.lp-demo-lead{font-size:14px;margin-block:22px 26px!important}.lp-demo-note{font-size:11px}.lp-demo-stage{width:100%;aspect-ratio:auto;display:flex;flex-direction:column;gap:21px;padding:10px 7px;font-size:14px;perspective:none}.lp-demo-panel{position:relative;inset:auto;width:100%;border-radius:17px;transform:none}.lp-demo-panel--stories{padding:16px 12px;transform:rotate(-2deg)}.lp-demo-stories{gap:10px}.lp-demo-story>span{font-size:11px}.lp-demo-panel--reviews{padding:21px 19px;transform:rotate(2deg)}.lp-demo-review{padding-right:40px}.lp-demo-review h3{font-size:14px}.lp-demo-rating svg{width:20px;height:20px}.lp-demo-rating small{font-size:11px;padding:4px 9px}.lp-demo-review>p{font-size:14px}.lp-demo-review-author{font-size:11px;gap:10px}.lp-demo-review-author>.lp-demo-story-photo{width:44px;height:44px}.lp-demo-review-layouts{right:-5px;top:37px;padding:5px;border-radius:10px}.lp-demo-review-layouts>span{width:28px;height:28px}.lp-demo-review-layouts svg{width:19px;height:19px}.lp-demo-panel--phone{padding:16px 13px;transform:rotate(-2deg)}.lp-demo-phone-input{gap:6px;padding:9px 8px}.lp-demo-number{font-size:14px;padding-left:5px}.lp-demo-flag{width:19px;height:14px}.lp-demo-phone-input>.lp-demo-input-check{width:24px;height:24px}.lp-demo-phone-footer{font-size:10px;flex-wrap:wrap;row-gap:9px}.lp-demo-phone-label{font-size:12px}.lp-demo-review-stack,.lp-demo-pagination{display:none}}
@media(prefers-reduced-motion:reduce){.lp-demo-panel{transition:none}}
@media(min-width:600px){.lp-demo-stage{aspect-ratio:1.04;min-height:680px}.lp-demo-panel--reviews{top:45%}.lp-demo-panel--phone{bottom:-2%}}
/* Compact the whole composition uniformly, preserving the approved overlaps. */
@media(min-width:1025px){.lp-demo{overflow:visible;margin-block:90px}.lp-demo::before{border-radius:inherit}.lp-demo-inner{padding-block:80px}.lp-demo-stage{transform:scale(.68);transform-origin:center;margin-block:-170px}}
@media(min-width:600px) and (max-width:1024px){.lp-demo-stage{transform:scale(.88);transform-origin:center;margin-block:-40px}}
/* Two deliberate lines for the desktop heading and its supporting copy. */
@media(min-width:1025px){.lp-demo h2{font-size:clamp(28px,3vw,46px)}.lp-demo h2>span{white-space:nowrap}.lp-demo-lead{max-width:none;font-size:clamp(13px,1.1vw,17px)}.lp-demo-lead>span{display:block;white-space:nowrap}}