/* Stable geometry across the prototype. Atmospheric motion is intentionally untouched. */
html { scrollbar-gutter: stable; }
img { max-width: 100%; }
/* Fade reveals in place. Native headings keep their original wrapping and line height. */
.js [data-reveal], .js [data-reveal].is-in,
.js [data-stagger] > *, .js [data-stagger].is-in > *,
.js [data-split], .js [data-split].is-in {
  transform: none !important; translate: none !important;
  transition-property: opacity, background-color, border-color, color !important;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-split] { opacity: 0; transition: opacity .85s cubic-bezier(.22,1,.36,1); }
  .js [data-split].is-in { opacity: 1; }
}
/* UI panels should feel anchored, rather than bobbing while the visitor scrolls. */
.float > .ui, .nx-live .float > .ui, .nx-ask-card, .nx-trail-host .nx-ask-card { animation: none !important; }
.js .tl .float[data-step], .js .stage .float[data-step],
.js .slide .float, .nx-live.is-armed .float {
  transform: none !important;
  transition-property: opacity, filter !important;
}
/* Stationary feedback, including keyboard and pressed states. */
.btn:active, .icon-btn:active, .is-pressed { transform: none; }
.np__feature:hover .np__visual > svg, .np__feature:focus-visible .np__visual > svg,
.film-pill:hover .film-pill__go svg, .film-pill:focus-visible .film-pill__go svg,
.slide__tour:focus-visible .slide__go svg,
.app:hover .app__go svg, .app:has(a:focus-visible) .app__go svg,
.b-trust:hover .card__chip svg, .card__link:focus-visible .card__chip svg { transform: none; }
.media--film:hover .film__poster, .media--film:focus-within .film__poster,
.card--photo:hover .ph, .card--photo:focus-within .ph { transform: none; }
.loop__item, .loop__ring, .loop__back { cursor: default; }
/* Demo CTAs are always unitQ blue, independent of the current product color. */

/* 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}
.demo-handoff { display: grid; gap: 1.5rem; align-content: center; min-height: 380px; }
.demo-handoff h3 { font: 500 clamp(1.7rem,3vw,2.5rem)/1.15 var(--head); letter-spacing: -.035em; }
.demo-handoff p { max-width: 36rem; color: var(--ink-2); }
.demo-handoff .btn { justify-self: start; }
/* Mobile film and player containers retain their reserved geometry. */
video { object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .js [data-split] { opacity: 1; }
}

/* Reserve the tallest mobile moment, not just whichever tab happens to be active. */
@media (max-width: 639px) {
  .journey__stage { display: grid; }
  .journey__stage .moment { display: flex; grid-area: 1 / 1; align-self: start; min-width: 0; }
}
/* The mobile walkthrough crossfades cards in one reserved cell. No re-centering mid-line. */
.stage--stack .scene { display: grid; }
.stage--stack .scene .float { display: block; grid-area: 1 / 1; align-self: start; min-width: 0; }
.stage--stack .scene .float:has(~ .float.is-on) { display: block; opacity: 0 !important; visibility: hidden; }
.js .slide:not(.is-active) { transform: none; }
/* Small viewport units do not grow/shrink when mobile browser chrome moves. */
@supports (height: 1svh) {
  .hero__content { padding-bottom: clamp(2.5rem, 8svh, 5.5rem); }
  .film-pill { bottom: clamp(2.5rem, 8svh, 5.5rem); }
  .window { min-height: clamp(560px, 80svh, 780px); }
  .section.platform .window { min-height: clamp(680px, 92svh, 920px); }
}

/* Full-viewport film heroes fill the screen again on every page that uses them. */
.hero__frame,
.nx-film-hero {
  min-height: 100vh;
  min-height: 100svh;
}

.slide__product, .slide__tour-link { color: inherit; text-decoration: none; border-radius: 6px; }
.slide__product:focus-visible, .slide__tour-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.slide__tour-link:hover .slide__go, .slide__tour-link:focus-visible .slide__go { text-decoration: underline; text-underline-offset: 4px; }
.slide__tour-link:focus-visible .slide__go svg { transform: none; }

.np__arrow, .np__link:hover .np__arrow, .np__link:focus-visible .np__arrow,
.film__hint, .media--film:hover .film__hint, .media--film:focus-within .film__hint,
.card__go, .card--photo:hover .card__go, .card--photo:focus-within .card__go,
.card--photo .reveal-copy > p, .card--photo:hover .reveal-copy > p,
.card--photo:focus-within .reveal-copy > p { transform: none; }

/* Shared fades never stagger card siblings or leave partially populated rows. */
.js [data-reveal], .js [data-stagger], .js [data-stagger] > *, .js [data-split] {
  transition-delay: 0s !important;
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-stagger] { opacity: 0; transition: opacity .35s ease-out; }
  .js [data-stagger].is-in { opacity: 1; }
  .js [data-stagger] > * { opacity: 1 !important; transition: none !important; }
  html.js:not(.hero-ready) .hero .hero__content { opacity: 0; animation: hero-failsafe 0s linear 1.5s forwards !important; }
  @keyframes hero-failsafe { to { opacity: 1; } }
}
/* These are explanations, not timed player scenes: show each complete row together. */
.js .relay [data-step], .js #panel-ingest .ui__row[data-step] {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  transition: none !important;
}

/* The thread meets the footer band with a clean edge, never a fade over footer copy. */
.energy-f-wrap, .energy-f-wrap[data-energy-start-after-hero] {
  overflow: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Below-hero copy/card reveals finish promptly; headline ease-in keeps its own timing. */
html.js main > section:not(.hero) [data-reveal] { transition-duration: .35s !important; }

/* Mobile QA pass (shared by every page). Scoped to small screens, desktop is untouched. */
@media (max-width: 860px) {
  /* Footer links are real tap targets: 44px tall, rhythm kept by dropping the list gap. */
  .footer ul { gap: 0; }
  .footer ul a, .footer__legal a, .footer address a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__legal ul { gap: 0 1.25rem; }
  /* iOS Safari zooms the page when an input is under 16px. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .nx-search input, select, textarea { font-size: 16px; }
  /* Filter chips, player controls and the scroll cue reach 44px. */
  .nx-filter-group button { min-height: 44px; }
  .nx-scroll { min-height: 44px; display: inline-flex; align-items: center; }
  .stage__bar .ctl, .ctl { min-width: 44px; min-height: 44px; }
  /* Scroll lock while the menu sheet is open. */
  html:has(.nav__menu[aria-expanded="true"]) { overflow: hidden; }
  .sheet { overscroll-behavior: contain; }
  /* Standalone text links get a 44px hit area (inline links inside sentences keep their size). */
  .quote__watch a, .slide__tour-link, .app__name a, .nx-link, .np__feature { display: inline-flex; align-items: center; min-height: 44px; }
  .np__feature { display: grid; }
}

/* iOS safe area: keep the floating nav and the demo header below the status bar. */
.nav__bar { top: calc(12px + env(safe-area-inset-top, 0px)); }
.dmh { padding-top: calc(30px + env(safe-area-inset-top, 0px)); }
.nx-company-hero, .nx-customers-hero, .nx-text-hero, .nx-mcp-hero, .mcpx-hero,
.nx-platform-hero, .cq-hero, .dm {
  border-top: env(safe-area-inset-top, 0px) solid transparent;
}

/* On small screens, film heroes fill the viewport but never clip the headline.
   Copy starts below the nav. The frame can grow taller than the screen. */
@media (max-width: 860px) {
  .hero,
  .hero__frame,
  .nx-film-hero,
  .mcpx-hero,
  .nx-mcp-hero,
  .nx-company-hero,
  .nx-customers-hero,
  .nx-text-hero,
  .nx-platform-hero,
  .cq-hero,
  .dm {
    width: 100%;
    max-width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    min-width: 0;
  }
  .hero__frame,
  .nx-film-hero {
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    max-height: none;
    min-height: 100vh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
    /* overflow-x: hidden would force overflow-y to auto and trap trackpad and touch scroll. */
    overflow-x: visible;
    overflow-y: visible;
  }
  .hero__content {
    margin-top: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 5.75rem);
    padding-bottom: clamp(1.5rem, 5svh, 2.5rem);
  }
  .hero__content,
  .hero__copy,
  .hero__ctas,
  .hero__foot,
  .hero__title,
  .nx-film-hero .wrap,
  .mcpx-hero .wrap,
  .nx-mcp-hero .wrap,
  .nx-company-hero .wrap,
  .nx-customers-hero .wrap,
  .nx-text-hero .wrap,
  .nx-platform-hero .wrap,
  .cq-hero .wrap,
  .dm .wrap,
  .dm__copy,
  .dm__grid {
    min-width: 0;
    max-width: 100%;
  }
  .hero__frame img,
  .hero__frame video,
  .hero__frame iframe,
  .hero__frame canvas,
  .nx-film-hero img,
  .nx-film-hero video,
  .nx-film-hero iframe,
  .nx-film-hero canvas,
  .mcpx-hero img,
  .mcpx-hero video,
  .mcpx-hero iframe,
  .mcpx-hero canvas,
  .nx-mcp-hero img,
  .nx-mcp-hero video,
  .nx-company-hero img,
  .nx-customers-hero img,
  .nx-text-hero img,
  .cq-hero img,
  .dm img,
  .dm video {
    max-width: 100%;
  }
  .hero__title,
  .hero h1,
  .nx-film-hero h1,
  .mcpx-hero h1,
  .nx-mcp-hero h1,
  .nx-company-hero h1,
  .nx-customers-hero h1,
  .nx-text-hero h1,
  .cq-hero h1,
  .dm h1 {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Decorative fill layers can clip the scaled film. They are not page scroll boxes. */
  .hero__media,
  .nx-film-bg,
  .nx-hero-visual {
    overflow: hidden;
  }
  @supports (overflow: clip) {
    html, body {
      overflow-x: clip;
      overflow-y: visible;
    }
    .hero__frame,
    .nx-film-hero,
    .mcpx-hero,
    .nx-mcp-hero,
    .nx-company-hero,
    .nx-customers-hero,
    .nx-text-hero,
    .nx-platform-hero,
    .cq-hero,
    .dm {
      overflow-x: clip;
      overflow-y: visible;
    }
  }
}

/* On phones and narrow widths, heroes stay full-bleed: no scroll-driven side inset,
   rounded corners, shrink, or media parallax. Coarse pointers at wider widths are
   handled in JS by pinning --hi and --hp to 0. Film heroes size to their copy
   plus padding, so there is no full-screen dead zone under the CTAs. */
@media (max-width: 768px) {
  .hero,
  .hero__frame,
  .nx-platform-hero {
    --hi: 0 !important;
    --hp: 0 !important;
  }
  .hero__frame,
  .nx-platform-hero {
    clip-path: none !important;
    border-radius: 0 !important;
  }
  .hero__media,
  .nx-platform-hero .nx-platform-bg {
    transform: none;
  }
  .hero__frame,
  .nx-film-hero,
  .nx-platform-hero {
    min-height: 0;
    height: auto;
    max-height: none;
  }
}

/* Energy line is a page-level overlay (z-index: 4). A track transform during a
   product tab slide creates a new stacking context that can fall under that
   overlay mid-transition. Keep every horizontal carousel above the line at all
   times, including while it is moving. */
.cycle .viewport,
[data-cycle] .viewport,
.reel-tabs,
.jtabs,
.mcpx-reel {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

/* Intro video pill: keep the same distance from the hero's visible edge in every scroll state.
   The hero clips its sides by --hi * gutter and rounds its bottom corners (--r-lg), so the pill moves in with the clip. */
.hero__frame .film-pill{
  right:calc(var(--gutter) * (1 + var(--hi, 0)) + 2px);
  bottom:max(calc(var(--r-lg) * 1.5), clamp(2.5rem, 8svh, 5.5rem));
}

/* ---- Final QA: 44px touch targets on phones (hit area only; desktop untouched). Scoped, append-only. ---- */
@media (max-width: 640px) {
  /* unitQ Score vertical tabs and company links */
  .sq-filters button { min-height: 44px; }
  .sq-nm { position: relative; }
  .sq-nm::after { content: ""; position: absolute; inset: -9px 0; }
  /* Product page in-page chapter nav and its tour links */
  .chapters__list a { display: inline-flex; align-items: center; min-height: 44px; }
  .chapters__watch, .stage__tour { min-height: 44px; }
  .nav__actions .btn--sm { min-height: 44px; }
  /* Guide table of contents */
  .gs-toc li a { display: flex; align-items: center; min-height: 44px; }
  .ct-layout .ct-toc .gs-toc li { margin: 0 0 2px !important; }
  /* /mcp/ "Watch the full tour" link only */
  .mcpx-sc__go { display: inline-flex; align-items: center; min-height: 44px; }
  /* Breadcrumbs: MCP tools, scorecards, blog posts. Negative margin keeps the visible line height. */
  .mcpx-crumb a, .nx-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin-block: -14px; }
  /* App Store / Google Play badges on scorecards */
  .sc-src { min-height: 44px; }
  /* Footer links such as Home */
  .footer li > a { display: inline-block; min-width: 44px; }
}

/* 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)}

/* === qa-fix-t605 === */
/* Product subnav: keep labels out from under the next/watch button; scroll with edge fade. */
@media (max-width: 1179px) {
  .chapters__list {
    padding-inline-end: 2.75rem;
    scroll-padding-inline-end: 2.75rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .chapters__list li { flex: none; }
}

/* Header Get a demo: 44px tap target on phones. */
@media (max-width: 860px) {
  .nav__actions .btn--sm,
  .nav .btn--sm { min-height: 44px; }
}

/* Mobile menu: no external-arrow on on-site links; hamburger becomes an X when open. */
.sheet__link:not([target="_blank"]) svg { display: none; }
.nav__menu { position: relative; }
.nav__menu[aria-expanded="true"] svg { opacity: 0; }
.nav__menu[aria-expanded="true"]::before,
.nav__menu[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.7px;
  margin-left: -6px;
  margin-top: -0.85px;
  background: currentColor;
  border-radius: 1px;
}
.nav__menu[aria-expanded="true"]::before { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"]::after { transform: rotate(-45deg); }

/* Guide tables: swipe affordance; stacked cards when labels are present. */
@media (max-width: 1024px) {
  .gs-tablewrap { position: relative; }
  .gs-tablewrap:not(.is-stacked)::after {
    content: "Swipe to see all columns";
    display: block;
    margin: 8px 4px 0;
    font: 500 12px/1.3 var(--mono, ui-monospace, monospace);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4e5d6b;
  }
  .gs-tablewrap:not(.is-stacked) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent);
  }
  .gs-tablewrap.is-stacked {
    overflow: visible;
    border: 0;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gs-tablewrap.is-stacked table,
  table.is-stacked {
    min-width: 0 !important;
    width: 100%;
  }
  .gs-tablewrap.is-stacked thead,
  table.is-stacked thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .gs-tablewrap.is-stacked tr,
  table.is-stacked tr {
    display: block;
    border: 1px solid var(--line-2, #d5dbe3);
    border-radius: 16px;
    margin: 0 0 12px;
    padding: 12px 16px;
    background: #fff;
  }
  .gs-tablewrap.is-stacked td,
  table.is-stacked td {
    display: grid;
    grid-template-columns: minmax(8ch, 11ch) minmax(0, 1fr);
    gap: 12px;
    border: 0;
    border-bottom: 1px solid var(--line-2, #eee);
    padding: 8px 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .gs-tablewrap.is-stacked td:last-child,
  table.is-stacked td:last-child { border-bottom: 0; }
  .gs-tablewrap.is-stacked td::before,
  table.is-stacked td::before {
    content: attr(data-label);
    font: 500 11px/1.3 var(--mono, ui-monospace, monospace);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4e5d6b;
  }
}

@media (max-width: 480px) {
  .chapters__list a { padding-inline: .55rem; }
}

/* QA round 2 (Nov 11): smaller footer logo, one footer text color. */
.footer .footer__brand svg { width: min(240px, 60%); }
.footer a, .footer address, .footer .footer__legal, .footer .footer__legal a, .footer .footer__legal p { color: #c9d6e2; }
.footer a:hover, .footer a:focus-visible, .footer .footer__legal a:hover { color: #fff; }