/* ===== BBB v47 — Ray's feedback pass (layered after v46) ===== */

/* --- Layer scene: one calm frosted plate, no split line or labels --- */
.s-glass .lyr.l3 :is(.b3-sharp,.b3-line,.b3-t){display:none!important}
.s-glass .lyr.l3 .b3-frost{clip-path:none!important;animation:none!important;transform:scale(1.12)}
.s-glass .lyr.l7 .pane{padding-bottom:9cqw!important}
.s-glass .lyr.l7 .l7-row{margin-top:auto;margin-bottom:1.5cqw}
.s-glass .lyr.l7 .l7-sw{display:none!important}
/* picker: swatches sit in one tidy row */
.gl-now .gl-pick{display:none;flex-wrap:wrap;align-items:center;gap:8px}
.s-glass[data-pk="1"] .gl-now .gl-pick.pk-wx,.s-glass[data-pk="3"] .gl-now .gl-pick.pk-rim{display:flex!important}
.gl-now .gl-pick .pk-l,.gl-now .gl-pick .pk-n{display:block;flex:0 0 100%;min-height:0!important;max-width:none!important;margin:0}
.gl-now .gl-pick .pk-n{margin-top:2px}
.gl-now .gl-pick button.sw,.gl-now .gl-pick label.sw{flex:none;display:block}

/* --- Frost section --- */
.gx .ex-tog{flex-wrap:nowrap!important;gap:6px;justify-content:center}
.gx .ex-tog button{white-space:nowrap;font-size:12px!important;padding:8px 11px!important}
.gx .ex-tog button[data-m=liquid]{border-style:dashed;opacity:.8}
.gx .ex-tog button[data-m=clear]{display:none!important}
.gx-clearnote{margin:6px 0 22px;max-width:62ch;font-size:14px;line-height:1.55;color:#d3cab5}
.gx-clearnote b{color:#fff6dd}
#gxFrostOut b,.bd-fr output b{color:#ffe9a8;font-weight:700}
.gx-sl input[type=range],.bd-fr input[type=range]{--p:.55}

/* --- Weather feature + comparison: real rain, not drawn lines --- */
.feat .ic-wxv{display:block;position:relative;width:64px;height:64px;border-radius:18px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px rgba(227,194,122,.45),0 12px 24px -12px #000}
.ic-wxv img,.ic-wxv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ic-wxv video{mix-blend-mode:screen;opacity:.95;filter:contrast(1.5)}
.ic-wxv::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.tc-logo{overflow:hidden}
.c-a .tc-logo::after{display:none!important}
.tc-logo .tc-wxv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.95;filter:contrast(1.5)}
.tc-logo img{position:relative;z-index:1}

/* --- Comparison table: centred, benefits easy to spot --- */
.tier-cmp>div>span:not(:first-child){text-align:center}
.tier-cmp>div:not(.tc-h) .tc-m{display:flex;justify-content:center;margin:0 0 6px}
.tier-cmp>div{align-items:center}
.tc-win{background:rgba(227,194,122,.07)}
.tc-win>span:not(:first-child){color:#fff6dd;font-weight:700}
.tc-win>span:first-child{color:#ffe29a}

/* --- Layering example (tinted panel + clear button) --- */
.lay-ex{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin-top:56px}
.lay-copy h4{font-size:clamp(26px,3.2vw,42px);line-height:1.06;letter-spacing:-.04em;margin:12px 0 14px;font-weight:600}
.lay-copy p{color:#d8d0bb;font-size:16px;line-height:1.6;margin:0 0 16px}
.lay-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lay-pts li{padding:12px 16px;border-radius:16px;background:rgba(255,236,190,.05);box-shadow:inset 0 0 0 1px rgba(227,194,122,.18);color:#d3cab5;font-size:14px;line-height:1.45}
.lay-pts b{display:block;color:#fff6dd;font-size:15px;margin-bottom:2px}
.lay-stage{position:relative;aspect-ratio:4/3;border-radius:30px;overflow:hidden;isolation:isolate;box-shadow:0 40px 80px -40px #000,0 0 0 1px rgba(227,194,122,.25)}
.lay-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lay-panel{position:absolute;left:18%;right:18%;top:12%;bottom:12%;border-radius:26px;padding:7% 8%;display:flex;flex-direction:column;gap:3.5%;color:#fff;background:linear-gradient(160deg,rgba(120,70,210,.55),rgba(40,20,90,.5));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(210,190,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 30px 50px -20px #000a}
.lay-panel small{font:700 10px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.18em;color:#e5d6ff}
.lay-panel>b{font-size:clamp(22px,3vw,34px);letter-spacing:-.03em;font-weight:600}
.lay-f{display:block;padding:3.2% 4%;border-radius:12px;background:rgba(10,5,30,.35);border:1px solid rgba(255,255,255,.18);font-size:13px;color:#d7caf2}
.lay-cta{margin-top:auto;display:block;text-align:center;padding:3.4% 0;border-radius:99px;font:700 14px/1 "BBB Sans",Arial,sans-serif;color:#fff;text-shadow:0 1px 3px #0008;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1.5px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px -8px #000a}
.lay-panel em{position:absolute;font:700 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#1a1204;background:linear-gradient(180deg,#fff0c4,#e3b04a);padding:6px 10px;border-radius:99px;white-space:nowrap}
.lay-t1{right:-12%;top:14%}.lay-t2{right:-10%;bottom:7%}
@media(max-width:900px){.lay-ex{grid-template-columns:1fr;margin-top:44px}.lay-panel{left:10%;right:10%}.lay-t1,.lay-t2{right:4%}}

/* --- "Slow city" Atmospheric card: much more see-through --- */
.mx-card{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))!important;-webkit-backdrop-filter:blur(3px) saturate(1.2)!important;backdrop-filter:blur(3px) saturate(1.2)!important}
.mx-card video{opacity:.8}
.mx-in{text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* --- Toolbox tiles --- */
.bento .ptype{position:static!important;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:6px 6px 12px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:#e3c27a!important;font-size:10.5px!important;letter-spacing:.16em}
.bento .ptype::before{content:"";width:6px;height:6px;border-radius:50%;background:#e3c27a;box-shadow:0 0 8px rgba(227,194,122,.8)}
.bento .product-meta{flex-wrap:wrap;gap:8px}
.bento .product-meta strong{position:relative;transition:transform .2s,filter .2s}
.bento .product-meta strong:hover{transform:translateY(-1px);filter:brightness(1.1)}
.bento .product-meta strong a{color:inherit;-webkit-text-fill-color:currentColor;text-decoration:none;white-space:nowrap}
.bento .product-meta strong a::after{content:"";position:absolute;inset:-8px}
.bento .ws2{justify-content:space-between}
.ws2-lab{font:700 9px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;color:#e3c27a;margin-bottom:-2%}
.bento .ws2-out{opacity:1!important;transform:none!important;animation:none!important}
.bento .ws2-out :is(.l1,.l2,.l3){opacity:1}

/* --- Layer stack sits lower and a touch smaller so it never touches the subtitle --- */
.anim .s-glass .layer-stage.free{margin-top:14svh}
.anim .s-glass .layer-stage.free .stack{width:min(470px,50vw)}
@media(max-height:780px){.anim .s-glass .layer-stage.free{margin-top:12svh}.anim .s-glass .layer-stage.free .stack{width:min(400px,46vw)}}
.lay-panel em{-webkit-text-fill-color:#1a1204!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#1a1204!important;animation:none!important}
.lay-copy h4 em{font-family:var(--serif,Georgia,serif);font-weight:400;color:#f5dc9a}
.gx-clearnote{margin-inline:auto;text-align:center}
.feat .ic-wxv{width:100%;height:84px;border-radius:16px}
.ic-wxv::after{inset:16% 18%;border-radius:12px;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.35)}
.mx-card video{opacity:.9!important;filter:contrast(1.3) brightness(1.05)!important}
/* blend the real rain straight onto the picture: the blur lives on a layer under the video, not on the card */
.mx-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:none!important}
.mx-card::before{content:"";position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(2px) saturate(1.2);backdrop-filter:blur(2px) saturate(1.2);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.01))}
.mx-card video{opacity:.9!important;filter:contrast(1.2) brightness(1.05)!important;z-index:1}
.mx-in{z-index:2}
.feat .ic-wxv{margin-bottom:20px}