/* B441 · Liquid glass on phones (Steven's pick E, Nov 4; Figma: Culture Phone System · Buttons). The same material as
   becoolbepositive.com: the tab bar floats as one glass capsule with CultureAI's own icons (the rocket, the Lab flask, Ask with
   its spark, the platform layers), and the buttons get glass: 52px, fully rounded, a bright top edge, clear glass on blue.
   CultureAI blue is the only accent. */
@media (max-width:760px){
  /* ---- the tab bar */
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs.sh-tabs{
    left:14px!important;right:14px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;top:auto!important;
    height:66px!important;padding:0 6px!important;border:0!important;border-radius:999px!important;align-items:center!important;
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8))!important;
    -webkit-backdrop-filter:blur(28px) saturate(1.8)!important;backdrop-filter:blur(28px) saturate(1.8)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 18px 40px -16px rgba(10,22,51,.45),0 2px 6px rgba(10,22,51,.06)!important}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs :is(.sh-tab,button.sh-tab){
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;
    height:54px!important;min-height:54px!important;margin:0 2px!important;padding:0!important;border-radius:999px!important;background:none;
    color:#0a1633!important;font:500 13px/1 Rubik,system-ui,sans-serif!important;transition:background .2s,transform .15s cubic-bezier(.22,1,.36,1)!important}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab span{font:500 13px/1 Rubik,system-ui,sans-serif!important;opacity:.85}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab svg{width:26px!important;height:26px!important;stroke-width:1.8!important}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab .sh-fill{fill:transparent}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab:is([aria-current="page"],[aria-expanded="true"]){color:#1559f5!important;background:rgba(21,89,245,.12)!important;box-shadow:inset 0 0 0 1px rgba(21,89,245,.16)!important}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab:is([aria-current="page"],[aria-expanded="true"]) span{opacity:1;font-weight:600!important}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab:is([aria-current="page"],[aria-expanded="true"]) .sh-fill{fill:#dce6ff}
  html.sh-on.sh-on.sh-on.sh-on body:not(#_a):not(#_b):not(#_c) #sh-tabs .sh-tab:active{transform:scale(.94)}

  /* ---- buttons: one shape and the glass edge everywhere */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.sx-btn,.pp-btn,.nv-btn,.hv-btn,.hb-playbig,.hb-read,.px-fbtn,.fn-more,.hx-open,.px-btn,.fn-all,.px-cbtn,.px-li,.sm-cta){
    min-height:52px!important;border-radius:999px!important;font-family:Rubik,system-ui,sans-serif!important;font-size:16px!important;font-weight:600!important;letter-spacing:0!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 28px -14px rgba(10,22,51,.45)!important;transition:transform .15s cubic-bezier(.22,1,.36,1)!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.sx-btn,.pp-btn,.nv-btn,.hv-btn,.hb-playbig,.hb-read,.px-fbtn,.fn-more,.hx-open,.px-btn,.fn-all,.px-cbtn,.px-li,.sm-cta):active{transform:scale(.97)}
  /* clear glass on blue and navy */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.sx-btn.ghost,.nv-btn.g,.hv-btn.ghost,.hb-read,.hb-read-d){
    background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1))!important;color:#fff!important;border-color:transparent!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.6)!important;backdrop-filter:blur(18px) saturate(1.6)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.28),0 10px 26px -12px rgba(10,22,51,.45)!important}
  /* white glass where the button is white */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.nv-btn.w,.hv-btn:not(.ghost),.fn-more,.px-fbtn,.px-li){
    background:linear-gradient(180deg,#fff,#eef3ff)!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(10,22,51,.07),0 12px 28px -14px rgba(10,22,51,.45)!important}
  /* blue glass where the button is blue */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) :is(.sm-cta){background:linear-gradient(180deg,#3d76ff,#1559f5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 14px 30px -12px rgba(21,89,245,.6)!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){html.sh-on #sh-tabs .sh-tab,html body :is(.sx-btn,.pp-btn,.nv-btn,.hv-btn){transition:none!important}}