/* BBB v42: orb glass comparison, Gel logo demo, gel family demos, film header bloom, borrowed colour, sticker fan, calm coming-soon */

/* ===== 1. Video in glass: Without | Liquid | Bespoke (the winner, round, gold badge) ===== */
.vidd-row{grid-template-columns:1fr 1fr 1.22fr;gap:22px;align-items:center}
.vd{position:relative}
.vd.plain{opacity:.66;filter:saturate(.7)}
.vd.liquid{opacity:.86}
.vd.liquid figcaption b,.vd.plain figcaption b{color:#cfc6af}
.vd.liquid .vd-pane{position:absolute;left:11%;right:11%;top:13%;bottom:13%;border-radius:30px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 10px 18px -8px rgba(255,255,255,.4),0 20px 40px -22px #000}
.vd.liquid .vd-pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;mix-blend-mode:screen}
.vd.liquid .vd-txt{left:20px;bottom:22px}
.vd.glassy .vd-stage{box-shadow:0 0 0 1.5px #e3c27a,0 0 0 6px rgba(227,194,122,.1),0 0 64px rgba(227,194,122,.32),0 34px 64px -28px #000}
.vd.glassy figcaption b{color:#fbe9b7;font-size:1.12em}
.vd.glassy::before{content:"BESPOKE GLASS";position:absolute;z-index:6;top:14px;left:14px;padding:8px 14px 8px 12px;border-radius:999px;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#2a1a04;background:linear-gradient(145deg,#fbe9b7,#e3c27a 55%,#a47f34);box-shadow:0 6px 18px rgba(227,194,122,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.vd.glassy .vd-pane{position:absolute;right:auto;bottom:auto;left:50%;top:47%;width:min(74%,330px);height:auto;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden!important}
.vd.glassy .vd-pane::before{border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.3),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 72%);box-shadow:inset 0 0 0 1.5px rgba(251,233,183,.85),inset 0 12px 22px rgba(255,255,255,.28),inset 0 -14px 26px rgba(227,194,122,.28),0 0 46px rgba(180,150,255,.35)}
.vd.glassy .vd-pane video{border-radius:50%}
.vd.glassy .vd-txt{left:0;right:0;bottom:15%;text-align:center}
@media(max-width:900px){.vidd-row{grid-template-columns:1fr;gap:26px}.vd.glassy{order:-1}.vd.plain,.vd.liquid{opacity:.85}}

/* ===== 2. Gel lab: your logo ===== */
.gel-bub{width:clamp(104px,12.5vw,150px)}
.gel-pair{gap:3%;align-items:flex-start;padding:0 3%;transform:translateY(-54%)}
.gel-col{gap:9px;flex:1 1 0;min-width:0;max-width:48%}
.gel-col>.gel-bub{margin:0 auto}
.gel-cap{width:100%;box-sizing:border-box;padding:7px 9px 8px;border-radius:14px;background:rgba(8,6,14,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:none;font-size:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gel-cap small{display:block;margin-top:3px;font-size:11px;line-height:1.35;opacity:.9;color:#e9e1cc}
.gel-hud{display:none}
.gel-strip{display:grid;gap:5px;padding:7px 10px;border-radius:12px;background:rgba(8,6,14,.66);width:100%}
.gs-r{display:flex;align-items:center;gap:5px}
.gs-r em{flex:0 0 40px;font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:#d8cfb8}
.gs-r i{flex:1;height:12px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:background .25s}
.gel-logo-ink{background-image:linear-gradient(180deg,var(--i0,#ff7a3d),var(--i1,#c05a8c),var(--i2,#8b4dff),var(--i1,#c05a8c),var(--i0,#ff7a3d)),url(assets/bespoke-o.png);background-size:100% 300%,contain;background-repeat:repeat-y,no-repeat;animation:gelSweep 4.8s ease-in-out infinite alternate;filter:saturate(2) brightness(1.08) drop-shadow(0 0 12px color-mix(in srgb,var(--i1,#c05a8c) 80%,transparent)) drop-shadow(0 4px 8px rgba(0,0,0,.35))}
@keyframes gelSweep{from{background-position:0 0%,center}to{background-position:0 100%,center}}
.gel-logo{width:66%;height:66%}
.gel-feel{display:flex;align-items:center;gap:10px;margin-top:2px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font:600 12.5px/1.35 "BBB Sans",Arial,sans-serif;color:#d9d0b9;min-height:44px}
.gel-feel .gf-dot{flex:0 0 10px;height:10px;border-radius:50%;background:#6b6554;transition:background .2s,box-shadow .2s}
.gel-feel.hit .gf-dot{background:#ffe29a;box-shadow:0 0 14px #ffe29a}
.gel-feel small{display:block;opacity:.75;font-weight:500}
.gel-bub.buzz-vis{animation:gelBuzz .22s linear 1}
@keyframes gelBuzz{0%,100%{translate:0 0}20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px 0}80%{translate:2px 1px}}
.gel-note{position:absolute;left:50%;top:0;font-size:22px;color:#fff;text-shadow:0 0 12px rgba(255,255,255,.9);pointer-events:none;animation:gelNote .9s ease-out forwards}
@keyframes gelNote{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-60px)}}
.gel-tg button[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgba(255,226,154,.6),0 0 16px -4px rgba(255,226,154,.5)}

/* ===== 3. Gel family demos ===== */
.gel-demos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);margin:0 0 clamp(20px,3vw,34px)}
.gd{position:relative;border-radius:26px;overflow:hidden;padding:clamp(18px,2.4vw,30px);background:#0d0b14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 30px 60px -36px #000}
.gd h4{margin:0 0 4px;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:#fff6dd;position:relative;z-index:2}
.gd>p{margin:0 0 18px;color:#cfc6ae;font-size:13.5px;line-height:1.45;position:relative;z-index:2}
.gd-bg{position:absolute;inset:0;background:linear-gradient(110deg,#ff7a3d,#ffcf5a 16%,#35d6a3 33%,#2f7bff 50%,#8b4dff 66%,#ff4d9a 83%,#ff7a3d);background-size:300% 100%;animation:gdMove 14s linear infinite;opacity:.55;filter:saturate(1.25)}
.gd-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,14,.55),rgba(8,6,14,.25) 50%,rgba(8,6,14,.6))}
@keyframes gdMove{to{background-position:300% 0}}
.gbar{position:relative;z-index:2;display:grid;gap:15px}
.gbar-r{display:grid;gap:6px}
.gbar-l{display:flex;justify-content:space-between;font:700 12.5px/1 "BBB Sans",Arial,sans-serif;color:#fff}
.gbar-l b{font-variant-numeric:tabular-nums;color:#fff6dd}
.gbar-t{position:relative;height:26px;border-radius:99px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4),inset 0 6px 10px -4px rgba(0,0,0,.45)}
.gbar-f{position:absolute;left:3px;top:3px;bottom:3px;width:max(20px,calc((100% - 6px)*var(--p,0)));border-radius:99px;background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:300% 100%;animation:gbSweep 2.6s linear infinite;box-shadow:0 0 22px 2px color-mix(in srgb,var(--b) 70%,transparent),inset 0 0 0 1px rgba(255,255,255,.5)}
.gbar-f::before{content:"";position:absolute;left:6px;right:6px;top:2px;height:36%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0))}
.gbar-f::after{content:"";position:absolute;right:-6px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),color-mix(in srgb,var(--b) 60%,transparent) 45%,transparent 70%);filter:blur(1px)}
@keyframes gbSweep{to{background-position:-300% 0}}
.gbub{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.gbub>div{display:grid;justify-items:center;gap:10px;text-align:center}
.gbub .b{position:relative;width:clamp(96px,12vw,140px);aspect-ratio:1;border-radius:50%}
.gbub .b.fill{background:radial-gradient(circle at 35% 25%,#ffd08a,#ff8a4a 55%,#d9501c);box-shadow:0 18px 28px -12px rgba(0,0,0,.7),inset 0 -10px 18px rgba(120,30,0,.4)}
.gbub .b.clear{background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.55),rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 62%),radial-gradient(circle,rgba(255,255,255,.02) 55%,rgba(255,255,255,.22) 100%);-webkit-backdrop-filter:blur(2px) saturate(2.1) brightness(1.15);backdrop-filter:blur(2px) saturate(2.1) brightness(1.15);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),inset 0 0 28px 4px rgba(255,255,255,.28),0 18px 28px -12px rgba(0,0,0,.55)}
.gbub .b.clear::after{content:"";position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,transparent 62%,rgba(255,255,255,.18) 80%,transparent 100%);pointer-events:none}
.gbub small{display:block;font:700 12px/1.3 "BBB Sans",Arial,sans-serif;color:#fff;background:rgba(8,6,14,.7);padding:6px 9px;border-radius:10px}
.gbub small span{display:block;font-weight:500;opacity:.85;font-size:11px;margin-top:2px}
@media(max-width:860px){.gel-demos{grid-template-columns:1fr}}

/* ===== 4. Film header: cinematic bloom entrance ===== */
.film-label{position:relative}
.film-label .eyebrow{opacity:var(--ew,1);filter:blur(calc((1 - var(--ew,1))*8px));letter-spacing:calc(.14em + (1 - var(--ew,1))*.5em);transition:none;text-shadow:0 0 calc(var(--eg,0)*26px) rgba(255,226,154,calc(var(--eg,0)*.9))}
.film-h .fw{display:inline-block;opacity:var(--wp,1);filter:blur(calc((1 - var(--wp,1))*16px));transform:translateY(calc((1 - var(--wp,1))*34px)) scale(calc(1 + (1 - var(--wp,1))*.22));text-shadow:0 0 calc(var(--wg,0)*46px) rgba(255,226,154,calc(var(--wg,0)*.95)),0 0 calc(var(--wg,0)*100px) rgba(255,190,90,calc(var(--wg,0)*.6));will-change:opacity,filter,transform}
.film-h em .fw{background:linear-gradient(100deg,#ffe29a 20%,#fff6dd 45%,#ffd070 60%,#ffe29a 80%);background-size:250% 100%;background-position:calc(100% - var(--sh,0)*100%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.film-label::after{content:"";display:block;height:2px;width:min(520px,70vw);margin:16px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,#ffe29a,transparent);box-shadow:0 0 22px 4px rgba(255,214,120,.7);transform:scaleX(var(--lw,1));opacity:var(--lo,1)}

/* ===== 5. Colour is borrowed, live ===== */
.bor{margin-top:clamp(20px,3vw,36px);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center}
.bor-st{position:relative;aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#0a0810;box-shadow:0 30px 60px -28px #000,0 0 0 1px rgba(227,194,122,.28)}
.bor-st img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.bor-st img.on{opacity:1}
.bor-pane{position:absolute;left:7%;bottom:9%;width:min(58%,360px);padding:clamp(14px,2vw,22px);border-radius:24px;color:#fff;font-family:"BBB Sans",Arial,Helvetica,sans-serif;background:linear-gradient(150deg,rgba(var(--t,255,200,120),.62),rgba(var(--t,255,200,120),.2));-webkit-backdrop-filter:blur(12px) saturate(1.7);backdrop-filter:blur(12px) saturate(1.7);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 12px 20px -10px rgba(255,255,255,.5),0 0 40px -6px rgba(var(--t,255,200,120),.8),0 20px 34px -18px #000;transition:background .9s,box-shadow .9s}
.bor-pane small{display:block;font-size:10px;letter-spacing:.16em;opacity:.9}
.bor-pane b{display:block;font-size:clamp(18px,2.4vw,28px);letter-spacing:-.03em;margin:5px 0 8px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.bor-pane span{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;background:rgba(8,6,14,.55);padding:6px 10px;border-radius:99px}
.bor-pane span i{width:14px;height:14px;border-radius:50%;background:rgb(var(--t,255,200,120));box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.bor-cp h4{margin:0 0 8px;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.03em;color:#fff6dd}
.bor-cp p{margin:0 0 14px;color:#cfc6ae;font-size:14.5px;line-height:1.55}
.bor-btn{display:flex;flex-wrap:wrap;gap:8px}
.bor-btn button{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:99px;border:0;cursor:pointer;color:#efe8d6;background:rgba(255,255,255,.08);font:700 12.5px/1 "BBB Sans",Arial,sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bor-btn button[aria-pressed=true]{background:rgba(255,226,154,.18);box-shadow:inset 0 0 0 1.5px #e3c27a;color:#fff6dd}
.bor-btn img{width:28px;height:28px;border-radius:50%;object-fit:cover}
@media(max-width:820px){.bor{grid-template-columns:1fr}}

/* ===== 6. Character sheet: paper fan, then swipe through ===== */
.stk{position:relative;height:520vh;margin-top:clamp(30px,5vw,70px)}
.stk-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3vw,48px);align-items:center}
.stk-copy b.h{display:block;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.03em;line-height:1.05;margin:8px 0 12px;color:#fff6dd}
.stk-copy b.h em{font-style:italic;color:#ffe29a}
.stk-copy p{color:#cfc6ae;font-size:15px;line-height:1.55;margin:0 0 14px;max-width:460px}
.stk-copy ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.stk-copy li{font:700 12px/1 "BBB Sans",Arial,sans-serif;padding:9px 13px;border-radius:99px;color:#ffe29a;background:rgba(255,226,154,.1);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.stk-count{font:700 13px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;color:#a9a08a}
.stk-count b{color:#ffe29a;font-size:22px;letter-spacing:0}
.stk-count span{margin-left:10px;color:#fff6dd}
.stk-stage{position:relative;height:min(74vh,640px);--cw:min(270px,60vw)}
.stk-c{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:3/4.15;margin:calc(var(--cw)*-.52) 0 0 calc(var(--cw)*-.5);border-radius:18px;background:linear-gradient(160deg,#f6efde,#e6dcc2);box-shadow:0 22px 40px -16px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.7);transform-origin:50% 120%;will-change:transform,opacity;padding:7% 6% 0;display:flex;flex-direction:column;align-items:center}
.stk-c img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 8px rgba(60,40,10,.35));pointer-events:none}
.stk-c span{margin-top:auto;padding-bottom:7%;font:800 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#6c5a33;text-transform:uppercase}
.stk-c::after{content:"";position:absolute;right:0;top:0;width:16%;aspect-ratio:1;border-radius:0 18px 0 100%;background:linear-gradient(225deg,rgba(0,0,0,.05) 50%,rgba(255,255,255,.55) 51%)}
.stk.static{height:auto}.stk.static .stk-pin{position:static;height:auto;padding:30px 0}.stk.static .stk-stage{height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stk.static .stk-c{position:static;margin:0;width:auto;transform:none!important;opacity:1!important}
@media(max-width:820px){.stk-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:start;padding-top:70px;gap:6px}.stk-copy p,.stk-copy ul{display:none}.stk-stage{height:min(56vh,480px)}.stk.static .stk-stage{grid-template-columns:repeat(2,1fr)}}

/* ===== 7. Coming soon: calm list, no boxes ===== */
.soonsec{max-width:900px}
.soon-lines{list-style:none;margin:6px 0 34px;padding:0;border-top:1px solid rgba(227,194,122,.22)}
.soon-lines li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:10px 30px;align-items:baseline;padding:22px 2px;border-bottom:1px solid rgba(227,194,122,.22)}
.soon-lines b{font-size:clamp(19px,2.2vw,26px);letter-spacing:-.02em;color:#fff6dd;font-weight:600}
.soon-lines span{color:#cfc3a6;font-size:15px;line-height:1.55}
@media(max-width:700px){.soon-lines li{grid-template-columns:1fr;padding:18px 2px}}
.soonsec .soon-notify{background:none;box-shadow:none;padding:0;max-width:520px}
.soonsec .soon-notify>b{font-size:16px;margin-bottom:10px;color:#ffe29a}
@media(prefers-reduced-motion:reduce){.gel-logo-ink,.gbar-f,.gd-bg{animation:none}}

/* film header: bigger, more cinematic */
.film-h{font-size:clamp(23px,3.2vw,48px);line-height:1.06;max-width:min(980px,92vw)}
@media(max-width:700px){.film-h{font-size:23px}}

.stk-copy{position:relative;z-index:30}
.stk-stage{z-index:1}

/* stickers: no paper card, just the die-cut sticker */
.stk-c{background:none;box-shadow:none;padding:0;aspect-ratio:3/4;border-radius:0;margin:calc(var(--cw)*-.6) 0 0 calc(var(--cw)*-.5);transform-origin:50% 100%}
.stk-c::after{display:none}
.stk-c img{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 14px 18px rgba(0,0,0,.65))}
.stk-c span{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);padding:5px 11px;border-radius:99px;background:rgba(8,6,14,.7);color:#ffe29a;white-space:nowrap;font-size:10px}
.stk-c span{display:none}

/* ===== Real gel lens demo ===== */
.gd-lens{background:#0d0b14}
.gl-tabs{display:flex;gap:8px;margin:0 0 12px;position:relative;z-index:3}
.gl-tabs button{padding:8px 14px;border-radius:99px;border:0;cursor:pointer;font:700 12px/1 "BBB Sans",Arial,sans-serif;color:#efe8d6;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.gl-tabs button[aria-pressed=true]{background:rgba(255,226,154,.2);box-shadow:inset 0 0 0 1.5px #e3c27a;color:#fff6dd}
.gl-st{position:relative;height:clamp(250px,26vw,320px);border-radius:20px;overflow:hidden;touch-action:none;cursor:grab;background:linear-gradient(160deg,#2a1357,#5b2a8e 55%,#7a3a8a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.gl-w{position:absolute;left:0;top:0;width:100%;height:100%;display:grid;grid-template-rows:auto 1.2fr 1fr 1fr;gap:10px;padding:14px;box-sizing:border-box;color:#fff;font-family:"BBB Sans",Arial,Helvetica,sans-serif;background:linear-gradient(160deg,#2a1357,#5b2a8e 55%,#7a3a8a)}
.glw-top{display:flex;justify-content:space-between;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;opacity:.85}
.glw-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.glw-card{border-radius:16px;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.glw-card small{font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;opacity:.8}
.glw-card h5{margin:3px 0 0;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.03em;line-height:1.02;font-weight:800}
.glw-card p{margin:3px 0 0;font-size:11.5px;opacity:.85}
.glw-card.c1{background:linear-gradient(135deg,#ff7a3d,#d9456b)}
.glw-card.c2{background:linear-gradient(135deg,#2fbfff,#4d6bff)}
.glw-card.c3{background:linear-gradient(135deg,#ffd36a,#ff8a3d)}
.glw-card.c4{background:linear-gradient(135deg,#8b4dff,#d34dd9)}
.gl-lens{position:absolute;left:0;top:0;width:var(--L,150px);height:var(--L,150px);margin:0;will-change:transform;pointer-events:none}
.gl-body,.gl-ring,.gl-logo{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.gl-body>.gl-w,.gl-ring>.gl-w,.gl-logoin>.gl-w{position:absolute;left:0;top:0;transform-origin:0 0;width:auto;height:auto}
.gl-ring{-webkit-mask:radial-gradient(circle,transparent 56%,#000 76%);mask:radial-gradient(circle,transparent 56%,#000 76%);filter:saturate(1.3) brightness(.95)}
.gl-body{filter:saturate(1.2) contrast(1.05)}
.gl-logo{-webkit-mask:url(assets/bespoke-o.png) center/56% no-repeat;mask:url(assets/bespoke-o.png) center/56% no-repeat;border-radius:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.gl-logoin{position:absolute;inset:0;filter:blur(7px) saturate(2.6) brightness(1.25);transform:scale(1.02)}
.gl-lens::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),inset 0 14px 22px -6px rgba(255,255,255,.4),inset 0 -16px 26px -8px rgba(0,0,0,.32),0 20px 26px -12px rgba(0,0,0,.55);background:radial-gradient(circle at 50% 50%,transparent 62%,rgba(255,255,255,.2) 100%)}
.gl-spec{position:absolute;left:17%;top:7%;width:44%;height:22%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-18deg);opacity:.85}
.gl-st[data-m=fill] .gl-body,.gl-st[data-m=fill] .gl-ring{display:none}
.gl-st[data-m=fill] .gl-lens{background:radial-gradient(circle at 35% 25%,#ffd08a,#ff8a4a 50%,#c8461c);border-radius:50%}
.gl-st[data-m=fill] .gl-logoin{filter:none;background:#fff}
.gl-st[data-m=fill] .gl-logoin>.gl-w{display:none}
.gl-st[data-m=fill] .gl-spec{opacity:.35}

/* ===== Gel hero bubble: a real lens (magnifies the picture, logo filled from what is under it) ===== */
.gel-ink{background:none!important;overflow:visible;position:relative}
.gel-ink::after{display:none!important}
.gel-ink .gel-logo-ink{display:none}
.gl2{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;background-repeat:no-repeat}
.gl2-body{filter:saturate(1.25) contrast(1.05)}
.gl2-ring{-webkit-mask:radial-gradient(circle,transparent 56%,#000 78%);mask:radial-gradient(circle,transparent 56%,#000 78%);filter:saturate(1.3) brightness(.95)}
.gl2-logo{border-radius:0;-webkit-mask:url(assets/bespoke-o.png) center/58% no-repeat;mask:url(assets/bespoke-o.png) center/58% no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4))}
.gl2-in{position:absolute;inset:0;background-repeat:no-repeat;filter:blur(8px) saturate(2.6) brightness(1.25)}
.gel-ink[data-adapt="0"] .gl2-in{background:linear-gradient(180deg,#f6dc9a,#e3b04a 55%,#a47f34)!important;filter:none}
.gel-ink::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),inset 0 14px 22px -6px rgba(255,255,255,.4),inset 0 -16px 26px -8px rgba(0,0,0,.32),0 20px 26px -12px rgba(0,0,0,.55);background:radial-gradient(circle,transparent 62%,rgba(255,255,255,.2) 100%)}
.gl2-spec{position:absolute;left:17%;top:7%;width:44%;height:22%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform:rotate(-18deg);opacity:.85;z-index:3;pointer-events:none}
.gl2-body{filter:saturate(1.25) brightness(.8) contrast(1.05)}
.gl2-in{filter:blur(5px) saturate(3) brightness(1.6) contrast(1.1)}
.gl2-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.55))}

/* v43 hero copy */
.hero-copy>p em.hk{font-style:normal;font-family:"BBB Sans",Arial,Helvetica,sans-serif!important;color:#e3c27a!important;font-weight:700!important}

/* ===== v43 · layer explorer ===== */
.s-glass{--rim:255,214,130}
.gl-pick{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;pointer-events:auto;max-width:640px}
.s-glass[data-pk="1"] .gl-pick.pk-wx,.s-glass[data-pk="4"] .gl-pick.pk-rim{display:flex}
.gl-pick .pk-l{flex:0 0 100%;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e3c27a}
.gl-pick button{font:600 12.5px/1 "BBB Sans",Arial,sans-serif;padding:9px 14px;border-radius:99px;border:1px solid rgba(255,226,160,.32);background:rgba(24,17,7,.62);color:#f4e7c4;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .25s,color .25s,box-shadow .25s,transform .2s}
.gl-pick button:hover{transform:translateY(-1px)}
.gl-pick button[aria-pressed=true]{background:linear-gradient(180deg,#ffeeb8,#e3b04a);color:#1a1204;border-color:transparent;box-shadow:0 0 18px rgba(255,214,130,.45)}
.gl-pick button.sw{width:28px;height:28px;padding:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff,rgb(var(--c)) 46%,rgba(var(--c),.6));border:2px solid rgba(255,255,255,.25)}
.gl-pick button.sw[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(var(--c),.6),0 0 16px rgba(var(--c),.9);color:transparent}
.gl-pick label.sw{position:relative;width:28px;height:28px;border-radius:50%;background:conic-gradient(#f66,#fd6,#6f9,#6cf,#c6f,#f66);border:2px solid rgba(255,255,255,.25);cursor:pointer;overflow:hidden}
.gl-pick label.sw input{position:absolute;inset:-6px;opacity:0;cursor:pointer}
.gl-pick .pk-n{flex:0 0 100%;font:400 13px/1.45 "BBB Sans",Arial,sans-serif;color:#d8cfb6}
/* 02 atmosphere */
.s-glass .lyr.l2 .pane{overflow:hidden}
.s-glass:not([data-wx=rain]):not([data-wx=storm]) .lyr.l2 canvas.rain{opacity:0;transition:opacity .4s}
.s-glass .lyr.l2 .pane::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.s-glass[data-wx=fog] .lyr.l2 .pane{background:linear-gradient(180deg,rgba(238,242,250,.34),rgba(238,242,250,.14))}
.s-glass[data-wx=fog] .lyr.l2 .pane::after{opacity:1;background:radial-gradient(60% 50% at 25% 40%,rgba(255,255,255,.5),transparent 70%),radial-gradient(55% 45% at 75% 65%,rgba(255,255,255,.42),transparent 70%);filter:blur(10px);animation:wxFog 9s ease-in-out infinite alternate}
@keyframes wxFog{to{transform:translateX(9%) scale(1.08)}}
.s-glass[data-wx=snow] .lyr.l2 .pane{background:linear-gradient(180deg,rgba(210,226,255,.16),rgba(210,226,255,.05))}
.s-glass[data-wx=snow] .lyr.l2 .pane::after{opacity:1;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1.8px,transparent 2.6px),radial-gradient(circle,rgba(255,255,255,.7) 0 1.3px,transparent 2.2px);background-size:38px 38px,57px 57px;background-position:0 0,19px 11px;animation:wxSnow 6s linear infinite}
@keyframes wxSnow{to{background-position:-10px 38px,12px 68px}}
.s-glass[data-wx=sun] .lyr.l2 .pane{background:linear-gradient(160deg,rgba(255,214,130,.30),rgba(255,214,130,.06))}
.s-glass[data-wx=sun] .lyr.l2 .pane::after{opacity:1;background:repeating-linear-gradient(112deg,transparent 0 11%,rgba(255,236,170,.30) 15%,transparent 21%);animation:wxSun 7s ease-in-out infinite alternate}
@keyframes wxSun{to{transform:translateX(8%);opacity:.65}}
.s-glass[data-wx=storm] .lyr.l2 .pane{background:linear-gradient(180deg,rgba(70,86,140,.34),rgba(40,50,90,.12))}
/* 03 blur: a frosted plate with a sharp strip sweeping behind it */
.s-glass .lyr.l3 .pane::before,.s-glass .lyr.l3 .pane::after{display:none!important;animation:none!important}
.lyr.l3 .bl-a,.lyr.l3 .bl-b{position:absolute;inset:0;background:url(assets/glass-sky.webp) center/cover}
.lyr.l3 .bl-a{filter:blur(9px) saturate(1.2);transform:scale(1.1)}
.lyr.l3 .bl-f{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,246,226,.30),rgba(255,246,226,.10) 60%,rgba(255,246,226,.2));box-shadow:inset 0 0 40px rgba(255,246,226,.18)}
.lyr.l3 .bl-b{animation:blWipe 6s ease-in-out infinite}
@keyframes blWipe{0%{clip-path:inset(0 100% 0 0)}15%{clip-path:inset(0 62% 0 0)}85%{clip-path:inset(0 0 0 62%)}100%{clip-path:inset(0 0 0 100%)}}
.lyr.l3 .bl-t{position:absolute;font:700 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(10,7,3,.6);color:#ffe9b3;white-space:nowrap}
.lyr.l3 .bl-t1{right:4%;bottom:6%}
.lyr.l3 .bl-t2{top:6%;left:2%;animation:blTag 6s ease-in-out infinite;background:rgba(255,246,226,.9);color:#1a1204}
@keyframes blTag{0%{left:2%;opacity:0}15%{left:2%;opacity:1}85%{left:62%;opacity:1}100%{left:64%;opacity:0}}
.s-glass .stack.asm .lyr.l3 :is(.bl-a,.bl-b,.bl-f,.bl-t){display:none}
/* 04 gel: a thick body, not a rim */
.s-glass .stack:not(.asm) .lyr.l4 .pane{background:radial-gradient(circle at 78% 72%,rgba(255,255,255,.4) 0 2.4%,transparent 5%),radial-gradient(circle at 24% 66%,rgba(255,255,255,.28) 0 1.8%,transparent 4%),linear-gradient(160deg,rgba(255,214,130,.40),rgba(220,150,50,.24) 55%,rgba(150,90,20,.34))!important;box-shadow:inset 0 16px 24px -10px rgba(255,255,255,.4),inset 0 -22px 30px -8px rgba(120,60,0,.55),inset 0 0 0 1px rgba(255,226,160,.5),0 20px 34px -14px rgba(0,0,0,.65),0 0 34px rgba(227,174,70,.3)!important}
.s-glass .stack:not(.asm) .lyr.l4 .pane::before{content:"";position:absolute;left:7%;right:34%;top:5%;height:20%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));filter:blur(2px);animation:none}
/* 05 edge & light takes a brand colour */
.s-glass .layer-stage .stack .lyr.l5 .pane,.s-glass .layer-stage.hl .stack .lyr.l5.on .pane{background:linear-gradient(160deg,rgba(var(--rim),.12),rgba(var(--rim),.02))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),inset 0 0 0 1.5px rgba(var(--rim),.9),inset 0 0 30px 4px rgba(var(--rim),.38),0 0 40px -4px rgba(var(--rim),.75)!important;outline-color:rgba(var(--rim),.6)}
.s-glass .lyr.l5::before{background:radial-gradient(60% 56% at 50% 50%,rgba(var(--rim),.5),rgba(var(--rim),.16) 55%,transparent 75%)!important}
.s-glass .l5 .pane::before{background:radial-gradient(78% 50% at 50% -10%,rgba(var(--rim),.5),transparent 60%),radial-gradient(55% 40% at 88% 112%,rgba(var(--rim),.38),transparent 55%)!important}
.s-glass .l5 .pane::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent)!important}
/* 06 + 07: controls in their own band, content below, the slab keeps one gel button */
.s-glass .lyr.l6 .pane{align-items:flex-start!important;justify-content:center!important;padding:6% 6% 0!important;gap:6%}
.s-glass .lyr.l6 .gc-tag{top:auto;bottom:5%}
.s-glass .lyr.l7 .pane{padding-top:clamp(84px,17%,108px)!important;transition:padding .5s}
.s-glass .stack.asm .lyr.l7 .pane{padding-top:clamp(18px,3.4vw,34px)!important}
.s-glass .lyr.l6 .pane>*{transition:opacity .45s,transform .45s}
.s-glass .stack.asm .lyr.l6 .pane>*{opacity:0;transform:scale(.94);pointer-events:none}
.s-glass .lyr.l7 .glass-pill{position:relative;border-radius:99px;padding:.95em 1.9em!important;font-weight:800;color:#2a1a02!important;text-shadow:0 1px 0 rgba(255,255,255,.55);background:radial-gradient(120% 150% at 30% 6%,#fffdf0 0,#ffe9a8 24%,#eab94a 58%,#b57a1a 100%)!important;box-shadow:inset 0 3px 1px rgba(255,255,255,.9),inset 0 -9px 14px rgba(140,76,0,.45),inset 0 0 0 1px rgba(255,236,170,.6),0 0 0 .32em rgba(255,214,130,.14),0 0 1.8em rgba(255,200,90,.5),0 10px 18px -6px rgba(0,0,0,.65)!important}
.s-glass .lyr.l7 .glass-pill::before{content:"";position:absolute;left:12%;right:12%;top:7%;height:36%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.anim .s-glass .layer-stage.free .stack{transition:translate .6s cubic-bezier(.2,.7,.2,1),scale .6s cubic-bezier(.2,.7,.2,1)}
.s-glass[data-pk="5"] .layer-stage.free .stack,.s-glass[data-pk="6"] .layer-stage.free .stack{translate:0 6svh;scale:.9}
/* ===== v43 · example cards: Bespoke Glass should look at least as good as Liquid ===== */
.gx .ex-card[data-m=glass] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(calc(3px + var(--fr)*20px)) saturate(185%) brightness(1.08)!important;backdrop-filter:blur(calc(3px + var(--fr)*20px)) saturate(185%) brightness(1.08)!important;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.36),rgba(255,255,255,0) 52%),radial-gradient(90% 120% at 100% 100%,rgba(var(--b),.42),rgba(var(--b),0) 62%),linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(var(--b),.14))!important;border:1px solid rgba(255,248,226,.55)!important;box-shadow:inset 0 2px 1px rgba(255,255,255,.85),inset 0 -2px 2px rgba(var(--b),.55),inset 0 0 28px rgba(var(--b),.28),0 0 0 1px rgba(var(--b),.22),0 16px 34px -14px rgba(0,0,0,.6),0 0 36px -10px rgba(var(--b),.85)!important}
.gx .ex-card[data-m=glass] .m-btn{background:radial-gradient(120% 150% at 30% 6%,#fff 0,rgba(255,255,255,.92) 14%,rgba(var(--b),.96) 54%,rgba(var(--b),.72) 100%)!important;color:#1a1308;box-shadow:inset 0 2px 1px #fff,inset 0 -5px 8px rgba(0,0,0,.28),0 0 0 .2em rgba(var(--b),.2),0 0 1.1em rgba(var(--b),.6),0 6px 12px -4px rgba(0,0,0,.5)!important}
.gx .ex-card[data-m=glass] .m-hero{text-shadow:0 2px 22px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.3)}
/* ===== v43 · frosted entrance for section headings ===== */
.fr-h{position:relative}
.fr-h.fr .fw{display:inline-block;opacity:0;filter:blur(18px);transform:translateY(.4em) scale(1.05);transition:opacity .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*65ms + 250ms),filter 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--i)*65ms + 250ms),transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i)*65ms + 250ms)}
.fr-h.fr :is(.eyebrow,h2,h3,p,.fr-whole){opacity:0;filter:blur(14px);transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter 1.1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}

.fr-h.fr>:is(h2,h3,p,.eyebrow,div){transition-delay:.15s}
.fr-h.fr>p{transition-delay:.7s}
.fr-h.fr.in :is(.eyebrow,h2,h3,p,.fr-whole){opacity:1;filter:blur(0);transform:none}
.fr-h.fr.in .fw{opacity:1;filter:blur(0);transform:none}
.fr-sheet{position:absolute;inset:-22px -3%;border-radius:28px;pointer-events:none;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);background:linear-gradient(160deg,rgba(255,244,220,.20),rgba(255,244,220,.06));border:1px solid rgba(255,226,160,.34);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),0 0 40px -10px rgba(227,174,70,.5);clip-path:inset(0 0 0 0);opacity:1;transition:clip-path 1.5s cubic-bezier(.65,0,.25,1) .25s,opacity .5s 1.6s}
.fr-h.in .fr-sheet{clip-path:inset(0 0 0 100%);opacity:0}
@media(prefers-reduced-motion:reduce){.fr-sheet{display:none}}

/* ===== v43 · Clear option + builder frost bar ===== */
.ex-card[data-m=clear] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(calc(1px + var(--fr)*14px)) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(calc(1px + var(--fr)*14px)) saturate(190%) brightness(1.12)!important;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.12))!important;border:0!important;box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.95),inset -1px -1px 1px -.5px rgba(255,255,255,.5),inset 0 0 24px rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.14),0 0 30px -12px rgba(var(--b),.55),0 12px 28px -12px rgba(0,0,0,.5)!important;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.ex-card[data-m=clear] .m-btn{background:radial-gradient(120% 150% at 30% 6%,#fff 0,rgba(255,255,255,.92) 14%,rgba(var(--b),.96) 54%,rgba(var(--b),.72) 100%)!important;color:#1a1308;box-shadow:inset 0 2px 1px #fff,inset 0 -5px 8px rgba(0,0,0,.28),0 0 1.1em rgba(var(--b),.5),0 6px 12px -4px rgba(0,0,0,.5)!important}
.ex-card[data-m=clear] .sy-clear{display:inline}
.ex-say .sy-clear{display:none}
.ex-card .ex-tog{flex-wrap:wrap;max-width:100%}
.bd{--bfr:.20}
.bd[data-m=glass] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(calc(2px + var(--bfr)*22px)) saturate(185%) brightness(1.06)!important;backdrop-filter:blur(calc(2px + var(--bfr)*22px)) saturate(185%) brightness(1.06)!important;background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,.34),rgba(255,255,255,0) 52%),radial-gradient(90% 120% at 100% 100%,rgba(var(--b),.42),rgba(var(--b),0) 62%),linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 50%,rgba(var(--b),.14))!important;border:1px solid rgba(255,248,226,.5)!important;box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -2px 2px rgba(var(--b),.55),inset 0 0 28px rgba(var(--b),.26),0 16px 34px -14px rgba(0,0,0,.6),0 0 36px -10px rgba(var(--b),.8)!important}
.bd[data-m=clear] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(calc(1px + var(--bfr)*22px)) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(calc(1px + var(--bfr)*22px)) saturate(190%) brightness(1.12)!important;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(255,255,255,.12))!important;border:0!important;box-shadow:inset 1.5px 1.5px 1px -.5px rgba(255,255,255,.95),inset -1px -1px 1px -.5px rgba(255,255,255,.5),inset 0 0 24px rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.14),0 0 30px -12px rgba(var(--b),.55),0 12px 28px -12px rgba(0,0,0,.5)!important;text-shadow:0 1px 6px rgba(0,0,0,.3)}
.bd[data-m=liquid] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(calc(1px + var(--bfr)*12px)) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(calc(1px + var(--bfr)*12px)) saturate(190%) brightness(1.12)!important}
.bd-fr{display:flex;align-items:center;gap:12px;margin-top:2px}
.bd-fr input{flex:1;accent-color:#e3b04a;min-width:0}
.bd-fr output{font:700 12px "BBB Sans",Arial,sans-serif;color:#e3c27a;min-width:38px;text-align:right}
.bd-sub{margin-top:14px}

/* ===== v43 · FREE is green, and glows ===== */
.bento .product[data-category=free] .product-meta strong{background:linear-gradient(110deg,#17a455,#6af0a4 50%,#25bd68)!important;color:#03160a!important;-webkit-text-fill-color:#03160a!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 0 0 3px rgba(70,230,140,.2),0 0 24px rgba(70,230,140,.7),0 8px 18px -6px rgba(0,0,0,.6)!important;animation:freeGlow 3.2s ease-in-out infinite}
@keyframes freeGlow{50%{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 0 0 5px rgba(70,230,140,.12),0 0 34px rgba(70,230,140,.95),0 8px 18px -6px rgba(0,0,0,.6)}}
.bento .product[data-category=free]{box-shadow:0 0 0 1px rgba(90,235,150,.38),0 0 54px -10px rgba(60,220,130,.5),inset 0 0 60px -30px rgba(60,220,130,.28)!important}
@media(prefers-reduced-motion:reduce){.bento .product[data-category=free] .product-meta strong{animation:none}}

/* ===== v44 · tiers, press header, gel words, liquid, now-playing, sun contrast, live claim cards ===== */
/* gold/white text readable on bright skies */
[data-mode=sun] #wxlHead,[data-mode=fog] #wxlHead,[data-mode=snow] #wxlHead{text-shadow:0 2px 16px rgba(10,20,40,.6),0 1px 2px rgba(10,20,40,.5)}
[data-mode=sun] #wxlHead em,[data-mode=fog] #wxlHead em,[data-mode=snow] #wxlHead em{background-image:linear-gradient(180deg,#ffe9a8,#e7a82a 55%,#a86a08)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 2px 3px rgba(40,22,0,.75)) drop-shadow(0 0 1px rgba(40,22,0,.9))}
[data-mode=sun] #wxlSub,[data-mode=fog] #wxlSub,[data-mode=snow] #wxlSub,[data-mode=sun] #wxlTag{text-shadow:0 1px 10px rgba(10,20,40,.65),0 1px 2px rgba(10,20,40,.5)}
/* glass looks you can tell apart */
[data-look=bespoke] #wxlCard{background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.04))!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5),0 18px 34px -16px rgba(0,0,0,.6)!important}
[data-look=deep] #wxlCard{background:linear-gradient(160deg,rgba(120,80,225,.5),rgba(22,8,58,.62))!important;box-shadow:inset 0 0 0 2px rgba(243,217,150,.72),inset 0 20px 30px rgba(180,150,255,.3),inset 0 -26px 40px rgba(8,0,36,.6),0 0 44px rgba(140,100,255,.45),0 26px 40px -16px #000!important}
[data-look=atmos] #wxlCard{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(200,225,255,.12))!important;box-shadow:inset 0 0 0 1px rgba(220,238,255,.5),inset 0 -30px 40px -10px rgba(210,230,255,.25)!important}
.lk-info{margin:-4px 0 14px;padding:14px 16px;border-radius:16px;border:1px solid rgba(227,194,122,.22);background:rgba(255,255,255,.035);font:14px/1.5 "BBB Sans",Arial,sans-serif;color:#d9d1ba}
.lk-info b{display:block;color:#fff3cf;font-size:15px;margin-bottom:3px}
.lk-info em{display:block;margin-top:6px;font-style:normal;color:#e3c27a;font-size:13px}
.lk-info .lk-go{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:99px;border:1px solid rgba(227,194,122,.5);background:rgba(227,194,122,.12);color:#ffe9b0;font:700 12px Arial;cursor:pointer}
/* tiers */
.tiers{margin:90px 0 30px}.tiers-head{max-width:780px;margin:0 auto 34px;text-align:center}.tiers-head p{color:#cfc6af;line-height:1.6}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(227,194,122,.18)}
.tier-demo{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate}
.tier-demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.td-pane{position:absolute;left:12%;right:12%;top:20%;bottom:20%;border-radius:20px;display:grid;place-items:center;overflow:hidden;color:#fff;font:800 20px "BBB Sans",Arial,sans-serif;letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.td-pane b{position:relative;z-index:2}
.td-pane::before,.td-pane::after{content:"";position:absolute;inset:0;pointer-events:none}
.t-b .td-pane{background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),0 16px 26px -12px rgba(0,0,0,.6)}
.t-b .td-pane::after{background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%);background-size:260% 100%;animation:tdSweep 5s ease-in-out infinite}
@keyframes tdSweep{0%{background-position:130% 0}100%{background-position:-30% 0}}
.t-d .td-pane{background:linear-gradient(160deg,rgba(120,80,225,.5),rgba(22,8,58,.62));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 2px rgba(243,217,150,.75),inset 0 18px 28px rgba(180,150,255,.32),inset 0 -24px 36px rgba(8,0,36,.6),0 0 40px rgba(140,100,255,.5),0 22px 34px -14px #000}
.t-d .td-pane::before{background:radial-gradient(50% 70% at 20% 20%,rgba(190,160,255,.6),transparent 70%),radial-gradient(45% 60% at 85% 90%,rgba(243,217,150,.45),transparent 70%);animation:tdDrift 7s ease-in-out infinite alternate}
@keyframes tdDrift{to{transform:translate(8%,-6%) scale(1.15)}}
.t-a .td-pane{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(200,225,255,.14));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 0 0 1px rgba(220,238,255,.55),inset 0 -28px 36px -10px rgba(210,230,255,.3)}
.t-a .td-pane::before{background:repeating-linear-gradient(104deg,transparent 0 9px,rgba(220,235,255,.5) 9px 10px,transparent 10px 22px);background-size:60px 90px;opacity:.55;animation:tdRain .7s linear infinite}
@keyframes tdRain{to{background-position:-18px 90px}}
.t-a .td-pane::after{background:radial-gradient(circle at 18% 30%,rgba(255,255,255,.75) 0 3px,transparent 4px),radial-gradient(circle at 70% 22%,rgba(255,255,255,.7) 0 4px,transparent 5px),radial-gradient(circle at 44% 62%,rgba(255,255,255,.65) 0 3px,transparent 4px),radial-gradient(circle at 84% 70%,rgba(255,255,255,.7) 0 4px,transparent 5px),linear-gradient(0deg,rgba(220,235,255,.3),transparent 45%);animation:tdDrop 5s ease-in infinite}
@keyframes tdDrop{0%{transform:translateY(-6%)}100%{transform:translateY(12%)}}
.tier-body{padding:20px 22px 24px}.tier-k{font:700 10.5px/1 Arial;letter-spacing:.2em;color:#e3c27a}
.tier-body h4{margin:8px 0 8px;font-size:22px;letter-spacing:-.025em;color:#fff6dd}.tier-body p{font-size:14.5px;line-height:1.55;color:#d9d1ba;margin:0 0 12px}
.tier-body dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font:13.5px/1.45 Arial}.tier-body dt{color:#e3c27a;font-weight:700}.tier-body dd{margin:0;color:#e6dfcb}
.tier-cmp{margin:26px 0 0;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(227,194,122,.18)}
.tier-cmp>div{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:14px;padding:13px 20px;font:14px/1.4 Arial;color:#d9d1ba;border-top:1px solid rgba(227,194,122,.12)}
.tier-cmp>div:first-child{border-top:0}.tier-cmp>div>span:first-child{color:#e3c27a;font-weight:700}
.tc-h{background:rgba(227,194,122,.08);color:#fff3cf!important;font-weight:700}
.kit-note{margin:22px auto 0;max-width:780px;text-align:center;padding:16px 20px;border-radius:18px;border:1px solid rgba(227,194,122,.3);background:rgba(227,194,122,.07);color:#e6dfcb;font:15px/1.55 Arial}.kit-note b{color:#ffe9b0}
@media(max-width:900px){.tier-row{grid-template-columns:1fr}.tier-cmp>div{grid-template-columns:1fr 1fr;font-size:13px}.tc-h>span:nth-child(n+3),.tier-cmp>div:not(.tc-h)>span:nth-child(n+3){grid-column:auto}}
/* live claim cards */
.fv{position:relative;height:84px;border-radius:16px;overflow:hidden;margin-bottom:16px;background:url(assets/bg-night.webp) center/cover;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(227,194,122,.18)}
.fv::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:0}
.fv-l i{position:absolute;left:18%;right:18%;height:26px;border-radius:9px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fvL 5s cubic-bezier(.5,0,.2,1) infinite}
.fv-l i:nth-child(1){top:46px;animation-name:fvL1}.fv-l i:nth-child(2){top:46px;animation-name:fvL2}.fv-l i:nth-child(3){top:46px;animation-name:fvL3;display:grid;place-items:center;color:#fff;font:800 14px Arial;text-shadow:0 1px 6px #000;background:rgba(255,255,255,.2)}
@keyframes fvL1{0%,12%{top:46px}35%,70%{top:58px}90%,100%{top:46px}}@keyframes fvL2{0%,12%{top:46px}35%,70%{top:34px}90%,100%{top:46px}}@keyframes fvL3{0%,12%{top:46px}35%,70%{top:10px}90%,100%{top:46px}}
.fv-w b{position:absolute;inset:10px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden}
.fv-w i{position:absolute;inset:0;opacity:0;animation:fvW 9s infinite}
.fv-w .r{background:repeating-linear-gradient(104deg,transparent 0 7px,rgba(220,235,255,.65) 7px 8px,transparent 8px 17px);background-size:40px 70px;animation:fvW 9s infinite,fvRain .6s linear infinite}
.fv-w .s{background:radial-gradient(circle,#fff 0 1.6px,transparent 2.4px) 0 0/16px 16px,radial-gradient(circle,rgba(255,255,255,.8) 0 1.2px,transparent 2px) 8px 8px/16px 16px;animation:fvW 9s infinite 3s,fvSnow 3s linear infinite}
.fv-w .u{background:radial-gradient(60% 90% at 80% 0%,rgba(255,226,150,.85),transparent 70%);animation:fvW 9s infinite 6s}
@keyframes fvW{0%{opacity:0}6%,28%{opacity:1}36%,100%{opacity:0}}@keyframes fvRain{to{background-position:-12px 70px}}@keyframes fvSnow{to{background-position:0 16px,8px 24px}}
.fv-s span{position:absolute;left:16%;right:16%;top:20px;height:44px;border-radius:14px;display:grid;place-items:center;font:800 13px Arial;color:#fff;text-shadow:0 1px 6px #000;opacity:0;animation:fvS 9s infinite}
.fv-s span:nth-child(1){background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.fv-s span:nth-child(2){animation-delay:3s;background:linear-gradient(160deg,rgba(120,80,225,.65),rgba(22,8,58,.7));box-shadow:inset 0 0 0 2px rgba(243,217,150,.7),0 0 20px rgba(140,100,255,.5)}
.fv-s span:nth-child(3){animation-delay:6s;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(200,225,255,.2));box-shadow:inset 0 0 0 1px rgba(220,238,255,.6);overflow:hidden}
@keyframes fvS{0%{opacity:0;transform:scale(.94)}6%,28%{opacity:1;transform:none}36%,100%{opacity:0;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.fv *,.t-b .td-pane::after,.t-d .td-pane::before,.t-a .td-pane::before,.t-a .td-pane::after,.press-h *{animation:none!important}.fv-s span:nth-child(1),.fv-w .r{opacity:1}}
/* now playing in black */
.vd-txt small{color:#07070a!important;font-weight:800!important;text-shadow:0 0 8px rgba(255,255,255,.65),0 0 2px rgba(255,255,255,.7)!important;opacity:1!important}
.vd-txt b{color:#fff!important}
/* liquid: flat grey static backing, lighter blur */
.vd.liquid{opacity:1}
.vd.liquid .vd-pane{background:linear-gradient(180deg,rgba(210,212,218,.34),rgba(150,153,162,.3))!important;-webkit-backdrop-filter:blur(3px) saturate(.9)!important;backdrop-filter:blur(3px) saturate(.9)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.6),0 14px 24px -14px rgba(0,0,0,.55)!important;border-radius:26px}
.vd.liquid .vd-pane::before,.vd.liquid .vd-pane::after{display:none!important}
.vd.liquid .vd-pane video{opacity:.5;mix-blend-mode:normal;filter:grayscale(.35) contrast(.95)}
/* glass orb centred in the stage */
.vd.glassy .vd-pane{top:50%!important}
.vd.glassy .vd-pane video{object-position:50% 50%;transform:scale(1.04)}
.vd.glassy .vd-txt{bottom:13%!important}
/* press header */
.press-h{background:none!important}
.press-h .pr-a,.press-h .pr-b{display:inline-block;transform-origin:50% 100%;will-change:transform}
.press-h .pr-a{color:#e8ecf6;-webkit-text-fill-color:#e8ecf6;filter:drop-shadow(0 7px 0 #636a7c) drop-shadow(0 14px 14px rgba(0,0,0,.55));animation:prDown 5s cubic-bezier(.3,.7,.2,1) infinite}
.press-h .pr-b{animation:prBack 5s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes prDown{0%,50%{transform:none;filter:drop-shadow(0 7px 0 #636a7c) drop-shadow(0 14px 14px rgba(0,0,0,.55))}56%{transform:translateY(7px) scale(1.035,.86);filter:drop-shadow(0 1px 0 #636a7c) drop-shadow(0 3px 4px rgba(0,0,0,.6))}64%{transform:translateY(7px) scale(1.035,.86);filter:drop-shadow(0 1px 0 #636a7c) drop-shadow(0 3px 4px rgba(0,0,0,.6))}72%{transform:translateY(-4px) scale(.985,1.06)}80%{transform:translateY(1px) scale(1.005,.99)}88%,100%{transform:none;filter:drop-shadow(0 7px 0 #636a7c) drop-shadow(0 14px 14px rgba(0,0,0,.55))}}
@keyframes prBack{0%,56%{transform:none}62%{transform:translateY(6px) scale(1.03,.88)}72%{transform:translateY(-9px) scale(.98,1.07)}80%{transform:translateY(2px) scale(1.01,.98)}88%,100%{transform:none}}
.press-h.hit .pr-a,.press-h.hit .pr-b{animation-play-state:running}
/* words under the gel bubble */
.gel-words{position:absolute;left:4%;right:4%;top:46%;z-index:1;text-align:center;font:800 clamp(20px,3vw,34px)/1.1 "BBB Sans",Arial,sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);pointer-events:none;white-space:nowrap}
.gl2 .gel-words{position:absolute;left:0;top:0;right:auto;transform-origin:0 0;text-shadow:none;white-space:nowrap}
/* painted-on logo keeps a sliver of colour on the inner edge */
.gl-st[data-m=fill] .gl-logoin{background:linear-gradient(150deg,#fff 0%,#fff 58%,#ffd2a6 78%,#ff9a52 100%)!important}
.gl-st[data-m=gel] .gl-logo{filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.gl2-in{filter:blur(4px) saturate(1.7) brightness(1.15) contrast(1.05)!important}
.gl-logoin{filter:blur(5px) saturate(1.8) brightness(1.12)!important}
.fv-d i{position:absolute;left:50%;top:50%;border-radius:8px;transform:translate(-50%,-50%);background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fvD 9s cubic-bezier(.5,0,.2,1) infinite}
.fv-d i::after{content:"";position:absolute;left:14%;right:14%;top:18%;height:6px;border-radius:3px;background:rgba(255,255,255,.7)}
@keyframes fvD{0%,22%{width:30px;height:62px}33%,55%{width:56px;height:50px}66%,88%{width:120px;height:62px}100%{width:30px;height:62px}}
.tiers-head h3{font-size:clamp(30px,4.2vw,50px);line-height:1.05;letter-spacing:-.03em;margin:10px 0 14px}
h2.press-h.frost-h{background-image:none!important;background:none!important;-webkit-text-fill-color:currentColor}
h2.press-h .pr-b{background:linear-gradient(180deg,#fff0bf,#e9c46a 60%,#b98b2e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

.gel-stage>.gel-words{right:auto;width:max-content;font-size:clamp(18px,2.5vw,30px)!important;opacity:.95}
.gel-strip .gs-r:last-child i{filter:saturate(1.5) brightness(1.15)}
/* more work */
.rb-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);grid-auto-rows:clamp(280px,34vw,460px);gap:clamp(14px,2vw,24px);margin-top:clamp(14px,2vw,24px)}
.rb-more .rb-mini video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
@media(max-width:700px){.rb-more{grid-template-columns:1fr;grid-auto-rows:auto}.rb-more .rb-mini.tall{aspect-ratio:9/14}.rb-more .rb-mini.wide{aspect-ratio:16/10}}