/* Clareio marketing navigation — aligned to the homepage V39 header.
   Scoped to .home-matched-nav to leave articles, footer and other page elements alone. */
.topbar.home-matched-nav {
  position:fixed; inset:0 0 auto 0; z-index:1000; height:72px; padding:0;
  color:#f2efe8; background:transparent; border-bottom:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.topbar.home-matched-nav .navinner {
  height:72px; width:min(1440px,calc(100% - 48px)); max-width:none; margin-inline:auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:0;
}
.topbar.home-matched-nav .logo {
  justify-self:start; display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px; white-space:nowrap;
  font-size:21px; line-height:1; font-weight:600; letter-spacing:-.065em;
  background:rgba(12,15,15,.26); border:1px solid rgba(242,239,232,.09);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.topbar.home-matched-nav .logo .logo-word {
  display:inline-block; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:21px; line-height:1; font-weight:600; letter-spacing:-.065em; color:#d7e0e6;
}
.topbar.home-matched-nav .mark {
  flex:none; display:block; width:22px; height:22px; border-radius:7px;
  background:linear-gradient(145deg,#dce6eb,#aabac6);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  animation:clareioNavPulse 2.25s ease-out infinite;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1);
}
.topbar.home-matched-nav .logo:hover .mark {transform:rotate(90deg)}
@keyframes clareioNavPulse { 0%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 0 rgba(242,239,232,.36)} 80%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 0 8px rgba(242,239,232,0)} }
.topbar.home-matched-nav .navpills {
  justify-self:center; display:flex; align-items:center; gap:2px; height:42px; padding:4px;
  border-radius:999px; background:rgba(17,20,20,.69); border:1px solid rgba(241,242,239,.16);
  box-shadow:0 9px 26px rgba(0,0,0,.13);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  white-space:nowrap;
}
.topbar.home-matched-nav .navpills a {
  opacity:1; height:34px; padding:0 15px; border-radius:999px; display:flex;
  align-items:center; color:rgba(242,239,232,.82); font:400 14px/1 'Inter',system-ui,sans-serif;
  background:transparent; transition:background .2s,color .2s;
}
.topbar.home-matched-nav .navpills a:hover,
.topbar.home-matched-nav .navpills a:focus-visible {background:rgba(242,239,232,.08);color:#f2efe8}
.topbar.home-matched-nav .navright {
  justify-self:end; display:flex; justify-content:flex-end; align-items:center; gap:12px;
  font:400 14px/1 'Inter',system-ui,sans-serif;
}
.topbar.home-matched-nav .navlogin {
  display:inline-flex; align-items:center; height:40px; opacity:1; white-space:nowrap;
  padding:10px 14px; border-radius:999px; color:rgba(242,239,232,.82);
  background:rgba(12,15,15,.22); border:1px solid rgba(242,239,232,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font:400 14px/1 'Inter',system-ui,sans-serif;
}
.topbar.home-matched-nav .navright .cta {
  height:40px; min-height:0; padding:0 20px; gap:10px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  background:#f2efe8; color:#111312;
  font:500 14px/1 'Inter',system-ui,sans-serif;
}
.topbar.home-matched-nav .navright .cta:hover {background:#fff;transform:translateY(-1px)}
.topbar.home-matched-nav .hamburger {
  display:none; width:44px; height:44px; padding:0;
  border-radius:999px; border:1px solid rgba(242,239,232,.08);
  background:rgba(12,15,15,.22); color:#f2efe8;
  align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.topbar.home-matched-nav.scrolled .logo,
.topbar.home-matched-nav.scrolled .navlogin,
.topbar.home-matched-nav.scrolled .hamburger {background:rgba(12,15,15,.72)}
.topbar.home-matched-nav.scrolled .navpills {background:rgba(17,19,18,.82)}
/* Cream Academy pages need an opaque enough pill behind the silver-blue wordmark. */
.topbar.home-matched-nav.on-light .logo,
.topbar.home-matched-nav.on-light .navlogin,
.topbar.home-matched-nav.on-light .hamburger {background:rgba(12,15,15,.92)}
.topbar.home-matched-nav.on-light .navpills {background:rgba(17,19,18,.92)}
.topbar.home-matched-nav.on-light .navright .cta {
  background:#fff; border:1px solid rgba(17,19,18,.18);
  box-shadow:0 4px 18px rgba(17,19,18,.08);
}
.topbar.home-matched-nav .mobilemenu {
  position:fixed; top:72px; left:0; right:0; z-index:1001;
  background:rgba(17,19,18,.97); color:#f2efe8;
  border:0; border-bottom:1px solid rgba(242,239,232,.08);
  border-radius:0; box-shadow:0 20px 40px rgba(0,0,0,.2);
  padding:12px 24px 28px; display:flex; flex-direction:column;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  max-height:calc(100dvh - 72px); overflow-y:auto;
}
.topbar.home-matched-nav .mobilemenu[hidden] {display:none}
.topbar.home-matched-nav .mobilemenu a {
  display:block; padding:16px 0; border-bottom:1px solid rgba(242,239,232,.08);
  font:300 26px/1.2 'Fraunces',Georgia,serif; color:#f2efe8;
}
.topbar.home-matched-nav .mobilemenu a:last-child {border:0; color:#111312}
.topbar.home-matched-nav .mobilemenu .mobile-cta {
  margin-top:22px; padding:14px; border-radius:999px; text-align:center;
  font:500 16px/1.2 'Inter',system-ui,sans-serif; background:#f2efe8;
}
.topbar.home-matched-nav a:focus-visible,
.topbar.home-matched-nav button:focus-visible {outline:3px solid #8ba78b;outline-offset:3px}
@media(max-width:960px) {
  .topbar.home-matched-nav .navinner {grid-template-columns:auto 1fr}
  .topbar.home-matched-nav .navpills,
  .topbar.home-matched-nav .navlogin {display:none}
  .topbar.home-matched-nav .hamburger {display:flex}
}
@media(max-width:900px) {.topbar.home-matched-nav .logo {padding:9px 12px}}
@media(max-width:355px) {.topbar.home-matched-nav .navright .cta {display:none}}
@media(prefers-reduced-motion:reduce) {
  .topbar.home-matched-nav .mark {animation:none}
  .topbar.home-matched-nav .logo .mark {transition:none}
}