/* v56: facts badges a touch larger, sign-up line pops, five-step buttons in their own colours, larger step headings */
.resource-facts{gap:10px}
.resource-facts span{font-size:12.5px;padding:10px 15px;letter-spacing:.01em}
@media(max-width:700px){.resource-facts{gap:8px}.resource-facts span{font-size:11.5px;padding:9px 12px}}

.cap-ask{font-size:18px;line-height:1.5}
.cap-ask b{color:#fff0c4}
.cap-ask i{display:block;font-style:normal;font-weight:800;color:#ff9a3c;text-shadow:0 0 16px rgba(255,140,40,.35)}
.cap-msg.err{color:#ffab5c;font-weight:700;font-size:15px}
@media(max-width:700px){.cap-ask{font-size:16.5px}}

.detail-bottom h2{font-size:clamp(38px,4.4vw,50px)}
.lesson-list li{font-size:17px;line-height:1.5}
.lesson-list li b{font-size:1.14em;font-weight:800}
@media(max-width:700px){.lesson-list li{font-size:15px}.detail-bottom h2{font-size:38px}}

.lesson-list li:nth-child(1){--sc:227,176,74;--sl:#fff3cf}
.lesson-list li:nth-child(2){--sc:238,122,92;--sl:#ffdacd}
.lesson-list li:nth-child(3){--sc:82,196,130;--sl:#d7f8e3}
.lesson-list li:nth-child(4){--sc:84,166,232;--sl:#d4ecff}
.lesson-list li:nth-child(5){--sc:160,132,238;--sl:#e7ddff}
.lesson-list li .stn{background:radial-gradient(circle at 35% 25%,var(--sl,#fff3cf),rgb(var(--sc,227,176,74)) 70%);box-shadow:0 0 0 5px rgba(var(--sc,227,176,74),.16),0 10px 22px -8px rgba(var(--sc,227,176,74),.85)}
.lesson-list li.in .stn{animation:rpulse56 3.4s ease-in-out calc(var(--i,0)*.5s + 1.2s) infinite}
@keyframes rpulse56{0%,70%,100%{box-shadow:0 0 0 5px rgba(var(--sc,227,176,74),.16),0 10px 22px -8px rgba(var(--sc,227,176,74),.85)}85%{box-shadow:0 0 0 12px rgba(var(--sc,227,176,74),0),0 10px 22px -8px rgba(var(--sc,227,176,74),.85)}}
@media(prefers-reduced-motion:reduce){.lesson-list li.in .stn{animation:none}}

/* v57: "Put it on anything" header is left-aligned with its eyebrow and paragraph */
html.anim .gu-head .frost-h,.gu-head .frost-h,.gu-head h2{margin-left:0!important;margin-right:auto!important;text-align:left}

/* v57: the chosen strength card is outlined all the way round (picture AND caption), not just the bottom */
.str-c.on{box-shadow:0 14px 30px -14px rgba(246,200,90,.6)}
.str-c::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);transition:box-shadow .3s}
.str-c.on::after{box-shadow:inset 0 0 0 2px #f6dc98,inset 0 0 24px rgba(246,220,152,.28)}

/* v57: per-example dial */
.ex-dial{margin:10px 0 2px;font:12.5px/1.4 "BBB Sans",Arial,sans-serif;color:#d8cfb6}
.ex-dial b{display:block;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#e3c27a;margin-bottom:4px}
.ex-dial small{display:block;font-size:12.5px;line-height:1.4;margin-bottom:8px}
.ex-dial .ed-l{display:none}
.ex-card[data-m=liquid] .ex-dial .ed-g,.ex-card[data-m=plain] .ex-dial .ed-g{display:none}
.ex-card[data-m=liquid] .ex-dial .ed-l{display:block}
.ex-card[data-m=plain] .ex-dial{display:none}
.ex-dial input[type=range]{width:100%}
.ex-tog .adj{font-style:normal;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.75;margin-left:4px}

/* v57: the Without / Bespoke / Apple toggle always fits its card, at any width */
.ex-card .ex-tog,.ex-tog{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
.ex-card .ex-tog button,.ex-tog button{min-width:0;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;font-size:clamp(10.5px,.9vw,12px);overflow-wrap:anywhere;hyphens:auto}
.ex-tog .adj{display:block;margin:3px 0 0;font-size:8.5px}
@media(max-width:520px){.ex-card .ex-tog,.ex-tog{grid-template-columns:1fr}}
.gx .ex-tog{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;flex-wrap:wrap!important}
.gx .ex-tog button{white-space:normal!important;font-size:clamp(10.5px,.9vw,12px)!important;padding:8px 6px!important}
@media(max-width:520px){.gx .ex-tog{grid-template-columns:1fr!important}}

/* v57: pick-the-glass description no longer sits on top of the buttons */
.wxl-lk{margin-bottom:14px}
.lk-info{margin:14px 0 18px!important;position:relative;clear:both}
.wxl-wx,.wxl-lk,.wxl-tg{row-gap:10px}

/* v57: calmer weather headline. Soft tinted letters, ONE gentle effect each, no outline, no stripes */
html.anim #wxlab h2.wx-head,html.anim #wxlab h2.wx-head em{-webkit-text-stroke:0!important;paint-order:normal}
html.anim #wxlab h2.wx-head em{background-image:var(--fx2,linear-gradient(180deg,#fff0c4,#f0cf80 55%,#cf9f3c))!important;background-size:var(--fxs2,100% 100%)!important}
#wxlab h2.wx-head[data-fx]{
  --fx:linear-gradient(180deg,#f4f8ff,#cfdcf2 60%,#9fb4d6);--fxs:100% 100%;animation:none;filter:none}
/* rain: a few faint slanted streaks drifting down over steel blue */
#wxlab h2.wx-head[data-fx=rain],#wxlab h2.wx-head[data-fx=storm]{
  --fx:repeating-linear-gradient(105deg,transparent 0 30px,rgba(255,255,255,.34) 30px 31.5px),linear-gradient(180deg,#e9f1ff,#a9c2ea 60%,#7d9bd0);
  --fxs:100% 100%,100% 100%;animation:wxRainSoft 2.4s linear infinite}
#wxlab h2.wx-head[data-fx=storm]{animation:wxRainSoft 1.4s linear infinite,wxFlashSoft 5s linear infinite}
@keyframes wxRainSoft{from{background-position:0 0,0 0}to{background-position:-18px 60px,0 0}}
@keyframes wxFlashSoft{0%,90%,100%{filter:brightness(1)}92%{filter:brightness(1.5)}95%{filter:brightness(1.15)}}
/* snow: sparse soft flakes over cool white */
#wxlab h2.wx-head[data-fx=snow]{
  --fx:radial-gradient(circle,rgba(255,255,255,.9) 0 1.5px,transparent 2.5px),linear-gradient(180deg,#ffffff,#dbe8fa 60%,#b4cdee);
  --fxs:64px 72px,100% 100%;animation:wxSnowSoft 7s linear infinite}
@keyframes wxSnowSoft{from{background-position:0 0,0 0}to{background-position:-20px 72px,0 0}}
/* fog: slow drifting haze */
#wxlab h2.wx-head[data-fx=fog]{
  --fx:radial-gradient(ellipse 220px 70px at 40% 50%,rgba(255,255,255,.55),transparent 70%),linear-gradient(180deg,#d8dfea,#aeb9cb 70%,#95a2b8);
  --fxs:360px 100%,100% 100%;animation:wxFogSoft 14s linear infinite}
@keyframes wxFogSoft{from{background-position:-200px 0,0 0}to{background-position:200px 0,0 0}}
/* frost: icy blue with a slow shimmer sweep */
#wxlab h2.wx-head[data-fx=frost]{
  --fx:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%),linear-gradient(180deg,#e6f6ff,#a9d6f2 60%,#76b6e2);
  --fxs:250% 100%,100% 100%;animation:wxShimmer 5s ease-in-out infinite}
/* sun: warm gold with a slow glint */
#wxlab h2.wx-head[data-fx=sun]{
  --fx:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%),linear-gradient(180deg,#fff4cc,#f8d474 65%,#eeb24a);
  --fxs:250% 100%,100% 100%;animation:wxShimmer 4.5s ease-in-out infinite}
@keyframes wxShimmer{from{background-position:120% 0,0 0}to{background-position:-20% 0,0 0}}
#wxlab h2.wx-head[data-fx=clear]{--fx:linear-gradient(180deg,#f4f8ff,#cfdcf2 60%,#9fb4d6);--fxs:100% 100%;animation:none}
@media(prefers-reduced-motion:reduce){#wxlab h2.wx-head{animation:none!important}}

/* v57: the gold "Get it free" button on every free workbook */
.product[data-category=free] .product-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.product[data-category=free] .product-meta strong a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font:700 13px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#1a1204;text-decoration:none;background:linear-gradient(180deg,#ffeeb8,#e3b04a);box-shadow:0 10px 24px -10px rgba(246,200,90,.8),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .2s,box-shadow .2s}
.product[data-category=free] .product-meta strong a:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(246,200,90,.95),inset 0 1px 0 rgba(255,255,255,.7)}

/* v57: weather lab control column, organised into one calm panel */
.wxl-ctl{padding:clamp(16px,2vw,24px);border-radius:24px;background:linear-gradient(150deg,rgba(255,236,190,.07),rgba(255,236,190,.015));box-shadow:inset 0 0 0 1px rgba(227,194,122,.18)}
.wxl-ctl .wxl-lbl{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11.5px}
.wxl-ctl .wxl-lbl:not(:first-child){margin-top:0;padding-top:18px;border-top:1px solid rgba(227,194,122,.16)}
.wxl-ctl .wxl-row,.wxl-ctl .wxl-tg{margin-bottom:18px}
.wxl-ctl .wxl-row:last-of-type{margin-bottom:0}
.lk-info{margin:0 0 18px!important;padding:10px 14px!important;font-size:13px!important;line-height:1.45}
.lk-info em{display:none}
.lk-info b{display:inline;margin:0 6px 0 0;font-size:13.5px}
.wxl-why{margin-top:16px;padding:16px 18px}
.wxl-why b{font-size:20px;margin-bottom:4px}
.wxl-why>p{margin:0}
.wxl-more{margin-top:12px;border-top:1px solid rgba(227,194,122,.16);padding-top:10px}
.wxl-more summary{cursor:pointer;font:700 11.5px/1.3 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e3c27a;list-style:none}
.wxl-more summary::before{content:"+ ";}
.wxl-more[open] summary::before{content:"\2212 ";}
.wxl-more summary::-webkit-details-marker{display:none}
.wxl-more dl{margin-top:12px}
.bd-l2{display:block;margin:14px 0 8px}
.bd-wh .bd-chip{font-size:12.5px;padding:9px 13px}

/* v57: mix and match glass: real examples first, chart tucked away */
.recipes{margin:clamp(28px,4vw,48px) 0}
.rc-head h4{font-size:clamp(24px,3vw,34px);margin:8px 0 18px}
.rc-head h4 em{font-style:italic;color:#e3c27a}
.rc-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:22px}
.rc-names p{margin:0;padding:14px 16px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(227,194,122,.2);background:rgba(255,236,190,.04);font:14px/1.45 "BBB Sans",Arial,sans-serif;color:#d9d1ba}
.rc-names b{display:block;color:#fff3cf;font-size:15px;margin-bottom:4px}
.rc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rc{border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(227,194,122,.2);background:rgba(255,236,190,.03)}
.rc-pic{position:relative;aspect-ratio:4/3;background-size:cover}
.rc-pane{position:absolute;left:12%;right:12%;top:22%;padding:16px 18px;border-radius:20px;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,236,190,.55);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.rc-pane small{display:block;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;opacity:.8;margin-bottom:6px}
.rc-pane b{display:block;font:700 clamp(18px,2vw,24px)/1.1 "BBB Sans",Arial,sans-serif}
.rc-b{background:linear-gradient(150deg,rgba(255,236,190,.28),rgba(255,214,130,.12))}
.rc-d{background:linear-gradient(150deg,rgba(120,80,220,.55),rgba(40,20,110,.5));box-shadow:inset 0 0 0 1.5px rgba(255,236,190,.6),0 18px 40px -14px rgba(90,50,200,.8)}
.rc-atm{background:linear-gradient(180deg,rgba(214,226,246,.22),rgba(214,226,246,.06));background-image:repeating-linear-gradient(105deg,transparent 0 22px,rgba(255,255,255,.22) 22px 23.5px),linear-gradient(180deg,rgba(214,226,246,.22),rgba(214,226,246,.06))}
.rc-btn{display:inline-block;margin-top:10px;padding:7px 14px;border-radius:99px;background:linear-gradient(180deg,#ffeeb8,#e3b04a);color:#1a1204;font:700 12px "BBB Sans",Arial,sans-serif}
.rc-body{padding:16px 18px 20px}
.rc-body h4{margin:0 0 10px;font-size:18px;color:#fff3cf}
.rc-body ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font:13.5px/1.45 "BBB Sans",Arial,sans-serif;color:#d9d1ba}
.rc-body li b{display:block;color:#e3c27a;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1px}
.rc-chart{margin-top:20px}
.rc-chart summary{cursor:pointer;display:inline-block;padding:10px 16px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(227,194,122,.3);font:700 12px "BBB Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e3c27a;list-style:none}
.rc-chart summary::-webkit-details-marker{display:none}
.rc-chart[open] summary{margin-bottom:16px}
@media(max-width:820px){.rc-names,.rc-row{grid-template-columns:1fr}}

/* v57: Tribe layer explainer */
.lx.lay-ex:has(.lay-real){grid-template-columns:minmax(0,1fr) 340px}
.lx-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.lx-tabs button{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;border-radius:16px;border:0;cursor:pointer;font:700 14px/1.2 "BBB Sans",Arial,sans-serif;color:#e9e0c8;background:rgba(255,236,190,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);transition:background .25s,box-shadow .25s,color .25s}
.lx-tabs button i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12px "BBB Sans",Arial,sans-serif;font-style:normal;color:#1a1204;background:#e3c27a}
.lx-tabs button[aria-selected=true]{color:#1a1204;background:linear-gradient(110deg,#e3b04a,#ffe29a 55%,#e3b04a);box-shadow:0 10px 22px -10px rgba(227,174,70,.9)}
.lx-tabs button[aria-selected=true] i{background:#1a1204;color:#ffe29a}
.lx-info{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:16px;align-items:start;padding:16px;border-radius:20px;background:rgba(255,236,190,.04);box-shadow:inset 0 0 0 1px rgba(227,194,122,.2)}
.lx-zoom{aspect-ratio:10/8;border-radius:14px;background:url(assets/tribe-login-clean.webp) 50% 12%/100% auto no-repeat;box-shadow:inset 0 0 0 1px rgba(227,194,122,.35);transition:background-position .5s,background-size .5s}
.lx[data-f=bg] .lx-zoom{background-position:50% 8%;background-size:100% auto}
.lx[data-f=panel] .lx-zoom{background-position:50% 91%;background-size:150% auto}
.lx[data-f=btn] .lx-zoom{background-position:50% 84%;background-size:130% auto}
.lx-say b{display:block;color:#fff3cf;font-size:17px;margin-bottom:6px}
.lx-say p{margin:0 0 10px;color:#d6cdb6;font:14px/1.5 "BBB Sans",Arial,sans-serif}
.lx-tip{display:inline-block;font:700 11px/1.3 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#e3c27a}
.lx-stage{position:relative}
.lx-hit{position:absolute;border-radius:16px;opacity:0;transition:opacity .35s,box-shadow .35s;z-index:4}
.lx-bg{left:0;right:0;top:0;height:70%;border-radius:36px 36px 0 0}
.lx-panel{left:5%;right:5%;top:74%;height:19%}
.lx-btn{left:9%;right:9%;top:76.5%;height:7.5%;border-radius:12px}
.lx[data-f=bg] .lx-bg,.lx[data-f=panel] .lx-panel,.lx[data-f=btn] .lx-btn{opacity:1;box-shadow:0 0 0 2px #ffe29a,0 0 0 9999px rgba(6,4,2,.62),0 0 28px 4px rgba(255,226,154,.55)}
.lx[data-f=btn] .lx-panel{opacity:1;box-shadow:0 0 0 1px rgba(255,226,154,.35);z-index:3}
@media(max-width:900px){.lx.lay-ex:has(.lay-real){grid-template-columns:1fr}.lx-info{grid-template-columns:1fr}.lx-tabs{grid-template-columns:1fr 1fr}}
.lx-stage{overflow:hidden;border-radius:36px}

/* v57: "Use more than one" repeated Mix and match + the Tribe example, so it is folded into them (one rule line now lives under the real mixes) */
.rc-rule{margin:20px 0 0;padding:14px 18px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(227,194,122,.2);background:rgba(255,236,190,.04);font:14px/1.5 "BBB Sans",Arial,sans-serif;color:#d9d1ba}
.rc-rule b{color:#fff3cf}
.vidd-head p b{color:#fff3cf}

/* v57: Bespoke Gel demo, decluttered: two bubbles, two short labels, nothing else */
.gel-stage .gel-strip,.gel-stage .gel-hud{display:none!important}
.gel-stage .gel-top span{display:none}
.gel-stage .gel-cap{font-size:15px}
.gel-stage .gel-cap small{font-size:12.5px;opacity:.85}
.gel-steps li:nth-child(n+3){display:none}
.gel-steps li span{font-size:13.5px}
.gk-note{margin:0 auto 22px}

/* v57: gold words in big headlines stay together ("one idea." is never split) */
h2.giant em{white-space:nowrap}

/* v57: no orphan or widow words in headings and paragraphs */
h1,h2,h3,h4,.giant{text-wrap:balance}
p,li,figcaption,.bs{text-wrap:pretty}
/* intro captions: small, low, out of the way */
.ifs-cc{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(96px,17svh,170px);z-index:2;max-width:min(720px,84vw);text-align:center;font:600 clamp(14px,1.5vw,19px)/1.35 "BBB Sans",Arial,sans-serif;color:#fff6dd;text-shadow:0 1px 8px #000,0 0 2px #000;opacity:0;transition:opacity .25s;pointer-events:none;text-wrap:balance}
.ifs-cc.on{opacity:.92}
@media(max-width:700px){.ifs-cc{bottom:clamp(120px,22svh,190px)}}
/* ===== FINISH IT: blueprint -> finished, scroll driven ===== */
.fin{--p:1}
html.anim .s-flow .beat.k3 .fin{--p:clamp(0,calc((var(--t) - .16)*1.7),1)}
.fin-stage{background:#06101c;isolation:isolate}
.fb-grid{position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(120,200,255,.16) 1px,transparent 1px) 0 0/10% 10%,linear-gradient(90deg,rgba(120,200,255,.16) 1px,transparent 1px) 0 0/10% 10%,radial-gradient(circle at 50% 45%,#0c2a4a,#050b14 75%);opacity:calc(1 - var(--p)*.85)}
.fb-s{position:absolute;inset:0;display:none}
.fin[data-k=product] .fb-s[data-k=product],.fin[data-k=campaign] .fb-s[data-k=campaign],.fin[data-k=screen] .fb-s[data-k=screen]{display:block}
.fb-fill,.fb-line{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fb-fill{z-index:1;--w:clamp(0,calc((var(--p) - .28)*2.2),1);clip-path:inset(0 calc((1 - var(--w))*100%) 0 0);filter:saturate(calc(.4 + var(--p)*.8)) brightness(calc(.7 + var(--p)*.3));transform:scale(calc(1.06 - var(--p)*.06))}
.fb-line{z-index:2;filter:url(#fbEdge);opacity:calc(1 - clamp(0,calc((var(--p) - .55)*2.4),1)*.9);mix-blend-mode:screen}
.fb-tag{position:absolute;z-index:4;left:12px;bottom:12px;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;padding:8px 11px;border-radius:99px;color:#cfeaff;background:rgba(6,16,28,.7);box-shadow:inset 0 0 0 1px rgba(140,210,255,.45);opacity:calc(1 - clamp(0,calc((var(--p) - .6)*4),1))}
.fb-scan{position:absolute;z-index:3;top:0;bottom:0;width:2px;left:calc(clamp(0,calc((var(--p) - .28)*2.2),1)*100%);background:linear-gradient(transparent,#ffe29a,transparent);box-shadow:0 0 18px 4px rgba(255,226,154,.55);opacity:calc(clamp(0,calc((var(--p) - .27)*40),1)*(1 - clamp(0,calc((var(--p) - .74)*40),1)))}
.fb-mk{position:absolute;inset:4%;width:92%;height:92%;z-index:4;fill:none;stroke:#8fd4ff;stroke-width:.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,calc(var(--p)*5),1));opacity:calc(1 - clamp(0,calc((var(--p) - .45)*3),1))}
.fb-mk *{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:inherit}
.fb-mk .x{stroke-dasharray:.02 .02;stroke-dashoffset:0;opacity:.5}
.fin .fin-ship{opacity:clamp(0,calc((var(--p) - .9)*30),1);transform:scale(calc(.8 + clamp(0,calc((var(--p) - .9)*10),1)*.2));z-index:5}
.fin-steps li{opacity:calc(.35 + .65*clamp(0,calc(var(--p)*4 - var(--n,0)),1))!important;color:inherit}
.fin-steps li:nth-child(2){--n:1}.fin-steps li:nth-child(3){--n:2}.fin-steps li:nth-child(4){--n:3}
.fin-steps li:nth-child(1){color:#8fd4ff}.fin-steps li:nth-child(n+3){color:#ffe29a}
@media(prefers-reduced-motion:reduce){.fin{--p:1}}
.stk .stk-copy .h{text-wrap:balance}
/* sticker sheet: no moving highlight, just show the sheet */
.sk-hl{display:none!important}
/* ===== Work section cleanup: logos sized by height, no blurry floating clutter ===== */
.wk-deep,.wk-parts{display:none!important}
html .wk-mark.named[data-slug] .wk-ic,html .wk-mark.named .wk-ic{height:auto;aspect-ratio:var(--ar,2);width:min(44vw,400px,calc(clamp(80px,20svh,170px)*var(--ar,2)));max-width:100%;margin:0}
html .wk-mark .wk-ic:not(.x){max-height:200px}
.anim .wk-logo{filter:none;transform:translateY(24px)}
.anim .wk-logo.on{transform:none}
.wk-left .wk-lead{position:relative;z-index:2}
.wk-tile{animation-duration:calc(var(--ft,9s)*1.6)}
/* ===== Packaging: video backdrop + scrolling-by work ===== */
.pkg{position:relative;isolation:isolate;overflow:visible}
.pkg-bg{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;overflow:hidden;pointer-events:none}
.pkg-bg video{position:sticky;top:0;display:block;width:100%;height:100svh;object-fit:cover;opacity:.5;filter:blur(2px) saturate(1.05)}
.pkg-bg i{position:absolute;inset:0;background:linear-gradient(#050405 0,rgba(5,4,5,.35) 22%,rgba(5,4,5,.35) 78%,#050405 100%)}
.pkg-head{text-align:center;max-width:780px;margin-inline:auto}
.pkg-head h2{text-wrap:balance}
.pkg-head p{text-wrap:balance}
.pkg-steps{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px 0 0;padding:0}
.pkg-steps li{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f6dc98;padding:10px 15px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4);background:rgba(10,8,5,.55)}
.pm-row{overflow:hidden;margin:clamp(26px,5vw,56px) calc(50% - 50vw) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.pm-track{display:flex;gap:clamp(14px,2vw,26px);width:max-content;animation:pmL 60s linear infinite}
.pm-row.r2 .pm-track{animation-direction:reverse;animation-duration:70s}
.pm-row:hover .pm-track{animation-play-state:paused}
@keyframes pmL{to{transform:translateX(-50%)}}
.pm{position:relative;margin:0;flex:none;height:clamp(200px,28vw,340px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0a0806;box-shadow:0 26px 50px -26px #000,0 0 0 1px rgba(227,194,122,.28)}
.pm img{width:100%;height:100%;object-fit:cover;display:block}
.pm figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f6dc98;background:linear-gradient(to top,rgba(5,4,3,.85),transparent)}
@media(prefers-reduced-motion:reduce){.pm-track{animation:none}.pm-row{overflow-x:auto}}
/* keep "Start free." perfectly still so the gold line lands on it and writes it without shake */
.anim .end .giant[data-pull]{translate:none!important;rotate:none!important;scale:none!important}
.free-svg .fo{stroke-width:14}
/* ===== Gel press: buttons squash down under your finger, then spring back ===== */
@keyframes gelDown{to{scale:1.06 .86}}
@keyframes gelUp{0%{scale:1.06 .86}30%{scale:.94 1.1}55%{scale:1.03 .97}78%{scale:.99 1.01}100%{scale:1 1}}
.gel-down{animation:gelDown .09s ease-out forwards!important;transform-origin:50% 60%}
.gel-up{animation:gelUp .55s cubic-bezier(.2,.8,.3,1) both!important;transform-origin:50% 60%}
@media(prefers-reduced-motion:reduce){.gel-down,.gel-up{animation:none!important}}
/* work slideshow: full images and videos, hard clean edges, no fades or masks */
html.anim .s-flow .beat .wd-s img,html.anim .s-flow .beat .wd-s video{-webkit-mask-image:none!important;mask-image:none!important;border-radius:20px!important;object-fit:cover}
html.anim .s-flow .beat .wd-deck{border-radius:20px!important;overflow:hidden!important;background:#07050a!important;box-shadow:0 36px 80px -30px #000,0 0 0 1px rgba(227,194,122,.4)!important}
html.anim .s-flow .beat .wd-s::after{display:block;border-radius:20px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 38%)}
html.anim .s-flow .beat .wd-s b{text-align:left;left:16px;right:16px;bottom:16px;text-shadow:0 2px 14px #000}
/* ===== Work section: real logos in calm cream, placeholder art tiles ===== */
html .wk-mark .wk-ic,html .wk-mark.named .wk-ic{background:#eadfc4!important;animation:none!important;filter:none!important;opacity:.94;width:min(40vw,340px,calc(clamp(56px,11svh,110px)*var(--ar,2)))!important}
html .wk-mark .wk-ic{max-height:120px}
html .wk-logo::before{display:none!important}
.wk-tile .ph-art{display:block;width:100%;height:100%;position:absolute;inset:0;border-radius:22px;background:radial-gradient(120% 90% at 20% 15%,hsla(var(--h),38%,46%,.55),transparent 60%),radial-gradient(90% 80% at 85% 90%,hsla(calc(var(--h) + 40),30%,30%,.5),transparent 65%),linear-gradient(160deg,#17130d,#0a0809)}
.wk-tile .ph-art::after{content:"";position:absolute;inset:12%;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(246,220,152,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px)}
.wk-tile{min-height:0}
.wk-tile::after{box-shadow:0 0 30px 0 rgba(247,214,120,.2),inset 0 0 0 1px rgba(246,220,152,.35)!important}
/* Start free subline: tight leading, balanced, one line when it fits */
.end-in p.end-sub{line-height:1.18!important;font-size:clamp(20px,2.4vw,32px);max-width:min(100%,860px)!important;margin:22px auto 26px!important;text-wrap:balance}
@media(max-width:700px){.end-in p.end-sub{font-size:clamp(19px,5.4vw,24px);max-width:16em!important}}
.hs-b .hs-sub{text-wrap:balance;max-width:min(100%,760px)}
/* glass pane label: readable on any photo */
.lyr .pane .tiny,.mini-glass .tiny{color:#fff6dd!important;-webkit-text-fill-color:#fff6dd!important;background:none!important;padding:7px 11px;border-radius:99px;display:inline-block;letter-spacing:.16em;font-weight:800;text-shadow:none!important;box-shadow:inset 0 0 0 1px rgba(246,220,152,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* sky layer (your picture): bright and clear, even in rain */
.s-glass .lyr.l1 .pane{background:#14100c}
.s-glass .lyr.l1 .skyart{opacity:1!important;filter:brightness(1.22) saturate(1.12) contrast(1.04)}
.s-glass[data-wx=rain] .lyr.l1 .skyart,.s-glass[data-wx=storm] .lyr.l1 .skyart{filter:brightness(1.1) saturate(1) contrast(1.02)}
.s-glass[data-wx=fog] .lyr.l1 .skyart{filter:brightness(1.2) saturate(.85) contrast(.95)}
/* blueprint cards: the artwork starts below the section number */
.bp svg{inset:30px 8px 6px 8px!important;width:calc(100% - 16px)!important;height:calc(100% - 36px)!important}
.bp-no{top:10px!important;left:14px!important}
/* strength cards: only the chosen one is in colour, the others are greyed out */
.gx-str .str-c{transition:filter .35s ease,opacity .35s ease,box-shadow .3s,transform .3s}
.gx-str .str-c:not(.on){filter:grayscale(1) brightness(.72);opacity:.55}
.gx-str .str-c:not(.on):hover{filter:grayscale(.5) brightness(.9);opacity:.85}
/* ===== three-way toggle: one gel thumb that slides under the chosen word and squeezes when pressed ===== */
.ex-tog,.ex-card .ex-tog,.gx .ex-tog{position:relative;overflow:visible!important;padding:4px;gap:0!important;border-radius:999px!important;background:rgba(255,255,255,.06)}
.ex-tog::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;translate:0 0;transform-origin:50% 60%;
  background:linear-gradient(180deg,#f6dc98,#d9a93f);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -6px 10px -6px rgba(120,70,0,.5),0 8px 18px -8px rgba(227,174,70,.8);
  transition:translate .5s cubic-bezier(.3,1.5,.5,1),background .35s,box-shadow .35s,scale .12s ease-out}
[data-m=plain] .ex-tog::before{translate:0 0;background:linear-gradient(180deg,#8a8a92,#55555c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px #000}
[data-m=glass] .ex-tog::before{translate:100% 0}
[data-m=liquid] .ex-tog::before{translate:200% 0;background:linear-gradient(180deg,#fff,#cfdcf5);box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(190,215,255,.9)}
.ex-tog:has(button:active)::before{scale:1.06 .84}
.ex-tog button,.ex-tog button[aria-pressed=true],.ex-tog button[data-m][aria-pressed=true]{position:relative;z-index:1;background:none!important;box-shadow:none!important;border-radius:999px;padding:9px 6px!important;transition:color .3s}
.ex-tog button[aria-pressed=true]{color:#1a1204!important}
.ex-tog button[data-m=plain][aria-pressed=true]{color:#fff!important}
.ex-tog button[data-m=liquid][aria-pressed=true]{color:#0e1220!important}
.ex-tog button:focus-visible{outline:2px solid #fff3cf;outline-offset:-2px}
@media(max-width:520px){.ex-tog,.ex-card .ex-tog,.gx .ex-tog{border-radius:22px!important}.ex-tog::before{display:none}.ex-tog button[aria-pressed=true]{background:linear-gradient(180deg,#f6dc98,#d9a93f)!important}}
/* Apple Liquid Glass is FIXED: it never follows the Bespoke strength slider */
html .gx .ex-card[data-m=liquid] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(8px) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(8px) saturate(190%) brightness(1.12)!important}
html .bd[data-m=liquid] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(8px) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(8px) saturate(190%) brightness(1.12)!important}
.tiers-head h3,.tiers-head p{text-wrap:balance}
/* "Now you try it": the pill slowly changes colour, like glass taking on a new look */
@keyframes tryHue{0%,100%{background:linear-gradient(180deg,#fff0c4,#e3b04a 55%,#b8862c);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -10px rgba(227,174,70,.8)}
25%{background:linear-gradient(180deg,#ffd9e6,#e9779f 55%,#a83d68);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -10px rgba(233,119,159,.8)}
50%{background:linear-gradient(180deg,#dcd6ff,#8b7bf0 55%,#4b3fb0);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -10px rgba(139,123,240,.8)}
75%{background:linear-gradient(180deg,#cdf5ee,#4fc4b0 55%,#1f7f73);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -10px rgba(79,196,176,.8)}}
.gx-try-pill{animation:tryHue 9s ease-in-out infinite}
.gx-try::before{animation:tryLine 9s ease-in-out infinite}
@keyframes tryLine{0%,100%{background:linear-gradient(90deg,transparent,rgba(246,214,120,.7),transparent)}25%{background:linear-gradient(90deg,transparent,rgba(233,119,159,.7),transparent)}50%{background:linear-gradient(90deg,transparent,rgba(139,123,240,.7),transparent)}75%{background:linear-gradient(90deg,transparent,rgba(79,196,176,.7),transparent)}}
@media(prefers-reduced-motion:reduce){.gx-try-pill,.gx-try::before{animation:none}}
/* ===== one glass recipe everywhere: Bespoke follows the strength dial the same way in the examples and the builder; Liquid is fixed in both ===== */
html .bd[data-m=glass] :is(.bd-nav,.bd-pane){-webkit-backdrop-filter:blur(calc(var(--bfr)*28px)) saturate(185%) brightness(1.06)!important;backdrop-filter:blur(calc(var(--bfr)*28px)) saturate(185%) brightness(1.06)!important}
/* ===== toggles: the thumb always fills exactly the chosen segment (works for any group, any parent) ===== */
.ex-tog:has(button[data-m=plain][aria-pressed=true])::before{translate:0 0;background:linear-gradient(180deg,#8a8a92,#55555c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px #000}
.ex-tog:has(button[data-m=glass][aria-pressed=true])::before{translate:100% 0;background:linear-gradient(180deg,#f6dc98,#d9a93f);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -6px 10px -6px rgba(120,70,0,.5),0 8px 18px -8px rgba(227,174,70,.8)}
.ex-tog:has(button[data-m=liquid][aria-pressed=true])::before{translate:200% 0;background:linear-gradient(180deg,#fff,#cfdcf5);box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(190,215,255,.9)}
.bd-tog.ex-tog,.bd.bd-wiz .bd-tog{position:relative;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;padding:4px!important;width:100%;box-sizing:border-box;overflow:visible!important;border-radius:999px!important}
.bd-tog.ex-tog button{flex:none;padding:10px 6px!important;font-size:clamp(11px,.9vw,13px)!important}
/* two-way caption toggle gets the same gel thumb */
.rb-tog{position:relative;display:inline-grid!important;grid-template-columns:1fr 1fr;gap:0!important;padding:4px!important;border-radius:999px!important}
.rb-tog::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border-radius:999px;translate:0 0;transform-origin:50% 60%;background:linear-gradient(180deg,#8a8a92,#55555c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px -8px #000;transition:translate .5s cubic-bezier(.3,1.5,.5,1),background .35s,scale .12s ease-out}
.rb-tog:has(button[data-m=glass][aria-pressed=true])::before{translate:100% 0;background:linear-gradient(180deg,#f6dc98,#d9a93f);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 8px 18px -8px rgba(227,174,70,.8)}
.rb-tog:has(button:active)::before{scale:1.06 .84}
.rb-tog button,.rb-tog button[aria-pressed=true]{position:relative;z-index:1;background:none!important;box-shadow:none!important;transition:color .3s}
.rb-tog button[aria-pressed=true]{color:#1a1204!important}
.rb-tog button[data-m=flat][aria-pressed=true]{color:#fff!important}

/* v58: GET IT FREE = one green pill, no gold inner button */
.bento .product[data-category=free] .product-meta strong{padding:0!important;display:inline-flex}
.bento .product[data-category=free] .product-meta strong a,.bento .product[data-category=free] .product-meta strong a:hover{background:none!important;box-shadow:none!important;transform:none!important;color:#03160a!important;-webkit-text-fill-color:#03160a!important;padding:10px 20px!important;border-radius:999px;font:800 12.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.07em;display:inline-flex;align-items:center;gap:8px}

/* v58: "what you'll do" lists: plain tick list, no boxes, no pills */
.wy,.bento .wy,.bento .pf .wy{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:auto 0 4px!important;min-height:0!important;border-top:1px solid rgba(227,194,122,.22)!important;padding-top:14px!important}
.wy-l{font-size:10.5px!important;letter-spacing:.18em!important;color:#e9c97f!important;margin-bottom:10px!important}
.wy ul{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:8px!important}
.wy li{background:none!important;border:0!important;border-radius:0!important;padding:0 0 0 24px!important;font-size:14px!important;line-height:1.45!important;color:#efe8d8!important}
.wy li::before{left:3px!important;top:.55em!important;width:6px!important;height:11px!important;transform:translateY(-62%) rotate(45deg)!important}

/* v58: weather headline: visible weather inside the letters */
@media(prefers-reduced-motion:no-preference){
#wxlab h2.wx-head[data-fx=rain],#wxlab h2.wx-head[data-fx=storm]{
  --fx:repeating-linear-gradient(100deg,transparent 0 11px,rgba(255,255,255,.85) 11px 12.5px,transparent 12.5px 23px),repeating-linear-gradient(100deg,transparent 0 17px,rgba(190,215,255,.7) 17px 18px,transparent 18px 31px),linear-gradient(180deg,#9fbbe6,#5f86c4 60%,#456db0);
  --fxs:60px 90px,80px 130px,100% 100%;animation:wxRainV 0.7s linear infinite;filter:drop-shadow(0 0 8px rgba(120,160,230,.45))}
#wxlab h2.wx-head[data-fx=storm]{animation:wxRainV .5s linear infinite,wxFlashSoft 4s linear infinite}
@keyframes wxRainV{from{background-position:0 0,0 0,0 0}to{background-position:-24px 90px,-32px 130px,0 0}}
#wxlab h2.wx-head[data-fx=snow]{
  --fx:radial-gradient(circle,#fff 0 2.4px,transparent 3.4px),radial-gradient(circle,rgba(255,255,255,.95) 0 1.4px,transparent 2.4px),linear-gradient(180deg,#8fb0dc,#6d94c8 60%,#5a82bb);
  --fxs:46px 54px,28px 34px,100% 100%;animation:wxSnowV 3.2s linear infinite;filter:drop-shadow(0 0 6px rgba(255,255,255,.4))}
@keyframes wxSnowV{from{background-position:0 0,10px 0,0 0}to{background-position:-18px 54px,-8px 34px,0 0}}
#wxlab h2.wx-head[data-fx=fog]{
  --fx:radial-gradient(ellipse 260px 90px at 40% 50%,rgba(255,255,255,.8),transparent 70%),radial-gradient(ellipse 200px 70px at 70% 40%,rgba(255,255,255,.6),transparent 70%),linear-gradient(180deg,#aab5c8,#8795ad 70%,#76859f);
  --fxs:420px 100%,340px 100%,100% 100%;animation:wxFogV 9s ease-in-out infinite alternate}
@keyframes wxFogV{from{background-position:-260px 0,300px 0,0 0;filter:blur(.2px);opacity:.82}to{background-position:260px 0,-300px 0,0 0;filter:blur(1.6px);opacity:1}}
#wxlab h2.wx-head[data-fx=frost]{
  --fx:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.55) 0 4deg,transparent 4deg 30deg),linear-gradient(110deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),linear-gradient(180deg,#dff4ff,#8ccaf0 60%,#5aa6dc);
  --fxs:46px 46px,250% 100%,100% 100%;animation:wxFrostV 4s ease-in-out infinite}
@keyframes wxFrostV{0%{background-position:0 0,130% 0,0 0;filter:drop-shadow(0 0 3px rgba(190,235,255,.5))}50%{filter:drop-shadow(0 0 14px rgba(210,245,255,.95))}100%{background-position:23px 23px,-30% 0,0 0;filter:drop-shadow(0 0 3px rgba(190,235,255,.5))}}
#wxlab h2.wx-head[data-fx=sun]{
  --fx:linear-gradient(110deg,transparent 38%,rgba(255,255,255,1) 50%,transparent 62%),linear-gradient(180deg,#ffe9a0,#f6b93a 65%,#e08a1c);
  --fxs:250% 100%,100% 100%;animation:wxShimmer 3s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,190,60,.55))}
}

/* v58: weather lab */
.wx-now{display:none!important}
#wxlCard,#wxlCard>*{outline:0!important}
#wxlCard::before,#wxlCard::after{content:none!important;display:none!important}
/* cleaner icons */
.wxl-wx button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wxl-wx button{gap:9px}
/* selected weather button takes the weather's own colour */
.wxl-wx button[aria-pressed=true]{background-image:none!important;color:var(--wc-t,#1a1204)!important;box-shadow:0 0 0 1px var(--wc-b,#e3b04a),0 8px 22px -8px var(--wc-g,rgba(227,176,74,.8))!important}
.wxl-wx button[data-m=clear][aria-pressed=true]{background:linear-gradient(180deg,#f3ead4,#cfc3a4);--wc-t:#2b2414;--wc-b:#e8dcb8;--wc-g:rgba(230,214,170,.7)}
.wxl-wx button[data-m=rain][aria-pressed=true]{background:linear-gradient(180deg,#8fb4ee,#4f79c6);--wc-t:#07122b;--wc-b:#9cbdf0;--wc-g:rgba(90,130,225,.85)}
.wxl-wx button[data-m=storm][aria-pressed=true]{background:linear-gradient(180deg,#8b7cf0,#4b3fb4);--wc-t:#fff;--wc-b:#a89cff;--wc-g:rgba(110,95,240,.85)}
.wxl-wx button[data-m=fog][aria-pressed=true]{background:linear-gradient(180deg,#cfd6e2,#8f9bb0);--wc-t:#161b26;--wc-b:#d6dce8;--wc-g:rgba(170,182,204,.7)}
.wxl-wx button[data-m=snow][aria-pressed=true]{background:linear-gradient(180deg,#ffffff,#bcd4f2);--wc-t:#0e2240;--wc-b:#fff;--wc-g:rgba(200,225,255,.8)}
.wxl-wx button[data-m=frost][aria-pressed=true]{background:linear-gradient(180deg,#c9f0ff,#5fb8e8);--wc-t:#04243a;--wc-b:#c9f0ff;--wc-g:rgba(90,190,240,.85)}
.wxl-wx button[data-m=sun][aria-pressed=true]{background:linear-gradient(180deg,#ffe48a,#f4a62a);--wc-t:#2a1600;--wc-b:#ffe48a;--wc-g:rgba(255,185,60,.9)}
/* amount sliders */
.wxl-sls{display:grid;gap:14px;margin-bottom:18px}
.wxl-sl{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font:700 13px/1 "BBB Sans",Arial,sans-serif;color:#e9dfc6}
.wxl-sl output{font-weight:700;color:#e3c27a;min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.wxl-sl input{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;margin:0;cursor:pointer;background:linear-gradient(90deg,#e3b04a var(--v,100%),rgba(255,255,255,.14) var(--v,100%))}
.wxl-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff,#e8dcc0);border:0;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(227,176,74,.45)}
.wxl-sl input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(227,176,74,.45)}
.wxl-sl input:focus-visible{outline:2px solid #fff;outline-offset:6px}
.wxl-sln{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:#b9ae94}
.wxl-how{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid rgba(227,194,122,.3);background:rgba(227,176,74,.06)}
.wxl-how b{display:block;font-size:13.5px;color:#f3dca0;margin-bottom:6px}
.wxl-how p{margin:0;font-size:13.5px;line-height:1.55;color:#d9cfb5}

/* v59: platforms section */
.plat{max-width:1180px;margin:clamp(56px,8vw,96px) auto;padding:0 clamp(16px,3vw,28px)}
.plat-head{text-align:center;max-width:760px;margin:0 auto 28px}
.plat-head p{color:#d9cfb5;line-height:1.6;margin:14px 0 0}
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.pl{padding:20px;border-radius:20px;border:1px solid rgba(227,194,122,.25);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));display:flex;flex-direction:column;gap:8px}
.pl h4{margin:0;font-size:18px;color:#fff}
.pl p{margin:0;font-size:14.5px;line-height:1.55;color:#d9cfb5}
.pl small{font-size:12.5px;line-height:1.5;color:#a99f88}
.pl-st{align-self:flex-start;font:800 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:99px}
.pl-ok .pl-st{background:rgba(70,230,140,.16);color:#8cf0b8;box-shadow:inset 0 0 0 1px rgba(90,235,150,.45)}
.pl-wip .pl-st{background:rgba(227,176,74,.16);color:#f3cf86;box-shadow:inset 0 0 0 1px rgba(227,176,74,.5)}
.pl-no .pl-st{background:rgba(255,255,255,.08);color:#cfc6b0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.plat-adapt{margin-top:18px;padding:22px;border-radius:22px;border:1px solid rgba(227,194,122,.28);background:rgba(227,176,74,.05)}
.plat-adapt>b{display:block;font-size:16px;color:#f3dca0;margin-bottom:14px}
.plat-adapt>p{margin:16px 0 0;font-size:14.5px;line-height:1.55;color:#d9cfb5}
.pa-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pa{display:grid;grid-template-columns:54px 1fr;gap:4px 14px;align-items:center}
.pa i{grid-row:1/3;width:54px;height:42px;border-radius:12px;display:block}
.pa-f{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08)),#4d5fa8;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7),0 0 18px rgba(130,150,255,.55)}
.pa-l{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),#4d5fa8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.pa-s{background:#2a2c3a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pa strong{color:#fff;font-size:15px;align-self:end}
.pa span{font-size:13.5px;line-height:1.45;color:#cfc6b0;align-self:start}

/* v60: one-screen glass switcher */
.mx{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;align-items:stretch;margin:22px 0}
@media(max-width:900px){.mx{grid-template-columns:1fr}}
.mx-stage{position:relative;border-radius:26px;overflow:hidden;min-height:460px;box-shadow:0 0 0 1px rgba(227,194,122,.28),0 30px 60px -30px #000}
.mx-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-ui{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;padding:clamp(14px,2.4vw,24px);height:100%;box-sizing:border-box}
.g-b{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.55);border-radius:16px;color:#fff}
.mx-bar{display:flex;gap:18px;padding:12px 18px;font:700 13px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.04em}
.mx-bar span:first-child{margin-right:auto}
.mx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto}
.mx-c{padding:16px;font:700 14px/1 "BBB Sans",Arial,sans-serif;min-height:56px;display:flex;align-items:flex-end}
.mx-hero{position:relative;margin:auto 0;padding:clamp(18px,3vw,30px);border-radius:24px;color:#fff;display:grid;gap:10px;justify-items:start;max-width:560px;transition:transform .7s,box-shadow .7s,background .7s;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,255,255,.55)}
.mx-hero small{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-shadow:0 1px 8px #0008}
.mx-hero b{font-size:clamp(26px,4vw,42px);line-height:1.04;letter-spacing:-.03em;text-shadow:0 2px 16px #0007}
.mx-hero b em{font-family:var(--serif,Georgia,serif);font-weight:400;color:#fff2c8}
.mx-btn{padding:11px 20px;border-radius:99px;font:800 13px/1 "BBB Sans",Arial,sans-serif;color:#1a1204;background:linear-gradient(180deg,#ffeeb8,#e3b04a);box-shadow:inset 0 1px 0 #fff8,0 8px 18px -8px #000}
.mx-tag{position:absolute;right:-8px;top:-14px;font:800 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:7px 10px;border-radius:99px;background:#e3b04a;color:#1a1204;opacity:0;transform:translateY(6px);transition:.4s;box-shadow:0 6px 14px -6px #000}
.mx:not([data-m=bespoke]) .mx-tag{opacity:1;transform:none}
/* DEEP: a thick slab, lifted, lit from inside */
.mx[data-m=deep] .mx-hero{background:linear-gradient(150deg,rgba(140,105,240,.55),rgba(28,12,78,.7));-webkit-backdrop-filter:blur(6px) saturate(210%) brightness(1.08);backdrop-filter:blur(6px) saturate(210%) brightness(1.08);
  box-shadow:0 0 0 1px rgba(255,236,190,.95),0 0 0 7px rgba(255,255,255,.13),0 0 0 8px rgba(255,236,190,.5),inset 0 22px 30px rgba(200,175,255,.4),inset 0 -26px 34px rgba(8,0,40,.65),0 34px 46px -16px rgba(0,0,0,.8),0 0 44px rgba(150,120,255,.5);
  transform:perspective(900px) translateY(-8px) rotateX(3deg) rotateY(-4deg);animation:mxTilt 6s ease-in-out infinite alternate}
.mx[data-m=deep] .mx-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 70% at 25% 0%,rgba(255,255,255,.5),transparent 62%),radial-gradient(50% 60% at 85% 110%,rgba(120,90,255,.65),transparent 60%);mix-blend-mode:screen;animation:mxLight 7s ease-in-out infinite alternate}
@keyframes mxTilt{to{transform:perspective(900px) translateY(-12px) rotateX(-2deg) rotateY(4deg)}}
@keyframes mxLight{from{opacity:.7;transform:translateX(-4%)}to{opacity:1;transform:translateX(4%)}}
/* ATMOS: a second sheet of glass in front, with water on it */
.mx-rain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;background:repeating-linear-gradient(104deg,transparent 0 22px,rgba(255,255,255,.3) 22px 23px,transparent 23px 41px);background-size:70px 120px;animation:mxRain .8s linear infinite}
@keyframes mxRain{to{background-position:-26px 120px}}
.mx[data-m=atmos] .mx-rain{opacity:.55}
.mx[data-m=atmos] .mx-hero{background:linear-gradient(170deg,rgba(220,235,255,.2),rgba(120,150,200,.1));-webkit-backdrop-filter:blur(9px) saturate(150%);backdrop-filter:blur(9px) saturate(150%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65),inset 0 0 0 9px rgba(255,255,255,.07),inset 0 0 0 10px rgba(255,255,255,.35),0 22px 36px -18px #000}
.mx[data-m=atmos] .mx-hero::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95) 0 1.4px,rgba(255,255,255,.18) 2.6px,transparent 6px) 0 0/58px 74px,radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0 1.8px,rgba(255,255,255,.2) 4px,transparent 9px) 22px 30px/94px 112px,radial-gradient(ellipse 4px 22px at 50% 60%,rgba(255,255,255,.35),transparent 70%) 8px 0/76px 130px;animation:mxDrops 9s linear infinite}
@keyframes mxDrops{to{background-position:0 74px,22px 142px,8px 130px}}
.mx[data-m=atmos] .mx-hero>*{position:relative;z-index:2}
/* side panel */
.mx-side{display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:26px;border:1px solid rgba(227,194,122,.28);background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.mx-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mx-tabs button{font:700 13.5px/1 "BBB Sans",Arial,sans-serif;color:#d9cfb5;background:rgba(255,255,255,.06);border:0;box-shadow:inset 0 0 0 1px rgba(227,194,122,.25);border-radius:999px;padding:12px 16px;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.mx-tabs button[aria-pressed=true]{background:linear-gradient(180deg,#ffeeb8,#e3b04a);color:#1a1204;box-shadow:0 8px 20px -8px rgba(227,176,74,.8)}
.mx-p{display:none}
.mx[data-m=bespoke] .mx-p[data-for=bespoke],.mx[data-m=deep] .mx-p[data-for=deep],.mx[data-m=atmos] .mx-p[data-for=atmos]{display:block;animation:mxIn .5s}
@keyframes mxIn{from{opacity:0;transform:translateY(6px)}}
.mx-p h5{margin:0 0 8px;font-size:20px;color:#fff}
.mx-p p{margin:0 0 12px;font-size:15px;line-height:1.6;color:#e3dac3}
.mx-ai{padding:12px 14px;border-radius:12px;background:rgba(227,176,74,.08);border:1px solid rgba(227,194,122,.28);font-size:14px!important}
.mx-ai b{color:#f3dca0}
@media(prefers-reduced-motion:reduce){.mx-hero,.mx-hero::before,.mx-rain{animation:none!important}}
.lx-col{margin-top:10px;padding:12px 14px;border-radius:12px;border:1px solid rgba(227,194,122,.28);background:rgba(227,176,74,.06);font-size:14.5px;line-height:1.55}
.lx-col b{color:#f3dca0}
.lx-info{display:block!important;grid-template-columns:1fr!important}
.lx-zoom{display:none!important}

/* v61: the Bespoke Glass video example is alive: the orb breathes, the glass edge glows with it */
@media(prefers-reduced-motion:no-preference){
.vd.glassy .vd-pane video{animation:orbBreath 5s ease-in-out infinite}
.vd.glassy .vd-pane{animation:orbGlow 5s ease-in-out infinite}
}
@keyframes orbBreath{0%,100%{transform:scale(1.04) rotate(0deg)}50%{transform:scale(1.12) rotate(2.5deg)}}
@keyframes orbGlow{0%,100%{box-shadow:0 0 0 1px rgba(255,236,190,.55),0 0 26px rgba(160,140,255,.35)}50%{box-shadow:0 0 0 1.5px rgba(255,236,190,.95),0 0 56px rgba(180,150,255,.7)}}

/* v62: gel demo: words sit under both bubbles so you can see the glass diffuse them; the O is never washed out */
.gel-stage>.gel-words{display:block!important;font-size:clamp(20px,3vw,34px)!important;opacity:1;text-shadow:0 2px 12px rgba(0,0,0,.45);z-index:3}
.gl2-logo{background:linear-gradient(180deg,var(--i0,#ff7a3d),var(--i1,#c05a8c) 50%,var(--i2,#8b4dff))}
.gel-ink:not([data-adapt="0"]) .gl2-in{opacity:.72}
.gel-ink[data-adapt="0"] .gl2-logo{background:none}

/* v63: gel demo: the weather is always visible (a light CSS layer on top of the glass drawing), and the stage stays on screen on small screens */
.gel-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s}
.gel-stage[data-wx=rain]::after{opacity:.6;background:repeating-linear-gradient(104deg,transparent 0 20px,rgba(255,255,255,.34) 20px 21.5px,transparent 21.5px 38px);background-size:64px 120px;animation:gelRain .75s linear infinite}
.gel-stage[data-wx=frost]::after{opacity:1;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(210,240,255,.5) 100%),repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.1) 0 4deg,transparent 4deg 30deg)}
.gel-stage[data-wx=fog]::after{opacity:1;background:radial-gradient(ellipse 60% 40% at 30% 40%,rgba(255,255,255,.4),transparent 70%),radial-gradient(ellipse 55% 40% at 75% 65%,rgba(255,255,255,.32),transparent 70%);animation:gelFog 10s ease-in-out infinite alternate}
.gel-stage[data-wx=sun]::after{opacity:1;background:radial-gradient(circle at 82% 8%,rgba(255,236,170,.85),rgba(255,200,90,.25) 30%,transparent 55%),linear-gradient(200deg,rgba(255,220,130,.22),transparent 55%);animation:gelSun 5s ease-in-out infinite alternate}
@keyframes gelRain{to{background-position:-24px 120px}}
@keyframes gelFog{to{transform:translateX(5%)}}
@keyframes gelSun{from{opacity:.7}to{opacity:1}}
.gel-stage>*{z-index:2}
@media(prefers-reduced-motion:reduce){.gel-stage::after{animation:none!important}}
@media(max-width:900px){
 .gel-grid{display:block!important}
 .gel-stage{position:sticky;top:96px;z-index:30;aspect-ratio:auto!important;height:min(46svh,380px);margin-bottom:22px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 20px 40px -10px rgba(0,0,0,.9)}
 .gel-stage .gel-top{display:none}
}
.gel-stage>#gelCv,.gel-stage>.gel-fb{z-index:0}

/* v64: Bruce the bear logo in the story + calmer small screens */
.bmo .bm3{object-fit:contain!important;padding:12% 14%;box-sizing:border-box;background:radial-gradient(70% 55% at 50% 45%,rgba(227,174,70,.22),transparent 70%),#0a0816}
.tl-n.n3 .tl-th img{object-fit:contain;padding:9%;box-sizing:border-box}
@media(max-width:900px){
 .bmo figcaption{display:none!important}
 main>section,main>.scene,body>section{position:relative}
 main>section+section::before,.scene+section::before,section+.scene::before{content:"";display:block;height:1px;margin:0 auto;width:min(86%,420px);background:linear-gradient(90deg,transparent,rgba(227,194,122,.35),transparent)}
 .try-sec,.tiers,.plat,.vidd,.gel,.scene-tiles{padding-top:clamp(44px,12vw,72px)!important}
 .tb-legend,.kit-note,.vidd-note,.rc-rule{font-size:13.5px}
 .eyebrow{letter-spacing:.14em}
}
@media(max-width:600px){
 .giant{font-size:clamp(34px,11vw,52px)!important;line-height:1.02!important}
 .bt .bs{font-size:15px;line-height:1.55}
 .vidd-row,.plat-grid,.tier-row,.mx{gap:14px!important}
}

/* v65: the story ends on the logo's journey: brown, rainbow, gold, sketch, then cosmic (today) */
.bmo{--L:clamp(0,calc((var(--t,0) - .76)*4.6),1)}
.bmo .bm4{gap:16px}
.bmo .lgs{position:relative;width:94%;aspect-ratio:971/634}
.bmo .lg{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;opacity:clamp(0,calc(1 - max(var(--L) - var(--c),var(--c) - var(--L))*3.4),1);transform:scale(calc(.94 + clamp(0,calc(1 - max(var(--L) - var(--c),var(--c) - var(--L))*3.4),1)*.06));filter:drop-shadow(0 6px 22px rgba(227,174,70,.25))}
html:not(.anim) .bmo .lg:not(.lg4){display:none}
html:not(.anim) .bmo .lg4{opacity:1}
.tl-n.n4 .tl-th img{object-fit:contain;padding:8%}

/* v65: small screens: centred text and a rule strip that moves with the scroll */
@media(max-width:900px){
 .s-flow .beat .bt,.s-flow .beat .bt .bs,.s-flow .beat .bt .giant{text-align:center;margin-left:auto;margin-right:auto}
 .s-flow .bts{text-align:center;align-items:center}
 .rc-stats{justify-content:center;text-align:center}
 .rc-n{text-align:center}
 .rc-cap{text-align:center;left:0;right:0}
 .rc-band{height:min(24svh,190px)!important}
 .rc-a .rc-track{transform:translate3d(calc(8vw - var(--t)*150vw),0,0)!important;width:max-content!important;max-width:none!important;justify-content:flex-start!important;padding:0 4vw!important}
 .rc-a .rc-c{min-width:62vw;max-width:62vw}
 .rc-a .rc-c:nth-child(n+5){display:block!important}
}

/* v66: "how it's made": the work plays as a soft full-bleed background, no corner labels */
html.anim .s-flow .beat.k2 .bi.wd{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100%!important;height:100%!important;max-width:none!important;transform:none!important;margin:0!important;opacity:calc(var(--ee)*.62*(1 - var(--x)));z-index:0;pointer-events:none}
html.anim .s-flow .beat.k2 .wd-deck{aspect-ratio:auto!important;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important}
html.anim .s-flow .beat.k2 .wd-s::before{display:none}
html.anim .s-flow .beat.k2 .wd-s img,html.anim .s-flow .beat.k2 .wd-s video{object-fit:cover!important;border-radius:0!important;box-shadow:none!important;width:100%;height:100%}
html.anim .s-flow .beat.k2 .wd-s b,html.anim .s-flow .beat.k2 .bi.wd figcaption{display:none!important}
html.anim .s-flow .beat.k2 .bi.wd::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,4,3,.92) 0%,rgba(5,4,3,.6) 42%,rgba(5,4,3,.2) 100%),linear-gradient(0deg,rgba(5,4,3,.7),transparent 35%)}
html.anim .s-flow .beat.k2 .wd-dots{position:absolute;left:50%;bottom:4svh;transform:translateX(-50%);z-index:3}
html.anim .s-flow .beat.k2 .bt{position:relative;z-index:2}
@media(max-width:1050px){
 html.anim .s-flow .beat.k2{align-items:end;padding:0}
 html.anim .s-flow .beat.k2 .bt{align-self:end;padding-bottom:12svh;text-align:center}
 html.anim .s-flow .beat.k2 .bi.wd::after{background:linear-gradient(0deg,rgba(5,4,3,.95) 0%,rgba(5,4,3,.6) 45%,rgba(5,4,3,.25) 100%)}
 html.anim .s-flow .beat.k2 .bi.wd{opacity:calc(var(--ee)*.78*(1 - var(--x)))}
}

/* v66: no stranded single words in headlines or paragraphs */
.giant,.frost-h,h2,h3{text-wrap:balance}
.bs,.tiers-head p,.plat-head p,.mx-p p,.vidd-head p{text-wrap:pretty}

/* v66: gold lettering loops with no visible seam. Every gradient starts and ends on the same colour, and each loop moves exactly one tile. */
html em,html .workshop-art i,html .giant em .w,html .s-flow .beat.k0 .bts .giant em{background-image:linear-gradient(100deg,#a47f34 0%,#f6dc98 24%,#fff3cf 40%,#e3c27a 58%,#b88a38 78%,#a47f34 100%);background-size:260% 100%;background-repeat:repeat-x;animation:goldflow 7s linear infinite}
@keyframes goldflow{from{background-position:0 0}to{background-position:162.5% 0}}
html .eyebrow,html .tiny{background-repeat:repeat-x;animation:goldflow3 9s linear infinite}
@keyframes goldflow3{from{background-position:0 0}to{background-position:183.3333% 0}}
html .kit-art b{background-repeat:repeat-x;animation:goldflow4 8s linear infinite}
@keyframes goldflow4{from{background-position:0 0}to{background-position:171.4286% 0}}
@keyframes subShine{from{background-position:0 0}to{background-position:183.3333% 0}}
@keyframes bbGold{from{background-position:0 0}to{background-position:162.5% 0}}
@keyframes lrText{from{background-position:0 0}to{background-position:183.3333% 0}}
html .end-in p.end-sub,html .lr-btn b,html .product.b-guide .pf h3 a{background-repeat:repeat-x}

/* v67: the work background is clean: one soft darkened picture, no blurred colour wash, no hard edges */
html.anim .s-flow .beat.k2 .wd-s,html.anim .s-flow .beat.k2 .wd-deck{background:none!important;border:0!important;outline:0!important}
html.anim .s-flow .beat.k2 .wd-s::before,html.anim .s-flow .beat.k2 .wd-s::after,html.anim .s-flow .beat.k2 .wd-deck::before,html.anim .s-flow .beat.k2 .wd-deck::after{display:none!important;content:none!important}
html.anim .s-flow .beat.k2 .wd-s img,html.anim .s-flow .beat.k2 .wd-s video{filter:saturate(.75) brightness(.8)!important;mix-blend-mode:normal!important;transform:none!important}
html.anim .s-flow .beat.k2 .bi.wd{filter:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html.anim .s-flow .beat.k2 .wd-more{background:none!important}

/* v68: section-head side text is easy to read */
.section-head>p,.section-head p{font-size:clamp(17px,1.35vw,21px)!important;line-height:1.55!important;color:#ece3cc!important;max-width:40ch;text-wrap:pretty}
@media(max-width:900px){.section-head>p,.section-head p{font-size:17px!important;max-width:none}}

/* v69 reel: Bruce loop shows the whole frame, sharp; better-output note */
.rb-minis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:auto;align-items:stretch}
.rb-minis .rb-mini.tall{aspect-ratio:864/496;max-height:none}
.rb-minis .rb-mini.tall video{object-fit:contain;background:#07050a;image-rendering:auto;filter:none;transform:none}
@media(max-width:700px){.rb-minis{grid-template-columns:1fr}.rb-minis .rb-mini:not(.tall){aspect-ratio:16/10}.rb-minis .rb-mini.tall{aspect-ratio:864/496}}
.rb-better{margin-top:clamp(28px,4vw,52px);padding:clamp(20px,3vw,36px);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.28)}
.rb-better h3{font-size:clamp(26px,4vw,48px);line-height:1.02;letter-spacing:-.04em;margin:8px 0 10px}
.rb-better h3 em{font-style:italic;color:#ffe29a}
.rb-better p{max-width:62ch;color:#d8cfb8;font-size:clamp(15px,1.4vw,17px);line-height:1.55;margin:0 0 16px;text-wrap:pretty}
.rb-better ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rb-better 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)}

.rb-why .rb-wp{max-width:62ch;color:#d8cfb8;font-size:clamp(15px,1.4vw,17px);line-height:1.6;margin:0;text-wrap:pretty}

/* v70 work section: calm static row of small cream logos, no sticky scroll, no placeholder tiles */
.anim .work,.work{height:auto!important}
.work .wk-stage,.anim .work .wk-stage{position:static!important;height:auto!important;display:block!important;text-align:center;padding:clamp(70px,10vw,130px) clamp(20px,5vw,80px)!important;overflow:visible!important}
.work .wk-right,.work .wk-idx{display:none!important}
.work .wk-left .eyebrow,.work .wk-lead,.work .wk-cta,.work .wk-logos{opacity:1!important;transform:none!important;filter:none!important}
.work .wk-left .eyebrow{display:block;margin:0 0 clamp(26px,4vw,44px)}
.work .wk-logos{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,4vw,44px) clamp(30px,5vw,64px);min-height:0!important;max-width:1000px;margin:0 auto}
.anim .work .wk-logo,.work .wk-logo{position:static!important;opacity:1!important;transform:none!important;filter:none!important;transition:none;display:block;padding:0}
.work .wk-mark.img{-webkit-mask:none!important;mask:none!important;background:none!important;width:auto!important;aspect-ratio:auto!important;animation:none!important;filter:none!important}
html .work .wk-mark .wk-ic,html .work .wk-mark.named .wk-ic{height:clamp(28px,3.4vw,46px)!important;width:calc(clamp(28px,3.4vw,46px)*var(--ar,2))!important;max-width:min(78vw,380px)!important;max-height:none!important;margin:0 auto!important;background:#d9ccae!important;opacity:.9}
html .work .wk-mark .wk-t{font-size:clamp(22px,2.6vw,34px)!important;animation:none!important;background:none!important;-webkit-text-fill-color:#d9ccae;color:#d9ccae;filter:none!important}
.work .wk-lead{margin:clamp(30px,4vw,48px) auto 18px;max-width:46ch;text-align:center}
.work .wk-cta{justify-content:center}
.work .wk-brand{display:none!important}

/* v71 packaging: each piece once, still and centred, room to add more */
.pm-row{overflow:visible;margin:clamp(22px,3vw,34px) 0 0;-webkit-mask-image:none;mask-image:none}
.pm-track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center}
.pm{height:auto;width:min(100%,clamp(260px,30vw,420px));aspect-ratio:4/3}
.pm figcaption{padding:34px 16px 14px}

/* v72 what we do: orientation block */
.wwd{padding:clamp(56px,9vw,110px) 0 clamp(30px,5vw,60px);position:relative;z-index:2}
.wwd h2{font-size:clamp(34px,5.4vw,72px);line-height:1;letter-spacing:-.04em;margin:10px 0 14px;color:#fff6dd;text-wrap:balance}
.wwd h2 em{font-style:italic;color:#ffe29a}
.wwd-lead{max-width:56ch;color:#d8cfb8;font-size:clamp(15px,1.5vw,18px);line-height:1.55;margin:0 0 clamp(22px,3vw,36px);text-wrap:pretty}
.wwd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.wwd-grid article{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(227,194,122,.26)}
.wwd-grid small{font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#ffe29a}
.wwd-grid b{font-size:clamp(19px,1.8vw,23px);color:#fff6dd;letter-spacing:-.02em;line-height:1.15}
.wwd-grid span{color:#cfc6ae;font-size:15px;line-height:1.5;flex:1}
.wwd-grid a{color:#ffe29a;font-weight:700;font-size:14px;text-decoration:none}
.wwd-grid a:hover{text-decoration:underline}

/* v73 client logos: no panel, each mark floats in on the page background */
.pkg-clients{background:none!important;box-shadow:none!important;padding:0!important;text-align:center}
.pkg-clients>img{display:none}
.pc-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(22px,3.4vw,40px) clamp(28px,4.4vw,56px);max-width:980px;margin:22px auto 0}
.pc-row img{height:clamp(30px,3.6vw,46px);width:auto;max-width:42vw;opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.pc-row.in img{opacity:.92;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.pc-row img{opacity:.92;transform:none;filter:none;transition:none}}
.pkg-clients .pc-row img{display:block;width:auto;margin:0;border-radius:0}

/* v74 work section: no buttons, text fits every screen, small marks */
.work .wk-cta{display:none!important}
.work .wk-stage{padding-left:clamp(20px,6vw,80px)!important;padding-right:clamp(20px,6vw,80px)!important}
.work .wk-left .eyebrow{font-size:clamp(10px,1.2vw,12px);letter-spacing:.16em;line-height:1.5;max-width:30em;margin-left:auto;margin-right:auto;text-wrap:balance}
.work .wk-lead{font-size:clamp(15px,1.5vw,18px)!important;line-height:1.55;max-width:min(46ch,100%);text-wrap:balance}
html .work .wk-mark .wk-ic,html .work .wk-mark.named .wk-ic{height:clamp(24px,2.8vw,38px)!important;width:calc(clamp(24px,2.8vw,38px)*var(--ar,2))!important;max-width:min(60vw,300px)!important}

/* gold line: no long thin line left hanging behind; only the soft comet tail follows the dot and fades out */
.storyline .trail{stroke-opacity:0!important;display:none}

/* Liquid Glass vs Bespoke Glass comparison */
.lgc{display:grid;margin:clamp(20px,3vw,34px) auto 0;max-width:980px;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(227,194,122,.3);background:rgba(255,255,255,.03)}
.lgc-r{display:grid;grid-template-columns:minmax(110px,.7fr) 1.2fr 1.5fr;gap:clamp(10px,2vw,24px);padding:14px clamp(14px,2vw,22px);border-top:1px solid rgba(227,194,122,.16);align-items:start}
.lgc-r:first-child{border-top:0}
.lgc-h{font:800 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a89f88}
.lgc-h span:last-child{color:#ffe29a}
.lgc-r b{color:#fff6dd;font-size:15px}
.lgc-r span{color:#cfc6ae;font-size:14.5px;line-height:1.45}
.lgc-r span:last-child:not(.lgc-h span){color:#f2e6c4}
@media(max-width:700px){.lgc-r{grid-template-columns:1fr;gap:6px}.lgc-h{display:none}.lgc-r span:nth-of-type(1)::before{content:"Liquid Glass: ";color:#8f8670;font-weight:700}.lgc-r span:nth-of-type(2)::before{content:"Bespoke: ";color:#ffe29a;font-weight:700}}

/* v75: the making-of video fills the background of "how it's made" (portrait clip, centred) */
html.anim .s-flow .beat.k2 .wd-s video{object-position:50% 50%!important}
html.anim .s-flow .beat.k2 .wd-dots{display:none!important}

/* strength cards: pane sits over the busy city lights so the frost difference is easy to see */
.str-ph{background-position:50% 100%;place-items:end center;padding-bottom:5%}
.str-pane{-webkit-backdrop-filter:blur(calc(var(--fr)*var(--fr)*42px)) saturate(185%);backdrop-filter:blur(calc(var(--fr)*var(--fr)*42px)) saturate(185%);background:linear-gradient(150deg,rgba(255,255,255,calc(.04 + var(--fr)*var(--fr)*.42)),rgba(255,255,255,calc(.02 + var(--fr)*.12)) 55%,rgba(227,174,70,calc(.04 + var(--fr)*var(--fr)*.4)))}

/* example buttons: glossy gel look, and a colour picker so people see gold is only our look */
.gx .ex-card .m-btn{border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -6px 10px rgba(0,0,0,.25),0 0 0 .18em rgba(var(--b,227,174,70),.22),0 0 1.2em rgba(var(--b,227,174,70),.55),0 8px 14px -6px rgba(0,0,0,.55)!important;font-weight:800;letter-spacing:.01em}
.gx-col{display:grid;justify-items:center;gap:10px;margin:14px auto 6px;text-align:center}
.gx-col p{margin:0;font-size:14.5px;line-height:1.5;color:#d8cfb8;max-width:52ch;text-wrap:balance}
.gx-col b{color:#fff6dd}
.gx-sw{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gx-sw button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(120% 140% at 30% 12%,#fff 0,rgba(var(--c),1) 45%,rgba(var(--c),.7) 100%);box-shadow:inset 0 1.5px 1px #fff9,0 0 0 1px rgba(255,255,255,.25),0 6px 12px -5px rgba(var(--c),.8);transition:transform .2s,box-shadow .2s}
.gx-sw button[aria-pressed=true]{transform:scale(1.14);box-shadow:inset 0 1.5px 1px #fff9,0 0 0 2px #fff,0 0 16px rgba(var(--c),.8)}
.gx-sw button:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* build your glass: weather is a Bespoke Glass feature only */
.bd-wxnote{display:none;margin:0 0 12px;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.45;color:#f4e7c4;background:rgba(227,174,70,.14);box-shadow:inset 0 0 0 1px rgba(246,220,152,.5)}
.bd-wxnote b{color:#fff6dd}
.bd:not([data-m=glass]) .bd-wxnote{display:block}
.bd:not([data-m=glass]) .bd-wx,.bd:not([data-m=glass]) .bd-wh,.bd:not([data-m=glass]) .bd-l2{opacity:.32;pointer-events:none;filter:grayscale(1)}
.bd:not([data-m=glass]) #bdWx{display:none!important}

/* unfinished workbooks: clear "coming soon", no green free button */
.product-meta strong a.is-soon{background:rgba(255,255,255,.06)!important;color:#e9dcc0!important;box-shadow:inset 0 0 0 1px rgba(246,220,152,.45)!important;text-shadow:none!important;filter:none!important;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.product-meta strong a.is-soon::after,.product-meta strong a.is-soon i{display:none!important}

/* weather lab: collapsible info so the panel stays short and calm */
.wxl-fold{margin-top:14px;border-radius:16px;background:rgba(255,236,190,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.24);overflow:hidden}
.wxl-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 16px;font:700 13.5px/1.3 "BBB Sans",Arial,sans-serif;color:#f6dc98;letter-spacing:.01em}
.wxl-fold>summary::-webkit-details-marker{display:none}
.wxl-fold>summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid #d8c48b;border-bottom:2px solid #d8c48b;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.wxl-fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.wxl-fold>summary:focus-visible{outline:2px solid #f6dc98;outline-offset:-2px}
.wxl-fold .wxl-sln{margin:0;padding:0 16px 10px}
.wxl-fold .wxl-how{margin:0;border:0;border-radius:0;background:none;padding:0 16px 14px}
.wxl-fold .wxl-why{margin:0;border-radius:0;box-shadow:none;background:none;padding:0 16px 14px}
.wxl-fold .wxl-why.is-closed>:not(.wxl-wh){display:revert!important}
.wxl-fold .wxl-why .wxl-wh,.wxl-fold .wxl-more{display:none!important}
.wxl-wx button[data-m=snow][aria-pressed=true]{background:linear-gradient(180deg,#fff,#bcd4f2)!important;color:#0e2240!important;box-shadow:0 0 0 2px #fff,0 0 22px rgba(200,225,255,.7)!important}
.wxl-wx button[data-m=snow][aria-pressed=true] *{color:#0e2240!important;stroke:#0e2240!important}
/* v76 gel hint tidy */
.gel-try{display:flex!important;align-items:center;justify-content:center;gap:10px;margin:18px auto 0!important;padding:0!important;max-width:100%;text-align:center;text-transform:none!important;letter-spacing:.01em!important;font:600 14px/1.4 "BBB Sans",Arial,sans-serif!important;color:#cfc6b0!important;opacity:.85}
.gel-try i{flex:none;width:10px!important;height:10px!important;margin:0!important;position:static!important;box-shadow:0 0 0 5px rgba(246,220,152,.18)}
/* v77 platforms redesign */
.plat-grid{grid-template-columns:repeat(5,1fr)!important;gap:12px!important}
.pl{position:relative;padding:18px 16px!important;gap:6px!important;overflow:hidden;transition:transform .35s,border-color .35s}
.pl:hover{transform:translateY(-4px);border-color:rgba(227,194,122,.6)}
.pl-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;margin-bottom:6px;color:#f3dca0;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(246,220,152,.4),0 8px 22px rgba(0,0,0,.35);animation:plFloat 5s ease-in-out infinite}
.pl:nth-child(2) .pl-ic{animation-delay:-1s}.pl:nth-child(3) .pl-ic{animation-delay:-2s}.pl:nth-child(4) .pl-ic{animation-delay:-3s}.pl:nth-child(5) .pl-ic{animation-delay:-4s}
.pl-ok .pl-ic{color:#8cf0b8;box-shadow:inset 0 0 0 1px rgba(90,235,150,.5),0 0 22px rgba(70,230,140,.25)}
.pl-no .pl-ic{color:#b8b09c;opacity:.8}
.pl h4{font-size:16px!important}.pl p{font-size:13.5px!important;line-height:1.45!important}
@keyframes plFloat{50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.pl-ic{animation:none}}
@media(max-width:980px){.plat-grid{grid-template-columns:repeat(2,1fr)!important}.pl:last-child{grid-column:1/-1}}
.plat-adapt{padding:18px 20px!important}.pa-note{font-size:13.5px!important;text-align:center;margin-top:14px!important}
.pa-row{grid-template-columns:repeat(3,1fr)!important}.pa strong{font-size:15px}.pa span{font-size:13px}
@media(max-width:640px){.pa-row{grid-template-columns:1fr!important}}
.tiers-head h3.frost-h{font-size:clamp(20px,3.6vw,40px)!important;line-height:1.15;text-wrap:balance}
@media(min-width:900px){.tiers-head h3.frost-h{white-space:nowrap}}
/* v78 reel minis fix */
.rb-minis .rb-mini,.rb-minis .rb-mini.tall{aspect-ratio:16/10!important;min-height:0}
.rb-minis .rb-mini.tall video{object-fit:cover}
.rb-minis{margin-top:0!important}
/* v79 packaging: show full artwork, specific captions, placeholders, logo hover */
.pm{aspect-ratio:auto!important;display:flex;flex-direction:column;background:#0a0806}
.pm img{flex:1;min-height:0;height:clamp(210px,24vw,320px)!important;object-fit:contain!important;background:radial-gradient(80% 70% at 50% 40%,#1a140c,#070605)}
.pm figcaption{position:static!important;padding:12px 14px 14px!important;background:none!important;text-align:center;font-size:11px!important}
.pm{width:min(100%,clamp(240px,26vw,360px))!important}
.pm-ph{border:1.5px dashed rgba(227,194,122,.35);background:rgba(255,255,255,.02)!important;box-shadow:none!important;min-height:clamp(250px,28vw,380px)}
.pm-ph div{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;padding:20px;text-align:center}
.pm-ph i{width:46px;height:46px;border-radius:14px;border:1.5px solid rgba(246,220,152,.5);position:relative}
.pm-ph i::before,.pm-ph i::after{content:"";position:absolute;left:50%;top:50%;background:#f6dc98;transform:translate(-50%,-50%)}
.pm-ph i::before{width:18px;height:2px}.pm-ph i::after{width:2px;height:18px}
.pm-ph b{color:#fff1c8;font-size:15px}.pm-ph small{color:#a99f88;font-size:12px}
.pc-row img{transition:opacity .9s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease!important;cursor:default}
.pc-row.in img:hover{transform:translateY(-6px) scale(1.12);filter:drop-shadow(0 8px 18px rgba(246,220,152,.55));opacity:1}
.pc-row.in img{animation:pcBob 6s ease-in-out infinite}
.pc-row.in img:nth-child(2n){animation-delay:-1.5s}.pc-row.in img:nth-child(3n){animation-delay:-3s}
@keyframes pcBob{50%{translate:0 -3px}}
@media(prefers-reduced-motion:reduce){.pc-row.in img{animation:none}}
/* v80 logo fan-out, no bear/glass card */
.bmo{--F:clamp(0,calc((var(--t,0) - .5)*2.2),1)}
html.anim .s-flow .beat.k0 .bmo{--F:clamp(0,calc((var(--t,0) - .5)*2.2),1)}
.bmo-stage{background:transparent!important;box-shadow:none!important;overflow:visible!important}
.bmo .bm1,.bmo .bm2{-webkit-mask-image:radial-gradient(70% 68% at 50% 50%,#000 55%,transparent 100%)!important;mask-image:radial-gradient(70% 68% at 50% 50%,#000 55%,transparent 100%)!important;background:transparent!important}
.bmo .bm4{opacity:var(--s2)!important;background:none!important}
.bmo .bm2{opacity:calc(var(--s1)*(1 - var(--s2)))!important}
.bmo .lgs{width:100%!important;aspect-ratio:1/1;position:relative}
.bmo .lg{--p:clamp(0,calc(var(--F)*1.5 - var(--c)*.5),1);left:16%!important;top:28%!important;inset:auto!important;width:68%!important;height:auto!important;aspect-ratio:971/634;padding:5%;box-sizing:border-box;border-radius:16px;
 background:linear-gradient(160deg,#1a1330,#0a0816);box-shadow:inset 0 0 0 1px rgba(246,220,152,.5),0 24px 44px -14px #000;
 opacity:clamp(0,calc(var(--p)*3),1)!important;z-index:calc(1 + var(--c)*10);
 transform:translateX(calc((var(--c) - .5)*2*30%*var(--p))) translateY(calc((var(--c) - .5)*(var(--c) - .5)*18%*var(--p))) rotate(calc((var(--c) - .5)*2*9deg*var(--p))) scale(calc(.9 + .1*var(--p)))!important;filter:none!important}
.bmo .lg0,.bmo .lg3{background:linear-gradient(160deg,#f4ead2,#d8c9a2)}
.bmo .lg4{box-shadow:inset 0 0 0 1.5px rgba(246,220,152,.9),0 0 40px rgba(180,120,255,.45),0 24px 44px -14px #000}
.bmo .bm4 p{margin-top:8px}
html:not(.anim) .bmo .bm2{opacity:1!important}
html:not(.anim) .bmo .bm4{display:none}
.bmo .bc3{opacity:calc(var(--s2)*(1 - var(--s3)))}
/* v81 how-its-made watch button + lightbox */
.wd-watch{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:13px 22px;border-radius:99px;border:0;cursor:pointer;font:800 14px/1 "BBB Sans",Arial,sans-serif;color:#1a1204;background:linear-gradient(110deg,#e0a43a,#ffe29a 50%,#f0b24a);box-shadow:0 10px 26px -8px rgba(240,178,74,.8);pointer-events:auto;position:relative;z-index:5;transition:transform .25s}
.wd-watch:hover{transform:translateY(-2px) scale(1.03)}.wd-watch svg{width:16px;height:16px;fill:currentColor}
.wd-lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:94vw;overflow:visible}
.wd-lb::backdrop{background:rgba(4,3,2,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wd-lb video{display:block;width:100%;max-height:82svh;border-radius:18px;background:#000;box-shadow:0 40px 100px -20px #000,0 0 0 1px rgba(227,194,122,.45),0 0 80px -20px rgba(227,174,70,.5)}
.wd-x{position:absolute;right:6px;top:-46px;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;font:400 26px/1 Arial;color:#fff1c8;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(246,220,152,.4)}
/* v82 clean comparison */
.cm{max-width:960px;margin:34px auto 0;border-radius:26px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px rgba(227,194,122,.3),0 40px 80px -40px #000}
.cm-h,.cm-r{display:grid;grid-template-columns:minmax(130px,.8fr) 1fr 1.15fr;align-items:center}
.cm-h{padding:22px 0 18px}
.cm-c{display:grid;justify-items:center;gap:4px;text-align:center;padding:0 12px}
.cm-c b{font:800 15px/1.2 "BBB Sans",Arial,sans-serif;color:#fff}.cm-c small{font:600 12px/1.3 "BBB Sans",Arial,sans-serif;color:#a99f88}
.cm-bc b{color:#ffe29a}.cm-bc small{color:#d9c78f}
.cm-sw{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.06)),#59627a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cm-lg{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,226,154,.3),rgba(255,226,154,.06));box-shadow:inset 0 0 0 1px rgba(246,220,152,.7),0 0 24px rgba(227,174,70,.45)}
.cm-lg img{width:26px;height:26px;object-fit:contain}
.cm-r{padding:16px 0;border-top:1px solid rgba(227,194,122,.16);transition:background .3s}
.cm-r:hover{background:rgba(227,194,122,.06)}
.cm-r>b{display:flex;align-items:center;gap:12px;padding:0 20px;font:800 14.5px/1.2 "BBB Sans",Arial,sans-serif;color:#fff1c8}
.cm-r>b i{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(227,194,122,.12);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.cm-r>b svg{width:18px;height:18px;fill:none;stroke:#f3dca0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cm-r>span{display:flex;align-items:center;gap:10px;padding:0 14px;font:600 14px/1.35 "BBB Sans",Arial,sans-serif;color:#d9cfb5}
.cm-r>span svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;box-sizing:border-box;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cm-y svg{stroke:#0b2a18;background:#6fe3a2}.cm-n svg{stroke:#cfc6b0;background:rgba(255,255,255,.12)}
.cm-n em{color:#a99f88}.cm-b em{color:#fff6dd;font-weight:700}.cm-b{background:rgba(227,174,70,.06);align-self:stretch;margin:-16px 0}
.cm-r>span em{font-style:normal}.cm-b{padding-top:16px!important;padding-bottom:16px!important}
@media(max-width:700px){.cm-h,.cm-r{grid-template-columns:1fr 1fr}.cm-h>span:first-child{display:none}.cm-r>b{grid-column:1/-1;padding:0 16px 10px}.cm-r{padding:14px 0}.cm-r>span{padding:0 12px;align-items:flex-start;font-size:13px}.cm-b{margin:0;padding:10px 12px!important;border-radius:12px;align-self:start}}
/* v83 scroll-driven rule cards */
.rr{position:absolute;left:5vw;bottom:max(24px,5svh);width:min(560px,90vw);z-index:2;opacity:var(--e)}
.rr-cap{display:block;font:700 10.5px/1.4 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#b8a77a;margin-bottom:12px}
.rr-stack{position:relative;height:min(190px,26svh);min-height:150px}
.rr-c{position:absolute;inset:0;padding:20px 22px;border-radius:20px;box-sizing:border-box;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.02)),rgba(14,10,6,.7);box-shadow:inset 0 0 0 1px rgba(227,194,122,.4),0 30px 60px -30px #000;opacity:0;transform:translateY(18px) scale(.97);filter:blur(4px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s;display:flex;flex-direction:column;gap:9px;justify-content:center}
.rr-c.on{opacity:1;transform:none;filter:none}
.rr-c small{font:800 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#e3c27a}
.rr-c b{font:800 clamp(18px,1.7vw,24px)/1.15 "BBB Sans",Arial,sans-serif;color:#fff6dd}
.rr-c p{margin:0;display:flex;align-items:flex-start;gap:10px;font:600 14px/1.35 "BBB Sans",Arial,sans-serif;color:#e8dfc6}
.rr-c p svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;box-sizing:border-box;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rr-y svg{stroke:#0b2a18;background:#6fe3a2}.rr-n svg{stroke:#cfc6b0;background:rgba(255,255,255,.14)}.rr-n{color:#a99f88!important}
.rr-c i{font-style:normal;font-weight:800;letter-spacing:.12em;font-size:10.5px;text-transform:uppercase;margin-right:8px;opacity:.75}
.rr-ticks{display:flex;gap:6px;margin-top:12px}
.rr-ticks i{flex:1;height:3px;border-radius:3px;background:rgba(246,220,152,.2);transition:background .4s,box-shadow .4s}
.rr-ticks i.on{background:#ffe29a;box-shadow:0 0 10px rgba(255,214,120,.7)}
html:not(.anim) .rr{display:none}
@media(max-width:760px){.rr{left:50%;transform:translateX(-50%);bottom:max(18px,3svh);width:92vw}.rr-cap{text-align:center}}
.cm,.cm *{font-family:"BBB Sans",Arial,Helvetica,sans-serif!important}
.cm-note{margin:0;padding:16px 22px;border-top:1px solid rgba(227,194,122,.16);font:600 13.5px/1.5 "BBB Sans",Arial,sans-serif!important;color:#cfc6b0;text-align:center;background:rgba(227,194,122,.04)}
/* v84 comparison polish + tier intro */
.cm{margin-bottom:clamp(48px,7vw,88px)!important;background:radial-gradient(70% 90% at 80% 0%,rgba(227,174,70,.12),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01))!important}
.cm-h{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.cm-sw{width:56px!important;height:56px!important;border-radius:17px!important;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(255,255,255,.06)),#4a5168!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 10px 24px -10px #000!important}
.cm-ap{width:26px;height:26px;display:block;background:#f2eee4;-webkit-mask:url(assets/logos/apple-mark.svg) center/contain no-repeat;mask:url(assets/logos/apple-mark.svg) center/contain no-repeat}
.cm-lg{width:56px!important;height:56px!important;border-radius:17px!important}.cm-lg img{width:34px!important;height:34px!important}
.cm-c b{font-size:17px!important}
.cm-r{padding:18px 0!important}.cm-r>span{font-size:15px!important}
.tier-intro{max-width:640px;margin:0 auto clamp(26px,4vw,44px);text-align:center}
.tier-intro h4{margin:8px 0 10px;font:800 clamp(24px,3.2vw,38px)/1.1 "BBB Sans",Arial,sans-serif;letter-spacing:-.03em;color:#fff6dd}
.tier-intro p{margin:0;color:#d9cfb5;line-height:1.55;font-size:15.5px;text-wrap:pretty}
.tier-demo{position:relative}
.td-cap{position:absolute;left:14px;top:14px;padding:7px 11px;border-radius:99px;font:800 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;color:#fff6dd;text-shadow:0 1px 6px rgba(0,0,0,.7);z-index:3}
/* v85 platforms: one clear story */
.plat-devs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:6px 0 26px}
.pd{display:grid;justify-items:center;gap:10px;padding:20px 8px 16px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(227,194,122,.28);animation:plFloat 5s ease-in-out infinite;transition:box-shadow .3s}
.pd:hover{box-shadow:inset 0 0 0 1px rgba(246,220,152,.7),0 0 28px -6px rgba(227,174,70,.5)}
.pd:nth-child(2n){animation-delay:-1.4s}.pd:nth-child(3n){animation-delay:-2.8s}
.pd svg{width:44px;height:44px;fill:none;stroke:#f3dca0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pd em{font:800 13px/1 "BBB Sans",Arial,sans-serif;font-style:normal;color:#fff1c8}
.plat-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:10px;margin-bottom:22px}
.pf{padding:20px 20px 18px;border-radius:20px;background:rgba(227,194,122,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.28);display:grid;gap:8px;align-content:start}
.pf-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 14px/1 "BBB Sans",Arial,sans-serif;font-style:normal;color:#1a1204;background:linear-gradient(135deg,#ffe29a,#e3ae46)}
.pf b{font:800 17px/1.2 "BBB Sans",Arial,sans-serif;color:#fff6dd}.pf p{margin:0;font-size:14px;line-height:1.5;color:#d9cfb5}
.pf-ar{align-self:center;width:34px;height:2px;background:linear-gradient(90deg,rgba(227,174,70,.2),#e3ae46);position:relative;overflow:visible}
.pf-ar::after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid #e3ae46;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media(max-width:900px){.plat-devs{grid-template-columns:repeat(3,1fr)}.plat-flow{grid-template-columns:1fr}.pf-ar{width:2px;height:22px;justify-self:center;background:linear-gradient(180deg,rgba(227,174,70,.2),#e3ae46)}.pf-ar::after{right:-4px;top:auto;bottom:-1px;border-top:8px solid #e3ae46;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:0}}
.pa span{font-size:13.5px!important}
/* v85 logo fan: no cards, true fan, line fades */
.bmo .bm4 .lg,.bmo .lgs .lg{position:absolute!important}
.bmo .lg{padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;width:38%!important;left:31%!important;top:26%!important;
 filter:drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(246,220,152,.28))!important;
 transform:translateX(calc((var(--c) - .5)*2*88%*var(--p))) translateY(calc((var(--c) - .5)*(var(--c) - .5)*90%*var(--p) - var(--p)*8%)) rotate(calc((var(--c) - .5)*2*12deg*var(--p))) scale(calc(.9 + .1*var(--p)))!important}
.bmo .lg0{filter:brightness(1.7) saturate(1.25) drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(246,220,152,.35))!important}
.bmo .lg4{filter:drop-shadow(0 14px 22px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(180,120,255,.55))!important;scale:1.08}
.bmo .lgs{aspect-ratio:1/1.1!important}

/* v86 lighter key-art notes */
.rb-rules{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px!important;margin-top:18px!important}
.rb-rules li{padding:14px 16px!important;font-size:14px!important;line-height:1.4!important}
.rb-rules li b{display:block;margin-bottom:4px;font-size:15.5px!important}
.rb-better{padding:clamp(18px,2.4vw,26px)!important;margin-top:clamp(20px,3vw,32px)!important}
.rb-better h3{font-size:clamp(22px,3vw,34px)!important;margin:6px 0 8px!important}
.rb-better p{margin:0 0 12px!important;font-size:15px!important}
@media(max-width:760px){.rb-rules{grid-template-columns:1fr}}
/* v87 packaging expertise */
.pkg-head>p{max-width:62ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.pcaps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1040px;margin:26px auto 0;text-align:left}
.pcap{padding:20px 20px 18px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(227,194,122,.3);transition:transform .35s,box-shadow .35s}
.pcap:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(246,220,152,.7),0 20px 40px -20px rgba(227,174,70,.4)}
.pcap i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px;background:rgba(227,194,122,.12);box-shadow:inset 0 0 0 1px rgba(227,194,122,.4)}
.pcap svg{width:22px;height:22px;fill:none;stroke:#f3dca0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcap b{display:block;font:800 17px/1.2 "BBB Sans",Arial,sans-serif;color:#fff6dd;margin-bottom:10px}
.pcap ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pcap li{position:relative;padding-left:16px;font:600 14px/1.35 "BBB Sans",Arial,sans-serif;color:#dccfae}
.pcap li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#e3ae46;box-shadow:0 0 8px rgba(227,174,70,.7)}
@media(max-width:820px){.pcaps{grid-template-columns:1fr}}

/* v88: demo badge has no backing; gold line runs down the side and lights sections as it passes */
.lyr .pane .tiny,.mini-glass .tiny{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;border-radius:0!important;text-shadow:0 1px 8px rgba(0,0,0,.75)!important}
.td-cap{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important}
.wwd.lit,.tiers.lit,.plat.lit,.rb-why.lit,.pkg-clients.lit,.recipes.lit,.gl-uses.lit{box-shadow:inset calc(var(--lit)*3px) 0 0 rgba(247,214,120,calc(var(--lit)*.85)),inset calc(var(--lit)*70px) 0 90px -60px rgba(247,214,120,calc(var(--lit)*.16))}
.gl-new{max-width:34em;margin:14px auto 0;font:500 clamp(15px,1.5vw,18px)/1.5 "BBB Sans",Arial,sans-serif;color:rgba(255,246,221,.88);text-wrap:balance;text-align:center}

/* v89: weather lab only shows controls that do something; readable words on frost */
.wxl-sl[hidden],.wxl-none[hidden]{display:none!important}
.wxl-none{margin:0;padding:10px 12px;border-radius:12px;background:rgba(255,246,221,.06);color:#d3cab5;font:500 14px/1.5 "BBB Sans",Arial,sans-serif}
#wxlCard #wxlHead,#wxlCard #wxlSub,#wxlCard #wxlTag{text-shadow:0 0 14px rgba(5,8,18,.85),0 2px 4px rgba(5,8,18,.7)!important;letter-spacing:-.01em}
#wxlCard #wxlHead{line-height:1.05;font-weight:800}
#wxlCard #wxlHead em{font-weight:500}
#wxlCard{background-image:linear-gradient(180deg,rgba(6,10,22,.10),rgba(6,10,22,.34))}
/* v89: glass-uses cards keep moving, never freeze after drawing in */
.bp .ln{animation:bpLn 5s ease-in-out infinite;animation-delay:calc(var(--k,1)*.35s)}
.bp .ap-sheet{animation-duration:4.5s!important}
@keyframes bpLn{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes bpShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}

/* v90: gel header alive; chat bubble; tier cards each look like their own glass; layer tabs playful */
.glass-h-nb,.frost-h .nb{display:block}
.gel-h{font-size:clamp(34px,5vw,64px)!important;letter-spacing:-.03em}
.gel-h em{font-family:"BBB Serif",Georgia,serif;font-weight:400;background:linear-gradient(100deg,#ffd98a,#ff8fb8,#8fb8ff,#8fffd0,#ffd98a);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gelHue 7s linear infinite}
@keyframes gelHue{to{background-position:300% 0}}
.gel-chips{display:flex;gap:14px;justify-content:center;align-items:center;margin:6px 0 14px}
.gel-chips i{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:30px;padding:0 14px;border-radius:99px;font:800 12px "BBB Sans",Arial,sans-serif;color:#2a1700;font-style:normal;background:radial-gradient(120% 140% at 30% 18%,#fff 0,#ffe29a 28%,#e8a43a 70%);box-shadow:0 6px 18px rgba(240,170,60,.45),inset 0 -4px 8px rgba(160,70,0,.35),inset 0 2px 3px #fff;animation:gelBob 3.2s ease-in-out infinite}
.gel-chips .gc2{background:radial-gradient(120% 140% at 30% 18%,#fff 0,#bff5e6 28%,#3ccf9f 70%);box-shadow:0 6px 18px rgba(60,200,160,.45),inset 0 -4px 8px rgba(0,100,80,.35),inset 0 2px 3px #fff;animation-delay:-.6s;width:56px}
.gel-chips .gc2 u{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);margin-left:14px;animation:gelSlide 2.6s ease-in-out infinite}
.gel-chips .gc3{background:radial-gradient(120% 140% at 30% 18%,#fff 0,#ffd0e6 28%,#f0589a 70%);box-shadow:0 6px 18px rgba(240,88,154,.45),inset 0 -4px 8px rgba(120,0,60,.35),inset 0 2px 3px #fff;animation-delay:-1.2s;width:120px;justify-content:flex-start}
.gel-chips .gc3 u{display:block;height:12px;border-radius:99px;background:#fff;opacity:.85;animation:gelFill 3.2s ease-in-out infinite}
.gel-chips .gc4{background:radial-gradient(120% 140% at 30% 18%,#fff 0,#cfe0ff 28%,#5a86f0 70%);color:#fff;box-shadow:0 6px 18px rgba(90,134,240,.45),inset 0 -4px 8px rgba(0,30,120,.35),inset 0 2px 3px #fff;animation-delay:-1.8s}
.gel-chips .gc5{width:34px;min-width:34px;height:34px;padding:0;border-radius:50%;background:radial-gradient(120% 140% at 30% 18%,#fff 0,#e6cfff 28%,#9a5af0 70%);box-shadow:0 6px 18px rgba(154,90,240,.45),inset 0 -4px 8px rgba(60,0,120,.35),inset 0 2px 3px #fff;animation-delay:-2.4s}
@keyframes gelBob{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-7px) scale(.96,1.06)}55%{transform:translateY(0) scale(1.08,.9)}75%{transform:translateY(-2px) scale(.99,1.02)}}
@keyframes gelSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes gelFill{0%{width:10%}70%,100%{width:92%}}
.chat-wrap{margin:14px 0 0;display:flex;justify-content:center}
.chat-b{position:relative;display:inline-block;max-width:34em;padding:14px 20px;border-radius:22px 22px 22px 6px;background:linear-gradient(160deg,rgba(255,236,190,.22),rgba(255,236,190,.08));box-shadow:inset 0 0 0 1px rgba(246,220,152,.45),0 10px 30px rgba(0,0,0,.4);animation:cbPop 9s ease-in-out infinite;transform-origin:0 100%}
.chat-b .cb-t{display:block;color:#fff6dd;font:700 clamp(15px,1.6vw,18px)/1.4 "BBB Sans",Arial,sans-serif;animation:cbText 9s ease-in-out infinite}
.cb-dots{position:absolute;left:18px;top:50%;translate:0 -50%;display:flex;gap:5px;animation:cbDots 9s ease-in-out infinite}
.cb-dots u{width:8px;height:8px;border-radius:50%;background:#ffe29a;animation:cbDot .9s ease-in-out infinite}
.cb-dots u:nth-child(2){animation-delay:.15s}.cb-dots u:nth-child(3){animation-delay:.3s}
@keyframes cbDot{50%{transform:translateY(-5px);opacity:.5}}
@keyframes cbDots{0%,2%{opacity:0}6%,26%{opacity:1}32%,100%{opacity:0}}
@keyframes cbText{0%,30%{opacity:0;transform:translateY(6px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cbPop{0%{transform:scale(.6);opacity:0}6%{transform:scale(1,1);opacity:1}30%{transform:scale(1,1)}36%{transform:scale(1.04,.96)}42%,92%{transform:scale(1)}100%{transform:scale(.96);opacity:.0}}
@media(prefers-reduced-motion:reduce){.chat-b,.chat-b .cb-t,.cb-dots,.gel-h em,.gel-chips i{animation:none!important}.chat-b .cb-t{opacity:1}.cb-dots{display:none}}
/* tiers: each card shows its own glass idea */
.tier-demo .td-pane{overflow:hidden}
.t-b .td-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:tdSweep 5s ease-in-out infinite}
@keyframes tdSweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.t-d .td-pane{animation:tdLift 6s ease-in-out infinite;box-shadow:0 22px 40px -8px rgba(90,40,200,.7),0 0 0 1px rgba(255,255,255,.4),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -14px 26px rgba(40,0,120,.45)}
.t-d .td-pane::before{content:"";position:absolute;left:10%;right:10%;top:-30%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent);animation:tdGlint 6s ease-in-out infinite}
@keyframes tdLift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)}}
@keyframes tdGlint{0%,100%{transform:translateX(-30%)}50%{transform:translateX(30%)}}
.t-a .td-pane::before{content:"";position:absolute;inset:-20% 0 0;background:repeating-linear-gradient(104deg,transparent 0 14px,rgba(210,225,255,.35) 14px 15px,transparent 15px 31px);animation:tdRain 2.6s linear infinite;opacity:.8}
.t-a .td-pane::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.45) 0 4px,transparent 5px),radial-gradient(circle at 45% 78%,rgba(255,255,255,.4) 0 3px,transparent 4px);animation:tdBead 4s ease-in-out infinite}
@keyframes tdRain{to{background-position:-40px 60px;transform:translateY(8%)}}
@keyframes tdBead{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(5px)}}
.t-d .td-pane b,.t-a .td-pane b,.t-b .td-pane b{position:relative;z-index:2}
.t-d .td-pane{background:linear-gradient(155deg,rgba(140,90,255,.55),rgba(40,20,120,.7))}
/* layer tabs: playful, not a block of identical buttons */
.lx-tabs{display:flex!important;flex-wrap:wrap;gap:10px!important}
.lx-tabs button{flex:0 0 auto;border-radius:99px!important;transition:translate .35s cubic-bezier(.3,1.8,.5,1),box-shadow .3s}
.lx-tabs button:hover{translate:0 -3px}
.lx-tabs button[data-f=bg]{--c:90,130,255}.lx-tabs button[data-f=panel]{--c:200,110,255}.lx-tabs button[data-f=btn]{--c:255,170,70}
.lx-tabs button[data-f]:not([data-f=all]){box-shadow:0 0 0 1px rgba(var(--c),.55),0 0 18px rgba(var(--c),.25)}
.lx-tabs button[aria-selected=true]:not([data-f=all]){box-shadow:0 0 0 2px rgba(var(--c),.9),0 0 30px rgba(var(--c),.6)}
.lx-hit{animation:lxPing 2.4s ease-in-out infinite}
@keyframes lxPing{50%{filter:drop-shadow(0 0 10px rgba(255,226,154,.7))}}
.lx-col,.lx-info{border:0!important;background:none!important;box-shadow:none!important;padding-left:0!important}
.lx-col{border-left:3px solid rgba(246,220,152,.5)!important;padding-left:14px!important}
.gel-opt{margin:10px 0 0;font:500 13.5px/1.5 "BBB Sans",Arial,sans-serif;color:#d3cab5;max-width:34em}

/* v91: one Coming soon look everywhere; masterpiece beat before the timeline */
.product-meta strong a.is-soon,.is-soon{display:inline-block;padding:12px 20px!important;border-radius:999px!important;border:0!important;outline:0!important;text-decoration:none!important;font:700 13px/1 "BBB Sans",Arial,sans-serif!important;letter-spacing:.2em!important;text-transform:uppercase;color:#1a1204!important;background:linear-gradient(180deg,#ffe9a8,#e3b955)!important;box-shadow:0 12px 30px -12px rgba(246,200,90,.7)!important;text-shadow:none!important}
.mp-say{min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12vh 24px;position:relative;z-index:2}
.mp-say h2{font:800 clamp(34px,6.4vw,92px)/1.02 "BBB Sans",Arial,sans-serif;letter-spacing:-.035em;color:#fff6dd;margin:0}
.mp-say h2 em{font-family:"BBB Serif",Georgia,serif;font-weight:400;background:linear-gradient(100deg,#ffd98a,#f6dc98,#e3b04a,#ffd98a);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gelHue 8s linear infinite}
.mp-k{font:800 12px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.3em;color:#c9a24a;margin:0 0 22px}
.mp-s{font:500 clamp(15px,1.5vw,19px)/1.5 "BBB Sans",Arial,sans-serif;color:#d3cab5;margin:26px 0 0;max-width:30em}

/* v92: rail that always shows where you are in the story; livelier rule cards */
.flow-rail{position:fixed;left:max(14px,1.6vw);top:14vh;height:72vh;width:2px;z-index:6;pointer-events:none;opacity:0;transition:opacity .45s;--p:0}
.fr-l{position:absolute;inset:0;background:rgba(246,220,152,.2);border-radius:2px}
.fr-l::after{content:"";position:absolute;left:0;top:0;width:100%;height:calc(var(--p)*100%);background:linear-gradient(180deg,rgba(227,174,70,.2),#ffe9a8);box-shadow:0 0 12px rgba(255,214,120,.7)}
.fr-d{position:absolute;left:-6px;top:calc(var(--p)*100% - 7px);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe8,#e3ae46);box-shadow:0 0 0 5px rgba(255,214,120,.18),0 0 22px 5px rgba(255,200,90,.65)}
.rr{opacity:clamp(0,calc(var(--e,1)*2.5),1)!important}
.rr-stack{counter-reset:rr}
.rr-c{counter-increment:rr;background:linear-gradient(150deg,hsla(var(--h,40),75%,55%,.30),rgba(12,9,6,.82) 70%)!important;box-shadow:inset 0 0 0 1px hsla(var(--h,40),80%,70%,.55),0 30px 60px -30px #000!important;overflow:hidden}
.rr-c::after{content:counter(rr,decimal-leading-zero);position:absolute;right:16px;top:6px;font:900 64px/1 "BBB Sans",Arial,sans-serif;color:hsla(var(--h,40),80%,75%,.16)}
.rr-c:nth-child(1){--h:40}.rr-c:nth-child(2){--h:200}.rr-c:nth-child(3){--h:275}.rr-c:nth-child(4){--h:340}.rr-c:nth-child(5){--h:160}.rr-c:nth-child(6){--h:20}.rr-c:nth-child(7){--h:120}
.rr-y{padding:8px 12px;border-radius:14px 14px 14px 4px;background:rgba(111,227,162,.16);box-shadow:inset 0 0 0 1px rgba(111,227,162,.35)}
.rr-n{padding:2px 12px}.rr-n span{text-decoration:line-through;text-decoration-color:rgba(255,140,140,.6)}
.rr-cap{color:#e3c27a!important}

/* v93 key-art section */
.rb-hint{margin:-4px 0 14px;font:600 14px/1.4 "BBB Sans",Arial,sans-serif;color:#e3c27a}.rb-hint b{color:#fff6dd}
.rb-rules{counter-reset:rbn}.rb-rules li{position:relative;padding-top:46px!important;counter-increment:rbn}
.rb-rules li::before{content:counter(rbn);position:absolute;left:16px;top:12px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:900 13px "BBB Sans",Arial,sans-serif;color:#1a1204;background:linear-gradient(135deg,#ffe29a,#e3ae46)}

/* v94 design moves */
.rb-how{margin-top:clamp(22px,3vw,36px)}
.rb-how h4{font:800 clamp(22px,2.8vw,32px)/1.1 "BBB Sans",Arial,sans-serif;margin:6px 0 8px;color:#fff6dd;letter-spacing:-.02em}
.rb-hp{margin:0 0 18px;max-width:40em;font:500 15px/1.5 "BBB Sans",Arial,sans-serif;color:#d3cab5}
.rb-moves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rb-moves li{display:grid;gap:8px;align-content:start;padding:14px 14px 18px;border-radius:20px;background:rgba(227,194,122,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.28)}
.rb-moves b{font:800 16px/1.2 "BBB Sans",Arial,sans-serif;color:#fff6dd}.rb-moves span{font:500 13.5px/1.45 "BBB Sans",Arial,sans-serif;color:#d3cab5}
.mv{position:relative;height:96px;border-radius:14px;overflow:hidden;background:radial-gradient(90% 120% at 20% 20%,#7a5cc8,#2a1a55 55%,#e3a64a 120%)}
.mv i,.mv u{position:absolute;display:block;text-decoration:none}
.mv1 i{left:14%;top:26%;width:50%;height:44%;border-radius:99px;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);animation:mvShape 5s ease-in-out infinite}
.mv1 u{right:10%;top:22%;width:26%;height:56%;border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
@keyframes mvShape{0%,100%{width:50%;border-radius:99px}50%{width:70%;border-radius:14px}}
.mv2 i{left:10%;right:10%;top:30%;height:40%;border-radius:12px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.mv2 u{left:18%;top:36%;font:900 26px/1 "BBB Sans",Arial,sans-serif;color:#fff}
.mv3 i{left:14%;right:14%;top:24%;bottom:24%;border-radius:16px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,236,170,.9),0 0 20px rgba(255,214,120,.6);animation:mvGlow 3.4s ease-in-out infinite}
@keyframes mvGlow{50%{box-shadow:inset 0 0 0 2px rgba(255,255,255,1),0 0 34px rgba(255,214,120,.95)}}
.mv4{animation:mvHue 6s linear infinite}
.mv4 i{left:14%;right:14%;top:26%;bottom:26%;border-radius:14px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
@keyframes mvHue{to{filter:hue-rotate(360deg)}}
@media(max-width:900px){.rb-moves{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.rb-moves{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.mv,.mv i{animation:none!important}}
/* v95 key-art section: more life */
.rb-rules li{background:linear-gradient(155deg,rgba(255,226,154,.14),rgba(255,255,255,.02))!important;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4)!important;overflow:hidden;transition:translate .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.rb-rules li:hover{translate:0 -6px;box-shadow:inset 0 0 0 1px rgba(255,226,154,.85),0 18px 40px -16px rgba(227,174,70,.6)!important}
.rb-rules li::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,236,190,.22) 50%,transparent 60%);transform:translateX(-130%);animation:rbShine 6s ease-in-out infinite}
.rb-rules li:nth-child(2)::after{animation-delay:-2s}.rb-rules li:nth-child(3)::after{animation-delay:-4s}
@keyframes rbShine{0%{transform:translateX(-130%)}40%,100%{transform:translateX(130%)}}
.rb-rules li::before{animation:rbPulse 3s ease-in-out infinite}
@keyframes rbPulse{50%{box-shadow:0 0 0 7px rgba(255,214,120,.18)}}
.rb-better ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:16px 0 0}
.rb-better li{padding:10px 18px;border-radius:99px;font:800 13.5px "BBB Sans",Arial,sans-serif;color:#2a1700;background:radial-gradient(120% 140% at 30% 18%,#fff 0,#ffe29a 30%,#e8a43a 78%);box-shadow:0 8px 20px -8px rgba(240,170,60,.6),inset 0 -3px 6px rgba(160,70,0,.3),inset 0 2px 3px #fff;animation:gelBob 3.6s ease-in-out infinite}
.rb-better li:nth-child(2){animation-delay:-.9s}.rb-better li:nth-child(3){animation-delay:-1.8s}.rb-better li:nth-child(4){animation-delay:-2.7s}
.rb-tog{animation:rbTog 3.6s ease-in-out infinite}
@keyframes rbTog{50%{box-shadow:0 0 0 6px rgba(255,214,120,.12)}}
@media(prefers-reduced-motion:reduce){.rb-rules li::after,.rb-rules li::before,.rb-better li,.rb-tog{animation:none!important}}

/* v96 packaging: stat lead, and rows of art that glide sideways as you scroll, soft fade at both edges */
.pkg-stat{display:grid;justify-items:center;gap:8px;margin:0 auto clamp(28px,5vw,56px);text-align:center}
.ps-n{display:inline-flex;align-items:flex-start;line-height:.9}
.ps-n b{font:900 clamp(88px,15vw,200px)/.9 "BBB Sans",Arial,sans-serif;letter-spacing:-.05em;background:linear-gradient(180deg,#fff6dd,#e3ae46 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ps-n sup{font:900 clamp(36px,6vw,80px)/1 "BBB Sans",Arial,sans-serif;color:#e3ae46;margin:.1em 0 0 .04em}
.pkg-stat p{margin:0;max-width:24em;font:700 clamp(18px,2.2vw,28px)/1.25 "BBB Sans",Arial,sans-serif;color:#fff6dd}
.pkg-stat small{font:500 12.5px/1.4 "BBB Sans",Arial,sans-serif;color:#9d927a;max-width:34em}
.pm-row{overflow:hidden!important;margin:clamp(22px,3vw,40px) calc(50% - 50vw) 0!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)!important}
.pm-track{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;width:max-content!important;gap:clamp(14px,2vw,26px);padding:6px clamp(20px,6vw,90px);animation:none!important;will-change:transform;transform:translate3d(var(--px,0px),0,0)}
.pm{flex:none!important;width:clamp(240px,24vw,340px)!important;height:auto!important}
@media(prefers-reduced-motion:reduce){.pm-row{overflow-x:auto!important}.pm-track{transform:none}}
/* v97 — Start free pinned until fully drawn */
html.anim .end{display:block!important;min-height:230vh!important;padding:0!important}
html.anim .end .end-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}
/* v100 — header: current page is shown by the gel bubble, not a solid fill */
header nav a[aria-current=page]{background:none!important;box-shadow:none!important;color:inherit!important;text-shadow:none!important}
header nav a[aria-current=page]::before{display:none!important}
/* v101 — "Your turn" blooms in */
html.anim .mp-say{position:relative;overflow:hidden}
html.anim .mp-say::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,130vw);aspect-ratio:1.6;translate:-50% -50%;scale:.4;opacity:0;border-radius:50%;background:radial-gradient(closest-side,rgba(227,194,122,.34),rgba(227,194,122,.1) 55%,transparent 75%);filter:blur(26px);pointer-events:none;transition:opacity 1.6s ease,scale 2.2s cubic-bezier(.2,.8,.2,1)}
html.anim .mp-say>*{position:relative;opacity:0;filter:blur(14px);translate:0 34px;scale:.97;transition:opacity 1.1s ease,filter 1.1s ease,translate 1.2s cubic-bezier(.2,.8,.2,1),scale 1.2s cubic-bezier(.2,.8,.2,1)}
html.anim .mp-say.in::before{opacity:1;scale:1}
html.anim .mp-say.in>*{opacity:1;filter:none;translate:0 0;scale:1}
html.anim .mp-say.in>.mp-k{transition-delay:.15s}html.anim .mp-say.in>h2{transition-delay:.4s}html.anim .mp-say.in>.mp-s{transition-delay:.8s}
@media(prefers-reduced-motion:reduce){html.anim .mp-say::before,html.anim .mp-say>*{transition:none;opacity:1;filter:none;translate:none;scale:1}}
/* v102 — one gold line: the left rail runs down and turns into the timeline */
html.anim .s-flow .tl{left:max(14px,1.6vw)}
.flow-rail{left:max(14px,1.6vw);top:14vh;height:calc(100svh - max(18px,3svh) - 46px - 14vh + 1px)}
.fr-d{opacity:calc(1 - clamp(0,(var(--p) - .985)*70,1))}
@media(max-width:700px){.flow-rail{height:calc(100svh - max(18px,3svh) - 40px - 14vh + 1px)}}
/* v103 — bigger logo fan; "It evolves" shows the bear mark */
.bmo .lg{width:66%!important;left:17%!important;top:14%!important;
 transform:translateX(calc((var(--c) - .5)*2*62%*var(--p))) translateY(calc((var(--c) - .5)*(var(--c) - .5)*70%*var(--p) - var(--p)*6%)) rotate(calc((var(--c) - .5)*2*11deg*var(--p))) scale(calc(.92 + .1*var(--p)))!important}
.bmo .lgs{aspect-ratio:1/1!important}
.tl-n3 .tl-th img{object-fit:contain!important;padding:6px;box-sizing:border-box}
/* v104 — shape step uses the real bear mark */
.bmo .bm2{object-fit:contain!important;padding:8%;box-sizing:border-box;filter:drop-shadow(0 0 28px rgba(227,174,70,.35))}
.tl-n2 .tl-th img{object-fit:contain!important;padding:6px;box-sizing:border-box;background:#120d06}
/* v105 — Bruce breakdown: eyes closed -> eyes open, scroll-driven */
.rb-why .rb-wp{max-width:56ch}
.bw{--w:0;position:relative;height:230vh;margin:30px 0 10px}
.bw-st{position:sticky;top:12vh;height:80vh;display:grid;align-items:center}
.bw-lay{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:28px;align-items:center}
.bw-fr{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#07050a;box-shadow:inset 0 0 0 1px rgba(227,194,122,.45),0 40px 70px -34px #000,0 0 60px -20px rgba(160,110,255,.45);cursor:ew-resize;touch-action:pan-y;scale:calc(.96 + var(--w)*.04)}
.bw-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.bw-b{clip-path:inset(0 calc((1 - var(--w))*100%) 0 0)}
.bw-ln{position:absolute;top:0;bottom:0;left:calc(var(--w)*100%);width:0;pointer-events:none;opacity:calc((1 - clamp(0,(var(--w) - .96)*25,1))*clamp(0,var(--w)*25,1))}
.bw-ln b{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,transparent,#fff1c2 18%,#fff1c2 82%,transparent);box-shadow:0 0 18px 4px rgba(255,214,120,.8)}
.bw-tag{position:absolute;top:14px;padding:7px 12px;border-radius:99px;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#fff3d2;background:rgba(10,8,5,.6);box-shadow:inset 0 0 0 1px rgba(227,194,122,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s}
.bw-t1{left:14px;opacity:calc(1 - var(--w)*1.6)}.bw-t2{right:14px;opacity:clamp(0,calc((var(--w) - .5)*2.4),1)}
.bw-pin{position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd98a);box-shadow:0 0 0 6px rgba(255,214,120,.22),0 0 22px 6px rgba(255,200,90,.7);opacity:clamp(0,calc((var(--w) - .45)*4),1);scale:clamp(.3,calc(.3 + (var(--w) - .45)*3),1)}
.bw-pin em{position:absolute;left:24px;top:-3px;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff3d2;font-style:normal;text-shadow:0 1px 8px #000;white-space:nowrap}
.bw-p1{left:39%;top:33%}.bw-p2{left:62%;top:29%}
.bw-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bw-steps li{padding:16px 18px;border-radius:18px;background:linear-gradient(160deg,rgba(60,46,22,.55),rgba(14,10,6,.9));box-shadow:inset 0 0 0 1px rgba(227,194,122,.2);opacity:.35;translate:0 8px;transition:opacity .5s,translate .5s,box-shadow .5s}
.bw-steps small{display:block;font:700 10.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#b99a58;margin-bottom:6px}
.bw-steps b{display:block;font-size:1.1rem;color:#fff3d2;margin-bottom:4px}.bw-steps span{font-size:.92rem;line-height:1.45;color:#cfc5ad}
.bw[data-s="1"] .bw-s1,.bw[data-s="2"] .bw-s1,.bw[data-s="2"] .bw-s2,.bw[data-s="3"] .bw-s1,.bw[data-s="3"] .bw-s2,.bw[data-s="3"] .bw-s3{opacity:1;translate:0 0}
.bw[data-s="1"] .bw-s1,.bw[data-s="2"] .bw-s2,.bw[data-s="3"] .bw-s3{box-shadow:inset 0 0 0 1.5px #e3c27a,0 0 30px -8px rgba(227,194,122,.5)}
@media(max-width:860px){.bw{height:200vh}.bw-st{top:10vh;height:84vh}.bw-lay{grid-template-columns:1fr;gap:16px}.bw-steps{grid-template-columns:repeat(3,1fr);gap:8px}.bw-steps li{padding:10px}.bw-steps span{display:none}.bw-steps b{font-size:.9rem;margin:0}}
@media(prefers-reduced-motion:reduce){.bw{height:auto}.bw-st{position:static;height:auto}.bw{--w:.5}.bw-steps li{opacity:1;translate:none}}
/* v106 — rolling odometer for the packaging stat */
.pkg-stat{overflow:visible}
.ps-n{padding:.06em .1em;max-width:100%}
.ps-n b.ps-o{display:inline-flex;font:900 clamp(88px,15vw,200px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:-.05em;background:none;-webkit-text-fill-color:initial;color:inherit}
.od{display:block;height:1.04em;overflow:hidden;--r:0}
.od i{display:block;height:1.04em;line-height:1.04em;font-style:normal;text-align:center;padding:0 .02em;background:linear-gradient(180deg,#fff6dd,#e3ae46 90%);background-size:100% 1.04em;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;translate:0 calc(var(--r)*-1.04em)}
.ps-n sup{margin-top:.2em}
html:not(.anim) .od-t i,html:not(.anim) .od-u i{translate:0 calc(6*-1.04em)}
/* v107 — packaging cards: art fills the card, brand name on the art; bigger animated client logos */
.pm-row .pm{display:block!important;position:relative;aspect-ratio:4/3!important;height:auto;background:#0a0806}
.pm-row .pm img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
.pm-br{position:absolute;left:14px;top:14px;z-index:2;padding:8px 14px;border-radius:99px;font:800 clamp(12px,1.2vw,15px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff3d2;background:rgba(10,8,5,.62);box-shadow:inset 0 0 0 1px rgba(227,194,122,.6),0 8px 20px -8px #000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pm-row .pm figcaption{z-index:2}
.pc-row{gap:clamp(30px,4.5vw,60px) clamp(36px,5.5vw,80px)!important;max-width:1180px!important}
.pc-row img{height:clamp(46px,6.2vw,86px)!important;max-width:60vw!important}
.pc-row.in img{opacity:1!important;animation:pcF 5.5s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(227,194,122,.35))!important}
.pc-row.in img:nth-child(2n){animation-delay:-1.4s}.pc-row.in img:nth-child(3n){animation-delay:-2.8s}.pc-row.in img:nth-child(5n){animation-delay:-4.1s}
.pc-row.in img:hover{animation-play-state:paused;scale:1.12;transition:scale .3s}
@keyframes pcF{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.pc-row.in img{animation:none}}
/* v108 — "The thinking" blooms in */
html.anim .method{position:relative;overflow:hidden}
html.anim .method::before{content:"";position:absolute;left:30%;top:42%;width:min(1000px,120vw);aspect-ratio:1.5;translate:-50% -50%;scale:.4;opacity:0;border-radius:50%;background:radial-gradient(closest-side,rgba(227,194,122,.3),rgba(227,194,122,.08) 55%,transparent 75%);filter:blur(28px);pointer-events:none;transition:opacity 1.6s ease,scale 2.2s cubic-bezier(.2,.8,.2,1)}
html.anim .method>*{position:relative;opacity:0;filter:blur(14px);translate:0 36px;scale:.97;transition:opacity 1.1s ease,filter 1.1s ease,translate 1.2s cubic-bezier(.2,.8,.2,1),scale 1.2s cubic-bezier(.2,.8,.2,1)}
html.anim .method.in::before{opacity:1;scale:1}
html.anim .method.in>*{opacity:1;filter:none;translate:0 0;scale:1}
html.anim .method.in>.eyebrow{transition-delay:.1s}html.anim .method.in>h2{transition-delay:.3s}html.anim .method.in>div{transition-delay:.6s}
@media(prefers-reduced-motion:reduce){html.anim .method::before,html.anim .method>*{transition:none;opacity:1;filter:none;translate:none;scale:1}}
/* v109 — while "Start free." is pinned, the page-anchored line steps aside; the dot keeps drawing */
.storyline .base,.storyline .trail,.storyline .tail{transition:opacity .5s}
.storyline.pinned .base,.storyline.pinned .trail,.storyline.pinned .tail{opacity:0!important}
/* v110 — one collapsible Bespoke Glass guide */
.gcol{position:relative;z-index:2;width:min(1180px,100% - 40px);margin:clamp(20px,3vw,40px) auto}
.gcol-h{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,36px);border-radius:26px;background:linear-gradient(135deg,rgba(227,194,122,.2),rgba(26,20,10,.92) 65%);box-shadow:inset 0 0 0 1.5px rgba(227,194,122,.7),0 0 40px -10px rgba(227,194,122,.4),0 22px 40px -24px #000;transition:transform .25s,box-shadow .25s}
.gcol-h:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #f6e2a8,0 0 54px -8px rgba(227,194,122,.6),0 26px 44px -24px #000}
.gcol-h:focus-visible{outline:2px solid #f6e2a8;outline-offset:3px}
.gcol-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.gcol-t small{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.2em;color:#e3c27a}
.gcol-t b{font-size:clamp(22px,3vw,36px);line-height:1.1;color:#fff3d2;letter-spacing:-.01em}
.gcol-t em{font-style:normal;font-size:clamp(13px,1.3vw,16px);color:#cfc5ad}
.gcol-ch{flex:none;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,#f8e6a8,#d8ae52);position:relative;box-shadow:0 8px 20px -8px rgba(227,174,70,.8);transition:rotate .4s cubic-bezier(.3,1.3,.5,1)}
.gcol-ch::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-right:3px solid #2a1c04;border-bottom:3px solid #2a1c04;translate:-50% -68%;rotate:45deg}
.gcol-h[aria-expanded=true] .gcol-ch{rotate:180deg}
.gcol-b{margin-top:18px}
.gcol-b:not([hidden]){animation:gcolIn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes gcolIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.gcol-f{display:flex;justify-content:center;padding:22px 0 6px}
.gcol-x{all:unset;cursor:pointer;padding:14px 26px;border-radius:99px;font:700 14px/1 "BBB Sans",Arial,sans-serif;color:#2a1c04;background:linear-gradient(180deg,#f8e6a8,#d8ae52);box-shadow:0 10px 24px -10px rgba(227,174,70,.8)}
.gcol-x:focus-visible{outline:2px solid #f6e2a8;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.gcol-b:not([hidden]){animation:none}}
/* v111 — remove the "Live: drawn in your browser" badge */
.wxl-badge,#wxlBadge{display:none!important}
/* v112 — Deep Glass: clear, thick, layered (lens + rim + inner light + shadow), not a purple fill */
.t-d .tier-demo{position:relative}
.t-d .td-pane{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(150,140,255,.05) 55%,rgba(255,255,255,.1))!important;-webkit-backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.18);backdrop-filter:blur(1.5px) saturate(1.7) brightness(1.18);animation:tdLift 6s ease-in-out infinite;
 box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 0 0 7px rgba(255,255,255,.07),inset 0 7px 12px rgba(255,255,255,.55),inset 0 -12px 20px rgba(130,110,255,.4),0 0 26px rgba(160,140,255,.45)!important}
.t-d .td-lens{position:absolute;inset:7px;border-radius:inherit;background:url(assets/bg-night.webp) 50% 88%/190% auto no-repeat;opacity:.85;-webkit-mask:radial-gradient(ellipse at 50% 55%,#000 45%,transparent 92%);mask:radial-gradient(ellipse at 50% 55%,#000 45%,transparent 92%);filter:saturate(1.3) brightness(1.1)}
.t-d .td-pane::before{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%)!important;left:0!important;right:0!important;top:0!important;height:100%!important;border-radius:0!important;transform:translateX(-120%);animation:tdInner 4.5s ease-in-out infinite!important;mix-blend-mode:screen}
@keyframes tdInner{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.t-d .td-pane b{text-shadow:0 2px 14px rgba(20,10,60,.7)}
.t-d .td-sh{position:absolute;left:20%;right:20%;top:calc(var(--shy,76%));height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(5px);animation:tdSh 6s ease-in-out infinite}
@keyframes tdSh{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(.82);opacity:.5}}
.td-lay{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.td-lay u{text-decoration:none;font:700 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff3d2;padding:5px 8px;border-radius:99px;background:rgba(10,8,20,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media(prefers-reduced-motion:reduce){.t-d .td-pane,.t-d .td-pane::before,.t-d .td-sh{animation:none!important}}
/* v113 — adapts-to-screen: one scroll-and-tap demo instead of cards */
.plat-head{text-align:center;max-width:62ch;margin:0 auto}
.ad{--v:2;position:relative;height:210vh;margin-top:20px}
.ad-st{position:sticky;top:12vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;min-height:70vh;max-width:1100px;margin:0 auto}
.ad-pv{position:relative;aspect-ratio:4/3;border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4),0 36px 64px -34px #000}
.ad-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ad-pane{position:absolute;left:9%;right:9%;top:24%;bottom:14%;border-radius:22px;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;gap:8px;color:#fff;overflow:hidden;
 background:rgba(22,18,30,calc(.96 - var(--v)*.42));-webkit-backdrop-filter:blur(calc(var(--v)*9px)) saturate(calc(1 + var(--v)*.35));backdrop-filter:blur(calc(var(--v)*9px)) saturate(calc(1 + var(--v)*.35));
 box-shadow:inset 0 0 0 calc(1px + var(--v)*.5px) rgba(255,255,255,calc(.14 + var(--v)*.2)),0 calc(var(--v)*10px) calc(var(--v)*22px) -10px rgba(0,0,0,.6);transition:box-shadow .2s}
.ad-pane::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.35) 50%,transparent 62%);opacity:clamp(0,calc(var(--v) - 1),1);transform:translateX(-120%);animation:adSw 4.5s ease-in-out infinite}
@keyframes adSw{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.ad-pane small{font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#f1d58f;position:relative;z-index:1}
.ad-pane b{font-size:clamp(24px,3.4vw,40px);line-height:1.05;position:relative;z-index:1}.ad-pane em{font-style:italic;font-weight:400;color:#f6dc98}
.ad-btn{align-self:flex-start;margin-top:6px;padding:9px 18px;border-radius:99px;font:700 13px/1 "BBB Sans",Arial,sans-serif;color:#2a1c04;background:linear-gradient(180deg,#f8e6a8,#d8ae52);position:relative;z-index:1}
.ad-rain{position:absolute;inset:0;pointer-events:none;opacity:clamp(0,calc((var(--v) - 1.4)*1.8),1);background:repeating-linear-gradient(104deg,transparent 0 16px,rgba(210,225,255,.3) 16px 17px,transparent 17px 36px);animation:adRn 2.4s linear infinite;z-index:2}
@keyframes adRn{to{background-position:-44px 64px}}
.ad-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding:6px;border-radius:99px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(227,194,122,.35)}
.ad-fill{display:none}
.ad-knob{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3);border-radius:99px;background:linear-gradient(180deg,#f8e6a8,#d8ae52);box-shadow:0 8px 22px -8px rgba(227,174,70,.8);translate:calc(var(--v)*100%) 0;transition:translate .15s linear}
.ad-track button{all:unset;position:relative;z-index:1;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;text-align:center;color:#d8cdb2}
.ad-track button b{font-size:14px}.ad-track button small{font-size:11px;opacity:.8}
.ad-track button[aria-pressed=true]{color:#2a1c04}
.ad-track button:focus-visible{outline:2px solid #f6e2a8;outline-offset:2px;border-radius:99px}
.ad-cap{margin:18px 4px 0;font-size:clamp(15px,1.5vw,18px);line-height:1.5;color:#e9e0c8;min-height:4.6em}
.ad-chk{list-style:none;margin:14px 4px 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ad-chk li{padding:7px 12px;border-radius:99px;font:600 12px/1 "BBB Sans",Arial,sans-serif;color:#f1d58f;box-shadow:inset 0 0 0 1px rgba(227,194,122,.4);background:rgba(227,194,122,.06)}
@media(max-width:860px){.ad{height:190vh}.ad-st{grid-template-columns:1fr;top:9vh;gap:18px;min-height:0}.ad-cap{min-height:5.6em}.ad-track button small{display:none}}
@media(prefers-reduced-motion:reduce){.ad{height:auto}.ad-st{position:static}.ad-pane::after,.ad-rain{animation:none}}

/* v114: "night behind" shows the whole picture, glass veiled; mixer edges thin; real weather on mixer */
.lx-bg{top:0;height:100%;border-radius:36px}
.lx[data-f=bg] .lx-bg{background:linear-gradient(180deg,transparent 0 71%,rgba(6,4,2,.8) 71% 100%);box-shadow:inset 0 0 0 2px #ffe29a,0 0 24px 2px rgba(255,226,154,.4)}
.mx[data-m=deep] .mx-hero{box-shadow:0 0 0 1px rgba(255,236,190,.8),inset 0 18px 26px rgba(200,175,255,.32),inset 0 -22px 30px rgba(8,0,40,.55),0 26px 36px -18px rgba(0,0,0,.8),0 0 36px rgba(150,120,255,.4)}
.mx[data-m=atmos] .mx-rain{display:none}
.mx[data-m=atmos] .mx-hero{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 18px 30px -18px #000}
.mx-wx{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .5s;pointer-events:none}
.mx.has-wx[data-m=atmos] .mx-wx{opacity:1}
.mx-stage .mx-ui{position:relative;z-index:2}
.mx.has-wx[data-m=atmos] .mx-hero{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.mx.has-wx[data-m=atmos] .mx-hero::before,.mx.has-wx[data-m=atmos] .mx-hero::after{display:none}

/* v115: gel family chips read as real controls */
.gel-chips{gap:16px}
.gel-chips .gc2{width:62px;min-width:62px;height:34px;padding:0 4px;justify-content:flex-start;animation:gcTrack 3.6s ease-in-out infinite!important}
.gel-chips .gc2 u{margin:0;width:26px;height:26px;animation:gcThumb 3.6s ease-in-out infinite}
@keyframes gcThumb{0%,38%{translate:0 0}50%,88%{translate:26px 0}100%{translate:0 0}}
@keyframes gcTrack{0%,38%{filter:grayscale(1) brightness(.75)}50%,88%{filter:none}100%{filter:grayscale(1) brightness(.75)}}
.gel-chips .gc3{width:132px;height:34px;padding:4px;justify-content:flex-start;background:rgba(255,255,255,.1);box-shadow:inset 0 2px 5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.18);position:relative}
.gel-chips .gc3 u{height:26px;border-radius:99px;opacity:1;background:radial-gradient(120% 140% at 30% 18%,#fff 0,#ffd0e6 22%,#f0589a 70%);box-shadow:0 0 14px rgba(240,88,154,.7),inset 0 2px 3px #fff;animation:gcFill 3.6s ease-in-out infinite}
@keyframes gcFill{0%{width:14%}70%,100%{width:100%}}
.gel-chips .gc4{background:radial-gradient(120% 140% at 30% 18%,#a9c4ff 0,#4d79e8 45%,#2447b8 100%);color:#fff;text-shadow:0 1px 2px rgba(0,10,60,.7);box-shadow:0 6px 18px rgba(90,134,240,.45),inset 0 -4px 8px rgba(0,20,100,.4),inset 0 2px 3px rgba(255,255,255,.8)}
.gel-chips .gc5{position:relative}
.gel-chips .gc5::after{content:"";width:9px;height:16px;border:solid #2a0a5c;border-width:0 3px 3px 0;rotate:40deg;translate:0 -2px;border-radius:1px;opacity:.85}

/* v116: mixer tag stays pinned to the hero corner in weather mode */
.mx .mx-hero .mx-tag{position:absolute!important;right:-8px!important;top:-14px!important;left:auto!important;bottom:auto!important}

/* v117: "one button." one colour, squish ripple through the letters */
.gel-h em{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#f3d98c!important;-webkit-text-fill-color:#f3d98c!important;animation:none!important;text-shadow:0 0 22px rgba(243,217,140,.35)}
.gel-h em .sq{display:inline-block;transform-origin:50% 85%;animation:gelSq 3.4s cubic-bezier(.3,1.1,.5,1) infinite}
@keyframes gelSq{0%,48%,100%{transform:scale(1,1)}14%{transform:scale(1.14,.8)}26%{transform:scale(.93,1.12)}38%{transform:scale(1.03,.97)}}
@media(prefers-reduced-motion:reduce){.gel-h em .sq{animation:none!important}}

/* v118: phones, glass stack stays inside its own area; hero Skip/Sound hide once the hero is gone */
body.hero-out .hero-ctl{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .3s}
@media(max-width:700px){
 .anim .s-glass .gl-head{position:relative;z-index:3;padding-top:7svh}
 .anim .s-glass .gl-head p+p{display:none}
 .anim .s-glass .gl-head p{font-size:15px;line-height:1.45}
 .anim .s-glass .layer-stage.free{margin-top:0;overflow:hidden;position:relative;z-index:1;max-height:42svh}
 .anim .s-glass .layer-stage.free .stack{width:min(290px,68vw)}
}

/* v119: fewer words on the glass stack; pulsing guide arrow */
.s-glass .gl-new,.s-glass .gl-use,.s-glass .gl-wx,.s-glass .pk-n{display:none!important}
#gcolH .gcol-ch{animation:gchPulse 2.6s ease-in-out infinite}
#gcolH .gcol-ch::before{animation:gchBob 2.6s ease-in-out infinite}
#gcolH .gcol-ch::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(255,226,154,.7);opacity:0;animation:gchRing 2.6s ease-out infinite;pointer-events:none}
#gcolH:hover .gcol-ch{animation-duration:1.4s}
#gcolH[aria-expanded="true"] .gcol-ch,#gcolH[aria-expanded="true"] .gcol-ch::before,#gcolH[aria-expanded="true"] .gcol-ch::after{animation:none}
@keyframes gchPulse{0%,100%{box-shadow:0 8px 20px -8px rgba(227,174,70,.8),0 0 0 0 rgba(255,226,154,.0)}50%{box-shadow:0 10px 30px -4px rgba(255,214,120,1),0 0 26px 6px rgba(255,226,154,.55)}}
@keyframes gchBob{0%,100%{translate:-50% -68%}50%{translate:-50% -30%}}
@keyframes gchRing{0%{opacity:.85;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){#gcolH .gcol-ch,#gcolH .gcol-ch::before,#gcolH .gcol-ch::after{animation:none}}