/* Noty's guided tour (sections/tour.html + js/tour.js): the buddy walks along the bottom of the window and explains each
   [data-tour] stop in a speech bubble. Uses core.css tokens. Owner: creative director. */
.nt-cta svg{width:16px;height:16px}
.nt{--h:clamp(128px,25vh,212px);--foot:calc(6px + env(safe-area-inset-bottom,0px));position:fixed;inset:0;z-index:var(--z-tour);pointer-events:none}
.nt-spot{position:absolute;left:0;top:0;width:0;height:0;border-radius:30px;opacity:0;transition:opacity .45s ease;will-change:transform;
  box-shadow:0 0 0 2px var(--accent),0 0 36px 4px var(--glow),0 0 0 200vmax var(--scrim)}
.nt.spot .nt-spot{opacity:1}

.nt-actor{position:absolute;left:0;bottom:var(--foot);width:calc(var(--h)*.534);height:var(--h);opacity:0;transition:opacity .4s ease;will-change:transform}
.nt-actor.in{opacity:1}
.nt-fig{position:absolute;inset:0;transform-origin:50% 100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
.nt-walk,.nt-pose{position:absolute;bottom:0;height:100%;opacity:0}
.nt-walk{left:0;width:100%;background:0 0/800% 100% no-repeat}
.nt-pose{left:50%;width:auto;max-width:none;transform:translateX(-50%)}
.nt-actor.left .nt-walk{transform:scaleX(-1)}
.nt-actor.left .nt-turn{transform:translateX(-50%) scaleX(-1)}
.nt-actor[data-pose="walk"] .nt-walk,.nt-actor[data-pose="stand"] .nt-stand,.nt-actor[data-pose="turn"] .nt-turn{opacity:1}
.nt-shadow{position:absolute;left:22%;right:22%;bottom:-3px;height:10px;border-radius:50%;background:rgba(20,22,27,.28);filter:blur(5px)}
.nt-actor.talk .nt-fig{animation:nt-talk .34s ease-in-out infinite alternate}
.nt-actor.hop .nt-fig{animation:nt-hop .45s cubic-bezier(.3,.7,.4,1)}
@keyframes nt-talk{to{transform:translateY(-2px) scaleY(1.012)}}
@keyframes nt-hop{40%{transform:translateY(-16px)}100%{transform:none}}

.nt-bubble{position:absolute;left:12px;bottom:calc(var(--h) + 20px);width:min(360px,calc(100vw - 24px));padding:13px 12px 14px 16px;border:1px solid var(--line-2);
  border-radius:var(--r-l);background:var(--surface);color:var(--ink);pointer-events:auto;box-shadow:var(--shadow-4);
  opacity:0;transform:translateY(8px) scale(.97);transform-origin:50% 100%;transition:opacity .26s ease,transform .32s var(--ease-out)}
.nt-bubble.show{opacity:1;transform:none}
.nt-bubble:not(.show){pointer-events:none}
.nt-bubble::after{content:"";position:absolute;width:14px;height:14px;background:inherit;border:0 solid var(--line-2);transform:rotate(45deg)}
.nt-bubble[data-side="r"]{transform-origin:0 85%}
.nt-bubble[data-side="r"]::after{left:-8px;bottom:24px;border-width:0 0 1px 1px}
.nt-bubble[data-side="l"]{transform-origin:100% 85%}
.nt-bubble[data-side="l"]::after{right:-8px;bottom:24px;border-width:1px 1px 0 0}
.nt-bubble[data-side="u"]{transform-origin:var(--tail,50%) 100%}
.nt-bubble[data-side="u"]::after{left:var(--tail,50%);bottom:-8px;margin-left:-7px;border-width:0 1px 1px 0}
.nt-head{display:flex;align-items:center;gap:8px;margin:0 2px 4px 0;font-size:var(--fs-micro);font-weight:800;letter-spacing:var(--tr-caps);text-transform:uppercase}
.nt-head strong{color:var(--accent)}
.nt-count{margin-left:auto;color:var(--ink-3);font-weight:600;letter-spacing:.04em}
.nt-text{margin:0;padding-right:4px;font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.nt-text .w{opacity:0;transition:opacity .22s ease}
.nt-text .w.on{opacity:1}
.nt-row{display:none;flex-wrap:wrap;gap:8px;margin-top:12px}
.nt-bubble[data-mode="invite"] .nt-invite,.nt-bubble[data-mode="tour"] .nt-ctrl,.nt-bubble[data-mode="tour"].last .nt-end{display:flex}
.nt-end .btn svg{width:16px;height:16px}
.nt-ctrl{align-items:center;gap:2px;margin:10px -4px 0 -6px}
.nt-ib{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background-color var(--d-2) ease,color var(--d-2) ease}
.nt-ib:hover{background:var(--surface-3);color:var(--ink)}
.nt-ib[aria-disabled="true"]{opacity:.35;cursor:default;background:transparent}
.nt-ib svg{width:18px;height:18px}
.nt-ib span{display:grid}
.nt-ib .i-b,.nt-ib.is-off .i-a,.nt-ib[aria-pressed="true"] .i-a{display:none}
.nt-ib.is-off .i-b,.nt-ib[aria-pressed="true"] .i-b{display:grid}
.nt-ib[aria-pressed="true"]{color:var(--accent)}
.nt-next{margin:0 2px;background:var(--brand);color:var(--on-brand)}
.nt-next:hover{background:var(--brand-hover);color:var(--on-brand)}
.nt-sp{flex:1}
.nt-bar{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;overflow:hidden;background:var(--line);display:none}
.nt-bubble[data-mode="tour"]:not(.last) .nt-bar{display:block}
.nt-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}

.nt-launch{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:calc(var(--z-tour) - 1);display:grid;place-items:center;width:52px;height:52px;
  padding:0;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:600 var(--fs-s)/1 var(--font-sans);cursor:pointer;
  box-shadow:var(--shadow-3);transition:transform var(--d-3) var(--ease-out),border-color var(--d-3) ease}
.nt-launch:hover{transform:translateY(-2px);border-color:var(--ink-3)}
.nt-launch img{width:42px;height:42px;border-radius:50%;background:var(--accent-soft)}
/* a compact face in the corner (it sits in the page's right margin, off the content); its name shows on hover and focus */
.nt-launch span{position:absolute;right:calc(100% + 10px);top:50%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  box-shadow:var(--shadow-2);white-space:nowrap;opacity:0;transform:translate(6px,-50%);pointer-events:none;transition:opacity var(--d-2) ease,transform var(--d-3) var(--ease-out)}
.nt-launch:hover span,.nt-launch:focus-visible span{opacity:1;transform:translate(0,-50%)}
.nt-launch.pop{animation:nt-pop .5s var(--ease-spring)}
/* when it first appears, the name shows for a few seconds */
.nt-launch.pop span{animation:nt-tip 4s var(--ease-out)}
@keyframes nt-tip{0%,85%{opacity:1;transform:translate(0,-50%)}}
@keyframes nt-pop{from{transform:scale(.6);opacity:0}}
@media (max-width:639.98px){
  .nt{--h:118px}
  .nt-text{font-size:var(--fs-s)}
}
/* phones and tablets: no floating launcher (it covered the hero demo and the page); the menu has "Tour with Noty" */
@media (max-width:959.98px){.nt-launch{display:none}}
@media print{.nt,.nt-launch{display:none!important}}