/* Let the mascot share the page canvas; no illustration card or backdrop. */
.site-nav,.hero{position:relative;isolation:isolate}
.site-nav::before,.hero::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:#fff;pointer-events:none}
.mascot-stage{position:relative;width:100%;align-self:center;display:flex;flex-direction:column;align-items:center}.mascot-tag{font-size:10px;font-weight:700;letter-spacing:1.7px;color:#a54a1e;margin-bottom:12px}.mascot-stage video{background:#fff}@media(max-width:760px){.mascot-stage{margin:35px 0 20px}}
/* The phone, arm, and wrist are animated together in one continuous video. */
.story-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:#fff;isolation:isolate;container-type:inline-size}
.mascot-stage video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;filter:contrast(1.08) brightness(1.08);transform-origin:53% 49%;transform:scale(1) rotate(0);will-change:transform}
.story-stage[data-phase="push"] video,.story-stage[data-phase="manifest"] video,.story-stage[data-phase="reset"] video{transform:scale(4.2) rotate(-8deg);transition:transform 2.25s cubic-bezier(.42,0,.22,1)}
.story-stage[data-phase="scan"] video{transition:none}
.manifest-reveal{position:absolute;inset:0;background:#f7f8fa;z-index:4;padding:3% 4%;opacity:0;pointer-events:none;transition:opacity .45s ease}
.manifest-reveal-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#80838c}.manifest-reveal-head>img{width:22px;height:22px}
.manifest-reveal h3{font-size:20px;font-weight:800;letter-spacing:-.7px;margin:3px 0 8px}
.saved-banner{display:flex;gap:7px;align-items:center;font-size:10px;color:#396a44;margin-bottom:7px}.saved-banner span{background:#e6f0e4;width:19px;height:19px;border-radius:50%;display:grid;place-items:center}
.saved-lot{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:white;border:1px solid #e2e4e8;border-radius:13px;overflow:hidden;height:60%}
.saved-lot-photo{position:relative;width:100%;height:auto;aspect-ratio:271/204;align-self:center;overflow:hidden;background:white}.saved-lot-photo img{position:absolute;width:143.912%;max-width:none;left:-37.269%;top:-90.196%}
.saved-lot-details{padding:7px 10px 7px 5px}.saved-lot-details small{font-size:8px;letter-spacing:1.5px;color:#848790;display:block}.saved-lot-details strong{font:800 27px/1.2 Manrope,sans-serif;letter-spacing:-1px}.saved-lot-details h4{font:750 11px/1.35 Manrope,sans-serif;margin:5px 0;color:#34373a}.saved-lot-details p{display:none}.saved-pill{font-size:8px;background:#fff0e6;color:#ab4b1c;display:inline-block;border-radius:5px;padding:5px 6px}
.transition-wash{position:absolute;inset:0;background:#fff;z-index:5;opacity:0;pointer-events:none;transition:opacity .35s ease}
.story-stage[data-phase="manifest"] .manifest-reveal,.story-stage[data-phase="reset"] .manifest-reveal{opacity:1}
.story-stage[data-phase="reset"] .transition-wash{opacity:1;transition:opacity .45s ease}

/* Keep the final app view inside the phone-screen reveal at compact widths. */
.manifest-reveal{display:flex;flex-direction:column}
.manifest-reveal h3{font-size:clamp(14px,3.7cqw,20px);margin:2px 0 5px}
.manifest-reveal-head>img{width:18px;height:18px}
.saved-banner{font-size:clamp(8px,1.8cqw,10px);margin-bottom:5px}
.saved-banner span{width:17px;height:17px}
.saved-lot{flex:1;min-height:0;height:auto}
.saved-lot-photo{max-height:100%}
.saved-lot-details strong{font-size:clamp(20px,5.2cqw,27px)}
.saved-lot-details h4{font-size:clamp(9px,2.1cqw,11px);margin:3px 0}
.saved-pill{font-size:7px;padding:3px 5px}