@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("embedded-1.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("embedded-2.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("embedded-3.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("embedded-4.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("embedded-5.woff2") format("woff2");
}
@font-face { font-family: "Poppins Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 116%; ascent-override: 90.5%; descent-override: 30.2%; line-gap-override: 8.6%; }
@font-face { font-family: "Roboto Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 100.7%; ascent-override: 92.1%; descent-override: 24.2%; line-gap-override: 0%; }


*, *::before, *::after { box-sizing: border-box; }

:root {
  --navy: #001b31;
  --ink: #001b31;
  --ink-2: #22384c;
  --muted: #4e5d6b;
  --soft: #5f6e7c;
  --line: #d5dbe3;
  --line-2: #e4e9ef;
  --ground: #fff;
  --panel: #f2f5f8;
  --panel-2: #e8eef4;
  --blue: #1e98ff;
  --blue-ink: #1670d6;
  --cyan: #55d8fe;
  --tint: #e8f3ff;
  --monitor: #1e98ff;
  --impact: #3a77d6;
  --support-qa: #8881f2;
  --research: #1db4aa;
  --social: #f8586f;
  --compete: #ff8800;
  --miss: #b42318;
  --miss-bg: #fdeceb;
  --pass-bg: #eaf1f7;

  --ease: cubic-bezier(.625, .05, 0, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --t-fast: .15s;
  --t: .3s;
  --t-med: .45s;
  --t-slow: .6s;
  --t-slower: .9s;
  --t-slowest: 1.2s;

  --r-sm: .75rem;
  --r: 1.25rem;
  --r-lg: 1.75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1320px;
  --head: Poppins, "Poppins Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: Roboto, "Roboto Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-card: 0 1px 2px rgba(0, 27, 49, .06), 0 18px 40px -18px rgba(0, 27, 49, .38);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
h1, h2, h3 { font-family: var(--head); font-weight: 500; letter-spacing: -.035em; line-height: 1.04; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--blue); }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
::selection { background: #b9dfff; color: var(--navy); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[id] { scroll-margin-top: 92px; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-transform: none;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 10px;
  font-weight: 500; box-shadow: var(--shadow-card);
}
.skip:focus { top: 10px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }


.concept {
  position: relative; z-index: 60;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 18px;
  padding: 8px 16px; background: var(--navy); color: #d5e2ee;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.concept a { color: #fff; text-decoration: none; margin-right: 12px; }
.concept a:hover { color: var(--cyan); }
.concept a[aria-current="page"] { color: var(--cyan); }
.concept-note { color: #8eabc2; }


.btn {
  --bg: #1a73d9; --fg: #fff; --fill: #155fb8; --fill-fg: #fff;
  --chip: #fff; --chip-fg: #1a73d9; --chip-on: #fff; --chip-on-fg: #155fb8;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 44px; padding: .3rem .32rem .3rem 1.15rem;
  border: 0; border-radius: 999px; background: var(--bg); color: var(--fg);
  font-family: var(--head); font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--fill); transform: translate3d(0, 102%, 0);
  transition: transform var(--t-med) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--fill-fg); }
.btn:active { transform: scale(.98); }
.btn__icon {
  position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: 34px; height: 34px; border-radius: 50%; background: var(--chip); color: var(--chip-fg);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover .btn__icon, .btn:focus-visible .btn__icon { background: var(--chip-on); color: var(--chip-on-fg); }
.btn__icon svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.btn__icon svg + svg { position: absolute; transform: translate3d(-180%, 0, 0); }
.btn:hover .btn__icon svg:first-child, .btn:focus-visible .btn__icon svg:first-child { transform: translate3d(180%, 0, 0); }
.btn:hover .btn__icon svg + svg, .btn:focus-visible .btn__icon svg + svg { transform: none; transition-delay: 60ms; }
.btn--light { --bg: #fff; --fg: var(--navy); --fill: var(--blue-ink); --fill-fg: #fff; --chip: var(--blue-ink); --chip-fg: #fff; --chip-on: #fff; --chip-on-fg: var(--blue-ink); }
.btn--sm { min-height: 40px; font-size: .875rem; padding: .26rem .28rem .26rem 1rem; gap: .6rem; }
.btn--sm .btn__icon { width: 30px; height: 30px; }
.btn--text { padding: .8rem 1.4rem; }

.quiet {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .2rem;
  color: inherit; text-decoration: none; font-family: var(--head); font-weight: 500; font-size: .9375rem; letter-spacing: -.01em;
}
.quiet span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-slow) var(--ease); }
.quiet:hover span, .quiet:focus-visible span { background-size: 100% 1px; }
.quiet svg { width: 14px; height: 14px; transition: transform var(--t-med) var(--ease); }
.quiet:hover svg { transform: translate3d(0, 3px, 0); }


.eyebrow {
  display: inline-flex; align-items: baseline; gap: .6rem;
  font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.eyebrow b { font-weight: 500; color: var(--blue-ink); }
.on-dark .eyebrow { color: rgba(255, 255, 255, .8); }
.on-dark .eyebrow b { color: var(--cyan); }
.wipe b { margin-right: .5em; }
.eyebrow .wipe b { margin-right: .6rem; }
.ch { transition: color .35s var(--ease); }
.ch.is-on { color: var(--blue-ink); }
.on-dark .ch.is-on, .footer .ch.is-on { color: var(--blue); }
.is-sweep .ch { transition-delay: calc(var(--i, 0) * 28ms + 650ms); }

.tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.tags li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .36rem .7rem .36rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: var(--mono); font-size: .6875rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background-color var(--t) var(--ease);
}
/* tags plus removed (QA 15) */
.tags li:hover { border-color: var(--blue); color: var(--blue-ink); background: var(--tint); }
.tags li:hover::before { transform: rotate(90deg); }
.tags--plain li::before { content: none; }
.on-dark .tags li, .glass .tags li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.on-dark .tags li::before, .glass .tags li::before { color: var(--cyan); }
.on-dark .tags li:hover, .glass .tags li:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .4); color: #fff; }

.pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; border-radius: 999px;
  font-family: var(--mono); font-size: .625rem; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
}
.pill svg { width: 10px; height: 10px; }
.pill--pass { background: var(--pass-bg); color: var(--ink-2); }
.pill--miss { background: var(--miss-bg); color: var(--miss); }
.pill--blue { background: var(--tint); color: var(--blue-ink); }
.pill--glass { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .24); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.glyph { display: inline-block; flex: none; width: 14px; height: 14px; color: var(--c, var(--blue)); vertical-align: -2px; }
.glyph--lg { width: 22px; height: 22px; }


.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.sw > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .sw > span {
    transform: translate3d(0, 110%, 0);
    transition: transform var(--t-slower) var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 50ms + var(--d, 0ms));
  }
  .js .is-in .sw > span, .js .is-in.sw > span, .js [data-split].is-in .sw > span { transform: none; }

  .js [data-reveal] {
    opacity: 0; transform: translate3d(0, 28px, 0);
    transition: opacity var(--t-slower) var(--ease-out), transform var(--t-slowest) var(--ease-expo);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .js [data-stagger] > * {
    --stagger: calc(var(--k, 0) * 90ms + var(--d, 0ms));
    opacity: 0; transform: translate3d(0, 24px, 0);
    transition-property: opacity, transform, translate, background-color, border-color;
    transition-duration: var(--t-slower), var(--t-slowest), var(--t-med), var(--t-med), var(--t-med);
    transition-timing-function: var(--ease-out), var(--ease-expo), var(--ease), var(--ease), var(--ease);
    transition-delay: var(--stagger), var(--stagger), 0s, 0s, 0s;
  }
  .js [data-stagger].is-in > * { opacity: 1; transform: none; }
}


.nav {
  position: sticky; top: 0; z-index: 50; height: 0;
  --nav-sub: var(--muted); --nav-hover: rgba(0, 27, 49, .055); --nav-line: rgba(0, 27, 49, .1);
  --nav-ico: var(--tint); --nav-ico-fg: var(--blue-ink); --mark-q: var(--navy);
}
.nav[data-theme="navy"], .nav[data-theme="ghost"] {
  --nav-sub: rgba(214, 230, 245, .72); --nav-hover: rgba(255, 255, 255, .08); --nav-line: rgba(255, 255, 255, .14);
  --nav-ico: rgba(255, 255, 255, .08); --nav-ico-fg: var(--cyan); --mark-q: #fff;
}
.nav__bar { position: absolute; top: 12px; left: 0; right: 0; padding-inline: var(--gutter); display: flex; justify-content: center; pointer-events: none; }
.nav__pill {
  position: relative; pointer-events: auto; width: min(var(--max), 100%); border-radius: 28px; overflow: hidden;
  background: rgba(255, 255, 255, .94); color: var(--navy);
  box-shadow: 0 10px 30px -14px rgba(0, 27, 49, .35);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

/* Safari: solid nav fill, no backdrop-filter (Chrome / Edge / Firefox unchanged). */
html.is-safari .nav__pill {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
  background: rgba(255, 255, 255, 1);
}
html.is-safari .nav[data-theme="navy"] .nav__pill,
html.is-safari .nav[data-theme="ghost"] .nav__pill,
html.is-safari .nav.is-open[data-theme="navy"] .nav__pill,
html.is-safari .nav.is-open[data-theme="ghost"] .nav__pill { background: #001b31; }
html.is-safari .nav.is-open[data-theme="light"] .nav__pill { background: #fff; }
html.is-safari .nav__panel,
html.is-safari .nav__sheet {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fff;
}

/* CSS-only Safari fallback if html.is-safari is late or missed. Chrome does not support -webkit-backdrop-filter: none. */
@supports (-webkit-backdrop-filter: none) {
  .nav__pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
    background: rgba(255, 255, 255, 1);
  }
  .nav[data-theme="navy"] .nav__pill,
  .nav[data-theme="ghost"] .nav__pill,
  .nav.is-open[data-theme="navy"] .nav__pill,
  .nav.is-open[data-theme="ghost"] .nav__pill { background: #001b31; }
  .nav.is-open[data-theme="light"] .nav__pill { background: #fff; }
  .nav__panel,
  .nav__sheet {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
}

.nav[data-theme="navy"] .nav__pill { background: rgba(0, 27, 49, .94); color: #fff; }
.nav.is-scrolled .nav__pill { box-shadow: 0 14px 34px -14px rgba(0, 27, 49, .5); }
.nav[data-theme="ghost"] .nav__pill { background: rgba(0, 27, 49, .55); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.nav.is-open .nav__pill { box-shadow: 0 34px 70px -30px rgba(0, 27, 49, .6); }
.nav.is-open[data-theme="light"] .nav__pill { background: #fff; }
.nav.is-open[data-theme="navy"] .nav__pill, .nav.is-open[data-theme="ghost"] .nav__pill { background: rgba(0, 27, 49, .98); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 6px 6px 18px; }
.nav__drop { height: 0; transition: height var(--t-med) var(--ease); }
.nav__brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav__brand svg { width: auto; height: 24px; }
.nav__main, .nav__login { display: none; }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__direct, .nav__trigger {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .5rem .8rem; border: 0; border-radius: 999px;
  background: none; color: inherit; font-family: var(--body); font-weight: 500; font-size: .9375rem; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; opacity: .86;
  transition: background-color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.nav__direct:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { opacity: 1; background: var(--nav-hover); }
.nav__chev { flex: none; width: 10px; height: 10px; transition: transform var(--t) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chev, .sheet__toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 6px; }
.nav__menu {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 27, 49, .06); cursor: pointer; transition: background-color var(--t) var(--ease);
}
.nav__menu svg { width: 18px; height: 18px; }
.nav[data-theme="navy"] .nav__menu, .nav[data-theme="ghost"] .nav__menu { background: rgba(255, 255, 255, .12); }

.nav__panel {
  position: absolute; top: 56px; left: 0; right: 0; z-index: 1;
  padding: clamp(1rem, 1.6vw, 1.5rem); border-top: 1px solid var(--nav-line);
  visibility: hidden; opacity: 0; transition: opacity .2s var(--ease-out), visibility 0s linear .45s;
}
.nav__panel.is-open { visibility: visible; opacity: 1; transition: opacity .25s var(--ease-out), visibility 0s; }
.np { display: grid; gap: 1.25rem; }
.np--feature { grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); }
.np > * { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .15s var(--ease-out), transform .45s var(--ease-expo); }
.nav__panel.is-open .np > * { opacity: 1; transform: none; transition-delay: .1s; }
.nav__panel.is-open .np > * + * { transition-delay: .18s; }
.np__label { margin: .2rem 0 .4rem .75rem; font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-sub); }
.np__label b { font-weight: 500; color: var(--nav-ico-fg); }
.np__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px .75rem; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
.np__list--3 { --cols: 3; }
.np__list--sol { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
@media (min-width: 1240px) { .np__list--sol { --cols: 3; grid-template-rows: repeat(3, auto); } }
/* Solutions grid: every item in a row shares one top edge (icon tiles and titles line up across columns). */
.np__list--sol > li { display: flex; }
.np__list--sol .np__link { flex: 1 1 auto; align-items: start; }
.np__link {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 14px; align-items: center; gap: .85rem;
  padding: .65rem .75rem; border-radius: 14px; color: inherit; text-decoration: none;
  transition: background-color var(--t) var(--ease);
}
.np__link:hover, .np__link:focus-visible { background: var(--nav-hover); }
.np__link:focus-visible, .np__feature:focus-visible { outline-offset: -2px; }
.np__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--nav-ico); color: var(--c, var(--nav-ico-fg)); }
.np__ico svg { width: 18px; height: 18px; }
.np__ico .glyph { width: 18px; height: 18px; vertical-align: 0; }
.np__txt { display: grid; gap: 2px; min-width: 0; }
.np__txt strong { font-family: var(--head); font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; line-height: 1.25; }
.np__txt small { font-size: .8125rem; line-height: 1.4; color: var(--nav-sub); }
.np__arrow { width: 14px; height: 14px; opacity: 0; transform: translate3d(-5px, 5px, 0); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.np__link:hover .np__arrow, .np__link:focus-visible .np__arrow { opacity: 1; transform: none; }
.np__feature { display: grid; align-content: start; gap: .3rem; padding: .5rem; border-radius: 20px; color: inherit; text-decoration: none; transition: background-color var(--t) var(--ease); }
.np__feature:hover, .np__feature:focus-visible { background: var(--nav-hover); }
.np__visual {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: .5rem; border-radius: 14px; overflow: hidden;
  background: radial-gradient(90% 120% at 25% 15%, #0f5aa3 0%, #07345c 45%, var(--navy) 100%);
}
.np__visual > svg { --mark-q: #fff; width: 40%; height: auto; overflow: visible; transition: transform .9s var(--ease-expo); }
.np__feature:hover .np__visual > svg { transform: scale(1.06); }
.np__kicker { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 18, 34, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-family: var(--mono); font-weight: 600; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; }
.np__go { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.np__go svg { width: 14px; height: 14px; }
.np__feature:hover .np__go, .np__feature:focus-visible .np__go { background: var(--cyan); color: var(--navy); }
.np__feature strong { padding-inline: .3rem; font-family: var(--head); font-weight: 500; font-size: 1rem; letter-spacing: -.015em; }
.np__feature small { padding-inline: .3rem; font-size: .8125rem; line-height: 1.4; color: var(--nav-sub); }

.no-js .nav__pill { overflow: visible; }
.no-js .nav__item:is(:hover, :focus-within) > .nav__panel {
  visibility: visible; opacity: 1; transition: opacity .25s var(--ease-out), visibility 0s;
  background: #fff; border-radius: 0 0 28px 28px; box-shadow: 0 34px 70px -30px rgba(0, 27, 49, .6);
}
.no-js .np > * { opacity: 1; transform: none; }

.nav__sheet {
  --nav-sub: var(--muted); --nav-hover: var(--panel); --nav-ico: var(--tint); --nav-ico-fg: var(--blue-ink); --mark-q: var(--navy);
  pointer-events: auto; position: absolute; top: 76px; left: var(--gutter); right: var(--gutter);
  max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px; border-radius: var(--r); background: #fff; color: var(--navy); box-shadow: var(--shadow-card);
}
.nav__sheet[hidden] { display: none; }
.sheet__toggle, .sheet__link, .sheet__jump {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px; border: 0; border-radius: 12px;
  background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  font-family: var(--head); font-weight: 500; font-size: 1.125rem; letter-spacing: -.02em;
}
.sheet__toggle:hover, .sheet__link:hover, .sheet__jump:hover { background: var(--panel); }
.sheet__toggle .nav__chev { width: 12px; height: 12px; }
.sheet__link svg { width: 14px; height: 14px; color: var(--blue-ink); }
.sheet__jump span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; color: var(--muted); }
.sheet__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.sheet__list[hidden] { display: none; }
.sheet__list .np__link { grid-template-columns: 32px minmax(0, 1fr) 14px; padding: .55rem .65rem .55rem .85rem; }
.sheet__list .np__ico { width: 32px; height: 32px; }
.sheet__list .np__arrow { opacity: .55; transform: none; }
.sheet__label { margin: 12px 14px 2px; padding-top: 12px; border-top: 1px solid var(--line-2); font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 420px) { .nav .btn--sm .btn__icon { display: none; } .nav .btn--sm { padding-right: 1rem; } }
@media (min-width: 1080px) { .nav__main, .nav__login { display: block; } .nav__menu, .nav__sheet { display: none; } }


.footer { position: relative; overflow: hidden; padding: clamp(4rem, 8vw, 6rem) 0 0; background: var(--navy); color: #c9d6e2; }
.footer__glow { position: relative; height: clamp(150px, 20vw, 280px); background: radial-gradient(70% 120% at 68% 100%, rgba(30, 152, 255, .3), rgba(22, 112, 214, .12) 50%, transparent 75%); }
.footer__mosaic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer.has-mosaic .footer__glow { background: none; }
.footer .wrap { position: relative; }
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .footer__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.footer__brand svg { width: min(420px, 78%); height: auto; }
.footer__brand p { margin-top: 1.25rem; font-family: var(--head); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.03em; color: #fff; }
.footer__cols { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer h2 { font-family: var(--mono); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8eabc2; margin-bottom: .9rem; }
.footer h2 b { color: var(--cyan); font-weight: 500; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: .9375rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer address { font-style: normal; font-size: .9375rem; line-height: 1.6; color: #fff; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .12); font-family: var(--mono); font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: #8eabc2;
}
.footer__legal p { max-width: 62ch; }

/* Floating nav autohide: move the bar only, keep .nav height 0 so the page does not shift. */
.nav__bar{transition:transform 250ms ease,opacity 250ms ease}
.nav.is-tucked .nav__bar{transform:translateY(-120%);opacity:0}
.nav.is-tucked .nav__pill{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .nav__bar{transition:none}
}

/* Advanced MCP nav card: close-banner Q + colored arcs on navy, poster still, no video. */
.np__visual{background:#001b31;isolation:isolate}
.np__visual .np__still{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;filter:brightness(.62) saturate(.48) contrast(.92);pointer-events:none;user-select:none}
.np__visual:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,27,49,.42),rgba(0,27,49,.28) 45%,rgba(0,27,49,.62))}
.np__visual .np__ring{position:absolute;z-index:2;right:-26%;top:52%;width:132%;height:auto;aspect-ratio:1;translate:0 -50%;pointer-events:none;overflow:visible}
.np__visual .np__ring path{fill:none;stroke-linecap:round}
.np__visual .np__ring-inner{stroke:rgba(255,255,255,.2);stroke-width:.7}
.np__visual .np__ring-arcs path{stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.np__visual .np__ring-arcs path.is-here{stroke-width:2.6}
.np__visual .np__ring-arcs,.np__visual .np__ring-mark{transform-box:view-box;transform-origin:50% 50%}
.np__visual .np__ring-mark path{fill:rgba(255,255,255,.22);stroke:none}
.np__kicker,.np__go{z-index:3}
.np__feature .np__visual:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;z-index:3;background:linear-gradient(90deg,#1e98ff,#3a77d6,#8881f2,#1db4aa,#f8586f,#ff8800);pointer-events:none}
.np__feature:hover .np__visual>.np__ring,.np__feature:focus-visible .np__visual>.np__ring{transform:none}
@media(prefers-reduced-motion:no-preference){
.np__visual .np__ring.is-in{animation:np-ring-spin 54s linear infinite}
.np__visual .np__ring.is-in .np__ring-mark{animation:np-ring-spin 54s linear infinite reverse}
.np__visual .np__ring.is-in.is-still,.np__visual .np__ring.is-in.is-still .np__ring-mark{animation-play-state:paused}
}
@keyframes np-ring-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
.np__visual .np__ring,.np__visual .np__ring .np__ring-mark{animation:none}
}

/* Canonical primary pill for Get a demo: site-blue, white type, white circle arrow. */
a.btn[href="/get-a-demo/"],
a.btn[href="/get-a-demo"],
a.btn[href="https://www.unitq.com/get-a-demo/"],
a.btn[href="https://www.unitq.com/get-a-demo"]{
  --bg:#1a73d9;--fill:#155fb8;--fg:#fff;--fill-fg:#fff;
  --chip:#fff;--chip-fg:#1a73d9;--chip-on:#fff;--chip-on-fg:#155fb8;
  background:#1a73d9;color:#fff;
}
a.btn[href="/get-a-demo/"]:hover,a.btn[href="/get-a-demo/"]:focus-visible,
a.btn[href="/get-a-demo"]:hover,a.btn[href="/get-a-demo"]:focus-visible,
a.btn[href="https://www.unitq.com/get-a-demo/"]:hover,a.btn[href="https://www.unitq.com/get-a-demo/"]:focus-visible,
a.btn[href="https://www.unitq.com/get-a-demo"]:hover,a.btn[href="https://www.unitq.com/get-a-demo"]:focus-visible{color:#fff}
/* Dark sections: a "light" primary is the same site-blue pill, not navy type on blue. */
.on-dark .btn--light, .window .btn--light, .mcpx-close .btn--light, .hero.on-dark .btn--light{
  --bg:#1a73d9;--fill:#155fb8;--fg:#fff;--fill-fg:#fff;
  --chip:#fff;--chip-fg:#1a73d9;--chip-on:#fff;--chip-on-fg:#155fb8;
  background:#1a73d9;color:#fff;
}
.on-dark .btn--light:hover,.on-dark .btn--light:focus-visible,
.window .btn--light:hover,.window .btn--light:focus-visible,
.mcpx-close .btn--light:hover,.mcpx-close .btn--light:focus-visible{color:#fff}

/* Primary pill hover/focus uses the darker fill, even if the ::before wipe is disabled. */
a.btn[href="/get-a-demo/"]:hover,a.btn[href="/get-a-demo/"]:focus-visible,
a.btn[href="/get-a-demo"]:hover,a.btn[href="/get-a-demo"]:focus-visible,
a.btn[href="https://www.unitq.com/get-a-demo/"]:hover,a.btn[href="https://www.unitq.com/get-a-demo/"]:focus-visible,
a.btn[href="https://www.unitq.com/get-a-demo"]:hover,a.btn[href="https://www.unitq.com/get-a-demo"]:focus-visible,
a.btn[href="/mcp/"]:hover,a.btn[href="/mcp/"]:focus-visible,
.on-dark .btn:hover,.on-dark .btn:focus-visible,
.window .btn:hover,.window .btn:focus-visible,
.mcpx-close .btn:hover,.mcpx-close .btn:focus-visible,
.hero.on-dark .btn:hover,.hero.on-dark .btn:focus-visible{background:#1a73d9;color:#fff;box-shadow:0 0 0 2px #fff}
.btn:hover,.btn:focus-visible{background:var(--fill);color:var(--fill-fg)}

/* Mobile sheet: compact Headless CX banner reusing desktop feature art */
.sheet__feature{list-style:none;margin:0 0 6px}
.np__feature--sheet{display:grid!important;grid-template-columns:112px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:6px;border-radius:14px;min-height:0}
.np__feature--sheet .np__visual{grid-row:1/3;position:relative;overflow:hidden;width:112px;height:64px;aspect-ratio:auto;border-radius:10px;display:flex;align-items:center;justify-content:center}
.np__feature--sheet .np__kicker{top:5px;left:5px;padding:2px 6px;font-size:8.5px;letter-spacing:.1em;z-index:3}
.np__feature--sheet .np__go{display:none}
.np__feature--sheet strong{align-self:end;padding:0;font-size:.95rem}
.np__feature--sheet small{align-self:start;padding:0;font-size:.78rem;line-height:1.35}
.np__feature--sheet .np__visual:after{height:2px}