/* v67 (2026-11-08): glass guide. Headings bloom in and read as one headline, no second gold rail, bigger demos on their own
   pictures with Gel lens toggles and real weather, living tiles, a comparison chart that feels made. */

/* ---------- 1. Section headings in the glass guide: one size, whole bottom row in the gold italic, bloom entry ---------- */
html.v67-js #glass-more .v67-h{position:relative;display:block;width:auto!important;max-width:none!important;margin:10px auto 18px!important;
  font-size:clamp(34px,4.9vw,66px)!important;line-height:1.02!important;letter-spacing:-.04em!important;font-weight:700;
  white-space:normal!important;text-wrap:balance;text-align:center;
  color:#f6efdf!important;-webkit-text-fill-color:#f6efdf!important;background:none!important;-webkit-text-stroke:0!important;
  text-shadow:0 2px 30px rgba(0,0,0,.45);filter:none}
html.v67-js #glass-more .v67-h em,html.v67-js #glass-more .v67-h .nb{display:block!important;margin-top:.02em;padding-bottom:.14em;margin-bottom:-.14em;
  font-family:"BBB Serif",Georgia,serif!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.015em!important;
  -webkit-text-stroke:0!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  background:linear-gradient(100deg,#c9973c 0%,#f3d58c 30%,#fff1c6 48%,#e9c574 66%,#b9862f 100%)!important;background-size:220% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;animation:none!important;transform:none!important}
html.v67-js #glass-more .rc-head .v67-h{text-align:left;margin-left:0!important}
.tiers-head,.plat-head,.vidd-head{max-width:1080px!important}
.tiers-head>p,.plat-head>p,.vidd-head>p{max-width:760px;margin-left:auto!important;margin-right:auto!important}
/* the entry: words rise out of a soft blur, a gold glow blooms through the letters, then settles */
html.v67-js #glass-more .v67-h{opacity:0;translate:0 26px;filter:blur(14px)!important}
@media (min-width:700px){html.v67-js #glass-more .v67-h em,html.v67-js #glass-more .v67-h .nb{width:auto!important;max-width:none!important;white-space:nowrap!important}}
html.v67-js #glass-more .v67-h.in{opacity:1;translate:0 0;filter:blur(0)!important;
  transition:opacity 1s ease,translate 1.2s cubic-bezier(.16,.84,.24,1),filter 1.1s ease;
  animation:v67Bloom 2.4s ease-out .25s backwards}
html.v67-js #glass-more .v67-h.in em,html.v67-js #glass-more .v67-h.in .nb{animation:v67Sheen 2.6s cubic-bezier(.3,.7,.2,1) .35s both!important}
@keyframes v67Bloom{0%{text-shadow:0 0 0 rgba(255,214,120,0),0 2px 30px rgba(0,0,0,.45)}
  35%{text-shadow:0 0 34px rgba(255,214,120,.55),0 0 90px rgba(255,200,100,.25)}
  100%{text-shadow:0 0 0 rgba(255,214,120,0),0 2px 30px rgba(0,0,0,.45)}}
@keyframes v67Sheen{0%{background-position:100% 0;filter:drop-shadow(0 0 0 rgba(255,214,120,0))}
  40%{filter:drop-shadow(0 0 18px rgba(255,214,120,.55))}100%{background-position:0 0;filter:drop-shadow(0 0 0 rgba(255,214,120,0))}}
/* any frosted heading keeps its descenders (the g in "glass" was clipped by the text fill box) */
html.anim .frost-h{padding-bottom:.12em}

/* ---------- 2. Only the one storyline runs down the page: no thick gold rail on these blocks ---------- */
.tiers.lit,.plat.lit,.recipes.lit,.rb-why.lit,.pkg-clients.lit,.gl-uses.lit,.gx.lit,.try-sec.lit,.vidd.lit{box-shadow:none!important}

/* ---------- 3. Gel lens toggles (shared look for every switch row in the guide) ---------- */
.v67-rail{--bgl-tint:227,174,70;--bgl-hi:255,240,200;position:relative;isolation:isolate}
.v67-rail.bgl-on>button[aria-pressed=true]{background:transparent!important;box-shadow:none!important;color:#fff4d6!important;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.v67-rail.bgl-on>button{background:transparent!important;box-shadow:none!important;position:relative;z-index:3}
.v67-rail.bgl-on>button:hover{color:#fff4d6}
.v67-capsule{display:flex!important;flex-wrap:nowrap!important;gap:2px!important;padding:5px!important;border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;
  box-shadow:inset 0 0 0 1px rgba(227,194,122,.32),inset 0 1px 0 rgba(255,240,200,.12),0 18px 40px -26px #000!important;width:max-content;max-width:100%}
.v67-capsule>button{border-radius:999px!important}

/* ---------- 4. "Sized to the screen": bigger, its own picture, the Gel lens, real weather on Full ---------- */
.plat{max-width:1280px!important}
.ad-st{max-width:1240px!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)!important}
.ad-pv{aspect-ratio:16/11!important}
.ad-pv img{object-position:50% 40%}
.ad-pane b{font-size:clamp(26px,3.6vw,46px)!important;letter-spacing:-.03em}
.ad-pane em{font-family:"BBB Serif",Georgia,serif;color:#fff0c4!important}
.ad-pane b,.ad-pane small{text-shadow:0 1px 14px rgba(0,0,0,.5),0 0 2px rgba(0,0,0,.35)}
.ad-rain{display:none!important}
.ad-wx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:clamp(0,calc((var(--v) - 1.35)*2),1);transition:opacity .4s}
.ad-pane{z-index:2}
.ad-track.bgl-on .ad-knob,.ad-track.bgl-on .ad-fill{display:none!important}
.ad-track.bgl-on{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;box-shadow:inset 0 0 0 1px rgba(227,194,122,.34),inset 0 1px 0 rgba(255,240,200,.12),0 22px 44px -28px #000!important}
.ad-track.bgl-on button[aria-pressed=true]{color:#fff4d6!important}
.ad-track.bgl-on button[aria-pressed=true] small{color:#f3dca0;opacity:1}
.ad-track button{z-index:3!important}
@media (max-width:860px){.ad-st{grid-template-columns:1fr!important}.ad-pv{aspect-ratio:4/3!important}}

/* ---------- 5. "One screen. Switch the glass.": bigger stage on its own art ---------- */
.recipes{max-width:1280px;margin-left:auto;margin-right:auto}
.mx{grid-template-columns:minmax(0,1.7fr) minmax(360px,1fr)!important}
.mx-stage{min-height:clamp(420px,46vw,600px)!important}
.mx-stage>img{object-position:50% 42%;transform:scale(1.1)}
.mx-hero b em{color:#fff1c8!important;-webkit-text-fill-color:#fff1c8!important;font-style:italic;text-shadow:0 0 18px rgba(255,214,120,.55),0 2px 14px rgba(0,0,0,.55)!important}
.mx-hero{max-width:520px!important}
.mx-tabs.v67-capsule>button{padding:11px 13px!important;font-size:13px!important;white-space:nowrap}
@media (max-width:860px){.mx{grid-template-columns:minmax(0,1fr)!important}}
.mx>*,.ad-st>*{min-width:0}
@media (max-width:560px){.v67-capsule{width:auto!important}.mx-tabs.v67-capsule>button,.ex-tog.v67-capsule>button,.bd-tog.v67-capsule>button{padding:10px 8px!important;font-size:11.5px!important;letter-spacing:0}.mx-side{padding:16px!important}}

/* ---------- 6. The three kinds: each picture framed for its own example ---------- */
.t-b .tier-demo img{object-position:50% 30%}
.t-d .tier-demo img{object-position:50% 28%}
.t-d .td-lens{background-image:url(assets/pkg/black-bottle.webp)!important;background-size:150% auto!important;background-position:50% 30%!important}

/* ---------- 7. Tiles 1 and 4: living pictures (same frame as the weather and name-it tiles) ---------- */
.feat .v67-rd,.feat .v67-dv{display:block;position:relative;width:100%;height:84px;border-radius:16px;overflow:hidden;isolation:isolate;margin-bottom:20px;
  box-shadow:0 0 0 1px rgba(227,194,122,.45),0 12px 24px -12px #000;background:#120d06}
/* Readable on anything: the picture keeps changing, the words on the glass never blur */
.v67-rd i{position:absolute;inset:-8%;background-size:cover;background-position:50% 50%;opacity:0;animation:v67Rd 12s linear infinite;animation-delay:calc(var(--d)*3s - 12s)}
@keyframes v67Rd{0%{opacity:0;transform:scale(1.12) translateX(-2%)}6%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1) translateX(2%)}100%{opacity:0}}
.v67-rd b{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;white-space:nowrap;padding:9px 16px;border-radius:999px;
  font:800 12.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.02em;color:#fff8e6;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(24,16,6,.26));-webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.28),0 8px 18px -8px rgba(0,0,0,.6);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.v67-rd b::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;animation:v67Sw 3s ease-in-out infinite}
@keyframes v67Sw{0%,40%{background-position:120% 0}100%{background-position:-120% 0}}
/* Made for apps and sites: one glass layout reshapes from phone to tablet to website */
.v67-dv{background:url(assets/bg-dawn.webp) 50% 60%/cover!important}
.v67-dv::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,4,.1),rgba(10,8,4,.45))}
.dv-f{position:absolute;left:50%;top:50%;translate:-50% -50%;width:30px;height:62px;border-radius:9px;z-index:1;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(8px) saturate(150%);backdrop-filter:blur(8px) saturate(150%);
  box-shadow:inset 0 0 0 1.2px rgba(255,246,220,.75),inset 0 1px 0 rgba(255,255,255,.7),0 10px 20px -10px #000;animation:v67Dv 9s cubic-bezier(.65,0,.25,1) infinite}
.dv-f u{position:absolute;left:12%;right:12%;border-radius:4px;background:rgba(255,248,226,.55)}
.dv-bar{top:9%;height:9%}.dv-card{top:28%;height:38%;background:linear-gradient(135deg,rgba(255,226,154,.75),rgba(255,248,226,.35))!important}.dv-tab{bottom:9%;height:10%;left:24%!important;right:24%!important;border-radius:99px!important}
@keyframes v67Dv{0%,26%{width:30px;height:62px;border-radius:9px}36%,59%{width:74px;height:56px;border-radius:7px}69%,92%{width:150px;height:58px;border-radius:6px}100%{width:30px;height:62px;border-radius:9px}}
.dv-l{position:absolute;right:10px;bottom:8px;z-index:2;font:800 9.5px/1 "BBB Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffe9b0;height:10px;overflow:hidden}
.dv-l em{display:block;font-style:normal;height:10px;animation:v67DvL 9s cubic-bezier(.65,0,.25,1) infinite}
@keyframes v67DvL{0%,26%{transform:translateY(0)}36%,59%{transform:translateY(-10px)}69%,92%{transform:translateY(-20px)}100%{transform:translateY(0)}}
.feat article:hover .v67-rd,.feat article:hover .v67-dv{box-shadow:0 0 0 1px rgba(247,214,120,.8),0 0 26px -6px rgba(247,214,120,.55),0 12px 24px -12px #000}

/* ---------- 8. Liquid Glass vs Bespoke Glass chart: the Bespoke column is a lit glass pane, rows bloom in ---------- */
.cm{position:relative;isolation:isolate}
.v67-cmcol{position:absolute;z-index:0;pointer-events:none;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,226,154,.10),rgba(227,174,70,.05) 40%,rgba(227,174,70,.03));
  box-shadow:inset 0 0 0 1px rgba(243,207,120,.55),inset 0 1px 0 rgba(255,246,220,.5),0 0 60px -18px rgba(247,214,120,.45);overflow:hidden}
.v67-cmcol::after{content:"";position:absolute;left:0;right:0;height:38%;top:-40%;background:linear-gradient(180deg,transparent,rgba(255,240,200,.16),transparent);animation:v67Col 6s ease-in-out infinite}
@keyframes v67Col{0%{top:-40%}60%,100%{top:105%}}
.cm>*{position:relative;z-index:1}
.cm>.v67-cmcol{position:absolute;z-index:0}
.cm .cm-b,.cm .cm-bc{background:transparent!important}
html.v67-js .cm .cm-r{opacity:0;translate:0 14px;filter:blur(8px)}
html.v67-js .cm.in .cm-r{opacity:1;translate:0 0;filter:none;transition:opacity .8s ease,translate .9s cubic-bezier(.16,.84,.24,1),filter .8s ease;transition-delay:calc(var(--r,0)*110ms + 150ms)}
html.v67-js .cm.in .cm-y svg{animation:v67Ck .7s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--r,0)*110ms + 450ms)}
@keyframes v67Ck{0%{transform:scale(.2);filter:drop-shadow(0 0 0 rgba(120,230,150,0))}60%{transform:scale(1.18);filter:drop-shadow(0 0 10px rgba(120,230,150,.8))}100%{transform:scale(1)}}
html.v67-js .cm .cm-lg{transition:filter .6s}
html.v67-js .cm.in .cm-lg{animation:v67Lg 2.4s ease-out .2s backwards}
@keyframes v67Lg{0%{filter:drop-shadow(0 0 0 rgba(255,214,120,0))}35%{filter:drop-shadow(0 0 22px rgba(255,214,120,.9))}100%{filter:drop-shadow(0 0 6px rgba(255,214,120,.35))}}

@media (prefers-reduced-motion:reduce){
  html.v67-js #glass-more .v67-h,html.v67-js .cm .cm-r{opacity:1;translate:none;filter:none!important;animation:none!important}
  .v67-rd i{animation:none;opacity:0}.v67-rd i:first-child{opacity:1}
  .dv-f,.dv-l em,.v67-rd b::after,.v67-cmcol::after{animation:none!important}
}

/* the reworked Bruce block (bbb-v67-bruce) keeps the rb-why class for the storyline; bbb-v67-story hides the old one */
#work .rb-why.bf{display:grid!important}