/* prd.css (2026-11-13): redesigned product landing pages (à la carte grid + 8 product pages). Hero scenes, price ring, benefit cards, stats. Prefix prd-. Loaded after pg.css. */
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/pages/host/sharetechmono.woff2') format('woff2')}
body.ws-mod .wsm .prd-crumb{margin:0 0 10px;font-size:1rem}
body.ws-mod .wsm .prd-crumb a{color:#FFD54A;text-decoration:underline;text-underline-offset:3px;font-weight:600}
body.ws-mod .wsm .prd-hero .pg-stage{width:100%;align-self:stretch}
body.ws-mod .wsm .prd-hero svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
body.ws-mod .wsm .prd-hero text{font-family:'Source Sans 3',Arial,sans-serif}

/* ---------- shared hero keyframes ---------- */
body.ws-mod .wsm .prd-float{animation:prdFloat 4.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.9s)}
@keyframes prdFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
body.ws-mod .wsm .prd-pulse{transform-box:fill-box;transform-origin:center;animation:prdPulse 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.5s)}
@keyframes prdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
body.ws-mod .wsm .prd-blink{animation:prdBlink 1s steps(2,start) infinite}
@keyframes prdBlink{to{opacity:0}}
body.ws-mod .wsm .prd-type{transform-box:fill-box;transform-origin:left center;animation:prdType 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
@keyframes prdType{0%{transform:scaleX(0)}13%,84%{transform:scaleX(1)}100%{transform:scaleX(0)}}
body.ws-mod .wsm .prd-pop{transform-box:fill-box;transform-origin:center;animation:prdPop 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
@keyframes prdPop{0%,6%{transform:scale(0);opacity:0}14%{transform:scale(1.18);opacity:1}20%,86%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
body.ws-mod .wsm .prd-draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:prdDraw 7s ease-in-out infinite}
@keyframes prdDraw{0%{stroke-dashoffset:var(--len,600)}38%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--len,600)}}
body.ws-mod .wsm .prd-fade{animation:prdFade 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes prdFade{0%,36%{opacity:0}48%,86%{opacity:1}100%{opacity:0}}
body.ws-mod .wsm .prd-rise{animation:prdRise 4.8s ease-out infinite;animation-delay:calc(var(--i,0) * -1.2s);transform-box:fill-box}
@keyframes prdRise{0%{transform:translateY(20px) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-90px) scale(1);opacity:0}}
body.ws-mod .wsm .prd-slide{animation:prdSlide 8.4s ease-out infinite;animation-delay:calc(var(--i,0) * 1.5s)}
@keyframes prdSlide{0%{transform:translateX(150px);opacity:0}9%,80%{transform:translateX(0);opacity:1}92%,100%{transform:translateX(0);opacity:0}}
body.ws-mod .wsm .prd-lit{animation:prdLit 8.4s ease-out infinite;animation-delay:calc(var(--i,0) * 1.5s)}
@keyframes prdLit{0%,7%{fill:#1b3d6b}12%,80%{fill:#F5B800}92%,100%{fill:#1b3d6b}}
body.ws-mod .wsm .prd-drop{animation:prdDrop 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.16s)}
@keyframes prdDrop{0%{opacity:0;transform:translate(0,-22px) scale(.6)}9%{opacity:1;transform:translate(0,0) scale(1)}52%{transform:translate(0,0) scale(1)}76%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(.35)}84%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
body.ws-mod .wsm .prd-bump{transform-box:fill-box;transform-origin:center bottom;animation:prdBump 1.16s ease-out infinite;animation-delay:.35s}
@keyframes prdBump{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.1,.94)}88%{transform:scale(.97,1.05)}}
body.ws-mod .wsm .prd-pin{transform-box:fill-box;transform-origin:center bottom;animation:prdPin 7.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .75s)}
@keyframes prdPin{0%,4%{transform:translateY(-34px) scale(.6);opacity:0}11%{transform:translateY(0) scale(1.12);opacity:1}15%,88%{transform:translateY(0) scale(1);opacity:1}100%{opacity:0}}
body.ws-mod .wsm .prd-ripple{transform-box:fill-box;transform-origin:center;animation:prdRipple 7.4s ease-out infinite;animation-delay:calc(var(--i,0) * .75s)}
@keyframes prdRipple{0%,10%{transform:scale(.3);opacity:0}12%{opacity:.8}30%,100%{transform:scale(2.6);opacity:0}}
body.ws-mod .wsm .prd-star{transform-box:fill-box;transform-origin:center;animation:prdStar 7.4s ease-in-out infinite;animation-delay:calc(var(--i,0) * .45s + 2s)}
@keyframes prdStar{0%{fill:#2c4a78;transform:scale(1)}6%{fill:#FFD54A;transform:scale(1.35)}12%,86%{fill:#FFD54A;transform:scale(1)}100%{fill:#2c4a78}}
body.ws-mod .wsm .prd-fill{transform-box:fill-box;transform-origin:left center;animation:prdFill 6s linear infinite}
@keyframes prdFill{0%{transform:scaleX(0)}86%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}
body.ws-mod .wsm .prd-travel{animation:prdTravel 6s ease-in-out infinite}
@keyframes prdTravel{0%{transform:translateX(0);opacity:0}8%{opacity:1}82%{opacity:1}92%,100%{transform:translateX(var(--dx,160px));opacity:0}}
body.ws-mod .wsm .prd-scroll{animation:prdScroll 5s linear infinite}
@keyframes prdScroll{to{transform:translateX(-64px)}}
body.ws-mod .wsm .prd-hop{animation:prdHop 7.2s steps(1,end) infinite}
@keyframes prdHop{0%{transform:translateX(0)}33%{transform:translateX(86px)}66%{transform:translateX(172px)}}
body.ws-mod .wsm .prd-swipe{animation:prdSwipe 9s ease-in-out infinite}
@keyframes prdSwipe{0%,26%{transform:translateX(0)}33%,59%{transform:translateX(-108px)}66%,92%{transform:translateX(-216px)}100%{transform:translateX(0)}}
body.ws-mod .wsm .prd-tick{stroke-dasharray:30;stroke-dashoffset:30;animation:prdTick 8s ease-out infinite;animation-delay:calc(var(--i,0) * 1.4s)}
@keyframes prdTick{0%,6%{stroke-dashoffset:30}14%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
body.ws-mod .wsm .prd-dash{stroke-dasharray:6 8;animation:prdDash 2s linear infinite}
@keyframes prdDash{to{stroke-dashoffset:-56}}
body.ws-mod .wsm .prd-dots circle{animation:prdDot 1.2s ease-in-out infinite}
body.ws-mod .wsm .prd-dots circle:nth-child(2){animation-delay:.2s}body.ws-mod .wsm .prd-dots circle:nth-child(3){animation-delay:.4s}
@keyframes prdDot{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- price ring + benefit cards ---------- */
body.ws-mod .wsm .prd-price{display:flex;align-items:center;gap:clamp(16px,2vw,28px);background:#0B1F3A;border:2px solid #F5B800;border-radius:14px;padding:clamp(16px,2vw,26px);color:#fff}
body.ws-mod .wsm .prd-ring{flex:0 0 auto;width:clamp(130px,14vw,170px)}
body.ws-mod .wsm .prd-ring svg{display:block;width:100%;height:auto}
body.ws-mod .wsm .prd-ring .trk{fill:none;stroke:rgba(255,255,255,.14);stroke-width:12}
body.ws-mod .wsm .prd-ring .val{fill:none;stroke:#39ff88;stroke-width:12;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(57,255,136,.7))}
body.ws-mod .wsm .prd-go .prd-ring .val{animation:prdRing 2s .3s cubic-bezier(.3,.8,.2,1) forwards}
@keyframes prdRing{to{stroke-dashoffset:var(--rest,.12)}}
body.ws-mod .wsm .prd-ring text{font-family:'Share Tech Mono',ui-monospace,monospace;fill:#FFD54A;text-anchor:middle}
body.ws-mod .wsm .prd-pricetxt{display:grid;gap:6px;font:600 1.15rem/1.3 'Source Sans 3',Arial,sans-serif}
body.ws-mod .wsm .prd-pricetxt b{font:800 clamp(1.7rem,2.6vw,2.3rem)/1.05 'Source Sans 3',Arial,sans-serif;color:#fff}
body.ws-mod .wsm .prd-pricetxt small{font-size:1rem;font-weight:600;color:#c9d8ee}
body.ws-mod .wsm .prd-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.ws-mod .wsm .prd-cards li{background:#fff;border:2px solid #17703d;border-radius:12px;padding:14px 14px 14px 14px;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font:600 1.05rem/1.3 'Source Sans 3',Arial,sans-serif;color:#0B1F3A;opacity:0;transform:translateY(14px)}
body.ws-mod .wsm .prd-go .prd-cards li{animation:prdCard .55s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(var(--i) * .09s + .15s)}
@keyframes prdCard{to{opacity:1;transform:none}}
body.ws-mod .wsm .prd-cards svg{width:30px;height:30px}
body.ws-mod .wsm .prd-cards svg .bg{fill:#17703d}
body.ws-mod .wsm .prd-cards svg .mk{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30}
body.ws-mod .wsm .prd-go .prd-cards svg .mk{animation:prdMk .6s ease-out forwards;animation-delay:calc(var(--i) * .09s + .5s)}
@keyframes prdMk{to{stroke-dashoffset:0}}
/* stats */
body.ws-mod .wsm .prd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:20px}
body.ws-mod .wsm .prd-stat{background:#02060c;border:2px solid #F5B800;border-radius:14px;padding:clamp(14px,1.8vw,22px);text-align:center}
body.ws-mod .wsm .prd-stat b{display:block;font:400 clamp(2rem,3.4vw,3rem)/1 'Share Tech Mono',ui-monospace,monospace;color:#FFD54A;text-shadow:0 0 12px rgba(245,184,0,.5)}
body.ws-mod .wsm .prd-stat span{display:block;margin-top:6px;font:600 1rem/1.25 'Source Sans 3',Arial,sans-serif;color:#e4ecf8}
body.ws-mod .wsm .prd-who p{max-width:none}
body.ws-mod .wsm .prd-buy .ac-band{margin:0}
@media(max-width:1100px){body.ws-mod .wsm .prd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body.ws-mod .wsm .prd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}body.ws-mod .wsm .prd-price{flex-direction:column;text-align:center}}
@media(max-width:560px){body.ws-mod .wsm .prd-cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 body.ws-mod .wsm .prd-float,body.ws-mod .wsm .prd-pulse,body.ws-mod .wsm .prd-blink,body.ws-mod .wsm .prd-rise,body.ws-mod .wsm .prd-ripple,body.ws-mod .wsm .prd-scroll,body.ws-mod .wsm .prd-dash,body.ws-mod .wsm .prd-bump,body.ws-mod .wsm .prd-dots circle{animation:none}
 body.ws-mod .wsm .prd-type,body.ws-mod .wsm .prd-pop,body.ws-mod .wsm .prd-fade,body.ws-mod .wsm .prd-slide,body.ws-mod .wsm .prd-pin,body.ws-mod .wsm .prd-star,body.ws-mod .wsm .prd-fill,body.ws-mod .wsm .prd-drop,body.ws-mod .wsm .prd-travel,body.ws-mod .wsm .prd-hop,body.ws-mod .wsm .prd-swipe,body.ws-mod .wsm .prd-lit{animation:none;opacity:1;transform:none}
 body.ws-mod .wsm .prd-draw,body.ws-mod .wsm .prd-tick{animation:none;stroke-dashoffset:0}
 body.ws-mod .wsm .prd-cards li{opacity:1;transform:none;animation:none}body.ws-mod .wsm .prd-cards svg .mk{stroke-dashoffset:0;animation:none}
 body.ws-mod .wsm .prd-ring .val{animation:none;stroke-dashoffset:var(--rest,.12)}
}