/* Shared V2 navigation. Floating capsule, full-label disclosures, compact mobile menu. */
:root {
  --nav-top:16px;
  --nav-height:72px;
  --header:104px;
  scroll-padding-top:calc(var(--header) + 24px);
}
body { padding-top:0; }
/* Reserve header clearance inside the first hero so its own background paints
   continuously from the top of the page. Keep existing hero padding intact. */
#main > section:first-child,
#main > div:first-child > section:first-child,
#main > .resource-page > article:first-child > .ba-hero:first-child {
  border-block-start:var(--header) solid transparent;
  background-origin:border-box;
  background-clip:border-box;
}
/* Release articles have no full-width hero, but still need header clearance. */
#main > .resource-page:has(> .wn-release) { padding-top:var(--header); }
.site-header {
  position:fixed; inset:var(--nav-top) 0 auto; margin-inline:auto;
  width:min(1360px,calc(100% - 48px)); height:var(--nav-height); z-index:60;
  background:rgb(255 255 255 / 96%); border:1px solid rgb(229 230 238 / 85%);
  border-radius:999px; backdrop-filter:blur(20px);
  box-shadow:0 8px 36px #171a2e07,0 2px 5px #171a2e02;
  transition:box-shadow .2s,border-color .2s;
}
.site-header.is-scrolled { border-color:#e5e5ef; box-shadow:0 10px 40px #171a2e12,0 2px 6px #171a2e05; }
.header-inner { width:100%; height:100%; margin:0; padding:10px 12px 10px 26px; display:flex; align-items:center; gap:22px; position:relative; }
.brand { display:flex; align-items:center; min-height:44px; border-radius:8px; }
.brand img { width:130px; height:auto; }
.main-nav { display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:auto; }
.nav-item { display:flex; align-items:center; }
.nav-title,.nav-direct {
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:11px 13px; border:0; border-radius:999px;
  background:transparent; font-size:.9375rem; font-weight:550; line-height:1.4;
  white-space:nowrap; color:#505568; transition:color .16s,background .16s;
}
.nav-title:hover,.nav-direct:hover { color:var(--ink); background:#f4f4f8; }
.nav-label-button[aria-expanded=true],.nav-direct[aria-current=page],.nav-item.is-current>.nav-title { color:#5330c1; background:#f0ecff; }
.nav-label-button>.icon { width:13px; height:13px; margin:0; flex:none; transition:transform .18s; }
.nav-label-button[aria-expanded=true]>.icon { transform:rotate(180deg); }
.header-actions { display:flex; align-items:center; gap:17px; margin:0; flex-shrink:0; }
.header-actions .login,.header-demo { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; font-weight:550; white-space:nowrap; color:#51566a; }
.header-actions .login:hover,.header-demo:hover { color:var(--purple); }
.header-actions .header-trial { min-height:48px; padding:12px 22px; border:1px solid #111b2e; border-radius:999px; background:#111b2e; color:#fff; font-size:.9375rem; font-weight:550; white-space:nowrap; box-shadow:0 4px 8px #111b2e17; }
.header-actions .header-trial:hover { background:#5330c1; border-color:#5330c1; transform:none; box-shadow:0 5px 12px #5330c124; }
.site-header a:focus-visible,.site-header button:focus-visible { outline:3px solid #8865ec; outline-offset:3px; }
.mobile-toggle,.mobile-actions { display:none; }

.nav-panel {
  position:absolute; top:calc(100% + 12px); left:0; right:0; padding:28px;
  background:#fff; border:1px solid #e5e5ef; border-radius:24px;
  box-shadow:0 24px 64px #15192c1c,0 4px 12px #15192c06;
  max-height:calc(100dvh - var(--header) - 20px); overflow-y:auto; overscroll-behavior:contain;
}
.nav-panel::before { display:none; }
.menu-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 2px 21px; margin-bottom:22px; border-bottom:1px solid #ededf3; }
.menu-intro>strong { font-size:1.125rem; font-weight:600; letter-spacing:-.025em; }
.menu-intro .text-link { font-size:.875rem; flex-shrink:0; }
.menu-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(230px,.95fr); align-items:start; gap:24px; }
.menu-group { min-width:0; }
.menu-label { color:#777b8e; font-size:.8125rem; font-weight:600; letter-spacing:.035em; text-transform:none; margin:0 0 12px; padding-left:7px; }
.menu-link { display:flex; align-items:flex-start; gap:12px; margin:0 -3px; padding:12px 8px; border-radius:13px; transition:background .16s; }
.menu-link:hover,.menu-link:focus-visible,.menu-link[aria-current=page] { background:#f6f4fc; }
.menu-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid #e9e7f1; border-radius:11px; flex:0 0 36px; color:#62667c; background:#fafafe; transition:color .16s,background .16s,border-color .16s; }
.menu-icon .icon { width:19px; height:19px; stroke-width:1.7; }
.menu-link:hover .menu-icon,.menu-link:focus-visible .menu-icon,.menu-link[aria-current=page] .menu-icon { color:#6335ed; background:#ece6ff; border-color:#e2d7ff; }
.menu-copy { display:block; min-width:0; padding-top:1px; }
.menu-title { display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; }
.menu-link strong { display:block; font-size:.9375rem; font-weight:600; line-height:1.4; }
.menu-link small { display:block; font-size:.875rem; line-height:1.5; color:#737789; margin-top:5px; }
.menu-badge { display:inline-flex; align-items:center; background:#f0eaff; color:#6240b2; padding:2px 6px; border-radius:5px; font-size:.75rem; line-height:1.4; font-weight:550; }
.menu-preview-card { align-self:stretch; padding:22px; display:flex; flex-direction:column; background:#f5f2fc; border:1px solid #ece7f6; border-radius:18px; min-width:0; }
.menu-preview-label { display:block; font-size:.8125rem; line-height:1.5; font-weight:550; color:#706580; margin-bottom:18px; }
.menu-preview-card>strong { font-size:1.4rem; line-height:1.22; font-weight:600; letter-spacing:-.035em; color:#29223c; }
.menu-example-note { display:block; font-size:.75rem; color:#766b84; margin-top:9px; }
.menu-preview-card>.text-link { border-top:1px solid #e4deee; padding-top:17px; margin-top:21px; gap:9px; font-size:.875rem; }
#menu-features .menu-preview-card>.text-link { margin-top:auto; }
.menu-design-preview { position:relative; width:100%; aspect-ratio:1.06; margin:0 0 22px; }
.menu-real-templates>img { position:absolute; height:auto; display:block; border:3px solid #fff; border-radius:4px; box-shadow:0 9px 18px #1e173128; }
.menu-real-templates>.menu-real-post { width:70%; left:0; top:8%; transform:rotate(-6deg); z-index:2; }
.menu-real-templates>.menu-real-story { width:47%; right:0; top:0; transform:rotate(7deg); }
.menu-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px 24px; margin-top:24px; padding:19px 2px 0; border-top:1px solid #ededf3; font-size:.875rem; color:#727487; }
.menu-utilities { display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px; }
.menu-utilities>a { display:inline-flex; align-items:center; gap:8px; color:#626579; }
.menu-utilities .icon { width:18px; height:18px; color:#787b8e; }
.menu-demo-link { display:inline-flex; align-items:center; gap:9px; color:#5735a0; font-weight:600; margin-left:auto; }
.menu-demo-link .icon { width:18px; height:18px; }
.menu-demo-link:hover,.menu-utilities>a:hover { text-decoration:underline; text-underline-offset:4px; }
.guide-menu { grid-template-columns:1fr 1fr minmax(250px,.9fr); gap:30px; }
.guide-menu .menu-link { padding-block:15px; margin-bottom:6px; }
.menu-start-card { align-self:stretch; background:#f4f5f9; border:1px solid #e8e9f1; border-radius:18px; color:var(--ink); padding:24px; overflow:hidden; }
.menu-start-card .menu-preview-label { color:#686d83; margin-bottom:14px; }
.menu-start-card>strong { display:block; font-size:1.7rem; letter-spacing:-.035em; line-height:1.15; font-weight:600; }
.menu-start-card>p { color:#6d7287; font-size:.875rem; line-height:1.6; margin-top:14px; }
.menu-start-card>.text-link { font-size:.875rem; margin-top:19px; }
.menu-editor-preview { display:block; margin-top:25px; border:1px solid #e2e2ed; border-radius:9px; overflow:hidden; box-shadow:0 6px 14px #141b2e0c; }
.menu-editor-preview img { display:block; width:100%; height:auto; }
.nav-panel.compact { left:auto; right:var(--menu-right,0px); width:350px; padding:14px; }
.nav-panel.compact .menu-link { margin:0; padding:14px 11px; }
.menu-backdrop { position:fixed; inset:0; background:#12192c12; z-index:50; }

@media(min-width:1241px) and (max-width:1380px) {
  .header-inner { gap:14px; padding-left:22px; }
  .brand img { width:124px; }
  .nav-title,.nav-direct { padding-inline:10px; }
  .header-actions { gap:13px; }
  .header-actions .header-trial { padding-inline:18px; }
  .menu-grid { gap:18px; }
  .menu-link { gap:9px; }
  .menu-preview-card { padding:19px; }
}
@media(max-width:1240px) {
  :root { --nav-top:12px; --nav-height:68px; --header:92px; }
  body.mobile-nav-open { overflow:hidden; }
  .site-header { width:calc(100% - 32px); }
  .header-inner { width:100%; gap:16px; padding:9px 10px 9px 23px; }
  .brand img { width:130px; }
  .header-actions { margin-left:auto; gap:20px; }
  .header-actions .login { display:none; }
  .header-actions .header-trial { min-height:46px; }
  .mobile-toggle { display:flex; flex-shrink:0; width:44px; height:44px; align-items:center; justify-content:center; margin:0; padding:0; background:#f3f3f8; border:0; border-radius:50%; color:#222b40; }
  .mobile-toggle:hover { background:#ebe7f8; color:#6335ed; }
  .mobile-toggle .icon { width:22px; height:22px; }
  .mobile-toggle .icon:last-child { display:none; }
  .mobile-toggle[aria-expanded=true] .icon:first-child { display:none; }
  .mobile-toggle[aria-expanded=true] .icon:last-child { display:block; }
  .main-nav { display:none; position:absolute; top:calc(100% + 10px); left:0; right:0; margin:0; padding:16px 24px 24px; background:#fff; border:1px solid #e5e5ef; border-radius:24px; box-shadow:0 20px 50px #171a2e24; max-height:calc(100dvh - var(--header) - 16px); overflow-y:auto; overscroll-behavior:contain; }
  .main-nav.is-open { display:block; }
  .nav-item { display:flex; flex-wrap:wrap; border-bottom:1px solid #ededf3; padding:4px 0; }
  .nav-title { flex:1; justify-content:space-between; white-space:normal; font-size:1rem; min-height:52px; padding:14px 12px; border-radius:12px; }
  .nav-label-button>.icon { margin-left:auto; }
  .nav-direct { display:flex; justify-content:flex-start; font-size:1rem; padding:18px 12px; border-radius:0; border-bottom:1px solid #ededf3; }
  .nav-panel,.nav-panel.compact,.nav-panel.audiences,.nav-panel.resources { position:static; flex-basis:100%; width:100%; padding:17px 8px 24px; border:0; border-radius:0; box-shadow:none; max-height:none; overflow:visible; }
  .nav-panel.compact .menu-link { padding-inline:8px; }
  .menu-intro { padding-bottom:15px; margin-bottom:19px; gap:16px; }
  .menu-intro>strong { font-size:1rem; }
  .menu-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .guide-menu { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .menu-preview-card,.menu-start-card { display:none; }
  .menu-footer { margin-top:20px; padding-top:16px; }
  .mobile-actions { display:flex; flex-wrap:wrap; gap:14px; padding:22px 8px 0; align-items:center; }
  .mobile-actions .login { display:flex; gap:9px; align-items:center; min-height:44px; margin-right:auto; font-size:1rem; }
  .mobile-actions .login .icon { width:17px; height:17px; }
  .mobile-actions .button { font-size:.875rem; padding:12px 18px; border-radius:999px; }
  .menu-backdrop { display:block!important; }
  .menu-backdrop[hidden] { display:none!important; }
}
@media(max-width:900px) {
  .menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  :root { --nav-top:10px; --nav-height:64px; --header:84px; }
  .site-header { width:calc(100% - 24px); }
  .header-inner { width:100%; gap:10px; padding:8px 8px 8px 17px; }
  .brand img { width:112px; }
  .header-actions { gap:0; }
  .header-actions .header-demo { display:none; }
  .header-actions .button.header-trial { display:inline-flex; min-height:44px; padding:10px 15px; font-size:.875rem; }
  .mobile-toggle { width:42px; height:42px; }
  .main-nav { left:0; right:0; padding:12px 15px 20px; border-radius:22px; }
}
@media(max-width:600px) {
  .menu-grid,.guide-menu { grid-template-columns:1fr; gap:22px; }
  .menu-intro { align-items:flex-start; flex-direction:column; gap:9px; }
  .menu-label { font-size:.875rem; margin-bottom:6px; }
  .menu-link { padding-block:12px; }
  .menu-link strong { font-size:1rem; }
  .menu-link small { font-size:.875rem; }
  .guide-menu .menu-link { margin-bottom:0; }
  .menu-footer { align-items:flex-start; flex-direction:column; gap:16px; }
  .menu-demo-link { margin-left:0; }
}
@media(max-width:360px) {
  .site-header { width:calc(100% - 16px); }
  .header-inner { width:100%; padding-left:12px; gap:8px; }
  .brand img { width:94px; }
  .header-actions .button.header-trial { padding-inline:11px; }
  .mobile-toggle { width:40px; }
  .main-nav { left:0; right:0; padding-inline:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header,.nav-title,.nav-direct,.menu-link,.menu-icon,.nav-label-button>.icon { transition:none; }
}