/* A little phone companion, with a paper-soft silicone case and living ears. */
:root{--glow-blue:#9ceaf6;--glow-cyan:#61d5ef;--case-pink:#efcbdc;--case-lilac:#c1afd7}
.bunny-phone{--phone-angle:-3deg;position:relative;width:308px;flex-shrink:0;padding:12px 12px 51px;border-radius:48px;background:linear-gradient(145deg,#f9e8f0 0%,#ddc8e7 48%,#bbafd7 100%);border:1px solid #fff4f9;box-shadow:inset 3px 4px 3px #fff9, inset -4px -3px 5px #947ba76b,12px 25px 50px #38274033;transform:rotate(var(--phone-angle));animation:phone-float 7s ease-in-out infinite;isolation:isolate}
.phone-bezel{position:relative;padding:5px;background:#29222d;border-radius:36px;box-shadow:0 1px 2px #fff8}
.phone-screen{position:relative;border-radius:31px;overflow:hidden;aspect-ratio:1206/2622;background:var(--paper);isolation:isolate}
.phone-island{position:absolute;top:13px;left:50%;width:30%;height:16px;transform:translateX(-50%);border-radius:20px;background:#151419;box-shadow:inset 0 -1px 1px #3b323e;pointer-events:none;z-index:4}
.phone-island::after{content:'';position:absolute;right:10px;top:5px;width:6px;height:6px;background:#273b53;border:1px solid #4b435c;border-radius:50%}
.bunny-ears{position:absolute;inset:0 0 auto;height:1px;z-index:-1;pointer-events:none}.bunny-ear{position:absolute;bottom:-25px;width:58px;height:131px;background:linear-gradient(105deg,#fff6fa,#e3d1e9 63%,#b9a6ce);border:1px solid #fff4fb;border-radius:72% 72% 40% 40%;box-shadow:inset 3px 3px 4px #fff6,3px 8px 13px #24182c22;transform-origin:50% 94%}.ear-left{left:23%;transform:rotate(-13deg)}.ear-right{right:17%;height:145px;transform:rotate(12deg)}.bunny-ear i{position:absolute;inset:14px 14px 18px;border-radius:75% 75% 42% 42%;background:linear-gradient(105deg,#dc9fbd,#f3c4d8 75%);box-shadow:inset 2px 3px 5px #be7eaa36}
.case-side{position:absolute;width:5px;background:#cab5d7;border:1px solid #f9edf5;border-radius:5px}.side-volume{left:-5px;top:110px;height:56px}.side-power{right:-5px;top:143px;height:42px}
.phone-face{position:absolute;left:50%;bottom:7px;width:154px;height:39px;transform:translateX(-50%);border-radius:18px;min-height:39px}.phone-face svg{width:150px;height:38px;overflow:visible}.phone-eye{fill:#483647}.phone-pupil{fill:#fff5f2}.phone-blush{fill:#df98b6;opacity:.6}.phone-mouth{fill:none;stroke:#483647;stroke-width:2.5;stroke-linecap:round}.smile-happy{display:none;fill:#bc5987}.phone-eyes{transform-box:fill-box;transform-origin:50% 50%;animation:phone-blink 6.7s infinite}.phone-speech{position:absolute;bottom:-4px;right:93%;width:173px;padding:10px 13px;background:var(--paper);color:var(--plum);font-size:25px;line-height:1.02;border-radius:17px 17px 3px 17px;box-shadow:0 6px 17px #21182b26;opacity:0;transform:translateY(6px) rotate(-4deg);transition:opacity .3s,transform .4s var(--entrance);pointer-events:none;z-index:8}
.bunny-phone.is-chatty .phone-speech,.bunny-phone[data-mood=happy] .phone-speech,.bunny-phone[data-mood=guiding] .phone-speech{opacity:1;transform:translateY(0) rotate(-4deg)}.bunny-phone[data-mood=happy] .smile-curious{display:none}.bunny-phone[data-mood=happy] .smile-happy{display:block}.bunny-phone[data-mood=happy] .ear-left{animation:ear-hello .8s var(--entrance) 2}.bunny-phone[data-mood=happy] .ear-right{animation:ear-hello .8s .12s var(--entrance) 2 reverse}.bunny-phone[data-mood=guiding] .phone-eyes{animation:phone-blink 4.9s infinite}.bunny-phone.is-chatty .ear-left{transform:rotate(-23deg)}
.native-navigation-screen{width:100%;height:100%;object-fit:contain}.mini-screen-status{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;font-size:9px;font-weight:750;min-height:41px}.mini-screen-status svg{width:27px;height:12px}.mini-screen-copy{padding:26px 18px 0;text-align:center}.mini-screen-copy .handnote{font-size:27px;color:var(--coral-dark)}.mini-screen-copy strong{display:block;font-family:Fredoka,sans-serif;font-size:18px;line-height:1.2;margin-top:8px}.phone-outline{width:88%;height:43%;margin:13px auto 0}.phone-outline path{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #e9527820)}.mini-screen-friend{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:10px}.mini-screen-friend img{width:62px;height:62px;object-fit:contain}.mini-screen-friend .handnote{font-size:24px}.mini-screen-caption{display:block;font-size:8px;text-align:center;margin-top:15px;color:var(--muted)}.phone-home-bar{position:absolute;bottom:7px;left:32%;width:36%;height:3px;border-radius:10px;background:#4435438c}
.hero-world{padding-top:0;min-height:585px}.hero-bunny{--phone-angle:12deg;position:absolute;right:7px;top:54px;width:248px;padding:10px 10px 49px;box-shadow:inset 3px 4px 3px #fff9,inset -4px -3px 5px #947ba76b,18px 32px 65px #100d3155}.hero-bunny .bunny-ear{width:49px;height:117px}.hero-bunny .ear-right{height:130px}.hero-bunny .bunny-ear i{inset:12px 12px 16px}.hero-bunny .phone-speech{bottom:0;right:91%;font-size:22px;width:153px}.hero-route-sheet{position:absolute;top:120px;left:-15px;width:86%;z-index:3;transform:rotate(-7deg) rotateX(var(--map-rx)) rotateY(var(--map-ry));border:1px solid #d0f9ffb3;box-shadow:9px 24px 52px #0a142d88,0 8px 28px #5ae4fa2c;animation:screen-emerge 1.8s .65s var(--entrance) both}.hero-note{top:-24px;left:13px;right:auto;font-size:29px;transform:rotate(-5deg)}.note-swoop{left:183px;right:auto;top:16px;width:61px;height:72px;transform:rotate(-21deg)}.hero-friend{left:-138px;bottom:-17px}.hero-friend img{width:230px}.hero-friend .handnote{font-size:28px}.hero-bottom{bottom:23px}.phone-projection{position:absolute;inset:73px 0 43px 6%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 80% 50%,#abf5ff3b,transparent 67%);clip-path:polygon(70% 8%,100% 59%,3% 94%,0 20%)}.phone-projection span{position:absolute;width:5px;height:5px;border-radius:50%;background:#c9faff;box-shadow:0 0 9px 3px #72e7ff7a;animation:projection-dust 3s ease-out infinite}.phone-projection span:nth-child(1){left:75%;top:40%}.phone-projection span:nth-child(2){left:85%;top:58%;animation-delay:-1s}.phone-projection span:nth-child(3){left:62%;top:80%;animation-delay:-2s}
.journey-workspace{grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}.phone-demo-stage{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:133px 16px 35px;isolation:isolate}.phone-view-switch{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border:1px solid #dac6d5;border-radius:100px;white-space:nowrap}.phone-view-switch button{min-height:40px;font-size:12px;padding:8px 15px;border-radius:100px}.phone-view-switch button[aria-pressed=true]{background:var(--plum);color:var(--paper)}.phone-view-switch button:hover:not([aria-pressed=true]){background:#eddde8}.journey-bunny{width:310px}.phone-proof{font-size:11px;line-height:1.5;color:var(--muted);margin-top:23px;text-align:center}.phone-stage-note{position:absolute;left:-6px;top:77px;transform:rotate(-8deg);font-size:28px;color:var(--coral-dark);z-index:2}.phone-orbit{position:absolute;bottom:64px;left:7%;right:7%;height:58px;border:1px solid #af9ccb6b;border-radius:50%;background:radial-gradient(ellipse,#dcc8e080,transparent 65%);z-index:-1;transform:rotate(-4deg)}.phone-orbit span{position:absolute;width:5px;height:5px;background:#75c9e0;border-radius:50%;box-shadow:0 0 8px #76d8ef;left:19%;top:16%}.phone-orbit span:nth-child(2){left:80%;top:55%;background:#eaa7c6}.phone-orbit span:nth-child(3){left:44%;top:91%;width:3px;height:3px}
.live-route-screen{position:absolute;inset:0;display:flex;flex-direction:column;padding-bottom:20px;background:var(--paper)}.live-route-screen .route-toolbar{padding:14px 14px 2px;background:transparent;font-size:10px}.live-route-screen .preview-tag{font-size:9px}.live-route-screen .turn-instruction{position:relative;inset:auto;flex-shrink:0;margin:13px 12px 3px;padding:12px 11px;gap:10px;border-radius:13px;min-height:64px}.live-route-screen .turn-instruction strong{font-size:12px}.live-route-screen .turn-instruction span{font-size:10px}.live-route-screen .turn-arrow{width:26px;height:26px}.live-route-screen .street-map{flex:1;width:100%;height:250px;min-height:200px;max-height:290px;aspect-ratio:auto;border-radius:0;margin:3px 0}.phone-run-summary{display:flex;align-items:center;gap:8px;padding:11px 14px 0;border-top:1px solid #ded1d9}.phone-run-summary img{width:43px;height:43px;object-fit:contain}.phone-run-summary .handnote{font-size:20px;color:var(--coral-dark);line-height:1.2}.phone-run-summary strong{font-weight:700}.phone-run-note{font-size:11px;line-height:1.6;text-align:center;padding:11px 20px 5px}.live-route-screen .journey-map-footer{font-size:8px;padding:11px 14px;margin-top:auto;background:transparent}.route-spark{transform-box:fill-box;transform-origin:50% 50%;animation:route-twinkle 2.3s ease-in-out infinite;animation-delay:var(--spark-delay)}
@keyframes phone-float{0%,100%{transform:translateY(0) rotate(var(--phone-angle))}50%{transform:translateY(-7px) rotate(calc(var(--phone-angle) + 1.5deg))}}@keyframes phone-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.08)}}@keyframes ear-hello{0%,100%{transform:rotate(-13deg)}35%{transform:rotate(-27deg)}70%{transform:rotate(-4deg)}}@keyframes screen-emerge{from{opacity:.7;transform:translate(60px,55px) scale(.79) rotate(5deg);filter:blur(3px)}to{opacity:1;transform:rotate(-7deg) rotateX(var(--map-rx)) rotateY(var(--map-ry));filter:blur(0)}}@keyframes projection-dust{0%{opacity:0;transform:translate(10px,10px) scale(.5)}30%{opacity:.8}100%{opacity:0;transform:translate(-70px,-85px) scale(1.1)}}@keyframes route-twinkle{0%,100%{opacity:.4}50%{opacity:1}}
body[data-motion=off] .bunny-phone,body[data-hidden=true] .bunny-phone{animation:none;transform:rotate(var(--phone-angle))}body[data-motion=off] .hero-route-sheet{animation:none;transform:rotate(-7deg)}body[data-motion=off] .phone-projection span{animation:none;opacity:.6}body[data-motion=off] .phone-eyes{animation:none;transform:none}body[data-motion=off] .route-spark{animation:none;opacity:1}
@media(max-width:1050px) and (min-width:768px){.hero-world{min-height:530px}.hero-bunny{width:221px;right:0;top:48px}.hero-route-sheet{width:94%;top:119px;left:-28px}.hero-friend{left:-98px;bottom:-48px}.hero-friend img{width:195px}.hero-note{font-size:26px}.journey-workspace{gap:32px}.phone-stage-note{font-size:24px;left:-12px}.journey-bunny{width:288px}.phone-demo-stage{padding-inline:0}.phone-speech{right:75%;width:155px;font-size:22px}}
@media(max-width:767px){.hero-content{gap:34px;padding-bottom:103px}.hero-world{padding:0;min-height:482px;margin-top:36px}.hero-bunny{width:190px;right:8px;top:40px;padding:8px 8px 44px;border-radius:38px}.hero-bunny .phone-bezel{border-radius:30px}.hero-bunny .phone-screen{border-radius:26px}.hero-bunny .bunny-ear{width:36px;height:92px;bottom:-18px}.hero-bunny .ear-right{height:105px}.hero-bunny .bunny-ear i{inset:11px 9px 14px}.hero-bunny .mini-screen-copy{padding-top:17px}.hero-bunny .mini-screen-copy .handnote{font-size:23px}.hero-bunny .mini-screen-copy strong{font-size:14px}.hero-bunny .mini-screen-status{padding:10px 14px 6px;font-size:8px;min-height:32px}.hero-bunny .phone-island{top:10px;height:13px}.hero-bunny .phone-island::after{top:4px;width:5px;height:5px;right:7px}.hero-bunny .mini-screen-friend{margin-top:6px}.hero-bunny .mini-screen-friend img{width:46px;height:46px}.hero-bunny .mini-screen-friend .handnote{font-size:18px}.hero-bunny .mini-screen-caption{font-size:7px;margin-top:8px}.hero-bunny .phone-face{height:34px;width:130px;bottom:5px}.hero-bunny .phone-face svg{width:130px;height:34px}.hero-route-sheet{top:105px;left:-3px;width:92%;padding:10px 10px 8px;transform:rotate(-6deg);border-radius:19px}.hero-note{top:-20px;left:0;font-size:25px}.note-swoop{left:145px;top:11px;width:53px;height:64px}.hero-friend{left:-6px;bottom:-40px;gap:0}.hero-friend img{width:165px}.hero-friend .handnote{font-size:25px;margin-top:39px}.hero-bunny .phone-speech{right:75%;bottom:-14px;width:137px;font-size:21px}.hero-bottom{bottom:22px}.journey-workspace{display:flex;gap:28px}.phone-demo-stage{width:100%;padding:131px 0 27px}.journey-bunny{width:min(292px,91%);--phone-angle:-2deg}.phone-stage-note{top:75px;left:-5px;font-size:27px}.phone-view-switch button{font-size:11px;padding-inline:13px}.phone-proof{font-size:10px}.phone-orbit{bottom:56px;left:0;right:0}.phone-speech{right:62%;bottom:-9px;font-size:23px;width:149px}.journey-console{padding-top:0}.live-route-screen .turn-instruction{max-width:none;top:auto;left:auto;right:auto}.live-route-screen .street-map{min-height:185px;height:240px}.phone-run-summary .handnote{font-size:19px}.phone-run-note{padding-top:7px}
}
@media(max-width:360px){.hero-world{min-height:455px}.hero-bunny{width:178px;right:4px;top:41px}.hero-route-sheet{top:110px;left:-1px;width:94%}.hero-friend{bottom:-30px;left:-15px}.hero-friend img{width:150px}.hero-friend .handnote{font-size:22px}.hero-note{font-size:23px}.phone-stage-note{font-size:25px;left:-2px}.journey-bunny{width:264px}.phone-run-summary .handnote{font-size:17px}.phone-run-summary img{width:35px;height:35px}.live-route-screen .street-map{min-height:165px;height:205px}.live-route-screen .turn-instruction{margin-top:6px;min-height:60px;padding:9px}.phone-speech{right:57%;font-size:21px;width:137px}.live-route-screen .phone-run-note{font-size:10px;padding-top:7px}.hero-content{padding-bottom:92px}}
@media(prefers-reduced-motion:reduce){.bunny-phone{transform:rotate(var(--phone-angle))}.hero-route-sheet{transform:rotate(-7deg);filter:none}.route-spark{opacity:1}}
.screen-arrival{position:fixed;width:230px;height:230px;z-index:70;pointer-events:none;isolation:isolate}.screen-arrival img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 15px #32244342);position:relative;z-index:1}.arrival-aura{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,#b6f5ff95,#ddd0fb35 48%,transparent 70%)}.arrival-aura::before,.arrival-aura::after{content:'';position:absolute;inset:3%;border:1px solid #bdedffb3;border-radius:50%;transform:rotate(-25deg) scaleY(.6);box-shadow:0 1px 10px #91e6ef40}.arrival-aura::after{inset:16%;transform:rotate(45deg) scaleY(.7);border-color:#ffdfef}
/* Keep the projected map above the phone's expression and leave its metadata clear. */
.hero-route-sheet{top:82px;width:72%;left:-19px}.hero-friend{left:-177px;bottom:-54px}.hero-friend img{width:168px}.hero-friend .handnote{font-size:26px;margin-top:42px}.phone-face{height:44px;bottom:4px}.phone-demo-stage{padding-top:165px}.journey-bunny{padding-bottom:57px}.bioluminescence{background:radial-gradient(ellipse at 58% 78%,#3279a342,transparent 66%),linear-gradient(0deg,#12345426,transparent 78%)}
@media(min-width:768px) and (max-width:1050px){.hero-route-sheet{width:83%;top:95px;left:-22px}.hero-route-choice span{display:none}.hero-route-choices{gap:5px}.hero-route-sheet .hero-route-choice{padding:5px 7px}.hero-friend{left:-126px;bottom:-57px}.hero-friend img{width:149px}.hero-friend .handnote{font-size:24px}.hero-bunny{right:26px;--phone-angle:7deg}.phone-stage-note{top:101px}}
@media(max-width:360px){.hero-route-sheet{top:85px;width:88%}.hero-bunny{top:34px;right:10px}.hero-friend{left:-14px;bottom:-28px}.hero-friend img{width:135px}.hero-friend .handnote{font-size:22px}.hero-note{top:-38px}.phone-stage-note{font-size:24px}}
.hero-route-sheet{top:40px}@media(min-width:768px) and (max-width:1050px){.hero-route-sheet{top:50px}}@media(max-width:767px){.hero-route-sheet{top:25px}}@media(max-width:360px){.hero-route-sheet{top:28px}}
@media(max-width:767px){.hero-route-sheet{width:88%;top:63px;left:-3px}.hero-bunny{right:14px;top:35px;--phone-angle:8deg}.hero-world{min-height:470px}.hero-friend{left:-8px;bottom:-32px}.hero-friend img{width:148px}.hero-friend .handnote{font-size:24px;margin-top:45px}.hero-bunny .phone-face{height:44px;bottom:0}.hero-bunny .phone-face svg{height:36px}.hero-note{top:-39px;font-size:23px}.note-swoop{left:143px;top:-8px;width:48px}.phone-demo-stage{padding-top:167px}.phone-stage-note{top:101px}.phone-speech{bottom:-9px}}

body[data-hidden=true] .route-spark{animation-play-state:paused!important}

.hero[data-motion-visible=false] .route-spark{animation-play-state:paused!important}
