/* Tools2hand motion layer (ADR-0019): animated icons, hover intent labels, image motion,
   app dock, brand cursor and guided tour. Loaded after style.css; every effect has a still
   equivalent under prefers-reduced-motion. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--shadow-lift:0 14px 34px -14px #10243b40,0 3px 8px #10243b0d;--dock-h:64px;--dock-gap:10px}

/* ---------- Animated icons (animate-ui inspired, SVG + CSS) ---------- */
.icon{transform-box:fill-box;transform-origin:center;overflow:visible}
.icon *{transform-box:fill-box;transform-origin:center}
@keyframes t2h-beat{0%,100%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.94)}75%{transform:scale(1.08)}}
@keyframes t2h-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(4px)}70%{transform:translateX(-1px)}}
@keyframes t2h-nudge-up{0%,100%{transform:translate(0)}45%{transform:translate(3px,-3px)}}
@keyframes t2h-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-3px)}70%{transform:translateY(1px)}}
@keyframes t2h-spin-q{to{transform:rotate(90deg)}}
@keyframes t2h-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(3deg)}}
@keyframes t2h-ring{0%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(-12deg)}20%,40%,60%{transform:rotate(12deg)}70%{transform:rotate(0)}}
@keyframes t2h-pop{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}70%{transform:scale(.96)}}
@keyframes t2h-blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes t2h-draw{from{stroke-dashoffset:var(--len,40)}to{stroke-dashoffset:0}}
@keyframes t2h-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes t2h-slide-dot{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes t2h-flash{0%,100%{opacity:1}40%{opacity:.25}}
@keyframes t2h-turn{to{transform:rotate(360deg)}}
@keyframes t2h-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.6) rotate(45deg)}}
@keyframes t2h-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes t2h-squash{0%,100%{transform:scale(1)}35%{transform:scale(1.15,.85)}65%{transform:scale(.95,1.06)}}

/* Icons animate when their host is hovered or keyboard-focused; .is-playing (motion.js) replays once on tap. */
@media (hover:hover){
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-heart,.i-heart.is-playing{animation:t2h-beat .7s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-plus,.i-plus.is-playing{animation:t2h-spin-q .45s var(--ease-spring)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-search,.i-search.is-playing{animation:t2h-wiggle .6s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-arrow,.i-chevron),:is(.i-arrow,.i-chevron).is-playing{animation:t2h-nudge .6s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-back{animation:t2h-nudge .6s var(--ease-out) reverse}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-external,.i-external.is-playing{animation:t2h-nudge-up .55s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-home,.i-upload,.i-store,.i-down),:is(.i-home,.i-upload,.i-store).is-playing{animation:t2h-lift .55s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-user,.i-pin),:is(.i-user,.i-pin).is-playing{animation:t2h-bob .6s ease-in-out}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-phone,.i-phone.is-playing{animation:t2h-ring .7s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-message,.i-share,.i-shield,.i-play),:is(.i-message,.i-share,.i-shield).is-playing{animation:t2h-pop .5s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-close{animation:t2h-spin-q .35s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-eye,.i-eye.is-playing{animation:t2h-blink .45s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-camera,.i-camera.is-playing{animation:t2h-flash .5s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-edit,.i-tools,.i-flag,.i-logout),:is(.i-edit,.i-tools).is-playing{animation:t2h-tilt .55s ease-in-out}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-gear,.i-clock),.i-gear.is-playing{animation:t2h-turn .9s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-excavator,.i-tractor,.i-rental,.i-document,.i-book){animation:t2h-squash .6s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-help,.i-sparkle){animation:t2h-wiggle .7s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-filter circle:nth-of-type(1){animation:t2h-slide-dot .6s ease}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-filter circle:nth-of-type(2){animation:t2h-slide-dot .6s ease .08s reverse}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-filter circle:nth-of-type(3){animation:t2h-slide-dot .6s ease .16s}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-grid,.i-list)>*{animation:t2h-pop .45s var(--ease-out)}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-grid,.i-list)>:nth-child(2){animation-delay:.05s}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-grid,.i-list)>:nth-child(3){animation-delay:.1s}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) :is(.i-grid,.i-list)>:nth-child(4){animation-delay:.15s}
 :is(a,button,label,summary,.market-category,.job-card,.icon-host):is(:hover,:focus-visible) .i-check path{stroke-dasharray:24;animation:t2h-draw .5s var(--ease-out);--len:24}
}
/* Taps on touch screens replay the same motion once (class added by motion.js). */
.i-heart.is-playing{animation:t2h-beat .7s var(--ease-out)}
.i-plus.is-playing{animation:t2h-spin-q .45s var(--ease-spring)}
.i-search.is-playing{animation:t2h-wiggle .6s ease}
:is(.i-arrow,.i-chevron).is-playing{animation:t2h-nudge .6s var(--ease-out)}
:is(.i-home,.i-upload,.i-store).is-playing{animation:t2h-lift .55s var(--ease-out)}
:is(.i-user,.i-pin).is-playing{animation:t2h-bob .6s ease-in-out}
.i-phone.is-playing{animation:t2h-ring .7s ease}
:is(.i-message,.i-share,.i-shield).is-playing{animation:t2h-pop .5s var(--ease-out)}
.i-grid.is-playing>*{animation:t2h-pop .45s var(--ease-out)}
.i-grid.is-playing>:nth-child(2){animation-delay:.05s}.i-grid.is-playing>:nth-child(3){animation-delay:.1s}.i-grid.is-playing>:nth-child(4){animation-delay:.15s}
.i-help.is-playing{animation:t2h-wiggle .7s ease}

/* Saved state: filled heart that pops once when switched on. */
.favorite{display:inline-grid;place-items:center;padding:0;transition:background-color .18s,border-color .18s,color .18s,transform .2s var(--ease-spring)}
.favorite .icon{width:19px;height:19px}
.favorite[aria-pressed=true] .icon path{fill:currentColor}
.favorite:active{transform:scale(.88)}

/* ---------- Hover intent labels (text roll) ---------- */
.roll{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:inherit}
.roll>span{grid-area:1/1;transition:transform .42s var(--ease-out),opacity .3s;white-space:nowrap}
.roll-b{transform:translateY(105%);opacity:0;color:inherit}
@media (hover:hover) and (pointer:fine){
 :is(a,button,.market-category,.job-card,label):is(:hover,:focus-visible) .roll>.roll-a{transform:translateY(-105%);opacity:0}
 :is(a,button,.market-category,.job-card,label):is(:hover,:focus-visible) .roll>.roll-b{transform:translateY(0);opacity:1}
}
@media not ((hover:hover) and (pointer:fine)){.roll-b{display:none}}

/* ---------- Image motion: gentle zoom, square frames soften to rounded ---------- */
.product-card{transition:box-shadow .35s var(--ease-out),transform .35s var(--ease-out),border-radius .45s var(--ease-out),border-color .25s}
.product-photo img,.gallery>img,#detail-main-img,.saved-item img,.table-product img,.queue-images img,.photo-card img,.gallery-thumb img{transition:transform .6s var(--ease-out),border-radius .45s var(--ease-out),filter .4s}
.gallery,.gallery-thumb,.saved-item img,.table-product img,.queue-images img,.photo-card,.market-banner{transition:border-radius .45s var(--ease-out),box-shadow .35s var(--ease-out),border-color .2s}
@media (hover:hover) and (pointer:fine){
 .product-card:hover{border-radius:18px;box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:#c3d2ea}
 .product-card:hover .product-photo img{transform:scale(1.045)}
 .gallery:hover{border-radius:20px}
 .gallery:hover #detail-main-img,.gallery:hover>img{transform:scale(1.025)}
 .gallery-thumb:hover{border-radius:12px}
 .gallery-thumb:hover img{transform:scale(1.08)}
 .saved-item:hover img,.table-product:hover img,.queue-images img:hover{border-radius:14px;transform:scale(1.05)}
 .photo-card:hover{border-radius:16px}
 .photo-card:hover img{transform:scale(1.04)}
 .market-banner:hover{border-radius:22px}
 .market-banner:hover .market-banner-media img,.market-banner:hover .market-banner-media video{transform:scale(1.03)}
 .market-banner-media img,.market-banner-media video{transition:transform 1.2s var(--ease-out)}
}
/* A quiet "open details" cue on listing photos. */
.product-photo::after{content:attr(data-cue);position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);opacity:0;background:#10243bd9;color:white;font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .35s var(--ease-out);backdrop-filter:blur(6px)}
@media (hover:hover) and (pointer:fine){.product-card:hover .product-photo::after{opacity:1;transform:translate(-50%,0)}}

/* ---------- Polish on existing Workbench components ---------- */
.btn{transition:background-color .18s,border-color .18s,color .18s,transform .18s var(--ease-out),box-shadow .25s}
.btn:active:not(:disabled),.icon-btn:active,.chip:active{transform:scale(.97)}
.btn.primary:hover{background:#1c49c2;border-color:#1c49c2;color:white;box-shadow:0 8px 18px -8px #2255d9b3}
.btn.dark:hover{background:#0b1a2c;color:white}
.icon-btn{display:inline-grid;place-items:center;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.icon-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--pale)}
.chip{transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.chip:not(.active):hover{border-color:var(--blue);color:var(--blue);background:var(--pale)}
.market-category,.job-card{transition:background-color .2s,border-color .2s,transform .3s var(--ease-out),box-shadow .3s,border-radius .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.market-category:hover,.job-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px #10243b59;border-radius:14px}}
.site-footer a:not(.wordmark),.section-heading a,.crumb a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out),color .2s}
.site-footer a:not(.wordmark):hover,.section-heading a:hover,.crumb a:hover{background-size:100% 1px}
.section-heading a .icon{width:16px;height:16px;margin-left:4px}
.wordmark span{display:inline-block;transition:transform .5s var(--ease-spring)}
.wordmark:hover span{transform:translateY(-3px) rotate(-8deg)}
.search-box{transition:border-color .2s,box-shadow .25s}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px #2255d91f}
.search-box button{transition:background-color .2s}
.search-box button:hover{background:#1c49c2}
.workspace-search .icon,.header-sell .icon,.btn .icon{width:18px;height:18px}
.mobile-filter .icon{width:18px;height:18px}
dialog[open]{animation:t2h-dialog-in .34s var(--ease-out)}
dialog[open]::backdrop{animation:t2h-fade .3s ease}
@keyframes t2h-dialog-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes t2h-fade{from{opacity:0}}
#toast:not([hidden]){animation:t2h-toast-in .38s var(--ease-spring);box-shadow:0 12px 28px -12px #10243b80}
@keyframes t2h-toast-in{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
#main.t2h-enter>*{animation:t2h-enter .45s var(--ease-out) both}
@keyframes t2h-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.product-grid>.product-card{animation:t2h-enter .5s var(--ease-out) both}
.product-grid>.product-card:nth-child(2){animation-delay:.04s}.product-grid>.product-card:nth-child(3){animation-delay:.08s}.product-grid>.product-card:nth-child(4){animation-delay:.12s}.product-grid>.product-card:nth-child(5){animation-delay:.16s}.product-grid>.product-card:nth-child(6){animation-delay:.2s}.product-grid>.product-card:nth-child(n+7){animation-delay:.24s}
.stepper .step-btn span,.stepper span{transition:background-color .3s,color .3s,transform .35s var(--ease-spring)}
.stepper .active span{transform:scale(1.08);box-shadow:0 0 0 4px #2255d926}
.verification-steps li{transition:border-color .3s,background-color .3s,transform .3s var(--ease-out)}
.verification-steps li.complete>span{color:var(--success)}
.badge.verified .icon{width:13px;height:13px}
.gallery-note .icon,.card-location .icon{vertical-align:-2px}
.loading::before{content:'';display:block;width:34px;height:34px;margin:0 auto 14px;border-radius:50%;border:3px solid var(--rule);border-top-color:var(--blue);animation:t2h-turn .8s linear infinite}
:focus-visible{transition:outline-offset .15s}

/* ---------- App dock (mobile) ---------- */
.dock-icon{display:grid;place-items:center;height:24px}
.mobile-nav :not(.mobile-sell)>.dock-icon{margin-top:0}
.dock-icon .icon{width:23px;height:23px}
.dock-indicator{display:none}
@media(max-width:760px){
 .mobile-nav{left:12px;right:12px;bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom));min-height:var(--dock-h);padding:6px;border:1px solid #ffffffb3;border-radius:24px;background:#ffffffd1;-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);box-shadow:0 16px 36px -14px #10243b6b,0 2px 8px #10243b14;transition:transform .42s var(--ease-out),opacity .3s;isolation:isolate;overflow:visible}
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mobile-nav{background:#fffffff7}}
 .mobile-nav a,.mobile-nav button{position:relative;z-index:1;background:transparent;border-radius:18px;min-height:50px;gap:3px;font-size:inherit;color:var(--muted);transition:color .25s}
 .mobile-nav a span:not(.dock-icon),.mobile-nav button span:not(.dock-icon){font-size:10px;font-weight:500;letter-spacing:.1px}
 .mobile-nav .active{background:transparent;color:var(--blue)}
 .mobile-nav .active .dock-icon{animation:t2h-lift .5s var(--ease-out)}
 .dock-indicator{display:block;position:absolute;z-index:0;top:6px;bottom:6px;left:0;width:0;border-radius:18px;background:#e2eaff;box-shadow:inset 0 0 0 1px #2255d926;transition:transform .45s var(--ease-spring),width .3s var(--ease-out),opacity .2s;opacity:0}
 .dock-indicator.on{opacity:1}
 .mobile-nav .mobile-sell{color:var(--navy)}
 .mobile-nav .mobile-sell .dock-icon{width:52px;height:52px;margin:-30px 0 -2px;border-radius:18px;background:linear-gradient(150deg,#3b6df2,#1c47bf);color:white;box-shadow:0 12px 22px -8px #2255d9a6,0 0 0 4px #ffffffeb;transition:transform .35s var(--ease-spring),border-radius .35s}
 .mobile-nav .mobile-sell .dock-icon .icon{width:26px;height:26px;stroke-width:2}
 .mobile-nav .mobile-sell:active .dock-icon{transform:scale(.92)}
 .mobile-nav .mobile-sell.active .dock-icon{border-radius:50%;animation:none}
 .mobile-nav [data-badge]::after{content:attr(data-badge);position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--blue);color:white;font-size:10px;line-height:17px;font-weight:600;text-align:center;box-shadow:0 0 0 2px white}
 body.dock-hidden .mobile-nav{transform:translateY(calc(100% + var(--dock-gap) + 20px));opacity:.4}
 .compare-tray{bottom:calc(var(--dock-h) + var(--dock-gap) + 14px + env(safe-area-inset-bottom));border-radius:14px}
 #toast{bottom:calc(var(--dock-h) + var(--dock-gap) + 22px + env(safe-area-inset-bottom));border-radius:12px}
 .site-footer{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
 /* The dock carries account, favourites and sell on phones, so the header keeps only brand + search. */
 .header-actions>:not([href="#moderation"]){display:none}
 .header-actions:not(:has([href="#moderation"])){display:none}
 .header-content{min-height:0;padding-block:12px 14px;gap:10px}
 .search-box{margin-top:2px}
 /* The listing wizard is a focused task: its own action bar replaces the dock. */
 .is-wizard .mobile-nav{display:none}
 .is-wizard .form-actions{bottom:0;padding-bottom:max(9px,env(safe-area-inset-bottom));box-shadow:0 -10px 24px -16px #10243b59}
 .is-wizard #main{padding-bottom:90px}
 .has-contact #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
 .contact-bar{padding-bottom:max(12px,env(safe-area-inset-bottom));box-shadow:0 -12px 26px -18px #10243b66}
 /* Mobile: categories and job shortcuts scroll sideways with snap, like an app rail. */
 .job-grid,.market-categories.rail{scroll-snap-type:x mandatory;scrollbar-width:none}
 .job-grid>*{scroll-snap-align:start}
}

/* ---------- Brand cursor (pointer: fine only) ---------- */
@media (hover:hover) and (pointer:fine){
 html{cursor:url(cursors/default.svg) 4 3,auto}
 a[href],button:not(:disabled),[role=button],select,summary,label:has(input[type=checkbox],input[type=radio]),input[type=checkbox],input[type=radio],input[type=file],.chip,.market-category{cursor:url(cursors/pointer.svg) 4 3,pointer}
 input:not([type=checkbox],[type=radio],[type=file],[type=range]):not(:disabled),textarea:not(:disabled),[contenteditable=true]{cursor:url(cursors/text.svg) 16 16,text}
 .product-photo,.gallery img,#detail-main-img,[data-action=gallery],.lightbox-view img{cursor:url(cursors/zoom.svg) 13 13,zoom-in}
 button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled=true]{cursor:url(cursors/not-allowed.svg) 4 3,not-allowed}
 [aria-busy=true],.loading,body.is-busy{cursor:url(cursors/wait.svg) 4 3,progress}
 .gallery-thumbs,.job-grid,.seller-tabs,.comparison-scroll,.review-nav{cursor:url(cursors/grab.svg) 16 16,grab}
 .gallery-thumbs:active,.job-grid:active,.seller-tabs:active,.comparison-scroll:active{cursor:url(cursors/grabbing.svg) 16 16,grabbing}
 .gallery-thumbs button,.job-grid a,.seller-tabs :is(a,button){cursor:url(cursors/pointer.svg) 4 3,pointer}
}
.cursor-ring{position:fixed;left:0;top:0;z-index:2147483000;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid #2255d9a6;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .25s,width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out),background-color .3s,border-color .3s;will-change:transform}
.cursor-ring.on{opacity:1}
.cursor-ring.is-link{width:52px;height:52px;margin:-26px 0 0 -26px;background:#2255d914;border-color:#2255d966}
.cursor-ring.is-media{width:72px;height:72px;margin:-36px 0 0 -36px;background:#10243b1f;border-color:#ffffffcc}
.cursor-ring.is-down{width:26px;height:26px;margin:-13px 0 0 -13px;background:#2255d926}
.cursor-ring.is-text,.entry-active .cursor-ring,body:has(dialog[open]) .cursor-ring{opacity:0}

/* ---------- Guide button, invitation and tour ---------- */
.guide-fab{position:fixed;z-index:31;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:0;height:50px;min-width:50px;padding:0 13px;border:0;border-radius:25px;background:var(--navy);color:white;box-shadow:0 14px 28px -12px #10243bb3,0 0 0 2px #ffffff59;transition:transform .4s var(--ease-out),gap .35s var(--ease-out),padding .35s var(--ease-out),background-color .2s}
.guide-fab .icon{width:24px;height:24px}
.guide-fab-label{max-width:0;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:500;transition:max-width .4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.guide-fab:hover,.guide-fab:focus-visible{gap:8px;padding:0 18px 0 14px;background:var(--blue)}.guide-fab:hover .guide-fab-label,.guide-fab:focus-visible .guide-fab-label{max-width:180px}}
.guide-fab::before{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px solid #2255d9;opacity:0}
.guide-fab.is-new::before{animation:t2h-halo 2.2s ease-out 3}
@keyframes t2h-halo{0%{opacity:.8;transform:scale(.92)}100%{opacity:0;transform:scale(1.35)}}
.entry-active .guide-fab,.entry-active .guide-invite{display:none}
@media(max-width:760px){
 .guide-fab{right:14px;bottom:calc(var(--dock-h) + var(--dock-gap) + 14px + env(safe-area-inset-bottom));height:44px;min-width:44px;padding:0 10px}
 body.dock-hidden .guide-fab{transform:translateY(calc(var(--dock-h) + var(--dock-gap)))}
 .has-contact .guide-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
 .is-wizard .guide-fab{bottom:calc(104px + env(safe-area-inset-bottom))}
 body:has(.compare-tray) .guide-fab{bottom:calc(var(--dock-h) + var(--dock-gap) + 74px + env(safe-area-inset-bottom))}
}
.guide-invite{position:fixed;z-index:33;left:50%;bottom:24px;transform:translate(-50%,0);display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100% - 28px));padding:12px 12px 12px 16px;background:white;border:1px solid var(--rule);border-radius:16px;box-shadow:0 22px 44px -18px #10243b80;animation:t2h-invite-in .55s var(--ease-spring) both}
.guide-invite[hidden]{display:none}
@keyframes t2h-invite-in{from{opacity:0;transform:translate(-50%,24px)}}
.guide-invite .invite-icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--pale);color:var(--blue)}
.guide-invite .invite-icon .icon{animation:t2h-wiggle 1.4s ease 1s 2}
.guide-invite p{font-size:13px;line-height:1.5;margin:0;flex:1}
.guide-invite p strong{display:block;font-size:14px}
.guide-invite .btn{min-height:40px;padding:8px 14px;font-size:13px;white-space:nowrap}
.guide-invite .icon-btn{width:40px;height:40px;flex:none;border-color:transparent}
@media(max-width:760px){.guide-invite{bottom:calc(var(--dock-h) + var(--dock-gap) + 12px + env(safe-area-inset-bottom));flex-wrap:wrap}.guide-invite p{min-width:170px}}

.tour-layer{position:fixed;inset:0;z-index:2147482000;pointer-events:none}
.tour-layer[hidden]{display:none}
.tour-shade{position:fixed;inset:0;pointer-events:auto;background:transparent}
.tour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px #0b1a2cb8,0 0 0 2px #ffffff,0 0 0 7px #2255d980;transition:top .45s var(--ease-out),left .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out),border-radius .45s;pointer-events:none}
.tour-spot::after{content:'';position:absolute;inset:-7px;border-radius:inherit;border:2px solid #7299ff;animation:t2h-halo 1.8s ease-out infinite}
.tour-card{position:fixed;width:min(340px,calc(100vw - 28px));background:white;color:var(--navy);border-radius:16px;padding:18px 18px 14px;box-shadow:0 24px 50px -16px #0b1a2ccc;pointer-events:auto;transition:top .45s var(--ease-out),left .45s var(--ease-out);animation:t2h-dialog-in .35s var(--ease-out)}
.tour-card:focus{outline:none}
.tour-card .tour-step{font-size:11px;font-weight:600;letter-spacing:1px;color:var(--blue)}
.tour-card h3{font-size:17px;margin:4px 0 6px;font-weight:600}
.tour-card p{font-size:13px;color:var(--muted);line-height:1.6}
.tour-progress{display:flex;gap:5px;margin:14px 0 12px}
.tour-progress i{flex:1;height:4px;border-radius:2px;background:var(--rule);transition:background-color .3s}
.tour-progress i.on{background:var(--blue)}
.tour-actions{display:flex;align-items:center;gap:8px}
.tour-actions .quiet{margin-right:auto;color:var(--muted)}
.tour-actions .btn{min-height:40px;padding:8px 14px;font-size:13px}
.tour-arrow{position:absolute;width:14px;height:14px;background:white;transform:rotate(45deg)}

/* ---------- Usage guide (dialog) and code-generated motion demos ---------- */
#guide-dialog{width:min(980px,calc(100% - 24px));padding:0;border:0;border-radius:20px;overflow:hidden;max-height:min(92vh,880px)}
#guide-dialog::backdrop{background:#0b1a2ccc;backdrop-filter:blur(3px)}
.guide-shell{display:grid;grid-template-rows:auto auto 1fr;max-height:inherit}
.guide-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 10px}
.guide-top h2{font-size:22px}
.guide-top p{font-size:13px;color:var(--muted);margin-top:2px}
.guide-tabs{display:flex;gap:6px;padding:4px 24px 14px;border-bottom:1px solid var(--rule)}
.guide-tabs button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:white;font-size:13px;font-weight:500;color:var(--muted);transition:all .2s}
.guide-tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:white}
.guide-tabs .icon{width:17px;height:17px}
.guide-body{overflow:auto;padding:20px 24px 24px;background:var(--surface)}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.guide-card{display:flex;flex-direction:column;background:white;border:1px solid var(--rule);border-radius:14px;overflow:hidden;transition:border-radius .45s var(--ease-out),box-shadow .35s,transform .35s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.guide-card:hover{border-radius:22px;box-shadow:var(--shadow-lift);transform:translateY(-3px)}}
.guide-card .demo{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,#f6f8fc,#e9eef7);border-bottom:1px solid var(--rule);overflow:hidden}
.guide-card .demo svg{position:absolute;inset:0;width:100%;height:100%}
.guide-card .demo-replay{position:absolute;right:10px;top:10px;width:34px;height:34px;min-height:0;border-radius:50%;background:#ffffffe6;border:1px solid var(--rule);display:grid;place-items:center;color:var(--navy)}
.guide-card .demo-replay .icon{width:16px;height:16px}
.guide-card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.guide-card-body .eyebrow{display:flex;align-items:center;gap:6px}
.guide-card-body .eyebrow .icon{width:15px;height:15px}
.guide-card-body h3{font-size:16px;font-weight:600}
.guide-card-body ol{margin:2px 0 8px;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.65}
.guide-card-body .row{margin-top:auto;flex-wrap:wrap;gap:8px}
.guide-card-body .btn{min-height:40px;padding:8px 13px;font-size:13px}
.guide-facts{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.guide-facts div{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:white;border:1px solid var(--rule);border-radius:12px;font-size:12px;color:var(--muted)}
.guide-facts .icon{width:20px;height:20px;color:var(--blue);flex:none}
.guide-facts strong{display:block;color:var(--navy);font-size:13px;font-weight:600}
@media(max-width:760px){
 #guide-dialog{width:100%;max-width:100%;max-height:94vh;margin:auto 0 0;border-radius:22px 22px 0 0}
 #guide-dialog[open]{animation:t2h-sheet-in .42s var(--ease-out)}
 .guide-top{padding:16px 16px 8px}.guide-top h2{font-size:19px}
 .guide-tabs{padding:4px 16px 12px;overflow-x:auto}
 .guide-body{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
 .guide-grid{grid-template-columns:1fr}
}
@keyframes t2h-sheet-in{from{transform:translateY(40px);opacity:0}}

/* Demo scenes: every element gets its part of an 8s loop via --d (delay). */
.demo svg *{transform-box:fill-box}
.demo .ani{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:var(--ease-out);animation-delay:var(--d,0s);animation-fill-mode:both}
.demo .type-in{animation-name:d-type;transform-origin:left center}
.demo .pop-in{animation-name:d-pop;transform-origin:center}
.demo .rise-in{animation-name:d-rise}
.demo .fade-in{animation-name:d-fade}
.demo .tap{animation-name:d-tap;transform-origin:center}
.demo .cursor-move{animation-name:var(--path);animation-timing-function:cubic-bezier(.45,0,.2,1)}
.demo .fill-on{animation-name:d-fill}
.demo .draw{stroke-dasharray:60;animation-name:d-draw}
.demo .ring{animation-name:d-ring;transform-origin:center}
.demo .slide-x{animation-name:d-slide-x}
@keyframes d-type{0%,8%{transform:scaleX(0)}22%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes d-pop{0%,10%{transform:scale(0);opacity:0}18%{transform:scale(1.12);opacity:1}24%,88%{transform:scale(1);opacity:1}96%,100%{transform:scale(.6);opacity:0}}
@keyframes d-rise{0%,10%{transform:translateY(14px);opacity:0}22%,88%{transform:none;opacity:1}96%,100%{transform:translateY(-6px);opacity:0}}
@keyframes d-fade{0%,10%{opacity:0}22%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes d-tap{0%,40%,52%,100%{transform:scale(1)}46%{transform:scale(.86)}}
@keyframes d-fill{0%,30%{fill:#e4eaf2}38%,90%{fill:#2255d9}98%,100%{fill:#e4eaf2}}
@keyframes d-draw{0%,40%{stroke-dashoffset:60}55%,90%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:60}}
@keyframes d-ring{0%,30%,60%,100%{transform:rotate(0)}34%,42%,50%{transform:rotate(-14deg)}38%,46%,54%{transform:rotate(14deg)}}
@keyframes d-slide-x{0%,15%{transform:translateX(0)}30%,45%{transform:translateX(-33.3%)}60%,75%{transform:translateX(-66.6%)}90%,100%{transform:translateX(0)}}
@keyframes d-path-search{0%{transform:translate(250px,150px)}15%,25%{transform:translate(214px,40px)}40%,55%{transform:translate(90px,112px)}70%,100%{transform:translate(250px,150px)}}
@keyframes d-path-contact{0%{transform:translate(250px,150px)}30%,55%{transform:translate(232px,128px)}75%,100%{transform:translate(250px,150px)}}
@keyframes d-path-sell{0%{transform:translate(250px,150px)}25%,40%{transform:translate(70px,100px)}60%,80%{transform:translate(236px,150px)}100%{transform:translate(250px,150px)}}
@keyframes d-path-seller{0%{transform:translate(250px,150px)}30%,50%{transform:translate(238px,78px)}75%,100%{transform:translate(250px,150px)}}
.guide-card.is-paused .ani{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
 .icon,.icon *,.roll>span,.product-card,.product-photo img,#main.t2h-enter>*,.product-grid>.product-card,dialog[open],#toast:not([hidden]),.guide-invite,.guide-fab,.tour-spot,.tour-card,.mobile-nav,.dock-indicator,.dock-icon,.stepper span,.loading::before{animation:none!important;transition:none!important}
 .roll-b{display:none}.roll>.roll-a{transform:none!important;opacity:1!important}
 .product-card:hover,.market-category:hover,.job-card:hover,.guide-card:hover{transform:none}
 .product-card:hover .product-photo img,.gallery:hover img,.market-banner:hover img,.market-banner:hover video{transform:none}
 .tour-spot::after,.guide-fab.is-new::before{animation:none}
 .cursor-ring{display:none}
 .demo .ani{animation:none!important}
 .demo .type-in,.demo .pop-in,.demo .rise-in,.demo .fade-in{transform:none;opacity:1}
 .demo .cursor-move{display:none}
 body.dock-hidden .mobile-nav{transform:none;opacity:1}
}