/* v51: glass section polish + weather lab organised + toolbox header.
   1 headline fade off  2 poster tile  3 glass strength slider (lighter <-> stronger)  4 weather words
   5 weather lab accordion  6 wizard no-overlap  7 toolbox spacing + green CTA */

/* ---------- 1 · keep the top fade off the headings that matter ---------- */
.glide-t{transition:opacity .25s ease}
html.keep-clear .glide-t{opacity:0!important}

/* ---------- 2 · "Graphic design" tile: a real poster, flat panel vs Bespoke Glass ---------- */
.bp.bp-poster{display:grid;place-items:center}
.bp-poster .pp-pair{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(14px,5%,30px);padding:14px 14px 22px}
.pp{position:relative;margin:0;height:100%;aspect-ratio:3/4;max-height:100%;border-radius:8px;overflow:hidden;box-shadow:0 14px 28px -12px #000,0 0 0 1px rgba(255,236,190,.28)}
.pp-art{position:absolute;inset:0;background:url(assets/bg-dusk.webp) 58% 50%/cover}
.pp-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,6,20,.0) 40%,rgba(10,6,20,.25))}
.pp-t{position:absolute;left:9%;right:9%;top:8%;font:800 clamp(7px,1.2vw,10px)/1.1 "BBB Sans",Arial,sans-serif;letter-spacing:.22em;color:#fff6dd;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.pp-box{position:absolute;left:7%;right:7%;bottom:7%;padding:9% 8% 8%;border-radius:7px;display:grid;gap:2px;color:#fff;text-align:left}
.pp-box small{font:700 clamp(5px,.9vw,7px)/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#f6dc98}
.pp-box b{font:700 clamp(10px,1.8vw,15px)/1.05 "BBB Sans",Arial,sans-serif;letter-spacing:-.02em}
.pp-box span{font:500 clamp(6px,1vw,8px)/1.3 "BBB Sans",Arial,sans-serif;opacity:.92}
.pp-flat .pp-box{background:#1a1610;box-shadow:inset 0 0 0 1px rgba(255,236,190,.18)}
.pp-glass .pp-box{background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 55%,rgba(227,174,70,.16));-webkit-backdrop-filter:blur(9px) saturate(180%);backdrop-filter:blur(9px) saturate(180%);border:1px solid rgba(255,248,226,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 18px -8px rgba(0,0,0,.6)}
.pp-glass{box-shadow:0 14px 34px -10px rgba(227,174,70,.55),0 0 0 1px rgba(246,220,152,.7)}
.pp figcaption{position:absolute;left:0;right:0;bottom:-1px;transform:translateY(100%);font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#d3cab5;white-space:nowrap}
.bp-poster .pp{overflow:visible}
.bp-poster .pp-art{border-radius:8px}
.bp-poster .pp-glass figcaption{color:#f6dc98}
.bp-poster .pp-pair{padding-bottom:30px}

/* ---------- 3 · Glass strength slider ---------- */
.gx-sl2{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;align-items:center;gap:14px 20px}
.gx-sl2 label{display:grid;gap:2px}
.gx-sl2 label span{font-size:13px;opacity:.8}
.gx-sl-track{display:flex;align-items:center;gap:12px}
.gx-sl-track input[type=range]{flex:1;min-width:0}
.gx-end{font-style:normal;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d8c48b;white-space:nowrap}
#gxFrostOut{min-width:9.5ch;text-align:right;font-weight:700}
#gxFrostOut b{color:#f6dc98}
.gx-str{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 4px}
.str-c{position:relative;display:grid;gap:10px;padding:0 0 12px;text-align:left;cursor:pointer;color:#f4ead2;font:inherit;background:rgba(255,236,190,.04);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);overflow:hidden;transition:box-shadow .3s,transform .3s}
.str-c:hover{transform:translateY(-2px)}
.str-c.on{box-shadow:inset 0 0 0 2px #f6dc98,0 14px 30px -14px rgba(246,200,90,.6)}
.str-c:focus-visible{outline:2px solid #f6dc98;outline-offset:3px}
.str-ph{position:relative;aspect-ratio:16/8;background:url(assets/bg-dusk.webp) 50% 62%/cover;display:grid;place-items:center}
.str-pane{--fr:calc(var(--v)/100);width:74%;padding:12px 14px;border-radius:14px;display:grid;gap:3px;color:#fff;-webkit-backdrop-filter:blur(calc(var(--fr)*28px)) saturate(185%);backdrop-filter:blur(calc(var(--fr)*28px)) saturate(185%);background:linear-gradient(150deg,rgba(255,255,255,calc(.06 + var(--fr)*.26)),rgba(255,255,255,.03) 55%,rgba(227,174,70,calc(.05 + var(--fr)*.3)));border:1px solid rgba(255,248,226,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 22px -10px rgba(0,0,0,.6)}
.str-pane b{font:700 15px/1 "BBB Sans",Arial,sans-serif}
.str-pane i{font:500 11px/1.3 "BBB Sans",Arial,sans-serif;font-style:normal;opacity:.92}
.str-c strong{padding:0 14px;font:700 14px/1.2 "BBB Sans",Arial,sans-serif}
.str-c small{padding:0 14px;font-size:12.5px;line-height:1.4;color:#cbbf9f}
/* the examples follow the slider across the WHOLE range (blur 0 to 28px), no jump at the low end */
html .gx .ex-card[data-m=glass] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(calc(var(--fr)*28px)) saturate(185%) brightness(1.06)!important;backdrop-filter:blur(calc(var(--fr)*28px)) saturate(185%) brightness(1.06)!important;
 background:radial-gradient(120% 90% at 18% 0%,rgba(255,255,255,calc(.10 + var(--fr)*.30)),rgba(255,255,255,0) 52%),radial-gradient(90% 120% at 100% 100%,rgba(var(--b),calc(.06 + var(--fr)*.36)),rgba(var(--b),0) 62%),linear-gradient(150deg,rgba(255,255,255,calc(.04 + var(--fr)*.14)),rgba(255,255,255,.03) 50%,rgba(var(--b),calc(.04 + var(--fr)*.12)))!important;
 transition:backdrop-filter .12s linear,-webkit-backdrop-filter .12s linear}
html .gx .ex-card[data-m=liquid] :is(.m-nav,.m-card,.m-pc,.m-tab){-webkit-backdrop-filter:blur(calc(var(--fr)*18px)) saturate(190%) brightness(1.12)!important;backdrop-filter:blur(calc(var(--fr)*18px)) saturate(190%) brightness(1.12)!important}
.gx .ex-stage{contain:paint}

/* ---------- 4 · weather in the words ---------- */
@keyframes wxRain1{from{background-position:0 0,0 0,0 0,0 0}to{background-position:-60px 140px,-90px 220px,-40px 420px,0 0}}
@keyframes wxSnow{from{background-position:0 0,0 0,0 0,0 0}to{background-position:30px 120px,-40px 190px,20px 300px,0 0}}
@keyframes wxFog{from{background-position:0 0,0 0,0 0}to{background-position:260px 0,-340px 0,0 0}}
@keyframes wxSun{from{background-position:140% 0,0 0,0 0}to{background-position:-40% 0,0 0,0 0}}
@keyframes wxFrost{0%,100%{filter:drop-shadow(0 0 3px rgba(190,230,255,.55))}50%{filter:drop-shadow(0 0 14px rgba(210,240,255,.95))}}
@keyframes wxFlash{0%,86%,100%{filter:brightness(1)}88%{filter:brightness(2.1) drop-shadow(0 0 22px rgba(190,205,255,.95))}91%{filter:brightness(1.1)}94%{filter:brightness(2.4) drop-shadow(0 0 26px rgba(190,205,255,1))}}
html.anim #wxlab h2.wx-head{--gx:1;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;color:transparent!important;-webkit-text-fill-color:transparent!important;
 -webkit-text-stroke:1px rgba(255,255,255,.4)!important;paint-order:stroke fill;text-shadow:none!important;
 -webkit-background-clip:text!important;background-clip:text!important;filter:none!important;
 background-color:transparent!important;
 --b1:linear-gradient(180deg,#f7fbff 0%,#d7e4f7 55%,#a8bddb 100%);
 background-image:var(--fx,var(--b1)),var(--b1)!important;transition:opacity .5s}
html.anim #wxlab h2.wx-head em{color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:1px rgba(255,236,190,.55)!important;
 -webkit-background-clip:text!important;background-clip:text!important;background-image:var(--fx),linear-gradient(180deg,#fff0c4 0%,#f0cf80 55%,#cf9f3c 100%)!important;background-size:var(--fxs),100% 100%!important}
html.anim #wxlab h2.wx-head{background-size:var(--fxs),100% 100%!important}
/* the weather layers, on top of the silver (line one) and gold (line two) base */
#wxlab h2.wx-head[data-fx=rain],#wxlab h2.wx-head[data-fx=storm]{
 --fx:radial-gradient(circle at 50% 40%,rgba(255,255,255,.98) 0 1.6px,rgba(150,195,255,.55) 3px,transparent 5px),
      repeating-linear-gradient(104deg,transparent 0 11px,rgba(30,70,170,.9) 11px 13px,transparent 12.4px 26px),
      repeating-linear-gradient(104deg,transparent 0 7px,rgba(255,255,255,.95) 7px 8.6px,transparent 8px 19px),
      linear-gradient(180deg,#3f68b0,#86b0ea 60%,#b9d3f7);
 --fxs:38px 64px,40px 74px,26px 96px,100% 100%;animation:wxRain1 .9s linear infinite}
#wxlab h2.wx-head[data-fx=storm]{animation:wxRain1 .6s linear infinite,wxFlash 3.4s linear infinite}
#wxlab h2.wx-head[data-fx=snow]{
 --fx:radial-gradient(circle,#fff 0 2.4px,transparent 3.2px),radial-gradient(circle,#fff 0 1.6px,transparent 2.4px),radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.7px),linear-gradient(180deg,#7fa6dd,#bfd6f3 70%,#e3eefb);
 --fxs:42px 52px,28px 38px,18px 24px,100% 100%;animation:wxSnow 4s linear infinite}
#wxlab h2.wx-head[data-fx=fog]{
 --fx:radial-gradient(ellipse 120px 46px at 30% 55%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 160px 60px at 70% 40%,rgba(255,255,255,.7),transparent 70%),linear-gradient(180deg,#8d9bb2,#b9c4d4 60%,#d5dce6);
 --fxs:240px 100%,320px 100%,100% 100%;animation:wxFog 9s linear infinite}
#wxlab h2.wx-head[data-fx=frost]{
 --fx:repeating-conic-gradient(from 8deg at 50% 50%,rgba(255,255,255,.95) 0 3deg,transparent 3deg 30deg),radial-gradient(circle,rgba(255,255,255,.95) 0 1.3px,transparent 2px),linear-gradient(160deg,#d8f1ff,#8fcaf0 60%,#5aa6dc);
 --fxs:38px 38px,22px 26px,100% 100%;animation:wxFrost 2.4s ease-in-out infinite}
#wxlab h2.wx-head[data-fx=sun]{
 --fx:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.98) 50%,transparent 66%),radial-gradient(circle at 80% 18%,rgba(255,255,255,.95) 0 2px,rgba(255,215,120,.5) 8px,transparent 22px),linear-gradient(180deg,#fff3c4,#f7cf62 70%,#e9a93a);
 --fxs:260% 100%,100% 100%,100% 100%;animation:wxSun 3.2s ease-in-out infinite}
#wxlab h2.wx-head[data-fx=clear]{--fx:linear-gradient(180deg,#f7fbff,#d7e4f7 55%,#a8bddb);--fxs:100% 100%;animation:none}
.wx-now{display:inline-flex;align-items:center;gap:8px;margin:10px auto 0;padding:7px 14px;border-radius:999px;font:700 11px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#f6dc98;box-shadow:inset 0 0 0 1px rgba(227,194,122,.35);background:rgba(255,236,190,.05)}
.wx-now i{width:7px;height:7px;border-radius:50%;background:#58e08a;box-shadow:0 0 8px #58e08a}
@media(prefers-reduced-motion:reduce){#wxlab h2.wx-head{animation:none!important}}

/* ---------- 5 · weather lab: organised + collapsible on smaller screens ---------- */
.acc-head{cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;margin:8px 0 0!important;border-radius:14px;background:rgba(255,236,190,.06);box-shadow:inset 0 0 0 1px rgba(227,194,122,.22);user-select:none;-webkit-tap-highlight-color:transparent}
.acc-head:focus-visible{outline:2px solid #f6dc98;outline-offset:2px}
.acc-head .acc-sum{margin-left:auto;font:600 12px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.04em;text-transform:none;color:#f6dc98;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.acc-head::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid #d8c48b;border-bottom:2px solid #d8c48b;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.acc-head[aria-expanded=true]::after{transform:rotate(-135deg) translateY(-2px)}
.acc-off{display:none!important}
.wxl-ctl.acc .wxl-row,.wxl-ctl.acc .wxl-tg{margin-top:12px}
.wxl-why.is-closed>:not(.wxl-wh){display:none!important}
.wxl-why.acc-why .wxl-wh{display:flex;align-items:center;gap:10px;cursor:pointer;margin:0}
.wxl-why.acc-why .wxl-wh::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid #d8c48b;border-bottom:2px solid #d8c48b;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.wxl-why.acc-why:not(.is-closed) .wxl-wh::after{transform:rotate(-135deg) translateY(-2px)}
.wxl-why.acc-why .wxl-wh .acc-sum{margin-left:auto;margin-right:6px;font:600 12px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.04em;text-transform:none;color:#f6dc98}
@media(max-width:1000px){
 .wxl{grid-template-columns:minmax(0,1fr)!important}
 .wxl-stage{aspect-ratio:16/10!important;max-height:44vh;position:sticky;top:82px;z-index:4}
 .wxl-card{padding:14px 16px!important;gap:4px!important;bottom:5%!important}
 .wxl-card b{font-size:clamp(20px,5vw,30px)!important}
 .wxl-pill{top:5%!important}
}
@media(max-width:600px){.wxl-stage{aspect-ratio:4/3!important;max-height:38vh}.wxl-hint{display:none}}

/* ---------- 6 · "Now you try it": preview docks on top, steps below, nothing overlaps ---------- */
@media(max-width:1000px){
 .bd.bd-wiz{display:flex!important;flex-direction:column;gap:14px;padding:14px!important}
 .bd.bd-wiz .bd-pv{position:sticky!important;top:78px!important;z-index:6;align-self:stretch!important;order:-1;margin:-4px -4px 0!important;padding:8px 4px 6px!important;border-radius:18px;background:rgba(10,7,4,.97)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
 .bd.bd-wiz .bd-pv .bd-stage{max-height:32vh;aspect-ratio:16/8!important}
 .bd.bd-wiz .bd-cap{display:none!important}
 .bd.bd-wiz .bd-ctl{position:relative;z-index:1}
 .bd.bd-wiz .bd-ctl>h3,.bd.bd-wiz .bd-ctl>.eyebrow,.bd.bd-wiz .bd-ctl>p{display:none}
}
.gx-codecap,.gx-links{position:relative;z-index:1;margin-top:18px}

/* ---------- 7 · toolbox: tabs sit below the drawing line; "Start free" lives in the green button ---------- */
.catalog-controls{padding-top:30px!important;margin-top:10px!important}
.section-head .sh-cta{align-self:flex-end;display:inline-flex!important;align-items:center;gap:16px;text-align:left;white-space:normal!important;padding:14px 12px 14px 24px!important;font-size:14px!important;line-height:1.35!important;max-width:330px;text-decoration:none}
.section-head .sh-cta span{flex:none;margin:0!important}
@media(max-width:700px){.section-head .sh-cta{align-self:flex-start;max-width:100%}}

/* ---------- small screens: calmer glass hero + sections ---------- */
@media(max-width:1000px){
 .gx-sl2{grid-template-columns:1fr}
 .gx-str{grid-template-columns:1fr;gap:10px}
 .str-c{grid-template-columns:42% 1fr;align-items:center;padding:0}
 .str-ph{aspect-ratio:4/3;height:100%}
 .str-c strong,.str-c small{padding:0 12px}
 .str-c .str-tx{display:grid;gap:4px;padding:10px 0}
}
.str-tx{display:grid;gap:4px;align-content:start}