/* One family of phone frames for recorded and live application screens. */
.device-shell{padding:6px;background:#283b32;border:1px solid #607365;border-radius:36px;overflow:hidden;box-shadow:0 20px 40px -22px #14261d66}
.device-status{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#f3f1e9;color:#243f33;font:600 9px/1 Onest,sans-serif;border-radius:28px 28px 0 0;position:relative}
.device-status i{position:absolute;width:45px;height:5px;top:8px;left:50%;transform:translateX(-50%);background:#283b32;border-radius:5px}
.device-bottom{height:16px;background:#f3f1e9;display:grid;place-items:center;border-radius:0 0 28px 28px}
.device-bottom:after{content:'';width:34%;height:3px;border-radius:5px;background:#283b32}
.feature-stories .feature-film-screen{border:0;border-radius:0;box-shadow:none}
.feature-stories .feature-film{width:270px}.feature-device{width:100%}
.feature-stories .feature-navigation,.feature-stories .feature-count{display:none}
.feature-stories .feature-phase{height:28px;margin-bottom:12px}.feature-phase svg{width:26px;height:26px}
.feature-stories .feature-tabs button>span{flex:0 0 24px;display:grid;place-items:center;color:inherit}.feature-tabs svg{width:22px;height:22px}
.feature-steps li{display:block}.feature-steps li>button{width:100%;display:flex;align-items:center;gap:11px;text-align:left;color:inherit;border:0;background:none;border-radius:10px;padding:5px 4px;font:inherit;cursor:pointer;transition:background .2s}
.feature-steps li>button:hover{background:color-mix(in srgb,var(--scene-accent) 9%,transparent)}.feature-steps li>button:focus-visible{outline:2px solid var(--scene-accent);outline-offset:3px}.step-jump{margin-left:auto;opacity:0;transition:opacity .2s}.feature-steps button:hover .step-jump,.feature-steps button:focus-visible .step-jump{opacity:1}
.feature-play[hidden]{display:none}.feature-stories .feature-mascot img{width:120px;height:88px;object-fit:contain;border-radius:12px;image-rendering:pixelated;animation:none;filter:none}.story-result .feature-mascot img{animation:story-frog-cheer .65s ease-out}
.feature-stories .feature-mascot{gap:14px}.feature-stories .feature-swiper{padding-bottom:20px}.feature-stories .feature-swiper>.capabilities-landscape{bottom:-40px}
/* The heading belongs to the instructions, aligned with the top of the phone. */
.tour-heading{display:block;padding:0;border:0;margin:0 0 30px}.tour-heading>p{margin:16px 0 0;max-width:300px;font-size:14px;line-height:1.6}.tour-heading h2{font-size:clamp(29px,3vw,40px);line-height:1.08}.tour-heading .eyebrow{margin-bottom:12px}
.tour-stage .tour-side{padding-top:0}.tour-stage{align-items:start;grid-template-columns:minmax(0,1fr) 350px minmax(0,.72fr);gap:40px;padding-top:20px}.tour-center{margin-top:0}.tour-outcome{margin-top:160px}
.tour-app.device-shell{border-radius:36px;padding:6px;overflow:hidden}.tour-bar{border-radius:28px 28px 0 0;background:var(--paper);height:34px;padding-inline:14px;border-bottom:1px solid var(--line)}.tour-panel{height:560px}.tour-app .device-bottom{background:var(--paper)}
.tour-roadmap{gap:10px}.tour-roadmap li,.tour-roadmap li.active{min-height:82px}.tour-scenery-frog img{border-radius:14px;image-rendering:pixelated}.tour-scenery-frog{width:150px;right:0;bottom:0}
@media(min-width:761px) and (max-height:800px){.tour-panel{height:530px}.tour-heading{margin-bottom:22px}.tour-heading h2{font-size:34px}.tour-stage .tour-side{padding-top:0}.tour-outcome{margin-top:150px}.feature-stories .feature-film{width:246px}.feature-stories .feature-mascot img{width:110px;height:81px}.feature-stories .feature-copy{min-height:420px!important}}
@media(min-width:761px) and (max-width:1100px){.tour-stage{grid-template-columns:minmax(0,1fr) 320px minmax(0,.65fr);gap:22px}.tour-heading h2{font-size:29px}.tour-heading>p{font-size:12px}.feature-stories .feature-film{width:220px}.feature-stories .feature-mascot{gap:8px}.feature-stories .feature-mascot img{width:88px;height:65px}}
@media(max-width:760px){.tour-heading{margin:0 0 24px}.tour-heading h2{font-size:33px}.tour-heading>p{max-width:100%;font-size:14px;margin-top:12px}.tour-stage{display:flex;flex-direction:column;gap:0;padding-top:0}.tour-stage .tour-side{display:block;width:100%;padding:0}.tour-plan{position:relative;top:auto}.tour-panel{height:560px}.tour-outcome{margin-top:18px;width:100%}.tour-scenery-frog{display:none}.feature-stories .feature-film{width:264px}.feature-stories .feature-copy{min-height:260px!important}.feature-stories .feature-tabs button{min-width:145px}.feature-stories .feature-mascot img{width:108px;height:79px}.feature-stories .feature-film .feature-mascot img{width:108px}.feature-stories .feature-phase{display:none}.feature-stories .feature-swiper{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.story-result .feature-mascot img{animation:none}}

@media(max-width:760px){.travel-landing.feature-film-in-view .floating-actions{display:none}.feature-stories .feature-film-screen:focus-visible{outline:3px solid var(--scene-accent);outline-offset:5px}}
@media(max-width:760px){.tour-stage .tour-side{order:0}.tour-stage .tour-center{order:1}.tour-stage .tour-outcome{order:2}}

/* V17: standalone pixel characters, no illustrated scene cards. */
.feature-stories .feature-mascot img{width:120px;height:100px;object-fit:contain;border-radius:0;background:none;animation:frog-wait-breathe 3s ease-in-out infinite;transform-origin:50% 90%}.story-result .feature-mascot img{animation:story-frog-cheer .65s ease-out}.tour-scenery-frog img{border-radius:0}
@keyframes frog-wait-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.feature-stories .feature-mascot img{animation:none}}

@media(min-width:761px) and (max-height:800px){.feature-stories .feature-mascot img{width:110px;height:92px}}
@media(min-width:761px) and (max-width:1100px){.feature-stories .feature-mascot img{width:88px;height:74px}}
@media(max-width:760px){.feature-stories .feature-mascot img{width:108px;height:90px}}

/* V19: compact, recognisable steps and a useful completion card. */
.feature-film-caption,.demo-disclosure,.support-platforms{display:none!important}
.capabilities-support{grid-template-columns:1fr}.support-ai{max-width:780px}
.tour-marker,.tour-roadmap li.active .tour-marker,.tour-roadmap li.done .tour-marker{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:58px}
.tour-marker>svg{display:block;width:26px;height:26px;flex-shrink:0;opacity:1}
.tour-number,.tour-roadmap li.done .tour-number{font-size:11px;letter-spacing:.08em;font-weight:600;line-height:1}
.tour-roadmap li.active .tour-marker>svg{animation:step-icon-in .45s ease-out}
@keyframes step-icon-in{from{transform:translateY(4px);opacity:0}to{transform:none;opacity:1}}
.tour-outcome,.tour-stage.completed .tour-outcome{padding:24px 20px 20px;border:1px solid var(--line);border-radius:20px;background:var(--paper);gap:14px;margin-top:120px}
.outcome-frog{position:absolute;width:94px;height:78px;object-fit:contain;image-rendering:pixelated;right:12px;top:-62px;pointer-events:none;filter:drop-shadow(0 5px 3px #19372620)}
.tour-stage.completed .outcome-frog{animation:story-frog-cheer .7s ease-out}
.tour-outcome .tour-result{display:none;padding:0;border:0;min-height:0;background:none;gap:9px}
.tour-outcome .tour-result.visible{display:flex}.tour-outcome .tour-result p{font-size:12px;line-height:1.5}.tour-outcome .result-check{width:24px;height:24px;font-size:17px;flex-shrink:0}
.outcome-receipt{border-block:1px dashed var(--line);padding:13px 0 12px}.outcome-receipt[hidden]{display:none}
.outcome-bill-name{font-size:14px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;margin:0 0 8px}.outcome-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;color:var(--muted)}.outcome-total strong{font-size:18px;line-height:1.3;letter-spacing:-.035em;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.outcome-people{display:flex;align-items:center;margin-top:12px;padding-left:0}.outcome-people img,.outcome-people span{width:28px;height:28px;border:2px solid var(--paper);border-radius:50%;background:var(--tint);margin-left:-6px}.outcome-people img:first-child{margin-left:0}.outcome-people span{display:grid;place-items:center;font-size:10px;color:var(--green);font-weight:600}
.outcome-help{font-size:12px;line-height:1.55;color:var(--muted);margin-top:11px}.tour-stage.completed .outcome-help{display:none}.tour-convert-title{font-size:19px}.tour-stage.completed .tour-convert-title{font-size:17px}.tour-convert .section-actions{margin-top:16px}.tour-convert .section-actions .button{font-size:13px;padding-inline:14px}
@media(max-width:1100px) and (min-width:761px){.tour-outcome,.tour-stage.completed .tour-outcome{padding:18px 12px}.tour-convert .section-actions .button{font-size:11px;padding-inline:9px}.outcome-total{flex-wrap:wrap}.tour-marker,.tour-roadmap li.active .tour-marker,.tour-roadmap li.done .tour-marker{width:29px}.tour-marker>svg{width:24px;height:24px}}
@media(max-width:760px){.tour-marker,.tour-roadmap li.active .tour-marker,.tour-roadmap li.done .tour-marker{width:26px;height:40px;gap:3px}.tour-marker>svg{width:22px;height:22px}.tour-number,.tour-roadmap li.done .tour-number{font-size:9px}.tour-roadmap li,.tour-roadmap li.active{gap:8px;min-height:74px}.tour-outcome,.tour-stage.completed .tour-outcome{margin-top:58px;padding:22px;gap:12px}.tour-outcome .tour-result.visible{display:flex;visibility:visible}.outcome-frog{right:20px}.tour-convert-title{max-width:none}.outcome-help{max-width:280px}.tour-outcome .outcome-total strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){.tour-roadmap li.active .tour-marker>svg,.tour-stage.completed .outcome-frog{animation:none}}
.tour-roadmap li .tour-marker>svg,.tour-roadmap li.done .tour-marker>svg{display:block}

/* V21: draw attention to the real app without covering its controls or shifting layout. */
.hero-media{position:relative}
.hero-demo-cue{position:absolute;z-index:8;top:-78px;left:50%;width:max-content;max-width:310px;transform:translate(-50%,8px);display:flex;align-items:center;gap:10px;padding:12px 17px;background:var(--paper);color:var(--ink);border:1px solid var(--green);border-radius:16px;box-shadow:0 6px 22px #18382b16;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .35s,visibility .25s}
.hero-demo-cue strong{display:block;font-size:15px;line-height:1.3;letter-spacing:-.025em}.hero-demo-cue div>span{display:block;font-size:12px;line-height:1.45;margin-top:3px;color:var(--muted)}
.hero-cue-dot{width:9px;height:9px;background:var(--green);border-radius:50%;flex:none;box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 12%,transparent)}
.hero-demo-cue svg{position:absolute;top:calc(100% - 3px);left:calc(50% - 10px);width:35px;height:38px;fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.demo-cue-active .hero-demo-cue{visibility:visible;opacity:1;transform:translate(-50%,0)}
.hero-media:after{content:'';position:absolute;inset:-5px -5px 43px;border:2px solid var(--green);border-radius:43px;opacity:0;pointer-events:none;z-index:5}
.demo-cue-ready:after{animation:hero-demo-halo 1.5s ease-out 3}
.demo-cue-ready .hero-demo-cue svg{animation:hero-demo-point 1.2s ease-in-out 4}
.hero-art:has(.demo-cue-active) .scribble{opacity:0;transition:opacity .2s}
@keyframes hero-demo-halo{0%{opacity:.65;box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 22%,transparent)}100%{opacity:0;box-shadow:0 0 0 19px transparent}}
@keyframes hero-demo-point{0%,100%{translate:0 0}50%{translate:0 5px}}
@media(max-width:760px){.hero-demo-cue{top:-78px;max-width:calc(100vw - 44px);padding:11px 15px}.hero-demo-cue strong{font-size:14px}.hero-demo-cue div>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-demo-cue{transition:none}.demo-cue-ready:after,.demo-cue-ready .hero-demo-cue svg{animation:none}.demo-cue-ready:after{opacity:.45}}