/* Tool reel: tap-to-play phone clips of the tools, on sales pages and thank-you pages.
   Markup comes from scripts/build-tool-reels.py; behaviour from wg-tool-reel.js. */
.ts-show{text-align:left;margin-top:38px;padding-top:30px;border-top:1px dashed var(--sand)}
.ts-head h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:6px}
.ts-sub{font-size:.98rem;margin-bottom:16px}
.ts-cap{font-family:var(--serif);font-size:1.05rem;line-height:1.25;color:var(--plum);margin:0 0 10px;min-height:3.75em}
.ts-name{margin:10px 0 0;font-size:.85rem;font-weight:800;line-height:1.3;color:var(--plum)}
.ts-priv{display:inline-block;margin-top:6px;font-size:.76rem;color:var(--plum-soft);background:var(--blush);border-radius:999px;padding:2px 10px}
.ts-rowwrap{position:relative;margin:0 -24px}
.ts-row{list-style:none;margin:0;padding:4px 24px 14px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.ts-row::-webkit-scrollbar{display:none}
.ts-row:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.ts-row>li{flex:0 0 min(46vw,200px);scroll-snap-align:start;min-width:0}
.ts-arrow{display:none;position:absolute;top:42%;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid var(--sand);background:#fff;color:var(--plum);font:400 1.8rem/1 var(--sans);cursor:pointer;box-shadow:var(--shadow-sm);padding:0 0 4px}
.ts-arrow.prev{left:6px}.ts-arrow.next{right:6px}
@media (hover:hover) and (pointer:fine){.ts-arrow:not([hidden]){display:block}.ts-arrow:hover{background:var(--cream-2)}.ts-row>li{flex-basis:200px}}
.vph{position:relative;aspect-ratio:9/16;cursor:pointer;border-radius:24px;overflow:hidden;background:#e9e6d2;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.vph img,.vph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.is-private .vph{border-color:#cfcdb5;box-shadow:none}
.vplay{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.vplay span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.22);position:relative}
.vplay span::after{content:"";position:absolute;left:21px;top:16px;border-left:17px solid var(--terracotta-dark);border-top:11px solid transparent;border-bottom:11px solid transparent}
.vhint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:.74rem;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none}
.vph.is-playing .vplay span,.vph.is-playing .vhint{opacity:0;transition:opacity .2s}
.vph.is-playing .vplay:focus-visible span{opacity:1}
.vplay:focus-visible{outline:3px solid var(--terracotta);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ts-row{scroll-behavior:auto}.vph.is-playing .vplay span,.vph.is-playing .vhint{transition:none}}