/* Option 1 · The plant, mapped. Kinetech corporate (PSN conductor system) tokens. */
:root {
  --navy: #102d7b; --teal-deep: #027aa2; --teal-mid: #0391bf; --cyan: #00aee6; --cyan-light: #b3e8f7;
  --ink: #21242c; --ink-soft: #2c3e47; --ink-mute: #4f5f69; --slate: #eef8fb; --mist: #f2fafc; --rule: #dde3e9; --white: #fff;
  --display: 'Jost', 'Futura PT', 'Montserrat', sans-serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 10px; --r-lg: 14px; --r-xl: 22px;
  --shadow: 0 1px 2px rgba(16,45,123,.04), 0 8px 30px -12px rgba(2,122,162,.18);
  --max: 1200px; --gutter: 40px; --section: 112px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--teal-deep); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
::selection { background: var(--cyan-light); color: var(--navy); }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--navy); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section.tint { background: var(--mist); }
.lede { font-size: 1.125rem; color: var(--ink-soft); max-width: 62ch; }
.muted { color: var(--ink-mute); }
.measure { max-width: 66ch; }
.stack > * + * { margin-top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--r); z-index: 200; }
.skip:focus { top: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r); padding: 13px 24px; font: 600 15px/1.2 var(--sans);
  border: 1.5px solid var(--teal-deep); cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .16s var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--teal-deep); color: #fff; }
.btn-primary:hover { background: #026b8f; border-color: #026b8f; }
.btn-ghost { background: transparent; color: var(--teal-deep); }
.btn-ghost:hover { background: var(--slate); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { font-weight: 600; }

/* Nav (PSN pattern) */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.site-nav .bar { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand { display: flex; align-items: center; gap: 16px; flex: none; color: var(--navy); }
.brand img { height: 30px; width: auto; }
.brand .divider { width: 1px; height: 28px; background: var(--rule); }
.brand .section-name { font: 600 16px/1 var(--display); color: var(--navy); letter-spacing: -0.01em; }
.brand a:hover { text-decoration: none; }
.nav-links { display: flex; gap: 26px; margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; }
.nav-links a { color: var(--ink-soft); font-weight: 500; font-size: 14px; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: var(--teal-deep); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--cyan); }
.nav-cta { padding: 10px 18px; font-size: 14px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 8px; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--navy); cursor: pointer; }
.sheet { display: none; }
.crumbs { padding-top: 18px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--ink-mute); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #9aacb5; }
.crumbs [aria-current] { color: var(--ink-soft); font-weight: 500; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 40px 0 48px; font-size: 14px; color: var(--ink-mute); }
.site-foot .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-foot img { height: 26px; width: auto; }
.site-foot ul { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; }

/* Diagram label type: small, set in the body face, sentence case */
.dlabel { font: 600 12px/1.25 var(--sans); color: var(--ink-soft); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.sw-run { background: var(--teal-deep); }
.sw-idle { background: #c4cdd3; }
.sw-micro { background: repeating-linear-gradient(135deg, var(--cyan) 0 2px, #fff 2px 4px); box-shadow: inset 0 0 0 1px var(--navy); }

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 600 1.125rem/1.35 var(--display); color: var(--navy); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease-out); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { padding: 0 0 24px; max-width: 72ch; color: var(--ink-soft); }

.cta-band { background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 56px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #d5e6f4; }
.cta-band .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.cta-band .btn-primary:hover { background: var(--cyan-light); border-color: var(--cyan-light); }

@media (max-width: 1080px) {
  .nav-links, .site-nav .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .sheet { position: fixed; inset: 68px 0 auto 0; background: #fff; border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -12px rgba(16,45,123,.25); padding: 12px var(--gutter) 24px; }
  .sheet.open { display: block; }
  .sheet ul { list-style: none; padding: 0; margin: 0 0 16px; }
  .sheet li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--rule); font: 600 18px/1.2 var(--display); color: var(--navy); }
  .sheet .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --section: 72px; }
  .brand img { height: 24px; }
  .brand { gap: 12px; }
  .cta-band { grid-template-columns: 1fr; padding: 32px 24px; }
  .faq summary { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}

svg polygon, svg path, svg line { stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg .ft, svg .fl, svg .fr { stroke: #102d7b; stroke-width: .7; }
svg .ft { fill: #ffffff; } svg .fl { fill: #eef4f8; } svg .fr { fill: #d6e4ee; }
svg .ground { fill: #f2fafc; stroke: none; }
svg .ground-tile { fill: #f2fafc; stroke: none; }
svg .ft.slab { fill: #f7fbfd; } svg .fl.slab, svg .fr.slab { fill: #dde3e9; }
svg .wall.ft { fill: #c9d6df; } svg .wall.fl { fill: #f4f8fa; } svg .wall.fr { fill: #eaf1f5; }
svg .win { fill: #b3e8f7; stroke: #102d7b; stroke-width: .5; }
svg .door { fill: #e3ebf0; stroke: #102d7b; stroke-width: .6; } svg .slat { stroke: #9fb3c0; stroke-width: .5; }
svg .screen { fill: #102d7b; stroke: #102d7b; } svg .bar-run { fill: #00aee6; stroke: none; } svg .bar-micro { fill: #ffffff; stroke: none; }
svg .zfloor { fill: transparent; stroke: none; transition: fill .2s ease; }
svg .aisle { stroke: #0391bf; stroke-width: .8; stroke-dasharray: 4 3; }
svg .upright.ft, svg .upright.fl, svg .upright.fr { fill: #102d7b; stroke-width: .4; }
svg .beam.fl { fill: #0391bf; } svg .beam.fr { fill: #027aa2; } svg .beam.ft { fill: #b3e8f7; }
svg .load.ft { fill: #fff; } svg .load.fl { fill: #f1eee8; } svg .load.fr { fill: #dcd7cc; }
svg .pallet.fl, svg .pallet.fr, svg .pallet.ft { fill: #c9d6df; stroke-width: .5; }
svg .ghost { fill: none !important; stroke: #027aa2 !important; stroke-width: 1.2 !important; stroke-dasharray: 3 2; }
svg .gap-floor { fill: rgba(0,174,230,.35); stroke: none; }
svg .machine.ft { fill: #fff; } svg .machine.fl { fill: #e8f0f5; } svg .machine.fr { fill: #cddbe5; }
svg .cab.fl { fill: #dde6ec; } svg .cab.fr { fill: #c4d3dd; }
svg .hmi { fill: #102d7b; stroke: #102d7b; stroke-width: .5; }
svg .slot { fill: #2c3e47; stroke: none; }
svg .die.fl, svg .die.fr { fill: #8aa0ad; } svg .ram.fl { fill: #a9bcc8; } svg .ram.fr { fill: #93a9b6; }
svg .coil.fl { fill: #dfe7ec; } svg .coil.fr { fill: #b9c9d3; } svg .lap { fill: none; stroke: #8aa0ad; stroke-width: .5; } svg .ink-hole { fill: #2c3e47; stroke: #102d7b; stroke-width: .5; }
svg .sheet.fl { fill: #d6e1e8; } svg .sheet.fr { fill: #b9c9d3; } svg .sheet.ft { fill: #eef4f8; }
svg .conv.ft { fill: #f4f8fa; } svg .conv.fl { fill: #c9d6df; } svg .conv.fr { fill: #b3c4cf; } svg .roller { stroke: #9fb3c0; stroke-width: .5; }
svg .post { stroke: #102d7b; stroke-width: .8; }
svg .light .lamp { stroke-width: .5; transition: fill .25s ease; }
svg .s-run .lamp.ft { fill: #6fd3f2; } svg .s-run .lamp.fl { fill: #0391bf; } svg .s-run .lamp.fr { fill: #027aa2; }
svg .s-micro .lamp.ft { fill: #fff; } svg .s-micro .lamp.fl { fill: #b3e8f7; } svg .s-micro .lamp.fr { fill: #00aee6; }
svg .s-micro .lamp { stroke: #102d7b; stroke-width: 1.1; }
svg .s-idle .lamp.ft { fill: #dde3e9; } svg .s-idle .lamp.fl { fill: #c4cdd3; } svg .s-idle .lamp.fr { fill: #aab5bc; }
svg .fork-body.ft { fill: #fff; } svg .fork-body.fl { fill: #0391bf; } svg .fork-body.fr { fill: #027aa2; }
svg .tyre.fl, svg .tyre.fr, svg .tyre.ft { fill: #2c3e47; stroke: #21242c; }
svg .trailer.ft { fill: #fff; } svg .trailer.fl { fill: #f4f8fa; } svg .trailer.fr { fill: #dde6ec; }
svg .cabin.ft { fill: #fff; } svg .cabin.fl { fill: #0391bf; } svg .cabin.fr { fill: #027aa2; }
svg .plate.ft { fill: #c9d6df; }
svg .office.ft { fill: #ffffff; } svg .office.fl { fill: #eef4f8; } svg .office.fr { fill: #d6e4ee; }
svg .glass { fill: rgba(179,232,247,.28) !important; stroke: #0391bf !important; stroke-width: .6 !important; }
svg .glass.front { fill: rgba(179,232,247,.18) !important; }
svg .granite.ft { fill: #e9edf0; } svg .granite.fl { fill: #b9c4cb; } svg .granite.fr { fill: #9eabb4; }
svg .bench.ft { fill: #fff; } svg .bench.fl { fill: #e8f0f5; } svg .bench.fr { fill: #cddbe5; }
svg .screen-dark { fill: #102d7b !important; }
svg .plane { fill: rgba(179,232,247,.22); stroke: #0391bf; stroke-width: .9; stroke-dasharray: 6 4; }
svg .plane-hit { fill: transparent; stroke: transparent; stroke-width: 18; pointer-events: stroke; }
svg .grid { stroke: #0391bf; stroke-width: .4; opacity: .35; }
svg .mesh { fill: none; stroke: #00aee6; stroke-width: 1.1; }
svg .drop { stroke: #0391bf; stroke-width: .7; stroke-dasharray: 2 3; }
svg .node { fill: #fff; stroke: #027aa2; stroke-width: 1.2; }
svg .bar.ft { fill: #eef2f5; } svg .bar.fl { fill: #b9c9d3; } svg .bar.fr { fill: #8aa0ad; }
svg .cert.ft { fill: #fff; } svg .cert.fl, svg .cert.fr { fill: #dde3e9; stroke-width: .4; }
svg .gauge.ft { fill: #b3e8f7; } svg .gauge.fl { fill: #0391bf; } svg .gauge.fr { fill: #027aa2; }
svg .scanner.ft, svg .scanner.fl, svg .scanner.fr { fill: #102d7b; }

/* ---------- Landing: hero + plant map ---------- */
.hero { padding-top: 36px; padding-bottom: 0; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; }
.hero-copy h1 { grid-row: span 2; max-width: 19ch; font-size: clamp(2.25rem, 3.9vw, 3.4rem); }
.hero-copy .lede { max-width: 44ch; }

.mapsec { padding-top: 48px; padding-bottom: 72px; }
.map-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.map-head h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--slate); border-radius: 12px; }
.hub-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 9px; padding: 10px 14px;
  font: 600 14px/1.1 var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .16s var(--ease-out); }
.hub-tabs button:active { transform: scale(0.97); }
.hub-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(16,45,123,.08), 0 4px 14px -6px rgba(2,122,162,.35); }
@media (hover: hover) and (pointer: fine) { .hub-tabs button:hover { color: var(--navy); } }
.tab-swatch { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--teal-deep); background: transparent; transition: background-color .18s ease; }
.hub-tabs button[aria-selected="true"] .tab-swatch { background: var(--cyan); border-color: var(--cyan); }

.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; align-items: start; padding-top: 28px; }
.map { position: relative; margin: 0; }
.map .plant { width: 100%; height: auto; overflow: visible; }
.map-cap { font-size: 13px; color: var(--ink-mute); margin-top: 10px; }

/* zone focus: the active zone holds full ink, the rest step back */
.plant .zone { transition: opacity .28s ease; }
.plant .zone:not(.z-ai) { cursor: pointer; }
.map[data-active] .plant .zone:not(.is-active):not(.z-ai) { opacity: .62; }
.map[data-active="ai"] .plant .zone:not(.z-ai) { opacity: .78; }
.plant .zone.is-active .zfloor { fill: rgba(179,232,247,.55); }
.plant .zone.is-hover:not(.is-active) .zfloor { fill: rgba(179,232,247,.3); }
.plant .zone.is-hover { opacity: 1 !important; }
.plant .z-ai .plane, .plant .z-ai .mesh, .plant .z-ai .grid, .plant .z-ai .node, .plant .z-ai .drop { transition: opacity .28s ease, fill .28s ease; }
.map:not([data-active="ai"]) .plant .z-ai .plane { fill: rgba(179,232,247,.10); }
.map:not([data-active="ai"]) .plant .z-ai .mesh, .map:not([data-active="ai"]) .plant .z-ai .drop { opacity: .45; }
.map[data-active="ai"] .plant .z-ai .plane { fill: rgba(179,232,247,.42); }
.map[data-active="ai"] .plant .z-ai .node { fill: var(--cyan); }
.plant .z-ai .plane-hit { cursor: pointer; }
.plant .gap .ghost { animation: gap-blink 2.4s ease-in-out infinite; }
@keyframes gap-blink { 50% { opacity: .25; } }

.map-labels, .map-pins { position: absolute; inset: 0 0 auto 0; aspect-ratio: var(--plant-ratio-inv); pointer-events: none; }
.mlabel { position: absolute; transform: translate(-50%, 0); white-space: nowrap; font: 600 12px/1 var(--sans); color: var(--ink-soft);
  background: rgba(255,255,255,.92); padding: 5px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); transition: color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.mlabel.is-active { color: #fff; background: var(--navy); box-shadow: none; }
.mlabel[data-zone="office"] { transform: translate(-50%, -150%); }
.mlabel[data-zone="ai"] { transform: translate(-50%, -150%); }
.mlabel[data-zone="qa"] { transform: translate(-30%, 40%); }
.mlabel[data-zone="sc"] { transform: translate(-70%, 20%); }
.mlabel[data-zone="ops"] { transform: translate(-60%, 30%); }

.pin { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  background: var(--navy); color: #fff; font: 700 12px/1 var(--sans); display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(16,45,123,.3); transition: background-color .18s ease, transform .16s var(--ease-out); }
.pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.pin:active { transform: translate(-50%, -50%) scale(0.92); }
@media (hover: hover) and (pointer: fine) { .pin:hover { background: var(--teal-deep); } }
.pin.is-on { background: var(--cyan); color: var(--navy); }
.map[data-active] .pin:not(.in-zone) { background: #5b6f7b; }

/* hub panel */
.hub-panels { position: relative; }
.hub-panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow); }
.hub-panel.enter { animation: panel-in .26s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
.hub-zone { font-size: 13px; font-weight: 600; color: var(--teal-deep); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.hub-zone::before { content: ""; width: 12px; height: 8px; background: var(--cyan-light); border: 1px solid var(--teal-mid); transform: skewX(-30deg); }
.hub-panel h3 { font-size: 1.6rem; }
.hub-intro { margin-top: 12px; color: var(--ink-soft); font-size: 15px; }
.hub-list { list-style: none; padding: 0; margin: 20px 0 0; border-top: 1px solid var(--rule); }
.hub-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.hub-list a { font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--navy); }
.hub-list a:hover { color: var(--teal-deep); }
.rt { flex: none; font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.hub-cases { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.hub-cases a { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink-soft); padding: 8px 10px; border-radius: 8px; background: var(--mist); transition: background-color .2s ease; }
.hub-cases a:hover { text-decoration: none; background: var(--slate); color: var(--navy); }
.hub-cases a.flash { background: var(--cyan-light); color: var(--navy); }
.hub-cases b, .cnum { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 11px/22px var(--sans); text-align: center; }
.hub-note { margin-top: 12px; font-size: 13px; color: var(--ink-mute); }
.hub-go { display: inline-block; margin-top: 20px; font-weight: 600; }

/* logos */
.logos { padding-top: 8px; padding-bottom: 72px; display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: center; }
.logos-h { font: 600 14px/1.3 var(--sans); color: var(--ink-mute); letter-spacing: 0; }
.logo-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; align-items: center; }
.logo-row img { width: 100%; height: 52px; object-fit: contain; opacity: .8; filter: grayscale(1); }

/* ---------- Chain: one missing part ---------- */
.chain-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 64px; align-items: start; }
.chain-intro p + p { margin-top: 12px; color: var(--ink-soft); }
.chain-steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: step; }
.chain-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 92px; height: 2px; background: var(--cyan);
  transform-origin: left; transform: scaleX(var(--chain-p, 1)); }
.cstep { position: relative; padding: 0 20px; counter-increment: step; }
.cstep + .cstep { border-left: 1px dashed #b9cbd6; }
.cvis { height: 184px; display: grid; place-items: center; position: relative; z-index: 1; }
.cvis svg { max-height: 176px; width: auto; max-width: 100%; }
.cvis-iso svg { background: transparent; }
.cvis-flat { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 10px; height: 184px; }
.cwhere { margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--teal-deep); display: flex; align-items: center; gap: 10px; }
.cwhere::before { content: counter(step); width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/24px var(--sans); text-align: center; flex: none; }
.ccap { margin-top: 10px; font: 600 1.125rem/1.4 var(--display); color: var(--navy); letter-spacing: -0.005em; max-width: 26ch; }
.chain-foot { margin-top: 40px; display: flex; gap: 12px; align-items: baseline; font-size: 15px; }

.gantt .g-axis, .pl .g-axis { stroke: var(--ink-mute); stroke-width: 1; }
.gantt .g-ticks line { stroke: var(--ink-mute); stroke-width: 1; }
.g-t { font: 500 11px var(--sans); fill: var(--ink-mute); }
.g-l { font: 600 12px var(--sans); fill: var(--ink-soft); }
.g-plan { fill: var(--cyan-light); stroke: var(--teal-mid); }
.g-real { fill: var(--teal-deep); transform-box: fill-box; transform-origin: left; }
.g-due { stroke: var(--navy); stroke-width: 1.25; stroke-dasharray: 3 3; }
.pl-rev { fill: var(--cyan-light); stroke: var(--teal-mid); }
.pl-cost { fill: var(--navy); }
.pl-cost-real { transform-box: fill-box; transform-origin: bottom; transform: scaleY(1.45); }

/* authored moment: the chain plays once when it enters view */
.chain.armed .chain-steps { --chain-p: 0; }
.chain.armed .cstep { opacity: .35; }
.chain.armed .g-real { transform: scaleX(.667); }
.chain.armed .pl-cost-real { transform: scaleY(1); }
.chain.play .chain-steps::before { animation: chain-line 2.6s var(--ease-io) forwards; }
.chain.play .cstep { animation: step-on .5s var(--ease-out) forwards; }
.chain.play .cstep:nth-child(2) { animation-delay: .7s; }
.chain.play .cstep:nth-child(3) { animation-delay: 1.4s; }
.chain.play .cstep:nth-child(4) { animation-delay: 2.1s; }
.chain.play .g-real { animation: grow-x 1s var(--ease-io) 1.7s forwards; }
.chain.play .pl-cost-real { animation: grow-y .9s var(--ease-io) 2.4s forwards; }
@keyframes chain-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes step-on { to { opacity: 1; } }
@keyframes grow-x { from { transform: scaleX(.667); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(1); } to { transform: scaleY(1.45); } }

/* ---------- Cases ---------- */
.cases h2 { max-width: 20ch; }
.case-zones { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.czone-h { font: 600 14px/1.3 var(--sans); color: var(--teal-deep); letter-spacing: 0; padding-bottom: 12px; border-bottom: 2px solid var(--navy); margin-bottom: 12px; }
.case { display: block; padding: 18px 0 20px; border-bottom: 1px solid var(--rule); color: var(--ink); position: relative; }
.case:hover { text-decoration: none; }
.case .cnum { display: inline-block; margin-bottom: 10px; }
.case h4 { font-size: 1.1rem; line-height: 1.25; transition: color .18s ease; }
@media (hover: hover) and (pointer: fine) { .case:hover h4 { color: var(--teal-deep); } }
.case p { margin-top: 8px; font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.case.flash { background: linear-gradient(var(--slate), var(--slate)) no-repeat; }
.cases-all { margin-top: 28px; }

/* ---------- Built ---------- */
.built-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.built-quote { font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 18ch; margin-bottom: 20px; }
.built-grid .lede + p { margin-top: 16px; }
.built-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.built-list div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.built-list dt { font: 600 1.05rem/1.3 var(--display); color: var(--navy); }
.built-list dd { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }

.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
.end-cta { padding-bottom: 96px; }

@media (max-width: 1080px) {
  .map-grid { grid-template-columns: 1fr; }
  .hub-panels { max-width: 640px; }
  .case-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero-copy { grid-template-columns: 1fr; }
  .hero-copy h1 { grid-row: auto; }
  .mapsec { padding-top: 32px; }
  .hub-tabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .hub-tabs button { justify-content: flex-start; text-align: left; font-size: 13.5px; padding: 10px; }
  .map-labels { display: none; }
  .pin { width: 22px; height: 22px; font-size: 11px; }
  .hub-panel { padding: 22px; }
  .logos { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chain-head, .built-grid, .faq-grid { grid-template-columns: 1fr; gap: 20px; }
  .chain-steps { grid-template-columns: 1fr; margin-top: 32px; }
  .chain-steps::before { display: none; }
  .cstep { padding: 0 0 32px; display: grid; grid-template-columns: 132px 1fr; gap: 0 16px; align-items: center; }
  .cstep + .cstep { border-left: 0; border-top: 1px dashed #b9cbd6; padding-top: 24px; }
  .cvis, .cvis-flat { height: 120px; grid-row: span 2; }
  .cvis svg { max-height: 112px; }
  .cwhere { margin-top: 0; align-self: end; }
  .ccap { font-size: 1.02rem; align-self: start; margin-top: 6px; }
  .case-zones { grid-template-columns: 1fr; }
}
@keyframes chain-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .plant .gap .ghost { animation: none; }
  .chain.armed .cstep { opacity: 1; }
  .chain.armed .chain-steps { --chain-p: 1; }
  .chain.armed .g-real { transform: none; }
  .chain.armed .pl-cost-real { transform: scaleY(1.45); }
}

/* ---------- Operations hub ---------- */
.ops-hero { padding-top: 36px; padding-bottom: 72px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px 56px; align-items: center; }
.ops-hero h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 17ch; }
.locator { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 6px 14px 6px 6px; border: 1px solid var(--rule); border-radius: 12px; color: var(--ink-soft); font-size: 13px; font-weight: 600; transition: border-color .18s ease, background-color .18s ease; }
.locator:hover { text-decoration: none; border-color: var(--teal-mid); background: var(--mist); }
.locator-art { width: 84px; display: block; }
.locator-art svg { width: 100%; height: auto; }
.locator-art .zone:not(.z-ops) { opacity: .45; }
.locator-art .z-ops .zfloor { fill: rgba(0,174,230,.55); }
.locator-art .z-ai { display: none; }
.tmi { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; font: 600 15px/1 var(--display); color: var(--navy); }
.tmi span { padding: 8px 12px; background: var(--slate); border-radius: 8px; position: relative; }
.tmi span + span { margin-left: 18px; }
.tmi span + span::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px; height: 2px; background: var(--teal-mid); }
.ops-hero .lede { margin-bottom: 28px; }

.line-fig { margin: 0; }
.line-art { position: relative; }
.line-svg { width: 100%; height: auto; }
.line-tags span { position: absolute; transform: translate(-40%, 14px); font: 600 11.5px/1 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.shift { position: relative; margin-top: 18px; padding-left: 74px; }
.shift-rows { display: grid; gap: 5px; }
.srow { position: relative; height: 14px; display: flex; border-radius: 3px; overflow: hidden; background: #c4cdd3; }
.srow::before { content: attr(data-name); position: absolute; left: -74px; top: 0; font: 600 11px/14px var(--sans); color: var(--ink-soft); width: 68px; }
.srow { overflow: visible; }
.srow .seg { height: 100%; flex: none; }
.seg.run { background: var(--teal-deep); }
.seg.idle { background: #c4cdd3; }
.seg.micro { background: repeating-linear-gradient(135deg, var(--cyan) 0 2px, #fff 2px 4px); box-shadow: inset 0 0 0 1px var(--navy); }
.srow .mask { position: absolute; top: 0; bottom: 0; right: 0; background: var(--mist); border-left: 1px solid var(--rule); transition: none; }
.shift-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-mute); margin-top: 6px; }
.playhead { position: absolute; top: -6px; bottom: 16px; left: 74px; width: 2px; background: var(--navy); }
.playhead::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); }
.line-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 16px; font-size: 13px; }

.manifesto { background: var(--navy); color: #fff; padding: 72px 0; }
.manifesto-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.manifesto-big { font: 600 clamp(1.4rem, 2.4vw, 2rem)/1.3 var(--display); letter-spacing: -0.015em; }
.manifesto-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.manifesto-list li { padding: 14px 0; border-bottom: 1px solid rgba(179,232,247,.25); font-weight: 500; color: #d9eef8; }
.manifesto-list li:first-child { border-top: 1px solid rgba(179,232,247,.25); }

.sq-head, .cn-head, .ro-head, .ex-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.bookends { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.bk { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.bk svg { width: 100%; max-width: 180px; height: auto; }
.bk-tag { font: 600 13px/1 var(--sans); color: var(--teal-deep); }
.bk-word { font: 600 1.25rem/1 var(--display); color: var(--navy); margin-top: auto; }
.bk-gap { background: repeating-linear-gradient(135deg, var(--slate) 0 10px, #fff 10px 20px); border-left: 1px dashed var(--teal-mid); border-right: 1px dashed var(--teal-mid); justify-content: center; }
.bk-gap p { font: 600 1.15rem/1.4 var(--display); color: var(--navy); max-width: 34ch; background: rgba(255,255,255,.9); padding: 6px 0; }
.b-plan { fill: var(--cyan-light); stroke: var(--teal-mid); }
.b-res { fill: var(--navy); }
.b-ax { stroke: var(--ink-mute); }
.sq-intro { margin-top: 48px; font-weight: 500; color: var(--ink-soft); max-width: 70ch; }
.killers { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.killer { border-top: 2px solid var(--navy); padding-top: 20px; }
.k-svg { width: 100%; height: auto; margin-bottom: 18px; }
.k-run { fill: var(--teal-deep); } .k-micro { fill: #fff; stroke: var(--navy); stroke-width: 1; }
.k-stop { fill: #c4cdd3; } .k-br { fill: none; stroke: var(--navy); stroke-width: 1.2; }
.k-rated { stroke: var(--ink-mute); stroke-dasharray: 4 4; } .k-speed { fill: none; stroke: var(--teal-deep); stroke-width: 3; }
.k-t { font: 600 11px var(--sans); fill: var(--ink-mute); }
.killer h3 { font-size: 1.2rem; }
.killer p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.sq-close { margin-top: 48px; font: 600 1.35rem/1.4 var(--display); color: var(--navy); max-width: 40ch; }

/* connect */
.cn-fig { margin: 48px 0 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 20px; }
.cn-svg { width: 100%; height: auto; }
.c-ot { fill: var(--mist); }
.c-boundary { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 6 5; }
.c-zone { font: 600 13px var(--sans); fill: var(--navy); }
.c-l { font: 600 13px var(--sans); fill: var(--ink-soft); }
.c-s { font: 600 12px var(--sans); fill: var(--navy); }
.c-s-inv { fill: #fff; }
.c-mach, .c-box { fill: #fff; stroke: var(--navy); stroke-width: 1.25; }
.c-panel-old { fill: #e3ebf0; stroke: var(--navy); }
.c-detail { stroke: #9fb3c0; stroke-width: 1.25; }
.c-motor { fill: #d6e4ee; stroke: var(--navy); stroke-width: 1.25; }
.c-cable { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.c-switch { fill: var(--navy); }
.c-clamp { fill: none; stroke: var(--teal-deep); stroke-width: 7; }
.c-hinge { fill: var(--navy); }
.c-wire { stroke: var(--teal-deep); stroke-width: 1.5; fill: none; }
.c-node { fill: #fff; stroke: var(--teal-deep); stroke-width: 1.5; }
.c-data { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 7 5; }
.c-glass { fill: var(--cyan-light); stroke: var(--navy); }
.c-slot { fill: var(--ink-soft); }
.c-plc { fill: #d6e4ee; stroke: var(--navy); }
.c-led { fill: var(--cyan); }
.c-proto { fill: #fff; stroke: var(--teal-deep); stroke-width: 1.25; }
.c-gw { fill: var(--navy); }
.c-fw { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.c-brick { stroke: var(--navy); stroke-width: 1; fill: none; }
.c-cloud { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.c-app { fill: var(--teal-deep); }
.c-screen { fill: var(--navy); }
.c-bar-a { fill: var(--cyan); } .c-bar-m { fill: #fff; }
.c-badge { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.c-bn { font: 700 12px var(--sans); fill: #fff; }
.cn-svg .c-path { transition: opacity .25s ease; }
.cn-fig[data-path="1"] .c-path:not([data-p="1"]), .cn-fig[data-path="2"] .c-path:not([data-p="2"]), .cn-fig[data-path="3"] .c-path:not([data-p="3"]) { opacity: .28; }
.cn-paths { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: cp; }
.cn-paths li { counter-increment: cp; padding: 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--rule); cursor: default; transition: border-color .2s ease, box-shadow .2s ease; }
.cn-paths li.is-on { border-color: var(--teal-mid); box-shadow: var(--shadow); }
.cn-paths h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; }
.cn-paths h3::before { content: counter(cp); width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/26px var(--sans); text-align: center; flex: none; }
.cn-paths p { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); }

/* roles */
.ro-tabs { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); }
.ro-tabs button { border: 0; background: none; padding: 14px 20px 16px; font: 600 15px/1.3 var(--sans); color: var(--ink-mute); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; text-align: left; transition: color .18s ease, border-color .18s ease; }
.ro-tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--cyan); }
@media (hover: hover) and (pointer: fine) { .ro-tabs button:hover { color: var(--navy); } }
.ro-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; margin-top: 40px; align-items: start; }
.scope { margin: 0; }
.scope-svg { width: 100%; height: auto; }
.scope .site, .scope .the-plant, .scope .wc-g { transition: opacity .3s ease; }
.scope[data-scope="plant"] .site, .scope[data-scope="wc"] .site { opacity: .25; }
.scope[data-scope="wc"] .the-plant > :not(.wc-g) { opacity: .35; }
.scope-svg .wc.ft { fill: #fff; } .scope-svg .wc.fl { fill: var(--cyan); } .scope-svg .wc.fr { fill: var(--teal-deep); }
.scope[data-scope="all"] .site .office.fl { fill: var(--cyan-light); }
.scope[data-scope="plant"] .the-plant .ft.slab { fill: var(--cyan-light); }
.scope-cap { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; color: var(--ink-mute); }
.scope-cap span { position: relative; padding-left: 14px; }
.scope-cap span::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border-radius: 2px; transform: translateY(-50%); background: var(--rule); }
.scope[data-scope="all"] [data-s="all"], .scope[data-scope="plant"] [data-s="plant"], .scope[data-scope="wc"] [data-s="wc"] { color: var(--navy); font-weight: 600; }
.scope[data-scope="all"] [data-s="all"]::before, .scope[data-scope="plant"] [data-s="plant"]::before, .scope[data-scope="wc"] [data-s="wc"]::before { background: var(--cyan); }
.ro-panel { margin: 0; }
.ro-panel.enter { animation: panel-in .26s var(--ease-out); }
.ro-panel div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.ro-panel div:first-child { padding-top: 0; }
.ro-panel dt { font: 600 13px/1.3 var(--sans); color: var(--teal-deep); }
.ro-panel dd { margin: 6px 0 0; color: var(--ink-soft); }
.ro-panel div:first-child dd { font: 600 1.4rem/1.3 var(--display); color: var(--navy); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* capabilities */
.caps h2 { margin-bottom: 16px; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--rule); }
.cap:first-of-type { border-top: 0; }
.cap-text h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: 14px; }
.cap-text p + p { margin-top: 12px; }
.cap-text p { color: var(--ink-soft); max-width: 60ch; }
.cap-text .cap-sol { color: var(--ink); font-weight: 500; padding-top: 12px; border-top: 1px dashed #b9cbd6; }
.cap-vis { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 24px; }
.cap-vis svg { width: 100%; height: auto; }
.cap-vis figcaption { margin-top: 14px; font-size: 14px; color: var(--ink-mute); }
.v-l { font: 600 13px var(--sans); fill: var(--navy); }
.v-t { font: 500 12px var(--sans); fill: var(--ink-mute); }
.v-run { fill: var(--teal-deep); } .v-stop { fill: #c4cdd3; }
.v-micros rect { fill: #fff; stroke: var(--navy); stroke-width: 1; }
.v-lead { stroke: var(--ink-mute); }
.v-track { fill: var(--slate); } .v-bar-hi { fill: var(--teal-deep); } .v-bar { fill: var(--cyan); }
.v-target { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 3 3; }
.v-rule { stroke: var(--rule); }
.v-big { font: 600 17px var(--display); fill: var(--ink-mute); } .v-big-2 { fill: var(--navy); }
.v-screen { fill: var(--navy); }
.v-sl { font: 600 12px var(--sans); fill: #cfe6f3; }
.v-p { fill: none; stroke: var(--cyan-light); stroke-width: 1.2; }
.v-a { fill: var(--cyan); } .v-slip { fill: #fff; }
.v-now { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 3 3; }
.tablet { background: var(--ink); border-radius: 18px; padding: 14px; max-width: 420px; margin: 0 auto; }
.tablet > * { background: #fff; }
.tablet-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 14px; color: var(--navy); border-bottom: 1px solid var(--rule); }
.dot-stop { width: 10px; height: 10px; border-radius: 2px; background: #c4cdd3; box-shadow: inset 0 0 0 1px var(--navy); }
.tablet-q { padding: 18px 18px 8px; font: 600 1.2rem/1.2 var(--display); color: var(--navy); }
.reasons { display: grid; gap: 8px; padding: 8px 18px 14px; }
.reasons button { text-align: left; border: 1.5px solid var(--rule); background: #fff; border-radius: 10px; padding: 13px 14px; font: 600 15px/1.2 var(--sans); color: var(--ink-soft); cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .16s var(--ease-out); }
.reasons button:active { transform: scale(0.98); }
.reasons button[aria-checked="true"] { border-color: var(--teal-deep); background: var(--slate); color: var(--navy); }
.reason-out { padding: 6px 18px 20px; border-radius: 0 0 8px 8px; min-height: 96px; }
.reason-out p { font-size: 14.5px; color: var(--ink-soft); }

/* profit */
.profit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.profit-grid h2 { margin-bottom: 18px; }
.profit-grid .lede + p { margin-top: 14px; }
.orders { margin: 0; }
.orders svg { width: 100%; height: auto; }
.v-rev { fill: var(--cyan-light); stroke: var(--teal-mid); } .v-mt { fill: var(--teal-deep); } .v-mt-b { fill: var(--navy); }
.profit-list { grid-column: 1 / -1; margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--rule); padding-top: 28px; }
.profit-list dt { font: 600 1.1rem/1.3 var(--display); color: var(--navy); }
.profit-list dd { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }

/* steel */
.st-head h2 { max-width: 28ch; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.st-head p { margin-top: 12px; }
.st-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 40px; align-items: start; }
.st-num { font: 700 clamp(3rem, 6vw, 4.5rem)/1 var(--display); color: var(--navy); letter-spacing: -0.03em; }
.st-bars { width: 100%; max-width: 300px; height: auto; margin: 14px 0; }
.st-b0 { fill: #c4cdd3; } .st-b1 { fill: var(--teal-deep); }
.st-fig p:last-child { font-size: 15px; color: var(--ink-soft); }
.st-text p + p { margin-top: 10px; }
.st-text .text-link { display: inline-block; margin-top: 16px; }
.quotes { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--rule); padding-top: 32px; }
.quotes blockquote { margin: 0; }
.quotes p { font: 500 1.3rem/1.4 var(--display); color: var(--navy); }
.quotes cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: var(--ink-mute); }

/* excel */
.ex-table { margin-top: 40px; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.ex-row { display: grid; grid-template-columns: 1fr 1fr; }
.ex-row + .ex-row { border-top: 1px solid var(--rule); }
.ex-th span { padding: 14px 24px; font: 600 13px var(--sans); color: var(--ink-mute); background: var(--mist); }
.ex-th span + span { color: var(--teal-deep); background: var(--slate); }
.ex-row > div { padding: 22px 24px; }
.ex-no { background: #fff; }
.ex-yes { background: var(--slate); }
.ex-row h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.ex-no h3 { color: var(--ink-soft); }
.ex-no h3::before, .ex-yes h3::before { content: ""; width: 16px; height: 16px; flex: none; background-repeat: no-repeat; background-size: contain; }
.ex-no h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%234f5f69' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ex-yes h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' stroke='%23027aa2' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ex-row p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); }

/* MACH: the one branded block */
.mach { background: #14181d; color: #e8edf2; padding: 96px 0; font-family: 'DM Sans', var(--sans); }
.mach-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.mach-logo { display: block; position: relative; width: 150px; height: 53px; overflow: hidden; margin-bottom: 28px; }
.mach-logo img { position: absolute; max-width: none; width: 194px; height: 194px; left: -22px; top: -78px; }
.mach h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; color: #fff; font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: -0.01em; line-height: 1.02; }
.mach-copy > p { margin-top: 16px; font-size: 1.1rem; color: #b9c4cf; max-width: 40ch; }
.mach-caps { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #2a323b; }
.mach-caps li { padding: 14px 0; border-bottom: 1px solid #2a323b; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 10px; }
.mach-caps li::before { content: ""; width: 6px; height: 6px; background: var(--cyan); border-radius: 1px; }
.mach-btn { background: var(--cyan); border-color: var(--cyan); color: #14181d; font-family: 'DM Sans', var(--sans); }
.mach-btn:hover { background: #33c3ee; border-color: #33c3ee; }
.mach-ghost { background: transparent; border-color: #4a5560; color: #fff; font-family: 'DM Sans', var(--sans); }
.mach-ghost:hover { border-color: var(--cyan); }
.mach .btn:focus-visible { outline-color: var(--cyan); }
.mach-media { border-radius: 14px; overflow: hidden; border: 1px solid #2a323b; background: #0d1014; aspect-ratio: 16 / 10; }
.mach-media video { width: 100%; height: 100%; object-fit: cover; }

/* steps */
.step-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: st; }
.step-list li { counter-increment: st; padding: 28px 28px 0 0; border-top: 2px solid var(--navy); position: relative; }
.step-list li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.step-list h3 { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; }
.step-list h3::before { content: counter(st); width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 13px/30px var(--sans); text-align: center; }
.step-t { margin-top: 12px; font-weight: 600; color: var(--navy); }
.step-list p + p { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.step-list .btn { margin-top: 20px; }

/* AI next */
.ai-next { padding-bottom: 24px; }
.ai-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; background: var(--slate); border-radius: var(--r-xl); padding: 48px; }
.ai-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.ai-card p { color: var(--ink-soft); margin-bottom: 18px; }
.ai-art svg { width: 100%; height: auto; }
.ai-art .zone:not(.z-ai) { opacity: .55; }
.ai-art .plane { fill: rgba(179,232,247,.5); }
.ai-art .node { fill: var(--cyan); }

.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }

@media (max-width: 1080px) {
  .ops-hero { grid-template-columns: 1fr; }
  .cn-paths, .killers { grid-template-columns: 1fr; gap: 16px; }
  .st-grid { grid-template-columns: 1fr 1fr; }
  .st-text { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ops-hero { padding-bottom: 48px; }
  .line-tags { display: none; }
  .shift { padding-left: 58px; }
  .srow::before { left: -58px; width: 54px; font-size: 10px; }
  .playhead { left: 58px; }
  .manifesto { padding: 56px 0; }
  .manifesto-grid, .sq-head, .cn-head, .ro-head, .ex-head, .ro-body, .profit-grid, .faq-grid, .ai-card, .mach-grid { grid-template-columns: 1fr; gap: 24px; }
  .bookends { grid-template-columns: 1fr; }
  .bk-gap { border: 0; border-top: 1px dashed var(--teal-mid); border-bottom: 1px dashed var(--teal-mid); }
  .cn-fig { padding: 8px; overflow-x: auto; }
  .cn-svg { min-width: 640px; }
  .ro-tabs { flex-direction: column; border-bottom: 0; }
  .ro-tabs button { border-bottom: 0; border-left: 3px solid transparent; padding: 12px 14px; }
  .ro-tabs button[aria-selected="true"] { border-left-color: var(--cyan); background: var(--mist); }
  .cap { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .cap-vis { padding: 16px; }
  .profit-list { grid-template-columns: 1fr; gap: 18px; }
  .st-grid, .quotes { grid-template-columns: 1fr; gap: 28px; }
  .ex-row { grid-template-columns: 1fr; }
  .ex-th { display: none; }
  .ex-row > div { padding: 18px; }
  .mach { padding: 64px 0; }
  .step-list { grid-template-columns: 1fr; }
  .step-list li, .step-list li + li { padding: 24px 0 28px; border-left: 0; }
  .ai-card { padding: 28px 22px; }
}

/* ---------- Round 2: restored ops content + the three other hubs ---------- */

/* zone caption: the same device as the landing panels, names the part of the plant */
.zone-cap { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.2 var(--sans); color: var(--teal-deep); margin-bottom: 12px; }
.zone-cap::before { content: ""; width: 12px; height: 8px; background: var(--cyan-light); border: 1.5px solid var(--teal-deep); transform: skewX(-30deg); }

/* ops restorations */
.blind { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 64px; align-items: baseline; }
.blind h3 { font-size: 1.35rem; }
.blind p { color: var(--ink-soft); max-width: 62ch; }
.killer { display: flex; flex-direction: column; }
.killer .k-svg { order: -1; }
.ro-sub { margin-top: 40px; font-size: 1.15rem; color: var(--ink-soft); font-weight: 600; }
.ro-sub + .ro-tabs { margin-top: 16px; }
.cap-text h4 { font: 600 1.05rem/1.3 var(--display); color: var(--navy); margin: 18px 0 6px; }
.cap-text h3 + h4 { margin-top: 0; }
.cap-dl { margin: 16px 0 0; display: grid; gap: 12px; }
.cap-dl dt { font: 600 14px/1.3 var(--sans); color: var(--navy); }
.cap-dl dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }
.ro-k { display: block; font: 600 13px/1.3 var(--sans); color: var(--teal-deep); margin-bottom: 4px; }
.pr-sub { font-size: 1.15rem; margin: 22px 0 8px; }
.profit-grid > div > p:not(.lede) { color: var(--ink-soft); margin-top: 12px; }
.ex-sub { margin-top: 8px; font: 600 1.15rem/1.3 var(--display); color: var(--teal-deep); }

/* case write-ups */
.story h2 { max-width: 30ch; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.story-grid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.story h3 { font-size: 1.1rem; margin-bottom: 10px; }
.story-profile dl { margin: 0; border-top: 1px solid var(--rule); }
.story-profile dl div { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.story-profile dt { font: 600 13px/1.3 var(--sans); color: var(--teal-deep); }
.story-profile dd { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; }
.story-body p { color: var(--ink-soft); max-width: 62ch; }
.story-body p + h3, .story-body blockquote + h3 { margin-top: 24px; }
.story-results-h { margin-top: 44px; }
.results { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.results li { padding: 16px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 15px; }
.results .res-fig { grid-row: span 3; }
.results-4 .res-fig { grid-row: span 2; }
.results .res-fig > p { color: var(--ink); font-weight: 500; }
.results-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-vis { margin-top: 14px; }
.story .text-link { display: inline-block; margin-top: 24px; }
.pull { margin: 0; }
.pull p { font: 500 1.3rem/1.4 var(--display); color: var(--navy) !important; }
.pull cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--ink-mute); }
.principle { margin-top: 36px; padding-top: 24px; border-top: 2px solid var(--navy); max-width: 720px; }

/* ROI calculators */
.roi-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; }
.roi-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.calc { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.calc-art { height: 150px; display: flex; align-items: center; justify-content: center; background: var(--mist); border-radius: var(--r); margin-bottom: 8px; }
.calc-art svg { max-height: 130px; width: auto; max-width: 92%; }
.calc-art .z-ai { display: none; }
.calc h3 { font-size: 1.25rem; }
.calc > p { color: var(--ink-soft); font-size: 15px; }
.calc-k { font: 600 13px/1.2 var(--sans); color: var(--teal-deep) !important; margin-top: 4px; }
.calc-out { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.calc-out li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #b9cbd6; border-radius: 8px; font-weight: 500; color: var(--navy); font-size: 15px; }
.calc-out li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cyan); flex: none; }
.calc .btn { margin-top: auto; align-self: flex-start; }
.calc-out + .btn { margin-top: 12px; }

/* hub heroes: copy beside the zone, zoomed */
.hub-hero { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding-top: 40px; padding-bottom: 72px; }
.hub-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; max-width: 18ch; }
.hub-hero .sub { margin-top: 14px; font: 600 1.2rem/1.35 var(--display); color: var(--teal-deep); max-width: 36ch; }
.hub-hero .lede { margin-top: 16px; }
.hub-hero .btn-row { margin-top: 28px; }
.zoom-fig { margin: 0; position: relative; }
.zoom-fig > svg { width: 100%; height: auto; display: block; }
.zlabels { position: absolute; inset: 0; pointer-events: none; }
.zlabel { position: absolute; transform: translate(-50%, 0); font: 600 12px/1 var(--sans); color: var(--navy); background: rgba(255,255,255,.94); padding: 5px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); white-space: nowrap; }
.zlabel.hot { background: var(--navy); color: #fff; box-shadow: none; }
.zcap { margin-top: 10px; font-size: 13px; color: var(--ink-mute); }
.locator-art.l-sc .zone:not(.z-sc), .locator-art.l-qa .zone:not(.z-qa), .locator-art.l-ai .zone:not(.z-ai) { opacity: .45; }
.locator-art.l-sc .z-ops .zfloor, .locator-art.l-qa .z-ops .zfloor, .locator-art.l-ai .z-ops .zfloor { fill: transparent; }
.locator-art.l-sc .z-sc .zfloor, .locator-art.l-qa .z-qa .zfloor { fill: rgba(0,174,230,.55); }
.locator-art.l-sc .zone.z-ops, .locator-art.l-qa .zone.z-ops, .locator-art.l-ai .zone.z-ops { opacity: .45; }
.locator-art.l-ai .z-ai { display: inline; }
.locator-art.l-ai .z-ai .plane { fill: rgba(0,174,230,.4); }

/* the AI hero: the plant with its data layer lit */
.plant-hero { width: 100%; height: auto; display: block; }
.plant-hero .zone:not(.z-ai) { opacity: .55; }
.plant-hero .z-ai .plane { fill: rgba(179,232,247,.4); }
.plant-hero .z-ai .mesh { stroke-width: 1.6; }
.plant-hero .z-ai .node { fill: var(--cyan); }

/* generic hub sections */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.sec-head .lede { margin: 0; }
.sec-solo { max-width: 760px; margin-bottom: 36px; }
.sec-solo h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.sec-solo p { margin-top: 12px; color: var(--ink-soft); }
.trio { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.trio > li { border-top: 2px solid var(--navy); padding-top: 18px; }
.trio h3 { font-size: 1.15rem; }
.trio p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.trio .num { display: block; font: 700 2.4rem/1 var(--display); color: var(--navy); letter-spacing: -0.02em; margin-bottom: 10px; }

.problems { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.prob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.prob h3 { font-size: 1.15rem; }
.prob p { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.prob .sol { padding-left: 24px; border-left: 2px solid var(--cyan); }
.prob .sol p { color: var(--ink); font-weight: 500; margin: 0; }
.prob-art { width: 100%; }
.prob-art svg { width: 100%; height: auto; }
.after-btn { margin-top: 32px; }

.flags { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.flags li { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 24px; }
.flags h3 { font: 600 1.15rem/1.35 var(--display); display: flex; gap: 10px; align-items: flex-start; }
.flags h3 svg { flex: none; margin-top: 4px; }
.flags p { margin-top: 10px; color: var(--ink-soft); font-size: 15px; }
.x-mark { stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.split p + p { margin-top: 12px; }
.split p { color: var(--ink-soft); }
.split ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-soft); }
.split li + li { margin-top: 6px; }

.res-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.res-card { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.res-card h3 { font-size: 1.3rem; }
.res-card .res-sub { font: 600 1.02rem/1.35 var(--display); color: var(--teal-deep); }
.res-card p { color: var(--ink-soft); font-size: 15px; }
.res-card .res-k { font: 600 13px/1.2 var(--sans); color: var(--navy); margin-top: 6px; }
.res-card ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.res-card li + li { margin-top: 4px; }
.res-card .btn { margin-top: auto; align-self: flex-start; }
.res-card ul + .btn { margin-top: 16px; }

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fit > div { border-radius: var(--r-lg); padding: 28px; }
.fit .fit-yes { background: var(--slate); }
.fit .fit-no { border: 1px solid var(--rule); }
.fit h3 { font-size: 1.15rem; }
.fit ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fit li { display: flex; gap: 10px; color: var(--ink-soft); }
.fit li svg { flex: none; margin-top: 5px; }
.tick { stroke: var(--teal-deep); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.closer { background: var(--navy); color: #fff; border-radius: var(--r-xl); padding: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.closer h2 { color: #fff; }
.closer p { margin-top: 10px; color: #d9eef8; max-width: 60ch; }
.closer .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }

/* AI page */
.band-text { columns: 2; column-gap: 56px; }
.band-text p { color: #d9eef8; break-inside: avoid; margin-bottom: 14px; }
.band-text p.strong { color: #fff; font: 600 1.2rem/1.4 var(--display); }
.stats { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stats li { border-top: 2px solid var(--navy); padding-top: 14px; }
.stats .v { font: 700 clamp(1.8rem, 3vw, 2.4rem)/1 var(--display); color: var(--navy); }
.stats .l { margin-top: 8px; font-size: 14px; color: var(--ink-mute); }
sup a, sup { font-size: .7em; }
.seen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; }
.seen > div > p { color: var(--ink-soft); }
.seen > div > p + p { margin-top: 12px; }
.waterline { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; margin: 28px 0; padding: 14px 0; border-top: 2px solid var(--navy); border-bottom: 1px dashed var(--teal-mid); }
.waterline p { font: 600 1.15rem/1.35 var(--display); color: var(--navy); }
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.versus > div { border-radius: var(--r-lg); padding: 28px; }
.versus .v-without { border: 1px solid var(--rule); }
.versus .v-with { background: var(--slate); }
.versus h3 { font-size: 1.1rem; }
.versus p { margin-top: 10px; color: var(--ink-soft); }
.after-p { margin-top: 28px; max-width: 72ch; color: var(--ink-soft); }
.dia-svg { width: 100%; height: auto; }
.pu-l { fill: #fff; stroke: var(--navy); stroke-width: 1.2; }
.pu-l.pu-4 { fill: var(--slate); }
.pu-t { font: 600 14px var(--sans); fill: var(--navy); }
.pu-a { stroke: var(--teal-mid); stroke-width: 1.5; }
.pu-head { fill: var(--teal-mid); }
.uns-bus { fill: var(--navy); }
.uns-bt { font: 600 17px var(--display); fill: #fff; }
.uns-n { fill: #fff; stroke: var(--navy); stroke-width: 1.2; }
.uns-l { stroke: var(--teal-mid); stroke-width: 2; stroke-dasharray: 5 4; }
.uns-d { fill: var(--cyan); }
.dia-fig { margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 24px; }
.compare { border-top: 2px solid var(--navy); }
.cmp-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.cmp-row .rl { font: 600 14px/1.3 var(--sans); color: var(--navy); }
.cmp-cell .tag { display: block; font: 600 12px/1.2 var(--sans); color: var(--ink-mute); margin-bottom: 6px; }
.cmp-cell.ai .tag { color: var(--teal-deep); }
.cmp-cell p { color: var(--ink-soft); font-size: 15px; }
.cmp-cell.ai p { color: var(--ink); }
.phases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.phases > li { padding: 28px 28px 28px 0; border-right: 1px solid var(--rule); }
.phases > li + li { padding-left: 28px; }
.phases > li:last-child { border-right: 0; }
.ph-n { font: 600 13px/1 var(--sans); color: var(--teal-deep); }
.phases h3 { margin-top: 10px; font-size: 1.3rem; }
.ph-sub { font: 600 1rem/1.3 var(--display); color: var(--navy); margin-top: 4px; }
.phases p { color: var(--ink-soft); font-size: 15px; margin-top: 10px; }
.phases .ph-end { color: var(--ink); font-weight: 500; padding-top: 10px; border-top: 1px dashed #b9cbd6; }
.playbook { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.playbook li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.playbook .pn { font: 600 14px/1 var(--sans); color: var(--ink-mute); }
.playbook .pt { font: 600 1.05rem/1.35 var(--display); color: var(--ink-mute); }
.playbook a.pt { color: var(--navy); }
.playbook .soon { font-size: 13px; color: var(--ink-mute); }
.notes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-mute); }
.notes ol { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.notes a { word-break: break-all; }

/* Quality page */
.qa-pins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.qa-pins li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
.qa-pins b, .zpin { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/26px var(--sans); text-align: center; }
.zpin { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
.qa-pins h3 { font-size: 1.1rem; }
.qa-pins p { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.auto { background: var(--navy); color: #fff; }
.auto h2, .auto h3 { color: #fff; }
.auto-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.auto p { color: #d9eef8; }
.auto .auto-lede { font: 500 1.15rem/1.5 var(--sans); color: #fff; margin-top: 14px; }
.auto .btn-row { margin-top: 28px; }
.auto .btn-primary { background: #fff; color: var(--navy); border-color: #fff; }
.auto .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.auto-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.auto-table th, .auto-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid rgba(179,232,247,.22); vertical-align: top; }
.auto-table thead th { font: 600 13px/1.2 var(--sans); color: var(--cyan-light); }
.auto-table tbody th { font-weight: 600; color: #fff; width: 30%; }
.auto-table td { color: #cfe6f3; }
.auto-table td:last-child { color: #fff; }
.bottom-line { margin-top: 28px; padding: 22px; border: 1px solid rgba(179,232,247,.35); border-radius: var(--r-lg); }
.bottom-line h3 { font-size: 1.05rem; }
.bottom-line p { margin-top: 8px; }
.bottom-line .fine { font-size: 13px; color: #a9c6d6; }
.art-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.art-list li { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
.art-list a { font: 600 1.1rem/1.35 var(--display); color: var(--navy); }
.art-list p { color: var(--ink-soft); font-size: 15px; }
.case-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.case-card { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.case-card h3 { font-size: 1.2rem; }
.case-card p { color: var(--ink-soft); font-size: 15px; }
.case-card .text-link { margin-top: auto; }

@media (max-width: 1000px) {
  .hub-hero, .story-grid, .roi-head, .roi-grid, .sec-head, .split, .res-cards, .fit, .auto-grid, .seen, .versus, .case-cards, .blind { grid-template-columns: minmax(0, 1fr); }
  .results, .results-4, .trio, .flags, .stats, .phases { grid-template-columns: minmax(0, 1fr); }
  .results .res-fig { grid-row: auto; }
  .phases > li, .phases > li + li { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .prob { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .prob .sol { padding-left: 16px; }
  .prob-art { max-width: 180px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .waterline { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .band-text { columns: 1; }
  .closer { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
  .art-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .qa-pins { grid-template-columns: minmax(0, 1fr); }
  .auto-table tbody th { width: auto; }
  .zlabel { font-size: 10.5px; padding: 4px 6px; }
}
@media (max-width: 560px) {
  .auto-table thead { display: none; }
  .auto-table tr { display: block; padding: 12px 0; border-bottom: 1px solid rgba(179,232,247,.22); }
  .auto-table th, .auto-table td { display: block; border: 0; padding: 2px 0; }
  .auto-table td::before { content: attr(data-h); display: block; font-size: 12px; color: var(--cyan-light); }
  .zlabel.minor { display: none; }
}
.step-own h3::before { display: none; }
.step-own .sn { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 13px/34px var(--sans); text-align: center; flex: none; }
#pb-h + .lede { margin-top: 14px; }
.playbook a.pt { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.playbook .pt:not(a) { color: var(--ink); }
.auto .btn-primary:hover { background: var(--cyan-light); border-color: var(--cyan-light); color: var(--navy); }
.auto .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Skills sweep 2026-10-29 (see NOTES.md, "Skills sweep") ── */
@keyframes sweep-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sweep-in { animation: sweep-panel-in 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: reduce) { .sweep-in { animation: none; } }

/* Phase B: 8px small corner; content buttons 48px, 14px 24px (the compact nav CTA keeps its size) */
:root { --r: 8px; }
.btn { border-radius: 8px; }
.btn:not(.nav-cta) { padding: 14px 24px; min-height: 48px; }
/* Shift figure: transform-driven playhead and masks */
.srow .mask { width: 100%; transform-origin: right center; transform: scaleX(1); }
/* Pins: 44px touch target around the 22-26px dot */
.pin::after { inset: -11px; }
/* Zone close-up settles in once */
.zoom-fig.zoom-armed > svg { opacity: 0; transform: scale(0.96); transform-origin: 50% 60%; }
.zoom-fig.zoom-in > svg { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
/* Sideways-scrolling diagram on phones: edge fade while more is off-screen */
@media (max-width: 760px) {
  .cn-fig.more { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
/* Touch: tab and radio controls at least 44px */
@media (pointer: coarse) { [role="tab"], .reasons [role="radio"] { min-height: 44px; } .nav-toggle { min-width: 44px; min-height: 44px; } }

/* Legibility floor 2026-10-29: a drawing that keeps its minimum width scrolls inside its frame */
.legi-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; contain: inline-size; min-width: 0; max-width: 100%; }
.legi-scroll > svg { max-width: none; }
.sr-only { font-size: 12px; }
/* Legibility floor: small labels at 12px or more at every width */
.hub-cases b, .cnum { font-size: 12px; }
.map-pins .pin span { font-size: max(12px, 1em); }
.line-tags span, .shift-axis { font-size: 12px; }
@media (max-width: 760px) { .zlabel { font-size: 12px; } }
/* Legibility floor, phones: each chain step's drawing sits above its text at a readable size instead of in a 132px column */
@media (max-width: 560px) {
  .cstep { grid-template-columns: 1fr; }
  .cvis, .cvis-flat { grid-row: auto; height: auto; max-width: 300px; margin-bottom: 12px; }
  .cvis svg { width: 100%; max-height: 170px; }
  .cvis-flat svg { max-height: none; }
}

/* Phone redraws 2026-10-29 (PHONE-REDRAW-BRIEF.md, LEGIBILITY.md): under 640px a narrow redraw of each
   wide drawing replaces it, stacked top to bottom, so no drawing scrolls sideways or shrinks. Wide drawings unchanged above 640px. */
svg.rd-n { display: none; }
@media (max-width: 639.98px) {
  svg.rd-w { display: none !important; }
  svg.rd-n { display: block; width: 100%; height: auto; max-width: 100%; min-width: 0; }
  .rd-n .c-s, .rd-n .c-bn { font-size: 13px; }
}
@media (max-width: 639.98px) { .rd-n .v-t, .rd-n .v-sl { font-size: 13px; } }

/* ---------- Pair A (3 Nov): the P&L route. Production-floor data runs up through the data layer to a P&L screen in the front office.
   Only the production floor (and the floor screens) feed it; the dock and inspection have no route. Prefix plr-. ---------- */
svg .plr { pointer-events: none; }
svg .plr-glow { fill: none; stroke: #b3e8f7; stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
svg .plr-flow { fill: none; stroke: #00aee6; stroke-width: 2; stroke-dasharray: 7 6; }
svg .plr-node { fill: #fff; stroke: #027aa2; stroke-width: 1.2; }
svg .plr-axis { stroke: #4f5f69; stroke-width: 1; vector-effect: none; }
svg .plr-rev { fill: #b3e8f7; stroke: #0391bf; stroke-width: .6; vector-effect: none; }
svg .plr-cost { fill: #102d7b; }
svg .plr-cost-real { transform-box: fill-box; transform-origin: bottom; transition: transform .7s var(--ease-io); }
svg .plr-tick { stroke: #00aee6; stroke-width: 1.6; opacity: 0; }
@keyframes plr-run { to { stroke-dashoffset: -26; } }
@keyframes plr-rise { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

.map .plr, .map .plr-screen { transition: opacity .28s ease; }
.map .plr-route { opacity: .2; transition: opacity .28s ease; }
.map[data-active="ai"] .plr-route, .map[data-active="office"] .plr-route { opacity: .55; }
.map[data-active] .plr-screen { opacity: .62; }
.map[data-active="ops"] .plr-screen, .map[data-active="office"] .plr-screen { opacity: 1; }
.map[data-active="ops"] .plr-route { opacity: 1; }
.map[data-active="ops"] .plr-glow { opacity: .8; }
.map[data-active="ops"] .plr-flow { animation: plr-run 1.1s linear infinite; }
.map[data-active="ops"] .plr-tick { animation: plr-rise 1.8s var(--ease-out) var(--d, 0s) infinite; }
.map[data-active="ops"] .plr-cost-real { transform: scaleY(1.6); }
.map[data-active="ops"] .plant .andon .screen { stroke: #00aee6; stroke-width: 1.4; }
.mlabel-pl { transform: translate(0, -50%); }
.map[data-active="ops"] .mlabel-pl { color: #fff; background: var(--navy); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .map[data-active="ops"] .plr-flow, .map[data-active="ops"] .plr-tick { animation: none; }
  .map[data-active="ops"] .plr-tick { opacity: 1; }
}
/* the chain's floor line starts at the production floor: the dock step sits beside it, off the line to the P&L */
.chain .chain-steps::before { left: 37.5%; }

/* ---------- Pair A: floor screens (from option 5's floor board), drawn in option 1's iso. Prefix fs-.
   Status colours stay option 1's stack-light colours so the screen and the lights read as one system. ---------- */
svg .mx-face { fill: #fff; stroke: #102d7b; stroke-width: .6; }
svg .mx-scr.ft { fill: #2c4a94; stroke: #102d7b; } svg .mx-scr.fl, svg .mx-scr.fr { fill: #102d7b; stroke: #102d7b; }
svg .fs-scr.ft { fill: #2c4a94; stroke: #102d7b; } svg .fs-scr.fl, svg .fs-scr.fr { fill: #102d7b; stroke: #102d7b; }
svg .fs-face { fill: #0b2263; stroke: none; }
svg .fs-head { fill: #1d3d8c; stroke: none; }
svg .fs-glyph { fill: none; stroke: #b3e8f7; stroke-width: .6; } svg .fs-glyph.on { fill: #00aee6; stroke: none; }
svg .fs-tile { fill: #183a8a; stroke: none; }
svg .fs-band { stroke: none; transition: fill .25s ease; }
svg .fs-track { fill: rgba(179,232,247,.22); stroke: none; }
svg .fs-meter { fill: #6fd3f2; stroke: none; transition: fill .25s ease; }
svg .fs-t.s-run .fs-band { fill: #00aee6; }
svg .fs-t.s-idle .fs-band { fill: #aab5bc; } svg .fs-t.s-idle .fs-meter { fill: #aab5bc; }
svg .fs-t.s-micro .fs-band { fill: #fff; } svg .fs-t.s-micro .fs-tile { fill: #2c4a94; }
svg .fs-leg.fl { fill: #102d7b; stroke: #102d7b; } svg .fs-leg.fr { fill: #2c3e47; stroke: #102d7b; }
svg .fs-foot.ft { fill: #c9d6df; stroke-width: .5; }

/* hero: the route from the floor screen to the P&L screen always runs */
.line-fig .plr-glow { opacity: .8; }
.line-fig .plr-flow { animation: plr-run 1.1s linear infinite; }
.line-fig .plr-tick { animation: plr-rise 2.2s var(--ease-out) var(--d, 0s) infinite; }
.line-fig .plr-cost-real { transition: none; }
.line-tags .fs-tag, .fs-tag { position: absolute; transform: translate(-100%, -50%); font: 600 12px/1 var(--sans); color: var(--ink-soft); white-space: nowrap; }
.fs-tags { position: absolute; inset: 0; pointer-events: none; }
.fs-pltag { position: absolute; transform: translate(0, -50%); font: 600 12px/1 var(--sans); color: #fff; background: var(--navy); padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.fs-bar { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; border-radius: 8px; padding: 8px 12px; }
.fs-app { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); }
.fs-app svg { width: 16px; height: 16px; }
.fs-bar + .shift { margin-top: 16px; }
@media (max-width: 760px) {
  .line-tags .fs-tag { display: none; }
}
@media (max-width: 480px) { .fs-pltag { transform: translate(-12px, 40px); } }
@media (prefers-reduced-motion: reduce) {
  .line-fig .plr-flow, .line-fig .plr-tick { animation: none; }
  .line-fig .plr-tick { opacity: 1; }
}
/* connect drawing: option 5's feed readouts, and the floor screen leading to the P&L */
.c-f { font: 500 12px var(--sans); fill: var(--ink-soft); }
.fs-pill { stroke: none; } .fs-pill-run { fill: var(--teal-deep); } .fs-pill-idle { fill: #c4cdd3; }
.c-s.fs-pill-t { fill: #fff; }
.cn-fig .plr-glow { opacity: .8; stroke-width: 7; vector-effect: none; }
.cn-fig .plr-flow { stroke-width: 2.5; vector-effect: none; animation: plr-run 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cn-fig .plr-flow { animation: none; } }
/* the floor board's machine names (the shift rows' labels) at the 12px floor */
.srow::before { font-size: 12px; }
@media (max-width: 760px) {
  .shift { padding-left: 66px; }
  .srow::before { left: -66px; width: 62px; font-size: 12px; }
  .playhead { left: 66px; }
}

/* ======================================================================================================
   Phase B pass, 3 Nov 2026 (pb): one grid, one heading scale, one button, one card, one section rhythm.
   Values from the homepage (home/opt-1-the-map) and kc-core.phase-b.css. Layout and spacing only; no copy.
   ====================================================================================================== */
:root {
  --max: 1180px; --gutter: 40px; --section: 96px;
  --r: 8px; --r-lg: 14px; --r-xl: 22px;
  --card-pad: 24px;
  --fs-h1: clamp(2.25rem, 4.4vw, 3.5rem);
  --fs-h2: clamp(2rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.8vw, 1.6rem);   /* feature heading */
  --fs-h3-card: 1.3rem;                     /* card title */
  --fs-h3-item: 1.15rem;                    /* item title in a list or 3-up row */
}
@media (max-width: 860px) { :root { --gutter: 20px; --section: 64px; } }
html { scroll-padding-top: 72px; }

/* Buttons: 48px, 8px corners, 14px 24px, 15px/600/1.2, 1px border; the header button too */
.btn, .nav-cta { justify-content: center; border-width: 1px; border-style: solid; border-radius: 8px; padding: 14px 24px; min-height: 48px; font: 600 15px/1.2 var(--sans); }
.nav-cta { padding: 14px 24px; font-size: 15px; white-space: nowrap; }
.btn-ghost { border-color: var(--teal-deep); }
.auto .btn-ghost, .mach .btn-ghost { border-color: rgba(255,255,255,.6); }

/* Heading scale: same on all five pages (H1 steps one notch under the homepage hero because these titles are sentences) */
h1, .hero-copy h1, .ops-hero h1, .hub-hero h1 { font-size: var(--fs-h1); line-height: 1.05; }
main h2[id], main .cta-band h2, main .closer h2 { font-size: var(--fs-h2); line-height: 1.08; }
main .map-head h2[id] { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
main h2.logos-h { font-size: 14px; }
main h2.sr-only { font-size: 12px; }
main .ai-card h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
main .mach h2 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.hub-panel h3, .cap-text h3 { font-size: var(--fs-h3); }
.blind h3, .step-list h3, .phases h3, .calc h3, .res-card h3, .case-card h3, .steps h3, .q-diff + h3, .sec-solo + h3 { font-size: var(--fs-h3-card); }
.killer h3, .cn-paths h3, .ex-row h3, .story h3, .trio h3, .prob h3, .flags h3, .fit h3, .versus h3, .qa-pins h3, .bottom-line h3,
.gb-sol h3, .gb-quote h3, .sc-story .sc-quote h3, .page-ops .gb-quote h3 { font-size: var(--fs-h3-item); }
main section[aria-labelledby="cs-h"] h3, main section[aria-labelledby="au-h"] h3 { font-size: var(--fs-h3-item); }
main .step-list h3, main .phases h3, main .steps h3 { font-size: var(--fs-h3-card); }

/* Small corners: 8px (tabs, chips, labels); cards 14px; bands 22px */
.hub-tabs { border-radius: 12px; }
.hub-tabs button, .reasons button, .tmi span, .calc-out li, .hub-cases a, .q-diff thead th:last-child, .locator { border-radius: 8px; }
.mlabel, .zlabel, .fs-pltag, .page-ops .gb-lab, .map-labels span { border-radius: 8px; }
.cn-paths li, .flags li, .res-card, .calc, .case-card, .fit > div, .versus > div, .gb-sol, .gb-results li, .sc-results li, .hub-panel { border-radius: 14px; }
.q-diff td:last-child, .q-diff tbody tr:last-child td:last-child { border-radius: 8px; }
.cta-band, .closer, .ai-card { border-radius: 22px; }

/* Small cards: 24px padding, equal heights in a row, content top-aligned */
.cn-paths li, .flags li, .res-card, .calc, .case-card, .fit > div, .versus > div, .gb-sol, .page-ops .gb-sol, .gb-results li, .page-ops .gb-results li,
.sc-results li, .hub-panel { padding: var(--card-pad); }
.fit > div { border: 1px solid var(--rule); }
.cn-paths, .flags, .res-cards, .case-cards, .fit, .versus, .calc-grid, .gb-results, .sc-results { align-items: stretch; }
.res-card .btn, .res-card ul + .btn, .calc .btn, .calc-out + .btn, .case-card .btn { margin-top: auto; }
.res-card ul { margin-bottom: 16px; }
.calc-out { margin-bottom: 16px; }
.sc-results li { padding: var(--card-pad); }
@media (max-width: 1000px) { .sc-results li { padding: 20px; } }
@media (max-width: 560px) { .sc-results li { flex-direction: column; align-items: flex-start; padding: var(--card-pad); } .sc-ico { width: 100%; height: 96px; } }

/* Section rhythm: 96px desktop, 64px phone. Two plain sections in a row share one gap instead of doubling it. */
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section:not(.tint):not(.auto) + .section:not(.tint):not(.auto) { padding-top: 0; }
.chain.section, .cases.section { padding-top: var(--section); padding-bottom: var(--section); }
.hero { padding-top: 36px; padding-bottom: 0; }
.mapsec { padding-top: 48px; padding-bottom: 64px; }
.logos { padding-top: 0; padding-bottom: 64px; }
.ops-hero, .hub-hero { padding-bottom: 64px; }
.manifesto { padding-top: 64px; padding-bottom: 64px; }
.mach { padding-top: 96px; padding-bottom: 96px; }
.end-cta { padding-bottom: var(--section); }
.ai-next { padding-top: 0; padding-bottom: 0; margin-bottom: var(--section); }
.section.tint + .ai-next, .manifesto + .ai-next { margin-top: 64px; }
.ai-next + .section:not(.tint) { padding-top: 0; }
@media (max-width: 860px) {
  .mapsec, .logos, .ops-hero, .hub-hero { padding-bottom: 48px; }
  .manifesto { padding-top: 48px; padding-bottom: 48px; }
  .mach { padding-top: 64px; padding-bottom: 64px; }
  .section.tint + .ai-next, .manifesto + .ai-next { margin-top: 48px; }
}

/* Band copy: a gap under the heading, button centred against the copy */
.cta-band h2 + p, .closer h2 + p { margin-top: 12px; }
.cta-band, .closer { align-items: center; }

/* Operations hero: wider copy column so the two buttons sit on one row */
@media (min-width: 1081px) { .ops-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.ops-hero h1 { max-width: 15ch; }
@media (max-width: 560px) { .calc .btn, .res-card .btn, .case-card .btn, .closer .btn, .cta-band .btn { width: 100%; } }
.btn-row { align-items: stretch; }
@media (max-width: 560px) { .hero .btn-row .btn, .hub-hero .btn-row .btn, .ops-hero .btn-row .btn, .auto .btn-row .btn { flex: 1 1 100%; } }

/* Section heads: heading and its side note share a top line (same fix as the Operations heads) */
.sec-head { align-items: start; }
.sec-head .lede, .sec-head > p { padding-top: .45em; margin: 0; }
@media (max-width: 1000px) { .sec-head .lede, .sec-head > p { padding-top: 0; } }
.cta-band > .btn-row { justify-self: end; }
@media (max-width: 860px) { .cta-band > .btn-row { justify-self: stretch; } }

/* ======================================================================================================
   Pair A visual pass, 3 Nov 2026 (vz-): drawings for the text-heavy sections, all in option 1's iso line.
   Labels are HTML chips over the drawing (12px floor at every width). Copy untouched.
   ====================================================================================================== */
.vz { position: relative; width: 100%; margin: 0 auto; }
.vz svg { width: 100%; height: auto; overflow: visible; }
.vz-tags { position: absolute; inset: 0; pointer-events: none; }
.vz-l { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 600 12px/1 var(--sans); color: var(--ink-soft);
  background: rgba(255,255,255,.92); padding: 4px 7px; border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); }
.vz-l.a-l { transform: translate(0, -50%); }
.vz-l.a-r { transform: translate(-100%, -50%); }
.vz-l.a-t { transform: translate(-50%, 0); }
.vz-l.a-b { transform: translate(-50%, -100%); }
.vz-l.k { color: #fff; background: var(--navy); box-shadow: none; }
.vz-l.c { color: var(--teal-deep); background: #fff; box-shadow: 0 0 0 1px var(--teal-mid); }
.vz-l.g { color: var(--ink-mute); background: #fff; box-shadow: 0 0 0 1px #c4cdd3; }
.vz-l.bare { background: none; box-shadow: none; padding: 0; }
.vz-l.ax { background: none; box-shadow: none; padding: 0; color: var(--ink-mute); font-weight: 500; }
.vz-l.big { font: 700 13px/1 var(--sans); }

svg .vz-ghost { fill: rgba(242,250,252,.6); stroke: #027aa2; stroke-width: 1; stroke-dasharray: 3 3; }
svg .vz-ghost-e { stroke: #027aa2; stroke-width: .8; stroke-dasharray: 2 3; opacity: .7; }
svg .vz-earth { fill: #f2fafc; stroke: none; }
svg .vz-wl { stroke: #102d7b; stroke-width: 1.4; }
svg .vz-wl-d { stroke: #0391bf; stroke-width: 1; stroke-dasharray: 4 3; }
svg .vz-ax { stroke: #c4cdd3; stroke-width: 1; }
svg .vz-tick { stroke: #8aa0ad; stroke-width: 1; }
svg .vz-now { stroke: #102d7b; stroke-width: 1.4; }
svg .vz-down { fill: #dde3e9; stroke: none; }
svg .vz-hatch { fill: url(#vz-hatch); stroke: #aab5bc; stroke-width: .8; }
svg .vz-route { fill: none; stroke: #00aee6; stroke-width: 2; }
svg .vz-flow { fill: none; stroke: #00aee6; stroke-width: 2; stroke-dasharray: 7 6; }
svg .vz-glow { fill: none; stroke: #b3e8f7; stroke-width: 6; stroke-linecap: round; opacity: .8; }
svg .vz-grey { fill: none; stroke: #8aa0ad; stroke-width: 1.6; stroke-dasharray: 4 4; }
svg .vz-wave { fill: none; stroke: #0391bf; stroke-width: 1.4; }
svg .vz-wave-g { fill: none; stroke: #aab5bc; stroke-width: 1.4; }
svg .vz-dot { fill: #00aee6; stroke: #fff; stroke-width: 1.2; }
svg .vz-dot-g { fill: #aab5bc; stroke: #fff; stroke-width: 1.2; }
svg .vz-row { stroke: #6fd3f2; stroke-width: 1.6; }
svg .vz-row-g { stroke: #aab5bc; stroke-width: 1.6; }
svg .vz-cell { fill: #fff; stroke: #8aa0ad; stroke-width: .7; }
svg .vz-cell.on { fill: #b3e8f7; stroke: #0391bf; }
svg .vz-cell.off { fill: #dde3e9; }
svg .vz-card.ft { fill: #fff; } svg .vz-card.fl { fill: #eef4f8; } svg .vz-card.fr { fill: #d6e4ee; }
svg .vz-arrow { fill: #00aee6; stroke: none; }
svg .vz-arrow-g { fill: #8aa0ad; stroke: none; }

/* motion: the data route flows while its drawing is on screen; nothing else moves, and text never waits */
.vz-on svg .vz-flow { animation: plr-run 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .vz-on svg .vz-flow { animation: none; } }

/* variants: wide drawing above 1000px, narrow redraw at 1000 and under */
.vz-n { display: none; }
@media (max-width: 1000px) { .vz-w { display: none; } .vz-n { display: block; } }
svg .vz-run { fill: #00aee6; stroke: none; }
svg .vz-brace { stroke: #8aa0ad; stroke-width: 1; }
svg .vz-ph { fill: #fff; stroke: #102d7b; stroke-width: 1.2; } svg .vz-ph-l { stroke: #102d7b; stroke-width: 1.2; }
.vz-n6 { display: none; }
@media (max-width: 639.98px) { .vz-w6 { display: none; } .vz-n6 { display: block; } }
svg .vz-stratum.fl, svg .vz-stratum.fr, svg .vz-stratum.ft { stroke: #0391bf; stroke-width: .9; stroke-dasharray: 3 3; }
svg .vz-stratum.ft { fill: #e3f5fb; } svg .vz-stratum.fl { fill: #f6fbfd; } svg .vz-stratum.fr { fill: #e2eef4; }
svg .vz-doorway { fill: #2c3e47; stroke: #102d7b; stroke-width: .7; }
svg .vz-guard { fill: none; stroke: #102d7b; stroke-width: 1.2; stroke-dasharray: 6 4; }
.vz-phase, .vz-hitl { margin: 0 0 16px; }
svg .vz-down-f { fill: #aab5bc; stroke: none; }
svg .vz-moved { fill: #b3e8f7; stroke: #00aee6; stroke-width: 1; }
svg .vz-mark { stroke: #ffffff; stroke-width: 1.2; stroke-dasharray: 3 2; }
.vz-glyph { width: 132px; height: 64px; margin: 0 0 12px; }
.vz-glyph svg { width: 100%; height: 100%; }

/* ---- placement ---- */
figure.vz-seen-fig, figure.vz-card-fig, figure.vz-col-fig, figure.vz-li-fig { margin: 0; }
/* losses: the strata sit beside the two paragraphs that name what is below the line */
.seen .vz-seen-fig { margin: 8px 0 24px; }
.seen .vz-seen-fig .vz { max-width: 440px; }
@media (min-width: 1001px) {
  .seen .vz-seen-fig { grid-column: 1; grid-row: 3 / span 2; margin: 0; align-self: start; }
  .seen .vz-seen-fig ~ div { grid-column: 2; }
  .seen .vz-seen-fig ~ div + div { margin-top: 12px; }
}
/* 2 AM: each card opens with its own night, on the same clock */
.versus .vz-card-fig { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px dashed #c9d6df; }
/* talent: each column opens with its drawing */
.vz-col-fig { margin: 0 0 20px; }
.vz-col-fig .vz { max-width: 440px; margin: 0; }
/* evolution: a drawn header row over the two columns */
.cmp-row.vz-evo-row { padding: 32px 0 20px; }
.vz-evo-row .vz { max-width: 330px; margin: 0; }
@media (max-width: 1000px) { .vz-evo-row .rl { display: none; } .vz-evo-row .vz { max-width: 360px; } }
/* phases and act-or-ask: each step carries its stage of the same scene */
.phases .vz-li-fig .vz, .cn-paths .vz-li-fig .vz { margin: 0 0 18px; }
.phases .vz-li-fig .vz { max-width: 320px; }
.cn-paths .vz-li-fig .vz { max-width: 300px; }
/* excel: the spreadsheet beside the floor board */
.ex-row.vz-ex-row > div { padding: 20px 24px 8px; display: flex; align-items: flex-end; justify-content: center; }
.vz-ex-row .vz { max-width: 340px; }
/* built, not bought: core systems on one thread down to the edge */
.vz-built-fig { margin: 28px 0 0; }
.vz-built-fig .vz { max-width: 420px; margin: 0; }

/* ======================================================================================================
   Floor cut, 3 Nov 2026 (cut-): "the number you can see" / "the real damage sits below it" as one drawing.
   The navy floor line runs the full width. Above it: the two headline-number paragraphs and the machines.
   Below it, on the earth tint: the five losses as strata, and the paragraphs that name them.
   ====================================================================================================== */
/* 4 Nov 2026 clean-up: one grid. Row 1 is the two headline paragraphs side by side (same columns as .cut-after).
   Row 2 is the floor: "That's the number you can see." and the machines share the navy line, which is the top edge
   of the ground tint. The ground is one tint with one bleed (--cut-bleed) on both sides; the line, the tint and the
   strata column all end on that edge. Above the line everything keeps the text columns' edges. Strata: equal bands, chips on the column's left edge, dashed seams only. */
.seen.seen-cut { display: block; --cut-bleed: 24px; }
.cut-up, .cut-down { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; }
.cut-up { grid-template-areas: "a b" "h fig"; align-items: start; }
.cut-up:not(:has(> .cut-b)) { grid-template-areas: "a fig" "h fig"; }
.cut-up .cut-a { grid-area: a; } .cut-up .cut-b { grid-area: b; }
.cut-up .cut-h { grid-area: h; align-self: end; padding: 28px 0 14px; }
.cut-up .cut-fig { grid-area: fig; align-self: end; margin: 24px 0 0; }
.cut-fig-up .vz { max-width: none; margin: 0; }
.cut-fig-up svg { display: block; }
.cut-down { grid-template-areas: "h fig" "b fig"; grid-template-rows: auto 1fr; margin: 0; padding: 0; position: relative; isolation: isolate; }
.cut-down::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--cut-bleed)); right: calc(-1 * var(--cut-bleed));
  background: var(--mist); border-top: 2px solid var(--navy); z-index: -1; }
.cut-down .cut-h { grid-area: h; padding: 16px 0 16px; }
.cut-down .cut-b { grid-area: b; padding-bottom: 32px; }
.cut-down .cut-fig { grid-area: fig; align-self: stretch; margin: 2px calc(-1 * var(--cut-bleed)) 0 0; display: flex; }
.cut-h { font: 600 1.15rem/1.35 var(--display); color: var(--navy); }
.seen-cut p:not(.cut-h) { color: var(--ink-soft); }
.seen-cut .cut-b p + p { margin-top: 12px; }
.cut-fig { margin: 0; }
.cut-strata { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-auto-rows: minmax(48px, 1fr); }
.cut-strata li { display: flex; align-items: center; align-content: center; padding: 0 var(--cut-bleed) 0 0; }
.cut-strata li + li { border-top: 1px dashed var(--teal-mid); }
.cut-strata .vz-l { position: static; transform: none; }
.cut-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; padding-top: 32px; }
@media (max-width: 1000px) {
  .seen.seen-cut { --cut-bleed: var(--gutter); }
  .page-ai .seen.seen-cut > div:not(.waterline) + div:not(.waterline) { margin-top: 0; } /* the stacked-page 14px rhythm would lift the machines off the floor */
  .cut-up, .cut-down, .cut-after { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .cut-up, .cut-up:not(:has(> .cut-b)) { grid-template-areas: "a" "b" "h" "fig"; }
  .cut-up .cut-b { margin-top: 12px; }
  .cut-up .cut-h { padding-top: 24px; }
  .cut-up .cut-fig { margin: 0; }
  .cut-fig-up .vz { max-width: none; }
  .cut-down { grid-template-areas: "h" "fig" "b"; grid-template-rows: auto; }
  .cut-down .cut-fig { margin: 0 calc(-1 * var(--cut-bleed)) 20px; }
  .cut-strata { grid-auto-rows: minmax(44px, 1fr); border-bottom: 1px dashed var(--teal-mid); }
  .cut-strata li:first-child { border-top: 1px dashed var(--teal-mid); }
  .cut-strata li { padding: 0 var(--cut-bleed); }
  .cut-after { row-gap: 12px; }
}
/* 4 Nov 2026 ledge (Max: "make it like the corner of a ledge and the blue is the side ... top and side of a cube").
   The floor is one solid slab. Top face: a light surface receding up-right at 30deg (parallel to the machines' right
   faces), drawn by .cut-up::before as a skewX(-60deg) box so its edges stay true at any width. The navy line is the
   slab's front top edge. Front face: the blue ground (.cut-down::before), a plain rectangle so the strata keep a
   straight grid. Right side face: .cut-down::after, a skewY(-30deg) box, with the strata seams carried round the
   corner by li::after. The slab runs off the left of the page and ends in one visible corner on the right.
   --ledge-s is the top face's sideways shift (h x tan 60). Fills follow the machines: top, front, side. */
.seen.seen-cut { --ledge-h: 64px; --ledge-s: calc(var(--ledge-h) * 1.7320508);
  --ledge-top: #f7fbfd; --ledge-front: #eef4f8; --ledge-side: #d6e4ee; --ledge-off: calc(50% - 50vw - var(--ledge-s)); }
.cut-up { position: relative; isolation: isolate; }
.cut-up::before { content: ""; position: absolute; z-index: -1; bottom: 0; height: var(--ledge-h);
  left: var(--ledge-off); right: calc(var(--ledge-s) - var(--cut-bleed));
  background: var(--ledge-top); border-top: 1px solid var(--navy); border-right: 2px solid var(--navy);
  transform: skewX(-60deg); transform-origin: 0 100%; }
.cut-up .cut-fig { margin-right: calc(var(--ledge-s) - var(--cut-bleed)); padding-bottom: 10px; }
.cut-down::before { left: var(--ledge-off); right: calc(var(--ledge-s) - var(--cut-bleed));
  background: var(--ledge-front); border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
.cut-down::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: calc(-1 * var(--cut-bleed)); width: var(--ledge-s);
  background: var(--ledge-side); border-right: 1px solid var(--navy); border-bottom: 1px solid var(--navy);
  transform: skewY(-30deg); transform-origin: 0 0; }
.cut-down .cut-fig { margin-right: calc(var(--ledge-s) - var(--cut-bleed)); }
.cut-strata li { position: relative; }
.cut-strata li + li::after { content: ""; position: absolute; top: -1px; left: 100%; width: var(--ledge-s);
  border-top: 1px dashed var(--teal-mid); transform: skewY(-30deg); transform-origin: 0 0; }
@media (max-width: 1000px) {
  /* phones and tablets: top face plus front face, both edge to edge; no side face */
  .seen.seen-cut { --ledge-h: calc(10vw + 12px); } /* tracks the machines, which scale with the column */
  .cut-up::before { left: calc(-1 * var(--cut-bleed)); right: calc(-1 * var(--cut-bleed)); border-right: 0; transform: none; }
  .cut-up .cut-fig { margin-right: 0; padding-bottom: 8px; }
  .cut-down::before { left: calc(-1 * var(--cut-bleed)); right: calc(-1 * var(--cut-bleed)); border-right: 0; }
  .cut-down::after, .cut-strata li + li::after { content: none; }
  .cut-down .cut-fig { margin: 0 calc(-1 * var(--cut-bleed)) 20px; }
}

/* ======================================================================================================
   Short-copy versions, 3 Nov 2026 (sh-): ai-short.html and operations-short.html only.
   Paragraphs folded into labelled drawings. Nothing here is used by the full-length pages.
   ====================================================================================================== */
/* floor cut with captions: each stratum names the loss and says why in the original's words */
.cut-strata-cap li { padding-top: 10px; padding-bottom: 10px; gap: 6px 12px; flex-wrap: wrap; }
.cut-cap { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
/* 2 AM: the card's story as steps under its own timeline */
.tl-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: tl; }
.tl-steps li { position: relative; padding: 0 0 12px 34px; color: var(--ink-soft); counter-increment: tl; }
.tl-steps li::before { content: counter(tl); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  font: 600 12px/22px var(--sans); text-align: center; color: var(--ink-mute); background: #fff; box-shadow: 0 0 0 1px #aab5bc; }
.tl-steps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; border-left: 1px dashed #aab5bc; }
.tl-steps.tl-on li::before { color: #fff; background: var(--teal-deep); box-shadow: none; }
.tl-steps.tl-on li:not(:last-child)::after { border-left: 2px solid var(--cyan); }
.tl-steps li:last-child { font-weight: 600; color: var(--navy); }
/* MES: what the log does and does not do */
.mes-log { margin: 20px 0; padding: 16px 18px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); max-width: 440px; }
.mes-log .ml-h { font: 600 14px/1.4 var(--sans); color: var(--navy); margin-bottom: 8px; }
.mes-log ul { list-style: none; margin: 0; padding: 0; }
.mes-log li { position: relative; padding: 6px 0 6px 28px; font-size: 15px; line-height: 1.4; border-top: 1px dashed var(--rule); }
.mes-log li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 14px; height: 14px; border-radius: 3px; }
.mes-log .ml-y { color: var(--ink-soft); }
.mes-log .ml-y::before { background: var(--navy); }
.mes-log .ml-n { color: var(--ink-mute); }
.mes-log .ml-n::before { border: 1.5px dashed #8aa0ad; }
.mes-log .ml-f { margin-top: 8px; padding-top: 10px; border-top: 2px solid var(--navy); font: 600 15px/1.4 var(--display); color: var(--navy); }
/* talent: 3.8 million positions, nearly half unfilled (drawn at just under half; the source gives no exact share) */
.tal-bar { margin: 20px 0; max-width: 460px; }
.tal-bar .tb-v { font: 700 1.75rem/1.1 var(--display); color: var(--navy); }
.tal-bar .tb-l { font-size: 15px; color: var(--ink-soft); margin: 4px 0 10px; }
.tb-track { position: relative; height: 18px; background: var(--navy); border-radius: 3px; overflow: hidden; }
.tb-un { position: absolute; top: 0; bottom: 0; right: 0; width: 47%; background: repeating-linear-gradient(135deg, #fff 0 4px, #c4cdd3 4px 6px); border-left: 2px solid #fff; }
.tb-k { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; font: 600 13px/1.3 var(--sans); color: var(--ink-mute); }
.tb-sw { width: 14px; height: 14px; border-radius: 2px; background: repeating-linear-gradient(135deg, #fff 0 3px, #8aa0ad 3px 5px); box-shadow: 0 0 0 1px #aab5bc; flex: none; }
/* act-or-ask: the recommendation's four parts */
.rec-card { list-style: none; margin: 14px 0 0; padding: 4px 14px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); counter-reset: rc; }
.rec-card p { position: relative; padding: 8px 0 8px 30px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); counter-increment: rc; }
.rec-card p + p { border-top: 1px dashed var(--rule); }
.rec-card p::before { content: counter(rc); position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; font: 600 12px/20px var(--sans); text-align: center; color: #fff; background: var(--teal-deep); }
.cn-paths .rec-card p { margin-top: 0; font-size: 14px; }
/* operations-short: the whole work center, machine plus human context, into the KPIs */
.wwc { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 10px; align-items: stretch; }
.wwc-in, .wwc-out { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; }
.wwc-h { font: 600 13px/1.3 var(--sans); color: var(--navy); margin-bottom: 6px; }
.wwc p:not(.wwc-h), .wwc li { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.wwc ul { list-style: none; margin: 0; padding: 0; }
.wwc-in li + li { margin-top: 4px; }
.wwc-plus { align-self: center; font: 600 20px/1 var(--display); color: var(--teal-deep); }
.wwc-out { grid-column: 1 / -1; position: relative; border-color: var(--teal-mid); background: var(--slate); }
.wwc-out::before { content: ""; position: absolute; left: 50%; top: -11px; width: 2px; height: 10px; background: var(--cyan); }
.wwc-out ul { display: flex; flex-wrap: wrap; gap: 6px; }
.wwc-out li { font: 600 13px/1 var(--sans); color: var(--teal-deep); background: #fff; box-shadow: 0 0 0 1px var(--teal-mid); border-radius: 6px; padding: 6px 9px; }
@media (max-width: 480px) { .wwc { grid-template-columns: minmax(0, 1fr); } .wwc-plus { justify-self: center; } }
/* operations-short: 10% of your volume, marked on the whole */
.vol-bar { margin: 14px 0 20px; max-width: 460px; }
.vb-track { position: relative; height: 16px; background: var(--cyan-light); border-radius: 3px; overflow: hidden; }
.vb-loss { position: absolute; top: 0; bottom: 0; right: 0; width: 10%; background: var(--navy); }
.vb-k { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; font: 600 13px/1.3 var(--sans); color: var(--navy); }
.vb-sw { width: 14px; height: 14px; border-radius: 2px; background: var(--navy); flex: none; }

/* ======================================================================================================
   Floor-cut options, 4 Nov 2026 (cx-): "That's the number you can see" redrawn three ways.
   A small inline script after the section adds .cx-on and .cx-1/2/3 to .seen-cut from ?cut=N (?cut=0 = the ledge).
   1 = the P&L: downtime is the one line with a figure; the five losses sit hatched inside other lines.
   2 = one plant, six costs: the stopped machine carries the figure; five losses pinned where they happen.
   3 = measured vs not: one solid segment with its figure, five hatched segments of unknown size.
   Desktop: one grid, headings and text left, drawing right; "That's the number you can see." sits beside the
   visible cost, "The real damage sits below it." beside the hidden ones. Under 1000px it stacks in DOM order.
   ====================================================================================================== */
.cx { display: none; margin: 0; }
.seen-cut.cx-1 .cx-o1, .seen-cut.cx-2 .cx-o2, .seen-cut.cx-3 .cx-o3 { display: block; }
.seen-cut.cx-on .cut-fig { display: none; }
.seen.seen-cut.cx-on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px;
  grid-template-areas: "a b" "hs fu" "hb fd" "body fd" "after after"; grid-template-rows: auto auto auto 1fr auto; }
.seen.seen-cut.cx-on:not(:has(.cut-up > .cut-b)) { grid-template-areas: "a ." "hs fu" "hb fd" "body fd" "after after"; }
.seen.seen-cut.cx-2 { grid-template-areas: "a b" "hs fu" "hb fu" "body fu" "after after"; grid-template-rows: auto auto auto 1fr auto; }
.seen.seen-cut.cx-2:not(:has(.cut-up > .cut-b)) { grid-template-areas: "a ." "hs fu" "hb fu" "body fu" "fd fu" "after after"; grid-template-rows: auto auto auto auto 1fr auto; }
.seen-cut.cx-on > .cut-up, .seen-cut.cx-on > .cut-down { display: contents; }
/* the ledge's faces are pseudo-elements of these two wrappers: off with the wrappers */
.seen-cut.cx-on .cut-up::before, .seen-cut.cx-on .cut-down::before, .seen-cut.cx-on .cut-down::after { content: none; }
.seen-cut.cx-on .cut-up .cut-a { grid-area: a; }
.seen-cut.cx-on .cut-up .cut-b { grid-area: b; }
.seen-cut.cx-on .cut-up .cut-h { grid-area: hs; align-self: end; padding: 0; margin: 40px 0 14px; }
.seen-cut.cx-2 .cut-up .cut-h { align-self: start; margin-bottom: 0; }
.seen-cut.cx-on .cut-down .cut-h { grid-area: hb; align-self: start; padding: 0; margin-top: 14px; }
.seen-cut.cx-3 .cut-down .cut-h { margin-top: 26px; }
.seen-cut.cx-2 .cut-down .cut-h { margin-top: 28px; }
.seen-cut.cx-on .cut-down .cut-b { grid-area: body; padding: 14px 0 0; }
.seen-cut.cx-on .cx-up { grid-area: fu; margin-top: 40px; }
.seen-cut.cx-on .cx-down { grid-area: fd; }
.seen-cut.cx-on .cut-after { grid-area: after; padding-top: 48px; }
.seen-cut.cx-on .cut-h { font-size: 1.25rem; }

/* shared marks: a hidden cost is a dashed chip with a hatch swatch and no figure */
.cx-hid { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 600 12px/1 var(--sans); color: var(--ink-soft);
  background: #fff; padding: 5px 8px 5px 6px; border-radius: 6px; border: 1px dashed #8aa0ad; }
.cx-hid::before { content: ""; width: 12px; height: 12px; border-radius: 2px; flex: none;
  background: repeating-linear-gradient(135deg, #fff 0 2px, #8aa0ad 2px 3.5px); box-shadow: 0 0 0 1px #aab5bc; }
.cx-hc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cx-cap { font-size: 13px; line-height: 1.4; color: var(--ink-mute); }
.cx-fig { font-weight: 700; color: var(--navy); }

/* ---- 1. the P&L: a ledger page, one line with a figure ---- */
.pl { background: #fff; border-left: 1px solid var(--navy); border-right: 1px solid var(--navy); padding: 0 24px; }
.pl-top { border-top: 1px solid var(--navy); border-radius: 6px 6px 0 0; padding-top: 16px; }
.pl-bot { border-bottom: 1px solid var(--navy); border-radius: 0 0 6px 6px; padding-bottom: 8px; }
.pl-t { font: 700 13px/1 var(--display); letter-spacing: .08em; color: var(--navy); padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.pl-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 20px; row-gap: 8px; align-items: center; padding: 14px 0; }
.pl-row + .pl-row { border-top: 1px solid var(--rule); }
.pl-n { font: 600 14px/1.3 var(--sans); color: var(--ink-soft); }
.pl-seen { padding: 16px 12px; margin: 0 -12px; background: var(--cyan-light); border-bottom: 1px solid var(--navy); }
.pl-seen .pl-n { color: var(--navy); font-weight: 700; }
.pl-v { font: 700 17px/1.3 var(--display); color: var(--navy); }
.pl-bar { display: flex; height: 14px; gap: 2px; }
.pl-bar i { flex: 1; background: #dde3e9; border-radius: 2px; }
.pl-bar i.h { flex: 0 0 34px; background: repeating-linear-gradient(135deg, #fff 0 2px, #8aa0ad 2px 3.5px); box-shadow: inset 0 0 0 1px #8aa0ad; }
.pl-hid { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pl-hid:has(.cx-hc) { flex-direction: column; align-items: stretch; gap: 8px; }

/* ---- 2. one plant, six costs ---- */
.cx-plant { max-width: 600px; margin: 34px auto 0; }
.cx-nw { white-space: nowrap; }
svg .s-stop .lamp.ft { fill: #2c3e47; } svg .s-stop .lamp.fl { fill: #102d7b; } svg .s-stop .lamp.fr { fill: #0b1f56; }
svg .cx-pin { stroke: #8aa0ad; stroke-width: 1; stroke-dasharray: 2 2; } svg .cx-pin-dot { fill: #8aa0ad; stroke: none; }
svg .bin.fl { fill: #c9d6df; } svg .bin.fr { fill: #aebfcb; } svg .bin-in { fill: #8aa0ad; stroke: #102d7b; stroke-width: .7; }
.cx-plant .cx-hid { position: absolute; transform: translate(-50%, -50%); }
.cx-plant .cx-hid.a-l { transform: translate(-14px, -50%); }
.cx-meter { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; gap: 4px; padding: 8px 11px;
  background: var(--navy); color: #fff; border-radius: 6px; white-space: nowrap; font: 600 12px/1.2 var(--sans); }
.cx-meter b { font: 700 15px/1.2 var(--display); }
.cx-meter::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--navy); transform: translateX(-50%) rotate(45deg); }
.cx-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font: 600 12px/1.2 var(--sans); color: var(--ink-mute); }
.cx-key span { display: inline-flex; align-items: center; gap: 7px; }
.cx-key-m::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: var(--navy); }
.cx-key-u::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1px dashed #8aa0ad; box-sizing: border-box;
  background: repeating-linear-gradient(135deg, #fff 0 2px, #8aa0ad 2px 3.5px); }
.cx-caps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }

/* ---- 3. measured vs not measured: one column, six equal segments, open at the bottom ---- */
.mt { --mt-w: 72px; --mt-h: 78px; }
.mt-col { list-style: none; margin: 0; padding: 0; }
.mt-col li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: var(--mt-h); box-sizing: border-box; padding: 8px 0 8px calc(var(--mt-w) + 18px); border-top: 1px solid var(--rule); }
.mt-col li::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: var(--mt-w); }
.mt-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-k { font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.mt-on { border-top-color: transparent !important; }
.mt-on::before { background: var(--navy); border-radius: 4px 4px 0 0; top: 0 !important; }
.mt-on .mt-n { font: 600 13px/1.3 var(--sans); color: var(--navy); }
.mt-v { font: 700 17px/1.25 var(--display); color: var(--navy); }
.mt-off li::before { background: repeating-linear-gradient(135deg, #fff 0 3px, #aab5bc 3px 5px); border: 1px dashed #8aa0ad; border-bottom: 0; box-sizing: border-box; }
.mt-off li:first-child { border-top-color: var(--navy); }
.mt-off li:last-child::before { -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.mt-off .mt-n { font: 600 14px/1.3 var(--sans); color: var(--ink-soft); }
.mt-x { font: 500 12px/1.2 var(--sans); color: var(--ink-mute); white-space: nowrap; padding: 4px 7px; border: 1px dashed #aab5bc; border-radius: 5px; }
.seen-cut:has(.mt .cx-cap) .mt { --mt-h: 84px; }

@media (max-width: 1000px) {
  .seen.seen-cut.cx-on, .seen.seen-cut.cx-2 { display: block; }
  .seen-cut.cx-on .cut-up .cut-b { margin-top: 12px; }
  .seen-cut.cx-on .cut-up .cut-h { margin-top: 32px; }
  .seen-cut.cx-on .cx-up { margin-top: 16px; }
  .seen-cut.cx-on .cut-down .cut-h { margin-top: 28px; }
  .seen-cut.cx-1 .cut-down .cut-h, .seen-cut.cx-3 .cut-down .cut-h { margin-bottom: 14px; }
  .seen-cut.cx-on .cut-down .cut-b { padding-top: 16px; }
  .seen-cut.cx-on .cut-after { padding-top: 32px; }
  /* P&L: the page continues across the heading, so the two halves read as one sheet */
  .seen-cut.cx-1 .cut-down .cut-h { margin: 0; padding: 22px 24px 14px; background: #fff; border-left: 1px solid var(--navy); border-right: 1px solid var(--navy); }
  }
@media (max-width: 560px) {
  .cx-plant { margin-top: 60px; }
  .seen-cut:has(.mt .cx-cap) .mt { --mt-h: 108px; }
  .pl { padding-left: 16px; padding-right: 16px; }
  .seen-cut.cx-1 .cut-down .cut-h { padding-left: 16px; padding-right: 16px; }
  .pl-row { grid-template-columns: minmax(0, 1fr); }
  .pl-hid { grid-column: 1; justify-content: flex-start; }
  .pl-seen { margin: 0 -8px; padding: 14px 8px; }
  .mt { --mt-w: 44px; --mt-h: 82px; }
  .mt-col li { padding-left: calc(var(--mt-w) + 14px); grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .mt-x { justify-self: start; }
}

/* ======================================================================================================
   Option 4, 4 Nov 2026 (k4-, m4-): option 2's plant is the picture, option 3's bar is its key.
   The downtime meter and the five dashed chips became markers on the plant: a solid navy dot for the measured
   cost, dashed discs 1-5 for the unmeasured ones. The same markers sit inside the bar's segments.
   Hovering or focusing a bar row (or hovering a marker) lights up its partner; pure CSS (:has), no script.
   Layout (reworked same day, "difficult to know which way to read"): one column, top to bottom, on every width.
   ====================================================================================================== */
.seen-cut.cx-4 .cx-o4 { display: block; }
/* one reading path: the visible cost under its heading, then the hidden-cost text, then the figure as one
   framed panel (plant left, numbered key right), then "None of this ..." closes it. Same order on phones. */
.seen.seen-cut.cx-4 { grid-template-rows: none;
  grid-template-areas: "a b" "hs ." "km ." "hb ." "b1 ." "pn pn" "b2 ." "after after"; }
.seen.seen-cut.cx-4:not(:has(.cut-up > .cut-b)) { grid-template-areas: "a ." "hs ." "km ." "hb ." "b1 ." "pn pn" "b2 ." "after after"; }
.seen-cut.cx-4 .cut-up .cut-h { grid-area: hs; align-self: end; margin: 48px 0 14px; }
.seen-cut.cx-4 .k4-fm { grid-area: km; }
.seen-cut.cx-4 .cut-down .cut-h { grid-area: hb; margin: 40px 0 12px; }
.seen-cut.cx-4 .cut-down .cut-b { display: contents; }
.seen-cut.cx-4 .cut-down .cut-b > p { margin: 0; }
.seen-cut.cx-4 .cut-down .cut-b > p:not(:last-child) { grid-area: b1; }
.seen-cut.cx-4 .cut-down .cut-b > p:last-child { grid-area: b2; margin-top: 28px; }
.seen-cut.cx-4 .k4-panel { grid-area: pn; margin: 32px 0 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 44px; align-items: center; padding: 32px 36px; background: var(--mist); border: 1px solid #d3e3ec; border-radius: 10px; }
.seen-cut.cx-4 .k4-panel .k4 { --k4-w: 52px; }
.seen-cut.cx-4 .k4-panel .k4-hid li { border-top-color: #d3e3ec; }
.seen-cut.cx-4 .k4-panel .k4-hid li:first-child { border-top-color: var(--navy); }

/* markers */
.m4 { --m4: 28px; display: inline-grid; place-items: center; width: var(--m4); height: var(--m4); box-sizing: border-box; border-radius: 50%;
  font: 700 14px/1 var(--display); color: var(--navy); background: #fff; border: 2px dashed #6f8795; font-variant-numeric: tabular-nums; }
.m4-m { background: var(--navy); border: 2px solid var(--navy); }
.m4-m::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.k4-plant { margin: 0; max-width: none; }
.k4-ms { position: absolute; inset: 0; }
.k4-ms .m4 { position: absolute; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px #fff; cursor: default; }
svg .k4-pin line { stroke: #8aa0ad; stroke-width: 1; stroke-dasharray: 2 2; }
svg .k4-pin circle { fill: #8aa0ad; stroke: none; }
svg .k4-pin[data-k="0"] line { stroke: var(--navy); stroke-dasharray: none; }
svg .k4-pin[data-k="0"] circle { fill: var(--navy); }

/* the key: option 3's bar, cut in two by "The real damage sits below it." */
.k4 { --k4-w: 64px; --k4-h: 62px; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: minmax(var(--k4-h), auto); }
.k4-hid { grid-auto-rows: 1fr; }
.k4 li { display: grid; grid-template-columns: var(--k4-w) minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
  min-height: var(--k4-h); padding-right: 10px; border-top: 1px solid var(--rule); border-radius: 0 6px 6px 0; outline: none; }
.k4 li:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.k4-seg { position: relative; align-self: stretch; display: grid; place-items: center; }
.k4-seg::before { content: ""; position: absolute; inset: -1px 0 0 0; }
.k4-seg .m4 { position: relative; z-index: 1; }
.k4-seen li { border-top: 0; }
.k4-seen .k4-seg::before { inset: 0; background: var(--navy); border-radius: 4px 4px 0 0; }
.k4-seen .k4-seg .m4 { box-shadow: 0 0 0 2px #fff; }
.k4-hid li:first-child { border-top: 2px solid var(--navy); }
.k4-hid li:first-child .k4-seg::before { top: 0; }
.k4-hid .k4-seg::before { background: repeating-linear-gradient(135deg, #fff 0 3px, #aab5bc 3px 5px); border: 1px dashed #8aa0ad; border-bottom: 0; }
.k4-hid li:last-child .k4-seg::before { -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.k4-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 0; }
.k4-k { font: 600 12px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.k4-n { font: 600 14px/1.3 var(--sans); color: var(--ink-soft); }
.k4-seen .k4-n { font-size: 13px; color: var(--navy); }
.k4-v { font: 700 17px/1.25 var(--display); color: var(--navy); }
.k4-c { font-size: 13px; line-height: 1.4; color: var(--ink-mute); }
.k4-x { font: 500 12px/1.2 var(--sans); color: var(--ink-mute); white-space: nowrap; padding: 4px 7px; border: 1px dashed #aab5bc; border-radius: 5px; background: #fff; }

/* linked highlight: subtle, colour first; the small lift is motion and goes under reduced motion */
.k4 li, .k4-ms .m4 { transition: background-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out; }
.seen-cut.cx-4:has([data-k="0"]:is(:hover, :focus-visible)) li[data-k="0"],
.seen-cut.cx-4:has([data-k="1"]:is(:hover, :focus-visible)) li[data-k="1"],
.seen-cut.cx-4:has([data-k="2"]:is(:hover, :focus-visible)) li[data-k="2"],
.seen-cut.cx-4:has([data-k="3"]:is(:hover, :focus-visible)) li[data-k="3"],
.seen-cut.cx-4:has([data-k="4"]:is(:hover, :focus-visible)) li[data-k="4"],
.seen-cut.cx-4:has([data-k="5"]:is(:hover, :focus-visible)) li[data-k="5"] { background: #e3eff6; }
.seen-cut.cx-4:has([data-k="0"]:is(:hover, :focus-visible)) .m4[data-k="0"],
.seen-cut.cx-4:has([data-k="1"]:is(:hover, :focus-visible)) .m4[data-k="1"],
.seen-cut.cx-4:has([data-k="2"]:is(:hover, :focus-visible)) .m4[data-k="2"],
.seen-cut.cx-4:has([data-k="3"]:is(:hover, :focus-visible)) .m4[data-k="3"],
.seen-cut.cx-4:has([data-k="4"]:is(:hover, :focus-visible)) .m4[data-k="4"],
.seen-cut.cx-4:has([data-k="5"]:is(:hover, :focus-visible)) .m4[data-k="5"] { transform: translate(-50%, -50%) scale(1.14); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--navy); z-index: 2; }
.seen-cut.cx-4:has([data-k="0"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="0"] line,
.seen-cut.cx-4:has([data-k="1"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="1"] line,
.seen-cut.cx-4:has([data-k="2"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="2"] line,
.seen-cut.cx-4:has([data-k="3"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="3"] line,
.seen-cut.cx-4:has([data-k="4"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="4"] line,
.seen-cut.cx-4:has([data-k="5"]:is(:hover, :focus-visible)) svg .k4-pin[data-k="5"] line { stroke: var(--navy); stroke-width: 1.8; stroke-dasharray: none; }
@media (prefers-reduced-motion: reduce) {
  .k4 li, .k4-ms .m4 { transition: none; }
.seen-cut.cx-4:has([data-k="0"]:is(:hover, :focus-visible)) .m4[data-k="0"],
.seen-cut.cx-4:has([data-k="1"]:is(:hover, :focus-visible)) .m4[data-k="1"],
.seen-cut.cx-4:has([data-k="2"]:is(:hover, :focus-visible)) .m4[data-k="2"],
.seen-cut.cx-4:has([data-k="3"]:is(:hover, :focus-visible)) .m4[data-k="3"],
.seen-cut.cx-4:has([data-k="4"]:is(:hover, :focus-visible)) .m4[data-k="4"],
.seen-cut.cx-4:has([data-k="5"]:is(:hover, :focus-visible)) .m4[data-k="5"] { transform: translate(-50%, -50%); }
}

@media (max-width: 1000px) {
  .seen.seen-cut.cx-4, .seen.seen-cut.cx-4:not(:has(.cut-up > .cut-b)) { display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "b" "hs" "km" "hb" "b1" "pn" "b2" "after"; }
  .seen-cut.cx-4 .cut-up .cut-b { margin-top: 12px; }
  .seen-cut.cx-4 .cut-up .cut-h { margin: 32px 0 12px; }
  .seen-cut.cx-4 .cut-down .cut-h { margin: 30px 0 12px; }
  .seen-cut.cx-4 .k4-panel { grid-template-columns: minmax(0, 1fr); row-gap: 22px; margin: 28px calc(-1 * var(--cut-bleed)) 0;
    padding: 24px var(--cut-bleed); border-radius: 0; border-left: 0; border-right: 0; }
  .seen-cut.cx-on .cut-after { padding-top: 32px; }
}
@media (max-width: 560px) {
  .m4 { --m4: 30px; font-size: 15px; }
  .k4 { --k4-w: 46px; --k4-h: 64px; }
  .k4 li { column-gap: 12px; grid-template-columns: var(--k4-w) minmax(0, 1fr); }
  .k4-seg { grid-row: 1 / span 2; }
  .k4-x { grid-column: 2; justify-self: start; margin: -2px 0 10px; }
}

/* ======================================================================================================
   Eighth pass, 4 Nov 2026 (oc-): one column. Max: "It's not clear whether it goes down or across."
   AI pages only (html.page-ai). One pattern in every section: label, heading and prose in one left-aligned
   column (68ch), then the section's drawing below it at content width, then at most one closing line in the
   same column. Side by side only for parallel things: the compare rows, the 2 AM pair, phases, the role
   panel beside its scope drawing, the three HITL cards, the steps, and a pair of figures.
   ====================================================================================================== */
html.page-ai { --oc-m: 68ch; }
/* manifesto band: one column, top to bottom */
html.page-ai .band-text { columns: auto; }
html.page-ai .band-text p { margin: 0; max-width: var(--oc-m); }
html.page-ai .band-text p + p { margin-top: 14px; }
/* heading blocks */
html.page-ai .sec-solo { max-width: var(--oc-m); }
html.page-ai .ro-head { display: block; max-width: var(--oc-m); }
html.page-ai .ro-head .lede { margin-top: 12px; }
html.page-ai .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
html.page-ai .faq { max-width: 880px; }
/* .split stacks: text first, figure under it */
html.page-ai .split { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
html.page-ai .split > div, html.page-ai .split > p { max-width: var(--oc-m); }
html.page-ai section[aria-labelledby] .split > p + p { margin-top: 12px; }
html.page-ai .split > .dia-fig { order: 2; margin-top: 36px; }
html.page-ai section[aria-labelledby="un-h"] .split > div { order: 1; }
html.page-ai .dia-fig { max-width: 640px; }
html.page-ai .oc-fig { margin-top: 8px; }
html.page-ai .oc-p { max-width: var(--oc-m); color: var(--ink-soft); }
html.page-ai .after-p { max-width: var(--oc-m); }
/* a pair of figures (short page, MES section): the log card and the layered model */
html.page-ai .oc-figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 8px; }
html.page-ai .oc-figs .mes-log { margin: 0; max-width: none; }
html.page-ai .oc-figs .dia-fig { max-width: none; }
/* talent: all prose in one column, then the two drawings (the veteran leaving / the data layer keeping it) as a pair */
html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 0; }
html.page-ai .vz-talent-split > div { display: contents; }
html.page-ai .vz-talent-split > div > :not(.vz-col-fig) { grid-column: 1 / -1; max-width: var(--oc-m); margin-top: 12px; margin-bottom: 0; }
html.page-ai .vz-talent-split > div:first-child > .vz-col-fig + * { margin-top: 0; }
html.page-ai .vz-talent-split > div > .tal-bar { margin: 20px 0 8px; max-width: 460px; }
html.page-ai .vz-talent-split > div > .vz-col-fig { grid-row: 40; margin: 36px 0 0; }
html.page-ai .vz-talent-split > div:first-child > .vz-col-fig { grid-column: 1; }
html.page-ai .vz-talent-split > div:last-child > .vz-col-fig { grid-column: 2; }
/* floor cut, option 4: one column at every width; the framed panel stays full width */
html.page-ai .seen.seen-cut.cx-4, html.page-ai .seen.seen-cut.cx-4:not(:has(.cut-up > .cut-b)) { grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "a" "b" "hs" "km" "hb" "b1" "pn" "b2" "after"; }
html.page-ai .seen-cut.cx-4 p { max-width: var(--oc-m); }
html.page-ai .seen-cut.cx-4 .cut-up .cut-b { margin-top: 12px; }
html.page-ai .seen-cut .cut-after { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
/* short page: no measured block under the first line, so the two lines read as one pair above the panel */
html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-up .cut-h { margin: 28px 0 0; }
html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-down .cut-h { margin: 4px 0 0; }
@media (max-width: 1000px) {
  html.page-ai section[aria-labelledby] .split { row-gap: 0; }
}
@media (max-width: 700px) {
  html.page-ai .oc-figs { grid-template-columns: minmax(0, 1fr); }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split { grid-template-columns: minmax(0, 1fr); }
  html.page-ai .vz-talent-split > div:first-child > .vz-col-fig { grid-column: 1; grid-row: 40; }
  html.page-ai .vz-talent-split > div:last-child > .vz-col-fig { grid-column: 1; grid-row: 41; margin-top: 20px; }
}
html.page-ai .band-text p.strong { max-width: 52ch; }

/* ======================================================================================================
   Ninth pass, 4 Nov 2026 (wd-): fill the width. Max: "that title and subtitle should go all the way right".
   AI pages only (html.page-ai). Still one reading path. Headings and ledes span the content column (no cap,
   pretty wrap); prose without its own figure runs at 92ch; prose with its own figure sits beside it (text 5/12,
   figure 7/12, centred against each other); parallel pairs stay pairs. Phones (under 1000px) keep the
   eighth pass's single column.
   ====================================================================================================== */
html.page-ai { --oc-m: 92ch; }
/* headings: one line where they fit; when they wrap, the first line runs the full column and the browser avoids a
   one-word last line (pretty). balance was tried first: it halves any heading just over one line, which is the gap Max flagged. */
html.page-ai main h2 { text-wrap: pretty; max-width: none; }
html.page-ai .sec-solo .lede, html.page-ai .ro-head .lede, html.page-ai .wrap.split > div > .lede { max-width: none; }
html.page-ai .sec-solo, html.page-ai .ro-head { max-width: none; }
html.page-ai .sec-solo > p:not(.lede):not(.zone-cap) { max-width: var(--oc-m); }
/* manifesto: the lead line spans the band */
html.page-ai .band-text p, html.page-ai .band-text p.strong { max-width: none; }
/* roles: the panel sits centred against its scope drawing */
html.page-ai .ro-body { align-items: center; }

@media (min-width: 1001px) {
  /* stats: equal columns across the whole wrap, however many there are */
  html.page-ai .stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  /* playbook: two columns, read down then across (01-04, 05-07) */
  html.page-ai .playbook { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto);
    grid-auto-flow: column; column-gap: 48px; border-top: 0; }
  html.page-ai .playbook li:nth-child(1), html.page-ai .playbook li:nth-child(5) { border-top: 1px solid var(--rule); }
  /* FAQ: full width, two columns of questions (1-3, 4-6) */
  html.page-ai .faq { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto);
    grid-auto-flow: column; column-gap: 48px; align-items: start; border-top: 0; }
  html.page-ai .faq details:nth-child(1), html.page-ai .faq details:nth-child(4) { border-top: 1px solid var(--rule); }
  /* manifesto: every line stacks full width, in reading order (tenth pass: the short page's two lines were a
     left/right pair; they read in sequence, and prose never sits beside prose) */
  html.page-ai .band-text p.strong { font-size: 1.35rem; }

  /* floor cut, option 4: the two short lines are a left/right pair ("you can see" | "sits below it"),
     each with what belongs under it; the framed panel stays full width */
  html.page-ai .seen.seen-cut.cx-4, html.page-ai .seen.seen-cut.cx-4:not(:has(.cut-up > .cut-b)) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px;
    grid-template-areas: "a a" "b b" "hs hb" "km b1" "pn pn" "b2 b2" "after after"; }
  html.page-ai .seen-cut.cx-4 .cut-up .cut-h, html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-up .cut-h { align-self: start; margin: 40px 0 12px; }
  html.page-ai .seen-cut.cx-4 .cut-down .cut-h, html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-down .cut-h { align-self: start; margin: 40px 0 12px; }
  html.page-ai .seen-cut.cx-4 .k4-fm { align-self: start; }
  html.page-ai .seen-cut.cx-4 .cut-h { font-size: 1.4rem; line-height: 1.25; }
  html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-up .cut-h, html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .cut-down .cut-h { margin: 28px 0 0; }
  html.page-ai .seen-cut.cx-4:not(:has(.k4-fm)) .k4-panel { margin-top: 24px; }

  /* MES (long page) and Unified Namespace: heading and lede across the top, then the prose beside its diagram */
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split, html.page-ai section[aria-labelledby="un-h"] .wrap.split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 0; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > div, html.page-ai section[aria-labelledby="un-h"] .wrap.split > div { display: contents; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > div > *, html.page-ai section[aria-labelledby="un-h"] .wrap.split > div > * { grid-column: 1 / -1; max-width: none; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split { grid-template-rows: auto auto auto 1fr auto auto 1fr; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > div > p:nth-child(4) { grid-column: 1; grid-row: 5; margin-top: 0; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > div > p:nth-child(5) { grid-column: 1; grid-row: 6; margin-top: 12px; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > .dia-fig { grid-column: 2; grid-row: 4 / 8; margin-top: 36px; max-width: none; }
  /* UNS: the lede and its paragraph together beside the diagram (with the lede on top, the 4-line paragraph left
     a 170px hole above and below itself) */
  html.page-ai section[aria-labelledby="un-h"] .wrap.split { grid-template-rows: auto 1fr auto auto 1fr; }
  html.page-ai section[aria-labelledby="un-h"] .wrap.split > div > h2 { grid-row: 1; }
  html.page-ai section[aria-labelledby="un-h"] .wrap.split > div > .lede { grid-column: 1; grid-row: 3; margin-top: 0 !important; }
  html.page-ai section[aria-labelledby="un-h"] .wrap.split > div > p:not(.lede) { grid-column: 1; grid-row: 4; margin-top: 14px; }
  html.page-ai section[aria-labelledby="un-h"] .wrap.split > .dia-fig { grid-column: 2; grid-row: 2 / 6; margin-top: 32px; max-width: none; order: 0; }
  html.page-ai section[aria-labelledby="pb-h"] .wrap.split > .dia-fig .dia-svg { max-height: 400px; }
  html.page-ai section[aria-labelledby="un-h"] .wrap.split > .dia-fig .dia-svg { max-height: 300px; }

  /* MES (short page): the log card and the layered model as one pair of equal height */
  html.page-ai .oc-figs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; margin-top: 4px; }
  html.page-ai .oc-figs .mes-log { display: flex; flex-direction: column; padding: 28px 32px; }
  html.page-ai .oc-figs .mes-log .ml-h { font-size: 19px; margin-bottom: 8px; }
  html.page-ai .oc-figs .mes-log ul { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
  html.page-ai .oc-figs .mes-log li { font-size: 18px; padding: 16px 0 16px 36px; }
  html.page-ai .oc-figs .mes-log li::before { top: 20px; width: 18px; height: 18px; }
  html.page-ai .oc-figs .mes-log .ml-f { font-size: 20px; padding-top: 18px; margin-top: 12px; }
  html.page-ai .oc-figs .dia-fig { display: flex; flex-direction: column; justify-content: center; padding: 24px 28px 20px; }
  html.page-ai .oc-figs .dia-fig .dia-svg { max-height: 360px; }

  /* talent: all the prose in one column on the left, the two drawings on the right in the same order (the veteran
     leaving, then the data layer keeping what he knew). Long page: stacked, each beside its own paragraphs.
     Short page (less prose): side by side, centred against the text. */
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split { display: grid; max-width: none; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 56px; row-gap: 0; align-items: start; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div { display: contents; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div > :not(.vz-col-fig) { grid-column: 1; max-width: none; margin-top: 12px; margin-bottom: 0; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:first-child > :nth-child(2) { grid-row: 1; margin-top: 0; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:first-child > :nth-child(3) { grid-row: 2; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:first-child > :nth-child(4) { grid-row: 3; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:last-child > :nth-child(2) { grid-row: 4; margin-top: 28px; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:last-child > :nth-child(3) { grid-row: 5; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:last-child > :nth-child(4) { grid-row: 6; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div > .tal-bar { margin: 20px 0 8px; max-width: 460px; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div > .vz-col-fig { grid-column: 2; margin: 0; align-self: center; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:first-child > .vz-col-fig { grid-row: 1 / 4; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div:last-child > .vz-col-fig { grid-row: 4 / 7; margin-top: 28px; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split > div > .vz-col-fig .vz { margin: 0 auto; max-width: 520px !important; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div > .vz-col-fig .vz { max-width: 340px !important; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split .ex-sub { font-size: 1.6rem; line-height: 1.25; margin-top: 20px; color: var(--navy); }
  /* headings a touch smaller at desktop, so the ones just over a line ("What actually changes ...") fit on one */
  html.page-ai main section.section h2 { font-size: min(2.25rem, 2.6vw); }
  /* roles: a smaller scope drawing and larger panel type, so the two sides are about the same height */
  html.page-ai .ro-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html.page-ai .ro-body .scope svg { max-width: 440px; margin: 0 auto; display: block; }
  html.page-ai .ro-panel[data-short] div:first-child dd { font-size: 1.75rem; line-height: 1.25; }
  html.page-ai .ro-panel[data-short] dd { font-size: 1.15rem; line-height: 1.55; }
  /* evolution: the before/after drawings a little larger */
  html.page-ai .vz-evo-row .vz { max-width: 400px; }
  html.page-ai section[aria-labelledby="im-h"] .phases { margin-top: 20px !important; }
  html.page-ai section[aria-labelledby="im-h"] .sec-solo + .oc-p { margin-top: 0; }
  html.page-ai .vz-evo-row { align-items: center; }
  /* roles, long page: the panels run long, so the scope drawing gets the room; short page: smaller drawing, larger type */
  html.page-ai .ro-body:not(:has(.ro-panel[data-short])) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  html.page-ai .ro-body:not(:has(.ro-panel[data-short])) .scope svg { max-width: none; }
  html.page-ai .ro-body:has(.ro-panel[data-short]) .scope svg { max-width: 400px; }
  html.page-ai .ro-body:has(.ro-panel[data-short]) { align-items: start; margin-top: 32px; }
  /* floor cut: the measured block sits centred beside the hidden-cost paragraph */
  html.page-ai .seen-cut.cx-4 .k4-fm { align-self: center; }
  /* implementation: the short line sits close under its heading */
  html.page-ai section[aria-labelledby="im-h"] .sec-solo { margin-bottom: 12px; }
}
/* ninth pass: short page talent drawings side by side only where they stay legible (1280px and up); 1001-1279 stacks them */
@media (min-width: 1280px) {
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); column-gap: 28px;
    grid-template-rows: 1fr repeat(5, auto) 1fr; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div > :not(.vz-col-fig) { margin-right: 28px; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:first-child > :nth-child(2) { grid-row: 2; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:first-child > :nth-child(3) { grid-row: 3; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:first-child > :nth-child(4) { grid-row: 4; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:last-child > :nth-child(2) { grid-row: 5; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:last-child > :nth-child(3) { grid-row: 6; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:first-child > .vz-col-fig { grid-column: 2; grid-row: 1 / -1; }
  html.page-ai section[aria-labelledby="tc-h"] .vz-talent-split:has(.tal-bar) > div:last-child > .vz-col-fig { grid-column: 3; grid-row: 1 / -1; margin-top: 0; }
}

/* ======================================================================================================
   Tenth pass, 4 Nov 2026 (md-, rr-): ai-mid.html only (html.page-ai-mid). Three cuts brought back from ai.html,
   each as small as it goes: the Unified Namespace section (one sentence beside an iso drawing), "The reality" in
   each role tab (one sentence and a before/after strip), and the Analysis row (short form, existing table).
   ====================================================================================================== */
/* Unified Namespace: the sentence, then the drawing (phones); side by side, centred against each other (desktop) */
.page-ai-mid .md-uns > p { margin: 0; max-width: var(--oc-m); font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); }
.page-ai-mid .md-uns-fig { margin: 28px 0 0; }
.page-ai-mid .md-uns-fig .vz { max-width: 560px; }
@media (min-width: 1001px) {
  .page-ai-mid .md-uns { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: center; margin-top: -8px; }
  .page-ai-mid .md-uns > p { font-size: 1.75rem; line-height: 1.38; color: var(--navy); font-family: var(--display); font-weight: 500; }
  .page-ai-mid .md-uns-fig { margin: 0; }
}

/* roles: the scope drawing sits centred against the panel (the panels are taller here than on ai-short) */
@media (min-width: 1001px) {
  html.page-ai-mid .ro-body:has(.ro-panel[data-short]) { align-items: center; margin-top: 16px; }
  html.page-ai-mid .ro-body:has(.ro-panel[data-short]) .scope svg { max-width: 500px; }
}
/* "The reality": one sentence, then a before/after strip (the reality -> what becomes possible) */
.page-ai-mid .ro-real .rr-s { display: block; }
.rr { display: flex; align-items: center; gap: 10px; margin-top: 14px; max-width: 560px; }
.rr-c { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 8px; }
.rr-no { background: #f4f6f8; box-shadow: inset 0 0 0 1px #dde3e9; }
.rr-yes { background: #fff; box-shadow: inset 0 0 0 1px var(--teal-mid); }
.rr-g { display: block; width: 100%; max-width: 200px; height: 44px; }
.rr-g svg { display: block; width: 100%; height: 44px; }
.rr-l { font: 600 13px/1.3 var(--sans); }
.rr-no .rr-l { color: var(--ink-mute); }
.rr-yes .rr-l { color: var(--teal-deep); }
.rr-arr { flex: none; display: block; width: 24px; height: 12px; }
.rr-arr svg { display: block; width: 24px; height: 12px; }
.rr-arr path { fill: none; stroke: var(--navy); stroke-width: 1.6; }
/* plant: the machine goes down (navy dot) ... you find out (tick); same track length in both cells */
.rr-t { display: flex; align-items: center; width: 100%; height: 44px; }
.rr-t i { display: block; flex: none; }
.rr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--navy); }
.rr-bar { flex: 1 1 auto !important; height: 8px; margin-left: 3px; background: repeating-linear-gradient(135deg, #fff 0 3px, #c4cdd3 3px 5px); box-shadow: inset 0 0 0 1px #c4cdd3; }
.rr-bar.on { flex: 0 0 12% !important; background: #00aee6; box-shadow: none; }
.rr-end { width: 2px; height: 18px; background: var(--navy); }
.rr-rest { flex: 1 1 auto !important; height: 1px; background: #dde3e9; }
/* IT: a pipeline per tool vs one shared layer */
.rr svg .rr-wire-g path { fill: none; stroke: #8aa0ad; stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.rr svg .rr-wire path { fill: none; stroke: #00aee6; stroke-width: 1.6; }
.rr svg .rr-sq { fill: #fff; stroke: #102d7b; stroke-width: 1.2; }
.rr svg .rr-sq.g { fill: #eef2f5; stroke: #8aa0ad; }
.rr svg .rr-bus { fill: rgba(179,232,247,.6); stroke: #0391bf; stroke-width: 1; stroke-dasharray: 3 2; }
/* CI: the gain after an event drifts back vs holds */
.rr svg .rr-base { stroke: #dde3e9; stroke-width: 1; }
.rr svg .rr-line-g { fill: none; stroke: #8aa0ad; stroke-width: 2; }
.rr svg .rr-line { fill: none; stroke: #00aee6; stroke-width: 2; }
.rr svg .rr-ev { fill: #fff; stroke: #102d7b; stroke-width: 1.4; }
.rr svg .rr-ev.on { stroke: #0391bf; }

/* ======================================================================================================
   Batch, 4 Nov 2026 (bt-): operations.html only. Layout, SVG and CSS; no words changed.
   1. Steel manufacturing case: a quiet drawn backdrop, many plants on one ground under one data layer.
   2. Drawings aligned to manufacturing.html: the proof-of-concept layer uses the house data-layer strokes
      (white nodes, cyan dashed route with its pale glow, flowing only while on screen); hero labels are chips.
   3. MACH block, variant B (operations.html?machb): the clip full width, the capabilities as a rail under it,
      entered by a route that jumps a queue. Variant A is untouched.
   ====================================================================================================== */
/* 1. steel backdrop */
.page-ops .steel .story { position: relative; }
.page-ops .steel .story > :not(.st-bg) { position: relative; z-index: 1; }
.page-ops .st-bg { margin: 0; pointer-events: none; }
.page-ops .st-bg svg { display: block; width: 100%; height: auto; overflow: visible; }
.page-ops .st-bg .ground-tile { fill: #e6f3f8; }
@media (min-width: 1001px) {
  .page-ops .st-bg { position: absolute; z-index: 0; top: -64px; right: 0; width: 360px; }
}
@media (max-width: 1000px) {
  .page-ops .st-bg { width: min(100%, 340px); margin: 24px 0 0; }
}
svg .op-steel { stroke: #102d7b; stroke-width: .7; }

/* 2. proof-of-concept layer in the house data-layer strokes */
.page-ops .gb-art .gb-svg .op-plane { stroke: #0391bf; stroke-width: .9; stroke-dasharray: 6 4; }
.page-ops .gb-art .gb-svg .op-drop { stroke: #0391bf; stroke-width: .7; stroke-dasharray: 2 3; }
.page-ops .gb-art .gb-svg .op-glow { fill: none; stroke: #b3e8f7; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.page-ops .gb-art .gb-svg .op-flow { stroke: #00aee6; stroke-width: 2; stroke-dasharray: 7 6; }
.page-ops .gb-art .gb-svg .op-node { fill: #fff; stroke: #027aa2; stroke-width: 1.2; }
.page-ops .gb-art .gb-svg .op-ring { stroke: #027aa2; stroke-width: 1.2; }
.page-ops .gb-art.vz { margin: 0; }
.vz-on .gb-svg .op-flow { animation: plr-run 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .vz-on .gb-svg .op-flow { animation: none; } }
/* hero labels: the same white chip as the plant map's zone labels */
.page-ops .line-tags span:not(.fs-tag) { background: rgba(255,255,255,.92); padding: 5px 8px; border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); font-size: 12px; transform: translate(-40%, 8px); }
.page-ops .line-tags .fs-tag { background: rgba(255,255,255,.92); padding: 5px 8px; border-radius: 8px; box-shadow: 0 0 0 1px var(--rule); }

/* 3. MACH, variant B */
.mb-queue { display: none; }
.mach.mach-b .mach-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo logo" "head head" "lede btns" "media media" "rail rail"; gap: 0 48px; align-items: end; }
.mach.mach-b .mach-copy { display: contents; }
.mach.mach-b .mach-logo { grid-area: logo; margin-bottom: 24px; }
.mach.mach-b h2 { grid-area: head; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .98; letter-spacing: -0.015em; }
.mach.mach-b .mach-copy > p { grid-area: lede; margin-top: 20px; max-width: 52ch; text-wrap: pretty; }
.mach.mach-b .btn-row { grid-area: btns; justify-content: flex-end; }
.mach.mach-b .mach-media { grid-area: media; margin-top: 48px; aspect-ratio: 21 / 9; border-radius: 14px 14px 0 0; border-bottom: 0; }
.mach.mach-b .mach-caps { grid-area: rail; position: relative; margin: 0; padding: 22px 24px 24px 196px; border: 1px solid #2a323b; border-top: 0; border-radius: 0 0 14px 14px; background: #0f1317;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.mach.mach-b .mach-caps::before { content: ""; position: absolute; left: 186px; right: 24px; top: 40px; height: 2px; background: var(--cyan); }
.mach.mach-b .mach-caps::after { content: ""; position: absolute; right: 18px; top: 35px; border: 6px solid transparent; border-left: 9px solid var(--cyan); border-right: 0; }
.mach.mach-b .mach-caps li { border: 0; padding: 32px 0 0; flex-direction: column; align-items: flex-start; gap: 0; font-size: 1.05rem; position: relative; }
.mach.mach-b .mach-caps li::before { position: absolute; left: 0; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #0f1317; border: 2px solid var(--cyan); box-sizing: border-box; }
.mach.mach-b .mb-queue { grid-area: rail; display: block; position: relative; z-index: 1; align-self: start; width: 176px; height: 64px; margin: -6px 0 0 14px; overflow: visible; }
.mb-queue .mb-wait rect { fill: none; stroke: #4a5560; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: none; }
.mb-queue .mb-jump { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; vector-effect: none; }
.mb-queue .mb-head { fill: var(--cyan); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .mach.mach-b .mb-queue .mb-jump { animation: plr-run 1.1s linear infinite; }
}
@media (max-width: 1000px) {
  .mach.mach-b .mach-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "head" "lede" "btns" "media" "rail"; }
  .mach.mach-b .btn-row { justify-content: flex-start; margin-top: 28px; }
  .mach.mach-b .mach-media { margin-top: 36px; aspect-ratio: 16 / 10; }
  .mach.mach-b .mach-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 84px 20px 8px 44px; row-gap: 0; }
  .mach.mach-b .mach-caps::before { left: 25px; right: auto; top: 76px; bottom: 30px; width: 2px; height: auto; }
  .mach.mach-b .mach-caps::after { display: none; }
  .mach.mach-b .mach-caps li { padding: 12px 0 20px; }
  .mach.mach-b .mach-caps li::before { left: -25px; top: 15px; }
  .mach.mach-b .mb-queue { margin: 10px 0 0 18px; }
}
@media (max-width: 560px) {
  .mach.mach-b .mach-caps { grid-template-columns: minmax(0, 1fr); }
}

/* 6 Nov 2026: between 640px and 1080px the wide connection drawing shrank and the 12px label floor pushed
   its labels out of their boxes, and the three small charts went full width so their labels grew to
   headline size. Tablets get the narrow drawing, centred; the charts keep their desktop width. */
@media (min-width: 640px) and (max-width: 1080px) {
  svg.cn-svg.rd-w { display: none !important; }
  svg.cn-n.rd-n { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
}
.killer .k-svg { max-width: 380px; }