.phone{--phone-radius:40px;width:306px;max-width:100%;box-sizing:border-box;margin:auto;padding:6px;background:#283b32;border-radius:var(--phone-radius);border:1px solid #607365;box-shadow:0 14px 26px -16px #14261d40;overflow:hidden}.phone-display{border-radius:calc(var(--phone-radius) - 7px);background:#f3f0e6;overflow:hidden}.phone-status{position:relative;height:26px;background:#f3f0e6;color:#243f33;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:10px;font-weight:600}.phone-status svg{width:34px;height:12px}.speaker{position:absolute;left:50%;transform:translateX(-50%);width:48px;height:5px;background:#283b32;border-radius:5px;top:8px}.phone-screen{position:relative;width:100%;background:#f3f0e6;overflow:hidden}.phone-screen video{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.phone-bottom{height:17px;background:#f3f0e6;display:grid;place-items:center}.phone-bottom span{height:3px;width:34%;border-radius:5px;background:#283b32}
  .film-control{display:flex;align-items:center;justify-content:space-between;width:292px;max-width:100%;margin:16px auto 0;color:var(--muted);height:36px}.film-control button{display:flex;gap:8px;align-items:center;border:0;background:transparent;color:var(--ink);font-size:12px;padding:8px 0;cursor:pointer}.film-control button>span{display:grid;place-items:center;width:20px;font-size:18px}.film-control button:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:4px}.film-time{font-variant-numeric:tabular-nums;font-size:11px}
/* Existing landing artwork, with the real app recording in place of the photo. */
.travel-landing .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding-block:38px 48px}
.travel-landing .hero-art{height:640px;padding:0;align-items:center;justify-content:center;overflow:visible}
.travel-landing .hero-art::before{inset:60px 0 68px 0;border-radius:46% 46% 14px 14px}
.hero-media{position:relative;width:292px;max-width:100%;z-index:1;scroll-margin-top:32px}
.hero-media .phone{width:100%;max-width:100%;box-shadow:0 20px 40px -22px #14261d66}
.hero-media .film-control{width:calc(100% - 16px);height:44px;margin-top:8px}
.hero-media .film-control button{min-height:44px;padding:6px 10px 6px 0;gap:6px}
.hero-media .film-time{font-size:11px}
.travel-landing .hero .scribble{top:31px;left:0;max-width:128px;font-size:21px;z-index:2}
.travel-landing .hero .sticky-note{bottom:67px;left:-8px;transform:rotate(-5deg);padding:13px 17px;font-size:14px;z-index:2}
.travel-landing .hero .quick-start{max-width:480px}
.travel-landing .hero .actions{margin-top:25px}
.travel-landing .scenarios{padding-top:48px}
@media(min-width:761px) and (max-width:1100px){.travel-landing .hero{gap:35px}.travel-landing .hero-art{height:580px}.hero-media{width:262px}.travel-landing .hero .scribble{font-size:17px;top:7px;left:-8px}.travel-landing .hero .sticky-note{font-size:12px;left:-15px;bottom:27px}}
@media(max-width:760px){
 .travel-landing .hero{display:flex;gap:28px;padding-block:26px 24px}
 .travel-landing .hero-art{height:auto;min-height:0;margin-top:0;padding:20px 0 0}
 .travel-landing .hero-art::before{inset:0 0 59px;border-radius:36px}
 .hero-media{width:260px;margin:auto}
 .travel-landing .hero .scribble,.travel-landing .hero .sticky-note{display:none}
 .hero-media .phone{--phone-radius:36px}
 .travel-landing .hero .actions{margin-top:23px}
 .travel-landing .scenarios{padding-top:26px}
}
@media(max-width:350px){.hero-media{width:238px}.travel-landing .hero-art{padding-top:18px}}

/* Match the original image's entrance, sway and cursor response. */
.hero-media .phone{transform:rotate(2deg);transform-origin:center center}
.hero-media .film-control{margin-top:18px}
@media(prefers-reduced-motion:no-preference){
 .travel-landing .hero-art{animation:none}
 .travel-landing .hero-art.is-present{animation:place-screen 900ms cubic-bezier(.16,1,.3,1) both}
 .hero-art.is-present .hero-media .phone{
  animation:screen-sway 3800ms ease-in-out 600ms;
  translate:var(--pointer-x,0px) var(--pointer-y,0px);
  transition:translate 420ms cubic-bezier(.2,.7,.2,1)
 }
}
@media(prefers-reduced-motion:reduce){
 .hero-media .phone{animation:none;translate:none;transition:none}
}
/* Three independent recordings in one stable phone. */
.travel-landing .hero-art{height:720px}
.hero-media .phone-screen{touch-action:pan-y;cursor:grab;position:relative}
.hero-media .phone-screen:active{cursor:grabbing}
.hero-media .phone-screen video{transition:opacity 220ms ease}
.hero-media.is-loading video{opacity:0}
.hero-media .phone-screen{background-size:cover;background-position:center}
.scenario-tabs{display:flex;gap:2px;margin:22px -8px 0;padding:4px;background:var(--panel,#fffdf7);border:1px solid var(--line,#d6dccb);border-radius:999px;position:relative}
.scenario-tabs button{flex:1;white-space:nowrap;min-height:42px;border:0;border-radius:999px;padding:8px 9px;background:none;color:inherit;font:500 12px/1.1 Onest,sans-serif;cursor:pointer;transition:background 180ms,color 180ms}
.scenario-tabs button[aria-selected=true]{background:#2e5143;color:#fffdf7}
.scenario-tabs button:focus-visible,.scenario-arrows button:focus-visible,.phone-screen:focus-visible{outline:2px solid #638a53;outline-offset:3px}
.scenario-caption{font-size:12px!important;line-height:1.5!important;text-align:center;min-height:36px;margin:10px -10px 0!important;color:var(--muted,#647166)}
.hero-media .film-control{margin:4px 0 0;width:100%;gap:8px;justify-content:space-between}
.hero-media .film-control>button{font-size:12px}
.hero-media .film-time{margin-right:auto;font-variant-numeric:tabular-nums;font-size:10px;white-space:nowrap}
.scenario-arrows{display:flex;align-items:center;gap:0}
.hero-media .scenario-arrows button{justify-content:center;min-width:32px;min-height:44px;padding:0;font-size:19px}
.scenario-count{font-size:10px;white-space:nowrap;opacity:.55}
html[data-theme=dark] .scenario-tabs{background:#26382e;border-color:#4a5b4e}
html[data-theme=dark] .scenario-tabs button[aria-selected=true]{background:#c8dfac;color:#203c2e}
html[data-theme=dark] .scenario-caption{color:#b5c2b2}
@media(min-width:761px) and (max-width:1100px){.travel-landing .hero-art{height:655px}}
@media(max-width:760px){.travel-landing .hero-art{height:auto}.scenario-tabs{margin-top:20px}.travel-landing .hero-art::before{bottom:145px}.scenario-tabs button{font-size:11px}.hero-media .film-control{gap:6px}}
@media(prefers-reduced-motion:reduce){.hero-media .phone-screen video,.scenario-tabs button{transition:none}}
.hero-media .scenario-arrows button{border:0;background:transparent;color:inherit;border-radius:50%;cursor:pointer}
.hero-media .scenario-arrows button:hover{background:#688b6517}
.travel-landing .hero .sticky-note{bottom:144px;left:-28px}
@media(min-width:761px) and (max-width:1100px){.travel-landing .hero .sticky-note{left:-28px;bottom:147px;font-size:11px;padding:10px}}

/* An ordinary image is visible from the server-rendered HTML, before JS/video. */
.hero-media .scenario-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 220ms ease;pointer-events:none}
.hero-media.is-loading .scenario-poster{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-media .scenario-poster{transition:none}}