/* Website glass surfaces. Product cards and the hero have their own visual system. */
:root {
  --glass-fill: linear-gradient(145deg, #ffffffd9, #f6f8ffc2 58%, #edf6f2ba);
  --glass-edge: #ffffffeb;
  --glass-shadow: 0 12px 36px -22px #29365455, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80;
  --glass-ease: cubic-bezier(.2, 1.35, .35, 1);
}
.site-header {
  height: 88px;
  padding-top: 14px;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.nav-wrap {
  position: relative;
  isolation: isolate;
  height: 60px;
  gap: 24px;
  padding: 7px 8px 7px 24px;
  border: 1px solid var(--glass-edge);
  border-radius: 36px;
  background: transparent;
  box-shadow: var(--glass-shadow), 0 0 0 1px #7687991a;
  pointer-events: auto;
}
.nav-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-fill);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  pointer-events: none;
}
.nav-wrap .brand { font-size: 22px; }
.brand-logo { display: block; flex: none; width: 32px; height: auto; }
.primary-nav { position: relative; gap: 3px; isolation: isolate; }
.primary-nav > a {
  position: relative;
  padding: 12px 17px;
  color: #454b58;
  border-radius: 24px;
  transition: color .2s;
}
.primary-nav > a:hover, .primary-nav > a[aria-current] { color: #20283b; }
.nav-lens {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 3px;
  bottom: 3px;
  left: var(--lens-x, 0px);
  width: var(--lens-width, 0px);
  border-radius: 24px;
  border: 1px solid #ffffffed;
  background: linear-gradient(140deg, #ffffffed, #e0e8f9a3 60%, #f1faf3c9);
  box-shadow: inset 0 1px 2px #fff, inset 0 -1px 3px #a6b8ce40, 0 3px 9px #52678717;
  opacity: 0;
  transition: left .5s var(--glass-ease), width .5s var(--glass-ease), opacity .18s, transform .45s var(--glass-ease);
}
.primary-nav.has-lens .nav-lens { opacity: 1; }
.primary-nav:has(a:hover) .nav-lens { transform: scale(1.035, 1.07); }
.nav-actions { gap: 8px; }
.nav-actions .button, .site-section .button, .platform-downloads .button {
  color: #263966;
  background: linear-gradient(145deg, #fff, #d8e5f8 64%, #dceeea);
  border: 1px solid #ffffffed;
  border-radius: 28px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px #9ab3d34d, 0 3px 9px #6681a326;
  transition: transform .45s var(--glass-ease), box-shadow .25s;
}
.nav-actions .button, .home-intro .platform-downloads .button, #download .platform-downloads .button { font-size: 12px; min-height: 44px; padding: 12px 19px; }
.nav-actions .button:hover, .site-section .button:hover, .platform-downloads .button:hover {
  transform: translateY(-1px) scale(1.025);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px #91accf66, 0 6px 17px #6681a32e;
}
.nav-actions .button:active, .site-section .button:active, .platform-downloads .button:active { transform: scale(.97); }
.menu-toggle {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #fff;
  background: linear-gradient(145deg, #fff, #e7edf7);
  box-shadow: inset 0 -1px 3px #768aa326;
}

/* A single translucent footer sheet, with the same two text axes. */
body > footer {
  position: relative;
  isolation: isolate;
  padding-top: 64px;
  border-top: 0;
  background: linear-gradient(115deg, #eaf0f6eb, #f8fbfbe6 48%, #e7f0ece6);
  box-shadow: none;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.footer-main { grid-template-columns: 1.6fr 1fr 1fr; gap: 64px; padding-bottom: 54px; }
.footer-main .brand { font-size: 30px; letter-spacing: -1.2px; }
.footer-main .brand-logo { width: 40px; }
.footer-main p { max-width: 310px; font-size: 17px; line-height: 1.6; }
.footer-main nav { gap: 10px; }
.footer-main nav a { width: fit-content; padding-block: 3px; color: #515d6d; font-size: 14px; }
.footer-main nav a:hover { color: #263966; text-decoration: underline; text-underline-offset: 5px; }
.footer-main .footer-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.footer-main .footer-socials a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffffd9; border-radius: 50%; background: #ffffffa6; }
.footer-main .footer-socials a:hover { background: #fff; }
.footer-socials img { width: 20px; height: 20px; object-fit: contain; opacity: .68; }
.footer-socials a:hover img, .footer-socials a:focus-visible img { opacity: 1; }
.footer-main h2 { font-size: 14px; margin-bottom: 14px; }
.footer-bottom { border-top: 0; box-shadow: none; padding-block: 23px; }

@media (max-width: 1199px) {
  .nav-wrap { gap: 16px; padding-left: 20px; }
  .primary-nav > a { padding-inline: 11px; }
}
@media (max-width: 800px) {
  .site-header { height: 80px; padding-top: 10px; }
  .nav-wrap { height: 58px; padding: 6px 7px 6px 20px; }
  .primary-nav {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    margin: 0; padding: 12px; border: 1px solid #fff; border-radius: 28px;
    background: linear-gradient(145deg, #fffffff2, #eaf1f8eb);
    backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
    box-shadow: var(--glass-shadow), 0 0 0 1px #dce4ea;
  }
  .primary-nav > a { padding: 14px 18px; }
  .primary-nav > a:hover, .primary-nav > a:focus-visible { background: #ffffffb3; }
  .nav-lens { display: none; }
  .footer-main { gap: 32px; grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-main p { font-size: 15px; }
}
@media (max-width: 600px) {
  .site-header { height: 76px; padding-top: 8px; }
  .nav-wrap { width: calc(100% - 24px); gap: 10px; padding-left: 17px; }
  .nav-wrap .brand { font-size: 20px; }
  .nav-actions .button, .home-intro .platform-downloads .button, #download .platform-downloads .button { font-size: 12px; padding-inline: 14px; min-height: 42px; }
  .nav-actions { gap: 6px; }
  body > footer { padding-top: 42px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 36px; }
  .footer-main .brand { font-size: 28px; }
  .footer-main p { margin-top: 14px; max-width: 270px; }
  .footer-main nav a { font-size: 13px; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav-wrap::before, .primary-nav, body > footer { background: #f3f6fa; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .nav-wrap::before, .primary-nav, body > footer { background: #f3f6fa; }
}