/* QR Inventory shared visual system. Homepage pilot; original DOM and copy preserved. */
:root {
  color-scheme: light;
  --ink: #14283f;
  --blue: #075ca8;
  --green: #147d52;
  --yellow: #f2c94c;
  --canvas: #f4f7fa;
  --paper: #fff;
  --line: rgb(20 40 63 / 14%);
  --shadow: 0 8px 28px rgb(20 40 63 / 7%);
  --radius: 16px;
  --gutter: clamp(20px, 3vw, 32px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 112px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--font); overflow-wrap: break-word; }
button, input, textarea, select { font: inherit; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; border-radius: 4px; }
img { max-width: 100%; height: auto; vertical-align: middle; }
iframe { max-width: 100%; border: 0; }
h1, h2, h3, h4, .header { color: var(--ink); font-weight: 700; text-wrap: pretty; }
h1 { max-width: 1040px; margin: 0 0 28px; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
h2 { margin: 12px 0 22px; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.18; letter-spacing: -.025em; }
h3 { margin: 32px 0 16px; font-size: clamp(22px, 2vw, 27px); line-height: 1.3; letter-spacing: -.015em; }
h4 { margin: 20px 0 14px; font-size: 21px; line-height: 1.35; }
p { margin: 0 0 20px; }
ul, ol { padding-left: 24px; }
li { margin-bottom: 10px; }
strong, b { font-weight: 650; }
.div1 { width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; }
.div1 > header { margin: 68px 0 24px; padding-top: 36px; border-top: 1px solid var(--line); }
.eyebrow { display: block; color: var(--green); font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.header { font-size: 22px; line-height: 1.35; }
.btext { font-size: 17px; }
/* Navigation: nonbreaking source separators collapse, link labels remain intact. */
.menu { position: sticky; z-index: 20; top: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(16px)) {
  .menu { background: rgb(255 255 255 / 94%); backdrop-filter: blur(16px); }
}
.nav { display: flex; align-items: center; gap: 8px; max-width: 1244px; min-height: 84px; margin: auto; padding: 12px var(--gutter); font-size: 0; }
.nav > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.3; font-weight: 600; }
.nav > a:hover { background: var(--canvas); }
.nav > a:first-child { flex: 0 0 52px; padding: 0; margin-right: auto; }
.nav img { width: 45px; height: 40px; }
.nav > .menubutton { color: var(--blue); border: 1px solid var(--line); }
.nav > a[href*="qr-inventory-contact.htm"] { background: var(--green); color: var(--paper); border: 1px solid var(--green); padding-inline: 20px; }
.nav > a[href*="qr-inventory-contact.htm"]:hover { box-shadow: 0 0 0 3px rgb(20 125 82 / 16%); }
.icon { display: none; }
/* Opening video section: original content and reading order. */
.qri-video-banner { max-width: 1244px; margin: 24px auto 64px; padding: clamp(24px, 4vw, 48px); background: var(--ink); border-radius: 20px; border-top: 4px solid var(--yellow); }
.qri-banner-header { max-width: 940px; margin: 0 0 32px; }
.qri-banner-header h2 { max-width: 850px; margin-top: 0; color: var(--paper); font-size: clamp(28px, 3.3vw, 42px); line-height: 1.15; }
.qri-banner-header p { max-width: 800px; color: var(--paper); font-size: 18px; line-height: 1.6; margin-bottom: 0; }
.qri-video-grid, .cell-grid, .multicolumn, .lowermenu { display: grid; grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr)); gap: 24px; }
.qri-video-card { display: flex; flex-direction: column; overflow: hidden; background: var(--paper); color: var(--ink); border-radius: 12px; text-decoration: none; box-shadow: var(--shadow); transition: box-shadow .18s ease, transform .18s ease; }
.qri-video-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
.qri-video-card:focus-visible { outline-color: var(--yellow); }
.qri-video-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--canvas); }
.qri-video-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.qri-play-button { position: absolute; top: 50%; left: 50%; width: 52px; height: 44px; transform: translate(-50%, -50%); border-radius: 12px; background: var(--yellow); box-shadow: 0 3px 12px rgb(20 40 63 / 20%); }
.qri-play-button::after { content: ""; position: absolute; top: 13px; left: 22px; border-left: 13px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.qri-video-content { padding: 24px; }
.qri-video-content h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.3; }
.qri-video-content p { margin: 0; font-size: 16px; line-height: 1.6; }
/* Introduction and repeated feature/step components. */
.div1 > h1 + div[style] { max-width: 950px; font-size: 19px; line-height: 1.7 !important; }
.cell-grid { margin: 28px 0; align-items: stretch; }
.celldiv, .three-column-section { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.celldiv { display: flex; flex-direction: column; box-shadow: var(--shadow); font-size: 16px; }
.celldiv > .content { flex: 1; }
.celldiv > div[align] { margin-top: 24px; text-align: left; }
.top-section { margin-bottom: 12px; }
.top-section .header { display: block; font-size: 23px; }
.top-section br { display: none; }
.fonticon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 20px; color: var(--blue); background: var(--canvas); border-radius: 12px; }
.fonticon .fas { width: 27px; height: 27px; }
.three-column-section { background: var(--canvas); font-size: 16px; }
.step-number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: var(--paper); font-size: 19px; font-weight: 700; }
.div1 > header + div[style*="background-color"] { background: var(--canvas) !important; border-color: var(--line) !important; border-radius: var(--radius) !important; padding: 28px !important; }
.features-list { list-style: none; padding: 0; margin: 28px 0; }
.features-list > li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); margin: 0; }
.features-list .fas { flex: 0 0 24px; color: var(--green); margin-top: 4px; }
.features-list strong { font-size: 18px; }
.features-list em { display: inline; font-style: normal; }
/* Shared button treatment. Existing wording and destinations are unaltered. */
.bluebutton, .bluebutton2, .orangebutton, .orangebutton2 { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 9px; color: var(--blue); background: var(--paper); font-size: 16px; line-height: 1.4; font-weight: 600; text-align: center; }
a:has(> .bluebutton, > .bluebutton2, > .orangebutton, > .orangebutton2) { display: inline-flex; text-decoration: none; max-width: 100%; border-radius: 9px; }
a:hover > :is(.bluebutton,.bluebutton2,.orangebutton,.orangebutton2) { background: var(--canvas); border-color: var(--blue); }
a[href*="qr-inventory-contact.htm"] > :is(.bluebutton,.bluebutton2,.orangebutton,.orangebutton2) { color: var(--paper); background: var(--green); border-color: var(--green); }
a[href*="qr-inventory-contact.htm"]:hover > :is(.bluebutton,.bluebutton2,.orangebutton,.orangebutton2) { box-shadow: 0 0 0 3px rgb(20 125 82 / 16%); }
/* One grid primitive above; content-driven variants preserve legacy groupings. */
.multicolumn { margin: 28px 0; }
.multicolumn > * { min-width: 0; }
.multicolumn:has(> .column43) { grid-template-columns: 56px minmax(0,1fr) 56px minmax(0,1fr); gap: 24px; margin-block: 44px; }
.multicolumn:has(> .column7):has(> .column27) { grid-template-columns: 44px minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr); gap: 18px; padding-block: 20px; }
.column7 img, .multicolumn:has(>.column43)>div:not([class]) img { width: 48px; }
.column43 > a:first-child, .column43 > strong:first-child, .column27 > a:first-child.blink { font-size: 20px; font-weight: 650; line-height: 1.35; }
.multicolumn:has(> .column27):not(:has(>.column7)) { --columns: 4; align-items: start; gap: 32px; }
.multicolumn > .column27[style*="center"] { display: flex; min-height: 96px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
.column27[style*="center"] img { max-height: 68px; width: auto; object-fit: contain; }
.multicolumn > .column27[style*="left"] { font-size: 15px; line-height: 1.65; }
.column27[style*="left"] img { max-height: 96px; width: auto; object-fit: contain; margin-bottom: 16px; }
.multicolumn:has(>.column):not(.quotes) { grid-template-columns: repeat(auto-fit,minmax(min(100%,240px),1fr)); align-items: center; }
/* Existing script controls display and selected button colors. */
.tabs { display: flex; gap: 12px; }
.tabs:has(>.tab-button) { flex-wrap: wrap; margin-block: 28px; font-size: 0; }
a.tab-button { text-decoration: none; text-align: center; }
.tabs:not([id]):has(>div) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-block: 28px; }
.tabs:not([id]) > div { min-width: 0; margin-inline: 0 !important; }
.tabs:has(>button) { flex-wrap: wrap; margin: 28px 0; }
.tab-button { flex: 1 1 160px; min-height: 52px; padding: 14px 18px; border: 2px solid transparent; border-radius: 9px; background: var(--blue); color: var(--paper); font-size: 16px; line-height: 1.35; font-weight: 600; cursor: pointer; }
/* Match existing inline JS state without editing the JavaScript or DOM. */
.tab-button[style*="0, 86, 179"] { background: var(--blue) !important; border-color: var(--blue); box-shadow: inset 0 -4px var(--yellow); }
.tab-button[style*="29, 78, 216"] { background: var(--canvas) !important; color: var(--blue); border-color: var(--line); }
.tabs[id] { gap: 32px; align-items: flex-start; padding: 28px; margin-bottom: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
.tabs[id] > div { flex: 1 1 0; min-width: 0; }
.tabs[id] > div[style] { margin-right: 0 !important; }
.tabs[id] h3 { margin-top: 0; }
.video-container { width: 100%; aspect-ratio: 500 / 283; background: var(--ink); border-radius: 12px; overflow: hidden; }
.video-container iframe { display: block; width: 100%; height: 100%; }
/* Preserve all carousel labels, source logos, and every quoted word. */
#cycler { display: grid; width: 100%; overflow-x: auto; margin: 28px 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--canvas); }
#cycler .slide { grid-area: 1/1; visibility: hidden; opacity: 0; width: 960px; transition: opacity .3s ease; }
#cycler .slide.showing { visibility: visible; opacity: 1; }
#cycler .slide img { display: block; width: 960px; max-width: none; height: 40px; object-fit: contain; }
.slidetext2 { display: block; margin-top: 20px; color: var(--green); font-weight: 650; }
.quotes { --columns: 4; gap: 20px; }
blockquote { margin: 0; padding: 28px; background: var(--canvas); border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; font-size: 17px; text-align: left; }
.quotes blockquote[style] { width: auto !important; height: auto !important; min-height: 260px; font-size: 16px; }
blockquote::after { content: ""; display: block; clear: both; }
.multicolumn2-1 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr); gap: 32px; margin: 36px 0; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.multicolumn2-1 > .column2 { display: none; }
.multicolumn2-1 h3 { margin-top: 0; }
/* Source column2 nodes are empty spacers; no content is suppressed. */
.lowermenu { --columns: 4; margin-top: 72px; padding: 48px max(var(--gutter), calc((100% - 1180px) / 2)); background: var(--ink); color: var(--paper); font-size: 17px; line-height: 1.7; font-weight: 600; }
.lowermenu a { display: inline-block; min-height: 44px; padding-block: 9px; color: var(--paper); font-size: 15px; line-height: 1.5; font-weight: 400; text-decoration-color: rgb(255 255 255 / 40%); }
.lowermenu a:focus-visible { outline-color: var(--yellow); }
.lowermenu a[href*="qr-inventory-contact.htm"] { background: var(--green); border-radius: 8px; padding: 12px 24px; margin-top: 12px; font-weight: 650; text-decoration: none; }
.footer { padding: 24px var(--gutter); text-align: center; color: var(--ink); background: var(--canvas); font-size: 14px; }
.footer p { margin: 0; }
/* Local, font-free icon masks. No pseudo-element words or glyph strings. */
.fas { display: inline-block; width: 24px; height: 24px; background-color: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.fa-qrcode { --icon: url("icons/qrcode.svg"); }
.fa-map-marker-alt { --icon: url("icons/map-marker-alt.svg"); }
.fa-microchip { --icon: url("icons/microchip.svg"); }
.fa-clipboard-list { --icon: url("icons/clipboard-list.svg"); }
.fa-spinner { --icon: url("icons/spinner.svg"); }
.fa-comment-dots { --icon: url("icons/comment-dots.svg"); }
.fa-cloud { --icon: url("icons/cloud.svg"); }
.fa-mobile-alt { --icon: url("icons/mobile-alt.svg"); }
.fa-microphone { --icon: url("icons/microphone.svg"); }
.fa-chart-line { --icon: url("icons/chart-line.svg"); }
.fa-bell { --icon: url("icons/bell.svg"); }
.fa-sitemap { --icon: url("icons/sitemap.svg"); }
.fa-cogs { --icon: url("icons/cogs.svg"); }
.fa-users { --icon: url("icons/users.svg"); }
.fa-robot { --icon: url("icons/robot.svg"); }
/* Desktop navigation remains visible after a mobile close/open state. */
@media (min-width: 1101px) {
  .nav { display: flex !important; }
}
@media (max-width: 1280px) {
  .qri-video-banner { margin-inline: var(--gutter); }
}
@media (max-width: 1100px) {
  html { scroll-padding-top: 24px; }
  .menu { position: relative; min-height: 76px; background-image: url("../images/QRInventoryLogo45x40.png"); background-repeat: no-repeat; background-position: var(--gutter) 18px; background-size: 45px 40px; }
  .menu:has(#nav[style*="block"]) { background-image: none; }
  .menu > div:first-child { min-height: 76px; display: flex; align-items: center; justify-content: flex-end; padding-inline: var(--gutter); }
  .icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9px; font-size: 24px; color: var(--ink); text-decoration: none; }
  .nav { display: none; padding: 0 var(--gutter) 20px; }
  .nav > a { display: flex; justify-content: flex-start; width: 100%; min-height: 48px; padding: 12px; margin: 4px 0; font-size: 16px; }
  .nav > a:first-child { margin: 0 0 12px; width: 52px; }
  .nav > a[href*="qr-inventory-contact.htm"] { justify-content: center; }
  .cell-grid { --columns: 2; }
  .container .cell-grid { --columns: 3; gap: 16px; }
  .three-column-section { padding: 22px; }
  .multicolumn:has(>.column7):has(>.column27) { grid-template-columns: 48px minmax(0,1fr); }
  .quotes, .lowermenu { --columns: 2; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .qri-video-banner { margin: 16px var(--gutter) 44px; padding: 24px; }
  .qri-banner-header p { font-size: 17px; }
  .qri-video-grid, .cell-grid, .container .cell-grid { --columns: 1; }
  .qri-video-content { padding: 22px; }
  .div1 > header { margin-top: 44px; padding-top: 28px; }
  .div1 > h1 + div[style] { font-size: 18px; }
  .celldiv, .three-column-section { padding: 24px; }
  .multicolumn:has(>.column43) { grid-template-columns: 44px minmax(0,1fr); gap: 18px; }
  .multicolumn:has(>.column27):not(:has(>.column7)) { --columns: 2; gap: 24px; }
  .tabs[id] { flex-direction: column; padding: 20px; gap: 24px; }
  .tabs[id] > div { width: 100%; flex-basis: auto; }
  .tab-button { flex-basis: 120px; }
  .multicolumn2-1 { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .quotes { --columns: 1; }
  .quotes blockquote[style] { min-height: 0; }
  .lowermenu { gap: 36px; padding-block: 36px; }
}
@media (max-width: 420px) {
  .qri-video-banner { padding: 20px; }
  .qri-banner-header h2 { font-size: 28px; }
  .multicolumn:has(>.column27):not(:has(>.column7)), .lowermenu { --columns: 1; }
  .column27[style*="center"] img { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .qri-video-card:hover { transform: none; }
}
@media (forced-colors: active) {
  .fas { background: CanvasText; }
  .tab-button { border: 2px solid ButtonText; }
  a:focus-visible, button:focus-visible { outline-color: Highlight; }
}

/* Remaining-page layouts use the same type, color and spacing tokens. */
.div2 { width: 100%; padding-block: 36px 48px; }
.div1 > h1:first-child { margin-top: 44px; }
.div1 > .multicolumn:first-child { margin-top: 44px; }
.footer:not(:has(*)) { padding: 0; background: transparent; line-height: 1; }
.multicolumn:has(>.column70) { grid-template-columns: minmax(0,2.2fr) minmax(260px,1fr); gap: 48px; align-items: start; }
.multicolumn:has(>.column60) { grid-template-columns: minmax(0,2fr) 24px minmax(260px,1fr); gap: 16px; align-items: start; }
.multicolumn:has(>.column50), .multicolumn:has(>.column51b) { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 32px; }
.multicolumn:has(>.column20) { grid-template-columns: minmax(100px,1fr) minmax(0,4fr); }
.multicolumn:has(>.column10) { grid-template-columns: 56px minmax(0,1fr); }
.multicolumn2 { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 24px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.multicolumn2:has(>.column3) { grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr); gap: 20px; }
.multicolumn2:has(>.column1):not(:has(>.column3)) { grid-template-columns: minmax(0,1fr); }
.column1:has(>textarea) { flex-direction: column !important; gap: 12px; }
.multicolumn2 > *, .multicolumn25 > *, .multicolumn2-1 > * { min-width: 0; }
.multicolumn2 h3:first-child, .column90 h2:first-child { margin-top: 0; }
.multicolumn25 { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 28px; margin: 32px 0; }
.column30-vertical { padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
:is(.column70,.column60,.column90) > :is(h2,h3):not(:first-child) { margin-top: 44px; }
.toptext, .toptext2, .bheader { font-weight: 600; }
.toptext { font-size: 19px; }
.subsection { margin-block: 36px; }
.card, .card2 { margin-block: 28px; padding: 28px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.q-a-pair { padding-block: 20px; border-bottom: 1px solid var(--line); }
.q-a-pair:last-child { border-bottom: 0; }
.q-a-pair h3 { margin-top: 0; font-size: 23px; }
.q, .a { margin-block: 16px; }
.q { font-weight: 650; }
.inline-icon-list, .task-list, .voice-commands-list { padding-left: 0; list-style: none; }
.inline-icon-list li, .task-item { padding-block: 12px; border-bottom: 1px solid var(--line); }
.inline-icon-list :is(.fas,.fa-solid), .task-item :is(.fas,.fa-solid) { margin-right: 10px; color: var(--blue); vertical-align: middle; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding-left: 30px; background: url('../images/bullets/check2.png') left .3em / 18px auto no-repeat; }
.screenshot, .shadow { border-radius: 12px; box-shadow: var(--shadow); }
/* Form fields retain original labels, validation, methods and CGI actions. */
.formtable, .formgrey { padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
.formtable .formgrey { border: 0; padding: 0; }
.formtable h2, .formtable h3 { font-size: 25px; margin-top: 0; }
.h33 { display: block; font-size: 20px; font-weight: 650; margin-bottom: 16px; line-height: 1.4; }
input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']), textarea, select {
 width: 100%; max-width: 100%; min-height: 46px; margin-block: 6px 14px; padding: 10px 12px; border: 1px solid rgb(20 40 63 / 35%); border-radius: 8px; background: var(--paper); color: var(--ink); line-height: 1.4;
}
textarea { min-height: 130px; resize: vertical; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--green); width: 22px; height: 22px; vertical-align: middle; margin: 10px 8px 10px 0; flex-shrink: 0; }
.btnBlue, .btnGold, .btnSubmit, input[type='submit'], button.button { min-height: 48px; max-width: 100%; padding: 12px 24px; border: 1px solid var(--green); border-radius: 9px; background: var(--green); color: var(--paper); font-weight: 650; cursor: pointer; white-space: normal; }
.btnBlue:hover, .btnGold:hover, .btnSubmit:hover, input[type='submit']:hover { box-shadow: 0 0 0 3px rgb(20 125 82 / 16%); }
.formtable input[type='submit'] { width: 100%; }
label { cursor: pointer; }
input[type='button'] { max-width: 100%; min-height: 48px; white-space: normal; padding: 12px 18px; border-radius: 9px; border: 1px solid var(--line); color: var(--blue); background: var(--paper); cursor: pointer; }
input[type='button'][onclick*="qr-inventory-contact.htm"] { color: var(--paper); background: var(--green); border-color: var(--green); }
form br + br { display: none; }
a.btnBlue { display: inline-flex; align-items: center; text-decoration: none; }
/* Original questionnaire choices use native controls and generous label targets. */
h7, h8 { display: block; }
h7 { margin: 36px 0 16px; font-size: 25px; font-weight: 700; line-height: 1.35; }
h8 { margin: 20px 0 12px; font-size: 18px; font-weight: 650; }
.container1 { display: flex; align-items: flex-start; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.container1 input { order: -1; margin-top: 4px; }
.container1:hover, .container1:has(:checked) { background: var(--canvas); }
.container1:has(:focus-visible) { outline: 3px solid var(--blue); }
.quizbutton { display: flex; align-items: center; gap: 24px; margin: 24px 0 36px; padding: 28px; background: var(--canvas); border-top: 4px solid var(--yellow); border-radius: var(--radius); }
.quizcolumn { min-width: 0; }
.quizfont1 { font-size: clamp(26px,3vw,40px); line-height: 1.25; font-weight: 700; }
.quizfont2 { font-size: 19px; }
/* Legacy hero and guided tours. */
#header, #header2 { background: var(--ink) url('../images/header1.png') left center / auto 100% no-repeat; color: var(--paper); padding: 44px max(var(--gutter),calc((100% - 1180px)/2)); margin-bottom: 40px; }
.slidetext { max-width: 650px; margin-left: auto; padding: 28px; border-radius: var(--radius); background: rgb(20 40 63 / 94%); font-size: 19px; }
.slidetext :is(h1,h2,h3,.slideheader), .slideheader { color: var(--paper); }
.slideheader { display: block; font-size: clamp(28px,3vw,40px); line-height: 1.2; font-weight: 700; margin-bottom: 24px; }
.uppermenubuttons .multicolumn { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.uppermenubuttons .multicolumn > br { display: none; }
.uppermenubuttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.slidetext a:not(:has(span)) { color: var(--paper); }
.slidecontainer2 { display: none; width: 100%; }
.multicolumn-tour { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-bottom: 32px; }
.column-right { text-align: right; }
.multicolumn-tour a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.multicolumn-tour img { max-width: 24px; }
/* Scroll wide source tables locally rather than widening the document. */
table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; margin-block: 24px; }
th, td { padding: 12px 16px; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--canvas); text-align: left; }
pre { max-width: 100%; overflow-x: auto; }
.video-container:has(>iframe[width='283'][height='500']) { aspect-ratio: 283 / 500; max-width: 283px; }
iframe[width][height]:not(.video-container iframe) { height: auto; aspect-ratio: 16 / 9; }
iframe[width='283'][height='500'] { aspect-ratio: 283 / 500; }
/* Existing simulated chat retains its source screen artwork and script. */
.chat-container { position: relative; width: 828px; max-width: 100%; aspect-ratio: 828 / 521; min-height: 420px; background: var(--paper) url('../ai/background.png') center / 100% 100% no-repeat; border-radius: 12px; box-shadow: var(--shadow); }
.chat { position: absolute; top: 28%; left: 4%; width: 92%; height: 48%; overflow: auto; font-size: 14px; }
.message { position: absolute; bottom: 6%; left: 4%; max-width: 92%; font-size: 14px; background: var(--paper); }
.question, .answer { clear: both; margin-block: 6px; padding: 10px 14px; font-size: 14px; }
.question { float: right; background: var(--canvas); border-radius: 12px; }
.answer { float: left; }
/* Shared Traceability and QR Mobile Data keep their own original logos. */
#navmenu { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 1244px; margin: auto; padding: 16px var(--gutter); font-size: 0; }
#navmenu > a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: 8px; }
#navmenu a:has(.header-image) { margin-right: auto; padding: 0; }
.header-image { width: 220px; }
.nav1 > div[align] { padding: 44px var(--gutter); }
.nav1 h1 { margin-inline: auto; }
#navmenu a[href="contact.html"] { background: var(--green); color: var(--paper); }
.grey { background: var(--canvas); padding: 44px var(--gutter); }
.grey > .container { max-width: 1180px; margin-inline: auto; }
.divTableRow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; max-width: 1180px; margin: 28px auto; padding-inline: var(--gutter); }
.divTableCell { flex: 1 1 320px; min-width: 0; }
.divTableCell20 { flex: 1 1 200px; min-width: 0; }
.divTableCell75 { flex: 3 1 500px; min-width: 0; }
.headerText { font-size: 24px; font-weight: 700; }
.smallText { font-size: 15px; }
.topmenu1, .topmenu, .topMenu2 { display: inline-block; min-height: 44px; padding-block: 8px; }
.nav > a:first-child:not(:has(img)) { flex: 0 1 auto; width: auto; padding: 10px 12px; }
.lowermenu:has(>.column30-l) { grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr)); }
.lowermenu > .multicolumn { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.lowermenu .column30-l { font-size: 16px; font-weight: 400; }
.fas, .fab, .fa-solid, .fa { display: inline-block; width: 24px; height: 24px; background-color: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; vertical-align: middle; }
.fa-3x { width: 48px; height: 48px; }
@media (max-width:1100px) {
 .multicolumn:has(>.column70) { grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 28px; }
 .menu:has(#navmenu) { background-image: url("../shared-traceability/img/logo.png"); background-size: 170px auto; background-position: var(--gutter) center; }
 #navmenu { display: none; padding-top: 16px; }
 #navmenu > a { display: flex; }
 .menu > .icon { margin-left: auto; margin-right: var(--gutter); position: relative; top: 16px; }
 .divTableCell .menu { background-image: none; }
 .tabs:not([id]):has(>div) { grid-template-columns: minmax(0,1fr); }
 .lowermenu:has(>.column30-l) { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width:1101px) { #navmenu { display: flex !important; } }
@media (max-width:760px) {
 .div2 { padding-top: 24px; }
 .multicolumn:has(>.column70), .multicolumn:has(>.column60), .multicolumn:has(>.column50), .multicolumn:has(>.column51b), .multicolumn:has(>.column20), .multicolumn2:has(>.column3) { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .multicolumn2 { gap: 16px; grid-template-columns: 36px minmax(0,1fr); }
 .multicolumn2 > .column2 > img { max-width: 36px; }
 .multicolumn2:has(>.column3) > .column2 { min-height: 0; line-height: 0; }
 .formtable, .formgrey, .card, .card2 { padding: 20px; }
 .quizbutton { gap: 16px; padding: 20px; flex-wrap: wrap; }
 .quizcolumn img { max-width: 96px; }
 .multicolumn-tour { grid-template-columns: minmax(0,1fr); }
 .column-right { text-align: left; }
 #header, #header2 { padding: 24px var(--gutter); }
 .slidetext { padding: 24px; font-size: 17px; }
 .lowermenu > .multicolumn { grid-template-columns: minmax(0,1fr); }
 th, td { padding: 10px 12px; }
 .features-list > li { gap: 12px; }
}
@media (max-width:420px) { .lowermenu:has(>.column30-l) { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } }

/* Font Awesome Free 6.5.1; attribution in SVGs and icons/LICENSE-Font-Awesome.txt. */
.fa-arrows-rotate { --icon: url("icons/arrows-rotate.svg"); }
.fa-balance-scale { --icon: url("icons/balance-scale.svg"); }
.fa-barcode { --icon: url("icons/barcode.svg"); }
.fa-bluetooth-b { --icon: url("icons/bluetooth-b.svg"); }
.fa-bolt { --icon: url("icons/bolt.svg"); }
.fa-box-open { --icon: url("icons/box-open.svg"); }
.fa-boxes { --icon: url("icons/boxes.svg"); }
.fa-boxes-stacked { --icon: url("icons/boxes-stacked.svg"); }
.fa-brain { --icon: url("icons/brain.svg"); }
.fa-briefcase { --icon: url("icons/briefcase.svg"); }
.fa-broadcast-tower { --icon: url("icons/broadcast-tower.svg"); }
.fa-building { --icon: url("icons/building.svg"); }
.fa-bullseye { --icon: url("icons/bullseye.svg"); }
.fa-calculator { --icon: url("icons/calculator.svg"); }
.fa-camera { --icon: url("icons/camera.svg"); }
.fa-chart-bar { --icon: url("icons/chart-bar.svg"); }
.fa-chart-column { --icon: url("icons/chart-column.svg"); }
.fa-chart-pie { --icon: url("icons/chart-pie.svg"); }
.fa-check-circle { --icon: url("icons/check-circle.svg"); }
.fa-check-double { --icon: url("icons/check-double.svg"); }
.fa-circle-check { --icon: url("icons/circle-check.svg"); }
.fa-clipboard-check { --icon: url("icons/clipboard-check.svg"); }
.fa-clock { --icon: url("icons/clock.svg"); }
.fa-cloud-arrow-down { --icon: url("icons/cloud-arrow-down.svg"); }
.fa-cloud-arrow-up { --icon: url("icons/cloud-arrow-up.svg"); }
.fa-code-compare { --icon: url("icons/code-compare.svg"); }
.fa-columns { --icon: url("icons/columns.svg"); }
.fa-comments { --icon: url("icons/comments.svg"); }
.fa-cubes { --icon: url("icons/cubes.svg"); }
.fa-database { --icon: url("icons/database.svg"); }
.fa-diagram-project { --icon: url("icons/diagram-project.svg"); }
.fa-display { --icon: url("icons/display.svg"); }
.fa-dollar-sign { --icon: url("icons/dollar-sign.svg"); }
.fa-ellipsis-h { --icon: url("icons/ellipsis-h.svg"); }
.fa-envelope-open-text { --icon: url("icons/envelope-open-text.svg"); }
.fa-exchange-alt { --icon: url("icons/exchange-alt.svg"); }
.fa-exclamation-triangle { --icon: url("icons/exclamation-triangle.svg"); }
.fa-expand-arrows-alt { --icon: url("icons/expand-arrows-alt.svg"); }
.fa-eye { --icon: url("icons/eye.svg"); }
.fa-fan { --icon: url("icons/fan.svg"); }
.fa-faucet-drip { --icon: url("icons/faucet-drip.svg"); }
.fa-file-alt { --icon: url("icons/file-alt.svg"); }
.fa-file-circle-check { --icon: url("icons/file-circle-check.svg"); }
.fa-file-invoice { --icon: url("icons/file-invoice.svg"); }
.fa-file-invoice-dollar { --icon: url("icons/file-invoice-dollar.svg"); }
.fa-file-pdf { --icon: url("icons/file-pdf.svg"); }
.fa-file-signature { --icon: url("icons/file-signature.svg"); }
.fa-flask-vial { --icon: url("icons/flask-vial.svg"); }
.fa-gas-pump { --icon: url("icons/gas-pump.svg"); }
.fa-gauge-high { --icon: url("icons/gauge-high.svg"); }
.fa-gears { --icon: url("icons/gears.svg"); }
.fa-globe { --icon: url("icons/globe.svg"); }
.fa-hand-paper { --icon: url("icons/hand-paper.svg"); }
.fa-hands-helping { --icon: url("icons/hands-helping.svg"); }
.fa-handshake-slash { --icon: url("icons/handshake-slash.svg"); }
.fa-hard-hat { --icon: url("icons/hard-hat.svg"); }
.fa-helmet-safety { --icon: url("icons/helmet-safety.svg"); }
.fa-history { --icon: url("icons/history.svg"); }
.fa-id-card { --icon: url("icons/id-card.svg"); }
.fa-image { --icon: url("icons/image.svg"); }
.fa-industry { --icon: url("icons/industry.svg"); }
.fa-keyboard { --icon: url("icons/keyboard.svg"); }
.fa-language { --icon: url("icons/language.svg"); }
.fa-layer-group { --icon: url("icons/layer-group.svg"); }
.fa-lightbulb { --icon: url("icons/lightbulb.svg"); }
.fa-link { --icon: url("icons/link.svg"); }
.fa-list-check { --icon: url("icons/list-check.svg"); }
.fa-location-arrow { --icon: url("icons/location-arrow.svg"); }
.fa-location-dot { --icon: url("icons/location-dot.svg"); }
.fa-lock { --icon: url("icons/lock.svg"); }
.fa-magic { --icon: url("icons/magic.svg"); }
.fa-magnifying-glass { --icon: url("icons/magnifying-glass.svg"); }
.fa-map-marked-alt { --icon: url("icons/map-marked-alt.svg"); }
.fa-map-pin { --icon: url("icons/map-pin.svg"); }
.fa-microphone-alt { --icon: url("icons/microphone-alt.svg"); }
.fa-microphone-lines { --icon: url("icons/microphone-lines.svg"); }
.fa-mobile-screen { --icon: url("icons/mobile-screen.svg"); }
.fa-mobile-screen-button { --icon: url("icons/mobile-screen-button.svg"); }
.fa-mouse-pointer { --icon: url("icons/mouse-pointer.svg"); }
.fa-network-wired { --icon: url("icons/network-wired.svg"); }
.fa-notes-medical { --icon: url("icons/notes-medical.svg"); }
.fa-oil-well { --icon: url("icons/oil-well.svg"); }
.fa-paper-plane { --icon: url("icons/paper-plane.svg"); }
.fa-people-arrows { --icon: url("icons/people-arrows.svg"); }
.fa-plug { --icon: url("icons/plug.svg"); }
.fa-project-diagram { --icon: url("icons/project-diagram.svg"); }
.fa-question-circle { --icon: url("icons/question-circle.svg"); }
.fa-random { --icon: url("icons/random.svg"); }
.fa-recycle { --icon: url("icons/recycle.svg"); }
.fa-reply { --icon: url("icons/reply.svg"); }
.fa-rocket { --icon: url("icons/rocket.svg"); }
.fa-satellite-dish { --icon: url("icons/satellite-dish.svg"); }
.fa-screwdriver-wrench { --icon: url("icons/screwdriver-wrench.svg"); }
.fa-scroll { --icon: url("icons/scroll.svg"); }
.fa-search { --icon: url("icons/search.svg"); }
.fa-search-location { --icon: url("icons/search-location.svg"); }
.fa-search-plus { --icon: url("icons/search-plus.svg"); }
.fa-shield-alt { --icon: url("icons/shield-alt.svg"); }
.fa-shield-halved { --icon: url("icons/shield-halved.svg"); }
.fa-signal { --icon: url("icons/signal.svg"); }
.fa-sliders { --icon: url("icons/sliders.svg"); }
.fa-sliders-h { --icon: url("icons/sliders-h.svg"); }
.fa-smile { --icon: url("icons/smile.svg"); }
.fa-smile-beam { --icon: url("icons/smile-beam.svg"); }
.fa-solar-panel { --icon: url("icons/solar-panel.svg"); }
.fa-stopwatch { --icon: url("icons/stopwatch.svg"); }
.fa-stream { --icon: url("icons/stream.svg"); }
.fa-sync { --icon: url("icons/sync.svg"); }
.fa-sync-alt { --icon: url("icons/sync-alt.svg"); }
.fa-tablet-alt { --icon: url("icons/tablet-alt.svg"); }
.fa-tag { --icon: url("icons/tag.svg"); }
.fa-tags { --icon: url("icons/tags.svg"); }
.fa-tasks { --icon: url("icons/tasks.svg"); }
.fa-temperature-half { --icon: url("icons/temperature-half.svg"); }
.fa-temperature-low { --icon: url("icons/temperature-low.svg"); }
.fa-temperature-three-quarters { --icon: url("icons/temperature-three-quarters.svg"); }
.fa-thumbs-up { --icon: url("icons/thumbs-up.svg"); }
.fa-toolbox { --icon: url("icons/toolbox.svg"); }
.fa-tools { --icon: url("icons/tools.svg"); }
.fa-tower-broadcast { --icon: url("icons/tower-broadcast.svg"); }
.fa-triangle-exclamation { --icon: url("icons/triangle-exclamation.svg"); }
.fa-truck { --icon: url("icons/truck.svg"); }
.fa-truck-loading { --icon: url("icons/truck-loading.svg"); }
.fa-truck-moving { --icon: url("icons/truck-moving.svg"); }
.fa-truck-ramp-box { --icon: url("icons/truck-ramp-box.svg"); }
.fa-tv { --icon: url("icons/tv.svg"); }
.fa-universal-access { --icon: url("icons/universal-access.svg"); }
.fa-user { --icon: url("icons/user.svg"); }
.fa-user-check { --icon: url("icons/user-check.svg"); }
.fa-user-clock { --icon: url("icons/user-clock.svg"); }
.fa-user-cog { --icon: url("icons/user-cog.svg"); }
.fa-user-friends { --icon: url("icons/user-friends.svg"); }
.fa-user-gear { --icon: url("icons/user-gear.svg"); }
.fa-user-graduate { --icon: url("icons/user-graduate.svg"); }
.fa-user-shield { --icon: url("icons/user-shield.svg"); }
.fa-user-slash { --icon: url("icons/user-slash.svg"); }
.fa-users-cog { --icon: url("icons/users-cog.svg"); }
.fa-vial { --icon: url("icons/vial.svg"); }
.fa-vial-circle-check { --icon: url("icons/vial-circle-check.svg"); }
.fa-volume-up { --icon: url("icons/volume-up.svg"); }
.fa-warehouse { --icon: url("icons/warehouse.svg"); }
.fa-wave-square { --icon: url("icons/wave-square.svg"); }
.fa-wifi { --icon: url("icons/wifi.svg"); }
.fa-wrench { --icon: url("icons/wrench.svg"); }
/* The webinar source calls a missing show() function. Keep its mobile links
   expanded using CSS, so navigation remains available without editing JS. */
@media (max-width:1100px) {
 body:has(.webinar-chapters) .menu { background-image: none; }
 body:has(.webinar-chapters) .menu > div:first-child { display: none; }
 body:has(.webinar-chapters) .nav { display: flex !important; flex-direction: column; align-items: stretch; padding-top: 16px; }
}
/* The older overview uses layout tables. Reflow its existing cells as columns. */
body:has(#formtable) > center { max-width: 1244px; margin: auto; padding-inline: var(--gutter); }
body:has(#formtable) > center > table { width: 100%; text-align: left; }
body:has(#formtable) nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; white-space: normal; }
body:has(#formtable) nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border-radius: 8px; }
body:has(#formtable) nav .btnGold { color: var(--blue); background: var(--paper); border-color: var(--line); }
body:has(#formtable) nav font { color: inherit; }
body:has(#formtable) nav a[href*='qr-inventory-contact.htm'] { color: var(--paper); background: var(--green); }
table:has(#formtable), table:has(#formtable) > tbody { display: block; }
table:has(#formtable) > tbody > tr { display: grid; grid-template-columns: minmax(0,2.2fr) minmax(260px,1fr); gap: 32px; }
table:has(#formtable) > tbody > tr > td { display: block; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
#formtable { margin: 0; padding: 24px; background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius); }
#formtable, #formtable > tbody, #formtable > tbody > tr, #formtable > tbody > tr > td { display: block; width: 100%; }
#formtable > tbody > tr > td { padding: 0; border: 0; }
#formtable .formgrey { display: block; padding: 0; border: 0; margin-bottom: 20px; }
@media (max-width:760px) { table:has(#formtable) > tbody > tr { grid-template-columns: minmax(0,1fr); } }
body:has(#formtable) > center > table:first-child,
body:has(#formtable) > center > table:first-child > tbody,
body:has(#formtable) > center > table:first-child > tbody > tr,
body:has(#formtable) > center > table:first-child > tbody > tr > td { display: block; width: 100%; height: auto; overflow: visible; }
body:has(#formtable) td[background] { aspect-ratio: 960 / 236; min-height: 70px; background-size: contain; background-position: center; }