/* Global physical-stability policy.
   Production motion follows each component's approved runtime. Automated
   capture may opt into a static frame explicitly with
   data-test-static-motion="true" on the document element. */
html { scrollbar-gutter: stable; overflow-x: clip; }
body { overflow-x: clip; }

[data-test-static-motion="true"] *,
[data-test-static-motion="true"] *::before,
[data-test-static-motion="true"] *::after { animation: none !important; }

[data-test-static-motion="true"] .reveal,
[data-test-static-motion="true"] .metric,
[data-test-static-motion="true"] .stage,
[data-test-static-motion="true"] .badge,
[data-test-static-motion="true"] .f4,
[data-test-static-motion="true"] .ld-el,
[data-test-static-motion="true"] .stat,
[data-test-static-motion="true"] .surface,
[data-test-static-motion="true"] .pill,
[data-test-static-motion="true"] .qband .payoff,
[data-test-static-motion="true"] .viz-area,
[data-test-static-motion="true"] .viz-dot,
[data-test-static-motion="true"] .scan-row,
[data-test-static-motion="true"] .warn-row,
[data-test-static-motion="true"] .ck,
[data-test-static-motion="true"] .json .ln,
[data-test-static-motion="true"] .gr,
[data-test-static-motion="true"] .fin-card,
[data-test-static-motion="true"] .json-done,
[data-test-static-motion="true"] .airdy,
[data-test-static-motion="true"] .air-sub,
[data-test-static-motion="true"] .chips-demo .cm,
[data-test-static-motion="true"] .recs .rec-card,
[data-test-static-motion="true"] .rec-lift,
[data-test-static-motion="true"] .outcomes span {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

[data-test-static-motion="true"] .dash .bar span { width: var(--w, 100%) !important; transition: none !important; }
[data-test-static-motion="true"] .mapd .route { stroke-dashoffset: 0 !important; }
[data-test-static-motion="true"] .mapd .walker { offset-distance: 100% !important; opacity: 1 !important; }
[data-test-static-motion="true"] .mapd .pin,
[data-test-static-motion="true"] .actd .ab.pick .pk { opacity: 1 !important; }
[data-test-static-motion="true"] .jsteps::before { transform: scaleX(1) !important; transition: none !important; }

/* Desktop retains the approved manual hero showcase. The video layer is
   suppressed only in the phone composition below, where controls are hidden
   and the bounded dashboard presentation is authoritative. */

/* Never animate geometry. Interactive feedback is color/opacity only. */
.btn,
.button,
.nav-cta,
.nav-link,
.links a,
.card,
.faq-q span,
.mnav-panel,
.mnav-scrim {
  transition-property: color, background-color, border-color, box-shadow, opacity !important;
}
.btn:hover,
.nav-cta:hover,
.card:hover,
.mq-chip:hover,
.actd .ab.press { transform: none !important; }

/* Approved motion: the two identically positioned industry layers and the
   matching question crossfade using opacity only. */
.hb-layer { transition: opacity 650ms cubic-bezier(.22, 1, .36, 1) !important; }
.rot { transition: opacity 650ms cubic-bezier(.22, 1, .36, 1) !important; }

/* Restore the existing, approved desktop hero runtime without reopening
   decorative geometry motion across the rest of the site. These names and
   timings come from the hero's original CSS; reduced-motion remains static. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  body > main > .hero .mq-track { animation: mqscroll 85s linear infinite !important; }
  body > main > .hero .dash-live { animation: sweep 4.5s var(--ease) infinite !important; }
  body > main > .hero .dfocus .fstat.warn { animation: softpulse 2.4s ease-in-out infinite !important; }
  body > main > .hero .dash::after { animation: sheen 15s linear infinite !important; }
  body > main > .hero .dtop .live .dot { animation: pulse 2s infinite !important; }
  body > main > .hero .dfocus .caret { animation: cbl 1s step-end infinite !important; }

  .nira-hero .search-row .caret { animation: blink 1s step-end infinite !important; }
  .nira-hero .status .dots i { animation: blink 1.2s infinite !important; }
  .nira-hero .status .dots i:nth-child(2) { animation-delay: .2s !important; }
  .nira-hero .status .dots i:nth-child(3) { animation-delay: .4s !important; }
  .nira-hero .sc4.active .rec::before { animation: recGlow 4s ease-in-out infinite !important; }
  .nira-hero .dsc4.active .dmap .orig { animation: dpin .3s var(--ease) .1s forwards !important; }
  .nira-hero .dsc4.active .dmap .route { animation: droute 1.2s var(--ease) .15s forwards !important; }
  .nira-hero .dsc4.active .dmap .pin { animation: dpin .4s var(--ease) 1.15s forwards !important; }
  .nira-hero .gpt-typing i { animation: blink 1.2s infinite !important; }
  .nira-hero .dspark path.in { animation: dsp 1.1s var(--ease) forwards !important; }
  .nira-hero .dcaret { animation: blink 1s step-end infinite !important; }
  .nira-hero .drec::after { animation: drecG 3s ease-in-out infinite !important; }
  .nira-hero .ws-connector.on i { animation: connectorFeed 1.45s var(--ease) forwards !important; }
  .nira-hero .intel-pulse { animation: bp 1.8s infinite !important; }
}

@media (min-width: 768px) {
  body > main > .hero #bizName { transition: opacity .4s var(--ease) !important; }
  body > main > .hero .btn { transition: all .2s var(--ease) !important; }
  body > main > .hero .btn-gold:hover { transform: translateY(-1px) !important; }
  body > main > .hero .mq-chip { transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease) !important; }
  body > main > .hero .mq-chip:hover { transform: translateY(-2px) !important; }
  .nira-hero .row .ck { transition: opacity .25s var(--ease) !important; }

  /* The reveal reset above removes transforms globally. The Command Center
     previously kept left:50%, so losing translateX(-50%) moved the entire
     dashboard to the right. Give it a centered, transform-free layout box. */
  .cmd .wrap { max-width: 1244px; }
  .cmd .dash-wrap {
    left: auto !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    transform: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  /* Keep the desktop callouts inside the viewport until the existing
     <=900px reflow hides them and switches the dashboard to two columns. */
  .cmd .dash-wrap { width: calc(100% - 8px) !important; }
}

/* Live dashboard copy/state changes must not resize the desktop hero. */
@media (min-width: 768px) {
  body > main > .hero .dash { height: 840px; }
}

img,
video,
iframe { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .hb-layer,
  .rot { transition: none !important; }
}

@media (max-width: 767px) {
  /* Older secondary-page headers use the same controls without a drawer.
     Reserve a second row instead of letting localized CTA text overflow. */
  .nav .nav-inner:has(.nav-right) {
    height: auto !important;
    min-height: 69px;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nav-right {
    width: 100%;
    margin-left: 0 !important;
    gap: 8px !important;
    justify-content: space-between;
  }
  .nav-right .nav-link { font-size: 12px; }
  .nav-right .btn { padding: 9px 10px; font-size: 12px; }
}

/* Phone composition remediation.
   The desktop product canvas remains unchanged. On phones the photograph is
   one fixed hero background, while the illustrative product surfaces become
   readable stacked cards instead of compressed desktop grids. */
@media (max-width: 767px) {
  /* Homepage hero: content-driven height, one background/copy/dashboard
     composition, and no carousel controls over customer-facing content. */
  body > main > .hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 30px 0 76px !important;
    align-items: flex-start !important;
  }
  body > main > .hero .hero-bg,
  body > main > .hero .hb-layer {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  body > main > .hero .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(12,11,9,.68) 0%, rgba(12,11,9,.42) 24%, rgba(12,11,9,.52) 55%, rgba(12,11,9,.88) 100%),
      linear-gradient(90deg, rgba(12,11,9,.78), rgba(12,11,9,.22)) !important;
  }
  body > main > .hero .hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }
  body > main > .hero .hero-copy,
  body > main > .hero .dash {
    grid-column: 1 !important;
    min-width: 0 !important;
  }
  body > main > .hero .hero-copy { width: 100% !important; }
  body > main > .hero .hero-cta,
  body > main > .hero .primary-action { width: 100%; }
  body > main > .hero .hero-cta .btn,
  body > main > .hero .primary-action .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  body > main > .hero .cta-reassure {
    width: 100%;
    padding: 0;
    text-align: center;
    line-height: 1.45;
  }
  body > main > .hero .platline {
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
  body > main > .hero .platname { min-width: 132px; }
  body > main > .hero .dash {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
    justify-self: stretch !important;
    border-radius: 16px;
  }
  body > main > .hero .dtop {
    display: flex !important;
    height: auto !important;
    min-height: 58px;
    padding: 12px 14px;
    gap: 10px;
  }
  body > main > .hero .dtop .pill { display: none; }
  body > main > .hero .dtop .live { font-size: 8px; letter-spacing: .06em; }
  body > main > .hero .dscore {
    padding: 16px 14px 12px;
    gap: 14px;
  }
  body > main > .hero .ring { width: 102px; height: 102px; }
  body > main > .hero .ring svg { width: 102px; height: 102px; }
  body > main > .hero .ring .lbl b { font-size: 29px; }
  body > main > .hero .brief-slot { min-height: 64px; }
  body > main > .hero .brief { font-size: 12.5px; }
  body > main > .hero .dfocus {
    height: auto !important;
    min-height: 78px;
    padding: 12px 14px;
    gap: 10px;
  }
  body > main > .hero .dfocus .fsub { white-space: normal; }
  body > main > .hero .drow,
  body > main > .hero .dkpi,
  body > main > .hero .ddetail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body > main > .hero .dcell2,
  body > main > .hero .dkpi .kc,
  body > main > .hero .ddetail .dc { padding: 12px; min-width: 0; }
  body > main > .hero .dkpi .kc:nth-child(2n),
  body > main > .hero .ddetail .dc:nth-child(2n) { border-right: 0; }
  body > main > .hero .ddetail .dc:nth-child(2),
  body > main > .hero .ddetail .dc:nth-child(4) { display: none; }
  body > main > .hero .cw .cn,
  body > main > .hero .chk .lb {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  body > main > .hero .cw:nth-of-type(n+3),
  body > main > .hero .dfeed { display: none; }
  body > main > .hero .hnav { display: none !important; }
  body > main > .hero .hero-video-layer { display: none !important; }

  /* Embedded Command Center: its own responsive canvas must stay inside the
     iframe viewport; parent overflow clipping is not used as a substitute. */
  .cmd .wrap { width: 100%; padding-left: 16px; padding-right: 16px; }
  .cmd .dash-wrap {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 !important;
  }
  .cmd .cmd-dash { width: 100%; max-width: 100%; border-radius: 14px; }
  .cmd .cd-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
  }
  .cmd .cd-top .biz { text-align: left; }
  .cmd .cd-main { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 20px 16px; }
  .cmd .score-row { gap: 16px; align-items: center; }
  .cmd .ring-wrap,
  .cmd .ring { width: 112px; height: 112px; }
  .cmd .ring-num b { font-size: 34px; }
  .cmd .score-detail { min-width: 0; }
  .cmd .score-detail .delta { font-size: 24px; }
  .cmd .score-detail .spark { width: min(130px, 100%); }
  .cmd .brief-body { min-height: 0; font-size: 14px; }
  .cmd .brief-badges { flex-wrap: wrap; }
  .cmd .cd-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cmd .tile,
  .cmd .tile:nth-child(n) {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    padding: 18px 16px;
  }
  .cmd .tile:last-child { border-bottom: 0 !important; }
  .cmd .geo { right: 16px; }

  /* The recommendation journey formerly used an 86%-wide horizontal rail.
     Phones now receive the same story as a stable one-column sequence. */
  .journey .jsteps {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    transform: none !important;
    scroll-snap-type: none !important;
    padding: 0 !important;
  }
  .journey .stage { width: 100%; min-width: 0; }
  .journey .stage .node { left: 8px; transform: none !important; }

  .bo-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }
  .bo-hero .hero-copy,
  .bo-hero .hero-side,
  .bo-hero .live-demo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* All media/embeds reserve their responsive envelope without inheriting a
     desktop minimum width. */
  iframe,
  video,
  img { min-width: 0; }
  .demo-frame { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
  .sim,
  .sim-step,
  .check-grid,
  .green-grid,
  .s4grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

@media (max-width: 359px) {
  body > main > .hero .hero .wrap,
  body > main > .hero .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  body > main > .hero .business-question { font-size: 17px; }
  body > main > .hero .drow,
  body > main > .hero .dkpi,
  body > main > .hero .ddetail { grid-template-columns: minmax(0, 1fr); }
  body > main > .hero .dcell2:nth-child(2),
  body > main > .hero .dkpi .kc:nth-child(n),
  body > main > .hero .ddetail .dc:nth-child(n) { border-left: 0; border-right: 0; }
}