@charset "UTF-8";

/* Consistent inset chevrons for single-choice dropdowns across the site. */
body select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234c7096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
@media (forced-colors: active) {
  body select:not([multiple]):not([size]) { appearance: auto; -webkit-appearance: auto; background-image: none; }
}

/* Shared optical surfaces; loaded after page styles to keep one visual language. */
:root {
  --glass-surface: linear-gradient(160deg, #ffffffeb 0%, #ffffff9c 46%, #e7f1ff8c 100%);
  --glass-edge: #ffffffd9;
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b7d0ed33, 0 4px 12px #194e9510, 0 12px 28px -16px #1a4d9752;
  --glass-blur: blur(20px) saturate(165%);
  --glass-selection: linear-gradient(160deg, #ffffff30, #ffffff00 55%), linear-gradient(120deg, #086bdfe8, #0756c9f5);
  --glass-card-fill: linear-gradient(135deg, #ffffffde 0%, #ffffff94 48%, #e2eeff73 100%);
  --glass-card-blue: linear-gradient(140deg, #f8fcfff5, #deedffad 58%, #f1f8ffc7);
  --glass-card-violet: linear-gradient(140deg, #fcfbfff5, #e8e2ffad 58%, #f8f5ffc7);
  --glass-card-shadow: inset 0 1px 1px #fff, inset 0 -1px 0 #b6cfef66, 0 2px 6px #365e9210, 0 16px 36px -20px #2b609c40;
  --glass-card-inset: inset 0 1px 0 #ffffffed, inset 0 -1px 0 #ffffff80, 0 4px 12px -8px #355a9240;
}

/* Static ambient color sits behind translucent surfaces. One small vector tile,
   no fixed layer, animation, filter or additional backdrop blur. */
:root body {
  background-color: #edf3fc;
  background-image: url("assets/decor/glass-atmosphere.svg");
  background-position: center top;
  background-size: max(1440px, 100%) auto;
  background-repeat: repeat-y;
}
/* Only page-level sections lose their old opaque fills; nested cards retain theirs. */
:root body main > :is(
  .hero, .section, .demo-section, .project-section, .final-cta,
  .resource-hero, .resource-content, .matrix-hero, .matrix-content,
  .guide-hero, .guide-section, .docs-hero, .docs-content,
  .cases-hero, .case-logo-section, .cases-next-section
) { background: transparent; }
:root body main > :is(.hero, .resource-hero, .matrix-hero, .guide-hero, .docs-hero, .cases-hero) {
  background: linear-gradient(180deg, #ffffff30, #ffffff00 80%);
}
:root body main > :is(.challenges-section, .feature-section, .value-section,
  .guide-section-muted, .cases-next-section) {
  background: #ffffff26;
  border-color: #c9d9ee73;
}
:root body :is(.site-footer, .resource-footer) {
  background: #f4f8fcbd;
  border-top-color: #c9d9ee80;
}

/* The header's outer box keeps the existing sticky position and occupied height. */
.site-header.site-navigation {
  height: 79px;
  padding: 10px 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-navigation .nav-shell {
  position: relative;
  height: 59px;
  padding-inline: 20px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: linear-gradient(115deg, #ffffff7a, #ffffff40 58%, #edf5ff75);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #bfd6ee40, 0 8px 32px #224c8712;
}
.site-navigation #main-nav { gap: clamp(12px, 1.2vw, 22px); }
.site-navigation #main-nav > a,
.site-navigation .nav-resources > summary {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  transition: color .2s, background .2s, box-shadow .2s;
}
.site-navigation #main-nav > a:hover,
.site-navigation .nav-resources > summary:hover,
.site-navigation .nav-resources[open] > summary {
  background: #ffffff80;
  box-shadow: 0 0 0 7px #ffffff80, 0 2px 12px #295ea312;
  color: #0758c0;
}
.site-navigation .nav-resources > summary > .nav-chevron {
  border-radius: 50%;
  border-color: #ffffffd9;
  background: linear-gradient(150deg, #ffffffed, #d8eaff94);
  box-shadow: inset 0 1px 0 #fff, 0 2px 7px #275da414;
}
.site-navigation .nav-resources[open] > summary > .nav-chevron {
  background: linear-gradient(150deg, #5ca4f5, #0764da);
  border-color: #ffffffb3;
}
.site-navigation .nav-resources-menu {
  padding: 10px;
  border-radius: 22px;
  background: linear-gradient(145deg, #fffffff0, #edf5ffde);
  border-color: #ffffffed;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 #fff, 0 16px 46px #16447a26;
}
.site-navigation .nav-resources-menu a { border-radius: 14px; }
.site-navigation .nav-resources-menu a:hover,
.site-navigation .nav-resources-menu a[aria-current] { background: #ffffffa6; box-shadow: inset 0 1px 0 #fff; }

/* Current destinations use blue glass; hover and expanded menus keep a pale tint.
   The inset halo changes paint only, preserving link spacing and mobile wrapping. */
.site-navigation #main-nav > a[aria-current],
.site-navigation .nav-resources.is-current > summary {
  color: #fff;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 2px #06449740;
}
.site-navigation #main-nav > a[aria-current]::before,
.site-navigation .nav-resources.is-current > summary::before {
  content: "";
  position: absolute;
  inset: -6px -9px;
  z-index: -1;
  border: 1px solid #ffffffa6;
  border-radius: 999px;
  background: var(--glass-selection);
  box-shadow: inset 0 1px 1px #ffffff73, 0 3px 10px #0756c926;
  pointer-events: none;
}
.site-navigation .nav-resources.is-current > summary > .nav-chevron {
  color: #fff;
  background: #ffffff26;
  border-color: #ffffff59;
  box-shadow: inset 0 1px 0 #ffffff40;
}
.site-navigation .nav-resources-menu a[aria-current] {
  color: #fff;
  background: var(--glass-selection);
  box-shadow: inset 0 1px 0 #ffffff73, 0 3px 10px #0756c91f;
}
.site-navigation .nav-resources-menu a[aria-current] small { color: #e2efff; }
.site-navigation .nav-resources-menu a[aria-current]::after { color: #fff; }

/* Animate only the capsule transform. Stable text weight prevents layout shifts. */
.site-navigation .nav-active-indicator { display: none; }
@media (min-width: 1101px) {
  .site-navigation #main-nav > a,
  .site-navigation #main-nav > a[aria-current],
  .site-navigation .nav-resources > summary,
  .site-navigation .nav-resources.is-current > summary { font-weight: 500; }
  .site-navigation #main-nav.has-sliding-selection { position: relative; isolation: isolate; }
  .site-navigation #main-nav > a, .site-navigation #main-nav > .nav-resources { z-index: 1; }
  .site-navigation #main-nav.has-sliding-selection > a[aria-current]::before,
  .site-navigation #main-nav.has-sliding-selection .nav-resources.is-current > summary::before { content: none; }
  .site-navigation #main-nav > .nav-active-indicator:not([hidden]) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 38px;
    z-index: 0;
    border: 1px solid #ffffffa6;
    border-radius: 999px;
    background: var(--glass-selection);
    box-shadow: inset 0 1px 1px #ffffff73, 0 3px 10px #0756c926;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1) !important;
  }
  .site-navigation #main-nav > .nav-active-indicator.is-instant:not([hidden]) { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .site-navigation #main-nav > .nav-active-indicator:not([hidden]) { transition: none !important; }
}
@media (forced-colors: active) {
  .site-navigation #main-nav > .nav-active-indicator {
    background: Highlight;
    border-color: HighlightText;
    box-shadow: none;
    forced-color-adjust: none;
  }
}

/* Blue glass keeps primary actions readable on the site's pale backgrounds. */
body .button {
  border-radius: 999px;
  border-color: #ffffff9c;
  color: #fff;
  background: linear-gradient(180deg, #ffffff38, #ffffff00 52%), linear-gradient(125deg, #167cece8, #075bd6f5);
  backdrop-filter: blur(16px) saturate(155%);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  box-shadow: inset 0 1px 1px #ffffff8c, inset 0 -1px 1px #043e9b40, 0 5px 14px #0864d52b;
  text-shadow: 0 1px 2px #06449740;
  transition: background .22s, box-shadow .22s, transform .22s, border-color .22s;
}
body .button:hover {
  background: linear-gradient(180deg, #ffffff47, #ffffff00 55%), linear-gradient(125deg, #1174e6ed, #034dbff5);
  border-color: #ffffffdb;
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 1px #043e9b40, 0 8px 22px #0864d533;
}
body .button:active { transform: translateY(0) scale(.98); box-shadow: inset 0 1px 3px #063d8d30, 0 2px 7px #0864d51f; }

/* The requested CTA sweep stays visible, using slower motion for reduced-motion users. */
.site-navigation .nav-shell > [data-download-entry] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: #ffffffde;
  box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 1px #043e9b40, 0 0 0 3px #72baff26, 0 5px 18px #0864d545;
}
.site-navigation .nav-shell > [data-download-entry]::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  width: 55%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff40 20%, #ffffffb3 47%, #ffffffdc 50%, #ffffffb3 53%, #ffffff40 80%, transparent);
  opacity: 0;
  transform: translate3d(-140%, 0, 0) skewX(-20deg);
  animation: trial-light-sweep 2.8s linear -.6s infinite !important;
}
@keyframes trial-light-sweep {
  0% { opacity: 0; transform: translate3d(-140%, 0, 0) skewX(-20deg); }
  6% { opacity: 1; }
  60% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translate3d(300%, 0, 0) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-navigation .nav-shell > [data-download-entry]::after { animation-duration: 4s !important; }
}
@media (forced-colors: active) {
  .site-navigation .nav-shell > [data-download-entry]::after { animation: none !important; content: none; }
}

body :is(.button-secondary, .button-light, .quiet-button, .cases-quiet-link),
body :is(.cases-brand-filters, .quote-quick-picks, .compat-groups, .compat-pagination, .device-options, .screenshot-filters) button,
body :is(.feature-arrow, .dialog-close),
.site-navigation .menu-toggle {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: #254f80;
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  text-shadow: none;
  transition: background .22s, box-shadow .22s, border-color .22s, color .22s;
}
body :is(.quiet-button, .cases-quiet-link) { padding: 11px 18px; }
body :is(.button-secondary, .button-light, .quiet-button, .cases-quiet-link):hover,
body :is(.cases-brand-filters, .quote-quick-picks, .compat-groups, .compat-pagination, .device-options, .screenshot-filters) button:not(:disabled):hover,
body :is(.feature-arrow, .dialog-close):hover,
.site-navigation .menu-toggle:hover {
  color: #0758c0;
  border-color: #ffffff;
  background: linear-gradient(150deg, #fff, #e8f3ffbc);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #c8def54d, 0 6px 18px #245d9e22;
}
body :is(.cases-brand-filters, .quote-quick-picks, .compat-groups, .device-options, .screenshot-filters) button:is([aria-pressed="true"], .selected) {
  background: linear-gradient(160deg, #fffffff2, #cfe6ffb3);
  border-color: #b0cff3;
  color: #0758c0;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #90bbee40, 0 3px 12px #0b60c21c;
}
body .button-light { color: #163e6c; background: linear-gradient(150deg, #ffffffed, #dcecffcf); }
body .button:disabled, body button:disabled { opacity: .45; box-shadow: none; }

/* Explicit card surfaces across seven pages. Geometry stays owned by page styles.
   Painted highlights avoid blur layers on cards and moving customer logos. */
:root body :is(
  .challenge-card, .capability-card, .software-card, .value-card,
  .feature-image, .device-selector, .screenshot-card, .demo-card,
  .deployment-requirements, .license-card, .floating-label,
  .resource-placeholder-card, .case-practice-card, .case-logo-tile, .cases-next,
  .quote-calculator, .quote-count-grid > div, .pricing-version-scope,
  .pricing-service-grid article, .pricing-license-contact,
  .compat-query, .compat-empty, .compat-contact,
  .matrix-summary article, .scope-explainer, .matrix-scroll, .resource-table-wrap,
  .docs-file-card, .docs-scope, .docs-chapter, .guide-prep-grid article,
  .info-dialog, .image-dialog
) {
  border-color: #ffffffed;
  background: var(--glass-card-fill);
  box-shadow: var(--glass-card-shadow);
}
:root body :is(.demo-card, .pricing-version-scope, .pricing-license-contact,
  .scope-explainer, .docs-scope, .cases-next) {
  background: var(--glass-card-blue);
}
:root body :is(.challenge-problem, .challenge-solution, .value-proof,
  .quote-addon-option, .docs-cover, .resource-note, .compat-scope-note) {
  box-shadow: var(--glass-card-inset);
}
.homepage .challenge-card { border-radius: 24px; }
.homepage .challenge-number {
  padding: 2px 8px;
  border: 1px solid #ffffffc9;
  border-radius: 999px;
  color: #7895b8;
  background: linear-gradient(150deg, #ffffffe6, #e6f0ff80);
  box-shadow: inset 0 1px 0 #fff;
}
.homepage :is(.challenge-problem, .challenge-solution) { border-radius: 17px; }
.homepage .challenge-problem {
  border-color: #ead8bf9c;
  background: linear-gradient(140deg, #fffaf1e6, #ffeed78c 58%, #fff9efad);
}
.homepage .challenge-solution {
  border-color: #bed7f6a6;
  background: linear-gradient(140deg, #f4f9fff0, #d6e9ff99 58%, #e8f3ffb3);
}
:root body :is(.value-proof, .resource-note, .compat-scope-note) {
  background: var(--glass-card-blue);
  border-left-color: #8fb9ee;
}
/* The calculator's columns retain their separators, alignment and blue/violet tones. */
:root body .quote-result {
  background: var(--glass-card-blue);
  box-shadow: inset 0 1px 0 #ffffffd9, inset 0 -1px 0 #b6cfef40;
}
:root body .quote-result-pro { background: var(--glass-card-violet); }
:root body :is(.docs-cover, .quote-number-field) { background: var(--glass-card-fill); }
:root body .quote-addon-option {
  border-color: #d0e0f4;
  background: var(--glass-card-fill);
}
:root body .quote-addon-option:is(:hover, :has(input:checked)) {
  background: var(--glass-card-blue);
  border-color: #8cb7ed;
}
:root body :is(.docs-chapter, .case-logo-tile):hover {
  background: linear-gradient(145deg, #fff, #e3f0ffd9);
  border-color: #c0daf9;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b6cfef66, 0 12px 28px -12px #2b609c40;
}
/* Dark project banners and code blocks retain their light text. */
:root body :is(.project-banner, .pricing-custom-project, .guide-code) {
  border-color: #b8d9ff59;
  background: linear-gradient(140deg, #ffffff14, #ffffff00 50%), linear-gradient(120deg, #193e65f5, #124c7ee6);
  box-shadow: inset 0 1px 1px #ffffff40, inset 0 -1px 0 #84baf333, 0 16px 36px -20px #123f7366;
}
:root body .guide-code .code-label { background: #ffffff0f; }
/* Dense tables keep a quieter surface for scanning long rows. */
:root body main :is(.matrix-scroll, .resource-table-wrap) { background: linear-gradient(135deg, #fffffff2, #ffffffd9); }
/* Keep table cells translucent enough for the outer surface to remain visible. */
:root body .compat-table tbody :is(td, th) { background: #ffffff70; }
:root body :is(.function-table, .resource-table) thead th,
:root body .function-table caption { background: #edf5fff2; }
:root body .compat-table tbody tr:hover > * { background: #eaf4ffbf; }

@media (max-width: 1100px) {
  .site-navigation .nav-shell { padding-inline: 16px; }
  .site-navigation #main-nav {
    top: calc(100% + 10px);
    border: 1px solid #ffffffed;
    border-radius: 24px;
    background: linear-gradient(145deg, #fffffff0, #edf5ffed);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 #fff, 0 14px 32px #224c8726;
    max-height: calc(100dvh - 110px);
    gap: 24px;
  }
  .site-navigation .nav-resources-menu { background: #ffffff80; box-shadow: inset 0 1px 0 #fff; }
}
@media (max-width: 540px) {
  .site-navigation .nav-shell { width: calc(100% - 20px); padding-inline: 12px; gap: 10px; }
  .site-navigation .brand img { width: 112px; }
  .site-navigation #main-nav { border-radius: 22px; gap: 20px; }
  body :is(.quiet-button, .cases-quiet-link) { padding: 10px 14px; }
}

/* Solid translucent paint is also usable on browsers without backdrop blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-navigation .nav-shell, .site-navigation #main-nav.open, .site-navigation .nav-resources-menu { background: #f5f9fff5; }
  body :is(.button-secondary, .button-light, .quiet-button, .cases-quiet-link) { background: #f2f7ff; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-navigation .nav-shell, .site-navigation #main-nav.open, .site-navigation .nav-resources-menu { background: #f7faff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body .button, body :is(.quiet-button, .cases-quiet-link), body button { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  body .button, body :is(.quiet-button, .cases-quiet-link), .site-navigation #main-nav > a { transition: none; }
  body .button:hover, body .button:active { transform: none; }
}
@media (forced-colors: active) {
  :root body { background: Canvas; }
  .site-navigation .nav-shell, .site-navigation #main-nav.open, .site-navigation .nav-resources-menu,
  body .button, body :is(.quiet-button, .cases-quiet-link), body button,
  :root body :is(.challenge-card, .challenge-problem, .challenge-solution, .challenge-number,
    .capability-card, .software-card, .value-card, .value-proof, .feature-image,
    .device-selector, .screenshot-card, .demo-card, .deployment-requirements,
    .license-card, .floating-label, .resource-placeholder-card, .case-practice-card,
    .case-logo-tile, .cases-next, .quote-calculator, .quote-result, .quote-addon-option, .quote-number-field,
    .quote-count-grid > div, .pricing-version-scope, .pricing-service-grid article,
    .pricing-license-contact, .compat-query, .compat-empty, .compat-contact,
    .matrix-summary article, .scope-explainer, .matrix-scroll, .resource-table-wrap,
    .docs-file-card, .docs-scope, .docs-chapter, .docs-cover, .guide-prep-grid article,
    .resource-note, .compat-scope-note, .info-dialog, .image-dialog, .project-banner,
    .pricing-custom-project, .guide-code, .guide-code .code-label,
    .compat-table tbody :is(td, th), .function-table caption) {
    background: Canvas; color: CanvasText; border-color: ButtonText;
    box-shadow: none; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .site-navigation #main-nav > a[aria-current],
  .site-navigation .nav-resources.is-current > summary,
  .site-navigation .nav-resources-menu a[aria-current],
  .site-navigation .nav-resources-menu a[aria-current] small,
  .site-navigation .nav-resources-menu a[aria-current]::after {
    color: HighlightText;
    text-shadow: none;
  }
  .site-navigation #main-nav > a[aria-current]::before,
  .site-navigation .nav-resources.is-current > summary::before,
  .site-navigation .nav-resources-menu a[aria-current] {
    background: Highlight;
    border-color: HighlightText;
    box-shadow: none;
    forced-color-adjust: none;
  }
}