.products-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 260ms ease;
  font-family: Poppins, Arial, sans-serif;
}

.products-dialog.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* These controls belong to the mobile sub-layer only. */
.product-layer-header,
.product-layer-back {
  display: none;
}

/* Product triggers are progressively enhanced by products-layer.js. */
.nav-pill a[data-products-disabled],
.mobile-menu-link[data-products-disabled] {
  pointer-events: auto !important;
  cursor: pointer;
}

.products-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 41, 0.24);
  backdrop-filter: blur(42px) saturate(0.72);
  -webkit-backdrop-filter: blur(42px) saturate(0.72);
}

.products-dialog-panel {
  position: relative;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: auto;
  background:
    radial-gradient(circle at 69% 74%, rgba(91, 137, 255, 0.3), transparent 25%),
    radial-gradient(circle at 41% 86%, rgba(112, 161, 255, 0.24), transparent 25%),
    radial-gradient(circle at 8% 83%, rgba(165, 234, 171, 0.22), transparent 24%),
    linear-gradient(145deg, rgba(225, 235, 250, 0.12), rgba(184, 201, 229, 0.16));
  backdrop-filter: blur(30px) saturate(0.88);
  -webkit-backdrop-filter: blur(30px) saturate(0.88);
  transform: translateY(12px);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  scrollbar-width: thin;
}

.products-dialog.is-open .products-dialog-panel {
  transform: translateY(0);
}

.products-grid {
  width: min(calc(100% - 80px), 60vw);
  margin: clamp(150px, 10.6vw, 230px) auto 84px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: clamp(280px, 20.2vw, 582px) clamp(105px, 7.6vw, 218px);
  gap: clamp(20px, 2vw, 56px);
}

.product-tile {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 48px 28px 34px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 104px;
  color: rgba(36, 64, 166, 0.94);
  text-align: center;
  background: rgba(190, 210, 235, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(46, 74, 102, 0.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  isolation: isolate;
  transition: transform 230ms ease, box-shadow 230ms ease, filter 260ms ease, opacity 260ms ease, background-color 220ms ease, color 220ms ease;
}

.product-tile::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.product-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(ellipse 18px 50% at left center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.74) 28%, rgba(255, 255, 255, 0.3) 62%, transparent 100%),
    radial-gradient(ellipse 18px 50% at right center, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.74) 28%, rgba(255, 255, 255, 0.3) 62%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.product-tile > * {
  position: relative;
  z-index: 2;
}

.products-grid:has(.product-tile:hover) .product-tile:not(:hover),
.products-grid:has(.product-tile:focus-visible) .product-tile:not(:focus-visible) {
  filter: blur(4px);
  opacity: 0.62;
}

.product-tile:hover,
.product-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px rgba(30, 44, 82, 0.18);
}

.product-tile-arrow svg circle[fill='var(--product-arrow-on)'] {
  fill: var(--product-arrow-off);
}

.product-arrow-highlight { opacity: 1; }
.product-arrow-trace { opacity: 0; }
.product-arrow-trace circle { opacity: 1; }

.product-tile:hover .product-arrow-highlight,
.product-tile:focus-visible .product-arrow-highlight { opacity: 0; }

.product-tile:hover .product-arrow-trace,
.product-tile:focus-visible .product-arrow-trace {
  opacity: 1;
  animation: product-arrow-sweep 1.35s steps(6, end) infinite;
  transform-box: fill-box;
  transform-origin: center;
}



.product-tile--ai {
  grid-row: 1 / span 2;
}

.product-tile--compact {
  border-radius: 78px;
  padding: 26px 44px;
  flex-direction: row;
  text-align: left;
}

.product-tile-visual {
  width: 102px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 39%;
  background: rgba(73, 122, 255, 0.18) center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.product-tile--ai .product-tile-visual { width: 102px; }

.product-tile-title {
  margin: 18px 0 0;
  color: rgba(36, 64, 166, 0.94);
  font: 200 18px / 1.08 Poppins, Arial, sans-serif;
  letter-spacing: -0.045em;
}

.product-tile-arrow {
  --product-arrow-on: #2440a6;
  --product-arrow-off: rgba(36, 64, 166, 0.3);
  width: 40px;
  height: 40px;
  margin-top: 18px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Home intro/hero switches the header to its dark glass, white-text state. */
body:has(.topbar.is-over-hero) .products-dialog .product-tile {
  background: rgba(82, 103, 130, 0.58);
  color: rgba(255, 255, 255, 0.96);
}

body:has(.topbar.is-over-hero) .products-dialog .product-tile-title {
  color: rgba(255, 255, 255, 0.96);
}

body:has(.topbar.is-over-hero) .products-dialog .product-tile-arrow {
  --product-arrow-on: #ffffff;
  --product-arrow-off: rgba(255, 255, 255, 0.38);
}

@media (min-width: 761px) {
  .products-dialog .product-tile {
    background: rgba(190, 214, 244, 0.22);
    backdrop-filter: blur(32px) saturate(0.92) brightness(1.08);
    -webkit-backdrop-filter: blur(32px) saturate(0.92) brightness(1.08);
  }

  body:has(.topbar.is-over-hero) .products-dialog .product-tile {
    background: rgba(135, 174, 224, 0.2);
    backdrop-filter: blur(32px) saturate(0.92) brightness(1.08);
    -webkit-backdrop-filter: blur(32px) saturate(0.92) brightness(1.08);
  }

  body[data-page='home']:has(.topbar.is-over-hero) .products-dialog .product-tile {
    background: rgba(50, 75, 108, 0.5);
    backdrop-filter: blur(32px) saturate(0.88) brightness(0.88);
    -webkit-backdrop-filter: blur(32px) saturate(0.88) brightness(0.88);
  }
}

.product-tile-arrow svg { display: block; width: 40px; height: 40px; }
.product-tile--compact .product-tile-arrow { margin: 0 0 0 auto; }

/* Shared About / Company artwork. Keep the tile dimensions from the page CSS. */
.about-dialog .about-tile-visual {
  position: relative;
  overflow: hidden;
  background: transparent;
  background-image: none !important;
}

.about-dialog .about-tile-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-dialog .about-tile-visual::after {
  display: none !important;
}

.about-dialog .about-tile-visual--company { background: url('images/company/c12.webp') center / cover no-repeat !important; }
.about-dialog .about-tile-visual--careers { background: url('images/company/c13.webp') center / cover no-repeat !important; }
.about-dialog .about-tile-visual--news { background: url('images/company/c14.webp') center / cover no-repeat !important; }
body.products-dialog-open { overflow: hidden; }

@keyframes product-arrow-sweep {
  0%, 8% { transform: translateX(-6px); }
  92%, 100% { transform: translateX(6px); }
}

@media (max-width: 760px) {
  .products-dialog { z-index: 110; }

  .product-layer-header {
    position: absolute;
    z-index: 3;
    top: max(20px, calc(env(safe-area-inset-top, 0px) + 8px));
    right: 20px;
    left: 20px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-layer-back {
    position: absolute;
    z-index: 3;
    top: max(112px, calc(env(safe-area-inset-top, 0px) + 100px));
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 300 16px/1 Poppins, Arial, sans-serif;
    cursor: pointer;
  }

  .product-layer-back-arrow {
    --product-arrow-on: #fff;
    --product-arrow-off: rgba(255, 255, 255, 0.38);
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    flex-basis: 20px;
  }

  .product-layer-back-arrow svg {
    width: 20px;
    height: 20px;
    transform: translateY(-4px) scaleX(-1);
  }

  .product-layer-back:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

  .products-grid {
    width: calc(100% - 32px);
    margin: 118px auto 38px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 320px 230px auto;
    gap: 14px;
  }

  .product-tile { padding: 28px 16px 22px; border-radius: 44px; }
  .product-tile--ai { grid-row: auto; }
  .product-tile--compact { grid-column: span 2; min-height: 104px; padding: 22px 30px; border-radius: 52px; }
  .product-tile-visual,
  .product-tile--ai .product-tile-visual { width: 80px; }
  .product-tile-title { margin-top: 12px; font-size: 18px; }
  .product-tile-arrow { margin-top: 12px; }

  .product-layer-grid {
    width: calc(100% - 32px);
    margin: 162px auto 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 144px 232px 72px;
    gap: 16px;
  }

  .product-layer-grid .product-tile {
    min-height: 0;
    padding: 32px 0;
    border-radius: 48px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    /* Must override the higher-specificity hero-state tile color on mobile. */
    background: rgba(49, 94, 190, 0.88) !important;
  }

  .product-layer-grid .product-tile-visual,
  .product-layer-grid .product-tile--ai .product-tile-visual {
    width: 80px;
  }

  .product-layer-grid .product-tile-title {
    margin: 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: 16px;
    font-weight: 300;
  }

  .product-layer-grid .product-tile-arrow {
    --product-arrow-on: #fff;
    --product-arrow-off: rgba(255, 255, 255, 0.38);
    width: 20px;
    height: 20px;
    margin: 0;
    flex-basis: 20px;
  }

  .product-layer-grid .product-tile-arrow svg { width: 20px; height: 20px; }

  .product-layer-grid .product-tile:nth-child(1) {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 20px;
    gap: 24px;
    padding: 0 32px;
    text-align: center;
  }

  .product-layer-grid .product-tile:nth-child(1) .product-tile-title,
  .product-layer-grid .product-tile:nth-child(1) .product-tile-arrow {
    justify-self: center;
  }

  .product-layer-grid .product-tile:nth-child(1) .product-tile-arrow { justify-self: end; }

  .product-layer-grid .product-tile:nth-child(2),
  .product-layer-grid .product-tile:nth-child(3) {
    gap: 24px;
    padding: 32px 0;
  }

  .product-layer-grid .product-tile:nth-child(2) > *,
  .product-layer-grid .product-tile:nth-child(3) > * {
    transform: translateY(-8px);
  }

  .product-layer-grid .product-tile:nth-child(4),
  .product-layer-grid .product-tile:nth-child(5),
  .product-layer-grid .product-tile--compact {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    padding: 16px 8px 16px 24px;
    border-radius: 38px;
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  .product-layer-grid .product-tile:nth-child(4) .product-tile-title,
  .product-layer-grid .product-tile:nth-child(5) .product-tile-title { margin: 0; }
}