/* Brand tokens: green #106D58 and purple #6A487C are the flat colors of the
   clean logo artwork (Mission's 1388 x 401 transparent PNG, 2026-11-11), now
   public/images/logo.png. They replace #1A6E56 and #715182, which were sampled
   from an earlier low-resolution, noisy copy. The grey #939796 is from that
   earlier sampling; the clean logo has no grey.
   Tints mix the colors with white; text shades mix with black for AA.
   The grey token is decorative only, never small text on white. */
:root {
  --brand-green: #106D58;
  --brand-purple: #6A487C;
  --brand-grey: #939796;
  --green-dark: color-mix(in srgb, var(--brand-green) 64%, black);
  --ink: color-mix(in srgb, var(--brand-green) 37%, black);
  --muted: color-mix(in srgb, var(--brand-grey) 57%, black);
  --green-tint: color-mix(in srgb, var(--brand-green) 6%, white);
  --green-soft: color-mix(in srgb, var(--brand-green) 12%, white);
  --purple-tint: color-mix(in srgb, var(--brand-purple) 7%, white);
  --line: color-mix(in srgb, var(--brand-green) 18%, white);
  --control-border: color-mix(in srgb, var(--brand-grey) 78%, black);
  --paper: #fff;
  --body-font: 'Figtree', Arial, sans-serif;
  --display-font: 'Michroma', Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --utility-h: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --space: clamp(3.5rem, 6vw, 6.25rem);
  color-scheme: light;
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 17px; line-height: 1.65; }
img { display: block; max-width: 100%; height: auto; }
svg { flex: 0 0 auto; vertical-align: middle; }
a { color: var(--brand-green); text-underline-offset: .23em; }
a:hover { color: var(--green-dark); }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
button { color: inherit; }
input, textarea, select { min-width: 0; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 5px; border-radius: 3px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: var(--display-font); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 3.1rem); line-height: 1.38; letter-spacing: -.035em; max-width: 22ch; margin-bottom: 1.25rem; overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 2.7vw, 2.4rem); line-height: 1.2; font-weight: 550; letter-spacing: -.035em; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; line-height: 1.3; font-weight: 600; margin-bottom: .65rem; }
p { margin-bottom: 1.2rem; }
ul { padding-left: 1.3rem; }
li + li { margin-top: .5rem; }
section[id] { scroll-margin-top: 1.5rem; }
.shell { width: min(1240px, calc(100% - clamp(2rem, 7vw, 7rem))); margin-inline: auto; }
.section { padding-block: var(--space); }
.tinted { background: var(--green-tint); }
.purple-tinted { background: var(--purple-tint); }
.eyebrow { font-size: .72rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 750; color: var(--brand-green); margin-bottom: 1.25rem; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--muted); max-width: 59ch; }
.small, small { font-size: .83rem; }
.muted { color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: .65rem; font-weight: 650; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .8rem; padding: .9rem 1.35rem; min-height: 48px; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; font-size: .94rem; line-height: 1.4; font-weight: 650; background: var(--brand-green); color: white; }
.button:hover { color: white; background: var(--green-dark); }
.button-outline { color: var(--brand-green); border-color: var(--brand-green); background: transparent; }
.button-light { background: white; color: var(--green-dark); }
.button-light:hover { background: var(--green-soft); color: var(--green-dark); }
.button-purple { background: var(--brand-purple); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 100; background: white; padding: 1rem; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.utility-bar { background: var(--green-dark); }
.utility-inner { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .4rem 1.5rem; padding-block: .4rem; }
.utility-inner a { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; color: white; text-decoration: none; font-size: .77rem; }
.utility-inner a:hover { text-decoration: underline; }
.utility-inner a:focus-visible, .quote-band a:focus-visible { outline-color: white; }
.header-main { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem 2rem; padding-block: 1rem; }
.brand { display: block; width: min(290px, 100%); }
.brand img { width: 204px; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.8rem, 2.5vw, 2.3rem); font-size: .9rem; }
.main-nav > a, .main-nav summary { color: var(--ink); text-decoration: none; padding-block: .65rem; min-height: 44px; }
.main-nav [aria-current='page'], .main-nav .selected { color: var(--brand-green); text-decoration: underline; text-underline-offset: .6rem; }
.main-nav > a:hover { text-decoration: underline; }
.product-menu { position: relative; }
.product-menu summary { display: flex; align-items: center; gap: .35rem; list-style: none; }
.product-menu summary::-webkit-details-marker { display: none; }
.product-dropdown { position: absolute; top: 100%; left: 0; z-index: 20; width: 275px; padding: .65rem; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 16px 40px #082a1f18; }
.product-dropdown a { display: block; padding: .8rem; text-decoration: none; border-radius: 4px; }
.product-dropdown a:hover { background: var(--green-tint); }
.main-nav .product-dropdown a[aria-current='page'] { text-decoration: none; background: var(--green-tint); box-shadow: inset 3px 0 0 var(--brand-green); }
.product-dropdown span { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
/* In the top bar, so it never covers page content. */
.demo-ribbon { margin-right: auto; display: inline-flex; gap: .5rem; align-items: center; padding: .2rem .7rem; border-radius: 4px; background: var(--brand-purple); color: white; font-size: .72rem; font-weight: 600; }
.demo-ribbon span { width: 6px; height: 6px; border-radius: 50%; background: white; }
.hero { background: linear-gradient(115deg, var(--green-tint), white 75%); border-top: 1px solid var(--line); padding-block: clamp(2.4rem, 5vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-copy { padding-block: 1rem; }
.hero h1 { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
.hero h1 span { display: block; color: var(--brand-green); }
.hero-copy > .lead { max-width: 39ch; }
.hero-note { margin: 1.8rem 0 0; font-size: .8rem; color: var(--muted); display: flex; gap: .55rem; align-items: center; }
.equipment-stage { position: relative; background: white; border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.2rem, 3vw, 2.6rem); overflow: hidden; }
.equipment-stage::before { content: ''; position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; left: 17%; top: 8%; background: radial-gradient(circle, var(--green-tint), transparent 72%); }
.stage-label { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-green); }
.stage-label span:last-child { color: var(--muted); }
.equipment-stage img { position: relative; width: 100%; mix-blend-mode: multiply; margin: 2rem auto 1.7rem; }
.stage-bottom { position: relative; border-top: 1px solid var(--line); padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: .82rem; }
.stage-bottom strong { display: block; font-weight: 650; }
.stage-bottom span { color: var(--muted); font-size: .73rem; }
.chapter-bar { border-block: 1px solid var(--line); }
.chapter-grid { display: flex; flex-wrap: wrap; }
.chapter-grid a { display: flex; flex: 1 1 15rem; align-items: center; gap: 1rem; padding: 1.1rem .7rem; text-decoration: none; font-size: .84rem; }
.chapter-number { color: var(--brand-purple); font-family: var(--display-font); font-size: .7rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 3rem; margin-bottom: 2rem; }
.section-heading h2 { margin-bottom: .25rem; }
.section-heading > p { max-width: 44ch; color: var(--muted); font-size: .95rem; margin-bottom: .25rem; }
.cards { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.cards > * { flex: 1 1 18rem; min-width: 0; }
.product-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: white; }
.card-image { background: var(--green-tint); height: 225px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.card-image img { object-fit: contain; width: 88%; height: 88%; mix-blend-mode: multiply; }
.card-image.reagents { background: var(--purple-tint); }
.card-image.reagents img { width: 92%; height: auto; align-self: flex-end; }
.card-body { padding: 1.65rem; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.card-body .eyebrow { font-size: .65rem; margin-bottom: .7rem; }
.card-body p:not(.eyebrow) { color: var(--muted); font-size: .94rem; }
.card-body .text-link { margin-top: auto; font-size: .88rem; }
.toxicology-art { color: var(--brand-purple); background: var(--purple-tint); }
.toxicology-art::before, .toxicology-art::after { content: ''; position: absolute; width: 175px; height: 175px; border: 1px solid color-mix(in srgb, var(--brand-purple) 23%, white); border-radius: 50%; }
.toxicology-art::after { width: 125px; height: 125px; }
.toxicology-art svg { position: relative; z-index: 1; width: 62px; height: 62px; stroke-width: 1; }
.steps { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.steps > * { flex: 1 1 17rem; min-width: 0; }
.step { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.step-number { font-family: var(--display-font); color: var(--brand-purple); font-size: .85rem; display: block; margin-bottom: 1.6rem; }
.step p { color: var(--muted); font-size: .97rem; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.company-label { display: inline-flex; gap: .65rem; align-items: center; color: var(--brand-purple); font-family: var(--display-font); font-size: .8rem; }
.company-copy { font-size: 1.12rem; color: var(--muted); }
.quote-band { padding-block: 3.2rem; background: var(--green-dark); color: white; }
.quote-inner { display: flex; justify-content: space-between; gap: 2rem; align-items: center; flex-wrap: wrap; }
.quote-inner > div { flex: 1 1 28rem; }
.quote-inner p { margin-bottom: 0; max-width: 59ch; }
.quote-inner .eyebrow { color: white; margin-bottom: .75rem; }
.quote-inner h2 { font-size: clamp(1.65rem, 2.4vw, 2.3rem); }
.page-intro { padding-block: 2rem 3rem; border-top: 1px solid var(--line); background: var(--green-tint); }
.page-intro h1 { max-width: 24ch; }
.breadcrumb { display: flex; gap: .7rem; flex-wrap: wrap; color: var(--muted); font-size: .78rem; margin-bottom: 2.5rem; }
.breadcrumb a { color: var(--muted); }
.page-intro .lead { margin-bottom: 0; }
.page-intro .eyebrow { margin-bottom: .9rem; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1.5rem .25rem; }
.anchor-nav a { min-height: 40px; padding: .4rem 1.05rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; font-weight: 650; display: inline-flex; align-items: center; text-decoration: none; }
.anchor-nav a:hover { background: var(--green-tint); border-color: var(--brand-green); }
.info-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2.4rem); background: var(--green-tint); }
.info-panel h2 { font-size: 1.65rem; }
.info-panel p:last-child { margin-bottom: 0; }
.catalog-toolbar { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.75rem); background: white; margin-bottom: 2.5rem; }
.search-label { display: block; font-weight: 650; margin-bottom: .6rem; }
.search-field { display: flex; align-items: center; gap: .8rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding-left: 1rem; background: white; }
.search-field input { flex: 1; width: 100%; border: 0; background: transparent; padding: .9rem .7rem .9rem 0; color: var(--ink); }
.search-field:focus-within { outline: 3px solid var(--brand-purple); outline-offset: 3px; }
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--muted); }
.filter-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.filter-button { background: white; border: 1px solid var(--control-border); border-radius: 999px; padding: .5rem 1rem; font-size: .85rem; min-height: 44px; }
.filter-button[aria-pressed='true'] { background: var(--brand-green); color: white; border-color: var(--brand-green); }
.filter-button:hover { box-shadow: inset 0 0 0 1px var(--brand-green); }
.catalog-status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .87rem; color: var(--muted); margin-top: .85rem; }
.catalog-status p { margin: 0; }
.clear-filter { background: transparent; border: 0; color: var(--brand-green); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; padding: .35rem .6rem; }
.product-group { margin-bottom: 3rem; }
.product-group h2 { font-size: 1.7rem; }
.product-group > p { color: var(--muted); font-size: .94rem; }
table { border-collapse: collapse; width: 100%; table-layout: fixed; text-align: left; }
thead { background: var(--green-tint); }
th, td { padding: clamp(.7rem, 1.5vw, 1.1rem); border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 650; font-size: .8rem; }
td { font-size: clamp(.79rem, 1.2vw, .94rem); }
th:nth-child(1) { width: 26%; }
th:nth-child(2) { width: 40%; }
th:nth-child(3) { width: 34%; }
.item-number { display: inline-flex; align-items: center; gap: .45rem; margin: -.3rem 0 -.3rem -.45rem; padding: .3rem .45rem; border: 0; border-radius: 6px; background: transparent; font-family: var(--body-font); font-size: clamp(.72rem, 1.15vw, .9rem); font-weight: 650; white-space: nowrap; color: var(--brand-green); font-variant-numeric: tabular-nums; }
.item-number svg { opacity: 0; color: var(--muted); }
.item-number:hover, .item-number:focus-visible { background: var(--green-tint); }
.item-number:hover svg, .item-number:focus-visible svg { opacity: 1; }
.item-number[data-copied] svg { display: none; }
.item-number[data-copied]::after { content: 'Copied'; font-size: .7rem; font-weight: 650; color: white; background: var(--brand-green); padding: .1rem .5rem; border-radius: 999px; }
.row-note { display: block; margin-top: .45rem; font-size: .76rem; color: var(--muted); }
.empty-state { border: 1px solid var(--line); border-radius: var(--radius); background: var(--purple-tint); padding: 2rem; text-align: center; }
.empty-state h2 { font-size: 1.5rem; }
.spec-list { margin: 0; }
.spec-row { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.8fr); gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.spec-row dt { font-weight: 600; }
.spec-row dd { margin: 0; color: var(--muted); }
.note { padding: 1rem 1.2rem; border-left: 3px solid var(--brand-purple); background: var(--purple-tint); font-size: .9rem; color: var(--muted); }
.document-list { list-style: none; padding: 0; margin: 1.4rem 0; }
.document-list li { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; gap: .8rem; align-items: flex-start; }
.document-list strong { display: block; font-size: .95rem; }
.document-list span { display: block; font-size: .81rem; color: var(--muted); }
.document-list svg { margin-top: .2rem; color: var(--brand-purple); }
.support-card { padding: 1.7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.support-card > svg { color: var(--brand-purple); margin-bottom: 1.3rem; }
.support-card h2 { font-size: 1.55rem; }
.support-card p { color: var(--muted); font-size: .94rem; }
.support-card .document-list { margin-bottom: 0; }
.terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1.3rem; }
.term { background: white; padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); }
.term h3 { font-size: 1.1rem; display: flex; gap: .75rem; align-items: center; }
.term h3 svg { color: var(--brand-green); }
.term p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }
.form-panel { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); }
.form-panel h2 { font-size: 1.7rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-size: .88rem; font-weight: 650; margin-bottom: .4rem; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--control-border); background: white; color: var(--ink); border-radius: var(--radius-sm); padding: .8rem; min-height: 48px; }
.field textarea { resize: vertical; min-height: 125px; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field small { display: block; margin-top: .35rem; color: var(--muted); }
.form-status { padding: 1.2rem; border: 1px solid var(--brand-green); background: var(--green-tint); border-radius: 5px; margin-top: 1rem; }
.form-status:empty { display: none; }
.contact-meta { margin: 2rem 0; }
.contact-meta dt { font-weight: 650; margin-top: 1rem; }
.contact-meta dd { color: var(--muted); margin-left: 0; }
.site-footer { background: var(--green-tint); padding-block: 3.5rem 5rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
.footer-grid > * { flex: 1 1 14rem; min-width: 0; }
.footer-grid h2 { font-size: .85rem; letter-spacing: 0; font-weight: 750; margin-bottom: 1.1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-size: .84rem; color: var(--muted); }
.footer-grid a { text-decoration: none; color: var(--muted); }
.footer-grid a:hover { text-decoration: underline; color: var(--brand-green); }
.footer-wordmark { font-family: var(--display-font); font-size: 1.3rem; color: var(--brand-green); letter-spacing: .2em; margin-bottom: 1.2rem; }
.footer-wordmark span { display: block; font-family: var(--body-font); font-size: .65rem; letter-spacing: .45em; font-weight: 600; margin-top: .1rem; color: var(--muted); }
.footer-brand > p:not(.footer-wordmark) { color: var(--muted); font-size: .85rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--muted); }
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--brand-green); }
.legal { max-width: 72ch; }
.legal h2 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-top: 2.2rem; margin-bottom: .7rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1.2rem; }
.legal li + li { margin-top: .5rem; }
.company-home { padding-block: clamp(3rem, 7vw, 6rem); }

/* Polish pass (Claude, 2026-10-21): motion, a sticky header on desktop, and phone layouts. */
::selection { background: color-mix(in srgb, var(--brand-green) 22%, white); }
.label-short { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field input:hover, .field select:hover, .field textarea:hover, .search-field:hover { border-color: var(--brand-green); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  a, .button, .filter-button, .item-number, .product-card, .support-card, .term, .main-nav summary, .product-dropdown a, .anchor-nav a, .field input, .field select, .field textarea, .search-field { transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
  .button:active { transform: translateY(1px); }
  .button svg, .text-link svg { transition: transform .2s var(--ease); }
  .button:hover svg, .text-link:hover svg { transform: translateX(3px); }
  .product-menu[open] .product-dropdown { animation: drop-in .18s var(--ease); }
  @keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } }
}

/* Desktop: the utility bar scrolls away and the main bar stays pinned. */
@media (min-width: 900px) {
  .site-header { position: sticky; top: calc(-1 * var(--utility-h)); z-index: 50; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.4) blur(12px); transition: box-shadow .25s var(--ease); }
  .utility-inner { height: var(--utility-h); padding-block: 0; flex-wrap: nowrap; }
  .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 32px rgb(8 42 31 / .07); }
  .header-main { transition: padding .25s var(--ease); }
  .brand img { transition: width .25s var(--ease); }
  .site-header.is-scrolled .header-main { padding-block: .55rem; }
  .site-header.is-scrolled .brand img { width: 160px; }
  section[id], #main-content { scroll-margin-top: 6.5rem; }
}
@media (hover: hover) and (min-width: 900px) {
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(8 42 31 / .09); border-color: color-mix(in srgb, var(--brand-green) 32%, white); }
  .support-card:hover, .term:hover { border-color: color-mix(in srgb, var(--brand-green) 32%, white); box-shadow: 0 10px 28px rgb(8 42 31 / .06); }
  tbody tr:hover { background: color-mix(in srgb, var(--brand-green) 3.5%, white); }
  tbody tr:hover .item-number svg { opacity: 1; }
}

/* Phones: a compact header, catalog rows as cards, swipeable filters, larger tap targets. */
@media (max-width: 640px) {
  .label-long, .eyebrow-prefix { display: none; }
  .label-short { display: inline; }
  .utility-inner { flex-wrap: nowrap; gap: 1.1rem; padding-block: .35rem; }
  .demo-ribbon { font-size: .66rem; padding: .15rem .55rem; }
  .header-main { padding-block: .85rem .15rem; row-gap: .1rem; }
  .brand, .brand img { width: 138px; }
  .main-nav { width: 100%; justify-content: space-between; gap: .25rem; font-size: .95rem; }
  .hero { padding-block: 2rem 2.5rem; }
  .actions .button { flex: 1 1 100%; }
  .quote-inner .button { width: 100%; }
  .equipment-stage img { margin-block: 1.2rem 1rem; }
  .chapter-grid a { flex-basis: 100%; padding: .95rem 0; border-bottom: 1px solid var(--line); }
  .chapter-grid a:last-child { border-bottom: 0; }
  .catalog-toolbar { padding: 1rem; }
  .filter-buttons { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; margin-inline: -1rem; padding: .25rem 1rem .4rem; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
  .filter-buttons::-webkit-scrollbar { display: none; }
  .filter-button { flex: 0 0 auto; scroll-snap-align: start; }
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, tbody { display: block; }
  tbody tr { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  tbody td { display: block; padding: 0; border: 0; }
  .item-number { font-size: .85rem; }
  .item-number svg { opacity: .75; }
  .item-name { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
  .item-pack { font-size: .9rem; color: var(--muted); }
  .anchor-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .anchor-nav a { flex: 0 0 auto; }
  .site-footer { padding-block: 2.5rem 3rem; }
  .footer-grid { gap: 1.5rem; }
  .footer-grid li + li { margin-top: 0; }
  .footer-grid li a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* The CA200 to scale (2026-10-23): the drawing gets the wider column on desktop. */
.scale-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.scale-layout .spec-list { margin-block: 1.2rem 1.4rem; }
@media (max-width: 900px) { .scale-layout { grid-template-columns: 1fr; } }