/* ---------- masthead storyboard (storyboard.js) ---------- */
.hsb{position:absolute;inset:0;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);font-family:Inter,system-ui,sans-serif;pointer-events:none}
.hsb .fq-rings{opacity:.9}
@keyframes hsb-spin{to{transform:rotate(360deg)}}

/* phone (scenes 1 + 2), laid out in Figma units: 1 --u = 1px of the 343.2px screen */
.hsb-phone{position:absolute;left:50%;top:50%;width:44.4%;aspect-ratio:360/759;transform:translate(-50%,-50%);border-radius:15.2%/7.2%;border:1.76px solid #3a3a40;background:#1a1a1d;padding:1.95%;box-shadow:0 35px 70px rgba(0,0,0,.55);transition:transform 0.428s var(--ease),opacity 0.306s ease,filter 0.367s ease}
.hsb-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(40.48*var(--u));background:#fff;color:#0a0a0a;--u:1px}
.hsb-screen *{position:absolute;margin:0;font-style:normal}
.hsb-s1,.hsb-s2{inset:0}
.hp-t{font-weight:600;font-size:calc(13.2*var(--u))}
.hp-t--w{color:#fff;font-size:calc(12.92*var(--u))}
.hp-i{height:auto;width:calc(23.76*var(--u))}
.hp-a{fill:none;stroke:#0a0a0a;stroke-width:1.78;stroke-linejoin:round}
.hp-tab{width:calc(22.88*var(--u));fill:none;stroke:#0a0a0a;stroke-width:1.72;stroke-linejoin:round}
.hp-bat{width:calc(21.12*var(--u));height:calc(10.56*var(--u));border:calc(1.056*var(--u)) solid #0a0a0a;border-radius:calc(3.08*var(--u));box-sizing:border-box}
.hp-bat::before{content:"";position:absolute;left:calc(1.1*var(--u));top:calc(1.1*var(--u));width:calc(14.08*var(--u));height:calc(6.16*var(--u));background:#0a0a0a;border-radius:calc(1.32*var(--u))}
.hp-bat::after{content:"";position:absolute;right:calc(-3.6*var(--u));top:calc(2*var(--u));width:calc(1.76*var(--u));height:calc(4.4*var(--u));background:#0a0a0a;border-radius:calc(.88*var(--u))}
.hp-ring{width:calc(31.68*var(--u));height:calc(31.68*var(--u));border-radius:50%;background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75)}
.hp-ring::after{content:"";position:absolute;inset:calc(1.76*var(--u));border-radius:50%;background:#fff}
.hp-ava{width:calc(24.64*var(--u));height:calc(24.64*var(--u));border-radius:50%;background:url(img/maya-avatar.jpg) center/cover}
.hp-name{font-weight:600;font-size:calc(12.32*var(--u))}
.hp-sub{font-size:calc(10.12*var(--u));color:#6b6b6b}
.hp-photo{width:calc(343.2*var(--u));height:calc(429.44*var(--u));background:url(img/maya.jpg) center/cover}
.hp-dot{width:calc(4.4*var(--u));height:calc(4.4*var(--u));border-radius:50%;background:#c4c4cc}
.hp-dot.is-on{background:#3897f0}
.hp-cap{width:calc(315*var(--u));font-size:calc(12.32*var(--u));line-height:calc(17.6*var(--u))}
.hp-cap b{position:static;font-weight:600}
.hp-more{font-size:calc(12.32*var(--u));color:#8a8a94}
.hp-ago{font-size:calc(9.24*var(--u));letter-spacing:calc(.528*var(--u));color:#a0a0a8}
.hp-div{width:100%;height:calc(.88*var(--u));background:#e4e4ea}
.hp-me{width:calc(22.88*var(--u));height:calc(22.88*var(--u));border-radius:50%;background:#d8d4e4;box-shadow:inset 0 0 0 calc(1.3*var(--u)) #0a0a0a}
.hp-island{left:calc(123.2*var(--u));top:calc(12.32*var(--u));width:calc(96.8*var(--u));height:calc(28.16*var(--u));border-radius:99px;background:#000;z-index:5}

/* scene 2 screen: dimmed post behind a buy sheet */
.hsb-s2{background:#000;opacity:0;transition:opacity 0.275s ease}
.hsb-s2::before{content:"";position:absolute;inset:0;background:url(img/maya.jpg) center/cover;opacity:.45}
.hsb-sheet{left:0;width:100%;height:calc(551.08*var(--u));background:#fff;border-radius:calc(27.55*var(--u)) calc(27.55*var(--u)) 0 0;color:#111;transform:translateY(105%);transition:transform 0.459s var(--spring) 0.061s}
.hp-grab{width:calc(37.89*var(--u));height:calc(4.3*var(--u));border-radius:9px;background:#d9d9de}
.hp-shot{width:calc(301.37*var(--u));height:calc(258.32*var(--u));border-radius:calc(20.67*var(--u));background:#fff url(img/cw/headphones-hd.png) center/contain no-repeat;overflow:hidden}
.hp-shot span{left:calc(13.77*var(--u));top:calc(13.77*var(--u));padding:calc(5.17*var(--u)) calc(10.33*var(--u));border-radius:99px;background:rgba(17,17,17,.8);color:#fff;font-size:calc(11.19*var(--u));font-weight:500;white-space:nowrap}
.hp-title{font-weight:700;font-size:calc(22.39*var(--u));letter-spacing:-.01em;white-space:nowrap}
.hp-price{font-weight:700;font-size:calc(37.89*var(--u));letter-spacing:-.02em}
.hp-ship{font-size:calc(12.92*var(--u));color:#6b6b73;white-space:nowrap}
.hp-sw{width:calc(24.11*var(--u));height:calc(24.11*var(--u));border-radius:50%}
.hp-sw.is-on{box-shadow:0 0 0 calc(2.58*var(--u)) #c8f25a}
.hp-buy{width:calc(301.37*var(--u));height:calc(55.11*var(--u));line-height:calc(55.11*var(--u));border-radius:99px;background:#111;color:#fff;text-align:center;font-weight:600;font-size:calc(16.36*var(--u))}
.hp-visa{width:100%;text-align:center;font-size:calc(11.19*var(--u));color:#8a8a93}
.hp-home{width:calc(113.66*var(--u));height:calc(4.3*var(--u));border-radius:9px;background:#111;z-index:4}

/* payout card (scene 3) */
.hsb-card{position:absolute;left:50%;top:54%;width:64%;transform:translate(-50%,-50%) scale(.86) translateY(6%);opacity:0;filter:blur(8px);border-radius:28px;border:1px solid rgba(255,255,255,.08);background:#18181b;color:#fff;text-align:center;padding:12% 5% 5%;box-shadow:0 16px 40px rgba(0,0,0,.45);transition:opacity 0.306s ease 0.11s,transform 0.49s var(--spring) 0.11s,filter 0.306s ease 0.11s}
.hsb-ava{position:absolute;left:50%;top:0;width:22%;aspect-ratio:1;border-radius:50%;background:center/cover;border:3px solid #d1ffa3;box-sizing:border-box;transform:translate(-50%,-140%) scale(.6);opacity:0;transition:all 0.367s var(--spring) 0.337s}
.hsb-handle{font-size:15px;font-weight:600}
.hsb-by{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#c8f25a}
.hsb-logo{display:block;height:34px;margin:4px auto 0}
.hsb-amount{font-size:clamp(36px,5.4vw,74px);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.hsb-earned{font-size:13px;color:#8a8a93}
.hsb-rows{margin:14px 0 0;padding-top:12px;border-top:1px solid #2e2e35;display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;font-size:13px}
.hsb-rows dt{color:#8a8a93}.hsb-rows dd{margin:0;font-weight:600;text-align:right}

/* scene states + transitions */
.hsb[data-scene="purchases"] .hsb-s2{opacity:1}
.hsb[data-scene="purchases"] .hsb-sheet{transform:none}
.hsb[data-scene="purchases"] .hp-buy{animation:hsb-press 1.469s 0.979s ease-in-out infinite}
@keyframes hsb-press{0%,80%,100%{transform:scale(1)}88%{transform:scale(.95)}}
.hsb[data-scene="paid"] .hsb-phone{transform:translate(-50%,-50%) scale(.72) translateY(8%);opacity:0;filter:blur(6px)}
.hsb[data-scene="paid"] .hsb-card{opacity:1;transform:translate(-50%,-50%);filter:none}
.hsb[data-scene="paid"] .hsb-ava{transform:translate(-50%,-50%);opacity:1}

/* pop-ups */
.hsb-pops{position:absolute;inset:0;z-index:4}
.hsb-pop{position:absolute;display:flex;align-items:center;gap:12px;white-space:nowrap;background:#fff;color:#111;padding:8px 16px 8px 8px;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(14px) scale(.85);transition:opacity 0.159s ease,transform 0.257s var(--spring);will-change:transform,opacity}
.hsb-pop--reactions{border-radius:999px}
.hsb-pop.is-on{opacity:1;transform:none;animation:hsb-bob 2.754s var(--d,0s) ease-in-out infinite}
.hsb-pop.is-out{opacity:0;transform:scale(.9) translateY(-10px);transition-duration:0.214s}
@keyframes hsb-bob{50%{translate:0 -6px}}
.hsb-pop-face{width:36px;height:36px;border-radius:50%;background:#eee center/cover;flex-shrink:0}
.hsb-pop-coin{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#c8f25a;font-weight:700;font-size:17px;flex-shrink:0}
.hsb-pop-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#c8f25a;font-weight:700;font-size:12px}
.hsb-pop-txt{display:flex;flex-direction:column;line-height:1.25}
.hsb-pop-txt b{font-size:14px;font-weight:500}
.hsb-pop--purchases b,.hsb-pop--paid b{font-weight:600}
.hsb-pop-txt small{font-size:12px;color:#6b6b73}

/* step indicator */
.hsb-steps{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);display:flex;gap:8px}
.hsb-step{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.3);transition:all 0.306s ease}
.hsb-step.is-on{width:24px;background:#d1ffa2}

/* small screens: the visual is a 420px corner piece, so scale type down */
@media (max-width:1023px){.hsb-pop{transform-origin:left center;scale:.72}.hsb-pop.is-on{scale:.72}.hsb-card{font-size:10px}}

@media (prefers-reduced-motion:reduce){.hsb *{animation:none!important;transition-duration:1ms!important;transition-delay:0s!important}}
/* buy sheet always runs to the bottom of the screen, home bar pinned to the bottom */
.hsb-sheet{bottom:0;height:auto!important}
.hp-home{top:auto!important;bottom:calc(9*var(--u))}

/* header visual: 15% smaller */
.fq-visual{scale:.85}
/* keep the scaled visual centred on its anchor, and centre it between the nav (75px) and the marquee (57px) */
@media (min-width:1024px){.fq-visual{transform-origin:0 0;top:calc(50% + 9px)!important}}