/* Shared site shell: reset, glass material, navbar and footer.
   Loaded by every page. Page-specific rules stay in each page's own
   <style>, which comes after this file and therefore still wins.
   Generated from the pages' inline styles -- edit here, not per page. */

.noise-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.15) 100%); }
.glass { position: relative; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(30px) saturate(140%) brightness(1.05); backdrop-filter: blur(30px) saturate(140%) brightness(1.05); border: 1px solid rgba(255,255,255,0.9); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(255,255,255,0.35), 0 10px 36px rgba(80,60,140,0.16); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from 0deg, #C9BFFA, #FFD3EA, #FFDCB0, #B9F0DE, #CFE0FB, #C9BFFA); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.4; pointer-events: none; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0) 45%), linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.8) 45%, transparent 60%); background-size: 100% 100%, 220% 220%; background-position: 0 0, 10% 10%; }
nav.glass { position: fixed; top: 26px; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.6); -webkit-backdrop-filter: blur(8px) saturate(110%); backdrop-filter: url(#navRefraction) blur(8px) saturate(110%); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 22px 30px -20px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(120,120,140,0.1), 0 20px 40px -16px rgba(120,110,160,0.22), 0 6px 16px rgba(120,110,160,0.12); }
nav.glass::before { opacity: 0.3; }
nav.glass::after { background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 40%), radial-gradient(320px 160px at 70% 0%, rgba(255,255,255,0.35), transparent 68%); background-size: 100% 100%, 100% 100%; background-position: 0 0, 0 0; }
nav.glass { transition: max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s ease, box-shadow 0.28s ease; }
nav.glass.is-scrolled { max-width: 1020px; background: rgba(255,255,255,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 22px 30px -20px rgba(255,255,255,0.95), inset 0 -1px 1px rgba(120,120,140,0.1), 0 26px 50px -18px rgba(120,110,160,0.38), 0 8px 20px rgba(120,110,160,0.18); }
.logo-mark { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.35), 0 4px 16px rgba(139,92,246,0.35); }
.logo-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-text { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: #0a0a0a; }
.nav-links { display: flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: rgba(10,10,20,0.72); }
.nav-links a { text-decoration: none; color: inherit; padding: 9px 15px; border-radius: 999px; transition: background 0.15s ease, box-shadow 0.15s ease; }
.nav-links a:hover { background: rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(190,110,200,0.15); }
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-btn { text-decoration: none; color: inherit; padding: 9px 15px; border-radius: 999px; transition: background 0.15s ease; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.nav-dropdown-btn:hover { background: rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 4px 12px rgba(190,110,200,0.15); }
.nav-dropdown-btn::after { content: "▼"; font-size: 10px; margin-left: 2px; }
.nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); border-radius: 16px; padding: 10px; min-width: 240px; box-shadow: 0 16px 40px rgba(80,60,140,0.18); z-index: 100; flex-direction: column; gap: 2px; }
.nav-dropdown-menu.open { display: flex; }
.nav-dropdown-item { display: block; padding: 11px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: rgba(10,10,20,0.82); text-decoration: none; transition: background 0.15s ease; }
.nav-dropdown-item:hover { background: rgba(255,255,255,0.7); }
.ai-pill { display: inline-flex; align-items: center; gap: 6px; color: inherit; padding: 9px 12px 9px 15px; border-radius: 999px; transition: background 0.15s ease, box-shadow 0.15s ease; }
.ai-pill:hover { background: rgba(255,255,255,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.ai-pill .new-tag { background: #0a0a0a; color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; letter-spacing: 0.03em; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.login-link { font-size: 16px; font-weight: 600; color: rgba(10,10,20,0.78); text-decoration: none; padding: 9px 15px; border-radius: 999px; transition: background 0.15s ease; }
.login-link:hover { background: rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
.hamburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: #0a0a0a; cursor: pointer; flex-shrink: 0; }
.hamburger svg { width: 21px; height: 21px; }
.hamburger .icon-close { display: none; }
.hamburger.active .icon-menu { display: none; }
.hamburger.active .icon-close { display: block; }
.mobile-menu { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 6; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); border-radius: 20px; padding: 10px; box-shadow: 0 16px 40px rgba(80,60,140,0.18); }
.mobile-menu.open { display: flex; }
.mobile-menu a { display: block; padding: 13px 16px; border-radius: 12px; font-size: 15.5px; font-weight: 600; color: rgba(10,10,20,0.82); text-decoration: none; }
.mobile-menu a:hover, .mobile-menu a:active { background: rgba(255,255,255,0.7); }
.mobile-menu a.mobile-menu-login { border-bottom: 1px solid rgba(10,10,20,0.08); margin-bottom: 4px; padding-bottom: 15px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #f7f7fb; }
.site-footer { background: #08080c; color: #fff; padding: 72px 0 0; overflow: hidden; }
.footer-inner { max-width: 1260px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { max-width: 340px; }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.footer-logo img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.footer-logo span { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.footer-blurb { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.6); }
.footer-social { display: flex; gap: 16px; margin-top: 22px; }
.footer-social a { color: rgba(255,255,255,0.55); display: flex; transition: color 0.15s ease; }
.footer-social a:hover { color: #fff; }
.footer-social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.footer-col h4 { font-size: 15.5px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.01em; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-col a { font-size: 14.5px; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s ease; }
.footer-col a:hover { color: #fff; }
.footer-rule { max-width: 1260px; margin: 56px auto 0; padding: 0 40px; }
.footer-rule div { height: 1px; background: rgba(255,255,255,0.12); }
.footer-copyright { max-width: 1260px; margin: 0 auto; padding: 26px 40px 0; font-size: 13.5px; color: rgba(255,255,255,0.45); }
.footer-legal { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,0.32); }
.footer-wordmark-box { max-width: 1260px; margin: 28px auto 0; padding: 0 40px; container-type: inline-size; }
/* Two separate things are going on here, and both are needed.

   text-align: left -- the line overflows its box, and a centred overflowing
   line starts at (boxWidth - lineWidth)/2, so its left edge moved with the
   viewport (1px out at 1425px, 5px at 416px). Left-aligned it always begins
   at the content edge.

   margin-left: -0.045em -- optical, not layout. At this size the first glyph
   carries a large left side bearing: measured via canvas actualBoundingBoxLeft,
   the ink starts 18.13px right of the text origin at 389.4px, against 0.62px
   for the 13.5px copyright line below it. Without this the boxes align while
   the visible letters sit ~17.5px in. Stated in em so it scales with the
   cqw-driven font-size. */
.footer-wordmark { text-align: left; user-select: none; pointer-events: none; font-weight: 800; letter-spacing: -0.04em; line-height: 0.74; font-size: 33cqw; color: #2a2a2a; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif; margin-bottom: 0.03em; margin-left: -0.045em; }

/* Anchor targets clear the fixed navbar (top 26 + ~73 tall) instead of
   landing underneath it. .page scopes this to the marketing pages; the
   legal pages set their own offset for their shorter sticky bar. */
.page section[id] { scroll-margin-top: 112px; }