/* Guided tour coach card (text 14px desktop / 15px mobile, exception to the 10px desktop body) */
.tour-card{position:fixed;z-index:70;left:16px;top:16px;width:min(340px,calc(100vw - 16px));box-sizing:border-box;padding:14px 40px 14px 16px;border-radius:14px;
 background:rgba(8,15,23,.96);border:1px solid rgba(127,240,209,.38);box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(194,255,228,.06) inset;color:#e8f3ef;
 font-size:14px;line-height:1.45;animation:tour-in .28s cubic-bezier(.22,1,.36,1)}
.tour-card .tour-text{margin:2px 0 10px;font-size:14px;line-height:1.45;color:#e8f3ef}
.tour-card .tour-count{display:block;font-size:12px;letter-spacing:.08em;color:#a5dfc8;margin-bottom:2px}
.tour-card .tour-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.tour-card button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
.tour-card .tour-primary{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:#7ff0d1;color:#06231b;font-size:14px;font-weight:600;text-decoration:none}
.tour-card .tour-link{min-height:40px;font-size:14px;color:#a5dfc8;text-decoration:underline;text-underline-offset:3px}
.tour-card .tour-x{position:absolute;right:4px;top:4px;width:36px;height:36px;font-size:15px;color:#a5dfc8;border-radius:8px}
.tour-card button:focus-visible,.tour-card a:focus-visible{outline:2px solid #c2ffe4;outline-offset:2px}
.tour-card.tour-docked{left:8px!important;right:8px;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom));width:auto;font-size:15px;padding:12px 40px 12px 14px}
.tour-card.tour-docked .tour-text,.tour-card.tour-docked .tour-primary,.tour-card.tour-docked .tour-link{font-size:15px}
.tour-target{border-radius:10px}
/* Spotlight: dims the page around the current step (pointer-events none, so the target stays usable) */
.tour-spot{position:fixed;left:0;top:0;width:0;height:0;z-index:65;pointer-events:none;border-radius:14px;opacity:0;
 box-shadow:0 0 0 200vmax rgba(3,8,13,.62),0 0 0 2px rgba(127,240,209,.85),0 0 22px 4px rgba(127,240,209,.35);
 transition:transform .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),opacity .3s}
@media (prefers-reduced-motion:reduce){.tour-spot{transition:opacity .2s}}
.tour-replay{font-size:11px;min-height:40px;line-height:1.5;color:#a5dfc8;text-decoration:underline;text-underline-offset:4px;text-align:left;background:none;border:0;cursor:pointer;padding:0 0 0 14px}
@keyframes tour-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tour-card{animation:none}}
/* first-visit language pop-up */
.lang-pop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(3,8,13,.55);animation:tour-in .25s ease-out}
.lang-pop-card{position:relative;width:min(340px,100%);box-sizing:border-box;padding:20px 20px 18px;border-radius:16px;background:rgba(8,15,23,.97);border:1px solid rgba(127,240,209,.38);box-shadow:0 16px 48px rgba(0,0,0,.5);color:#e8f3ef;text-align:center}
.lang-pop-t{margin:0 0 14px;font-size:15px;font-weight:600}.lang-pop-t span{font-weight:400;color:#a5dfc8}
.lang-pop-row{display:flex;gap:10px}.lang-pop-b{flex:1;min-height:44px;border-radius:999px;font:inherit;font-size:15px;cursor:pointer;background:transparent;color:#e8f3ef;border:1px solid rgba(127,240,209,.5)}
.lang-pop-b.is-pre{background:#7ff0d1;color:#06231b;font-weight:600;border-color:#7ff0d1}
.lang-pop-b:focus-visible,.lang-pop-x:focus-visible{outline:2px solid #c2ffe4;outline-offset:2px}
.lang-pop-x{position:absolute;right:6px;top:6px;width:36px;height:36px;background:none;border:0;color:#a5dfc8;font-size:15px;cursor:pointer;border-radius:8px}
/* Back / Next on every step */
.tour-card .tour-navrow{justify-content:space-between;margin-bottom:4px}
.tour-card .tour-nav{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(127,240,209,.45)!important;color:#c2ffe4;font-size:14px}
.tour-card .tour-nav[disabled]{opacity:.35;cursor:default}
.tour-card .tour-next{margin-left:auto}
.tour-card.tour-docked .tour-nav,.tour-card.tour-docked .tour-primary{min-height:48px;padding:0 18px;font-size:15px}
.tour-card.tour-docked .tour-navrow{flex-wrap:nowrap}
/* docked (phone): skip/finish link moves up next to the counter so the card stays compact */
.tour-card.tour-docked .tour-navrow+.tour-row{position:absolute;top:2px;right:44px}
.tour-card.tour-docked .tour-navrow+.tour-row .tour-link{min-height:36px;font-size:13px}
.tour-card.tour-docked .tour-count{min-height:30px;line-height:30px}
/* hybrid calculator tour: only one star on screen (ambient canvas hidden), gesture star inside the target */
html.tour-on .star-canvas{opacity:0;transition:opacity .25s}
.tour-gesture{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s}
.tour-gesture.tg-on{opacity:1}
.tour-gesture:not(.tg-on) i{animation-play-state:paused}
.tour-gesture i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#c2ffe4;box-shadow:0 0 8px 2px rgba(145,232,189,.7);will-change:transform,opacity}
.tour-gesture[data-kind=swipe] i{animation:tg-swipe 2.4s cubic-bezier(.45,0,.55,1) infinite}
.tour-gesture[data-kind=tap] i{animation:tg-tap 1.6s ease-out infinite}
.tour-gesture[data-kind=turn] i{animation:tg-turn 3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes tg-swipe{0%{transform:translateX(calc(-1*var(--tg-amp,46px)));opacity:0}12%{opacity:1}45%{transform:translateX(var(--tg-amp,46px));opacity:1}55%{transform:translateX(var(--tg-amp,46px));opacity:1}88%{opacity:1}100%{transform:translateX(calc(-1*var(--tg-amp,46px)));opacity:0}}
@keyframes tg-tap{0%{transform:scale(1);opacity:0}15%{opacity:1}35%{transform:scale(.6)}55%{transform:scale(1.9);opacity:.15}100%{transform:scale(1);opacity:0}}
@keyframes tg-turn{0%{transform:rotate(-60deg) translateY(-70px) rotate(60deg);opacity:0}15%{opacity:1}50%{transform:rotate(60deg) translateY(-70px) rotate(-60deg);opacity:1}85%{opacity:1}100%{transform:rotate(-60deg) translateY(-70px) rotate(60deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.tour-gesture{display:none}}