/* Pawly app demos for the homepage tour.
   Drawn in the real app's design system (jake-frontend redesign, look "q": Fraunces SOFT + Figtree, blush ground,
   white cards, duotone icons, the clay pup, colour illustrations) at 390x844, then scaled into the phone.
   Every class is prefixed x- so nothing leaks into the site. Each screen plays a short sequence once .play is set. */

/* ---------- stage: a bigger phone, cards around it ---------- */
@media (min-width:901px){ .tour{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.stick{--sh:min(calc(100vh - 120px),860px);top:calc(68px + (100vh - 68px - var(--sh)) / 2);height:var(--sh)}
.stick::before{inset:6% 14%;background:radial-gradient(closest-side,rgba(248,214,226,.85),rgba(251,248,245,0))}
.stick .phone{--pw:min(28vw,390px,calc(var(--sh) * .455));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 4px #0c0a09,0 60px 90px -40px rgba(60,26,22,.5),0 30px 40px -30px rgba(60,26,22,.35)}
.sat{width:min(226px,34%)}
.sat-g .p1{left:-7%;top:7%} .sat-g .p2{right:-7%;top:52%}
.sat .mut{margin-top:1px}
#tourscr::after,.chap .mph .scr::after{content:"";position:absolute;z-index:30;top:1.3%;left:50%;width:31.5%;height:4.3%;transform:translateX(-50%);border-radius:999px;background:#080707}
#tourscr::before,.chap .mph .scr::before{content:"";position:absolute;z-index:31;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 32%)}
@media (max-width:900px){ .chap .mph{width:100%;justify-self:stretch;padding:32px 0;background:radial-gradient(70% 60% at 50% 45%,#FBE4EC,#F3DCE2)} .chap .mph .phone{--pw:min(74vw,330px)} }

/* ---------- the app ---------- */
.app{--top:#FFEFF3;--mid:#FBF5F4;--gr:#F7F4F2;--ln:#ECE6E3;--ln2:#E3DCD8;--ink:#221E1B;--bd:#3B3532;--sec:#6B625D;--ph:#7A6F69;
  --acc:#CF2F63;--acc2:#B4234F;--tint:#FDE8EE;--urg:#D92D20;--urg2:#FDE7E5;--okc:#2F7A50;--okb:#E6F2EA;
  --rd-icon-line:#221E1B;--rd-icon-fill:#F8C3D1;--rd-icon-bg:#fff;--ez:cubic-bezier(.16,1,.3,1);--bo:cubic-bezier(.34,1.56,.64,1);
  position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;transform:scale(var(--s,.8));overflow:hidden;
  background:linear-gradient(180deg,var(--top) 0,var(--mid) 210px,var(--gr) 480px);color:var(--ink);
  font:400 16px/1.45 Figtree,-apple-system,system-ui,sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .45s var(--ez)}
.app.on{opacity:1}
/* recorded clips of the real app (assets/app/rec): the video fills the 390x844 screen; no drawn island over its header */
.app.vid{background:#FBEFF1}
.app.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
#tourscr:has(.vid)::after,.chap .mph .scr:has(.vid)::after{display:none}
/* demo films (assets/app/film): 4:5 cards, each a zoomed, captioned film of the real app */
.film{position:relative;z-index:2;width:100%;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:#FBF8F5;box-shadow:0 1px 2px rgba(40,22,16,.05),0 40px 80px -44px rgba(60,26,22,.42)}
.film > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film .app.vid{position:absolute;inset:0;width:100%;height:100%;transform:none;background:#FBF8F5}
.stick .film{width:min(100%,calc(var(--sh) * .76))}
.chap .mph:has(.film){background:none;padding:8px 0 16px}
.chaps .chap .mph .film{width:100%;max-width:440px;border-radius:20px}
.app *{box-sizing:border-box}
:where(.app) :where(p,h4,h5,ol,ul,li,figure){margin:0;padding:0;list-style:none}
:where(.app) img{display:block;border-radius:0;max-width:none}
:where(.app) svg{flex:none;display:block}
.app .sf{font-family:Fraunces,Georgia,serif;font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 72;letter-spacing:-.012em}
.x-i{width:28px;height:28px}
.x-u{width:24px;height:24px;color:var(--ink)}
.x-k{display:block;font-size:14px;font-weight:600;color:var(--acc);letter-spacing:0}
.x-card{background:#fff;border-radius:22px;box-shadow:0 0 0 1px var(--ln),0 10px 24px -16px rgba(60,35,28,.2)}
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;background:var(--acc);color:#fff;font-size:17px;font-weight:600;white-space:nowrap}
.x-btn .x-u{width:20px;height:20px;color:#fff}
.x-gh{display:inline-flex;align-items:center;height:50px;padding:0 18px;color:var(--bd);font-size:17px;font-weight:500}
.x-chipw{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);font-size:16.5px;font-weight:500;white-space:nowrap}

/* status bar, home indicator, tab bar */
.x-sb{position:relative;z-index:12;height:54px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 52px;font:600 17px/1 -apple-system,"SF Pro Text",Figtree,sans-serif;letter-spacing:-.02em}
.x-sb svg{width:76px;height:14px;color:currentColor}
.x-hi{position:absolute;z-index:40;left:50%;bottom:8px;width:138px;height:5px;margin-left:-69px;border-radius:3px;background:var(--ink)}
.x-tb{position:absolute;z-index:14;left:14px;right:14px;bottom:24px;height:66px;padding:0 6px;display:flex;border-radius:33px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(34,30,27,.07),0 12px 30px rgba(60,35,28,.14)}
.x-tb span{flex:1;display:grid;justify-items:center;align-content:center;gap:2px;font-size:11.5px;font-weight:500;color:var(--sec);--rd-icon-fill:transparent}
.x-tb span.xon{color:var(--acc);--rd-icon-fill:#F8C3D1}
.x-tb .x-i{width:27px;height:27px}
.x-tb img{width:38px;height:38px;margin:-6px 0 -4px}

/* motion primitives */
.app .x-a,.app .x-p{opacity:0}
.app.play .x-a{animation:x-in .6s var(--ez) both;animation-delay:var(--d,0s)}
.app.play .x-p{animation:x-pop .55s var(--bo) both;animation-delay:var(--d,0s)}
@keyframes x-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes x-pop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes x-on{to{opacity:1}}
@keyframes x-off{to{opacity:0}}
@keyframes x-show{0%,100%{opacity:1}}
.x-tap{position:relative}
.x-tap::after{content:"";position:absolute;inset:-7px;border-radius:999px;border:3px solid rgba(207,47,99,.4);opacity:0;pointer-events:none}
.app.play .x-tap{animation:x-press .45s ease var(--t) both}
.app.play .x-tap::after{animation:x-ring .7s ease-out var(--t) both}
@keyframes x-press{45%{transform:scale(.9)}100%{transform:none}}
@keyframes x-ring{0%{opacity:0;transform:scale(.85)}15%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* ================= A · Ask ================= */
.x-chh{position:relative;z-index:5;display:flex;align-items:center;gap:12px;height:64px;padding:0 20px 0 12px}
.x-av{position:relative;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--ln),0 6px 14px -8px rgba(60,35,28,.3);overflow:hidden}
.x-av img{position:absolute;left:-4px;top:-2px;width:56px;height:56px}
.x-av .xt1,.x-av .xt2{opacity:0}
.app.play .x-av .xt0{animation:x-off .01s linear 2.05s forwards,x-on .01s linear 6.3s forwards}
.app.play .x-av .xt1{animation:x-on .01s linear 2.05s forwards,x-off .01s linear 3.55s forwards}
.app.play .x-av .xt2{animation:x-on .01s linear 3.55s forwards,x-off .01s linear 6.3s forwards}
.x-who{flex:1;display:grid;line-height:1.2} .x-who b{font-size:17.5px;font-weight:600} .x-who small{font-size:14px;color:var(--sec)}
.x-chh .x-u{margin-left:8px}
.x-chb{position:absolute;left:0;right:0;top:118px;bottom:154px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 22px,#000 calc(100% - 26px),transparent)}
.x-chin{display:grid;gap:16px;padding:14px 20px 24px}
.app.play .x-chin{animation:x-scroll 2.4s var(--ez) 4.6s both}
@keyframes x-scroll{to{transform:translateY(-196px)}}
.x-dayl{justify-self:center;font-size:13px;color:var(--ph);font-weight:500}
.x-me{justify-self:end;max-width:286px;padding:13px 18px;border-radius:24px 24px 7px 24px;background:var(--tint);font-size:17px;line-height:1.38;color:var(--ink)}
.x-rd{display:grid;gap:9px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px var(--ln)}
.x-rd .x-rh{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--sec)}
.x-rd .x-rh img{width:22px;height:22px}
.x-rd li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--bd);opacity:0}
.x-rd li i{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid var(--ln2);border-top-color:var(--acc)}
.x-rd li i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}
.app.play .x-rd li{animation:x-in .4s var(--ez) var(--d) both}
.app.play .x-rd li i{animation:x-spin .55s linear var(--d) 1,x-ok .2s ease calc(var(--d) + .55s) forwards}
.app.play .x-rd li i::after{animation:x-on .15s ease calc(var(--d) + .6s) forwards}
@keyframes x-spin{to{transform:rotate(360deg)}}
@keyframes x-ok{to{border-color:var(--okc);background:var(--okc)}}
.x-ans{font-size:17.5px;line-height:1.52;color:var(--bd)}
.x-ans span{opacity:0}
.app.play .x-ans span{animation:x-word .35s ease both;animation-delay:var(--d)}
@keyframes x-word{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.x-ans mark{color:var(--ink);font-weight:500;background:linear-gradient(transparent 58%,#FAD3DE 0) no-repeat 0 0/0 100%}
.app.play .x-ans mark{animation:x-mark .9s ease 6.4s forwards}
@keyframes x-mark{to{background-size:100% 100%}}
.x-plan{display:grid;grid-template-columns:70px 1fr;gap:0 14px;align-items:center;padding:18px 18px 16px 14px}
.x-plan > img{width:70px;height:70px;grid-row:span 2;align-self:start}
.x-plan b{display:block;font-size:23px;line-height:1.12;margin:3px 0 4px}
.x-plan .x-m{font-size:14.5px;color:var(--sec)}
.x-segs{display:flex;gap:5px;margin-top:12px} .x-segs i{flex:1;height:6px;border-radius:3px;background:#F2EBE7} .x-segs .xd{background:var(--acc)} .x-segs .xc{background:linear-gradient(90deg,var(--acc) 45%,#F7CAD6 0)}
.x-plan .x-btn{grid-column:1/-1;justify-self:end;height:46px;padding:0 20px;font-size:16px;margin-top:14px}
.x-src{display:flex;align-items:center;justify-content:space-between;gap:10px}
.x-src span{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px 0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln2);font-size:14.5px;color:var(--bd);white-space:nowrap}
.x-src .x-i{width:22px;height:22px} .x-src > .x-u{width:22px;height:22px;color:var(--bd)}
.x-sug{position:absolute;left:0;right:0;bottom:98px;display:flex;gap:8px;padding:0 16px;overflow:hidden}
.x-sug span{flex:none;display:inline-flex;align-items:center;height:46px;padding:0 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);font-size:15.5px;white-space:nowrap}
.x-cmp{position:absolute;left:12px;right:12px;bottom:34px;display:flex;align-items:center;gap:10px}
.x-cmp .x-pl{width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);display:grid;place-items:center}
.x-f{position:relative;flex:1;height:54px;border-radius:27px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);display:flex;align-items:center;padding:0 8px 0 20px;font-size:16.5px;color:var(--ph);overflow:hidden}
.x-f .x-ph{flex:1}
.x-f .x-ty{position:absolute;left:20px;right:60px;top:0;bottom:0;display:flex;align-items:center;color:var(--ink);white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0);opacity:0}
.x-f .x-mic,.x-f .x-snd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.x-f .x-mic .x-u{width:22px;height:22px}
.x-f .x-snd{position:absolute;right:7px;top:7px;background:var(--acc);opacity:0;transform:scale(.6)} .x-f .x-snd .x-u{color:#fff;width:20px;height:20px}
.app.play .x-f .x-ph{animation:x-off .1s linear .25s forwards,x-on .2s linear 1.5s forwards}
.app.play .x-f .x-ty{animation:x-type 1.05s steps(28) .3s forwards,x-off .15s linear 1.45s forwards}
@keyframes x-type{0%{opacity:1;clip-path:inset(0 100% 0 0)}100%{opacity:1;clip-path:inset(0 0 0 0)}}
.app.play .x-f .x-snd{animation:x-pop .3s var(--bo) .9s forwards,x-off .15s linear 1.5s forwards}
.app.play .x-f .x-snd::after{animation:x-ring .7s ease-out 1.25s both}
.x-f .x-snd::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid rgba(207,47,99,.4);opacity:0}

/* ================= B · Plan + check-in ================= */
.x-nb{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 18px 0 14px}
.x-nb .x-u{width:26px;height:26px}
.x-ph1{position:relative;padding:4px 22px 0}
.x-ph1 .x-txt{max-width:232px}
.x-ph1 h4{font-size:38px;line-height:1.02;margin:6px 0 10px}
.x-ph1 p{font-size:16px;line-height:1.45;color:var(--sec)}
.x-ph1 > img{position:absolute;right:16px;top:-6px;width:118px;height:118px;filter:drop-shadow(0 12px 16px rgba(120,60,50,.14))}
.x-says{display:flex;align-items:flex-end;gap:6px;padding:18px 18px 0 12px}
.x-says img{width:86px;height:86px;margin-bottom:-4px}
.x-says p{flex:1;position:relative;padding:14px 18px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 10px 22px -16px rgba(60,35,28,.25);font-size:16px;line-height:1.38;color:var(--bd)}
.x-says p::before{content:"";position:absolute;left:-7px;bottom:22px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:-1px 1px 0 var(--ln)}
.x-lbl{padding:22px 24px 10px;font-size:17px;font-weight:600}
.x-why{margin:0 18px;display:flex;gap:14px;align-items:center;padding:16px 18px}
.x-why .x-pi{width:52px;height:52px;border-radius:50%;background:var(--tint);display:grid;place-items:center;flex:none}
.x-why b{display:block;font-size:16.5px;font-weight:500;line-height:1.3}
.x-why small{display:block;margin-top:3px;font-size:14px;color:var(--sec)}
.x-steps{margin:0 18px;padding:8px}
.x-steps li{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:12px 10px;border-radius:16px}
.x-steps li b{display:block;font-size:16.5px;font-weight:500;line-height:1.3}
.x-steps li small{display:block;font-size:14px;color:var(--sec);margin-top:2px}
.x-steps li > img{width:46px;height:46px}
.x-steps .x-dn{width:28px;height:28px;border-radius:50%;background:var(--acc);display:grid;place-items:center} .x-steps .x-dn .x-u{width:16px;height:16px;color:#fff}
.x-steps .xcur{background:var(--tint)}
.x-steps .x-rg{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--acc);background:#fff}
.x-steps .x-now{display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--acc);color:#fff;font-size:12.5px;font-weight:600;vertical-align:2px}
.x-steps .x-lk{width:28px;height:28px;border-radius:50%;background:#F4EFEC;display:grid;place-items:center} .x-steps .x-lk .x-u{width:15px;height:15px;color:var(--sec)}
.x-steps .xlock b{color:var(--sec)}
.x-veil{position:absolute;inset:0;z-index:20;background:rgba(34,30,27,.32);opacity:0}
.x-sheet{position:absolute;z-index:21;left:0;right:0;bottom:0;height:440px;padding:12px 22px 0;border-radius:32px 32px 0 0;background:var(--gr);box-shadow:0 -10px 40px rgba(34,30,27,.18);transform:translateY(105%)}
.x-grab{display:block;width:40px;height:5px;margin:0 auto 14px;border-radius:3px;background:#D9D1CC}
.app.play .x-veil{animation:x-on .5s ease 1.9s forwards}
.app.play .x-sheet{animation:x-up .75s var(--ez) 1.9s forwards}
@keyframes x-up{to{transform:none}}
.x-q,.x-r{position:absolute;left:22px;right:22px;top:36px}
.x-q .x-ask{display:flex;align-items:center;gap:8px}
.x-q .x-ask img{width:118px;height:118px;flex:none;margin-left:-10px}
.x-q .x-ask p{flex:1;position:relative;padding:18px 20px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 12px 24px -16px rgba(60,35,28,.3);font-size:26px;line-height:1.12}
.x-q .x-ask p::before{content:"";position:absolute;left:-8px;top:50%;width:16px;height:16px;margin-top:-8px;background:#fff;transform:rotate(45deg);box-shadow:-1px 1px 0 var(--ln)}
.x-q .x-ctx{margin:14px 0 18px;text-align:center;font-size:14.5px;color:var(--sec)}
.x-q .x-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.x-q .x-opts span{display:grid;place-items:center;height:58px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ln2);font-size:17px;font-weight:600}
.x-q .x-talk{display:block;margin-top:16px;text-align:center;font-size:16px;font-weight:600}
.app.play .x-q .x-opts .x-tap{animation:x-press .45s ease var(--t) both,x-fill .2s ease calc(var(--t) + .12s) forwards}
@keyframes x-fill{to{background:var(--acc);color:#fff;box-shadow:none}}
.app.play .x-q{animation:x-off .35s ease 4.15s forwards}
.x-r{display:grid;justify-items:center;text-align:center;opacity:0}
.app.play .x-r{animation:x-on .3s ease 4.3s forwards}
.x-r .x-cheer{position:relative;width:128px;height:128px}
.x-r .x-cheer img{width:128px;height:128px}
.app.play .x-r .x-cheer img{animation:x-pop .6s var(--bo) 4.3s both}
.x-r .x-cheer i{position:absolute;left:50%;top:44%;width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;color:var(--acc)}
.x-r .x-cheer i svg{width:18px;height:18px}
.app.play .x-r .x-cheer i{animation:x-burst 1s var(--ez) calc(4.4s + var(--n) * .05s) both}
@keyframes x-burst{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--r,0deg))}}
.x-r h5{margin-top:6px;font-size:28px;line-height:1.1;max-width:300px}
.x-nights{display:flex;gap:12px;margin:18px 0 6px}
.x-nights span{display:grid;justify-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--sec)}
.x-nights i{width:30px;height:30px;border-radius:50%;background:#EFE8E4;display:grid;place-items:center;transform:scale(.4);opacity:0}
.x-nights i.xh{background:#F6D5CF} .x-nights i.xs{background:#EDE3DE} .x-nights i.xe{background:#CFE8D8}
.x-nights i.xe::after{content:"";width:5px;height:10px;margin-top:-3px;border:solid var(--okc);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.x-nights i.xt{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--okc)}
.app.play .x-nights i{animation:x-pop .45s var(--bo) calc(4.75s + var(--n) * .09s) both}
.x-r .x-meta{font-size:14px;color:var(--sec)}
.x-unl{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 18px 10px 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 10px 20px -14px rgba(60,35,28,.3);font-size:15.5px;font-weight:600}
.x-unl img{width:40px;height:40px}
.app.play .x-unl{animation:x-in .6s var(--ez) 5.6s both}

/* ================= C · Home + quick log ================= */
.x-hh{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:58px;padding:0 20px}
.x-dog{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 14px 0 5px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--ln);font-size:17px;font-weight:500}
.x-dog img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.x-dog .x-u{width:18px;height:18px}
.x-hero{display:flex;align-items:center;gap:4px;padding:6px 18px 0 6px}
.x-hero > img{width:116px;height:116px;flex:none}
.x-hero p{flex:1;position:relative;padding:16px 18px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 14px 26px -18px rgba(60,35,28,.3);font-size:22px;line-height:1.14}
.x-hero p::before{content:"";position:absolute;left:-8px;top:54%;width:16px;height:16px;background:#fff;transform:rotate(45deg);box-shadow:-1px 1px 0 var(--ln)}
.x-chps{display:flex;gap:10px;padding:12px 20px 0}
.x-askb{display:flex;align-items:center;justify-content:space-between;margin:18px 20px 0;padding:0 2px 12px;border-bottom:1.5px solid var(--ln2);font-size:17px;color:var(--ph)}
.x-pills{display:flex;gap:4px;margin:12px 20px 0;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--ln)}
.x-pills span{flex:none;height:42px;display:grid;place-items:center;padding:0 15px;border-radius:999px;font-size:16px;font-weight:500;color:var(--bd)}
.x-pills .xon{background:var(--acc);color:#fff}
.x-nx{position:relative;margin:12px 20px 0;padding:16px 20px;min-height:188px}
.x-nx > img{position:absolute;right:16px;top:14px;width:96px;height:96px}
.x-nx .xv1,.x-nx .xv2{max-width:228px}
.x-nx b{display:block;margin:4px 0 6px;font-size:27px;line-height:1.08}
.x-nx p{font-size:15.5px;color:var(--sec);line-height:1.4}
.x-nx .xv2{position:absolute;left:20px;top:16px;opacity:0}
.x-nx .xv2 .x-k{color:var(--okc);display:flex;align-items:center;gap:6px}
.x-nx .xv2 .x-k i{width:18px;height:18px;border-radius:50%;background:var(--okc);position:relative} .x-nx .xv2 .x-k i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.x-nx .x-bt{display:flex;align-items:center;gap:6px;margin-top:14px}
.x-nx .xv2 .x-tl{display:flex;gap:8px;margin-top:14px} .x-nx .xv2 .x-tl span{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;background:var(--okb);color:var(--okc);font-size:14.5px;font-weight:600;white-space:nowrap} .x-nx .xv2 .x-tl span:last-child{background:#F4EFEC;color:var(--bd)}
.app.play .x-nx .xv1{animation:x-off .3s ease 3.55s forwards}
.app.play .x-nx .xv2{animation:x-in .5s var(--ez) 3.7s both}
.app.play .x-nx .x-bt{animation:x-off .3s ease 3.55s forwards}
.x-dy{margin:12px 20px 0;padding:16px 18px 40px}
.x-dy .x-dh{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:600}
.x-leg{display:flex;gap:14px;margin-top:8px;font-size:14.5px;color:var(--sec)}
.x-leg span{display:inline-flex;align-items:center;gap:6px}
.x-leg i{width:9px;height:9px;border-radius:50%}
.x-leg .xn{position:relative;display:inline-block;width:.6em;height:1.3em;vertical-align:top}
.x-leg .xn em{position:absolute;left:0;top:0;font-style:normal}
.x-leg .xn .xb{opacity:0}
.app.play .x-leg .xn .xa{animation:x-off .2s ease 3.9s forwards}
.app.play .x-leg .xn .xb{animation:x-pop .4s var(--bo) 3.95s both}
.x-trk{position:relative;height:30px;margin-top:14px}
.x-trk::before{content:"";position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:#F3EDEA}
.x-trk i{position:absolute;top:7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2.5px #fff}
.x-trk .xp,.x-leg .xp{background:var(--acc)} .x-trk .xm,.x-leg .xm{background:#E0A24F} .x-trk .xw,.x-leg .xw{background:#4F7A5A} .x-trk .xo,.x-leg .xo{background:#A79BCF}
.x-trk .x-now{position:absolute;top:-4px;width:3px;height:38px;margin-left:-1.5px;border-radius:2px;background:var(--acc)}
.x-trk .xnew{opacity:0}
.app.play .x-trk .xnew{animation:x-pop .5s var(--bo) 3.85s both}
.x-fab{position:absolute;z-index:16;right:22px;bottom:112px;width:66px;height:66px;border-radius:50%;background:var(--acc);display:grid;place-items:center;box-shadow:0 14px 28px -10px rgba(207,47,99,.7)}
.x-fab .x-u{width:30px;height:30px;color:#fff;stroke-width:2.4}
.app.play .x-fab .x-u{animation:x-rot 1.8s var(--ez) 1.7s both}
@keyframes x-rot{0%,100%{transform:none}14%,84%{transform:rotate(45deg)}}
.x-ql{position:absolute;z-index:15;inset:0;background:rgba(251,245,244,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);opacity:0;visibility:hidden}
.app.play .x-ql{animation:x-qlv 1.5s linear 1.75s both}
@keyframes x-qlv{0%{opacity:0;visibility:visible}12%{opacity:1}88%{opacity:1}100%{opacity:0;visibility:hidden}}
.x-ql ul{position:absolute;right:22px;bottom:194px;display:grid;gap:12px;justify-items:end}
.x-ql li{display:flex;align-items:center;gap:14px;text-align:right;opacity:0}
.x-ql li b{display:block;font-size:17.5px;font-weight:600} .x-ql li small{display:block;font-size:14px;color:var(--sec)}
.x-ql li span{width:66px;height:66px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--ln),0 10px 20px -12px rgba(60,35,28,.35);display:grid;place-items:center}
.x-ql li .x-i{width:32px;height:32px}
.x-ql .x-vl{display:flex;align-items:center;gap:12px;height:54px;padding:0 20px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln),0 10px 20px -12px rgba(60,35,28,.3);font-size:17px;font-weight:600;opacity:0;margin-bottom:6px}
.x-ql .x-vl em{font-style:normal;font-weight:400;color:var(--sec);padding-left:12px;border-left:1px solid var(--ln2)}
.app.play .x-ql li,.app.play .x-ql .x-vl{animation:x-in .4s var(--ez) calc(1.85s + var(--n) * .05s) both}
.x-toast{position:absolute;z-index:18;left:20px;right:20px;top:62px;display:flex;align-items:center;gap:12px;height:58px;padding:0 18px 0 12px;border-radius:20px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;opacity:0;transform:translateY(-20px)}
.x-toast i{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center} .x-toast i .x-i{width:24px;height:24px}
.x-toast em{margin-left:auto;font-style:normal;font-weight:600;color:#F7B7CA}
.app.play .x-toast{animation:x-toast 2.4s var(--ez) 3.35s both}
@keyframes x-toast{0%{opacity:0;transform:translateY(-20px)}14%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}

/* ================= D · Something happened → what to do now ================= */
.x-pg{position:absolute;left:0;right:0;top:54px;bottom:0}
.x-pg2,.x-pg3{transform:translateX(102%)}
.app.play .x-pg1{animation:x-left .55s var(--ez) 1.75s forwards}
.app.play .x-pg2{animation:x-mid 2.05s var(--ez) 1.75s both}
@keyframes x-mid{0%{transform:translateX(102%);opacity:1}27%,73%{transform:none;opacity:1}100%{transform:translateX(-28%);opacity:0}}
.app.play .x-pg3{animation:x-inr .55s var(--ez) 3.25s forwards}
@keyframes x-left{from{transform:none;opacity:1}to{transform:translateX(-28%);opacity:0}}
@keyframes x-inr{from{transform:translateX(102%)}to{transform:none}}
.x-pn{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 16px 0 12px;font-size:16.5px;font-weight:500}
.x-pn .x-c{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center}
.x-pn .x-c .x-u{width:22px;height:22px}
.x-pn .x-dots{display:flex;gap:5px} .x-pn .x-dots i{width:7px;height:7px;border-radius:4px;background:#DCD3CE} .x-pn .x-dots i.xon{width:20px;background:var(--ink)}
.x-ph2{padding:8px 22px 0}
.x-ph2 h4{font-size:38px;line-height:1.05}
.x-ph2 p{margin-top:6px;font-size:16.5px;color:var(--bd)}
.x-emg{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 20px 0;padding:14px 12px 14px 18px;border-radius:22px;background:var(--urg2);font-size:16px;font-weight:500;line-height:1.3}
.x-emg span{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;background:var(--urg);color:#fff;font-weight:600;white-space:nowrap;box-shadow:0 10px 18px -10px rgba(217,45,32,.8)}
.x-emg .x-u{width:19px;height:19px;color:#fff}
.x-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 20px 0}
.x-tiles span{display:grid;align-content:start;gap:4px;min-height:118px;padding:16px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--ln)}
.x-tiles .x-i{width:30px;height:30px;margin-bottom:8px}
.x-tiles b{font-size:16.5px;font-weight:500;line-height:1.2}
.x-tiles small{font-size:13.5px;color:var(--sec);line-height:1.3}
.app.play .x-tiles .x-tap{animation:x-press .45s ease var(--t) both,x-sel .2s ease calc(var(--t) + .1s) forwards}
@keyframes x-sel{to{box-shadow:0 0 0 2px var(--acc);background:var(--tint)}}
.x-tiles .x-tap::after{border-radius:26px}
.x-srch{display:flex;align-items:center;gap:12px;height:58px;margin:18px 20px 0;padding:0 20px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--ln2);font-size:16.5px;color:var(--ph)}
.x-srch .x-u{color:var(--bd)}
.x-mc{margin:24px 22px 12px;font-size:24px}
.x-foods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 20px}
.x-foods span{display:flex;align-items:center;height:56px;padding:0 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--ln);font-size:16px}
.app.play .x-foods .x-tap{animation:x-press .45s ease var(--t) both,x-sel .2s ease calc(var(--t) + .1s) forwards}
.x-foods .x-tap::after{border-radius:24px}
.x-snap{display:flex;align-items:center;gap:14px;margin:14px 20px 0;padding:16px 18px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--ln)}
.x-snap b{display:block;font-size:16px;font-weight:600} .x-snap small{display:block;font-size:14px;color:var(--sec)}
.x-snap .x-u:last-child{margin-left:auto;color:var(--sec)}
.x-vd{padding:2px 20px 0}
.x-urg{padding:22px 22px 20px;border-radius:28px;background:var(--urg);color:#fff;box-shadow:0 18px 34px -20px rgba(217,45,32,.9)}
.x-urg small{display:block;font-size:15px;font-weight:500;color:rgba(255,255,255,.88)}
.x-urg h5{margin:6px 0 10px;font-size:40px;line-height:1}
.x-urg p{font-size:15.5px;line-height:1.42;color:rgba(255,255,255,.94)}
.x-urg .x-call{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;margin-top:16px;border-radius:999px;background:#fff;color:var(--ink);font-size:17.5px;font-weight:600}
.x-urg .x-call .x-u{width:20px;height:20px;color:var(--ink)}
.app.play .x-urg{animation:x-urgin .7s var(--bo) 3.45s both}
@keyframes x-urgin{from{transform:scale(.94)}to{transform:none}}
.x-wyc h5{margin:20px 2px 8px;font-size:24px}
.x-wyc li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:6px 2px;font-size:16px;line-height:1.38}
.x-wyc li i{width:28px;height:28px;border-radius:50%;background:#F5EEEB;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:600}
.x-fv{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;margin-top:14px;padding:14px 14px 14px 14px}
.x-fv img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.x-fv small{display:block;font-size:13.5px;font-weight:600;color:var(--acc)}
.x-fv b{display:block;font-size:15.5px;font-weight:500;line-height:1.3}
.x-fv .x-m{display:block;font-size:13.5px;color:var(--sec);line-height:1.35}
.x-fv .x-sh{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:999px;background:var(--tint);font-size:15px;font-weight:600}
.x-fv .x-sh .x-u{width:18px;height:18px}
.x-er{margin-top:16px;text-align:center;font-size:15px;color:var(--sec)} .x-er b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .app.play *,.app.play *::before,.app.play *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important}
}
/* tour, desktop (2026-10-30): one wide 16:9 film; the chips are its chapters, with a progress line on the one playing */
.wide{display:none}
@media (min-width:901px){
  .tour{display:block}
  .tour .chaps{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tchips{display:flex;width:fit-content;gap:4px;padding:4px;margin:0 0 18px;border-radius:999px;background:var(--sand)}
  .tchip{position:relative;overflow:hidden;min-height:44px;padding:0 22px;border:0;border-radius:999px;background:transparent;font:500 .98rem var(--f);color:var(--ink2);cursor:pointer}
  .tchip[aria-current="true"]{background:var(--paper);color:var(--ink);box-shadow:0 4px 14px -6px rgba(40,22,16,.25)}
  .tchip .tp{position:absolute;left:16px;right:16px;bottom:7px;height:2px;border-radius:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:0}
  .tchip[aria-current="true"] .tp{opacity:.85}
  #tourscr.wide::before,#tourscr.wide::after{content:none;display:none}
  .wide{display:block;position:relative;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#FBF8F5;box-shadow:0 1px 2px rgba(40,22,16,.05),0 50px 100px -60px rgba(60,26,22,.45)}
  .wide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
  .wide video.on{opacity:1}
}