/* deia floating nav: a rounded glass bar that hovers above the page with a soft 3D lift.
   Shared by the homepage (#nav .bar), product/help pages (header.nav .wrap) and Afterglow Daily (nav.top .wrap). */
:root{
  --fn-top:14px;
  --fn-h:60px;
  --fn-glass:rgba(255,247,248,.74);
  --fn-edge:rgba(255,255,255,.75);
  --fn-ink:#111;
  --fn-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(58,34,41,.06) inset,
    0 2px 4px rgba(58,34,41,.06),
    0 12px 28px -8px rgba(58,34,41,.22),
    0 30px 60px -24px rgba(58,34,41,.28);
  --fn-shadow-up:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(58,34,41,.07) inset,
    0 3px 6px rgba(58,34,41,.08),
    0 18px 40px -10px rgba(58,34,41,.3),
    0 40px 80px -30px rgba(58,34,41,.35);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fn-glass:rgba(24,19,20,.72);--fn-edge:rgba(255,247,248,.14);--fn-ink:#FFF7F8;
  --fn-shadow:0 1px 0 rgba(255,247,248,.12) inset,0 2px 4px rgba(0,0,0,.3),0 14px 34px -8px rgba(0,0,0,.6),0 34px 70px -24px rgba(0,0,0,.7);
  --fn-shadow-up:var(--fn-shadow)}}
:root[data-theme="dark"]{
  --fn-glass:rgba(24,19,20,.72);--fn-edge:rgba(255,247,248,.14);--fn-ink:#FFF7F8;
  --fn-shadow:0 1px 0 rgba(255,247,248,.12) inset,0 2px 4px rgba(0,0,0,.3),0 14px 34px -8px rgba(0,0,0,.6),0 34px 70px -24px rgba(0,0,0,.7);
  --fn-shadow-up:var(--fn-shadow)}

/* the outer header becomes an invisible sticky rail */
#nav.nav, header.nav, nav.top{
  position:sticky !important;
  top:calc(env(safe-area-inset-top,0px) + var(--fn-top)) !important;
  z-index:60 !important;
  background:none !important;
  border:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:0 max(14px,env(safe-area-inset-left,0px)) !important;
  margin-top:var(--fn-top);
  pointer-events:none;
}
#nav.nav{margin-bottom:6px}

/* the bar itself */
#nav > .bar, header.nav > .wrap, nav.top > .wrap{
  pointer-events:auto;
  position:relative;
  max-width:1180px !important;
  margin:0 auto !important;
  height:var(--fn-h) !important;
  padding:0 10px 0 26px !important;
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 46%),
    var(--fn-glass);
  -webkit-backdrop-filter:saturate(1.9) blur(22px); backdrop-filter:saturate(1.9) blur(22px);
  border:1px solid var(--fn-edge);
  box-shadow:var(--fn-shadow);
  transform:translateZ(0);
  transition:height .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,transform .45s cubic-bezier(.2,.7,.2,1),max-width .45s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #nav > .bar,:root:not([data-theme="light"]) header.nav > .wrap,:root:not([data-theme="light"]) nav.top > .wrap{
  background:linear-gradient(180deg,rgba(255,247,248,.07) 0%,rgba(255,247,248,0) 50%),var(--fn-glass)}}

/* scrolled: tighten and lift */
.fn-scrolled > .bar, .fn-scrolled > .wrap{
  height:calc(var(--fn-h) - 6px) !important;
  max-width:1080px !important;
  box-shadow:var(--fn-shadow-up) !important;
}

/* links as soft pills */
#nav > .bar ul{gap:2px !important}
#nav > .bar ul a, #nav > .bar ul button{
  display:inline-flex !important; align-items:center; height:40px; line-height:1;
  padding:0 15px !important; border-radius:999px; opacity:.82; font-size:14.5px;
  transition:background .25s, opacity .25s, transform .25s;
}
#nav > .bar ul a:hover, #nav > .bar ul button:hover, #nav > .bar ul button[aria-expanded="true"]{
  background:rgba(17,17,17,.06); opacity:1;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #nav > .bar ul a:hover,:root:not([data-theme="light"]) #nav > .bar ul button:hover{background:rgba(255,247,248,.1)}}
#nav > .bar .right{gap:6px !important}

/* bag button: a solid ink capsule that sits inside the bar */
#nav .bagbtn{
  background:var(--fn-ink); color:var(--bg,#FFF7F8) !important;
  padding:0 10px 0 16px !important; height:42px; border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 14px -6px rgba(17,17,17,.5);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;
}
#nav .bagbtn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 20px -8px rgba(17,17,17,.55)}
#nav .bagbtn b{background:var(--rose,#E98AA0) !important;color:#111 !important}

/* mega menu drops as a floating card under the bar */
#nav .mega{
  left:50% !important; right:auto !important;
  width:min(1180px,calc(100vw - 28px));
  top:calc(100% + 10px) !important;
  transform:translate(-50%,-8px) scale(.985) !important;
  border-radius:28px; border:1px solid var(--fn-edge) !important;
  box-shadow:var(--fn-shadow-up); overflow:hidden; pointer-events:none;
}
#nav .mega.on{transform:translate(-50%,0) scale(1) !important;pointer-events:auto}

/* mobile */
@media (max-width:900px){
  :root{--fn-top:10px;--fn-h:56px}
  #nav > .bar, header.nav > .wrap, nav.top > .wrap{padding:0 8px 0 18px !important}
  #nav .burger{margin-left:-6px}
  #nav .bagbtn{height:40px;padding:0 8px 0 12px !important}
}
@media (prefers-reduced-motion:reduce){
  #nav > .bar, header.nav > .wrap, nav.top > .wrap, #nav .bagbtn{transition:none}
}

/* ---------- homepage: melt the bar into the hero ---------- */
:root{--fn-space:calc(var(--fn-top) + var(--fn-h) + 6px)}
#nav.nav{margin-bottom:calc(-1 * var(--fn-space)) !important}
/* hero grows under the bar; its backdrop extends up behind it, the content steps down */
.launch{height:calc(min(calc(100svh - 150px),900px) + var(--fn-space)) !important}
.launch .ls{top:var(--fn-space)}
.launch .ls .bgx{top:calc(-1 * var(--fn-space))}
@media (max-width:820px){
  .launch{height:auto !important}
  .launch .ls{top:0;padding-top:calc(28px + var(--fn-space))}
  .launch .ls .bgx{top:0}
}

/* while over the hero: clear tinted glass that takes the slide's own ink */
#nav.fn-hero{--fn-ink:var(--fn-slide,#3B1C2D)}
#nav.fn-hero > .bar{
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 100%) !important;
  border-color:rgba(255,255,255,.5) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 10px 30px -14px rgba(20,10,20,.35) !important;
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
}
#nav.fn-hero > .bar ul a, #nav.fn-hero > .bar ul button, #nav.fn-hero .wordmark, #nav.fn-hero .burger{color:var(--fn-slide,#3B1C2D) !important}
#nav.fn-hero .burger span{background:var(--fn-slide,#3B1C2D) !important}
#nav.fn-hero > .bar ul a:hover, #nav.fn-hero > .bar ul button:hover, #nav.fn-hero > .bar ul button[aria-expanded="true"]{background:rgba(255,255,255,.28) !important}
#nav.fn-hero .bagbtn{background:var(--fn-slide,#3B1C2D) !important;color:var(--fn-slide-bg,#F2DED9) !important}
#nav.fn-hero.fn-dark > .bar{
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 100%) !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 14px 34px -14px rgba(0,0,0,.6) !important;
}
#nav.fn-hero.fn-dark > .bar ul a:hover, #nav.fn-hero.fn-dark > .bar ul button:hover{background:rgba(255,255,255,.12) !important}
#nav > .bar, #nav > .bar ul a, #nav > .bar ul button, #nav .wordmark, #nav .bagbtn{transition:background .6s, color .6s, border-color .6s, box-shadow .6s, height .45s cubic-bezier(.2,.7,.2,1), max-width .45s cubic-bezier(.2,.7,.2,1)}