/* Crevyro premium public navigation — 2026-08-08
   Final override loaded after the legacy public styles so the menu/header behavior
   cannot be undone by older ManyChat-era CSS. */

:root{
  --ac-nav-surface:#eef2ec;
  --ac-nav-card:rgba(255,255,255,.78);
  --ac-nav-ink:#101111;
  --ac-nav-muted:#626761;
  --ac-nav-line:rgba(15,20,16,.10);
  --ac-nav-ease:cubic-bezier(.22,.86,.24,1);
}

/* -------------------------------------------------------------------------- */
/* Full-viewport mobile menu                                                   */
/* -------------------------------------------------------------------------- */
.public-nav-drawer{
  position:fixed!important;
  inset:0!important;
  z-index:2200!important;
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ac-nav-surface)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-100%,0)!important;
  transition:
    transform .46s cubic-bezier(.76,0,.24,1),
    opacity .18s ease,
    visibility 0s linear .46s!important;
  will-change:transform;
}
.public-nav-drawer.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
  transition:
    transform .46s cubic-bezier(.22,.86,.24,1),
    opacity .16s ease,
    visibility 0s linear 0s!important;
}
.public-nav-inner{
  width:min(100%,1320px)!important;
  min-height:100%!important;
  margin:0 auto!important;
  padding:max(14px,env(safe-area-inset-top)) clamp(18px,4vw,60px) max(28px,env(safe-area-inset-bottom))!important;
}
.public-nav-scrim{
  display:none!important;
  opacity:0!important;
  pointer-events:none!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.public-nav-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:54px!important;
  gap:16px!important;
  padding:0!important;
  border:0!important;
}
.public-nav-brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
  color:var(--ac-nav-ink)!important;
  text-decoration:none!important;
}
.public-brand-image-element{
  display:block!important;
  width:25px!important;
  height:25px!important;
  object-fit:contain!important;
  flex:0 0 auto!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.public-nav-brand-copy{
  display:block!important;
  line-height:1!important;
}
.public-nav-brand-copy strong{
  display:block!important;
  color:var(--ac-nav-ink)!important;
  font:900 1.18rem/1 "Rooftop",system-ui,sans-serif!important;
  letter-spacing:-.055em!important;
}
.public-nav-brand-copy small{display:none!important}
.public-nav-close{
  position:relative!important;
  width:42px!important;
  height:42px!important;
  flex:0 0 auto!important;
  display:block!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.public-nav-close span{
  position:absolute;
  left:10px;
  top:20px;
  width:22px;
  height:1.8px;
  border-radius:999px;
  background:#151716;
  transform-origin:center;
  opacity:0;
  transition:transform .35s var(--ac-nav-ease),opacity .2s ease;
}
.public-nav-drawer.open .public-nav-close span{opacity:1}
.public-nav-drawer.open .public-nav-close span:first-child{transform:rotate(45deg)}
.public-nav-drawer.open .public-nav-close span:last-child{transform:rotate(-45deg)}

.public-nav-auth{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:10px!important;
  margin:26px 0 28px!important;
}
.public-nav-workspace{
  order:1!important;
  width:auto!important;
  min-width:128px!important;
  min-height:44px!important;
  padding:0 22px!important;
  border:0!important;
  border-radius:999px!important;
  background:#f320df!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(243,32,223,.19)!important;
  font:850 .78rem/1 "Rooftop",system-ui,sans-serif!important;
  letter-spacing:.02em!important;
  cursor:pointer!important;
}
.public-nav-login{
  order:2!important;
  width:auto!important;
  min-width:0!important;
  min-height:26px!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#262927!important;
  box-shadow:none!important;
  font:800 .73rem/1 "Rooftop",system-ui,sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.public-nav-workspace:hover{transform:translateY(-1px)!important;background:#e817d4!important}
.public-nav-login:hover{background:transparent!important;color:#000!important}

.public-nav-group{
  display:grid!important;
  width:100%!important;
  gap:6px!important;
  margin:0!important;
}
.public-nav-link,
.public-nav-expand summary{
  width:100%!important;
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid rgba(15,20,16,.055)!important;
  border-radius:5px!important;
  background:var(--ac-nav-card)!important;
  color:#181b18!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font:800 .79rem/1.15 "Rooftop",system-ui,sans-serif!important;
  transition:background .18s ease,transform .18s ease!important;
}
.public-nav-link:hover,
.public-nav-link.active,
.public-nav-expand summary:hover{
  background:#fff!important;
  color:#101110!important;
  transform:translateX(2px)!important;
}
.public-nav-link.active{box-shadow:inset 3px 0 0 #f320df!important}
.public-nav-expand{
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.public-nav-expand summary{list-style:none!important;cursor:pointer!important}
.public-nav-expand summary::-webkit-details-marker{display:none!important}
.public-nav-expand summary i{
  color:#343834!important;
  font:900 1rem/1 system-ui,sans-serif!important;
  transform:rotate(0deg)!important;
  transition:transform .24s var(--ac-nav-ease)!important;
}
.public-nav-expand[open] summary i{transform:rotate(180deg)!important}
.public-nav-submenu{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  padding:6px 0 0!important;
}
.public-nav-link.nested{
  min-height:44px!important;
  padding:0 13px!important;
  background:rgba(255,255,255,.48)!important;
  color:#565b56!important;
  font-size:.72rem!important;
  font-weight:700!important;
}

/* Stagger the menu content instead of making a card simply drop down. */
.public-nav-drawer .public-nav-head,
.public-nav-drawer .public-nav-auth,
.public-nav-drawer .public-nav-group > *{
  opacity:0;
  transform:translate3d(0,-14px,0);
  transition:opacity .25s ease,transform .36s var(--ac-nav-ease);
}
.public-nav-drawer.open .public-nav-head{opacity:1;transform:none;transition-delay:.10s}
.public-nav-drawer.open .public-nav-auth{opacity:1;transform:none;transition-delay:.16s}
.public-nav-drawer.open .public-nav-group > :nth-child(1){opacity:1;transform:none;transition-delay:.20s}
.public-nav-drawer.open .public-nav-group > :nth-child(2){opacity:1;transform:none;transition-delay:.23s}
.public-nav-drawer.open .public-nav-group > :nth-child(3){opacity:1;transform:none;transition-delay:.26s}
.public-nav-drawer.open .public-nav-group > :nth-child(4){opacity:1;transform:none;transition-delay:.29s}
.public-nav-drawer.open .public-nav-group > :nth-child(5){opacity:1;transform:none;transition-delay:.32s}

html.public-nav-open,body.public-nav-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
body.public-nav-open{left:0!important;right:0!important;width:100%!important}

/* Trigger: two lines, not the old three-line chunky icon. */
.mcv2-menu[data-public-menu]{
  position:relative!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  display:none!important;
  place-items:center!important;
  gap:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.mcv2-menu[data-public-menu] span{
  position:absolute!important;
  left:8px!important;
  width:22px!important;
  height:1.8px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transform-origin:center!important;
  transition:transform .34s var(--ac-nav-ease),opacity .18s ease!important;
}
.mcv2-menu[data-public-menu] span:first-child{transform:translateY(-3.5px)!important}
.mcv2-menu[data-public-menu] span:last-child{transform:translateY(3.5px)!important}
.mcv2-menu[data-public-menu][aria-expanded="true"] span:first-child{transform:translateY(0) rotate(45deg)!important}
.mcv2-menu[data-public-menu][aria-expanded="true"] span:last-child{transform:translateY(0) rotate(-45deg)!important}

/* -------------------------------------------------------------------------- */
/* Homepage header — transparent over hero, glass only after scrolling         */
/* -------------------------------------------------------------------------- */
#landing-view.acx-homepage .mcv2-header{
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:0!important;
  z-index:1100!important;
  min-height:68px!important;
  padding:0 clamp(18px,4vw,58px)!important;
  background:transparent!important;
  border-bottom:1px solid transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:
    min-height .32s var(--ac-nav-ease),
    background .32s ease,
    border-color .32s ease,
    box-shadow .32s ease,
    backdrop-filter .32s ease!important;
}
#landing-view.acx-homepage .mcv2-header .mcv2-brand{
  gap:0!important;
  color:#fff!important;
  transition:color .28s ease!important;
}
#landing-view.acx-homepage .mcv2-header .mcv2-brand strong{
  color:currentColor!important;
  font-size:clamp(1.22rem,1.9vw,1.58rem)!important;
  letter-spacing:-.055em!important;
}
#landing-view.acx-homepage .mcv2-header .mcv2-brand-logo{
  width:0!important;
  height:27px!important;
  margin-right:0!important;
  opacity:0!important;
  transform:translateX(-7px) scale(.72)!important;
  filter:none!important;
  overflow:hidden!important;
  transition:
    width .34s var(--ac-nav-ease),
    margin-right .34s var(--ac-nav-ease),
    opacity .20s ease,
    transform .34s var(--ac-nav-ease)!important;
}
#landing-view.acx-homepage .mcv2-header .mcv2-nav a,
#landing-view.acx-homepage .mcv2-header .mcv2-login,
#landing-view.acx-homepage .mcv2-header .mcv2-menu{
  color:#fff!important;
  transition:color .28s ease!important;
}
#landing-view.acx-homepage .mcv2-header.is-scrolled{
  min-height:62px!important;
  background:rgba(241,244,239,.88)!important;
  border-bottom-color:rgba(15,20,16,.08)!important;
  box-shadow:0 8px 28px rgba(12,18,13,.06)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15)!important;
}
#landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-brand,
#landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-nav a,
#landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-login,
#landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-menu{
  color:#101110!important;
}
#landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-brand-logo{
  width:27px!important;
  margin-right:8px!important;
  opacity:1!important;
  transform:none!important;
}
#landing-view.acx-homepage .mcv2-header .mcv2-pill{
  min-height:40px!important;
  padding:0 18px!important;
  font-size:.75rem!important;
  box-shadow:0 8px 20px rgba(243,32,223,.18)!important;
}

/* Fixed header overlays the first hero exactly like the reference. */
#landing-view.acx-homepage .mcv2-hero{min-height:100svh!important}

@media(max-width:980px){
  .mcv2-menu[data-public-menu]{display:grid!important}
  #landing-view.acx-homepage .mcv2-header{
    min-height:62px!important;
    padding:0 13px 0 14px!important;
    gap:10px!important;
  }
  #landing-view.acx-homepage .mcv2-header.is-scrolled{min-height:58px!important}
  #landing-view.acx-homepage .mcv2-header .mcv2-brand strong{font-size:1.14rem!important}
  #landing-view.acx-homepage .mcv2-header .mcv2-brand-logo{height:24px!important}
  #landing-view.acx-homepage .mcv2-header.is-scrolled .mcv2-brand-logo{width:24px!important;margin-right:7px!important}
  #landing-view.acx-homepage .mcv2-header-actions{gap:5px!important}
  #landing-view.acx-homepage .mcv2-header .mcv2-pill{
    min-height:36px!important;
    padding:0 15px!important;
    font-size:.68rem!important;
  }
  #landing-view.acx-homepage .mcv2-hero-copy{padding-top:108px!important}
  #landing-view.acx-homepage .mcv2-hero-copy h1{font-size:clamp(2.9rem,12.9vw,5.35rem)!important}
}

@media(max-width:560px){
  .public-nav-inner{padding:10px 12px max(24px,env(safe-area-inset-bottom))!important}
  .public-nav-head{min-height:48px!important}
  .public-brand-image-element{width:23px!important;height:23px!important}
  .public-nav-brand-copy strong{font-size:1.08rem!important}
  .public-nav-close{width:38px!important;height:38px!important}
  .public-nav-close span{left:8px;top:18px;width:21px}
  .public-nav-auth{margin:20px 0 22px!important;gap:8px!important}
  .public-nav-workspace{min-height:40px!important;min-width:118px!important;padding:0 19px!important;font-size:.70rem!important}
  .public-nav-login{font-size:.66rem!important}
  .public-nav-group{gap:5px!important}
  .public-nav-link,.public-nav-expand summary{min-height:46px!important;padding:0 12px!important;font-size:.73rem!important}
  .public-nav-submenu{grid-template-columns:1fr!important}
  .public-nav-link.nested{min-height:41px!important;font-size:.69rem!important}
  #landing-view.acx-homepage .mcv2-header{min-height:60px!important}
  #landing-view.acx-homepage .mcv2-header.is-scrolled{min-height:56px!important}
  #landing-view.acx-homepage .mcv2-header .mcv2-brand strong{font-size:1.08rem!important}
  #landing-view.acx-homepage .mcv2-header .mcv2-pill{min-height:34px!important;padding:0 14px!important;font-size:.64rem!important}
  #landing-view.acx-homepage .mcv2-hero-copy{padding-top:102px!important}
  #landing-view.acx-homepage .mcv2-hero-copy h1{font-size:12.8vw!important;line-height:.86!important}
}

@media(prefers-reduced-motion:reduce){
  .public-nav-drawer,
  .public-nav-drawer *,
  #landing-view.acx-homepage .mcv2-header,
  #landing-view.acx-homepage .mcv2-header *{transition:none!important}
}