@import url('../css/ms-liquid-glass.css?v=20260828_global_v3');
/*
 * MarketSync public marketing shell — shared chrome styling.
 *
 * Self-contained (no Tailwind dependency): the approved mega-menu header +
 * footer render identically on every public page. Automatic OS dark/light via
 * prefers-color-scheme (no manual toggle, no flash). This is the design that
 * previously lived in site-nav.js, now the single shared shell.
 *
 * Active-page item highlighting adds .ms-active.
 */
:root{--ms-accent:#2563eb;
--ms-ink:#0b1220;
--ms-fg:#e5e7eb;
}
.ms-hd{position:sticky;
top:0;
z-index:60;
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px);
background:rgba(255,255,255,.72);
border-bottom:1px solid rgba(0,0,0,.06);
transition:background .3s,box-shadow .3s,height .3s;
}
@media (prefers-color-scheme:dark){.ms-hd{background:rgba(11,18,32,.72);
border-bottom-color:rgba(255,255,255,.08);
}
}
.ms-hd.ms-scrolled{box-shadow:0 1px 20px rgba(0,0,0,.08);
}
.ms-hd-in{max-width:1600px;
margin:0 auto;
height:68px;
display:flex;
align-items:center;
gap:24px;
padding:0 32px;
}
.ms-logo{display:inline-flex;
align-items:center;
position:relative;
width:192px;
height:48px;
overflow:hidden;
flex:0 0 192px;
color:#0b1220;
text-decoration:none;
}
.ms-logo img{position:absolute;
width:224px!important;
height:auto!important;
max-width:none!important;
left:-16px;
top:-58px;
}
.ms-logo-sm{width:166px;
height:42px;
flex-basis:166px;
}
.ms-logo-sm img{width:194px!important;
left:-14px;
top:-50px;
}
@media (prefers-color-scheme:dark){.ms-logo{color:#fff;}
}
.ms-logo-bar{width:6px;
height:22px;
border-radius:3px;
background:var(--ms-accent);
}
.ms-logo-accent{color:var(--ms-accent);
}
/* Logo light/dark swap — plain CSS (no Tailwind dependency, matches every public
   page whether or not it happens to load Tailwind). */
.ms-logo-light{display:inline-block;
}
.ms-logo-dark{display:none;
}
@media (prefers-color-scheme:dark){.ms-logo-light{display:none;
}
.ms-logo-dark{display:inline-block;
}
}
.ms-nav-desktop{display:none;
align-items:center;
gap:4px;
margin-right:auto;
}
.ms-nav-item{position:relative;
}
.ms-nav-link,.ms-nav-btn{font:inherit;
font-size:14px;
font-weight:600;
color:#334155;
background:none;
border:0;
cursor:pointer;
padding:8px 12px;
border-radius:9px;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:4px;
transition:color .2s,background .2s;
}
@media (prefers-color-scheme:dark){.ms-nav-link,.ms-nav-btn{color:#cbd5e1;
}
}
.ms-nav-link:hover,.ms-nav-btn:hover{color:var(--ms-accent);
background:rgba(37,99,235,.08);
}
.ms-caret{width:15px;
height:15px;
stroke:currentColor;
stroke-width:1.6;
fill:none;
transition:transform .2s;
}
.ms-nav-item:hover .ms-caret{transform:rotate(180deg);
}
.ms-dropdown{position:absolute;
top:calc(100% + 8px);
left:0;
min-width:230px;
background:#fff;
border:1px solid rgba(0,0,0,.08);
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,.16);
padding:8px;
opacity:0;
visibility:hidden;
transform:translateY(6px);
transition:.18s;
}
.ms-dd-wide{min-width:320px;
}
@media (prefers-color-scheme:dark){.ms-dropdown{background:#0f172a;
border-color:rgba(255,255,255,.1);
}
}
.ms-nav-item:hover .ms-dropdown{opacity:1;
visibility:visible;
transform:translateY(0);
}
.ms-dd-item{display:block;
padding:10px 12px;
border-radius:11px;
text-decoration:none;
transition:background .15s;
}
.ms-dd-item:hover{background:rgba(37,99,235,.08);
}
.ms-dd-t{display:block;
font-size:14px;
font-weight:700;
color:#0b1220;
}
.ms-dd-d{display:block;
font-size:12.5px;
color:#64748b;
margin-top:2px;
}
@media (prefers-color-scheme:dark){.ms-dd-t{color:#fff;
}
.ms-dd-d{color:#94a3b8;
}
}
.ms-dd-group-label{display:block;
font-size:10.5px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
text-decoration:none;
padding:10px 12px 4px;
transition:color .15s;
}
.ms-dd-group-label:first-child{padding-top:6px;
}
.ms-dd-group-label:hover{color:var(--ms-accent);
}
.ms-m-label-link{text-decoration:none;
cursor:pointer;
}
.ms-m-label-link:hover{color:var(--ms-accent);
}
.ms-nav-cta{display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}
.ms-link-quiet{display:none;
font-size:14px;
font-weight:600;
color:#334155;
text-decoration:none;
padding:8px 10px;
}
@media (prefers-color-scheme:dark){.ms-link-quiet{color:#cbd5e1;
}
}
.ms-btn{display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
font:inherit;
font-weight:700;
font-size:14px;
border-radius:999px;
padding:9px 18px;
text-decoration:none;
border:1px solid transparent;
cursor:pointer;
transition:transform .15s,box-shadow .2s,background .2s;
white-space:nowrap;
}
.ms-btn:active{transform:scale(.97);
}
.ms-btn-primary{background:var(--ms-accent);
color:#fff;
box-shadow:0 6px 20px rgba(37,99,235,.35);
}
.ms-btn-primary:hover{background:#1d4ed8;
box-shadow:0 8px 26px rgba(37,99,235,.5);
}
.ms-btn-ghost{background:rgba(37,99,235,.08);
color:var(--ms-accent);
}
.ms-btn-ghost:hover{background:rgba(37,99,235,.16);
}
.ms-btn-lg{padding:14px 28px;
font-size:16px;
}
.ms-btn-block{width:100%;
}
.ms-burger{display:inline-flex;
flex-direction:column;
justify-content:center;
gap:5px;
width:40px;
height:40px;
border:0;
background:none;
cursor:pointer;
padding:0 8px;
}
.ms-burger span{display:block;
height:2px;
border-radius:2px;
background:#0b1220;
transition:.25s;
}
@media (prefers-color-scheme:dark){.ms-burger span{background:#fff;
}
}
.ms-burger.ms-open span:nth-child(1){transform:translateY(7px) rotate(45deg);
}
.ms-burger.ms-open span:nth-child(2){opacity:0;
}
.ms-burger.ms-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);
}
.ms-mobile{position:fixed;
top:68px;
left:0;
right:0;
bottom:0;
background:#fff;
padding:18px 22px 40px;
overflow-y:auto;
z-index:59;
}
@media (prefers-color-scheme:dark){.ms-mobile{background:#0b1220;
}
}
.ms-m-label{font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
color:#94a3b8;
margin:18px 0 6px;
}
.ms-m-link{display:block;
font-size:18px;
font-weight:700;
color:#0b1220;
text-decoration:none;
padding:10px 0;
border-bottom:1px solid rgba(0,0,0,.06);
}
.ms-m-top{margin-top:6px;
}
@media (prefers-color-scheme:dark){.ms-m-link{color:#fff;
border-bottom-color:rgba(255,255,255,.08);
}
}
.ms-m-actions{margin-top:24px;
display:grid;
gap:10px;
}
.ms-m-actions-top{margin:0 0 16px;
grid-template-columns:1fr 1fr;
}
/* Below the desktop-nav breakpoint the burger owns navigation and the mobile
   sheet carries every CTA (Log in / Start / Book a demo). Hide the header's own
   CTA buttons here so they neither duplicate the sheet's actions nor overlap the
   open panel — only the logo and burger remain in the bar. */
@media (max-width:899.98px){.ms-nav-cta>.ms-btn{display:none;
}
}
@media (max-width:420px){.ms-hd-in{padding:0 16px;
gap:10px;
}
.ms-logo{width:166px;
flex-basis:166px;
}
.ms-logo img{width:194px!important;
left:-14px;
top:-50px;
}
.ms-m-actions-top{grid-template-columns:1fr;
}
}
@media (min-width:900px){.ms-nav-desktop{display:flex;
}
.ms-link-quiet{display:inline-block;
}
.ms-burger{display:none;
}
}
.ms-ft{background:#0b1220;
color:#94a3b8;
margin-top:0;
}
.ms-f-cta{max-width:800px;
margin:0 auto;
padding:88px 22px 64px;
text-align:center;
}
.ms-f-cta h2{font-size:clamp(30px,5vw,46px);
font-weight:800;
letter-spacing:-.03em;
color:#fff;
margin:0 0 14px;
line-height:1.05;
}
.ms-f-cta p{font-size:17px;
line-height:1.6;
max-width:620px;
margin:0 auto 26px;
}
.ms-f-cta-btns{display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}
.ms-f-cta-note{margin-top:16px;
font-size:13px;
color:#64748b;
}
.ms-f-grid{max-width:1600px;
margin:0 auto;
padding:52px 32px;
display:grid;
grid-template-columns:1.4fr repeat(4,1fr);
gap:32px;
border-top:1px solid rgba(255,255,255,.08);
}
@media (max-width:860px){.ms-f-grid{grid-template-columns:1fr 1fr;
}
}
.ms-f-brand p{margin-top:12px;
font-size:14px;
max-width:230px;
}
.ms-f-h{font-size:12px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.08em;
color:#e2e8f0;
margin-bottom:14px;
}
.ms-f-col a{display:block;
font-size:14px;
color:#94a3b8;
text-decoration:none;
padding:5px 0;
transition:color .15s;
}
.ms-f-col a:hover{color:#fff;
}
.ms-f-bottom{max-width:1600px;
margin:0 auto;
padding:22px 32px;
font-size:13px;
border-top:1px solid rgba(255,255,255,.08);
}
.ms-reveal{opacity:0;
transform:translateY(28px);
transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
}
.ms-reveal.ms-in{opacity:1;
transform:none;
}
@media (prefers-reduced-motion:reduce){.ms-reveal{opacity:1;
transform:none;
transition:none;
}
}

/* Active-page highlighting */
.ms-nav-link.ms-active,.ms-dd-item.ms-active .ms-dd-t,.ms-m-link.ms-active{color:var(--ms-accent);}
.ms-dd-item.ms-active{background:rgba(37,99,235,.08);}