/* Compact product UI. Loaded after styles.css and platform.css. */
html { scroll-padding-top: 88px; }
body { font-size: 15px; line-height: 1.65; }
h1, h2, h3 { letter-spacing: -.025em; line-height: 1.2; text-transform: none; }
h1, .hero h1, .nx-hero h1, .page-intro h1 {
  font-size: clamp(36px, 3.2vw, 42px);
  line-height: 1.15;
  overflow-wrap: break-word;
}
h2, .contact-band h2, .docs-teaser h2, .nx-heading h2, .nx-media h2,
.nx-example h2, .pilot-offer-box h2, .pilot-request h2, .document-body h2,
.flow-list h2, .implementation-list h2, .docs-grid h2, .responsibility h2,
.boundary h2, .demo-help h2, .demo-main h2 {
  font-size: 30px;
  line-height: 1.25;
}
h3, .nx-card h2, .nx-card h3, .nx-flow h2, .nx-flow h3,
.nx-foundations .nx-card-body h2, .condition-card h3, .role-grid h3,
.company-card h3, .demo-complete h3 {
  font-size: 22px;
  line-height: 1.3;
}
.nx-summary h2, .pilot-choice h2 { font-size: 25px; line-height: 1.3; }
.nx-summary h3 { font-size: 16px; }
.voice-proposal h3, .conflict-card h3 { font-size: 19px; }
p { margin-top: 13px; }
.eyebrow, .hero .eyebrow, .brand small, .nx-core small,
.image-label, .mini-top, .hero-note, .flow-owner, .deliverable > small,
.responsibility article > span, .offline-diagram > div > span,
.step-number, .index, .demo-sidebar > small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
}
.eyebrow, .hero .eyebrow { margin-bottom: 14px; }
.badge, .media-chip, .node-mark { font-size: 11px; letter-spacing: 0; }
.connection-line, .flow-index { font-size: 12px; letter-spacing: 0; }
.small, small, .nx-caption, .contact-actions small, .footer-bottom,
.condition-card > small, .offline-diagram > p, .demo-note,
.demo-top small, .node-button small, .demo-progress,
.demo-form label > small, .demo-footer .small, .synthetic-photo p {
  font-size: 12px;
  line-height: 1.6;
  text-transform: none;
}
.wrap { width: min(1240px, calc(100% - 64px)); }
.section { padding-block: 48px; }
.page-intro { padding-block: 38px 22px; }
.lead, .hero-lead, .nx-hero .lead {
  font-size: 16px;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 760px;
}
.hero, .nx-hero { padding-block: 38px 44px; gap: 36px; }
.nx-hero h1 { margin-block: 15px; }
.nx-hero .lead, .hero-lead { margin-bottom: 23px; }
.hero-note { padding-top: 20px; gap: 14px; }
.hero-visual { border-radius: 16px; }
.hero-visual img, .nx-hero img { border-radius: 14px; }
.nx-hero > *, .nx-grid > *, .nx-flow > *, .nx-foundations > *,
.nx-config > *, .document-layout > *, .two-column > *,
.story-grid > *, .field-grid > *, .contact-grid > * { min-width: 0; }
.site-header { height: 76px; }
.header-inner { gap: 22px; }
.brand > svg { width: 31px; height: 31px; }
.brand b { font-size: 26px; }
.brand small { font-size: 10px; letter-spacing: .035em; margin-bottom: 3px; }
nav { gap: 18px; }
nav > a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-size: 13px; text-transform: none; }
nav > a[aria-current=page]:after { bottom: 1px; }
.header-contact { min-height: 44px; font-size: 13px; padding-left: 18px; gap: 8px; }
.button, .hero .button, .nx-summary .button, .contact-actions .button,
.demo-button, .nx-presets button, .nx-reset {
  min-height: 44px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.button { gap: 18px; }
.button, .demo-button { white-space: normal; overflow-wrap: break-word; }
.menu-toggle { min-width: 44px; min-height: 44px; }
.actions { gap: 10px; }
.actions > .button { max-width: 100%; }
.principle-bar .wrap { padding-block: 16px; gap: 22px; }
.principle-bar span { font-size: 13px; }
.section-title, .nx-heading { gap: 28px; margin-bottom: 26px; }
.section-title > p, .nx-heading p { margin-top: 0; font-size: 15px; }
.story-grid, .two-column, .offline-grid { gap: 46px; }
.process-grid { margin-block: 28px 18px; }
.process-grid li { padding-top: 18px; }
.process-grid h3 { font-size: 19px; }
.process-grid p { font-size: 13px; }
.step-number { margin-bottom: 16px; }
.condition-card { padding: 24px; }
.condition-card h3 { margin-bottom: 18px; }
.role-icon { margin-bottom: 19px; }
.role-grid p { margin-block: 14px 16px; }
.role-grid a { min-height: 44px; font-size: 13px; }
.offline-section { padding-block: 48px; }
.docs-teaser { padding-block: 20px; gap: 30px; }
.contact-band { padding-block: 44px; }
.contact-grid { gap: 36px; }
.contact-actions { gap: 13px; }
.contact-actions .email { font-size: 18px; overflow-wrap: anywhere; }
footer { padding-top: 30px; }
.footer-top { gap: 36px; padding-bottom: 27px; }
.footer-top > div { font-size: 12px; }
.footer-top > div a { padding-block: 4px; }
.footer-bottom { padding-block: 17px; }
.feature-list article, .flow-list article, .implementation-list article { padding-block: 27px; gap: 28px; }
.responsibility { margin-top: 28px; gap: 30px; }
.responsibility h2 { min-height: 0; margin-top: 14px; }
.feature-list h2 { font-size: 26px; }
.deliverable { padding-left: 22px; }
.docs-grid { gap: 20px; }
.docs-grid article { padding: 25px; }
.document-icon { font-size: 30px; margin-bottom: 19px; padding-bottom: 19px; }
.status-grid { margin-top: 27px; gap: 30px; }
.status-grid h3 { margin-top: 14px; }
.document-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 44px; }
.document-layout aside { top: 99px; font-size: 12px; }
.document-body p { line-height: 1.8; }
.company-card { padding: 26px; }
.nx-grid { gap: 20px; }
.nx-card-body { padding: 22px; }
.nx-card h2, .nx-card h3 { margin-block: 14px 10px; }
.nx-card p { margin-bottom: 18px; }
.nx-status { font-size: 11px; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.nx-flow { gap: 18px; }
.nx-flow article { padding: 22px; }
.nx-flow h2, .nx-flow h3 { margin-block: 13px; }
.nx-example { padding: 29px; }
.nx-example p, .nx-media p { font-size: 16px; }
.nx-tags { gap: 8px; margin-top: 19px; }
.nx-tags span { font-size: 13px; padding: 8px 12px; }
.nx-foundations { gap: 20px; }
.nx-note { padding: 19px 22px; }
.nx-config { gap: 24px; }
.nx-pick { gap: 11px; padding: 18px; }
.nx-pick strong { font-size: 16px; }
.nx-pick .nx-status { font-size: 11px; }
.nx-summary { top: 94px; padding: 23px; }
.nx-core { padding: 17px; margin-bottom: 17px; }
.nx-core small { letter-spacing: .015em; }
.nx-summary li { margin-block: 7px; }
.nx-select-count { font-size: 14px !important; }
.nx-presets { margin-bottom: 20px; }
.nx-media { gap: 42px; }
.nx-media video { max-height: 520px; }
.nx-resource-links { gap: 18px; margin-top: 20px; }
.nx-breadcrumb { margin-bottom: 15px; }
.pilot-offer-box { padding: 28px; }
.pilot-offer-box p, .pilot-faq details p { font-size: 15px; }
.pilot-facts { margin-block: 18px; }
.pilot-facts span { font-size: 12px; font-weight: 600; }
.pilot-faq details { padding-block: 18px; }
.pilot-faq summary { min-height: 44px; font-size: 18px; }
.pilot-faq details p { margin-top: 12px; }
.pilot-criteria { margin-top: 24px; gap: 17px; }
.pilot-criteria > div { padding: 20px; }
.pilot-criteria dt { font-size: 17px; }
.pilot-step-title { font-size: 26px; margin-block: 26px 14px; }
.pilot-choice { padding: 22px; margin-bottom: 20px; }
.pilot-choice label, .pilot-request label { margin-top: 17px; }
.pilot-choice select, .pilot-choice textarea, .pilot-request textarea { min-height: 44px; }
.pilot-request { padding: 26px; margin-top: 28px; scroll-margin-top: 94px; }
.pilot-request textarea { font-size: 14px; line-height: 1.65; }
.pilot-request .actions { margin-top: 17px; }
.pilot-email { overflow-wrap: anywhere; }
.demo-section { padding-bottom: 48px; }
.demo-disclaimer { padding: 18px 21px; margin-bottom: 22px; }
.demo-disclaimer p { font-size: 13px; }
.demo-top { padding: 18px 21px; }
.demo-top-actions { gap: 8px; }
.demo-stepper { padding: 15px 21px; font-size: 11px; flex-wrap: wrap; }
.demo-main { padding: 25px 28px; }
.demo-main h2 { font-size: 26px; }
.demo-main > p, .demo-help li, .demo-help p { font-size: 14px; }
.demo-sidebar { padding: 21px 13px; }
.node-button { min-height: 62px; padding: 13px 9px; }
.node-button b { font-size: 13px; }
.demo-progress { padding-top: 12px; }
.demo-form label { font-size: 14px; }
.demo-form label.checkbox, .review-ack { min-height: 44px; }
.demo-form input[type=checkbox], .review-ack input { width: 19px; height: 19px; flex-shrink: 0; }
.demo-form input:not([type=checkbox]), .demo-form textarea, .demo-form select { font-size: 15px; }
.demo-review { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.demo-review table { font-size: 13px; min-width: 520px; }
.demo-review th { font-size: 12px; }
.demo-review th, .demo-review td { padding: 11px 10px; }
.review-ack { font-size: 13px; }
.review-summary > span { font-size: 12px; }
.demo-status { font-size: 13px; }
.voice-proposal p, .conflict-card p, .not-applicable, .demo-complete p { font-size: 13px; }
.demo-help { margin-top: 29px; }

/* Small authored SVG pictograms and a quick visual map of all nine agents. */
.vi-icon { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; vertical-align: middle; color: var(--green); }
h2 > .vi-icon, h3 > .vi-icon, h2 > a > .vi-icon, h3 > a > .vi-icon, strong > .vi-icon { margin-inline-end: 8px; }
.nx-status, .badge { display: inline-flex; align-items: center; gap: 5px; }
.nx-status > .vi-icon, .badge > .vi-icon { width: 14px; height: 14px; flex-basis: 14px; }
svg.vi-icon, .vi-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vi-catalog-map { margin-top: 23px; }
.vi-readiness { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 20px; background: #edf4e5; border: 1px solid var(--line); border-radius: 12px; }
.vi-readiness-state { display: inline-flex; align-items: center; gap: 10px; color: #796036; }
.vi-readiness-state.current { color: #2d6a4c; }
.vi-readiness-state strong, .vi-readiness-state small { display: block; line-height: 1.5; }
.vi-readiness-state strong { font-size: 14px; font-weight: 600; }
.vi-readiness-state small { font-size: 11px; color: var(--muted); }
.vi-readiness details { margin-left: auto; }
.vi-readiness summary { min-height: 44px; padding: 12px 4px; cursor: pointer; font-size: 12px; }
.vi-readiness details[open] { flex-basis: 100%; margin-left: 0; }
.vi-readiness details p { font-size: 13px; margin: 8px 0 0; }
.vi-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.vi-map-link { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-content: center; align-items: start; gap: 4px 13px; min-width: 0; min-height: 88px; padding: 14px 18px; border: 1px solid var(--line); background: #fff; border-radius: 12px; transition: border-color .18s, background .18s; }
.vi-map-link:hover { border-color: #6e9b85; background: #f0f5e9; }
.vi-map-icon { display: inline-flex; grid-row: span 2; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #c6d7bb; background: #eef5e3; color: var(--green); border-radius: 11px; }
.vi-map-title { display: block; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; overflow-wrap: break-word; }
.vi-map-meta { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); }
.vi-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 23px; }
.vi-step { min-width: 0; padding: 22px; border: 1px solid var(--line); background: #fff; border-radius: 13px; }
.vi-step .vi-icon { display: block; width: 28px; height: 28px; margin-bottom: 10px; }
.vi-step h2, .vi-step h3 { margin: 0; font-size: 21px; line-height: 1.35; }
.vi-step p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.flow-list.vi-process > article.vi-step { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.flow-list.vi-process .flow-owner { width: auto; padding-top: 0; }

@media (max-width: 1100px) {
  .header-inner { gap: 17px; }
  nav { gap: 14px; }
  nav > a, .header-contact { font-size: 12px; }
  .header-contact { padding-left: 15px; }
  .hero, .nx-hero { gap: 28px; }
  .nx-card-body { padding: 20px; }
  .vi-map-link { padding: 16px; gap: 4px 11px; }
}
@media (max-width: 940px) {
  .hero, .nx-hero { padding-block: 33px 37px; }
  .nx-hero h1 { max-width: 730px; }
  .section { padding-block: 40px; }
  .nx-config { grid-template-columns: minmax(0, 1fr); }
  .nx-summary { position: static; }
  .document-layout { grid-template-columns: 205px minmax(0, 1fr); gap: 30px; }
  .vi-catalog-grid { gap: 10px; }
  .vi-map-link { grid-template-columns: 1fr; min-height: 132px; }
  .vi-map-icon { grid-row: auto; margin-bottom: 4px; }
  .vi-map-title { font-size: 15px; }
  .vi-process { gap: 13px; }
  .vi-step { padding: 19px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  body { font-size: 15px; }
  .wrap { width: calc(100% - 32px); }
  .site-header { height: 68px; }
  .header-inner { gap: 13px; }
  .brand > svg { width: 28px; height: 28px; }
  .brand b { font-size: 24px; }
  .brand small { font-size: 10px; }
  .menu-toggle { width: 44px; height: 44px; }
  nav { inset-block-start: 68px; padding: 14px 16px; gap: 0; }
  nav > a { display: flex; font-size: 15px; min-height: 44px; padding: 11px 12px; }
  .header-contact { font-size: 12px; padding: 0; min-height: 44px; gap: 6px; }
  h1, .hero h1, .nx-hero h1, .page-intro h1 { font-size: 30px; line-height: 1.2; }
  h2, .contact-band h2, .docs-teaser h2, .nx-heading h2, .nx-media h2,
  .nx-example h2, .pilot-offer-box h2, .pilot-request h2, .document-body h2,
  .flow-list h2, .implementation-list h2, .docs-grid h2, .responsibility h2,
  .boundary h2, .demo-help h2, .demo-main h2 { font-size: 24px; line-height: 1.3; }
  h3, .nx-card h2, .nx-card h3, .nx-flow h2, .nx-flow h3,
  .nx-foundations .nx-card-body h2, .condition-card h3, .role-grid h3,
  .company-card h3, .demo-complete h3 { font-size: 21px; }
  .nx-summary h2, .pilot-choice h2 { font-size: 23px; }
  .nx-summary h3 { font-size: 16px; }
  .voice-proposal h3, .conflict-card h3 { font-size: 18px; }
  .eyebrow, .hero .eyebrow { font-size: 11px; margin-bottom: 12px; }
  .hero-note, .image-label, .flow-owner { font-size: 11px; letter-spacing: .015em; }
  .hero, .nx-hero { padding-block: 27px 31px; gap: 24px; }
  .hero-visual { margin-top: 25px; }
  .page-intro { padding-block: 28px 17px; }
  .section, .offline-section { padding-block: 33px; }
  .hero-lead, .lead, .nx-hero .lead { font-size: 15px; margin-top: 15px; }
  .hero .button, .button, .nx-summary .button, .contact-actions .button,
  .demo-button, .nx-presets button, .nx-reset { min-height: 44px; font-size: 13px; padding: 11px 14px; }
  .hero .actions { display: flex; }
  .section-title, .nx-heading { margin-bottom: 21px; gap: 16px; }
  .section-title > p { margin-top: 13px; }
  .story-grid, .two-column, .offline-grid { gap: 25px; }
  .responsibility { gap: 26px; }
  .feature-list article, .flow-list article, .implementation-list article { padding-block: 23px; gap: 14px; }
  .feature-list h2 { font-size: 23px; }
  .flow-owner { padding-top: 0; }
  .condition-card, .company-card, .docs-grid article, .nx-card-body,
  .nx-flow article, .nx-summary, .pilot-choice { padding: 20px; }
  .nx-example, .pilot-offer-box, .pilot-request, .boundary { padding: 21px; }
  .nx-example p, .nx-media p, .pilot-offer-box p { font-size: 15px; }
  .nx-grid, .nx-foundations { gap: 17px; }
  .nx-media { gap: 24px; }
  .nx-media video { max-height: 460px; }
  .pilot-criteria { gap: 14px; }
  .pilot-faq details { padding-block: 15px; }
  .pilot-faq summary { font-size: 17px; }
  .pilot-step-title { font-size: 23px; }
  .pilot-choice select, .pilot-choice textarea, .pilot-request textarea,
  .demo-form input:not([type=checkbox]), .demo-form textarea, .demo-form select { font-size: 16px; }
  .pilot-request { scroll-margin-top: 84px; margin-top: 24px; }
  .pilot-request .actions { gap: 10px; }
  .contact-band { padding-block: 33px; }
  .contact-actions { margin-top: 23px; }
  .document-layout { grid-template-columns: minmax(0, 1fr); gap: 23px; }
  .document-layout aside { font-size: 12px; }
  .document-body p { font-size: 15px; }
  .footer-top { gap: 22px; }
  .footer-bottom { font-size: 11px; }
  .demo-section { padding-top: 10px; padding-bottom: 32px; }
  .demo-main { padding: 22px 17px; }
  .demo-main h2 { font-size: 23px; }
  .demo-disclaimer, .demo-top { padding: 17px; }
  .demo-stepper { font-size: 11px; padding-inline: 17px; gap: 8px; }
  .demo-sidebar { padding: 14px 12px; gap: 7px; }
  .demo-sidebar > small { font-size: 11px; }
  .node-button { min-height: 105px; padding: 10px 7px; }
  .node-button b { font-size: 12px; }
  .node-button small { font-size: 11px; }
  .demo-progress, .demo-note { font-size: 12px; }
  .demo-review table { font-size: 13px; }
  .demo-review th { font-size: 12px; }
  .review-ack, .demo-status { font-size: 13px; }
  .vi-process { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .vi-step { padding: 20px; }
}
@media (max-width: 600px) {
  .vi-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vi-map-link { padding: 14px; min-height: 142px; }
  .vi-map-title { font-size: 15px; }
}
@media (max-width: 480px) {
  .header-contact { display: none; }
  .contact-grid, .footer-top { gap: 23px; }
  .vi-map-link { padding: 13px; }
  .vi-map-title { font-size: 14px; }
  .vi-map-meta { font-size: 11px; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 24px); }
  .brand { gap: 8px; }
  .brand b { font-size: 23px; }
  h1, .hero h1, .nx-hero h1, .page-intro h1 { font-size: 28px; }
  .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero .button { width: 100%; }
  .nx-card-body, .nx-summary, .pilot-request, .pilot-choice,
  .pilot-offer-box, .company-card, .docs-grid article { padding: 17px; }
  .vi-catalog-grid { gap: 9px; }
  .vi-map-link { min-height: 148px; padding: 12px; }
  .vi-map-icon { width: 38px; height: 38px; }
  .demo-main { padding-inline: 14px; }
  .demo-sidebar { gap: 5px; padding-inline: 9px; }
  .node-button b { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .vi-map-link { transition: none; }
}
.back-to-top {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid #0b6659;
  border-radius: 14px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 20px #17353426;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { background: #0b5247; }
.back-to-top svg { width: 24px; height: 24px; }
.footer-top > .footer-summary { margin-left: 0; gap: 12px; }
.footer-summary > p { margin: 0; font-size: 12px; color: var(--muted); }
.footer-contacts {
  display: grid;
  width: 228px;
  max-width: 100%;
}
.footer-summary .footer-contacts a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  border-radius: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
}
.footer-contacts a:hover { color: var(--green); }
.footer-contacts svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 600px) {
  .back-to-top {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
}
@media print {
  .back-to-top { display: none; }
  body { font-size: 11pt; }
  h1, .hero h1, .nx-hero h1 { font-size: 24pt; }
  h2, .demo-main h2 { font-size: 17pt; }
  .demo-review { overflow: visible; }
  .demo-review table { min-width: 0; font-size: 10pt; }
  .demo-review th, .demo-review td { font-size: 10pt; }
  .nx-summary { position: static; }
}


