/* FaunaVera — live phone demos for How it works. Everything scales with the frame width (cqw). */
.phone-frame.live{container-type:inline-size;position:relative;aspect-ratio:9/19.5;border-radius:46px;background:#1B1D1C;padding:9px;box-shadow:0 18px 44px rgba(10,35,66,.18);overflow:visible}
.lp{--g:#0A2342;--moss:#466060;--sage:#81A684;--ivory:#FFFFFF;--parch:#F1E9D7;--mist:#E0F0F8;--ink:#0A2342;--stone:#466060;--line:rgba(10,35,66,.12);--scan:rgba(129,166,132,.95);
  position:relative;height:100%;border-radius:37px;overflow:hidden;background:linear-gradient(180deg,#FFFFFF,#DCE5D7);font-family:Inter,system-ui,sans-serif;color:var(--ink);font-size:4.6cqw;line-height:1.35;text-align:left}
.lp *{box-sizing:border-box}
.lp-island{position:absolute;top:2.4cqw;left:50%;transform:translateX(-50%);width:30%;height:7.4cqw;border-radius:99px;background:#0b0b0b;z-index:30}
.lp-status{display:flex;justify-content:space-between;align-items:center;padding:3.2cqw 7cqw 0;font-weight:700;font-size:.82em;height:11cqw;position:relative;z-index:20}
.lp-status i{display:inline-flex;gap:.35em;align-items:center;font-style:normal}
.lp-status b{display:inline-block;width:1.6em;height:.8em;border:1.5px solid currentColor;border-radius:.25em;position:relative}
.lp-status b:after{content:"";position:absolute;inset:1.5px;right:30%;background:currentColor;border-radius:1px}
.lp-head{display:flex;align-items:center;justify-content:space-between;padding:2cqw 5.5cqw 4cqw}
.lp-brand{display:flex;align-items:center;gap:.45em;font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.18em;color:var(--g)}
.lp .lp-brand img{width:1.6em!important;height:1.6em!important;border-radius:50%;display:block;object-fit:contain}
.lp-x{width:2.1em;height:2.1em;border-radius:50%;background:#DCE5D7;display:grid;place-items:center;color:var(--g);font-size:.9em}
.lp-body{padding:0 5.5cqw}
.lp-eyebrow{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--moss);margin:0 0 .35em}
.lp-h{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.55em;line-height:1.08;color:var(--g);margin:0 0 .3em}
.lp-sub{font-size:.8em;color:var(--stone);margin:0 0 .8em}

/* video tile (shared) */
.lp-clip{position:relative;border-radius:6cqw;overflow:hidden;background:#0A2342;isolation:isolate}
.lp-clip .still{position:absolute;inset:-6%;background:url("horse-still.webp") 50% 18%/cover no-repeat;animation:lp-drift 14s ease-in-out infinite alternate}
.lp-clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.lp-clip.has-video video{opacity:1}.lp-clip.has-video .still{animation:none}
@keyframes lp-drift{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.12) translate(-3%,2%)}}
.lp-badge{position:absolute;z-index:5;padding:.28em .6em;border-radius:99px;background:rgba(10,35,66,.62);color:#fff;font-size:.68em;font-weight:700;backdrop-filter:blur(6px)}

/* STEP 1 — upload */
.lp-species{display:flex;gap:.4em;margin:0 0 .75em;flex-wrap:nowrap;overflow:hidden}
.lp-species span{flex:none;padding:.32em .7em;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:.72em;font-weight:700;color:var(--stone)}
.lp-species span.on{background:var(--g);border-color:var(--g);color:#fff}
.s1 .lp-clip{height:76cqw}
.s1 .lp-badge.dur{right:3cqw;bottom:3cqw}.s1 .lp-badge.ok{left:3cqw;top:3cqw;background:rgba(70,96,96,.85);opacity:0;transform:translateY(-4px);transition:.4s}
.s1.picked .lp-badge.ok{opacity:1;transform:none}
.lp-ctx{margin-top:.8em;padding:.75em .85em;border-radius:4.4cqw;background:#F1E9D7;border:1px solid var(--line);min-height:27cqw}
.lp-ctx strong{display:block;font-size:.74em;color:var(--g);margin-bottom:.3em}
.lp-ctx .typed{font-size:.8em;color:#466060}
.lp-caret{display:inline-block;width:1.5px;height:1em;background:var(--g);vertical-align:-.15em;margin-left:1px;animation:lp-blink 1s steps(1) infinite}
@keyframes lp-blink{50%{opacity:0}}
.lp-btn{margin-top:.85em;display:flex;align-items:center;justify-content:center;gap:.4em;height:12cqw;border-radius:99px;background:var(--g);color:#fff;font-weight:800;font-size:.9em;opacity:.35;transition:opacity .4s,transform .3s}
.s1.ready .lp-btn{opacity:1}.s1.press .lp-btn{transform:scale(.96)}

/* STEP 2 — analyzing (from the analysis prototype) */
.s2 .lp-clip{height:122cqw}
.lp-scan{position:absolute;z-index:4;left:0;right:0;height:1.5px;top:6%;background:linear-gradient(90deg,transparent,var(--scan) 12%,var(--scan) 88%,transparent);box-shadow:0 0 12px rgba(129,166,132,.8),0 0 28px rgba(129,166,132,.4);animation:lp-scan 3.6s ease-in-out infinite alternate}
@keyframes lp-scan{to{top:92%}}
.lp-ring{position:absolute;z-index:6;top:3cqw;right:3cqw;width:11cqw;height:11cqw}
.lp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.lp-ring circle{fill:none;stroke-width:2.4}.lp-ring .t{stroke:rgba(255,255,255,.28)}.lp-ring .f{stroke:#fff;stroke-linecap:round;stroke-dasharray:106.8;stroke-dashoffset:106.8;transition:stroke-dashoffset .5s}
.lp-obs{position:absolute;z-index:6;max-width:62%;padding:.45em .6em;border-radius:3.2cqw;background:rgba(10,35,66,.66);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .45s,transform .45s}
.lp-obs.show{opacity:1;transform:none}
.lp-obs .k{display:flex;align-items:center;gap:.4em;font-size:.56em;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700}
.lp-obs .k:before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--sage);box-shadow:0 0 0 .3em rgba(129,166,132,.25)}
.lp-obs .m{font-size:.76em;color:#fff;font-weight:600;line-height:1.25}
.lp-prog{margin-top:.8em;padding:.8em .9em;border-radius:5cqw;background:#fff;border:1px solid var(--line)}
.lp-prog .row{display:flex;justify-content:space-between;align-items:flex-end;gap:.6em}
.lp-prog .stage{font-weight:800;font-size:.84em;color:var(--g)}.lp-prog .eta{font-size:.7em;color:var(--stone);white-space:nowrap}
.lp-bar{margin-top:.55em;height:1.4cqw;border-radius:99px;background:#DCE5D7;overflow:hidden}.lp-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--moss));transition:width .5s}
.lp-micro{margin-top:.5em;display:flex;align-items:center;gap:.5em;font-size:.7em;color:var(--stone)}
.lp-micro:before{content:"";flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--moss);animation:lp-pulse 1.3s ease-out infinite}
@keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgba(70,96,96,.45)}70%{box-shadow:0 0 0 .55em transparent}100%{box-shadow:0 0 0 0 transparent}}

/* STEP 3 — results */
.s3 .lp-clip{position:absolute;left:0;right:0;top:0;height:118cqw;border-radius:0}
.s3 .lp-status{color:#fff}.s3 .lp-topbtns{position:absolute;z-index:8;top:12cqw;left:4.5cqw;right:4.5cqw;display:flex;justify-content:space-between}
.s3 .lp-topbtns span{width:9.4cqw;height:9.4cqw;border-radius:50%;background:rgba(10,35,66,.55);color:#fff;display:grid;place-items:center;font-size:.85em}
.lp-sheet{position:absolute;left:3.6cqw;right:3.6cqw;top:90cqw;bottom:4.5cqw;display:flex;flex-direction:column;gap:2.2cqw;transform:translateY(14%);opacity:0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}
.s3.open .lp-sheet{transform:none;opacity:1}
.lp-card{background:var(--ivory);border:1px solid var(--line);border-radius:5cqw;padding:.85em .9em;box-shadow:0 10px 24px rgba(10,35,66,.12)}
.lp-title{font-family:"Playfair Display",Georgia,serif;font-weight:600;font-size:1.02em;line-height:1.15;color:var(--g)}
.lp-conf{display:flex;align-items:center;gap:.45em;margin:.4em 0 .55em;font-size:.74em;font-weight:700;color:var(--moss)}
.lp-conf svg{width:1.5em;height:1.5em;transform:rotate(-90deg)}.lp-conf circle{fill:none;stroke-width:4}.lp-conf .t{stroke:#DCE5D7}.lp-conf .f{stroke:var(--moss);stroke-linecap:round;stroke-dasharray:62.8;stroke-dashoffset:62.8;transition:stroke-dashoffset 1.2s ease}
.lp-voice{border-top:1px solid var(--line);padding-top:.55em;font-size:.82em;color:#0A2342;min-height:3.9em}
.lp-actions{display:flex;gap:2cqw}.lp-actions span{flex:1;height:10.5cqw;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:.76em;font-weight:800}
.lp-actions .p{background:var(--g);color:#fff}.lp-actions .s{background:#DCE5D7;color:var(--g)}
.lp-row{background:var(--ivory);border:1px solid var(--line);border-radius:4.4cqw;padding:.6em .8em;transition:all .5s}
.lp-row .rh{display:flex;align-items:center;gap:.55em;font-family:"Playfair Display",Georgia,serif;font-weight:600;color:var(--g);font-size:.92em}
.lp-row .rh em{margin-left:auto;font-style:normal;font-family:Inter,sans-serif;font-size:.8em;color:var(--stone);transition:transform .4s}
.lp-row .ic{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:#DCE5D7;font-size:.8em}
.lp-row .rb{max-height:0;overflow:hidden;transition:max-height .6s ease}
.lp-row.open .rb{max-height:40cqw}.lp-row.open .rh em{transform:rotate(180deg)}
.lp-sig{display:flex;justify-content:space-between;gap:.6em;margin-top:.45em;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62em;color:#0A2342;opacity:0;transform:translateX(-4px);transition:.4s}
.lp-sig.show{opacity:1;transform:none}.lp-sig b{color:var(--moss);font-weight:600}

@media (prefers-reduced-motion:reduce){.lp *{animation:none!important;transition:none!important}}

/* bottom tab bar (step 1) + reassurance (step 2) */
.lp-tabs{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;padding:.7em .4em 1.5em;background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
.lp-tabs span{display:flex;flex-direction:column;align-items:center;gap:.2em;font-size:.62em;font-weight:700;color:var(--stone)}
.lp-tabs span.on{color:var(--g)}
.lp-tabs svg{width:1.9em;height:1.9em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-reassure{margin-top:.9em;text-align:center;font-size:.7em;color:var(--stone);padding:0 .6em}