/* Hero product scenes (hero.php): phone + floating cards. Scoped under .wvh. */
.wvh{--ink:#161311;--ink2:#6f6459;--pink:#FF2E74;--line:#eadfd1;--paper:#FFFDF9;position:relative;width:100%;max-width:560px;height:560px;margin-left:auto;font-family:'Instrument Sans',sans-serif;color:var(--ink)}
.wvh *{box-sizing:border-box}
.wvh-glow{position:absolute;inset:6% 4% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,46,116,.28),rgba(255,46,116,0));filter:blur(8px);z-index:0}

/* Phone */
.wvh-phone{position:absolute;z-index:2;left:6%;top:0;width:268px;height:548px;border-radius:46px;background:#0f0c0b;padding:9px;box-shadow:0 0 0 1.5px #2b2421,0 40px 70px -28px rgba(22,19,17,.55),0 12px 24px -12px rgba(22,19,17,.35);animation:wvh-float 7s ease-in-out infinite}
.wvh-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#222 center/cover no-repeat}
.wvh-notch{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:84px;height:24px;border-radius:14px;background:#0f0c0b;z-index:3}
.wvh-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(0,0,0,.72) 100%);z-index:1}
.wvh-reel-top{position:absolute;z-index:2;top:44px;left:18px;color:#fff;font-size:17px}
.wvh-reel-side{position:absolute;z-index:2;right:12px;bottom:118px;display:grid;gap:18px}
.wvh-reel-side span{display:block;width:26px;height:26px}
.wvh-reel-side svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.wvh-reel-bot{position:absolute;z-index:2;left:14px;right:52px;bottom:22px;color:#fff}
.wvh-reel-u{display:flex;align-items:center;gap:8px;font-size:13px}
.wvh-reel-u i{width:28px;height:28px;border-radius:50%;background:#ccc center/cover;border:1.5px solid #fff;flex:none}
.wvh-reel-u span{border:1px solid rgba(255,255,255,.8);border-radius:7px;padding:1px 8px;font-size:11.5px;font-weight:600}
.wvh-reel-bot p{margin:8px 0 0;font-size:12.5px;line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* DM screen */
.wvh-dmscreen{background:#fff}
.wvh-dmscreen::after{display:none}
.wvh-dm-top{position:absolute;top:0;left:0;right:0;padding:44px 16px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #eee;background:#fff;z-index:2}
.wvh-dm-top i{width:34px;height:34px;border-radius:50%;background:#ccc center/cover;flex:none}
.wvh-dm-top b{display:block;font-size:14px}
.wvh-dm-top small{display:block;font-size:11px;color:#8a8a8a}
.wvh-dm-body{position:absolute;top:100px;left:0;right:0;bottom:0;padding:14px 12px;display:flex;flex-direction:column;gap:8px}
.wvh-dm-img{align-self:flex-start;width:130px;height:170px;border-radius:18px;background:#ddd center/cover;margin-bottom:4px}
.wvh-b{margin:0;max-width:82%;padding:9px 12px;border-radius:18px;font-size:12.5px;line-height:1.35}
.wvh-b.in{align-self:flex-start;background:#efefef;color:#111;border-bottom-left-radius:5px}
.wvh-b.out{align-self:flex-end;background:linear-gradient(135deg,#ff2e74,#ff5d8f);color:#fff;border-bottom-right-radius:5px}
.wvh-dm-note{display:flex;align-items:center;gap:6px;margin:auto 0 6px;font-size:10.5px;color:#1f9d57;font-weight:600}
.wvh-dm-note i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.2)}

/* Cards */
.wvh-card{position:absolute;z-index:3;background:rgba(255,253,249,.97);border:1px solid rgba(22,19,17,.08);border-radius:20px;padding:14px 15px;box-shadow:0 1px 2px rgba(22,19,17,.06),0 24px 48px -22px rgba(22,19,17,.42);backdrop-filter:blur(6px)}
.wvh-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.wvh-card-h b{font:800 14px 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.wvh-card-h small{font-size:11px;color:var(--ink2)}
.wvh-thumb{width:30px;height:40px;border-radius:7px;background:#ddd center/cover;flex:none}
.wvh-card ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wvh-card li{margin:0;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px}
.wvh-pi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px}
.wvh-pi svg{width:17px;height:17px}
.wvh-ig{background:linear-gradient(135deg,#feda75,#d62976 55%,#4f5bd5)}
.wvh-tt{background:#111}
.wvh-yt{background:#ff0000}
.wvh-th{background:#111}
.wvh-pt{min-width:0}
.wvh-pt b{display:block;font-size:12.5px;line-height:1.2}
.wvh-pt small{display:block;font-size:11px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wvh-card em{font-style:normal;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#137a3c;background:#e8f8ee;border-radius:999px;padding:3px 8px;white-space:nowrap}
.wvh-card em svg{width:11px;height:11px}
.wvh-card em.is-sched{color:var(--ink2);background:#f3ede4}

.wvh-posted{right:0;top:58px;width:292px}
.wvh-cap{right:26px;bottom:34px;width:250px;animation:wvh-float 8s ease-in-out -2s infinite}
.wvh-cap p{margin:6px 0 0;font-size:13px;line-height:1.4}
.wvh-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#e0125c;background:#ffe6ef;border-radius:999px;padding:2px 8px}

.wvh-grow{right:0;top:118px;width:278px}
.wvh-grow li{grid-template-columns:30px minmax(0,1fr) auto}
.wvh-grow li i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:700;font-size:12px;color:#161311}
.wvh-grow li b{display:block;font-size:12.5px}
.wvh-grow li small{display:block;font-size:10.5px;color:var(--ink2)}
.wvh-grow em{color:#fff;background:var(--pink)}
.wvh-grow em.is-done{color:var(--ink);background:#f3ede4}
.wvh-foot{display:flex;align-items:center;gap:5px;margin:11px 0 0;font-size:11.5px;font-weight:700;color:#137a3c}
.wvh-foot svg{width:13px;height:13px}
.wvh-run{right:30px;bottom:22px;width:250px;animation:wvh-float 8s ease-in-out -3s infinite}
.wvh-run b{display:block;font:800 16px 'Bricolage Grotesque',sans-serif;margin:7px 0 2px}
.wvh-run small{display:block;font-size:11.5px;color:var(--ink2)}
.wvh-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#137a3c}
.wvh-live i{width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 0 3px rgba(40,200,64,.2);animation:wvh-pulse 1.8s ease-in-out infinite}

/* Homepage: phone centre, posts top right, audience left, a DM bottom right */
.wvh-home .wvh-phone{left:30%;top:10px}
.wvh-home .wvh-posted{top:-6px;right:-10px;width:250px}
.wvh-home .wvh-grow{top:318px;right:auto;left:-2%;width:236px;animation:wvh-float 8s ease-in-out -2s infinite}
.wvh-home .wvh-grow ul li:nth-child(3){display:none}
.wvh-mini-dm{position:absolute;z-index:3;right:-2%;bottom:18px;width:206px;display:grid;gap:6px;background:rgba(255,253,249,.97);border:1px solid rgba(22,19,17,.08);border-radius:20px;padding:12px;box-shadow:0 24px 48px -22px rgba(22,19,17,.42);animation:wvh-float 8s ease-in-out -4s infinite}
.wvh-mini-dm .wvh-b{max-width:92%;font-size:11.5px}

@keyframes wvh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wvh-pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.wvh *{animation:none!important}}

@media (max-width:1100px){.wvh{transform:scale(.9);transform-origin:top right}}
@media (max-width:900px){.wvh{transform:none;margin:0 auto;max-width:520px}}
@media (max-width:560px){
	.wvh{height:500px;max-width:100%}
	.wvh-phone{width:222px;height:456px;border-radius:40px;left:0}
	.wvh-screen{border-radius:32px}
	.wvh-home .wvh-phone{left:50%;transform:translateX(-50%);animation:none}
	.wvh-home .wvh-grow{left:0;top:auto;bottom:0;width:220px}
	.wvh-posted,.wvh-home .wvh-posted{width:230px;right:0;top:40px}
	.wvh-pt small{display:none}
	.wvh-grow{width:228px;top:auto;bottom:0}
	.wvh-cap,.wvh-run{width:210px;right:0;bottom:0}
	.wvh-mini-dm{display:none}
	.wvh-home .wvh-posted{top:10px}
}

/* Real photos (Unsplash licence) instead of the old generated ones in the homepage product stills. */
.wv-hub2 .wv-ph1{background-image:url(https://images.unsplash.com/photo-1645810798586-08e892108d67?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
.wv-hub2 .wv-ph2{background-image:url(https://images.unsplash.com/photo-1714640856321-99a204fe40a2?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
.wv-hub2 .wv-ph3{background-image:url(https://images.unsplash.com/photo-1516711923969-3fdc2fb85645?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
.wv-hub2 .wv-ph4{background-image:url(https://images.unsplash.com/photo-1682989127008-4f92e3b8163a?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
.wv-hub2 .wv-ph5{background-image:url(https://images.unsplash.com/photo-1709701576148-6e0a20bb293d?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
.wv-hub2 .wv-ph6{background-image:url(https://images.unsplash.com/photo-1665327469792-cf91f5b8d74c?w=360&h=590&fit=crop&crop=faces,center&q=70&auto=format)!important}
/* Fan avatars: soft colour dots instead of generated faces. */
.wv-hub2 .wv-av1{background-image:linear-gradient(135deg,#b9d7ff,#7fa9f5)!important}
.wv-hub2 .wv-av2{background-image:linear-gradient(135deg,#ffb4c8,#ff7aa2)!important}
.wv-hub2 .wv-av3{background-image:linear-gradient(135deg,#c8f1d4,#7fd49b)!important}
.wv-hub2 .wv-av4{background-image:linear-gradient(135deg,#ffe0a3,#f7b955)!important}
.wv-hub2 .wv-av5{background-image:linear-gradient(135deg,#d9c8ff,#a68bf0)!important}
.wv-hub2 .wv-av6{background-image:linear-gradient(135deg,#b8ece8,#6fcfc6)!important}