/* ── nav-global.css — extracted from nav.js to eliminate layout shift from late CSS injection ── */ /* Load this in before nav.js so nav styles are available at parse time. */ /* nav.js skips its own CSS injection when it detects this stylesheet is already present. */ /* wrapper */ #h-wrap{position:sticky;top:0;z-index:9000;overflow:visible;} #h-bar{height:64px;background:rgba(247,250,255,0.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:0.5px solid rgba(10,132,255,0.12);} #h-inner{max-width:1280px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:0;} /* logo */ #h-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none;} #h-logo img{height:22px;width:auto;display:block;} /* center */ #h-center{display:flex;align-items:center;gap:2px;margin:0 auto;} /* nav trigger buttons */ .h-nb{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:none;background:transparent;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;color:#414754;cursor:pointer;border-radius:6px;transition:background .15s,color .15s;white-space:nowrap;line-height:1;} .h-nb:hover,.h-nb.h-on{background:rgba(10,132,255,0.07);color:#0A84FF;} .h-nb svg{transition:transform .2s;flex-shrink:0;} .h-nb.h-on svg{transform:rotate(180deg);} /* plain nav links */ .h-nl{display:inline-flex;align-items:center;padding:7px 12px;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;color:#414754;text-decoration:none;border-radius:6px;transition:background .15s,color .15s;white-space:nowrap;} .h-nl:hover{background:rgba(10,132,255,0.07);color:#0A84FF;} /* right CTAs */ #h-right{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:24px;} .h-signin{padding:7px 16px;border:1px solid rgba(10,132,255,0.28);border-radius:8px;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;color:#0A84FF;text-decoration:none;transition:background .15s;white-space:nowrap;} .h-signin:hover{background:rgba(10,132,255,0.06);} .h-demo{padding:8px 18px;background:#0A84FF;border-radius:8px;font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;color:#fff;text-decoration:none;transition:background .15s;white-space:nowrap;} .h-demo:hover{background:#0071e3;} /* hamburger button (hidden on desktop) */ #h-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:8px;margin-left:auto;transition:background .15s;flex-shrink:0;} #h-burger:hover{background:rgba(10,132,255,0.07);} #h-burger svg{display:block;pointer-events:none;} #h-burger .h-ico-close{display:none;} #h-burger.h-on .h-ico-menu{display:none;} #h-burger.h-on .h-ico-close{display:block;} /* mobile drawer */ #h-drawer{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:#fff;z-index:8998;overflow-y:auto;padding:16px 24px 32px;border-top:0.5px solid rgba(10,132,255,0.1);} #h-drawer.h-on{display:block;} .h-drw-sec{margin-bottom:8px;} .h-drw-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 4px;border:none;background:transparent;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;color:#0D1B2A;cursor:pointer;border-radius:6px;} .h-drw-toggle svg{transition:transform .2s;flex-shrink:0;} .h-drw-toggle.h-on svg{transform:rotate(180deg);} .h-drw-panel{display:none;padding:0 0 8px 8px;} .h-drw-panel.h-on{display:block;} .h-drw-link{display:block;padding:10px 8px;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;color:#414754;text-decoration:none;border-radius:6px;} .h-drw-link:hover{background:rgba(10,132,255,0.05);color:#0A84FF;} .h-drw-sub{display:block;font-family:"DM Sans",sans-serif;font-size:11.5px;color:#9BA3B0;margin-top:1px;} .h-drw-plain{display:block;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;color:#0D1B2A;text-decoration:none;} .h-drw-divider{border:none;border-top:0.5px solid rgba(10,132,255,0.1);margin:4px 0;} .h-drw-ctas{display:flex;gap:8px;margin-top:16px;} .h-drw-ctas .h-signin{flex:1;text-align:center;} .h-drw-ctas .h-demo{flex:1;text-align:center;} /* mega-menu area (desktop only) */ #h-mega-area{position:absolute;top:64px;left:0;right:0;z-index:9001;padding:8px 24px 16px;} .h-mega{display:none;animation:h-drop .15s ease;} .h-mega.h-on{display:block;} @keyframes h-drop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}} /* mega card */ .h-mc{max-width:1280px;margin:0 auto;background:#fff;border-radius:14px;border:0.5px solid rgba(10,132,255,0.13);box-shadow:0 8px 32px rgba(10,132,255,0.1);padding:24px 28px;display:flex;gap:0;} /* columns */ .h-col{flex:1;padding:0 20px;} .h-col:first-child{padding-left:0;} .h-col:last-child{padding-right:0;} .h-col+.h-col{border-left:0.5px solid rgba(10,132,255,0.1);} /* column header */ .h-ch{font-family:"DM Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#9BA3B0;margin:0 0 12px;padding:0 4px;} /* mega item */ .h-mi{display:flex;align-items:flex-start;gap:10px;padding:8px;border-radius:8px;text-decoration:none;transition:background .12s;margin-bottom:1px;} .h-mi:hover{background:rgba(10,132,255,0.05);} .h-mico{width:32px;height:32px;border-radius:7px;background:rgba(10,132,255,0.09);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#0A84FF;font-size:17px;font-family:"Material Symbols Outlined","Material Icons",sans-serif;font-style:normal;visibility:hidden;overflow:hidden;} .h-mt{font-family:"DM Sans",sans-serif;font-size:13px;font-weight:500;color:#0D1B2A;line-height:18px;} .h-ms{font-family:"DM Sans",sans-serif;font-size:11.5px;color:#717786;line-height:16px;margin-top:1px;display:block;} /* featured card */ .h-feat{background:rgba(10,132,255,0.05);border:0.5px solid rgba(10,132,255,0.14);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;} .h-feat-tag{display:inline-flex;align-items:center;gap:5px;background:#0A84FF;color:#fff;font-family:"DM Sans",sans-serif;font-size:10px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:3px 8px;border-radius:100px;width:fit-content;} .h-feat-h{font-family:"DM Sans",sans-serif;font-size:13px;font-weight:600;color:#0D1B2A;line-height:1.4;margin:0;} .h-feat-p{font-family:"DM Sans",sans-serif;font-size:12px;color:#555F6E;line-height:1.6;margin:0;} .h-feat-chip{display:inline-flex;align-items:center;gap:4px;font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;color:#0A84FF;text-decoration:none;} .h-feat-chip:hover{text-decoration:underline;} /* pills */ .h-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:0.5px solid rgba(10,132,255,0.18);border-radius:100px;font-family:"DM Sans",sans-serif;font-size:12px;font-weight:500;color:#0A84FF;text-decoration:none;background:rgba(10,132,255,0.04);margin-bottom:6px;transition:background .12s;} .h-pill:hover{background:rgba(10,132,255,0.1);} .h-pill-ico{font-family:"Material Symbols Outlined","Material Icons",sans-serif;font-size:14px;line-height:1;font-style:normal;visibility:hidden;overflow:hidden;display:inline-block;width:14px;height:14px;} /* result pills */ .h-res{display:flex;flex-direction:column;gap:8px;} .h-rp{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(10,132,255,0.04);border:0.5px solid rgba(10,132,255,0.12);border-radius:8px;text-decoration:none;transition:background .12s;} .h-rp:hover{background:rgba(10,132,255,0.09);} .h-rp-dot{width:6px;height:6px;border-radius:50%;background:#0A84FF;flex-shrink:0;} .h-rp-t{font-family:"DM Sans",sans-serif;font-size:12.5px;font-weight:500;color:#0D1B2A;line-height:1.35;} .h-rp-s{font-family:"DM Sans",sans-serif;font-size:11px;color:#717786;display:block;} /* overlay */ #h-ov{display:none;position:fixed;inset:64px 0 0 0;z-index:8999;} #h-ov.h-on{display:block;} /* hide old Webflow nav */ #navbar,.div-block-153,.v3-navbar{display:none!important;} /* ── DS Global Typography ──────────────────────────────────── */ /* Rule: Space Grotesk for all headings, DM Sans for all body. */ /* Applied via this static file so it's available at parse time. */ /* 1. Body / base — DM Sans */ body{font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased;} /* 2. All native heading elements — Space Grotesk */ h1,h2,h3,h4,h5,h6{font-family:"Space Grotesk",sans-serif!important;font-weight:700!important;letter-spacing:-0.025em!important;line-height:1.2!important;} /* 3. Common Webflow heading class patterns — Space Grotesk */ [class*="heading"],[class*="Heading"],[class*="-title"],[class*="_title"], [class*="h1-"],[class*="h2-"],[class*="h3-"],[class*="-h1"],[class*="-h2"],[class*="-h3"], .hero-title,.hero-heading,.sol-title,.h6-heading,.v3-h6-heading, .step_heading,.h1-_white,.h1_pricing,.pricing-card-title,.pricing-title, .about-hero-title,.ds_section_title-_part_1,.h1,.h2,.h3,.h4{ font-family:"Space Grotesk",sans-serif!important;font-weight:700!important;letter-spacing:-0.025em!important; } /* 4. Paragraph & UI text — DM Sans */ p,li,label,input,select,textarea,button, .subhead,.text-base,.text-sm,.text-lg, .ds_section_body,.ds_section_subtitle_part,.template_desc_subtitle{ font-family:"DM Sans",sans-serif; } /* ── responsive ── */ @media(max-width:1100px){#h-inner{padding:0 20px;}.h-nb,.h-nl{padding:7px 8px;font-size:13px;}.h-signin{padding:7px 12px;}.h-demo{padding:8px 14px;}} @media(max-width:860px){#h-center{display:none;}#h-right{display:none;}#h-burger{display:flex;}}