/* Shared navigation and footer for every Productopia marketing page. */
html{scroll-padding-top:110px}
.site-page{--chrome-sans:'DM Sans',Arial,sans-serif;--chrome-display:Manrope,var(--chrome-sans)}
.site-page .skip-link{z-index:100}
.site-page .header.glass-nav{position:fixed;z-index:30;top:16px;left:0;right:0;width:min(1200px,calc(100% - 48px));height:74px;padding:12px 16px 12px 24px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #ffffffd9;border-radius:999px;background:linear-gradient(120deg,#ffffffe0,#f7fcff99 50%,#fff9ecb8);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #bcdcea66,0 10px 35px #31536e14,0 2px 7px #31536e06;backdrop-filter:blur(26px) saturate(175%);-webkit-backdrop-filter:blur(26px) saturate(175%);isolation:isolate;transition:height .25s,top .25s,background .25s,box-shadow .25s}
.site-page .header.glass-nav::before{display:block;content:'';position:absolute;inset:1px;z-index:-1;border-radius:inherit;border:1px solid #fff6;background:linear-gradient(175deg,#ffffff80 0%,transparent 38%,#dff4ff17 85%);pointer-events:none;backdrop-filter:none}
.site-page .header.glass-nav::after{content:'';position:absolute;left:8%;right:18%;top:0;height:1px;border-radius:999px;background:linear-gradient(90deg,transparent,#fff,transparent);pointer-events:none}
.site-page .header.glass-nav.is-scrolled{top:12px;height:66px;padding-inline:24px 16px;width:min(1200px,calc(100% - 48px));border:1px solid #ffffffd9;border-radius:999px;background:linear-gradient(120deg,#ffffffe8,#f4fbffd1 58%,#fffaf0d9);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #bcdcea66,0 12px 40px #31536e1a}
.site-page .header.glass-nav .brand{display:inline-flex;align-items:center;gap:10px;font:650 23px/1.4 var(--chrome-display);letter-spacing:-1px;color:#203e52;flex-shrink:0}
.site-page .header.glass-nav .brand-logo{width:32px;height:32px;object-fit:contain;filter:brightness(0) saturate(100%);border:0;border-radius:0;background:none;padding:0}
.site-page .header.glass-nav>.desktop-nav{display:flex;align-items:center;gap:4px;color:#426378;font:500 12px/1.5 var(--chrome-sans)}
.site-page .header.glass-nav .desktop-nav>a:not(.nav-cta){display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 12px;border:1px solid transparent;border-radius:999px;white-space:nowrap;text-decoration:none;transition:background .18s,color .18s,box-shadow .18s}
.site-page .header.glass-nav nav>a:not(.waitlist-pill):hover{background:#ffffffad;color:#183e55;box-shadow:inset 0 1px 0 #fff,0 3px 10px #31536e07}
.site-page .header.glass-nav nav>a[aria-current]:not(.waitlist-pill){color:#0d648c;background:#e8f7ffb3;border-color:#c2e5f3;text-decoration:none;box-shadow:inset 0 1px 0 #fff}
.site-page .header.glass-nav .nav-cta.waitlist-pill{min-width:0;min-height:44px;padding:12px 17px;margin-left:8px;gap:8px;border:1px solid #ffffff7a;border-radius:999px;background:var(--brand);color:var(--brand-ink);font:650 12px/1.4 var(--chrome-sans);box-shadow:inset 0 1px 0 #ffffff7a,0 4px 12px #1fa3de1c}
.site-page .header.glass-nav .nav-cta.waitlist-pill:hover{background:var(--brand-hover);color:var(--brand-ink)}
.site-page .header.glass-nav .nav-cta.waitlist-pill>.waitlist-cloud{width:18px;height:18px;flex-basis:18px}
.site-page .header.glass-nav>.menu-toggle,.site-page .header.glass-nav>.mobile-menu{display:none}
.site-page .header.glass-nav>.mobile-menu[hidden]{display:none}
.site-page .header.glass-nav a:focus-visible,.site-page .header.glass-nav button:focus-visible,.site-footer a:focus-visible,.site-footer button:focus-visible{outline:3px solid #1087bb;outline-offset:4px}
.site-footer{position:relative;padding:38px 24px 24px;background:radial-gradient(ellipse at 20% 100%,#e4f5fc,transparent 58%),radial-gradient(ellipse at 92% 70%,#fff4d8aa,transparent 50%),#fff;color:#34586e;font-family:var(--chrome-sans)}
.site-footer-panel{position:relative;isolation:isolate;overflow:hidden;max-width:1260px;margin-inline:auto;padding:43px 40px 0;border:1px solid #fff;border-radius:30px;background:linear-gradient(125deg,#ffffffb3,#f6fbff96 55%,#fffaf0a8);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #c5e3ef66,0 12px 45px #31536e0b;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.site-footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .85fr 1fr 1.1fr;gap:38px;padding-bottom:36px}
.site-footer-brand .brand{font:650 26px/1.4 var(--chrome-display);letter-spacing:-1.1px;color:#203e52;gap:11px}
.site-footer-brand .brand-logo{width:35px;height:35px;filter:brightness(0) saturate(100%);object-fit:contain}
.site-footer-brand>p{font-size:14px;line-height:1.8;color:#426c82;margin:18px 0 17px}
.site-footer-brand>small{display:block;font-size:12px;line-height:1.9;color:#527084}
.site-footer-links{display:flex;flex-direction:column;align-items:start;gap:1px;min-width:0}
.site-footer-links h2{font:650 12px/1.6 var(--chrome-sans);letter-spacing:0;color:#294c63;margin:5px 0 13px}
.site-footer-links a{display:inline-flex;align-items:center;min-height:34px;padding:5px 0;font-size:12px;line-height:1.6;color:#527084}
.site-footer-links a:hover,.site-footer-bottom a:hover{color:#086b98;text-decoration:underline;text-decoration-color:#7ec8e6;text-underline-offset:5px}
.site-footer-invite{min-width:0}
.site-footer-invite h2{font:600 20px/1.4 var(--chrome-display);letter-spacing:-.6px;color:#294c63;margin:2px 0 12px}
.site-footer-invite p{font-size:12px;line-height:1.9;color:#527084;margin:0 0 22px;max-width:220px}
.site-footer-invite .waitlist-pill{font-family:var(--chrome-sans);font-size:13px;min-width:0;width:100%;min-height:48px;padding:13px 17px;gap:10px;box-shadow:inset 0 1px 0 #ffffff7a,0 5px 15px #1fa3de15}
.site-footer-invite .waitlist-cloud{width:20px;height:20px;flex-basis:20px}
.footer-wordmark{position:absolute;z-index:0;bottom:22px;left:25px;right:25px;pointer-events:none;user-select:none;font:750 clamp(70px,12.5vw,160px)/1 var(--chrome-display);letter-spacing:-.065em;color:#5ca0c00b;white-space:nowrap}
.site-footer-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px 30px;min-height:78px;padding:19px 0;border-top:1px solid #cfe3ed8c;font-size:10px;line-height:1.8;color:#527084}
.site-footer-bottom>nav{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.site-footer-bottom>nav>span{color:#416a82;font-weight:600}
.site-footer-bottom a{display:inline-flex;align-items:center;gap:9px;min-height:32px}
.footer-back-top>span{font-size:16px}
@media(max-width:1200px){.site-page .header.glass-nav>.desktop-nav{font-size:11px;gap:1px}.site-page .header.glass-nav .desktop-nav>a:not(.nav-cta){padding-inline:10px}.site-page .header.glass-nav .brand{font-size:22px}.site-footer-grid{gap:25px}.site-footer-panel{padding-inline:30px}.site-footer-invite h2{font-size:19px}}
@media(max-width:980px){
  .site-page .header.glass-nav,.site-page .header.glass-nav.is-scrolled{width:calc(100% - 40px);height:68px;top:14px;padding:11px 14px 11px 21px;border-radius:26px;gap:15px}
  .site-page .header.glass-nav>.desktop-nav{display:none}
  .site-page .header.glass-nav>.menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:43px;height:43px;padding:11px;border:1px solid #ffffffc9;border-radius:50%;background:linear-gradient(145deg,#ffffffc9,#edf8ff80);box-shadow:inset 0 1px 0 #fff,0 2px 6px #31536e08}
  .site-page .header.glass-nav>.menu-toggle>span{display:block;width:18px;height:1.5px;background:#315d76;transition:transform .18s}
  .site-page .header.glass-nav>.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .site-page .header.glass-nav>.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .site-page .header.glass-nav>.mobile-menu:not([hidden]){display:flex;position:absolute;top:calc(100% + 10px);left:0;right:0;align-items:stretch;flex-direction:column;gap:3px;max-height:calc(100dvh - 116px);overflow:auto;padding:15px;border:1px solid #ffffffe6;border-radius:24px;background:linear-gradient(130deg,#fffffff0,#eef8fff0);box-shadow:inset 0 1px 0 #fff,0 18px 50px #31536e20;backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);font:500 13px/1.5 var(--chrome-sans);color:#426378}
  .site-page .header.glass-nav>.mobile-menu>a:not(.waitlist-pill){display:flex;align-items:center;min-height:45px;padding:12px 15px;border:1px solid transparent;border-radius:13px;font-size:13px}
  .site-page .header.glass-nav>.mobile-menu>.waitlist-pill{align-self:stretch;justify-content:center;min-width:0;min-height:48px;margin:10px 0 0;padding:13px 18px;font:650 14px/1.4 var(--chrome-sans);gap:10px}
  .site-footer-panel{padding:34px 30px 0}
  .site-footer-grid{grid-template-columns:1.1fr 1fr 1fr;gap:30px}
  .site-footer-brand{grid-column:1/-1}
  .site-footer-brand>p{margin-block:12px 8px}
  .site-footer-invite .waitlist-pill{font-size:12px;padding-inline:12px;gap:8px}
}
@media(max-width:560px){
  .site-page .header.glass-nav,.site-page .header.glass-nav.is-scrolled{width:calc(100% - 24px);top:12px;height:64px;padding:10px 10px 10px 16px;border-radius:24px}
  .site-page .header.glass-nav .brand{font-size:22px;letter-spacing:-.8px;gap:8px}
  .site-page .header.glass-nav .brand-logo{width:31px;height:31px}
  .site-page .header.glass-nav>.menu-toggle{width:40px;height:40px}
  .site-page .header.glass-nav>.mobile-menu:not([hidden]){padding:12px;border-radius:22px}
  .site-footer{padding:24px 12px 14px}
  .site-footer-panel{padding:29px 23px 0;border-radius:25px}
  .site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 22px;padding-bottom:29px}
  .site-footer-brand .brand{font-size:25px;gap:9px}.site-footer-brand .brand-logo{width:32px;height:32px}
  .site-footer-brand>p{font-size:13px;margin:13px 0 8px}.site-footer-brand>small{font-size:11px}
  .site-footer-links h2{font-size:11px;margin-top:0;margin-bottom:9px}
  .site-footer-links a{font-size:11px;line-height:1.8;min-height:40px}
  .site-footer-invite{grid-column:1/-1;padding-top:5px}.site-footer-invite h2{font-size:22px;margin-bottom:9px}.site-footer-invite p{font-size:12px;max-width:none;margin-bottom:18px}
  .site-footer-invite .waitlist-pill{width:auto;min-width:204px;min-height:50px;font-size:14px;padding:14px 22px;gap:10px}
  .site-footer-bottom{gap:5px 20px;padding-block:19px;min-height:0;font-size:10px}
  .site-footer-bottom>span{flex-basis:100%;margin-bottom:5px}
  .site-footer-bottom>nav{gap:14px}.site-footer-bottom>nav>span{display:none}.site-footer-bottom a{min-height:36px}
  .footer-back-top{margin-left:auto}.footer-wordmark{font-size:73px;bottom:65px;left:16px;right:16px}
}
@media(max-width:350px){.site-page .header.glass-nav .brand{font-size:21px}.site-footer-panel{padding-inline:19px}.site-footer-grid{gap:24px 17px}.site-footer-links a{font-size:10px}.site-footer-bottom>nav{gap:11px}.footer-back-top{margin-left:0}.site-footer-bottom{font-size:9px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-page .header.glass-nav,.site-page .header.glass-nav.is-scrolled{background:#f7fbfff7}.site-page .header.glass-nav>.mobile-menu:not([hidden]){background:#f7fbff}.site-footer-panel{background:#f7fbff}}
@media(prefers-reduced-motion:reduce){.site-page .header.glass-nav,.site-page .header.glass-nav a,.site-page .header.glass-nav>.menu-toggle>span{transition:none}}
