/* Ported from OberBuilt-Website design/mockups-2026-09/assets/dir-d.css (frozen reference). */
/* dir-d.css: Direction D, the merge (2026-09-30). Loads after v2.css.
   B's product showcase, rebalanced: the unit fills the first screen, image and text share each section,
   both products get the same chapter treatment. Cyan only on the live thing. Prefix: dd-, df- (fit drawing),
   da2- (Analysis Engine drawing). */

.dir-d { --dd-panel: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); --dd-steel: #93A5B7; --dd-green: #3FCB8B; }
.dir-d main#main { padding-bottom: 0; }
.dir-d a:focus-visible, .dd-vid__btn:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 3px; }

/* ---------- hero: copy left, the turning unit right, both in the first screen ---------- */
.dd-hero { position: relative; padding: clamp(12px, 2vw, 28px) 0 0; overflow-x: clip; }
.dd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: center; }
.dir-d .dd-hero__copy { position: relative; z-index: 1; }
.dir-d .dd-hero__copy .v-eyebrow { margin-bottom: 14px; }
.dir-d .dd-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--v-fg); max-width: 11ch; text-wrap: balance; margin: 0; }
.dir-d .dd-hero__say { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: var(--v-fg-2); max-width: 34ch; margin-top: 20px; }
.dd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dd-cta--center { justify-content: center; }

.dir-d .dd-hero__stage { position: relative; margin: 0; }
.dd-hero__stage::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,184,212,.10), transparent 70%); pointer-events: none; }
.dd-vid { position: relative; }
.dd-vid video { display: block; width: 100%; height: auto; background: #111C27; }
/* the hero loop blends into the page on all four edges; the unit itself never touches the fade */
.dd-vid--hero video { aspect-ratio: 3 / 2; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dd-hero__stage .dd-cap { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); margin: 0; white-space: nowrap; }

.dd-vid__btn { position: absolute; right: clamp(12px, 3vw, 36px); bottom: clamp(14px, 2.4vw, 32px); display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; min-width: 44px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: 500 12px/1 var(--font-mono); letter-spacing: .06em;
  color: var(--v-fg-2); background: rgba(11,22,32,.74); box-shadow: 0 0 0 .5px var(--v-line-2) inset; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dd-vid__btn:hover { color: var(--v-fg); }
.dd-vid__ico { width: 10px; height: 10px; display: inline-block; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.dd-vid__btn[aria-pressed="true"] .dd-vid__ico { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dd-vid--hero .dd-vid__btn { bottom: 11%; right: 10%; }

/* two products, same weight, right under the hero */
.dd-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: clamp(20px, 3vw, 36px); }
.dd-pair__item { position: relative; display: grid; gap: 4px; padding: 20px 56px 20px 22px; border-radius: 14px; text-decoration: none;
  background: var(--dd-panel); box-shadow: 0 0 0 .5px var(--v-line-2) inset, 0 0 0 1px var(--v-ring); transition: box-shadow .18s var(--v-ease), background .18s var(--v-ease); }
.dd-pair__item:hover { box-shadow: 0 0 0 .5px rgba(98,226,239,.45) inset, 0 0 0 1px var(--v-ring); background: linear-gradient(180deg, rgba(98,226,239,.06), rgba(255,255,255,.012)); }
.dd-pair__k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-fg-3); }
.dd-pair__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; letter-spacing: -.01em; color: var(--v-fg); }
.dd-pair__d { font-size: 15.5px; line-height: 1.45; color: var(--v-fg-2); }
.dd-pair__go { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  color: var(--v-cyan-2); box-shadow: 0 0 0 1px rgba(98,226,239,.4) inset; font-size: 15px; transition: transform .18s var(--v-ease); }
.dd-pair__item:hover .dd-pair__go { transform: translateY(calc(-50% + 3px)); }

/* ---------- shared section type ---------- */
.dd-sec { padding: clamp(88px, 11vw, 160px) 0 0; position: relative; }
.dir-d .dd-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-cyan-2); margin: 0 0 14px; }
.dir-d .dd-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -.025em; color: var(--v-fg); text-wrap: balance; margin: 0; }
.dir-d .dd-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; color: var(--v-fg); margin: 0; }
.dir-d .dd-p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--v-fg-2); margin: 18px 0 0; max-width: 58ch; }
.dir-d .dd-p--quiet { font-size: 16px; color: var(--v-fg-3); margin-top: 12px; }
.dd-p a { display: inline-block; padding: 2px 0; }
.dir-d .dd-copy { text-align: center; max-width: 780px; margin: clamp(28px, 4vw, 44px) auto 0; }
.dir-d .dd-copy .dd-p { margin-left: auto; margin-right: auto; }
.dir-d .dd-copy--left { text-align: left; margin: 0; max-width: 580px; }
.dir-d .dd-copy--left .dd-p { margin-left: 0; }
.dd-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.dir-d .dd-more { margin-top: 18px; }
.dd-more .v-btn--text { padding: 0; min-height: 44px; }

/* honest labels */
.dd-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 10px; padding: 0 var(--v-g);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg-3); }
.dd-cap--in { justify-content: flex-start; padding: 0; margin-top: 12px; }
.dd-cap--flat { padding: 0; margin: 0; }

/* chapter marker: the same for both products, so they read as equals */
.dir-d .dd-chapter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 18px; margin: 0 0 clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--v-line-2); }
.dd-chapter__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -.005em; color: var(--v-fg); }
.dd-chapter__d { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--v-fg-3); }

/* ---------- 1. every cylinder + connects to ---------- */
.dd-cyl__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.dir-d .dd-connects { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 16px; background: var(--dd-panel); box-shadow: var(--v-card); }
.dir-d .dd-connects__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--v-fg-3); margin: 0 0 8px; }
.dd-ecu { list-style: none; padding: 0; margin: 0; }
.dd-ecu li { display: grid; gap: 2px; padding: 16px 0; border-bottom: .5px solid var(--v-line-2); }
.dd-ecu__brand { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.01em; color: var(--v-fg); }
.dd-ecu__models { font-size: 15px; color: var(--v-fg-2); }
.dir-d .dd-connects__ask { margin: 16px 0 0; font-size: 15px; color: var(--v-fg-3); }
.dd-connects__ask a { display: inline-block; padding: 3px 0; }

/* ---------- split layouts ---------- */
.dd-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dir-d .dd-frame { margin: 0; }
.dd-frame picture { display: block; border-radius: 16px; overflow: hidden; box-shadow: var(--v-card); }
.dd-frame img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.dir-d .dd-panel { margin: 0; padding: clamp(18px, 3vw, 34px); border-radius: 16px; background: var(--dd-panel); box-shadow: var(--v-card); }
.dd-diag { display: block; width: 100%; height: auto; }

/* ---------- key-art band ---------- */
.dd-band { padding-top: clamp(88px, 11vw, 160px); }
.dir-d .dd-band__fig { margin: 0 auto; max-width: 1600px; position: relative; }
.dd-band__fig picture, .dd-band__fig img { display: block; width: 100%; height: auto; }
.dd-band__fig img { aspect-ratio: 2 / 1; object-fit: cover;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dd-band__cap { margin-top: -3%; position: relative; display: grid; justify-items: center; gap: 12px; padding: 0 var(--v-g); text-align: center; }
.dir-d .dd-band__line { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.08; letter-spacing: -.02em; color: var(--v-fg); text-shadow: 0 2px 24px rgba(0,0,0,.8); margin: 0; text-wrap: balance; }

/* ---------- how it fits ---------- */
.dd-fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.dir-d .dd-fit__fig { margin: 0; padding: clamp(16px, 2.6vw, 32px); border-radius: 16px; background: var(--dd-panel); box-shadow: var(--v-card); }
.df { display: block; width: 100%; height: auto; }
.dd-steps { list-style: none; padding: 0; margin: 0; counter-reset: dd; display: grid; gap: 0; }
.dd-steps li { counter-increment: dd; position: relative; padding: 22px 0 22px 56px; border-top: .5px solid var(--v-line-2); }
.dd-steps li:first-child { border-top: 0; padding-top: 0; }
.dd-steps li::before { content: counter(dd); position: absolute; left: 0; top: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 500 14px/1 var(--font-mono); color: var(--v-cyan-2); box-shadow: 0 0 0 1px rgba(98,226,239,.45) inset; }
.dd-steps li:first-child::before { top: -2px; }
.dir-d .dd-steps p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--v-fg-2); max-width: 46ch; }

/* the fit drawing: cyan = the OBWB8m and its data, steel = everything else. The case is in mm under one transform,
   so its strokes don't scale with it. */
.df-case * { vector-effect: non-scaling-stroke; }
.df-run { fill: none; stroke: rgba(147,165,183,.6); stroke-width: 1.6; stroke-linecap: round; }
.df-run--end { stroke: rgba(147,165,183,.35); }
.df-hex { fill: #0F1D29; stroke: var(--dd-steel); stroke-width: 1.6; stroke-linejoin: round; }
.df-probe { fill: none; stroke: var(--v-cyan-2); stroke-width: 1.6; }
.df-num { font-family: var(--font-mono); font-size: 15px; fill: #B3C4D2; }
.df-leadhalo { fill: none; stroke: #0F1E2B; stroke-width: 6; stroke-linecap: round; }
.df-lead { fill: none; stroke: rgba(98,226,239,.55); stroke-width: 1.7; stroke-linecap: round; }
.df-pulse { fill: none; stroke: #E9FCFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.df-unit { fill: #0F1E2B; stroke: var(--v-cyan-2); stroke-width: 1.8; stroke-linejoin: round; }
.df-lid { fill: #12222F; stroke: rgba(98,226,239,.45); stroke-width: 1.1; stroke-linejoin: round; }
.df-hole { fill: #0B1620; stroke: rgba(98,226,239,.7); stroke-width: 1.2; }
.df-recess { fill: #0B1620; stroke: rgba(147,165,183,.4); stroke-width: 1; }
.df-led { fill: var(--dd-green); }
.df-conn { fill: #152634; stroke: var(--dd-steel); stroke-width: 1.5; stroke-linejoin: round; }
.df-conn__in { fill: #0B1620; stroke: rgba(147,165,183,.6); stroke-width: 1.2; stroke-linejoin: round; }
.df-port { fill: #152634; stroke: var(--dd-steel); stroke-width: 1.5; }
.df-port__in { fill: #0B1620; stroke: rgba(147,165,183,.6); stroke-width: 1.1; stroke-linejoin: round; }
.df-pwr { fill: #152634; stroke: rgba(147,165,183,.75); stroke-width: 1.3; stroke-linejoin: round; }
.df-pwr__in { fill: #0B1620; stroke: rgba(147,165,183,.5); stroke-width: 1; }
.df-canhalo { fill: none; stroke: #0F1E2B; stroke-width: 9; stroke-linecap: round; }
.df-canline { fill: none; stroke: var(--v-cyan-2); stroke-width: 3.2; stroke-linecap: round; }
.df-canpulse { fill: none; stroke: #E9FCFF; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.df-ecu { fill: none; stroke: var(--dd-steel); stroke-width: 1.8; }
.df-pin { stroke: rgba(147,165,183,.55); stroke-width: 1.6; }
.df-lab { font-family: var(--font-mono); font-size: 17px; fill: #C2CEDA; letter-spacing: .03em; }
.df-lab--unit { fill: #E6FAFC; }
.df-lab--ecu { fill: #F3F5F7; font-size: 19px; }
.df-lab--s { fill: #B3C4D2; font-size: 15px; }
.df-hit { fill: transparent; cursor: pointer; }

/* follow one channel: the picked sensor, its lead, its light and the ECU cable stay lit, the rest steps back */
.df-part, .df-ch, .df-side, .df-led { transition: opacity .25s var(--v-ease), stroke .25s var(--v-ease), fill .25s var(--v-ease); }
.df.is-ch .df-ch:not(.is-on), .df.is-ch .df-side:not(.is-on) { opacity: .28; }
.df.is-ch .df-pulses .df-pulse { animation: none; opacity: 0; }
.df .df-lead.is-on { stroke: var(--v-cyan-2); stroke-width: 3; }
.df .df-hex.is-on, .df .is-on .df-hex { stroke: var(--v-cyan-2); }
.df .df-num.is-on { fill: #E6FAFC; }
.df .df-side.is-on { stroke: var(--v-cyan-2); stroke-width: 2; }
.df .df-led.is-on { fill: #7CF2B4; filter: drop-shadow(0 0 2px rgba(124,242,180,.9)); }
.df.is-ch .df-canline { stroke-width: 4; }
/* a story step in view (or hovered): its part of the drawing leads, the others step back a little */
.df[data-step] .df-part { opacity: .5; }
.df[data-step="sensors"] .df-part[data-part="sensors"], .df[data-step="unit"] .df-part[data-part="unit"], .df[data-step="can"] .df-part[data-part="can"] { opacity: 1; }
.df.is-ch .df-part { opacity: 1; }
.dd-steps li { transition: opacity .25s var(--v-ease); }
.dd-steps.has-step li:not(.is-step) { opacity: .6; }

.dd-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.dd-pick__k { flex: 1 0 100%; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-fg-3); margin-bottom: 2px; }
.dd-pick__gap { width: 6px; }
.dd-pick__b { min-width: 34px; min-height: 36px; padding: 0; border-radius: 10px; border: 0; cursor: pointer; font: 500 14px/1 var(--font-mono); color: var(--v-fg-2);
  background: rgba(255,255,255,.03); box-shadow: 0 0 0 1px var(--v-line-2) inset; transition: background .18s var(--v-ease), color .18s var(--v-ease), box-shadow .18s var(--v-ease); }
.dd-pick__b:hover { color: var(--v-fg); box-shadow: 0 0 0 1px rgba(98,226,239,.5) inset; }
.dd-pick__b[aria-pressed="true"] { color: #062028; background: var(--v-cyan-2); box-shadow: none; }
.dd-pick__b:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.dd-pick[hidden] { display: none; }

/* ---------- film ---------- */
.dir-d .dd-bleed { max-width: 1480px; margin: 0 auto; }
.dd-bleed--film .dd-vid video { aspect-ratio: 1280 / 632; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dd-split--film { margin-top: clamp(32px, 5vw, 64px); }
.dir-d .dd-slot { margin: 0; }
.dd-slot__box { aspect-ratio: 4 / 3; border-radius: var(--v-radius); border: 1.5px dashed rgba(247,213,71,.45); background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 12px, transparent 12px 24px), #0E1A25;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.dd-slot__k { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-flag); }
.dd-slot__d { font-size: 15px; color: var(--v-fg-3); max-width: 30ch; }

/* ---------- Analysis Engine chapter ---------- */
.dd-ae { margin-top: clamp(88px, 11vw, 160px); padding: clamp(64px, 8vw, 112px) 0; background: #0F1D2A; border-top: 1px solid var(--v-line-2); border-bottom: 1px solid var(--v-line); }
.dd-ae__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dir-d .dd-panel--ae { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); }
.dir-d .dd-ae__shot { margin: clamp(40px, 5vw, 64px) 0 0; }
.dd-ae__shot picture { display: block; border-radius: var(--v-radius); overflow: hidden; box-shadow: var(--v-card); }
.dd-ae__shot img { display: block; width: 100%; height: auto; }

.da2 { display: block; width: 100%; height: auto; }
.da2-file { fill: none; stroke: var(--dd-steel); stroke-width: 1.8; stroke-linejoin: round; }
.da2-row { fill: none; stroke: rgba(147,165,183,.55); stroke-width: 1.6; stroke-linecap: round; }
.da2-arrow { fill: none; stroke: var(--v-cyan-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.da2-go { fill: none; stroke: #E9FCFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 100; opacity: 0; }
.da2-card { fill: rgba(98,226,239,.04); stroke: var(--v-cyan-2); stroke-width: 1.8; }
.da2-chip { fill: none; stroke-width: 1.4; }
.da2-chip--warn { stroke: #F7D547; }
.da2-chip--ok { stroke: var(--dd-green); }
.da2-lab { font-family: var(--font-mono); font-size: 16px; letter-spacing: .03em; }
.da2-lab--s { fill: #B3C4D2; font-size: 15px; }
.da2-lab--w { fill: #F7D547; font-size: 14px; }
.da2-lab--ok { fill: #6FE0A8; font-size: 14px; }
.da2-lab--t { fill: #E6EEF4; font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.da2-ghost { fill: rgba(194,206,218,.28); }
.da2-rule { stroke: rgba(147,165,183,.25); stroke-width: 1; }
.da2-axis { stroke: rgba(147,165,183,.55); stroke-width: 1.4; }
.da2-band { fill: rgba(247,213,71,.10); stroke: rgba(247,213,71,.5); stroke-width: 1; stroke-dasharray: 3 3; }
.da2-trace { fill: none; stroke: var(--v-cyan-2); stroke-width: 2.2; stroke-linecap: round; }
.da2-trace--b { stroke: rgba(147,165,183,.6); stroke-width: 1.8; }

/* ---------- dealers (C's glimpse) ---------- */
.dd-dealer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(28px, 5vw, 64px); border-radius: 24px;
  background: linear-gradient(135deg, rgba(0,184,212,.10), rgba(14,95,179,.08) 50%, rgba(255,255,255,.02));
  box-shadow: 0 0 0 .5px rgba(98,226,239,.25) inset, 0 0 0 1px var(--v-ring); }
.dir-d .dd-dealer__join { margin: 20px 0 0; font-size: 15px; color: var(--v-fg-3); }
.dd-dealer__join a { display: inline-block; padding: 4px 0; }
.dd-dealer__list { list-style: none; padding: 0; margin: 0; }
.dd-dealer__list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 15px 0; border-top: .5px solid var(--v-line-2); }
.dd-dealer__list li:first-child { border-top: 0; }
.dd-dealer__n { font-size: 17px; color: var(--v-fg); }
.dd-dealer__c { font-family: var(--font-mono); font-size: 13px; color: var(--v-fg-3); }

/* ---------- Winnipeg close ---------- */
.dd-bleed--wide picture, .dd-bleed--wide img { display: block; width: 100%; }
.dd-bleed--wide img { height: auto; aspect-ratio: 21 / 9; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(180deg, #000 70%, transparent), linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.dd-home { padding-bottom: clamp(88px, 10vw, 136px); }

/* ---------- motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .df-pulse { opacity: 1; animation: df-flow 3.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--d); }
  .df-canpulse { opacity: 1; animation: df-can 3.2s cubic-bezier(.45,0,.55,1) infinite; }
  .df-led { animation: df-led 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .06s); }
  /* one channel picked: only its lead carries the pulse, then the ECU cable */
  .df.is-ch .df-pulses .df-pulse.is-on { opacity: 1; animation: df-flow 2.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay: 0s; }
  .df.is-ch .df-canpulse { animation-duration: 2.4s; }
  .df.is-ch .df-led { animation: none; }
  .dd-pair__item, .dd-pair__go { transition-duration: .18s; }
  @keyframes df-flow { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 45% { stroke-dasharray: 10 100; stroke-dashoffset: -90; opacity: 1; } 52%, 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
  @keyframes df-can { 0%, 48% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 52% { opacity: 1; } 90% { stroke-dasharray: 18 100; stroke-dashoffset: -82; opacity: 1; } 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
  @keyframes df-led { 0%, 40%, 100% { opacity: 1; } 47% { opacity: .55; } }

  /* the Analysis Engine drawing plays once when it scrolls into view (dir-d.js arms it), then rests on the result.
     Without JS, or with reduced motion, the finished drawing simply shows. */
  .da2.is-armed .da2-f, .da2.is-armed .da2-band { opacity: 0; }
  .da2.is-armed .da2-trace:not(.da2-trace--b) { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
  .da2.is-play .da2-row { animation: da2-read .5s ease-out both; animation-delay: calc(var(--i) * .11s); }
  .da2.is-play .da2-go { animation: da2-go .9s ease-in-out .7s both; }
  .da2.is-play .da2-f--1 { animation: da2-in .45s var(--v-ease) 1.45s both; }
  .da2.is-play .da2-f--2 { animation: da2-in .45s var(--v-ease) 1.7s both; }
  .da2.is-play .da2-trace:not(.da2-trace--b) { animation: da2-draw 1.3s ease-out 1.9s both; }
  .da2.is-play .da2-band { animation: da2-band .5s ease-out 3s both; }
  @keyframes da2-read { 0% { stroke: rgba(147,165,183,.55); } 45% { stroke: var(--v-cyan-2); } 100% { stroke: rgba(147,165,183,.55); } }
  @keyframes da2-go { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 10% { opacity: 1; } 80% { stroke-dasharray: 30 100; stroke-dashoffset: -70; opacity: 1; } 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
  @keyframes da2-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes da2-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes da2-band { from { opacity: 0; } to { opacity: 1; } }

  .dd-here { transition: opacity .25s var(--v-ease), transform .25s var(--v-ease), visibility .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-vid__btn { display: none; }
}
.da2-f { transform-box: fill-box; }

/* replay (Analysis Engine drawing) */
.dd-cap--row { align-items: center; justify-content: space-between; }
.dd-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--v-fg-2); background: rgba(255,255,255,.04); box-shadow: 0 0 0 1px var(--v-line-2) inset; }
.dd-replay:hover { color: var(--v-fg); box-shadow: 0 0 0 1px rgba(98,226,239,.5) inset; }
.dd-replay:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.dd-replay__ico { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent; }
.dd-replay[hidden] { display: none; }

/* you are here: the two chapters, the current one lit */
.dd-here { position: fixed; z-index: 30; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(11,22,32,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 .5px var(--v-line-2) inset, 0 10px 30px -12px rgba(0,0,0,.7); max-width: calc(100vw - 32px); }
.dd-here[hidden] { display: none; }
.dd-here.is-off { opacity: 0; visibility: hidden; transform: translate(-50%, 12px); pointer-events: none; }
.dd-here__a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 500 13px/1 var(--font-sans); color: var(--v-fg-3); transition: color .18s var(--v-ease), background .18s var(--v-ease); }
.dd-here__a:hover { color: var(--v-fg); }
.dd-here__a:focus-visible { outline: 2px solid var(--v-cyan-2); outline-offset: 2px; }
.dd-here__dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px currentColor inset; }
.dd-here__a[aria-current="true"] { color: var(--v-fg); background: rgba(98,226,239,.10); }
.dd-here__a[aria-current="true"] .dd-here__dot { background: var(--v-cyan-2); box-shadow: 0 0 8px rgba(98,226,239,.7); }

/* ---------- layout by width ---------- */
@media (min-width: 720px) {
  .dd-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 900px) {
  .dd-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(8px, 2vw, 32px); }
  .dir-d .dd-hero__stage { margin-right: calc(-1 * clamp(0px, (100vw - 1180px) / 2, 120px)); }
  .dd-cyl__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
  .dd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dd-fit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dd-ae__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .dd-dealer { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 64px; }
}
@media (max-width: 899px) {
  .dd-hero__copy { text-align: center; }
  .dir-d .dd-h1, .dir-d .dd-hero__say { margin-left: auto; margin-right: auto; }
  .dd-hero__copy .dd-cta { justify-content: center; }
  .dd-hero__copy .dd-cta { order: 3; }
  .dd-hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .dd-hero__copy { display: contents; }
  .dd-hero__copy .v-eyebrow { order: 0; }
  .dd-hero__copy .dd-h1 { order: 1; }
  .dir-d .dd-hero__stage { order: 2; margin: 4px calc(-1 * var(--v-g)) 0; }
  .dd-hero__copy .dd-hero__say { order: 3; margin-top: 8px; }
  .dd-hero__copy .dd-cta { order: 4; margin-top: 22px; }
  .dir-d .dd-hero__copy .v-eyebrow { text-align: center; }
  .dir-d .dd-h1 { text-align: center; }
  .dir-d .dd-hero__say { text-align: center; }
}
@media (max-width: 560px) {
  .df-lab { font-size: 30px; }
  .df-lab--s { font-size: 26px; }
  .df-num { font-size: 26px; }
  .da2-lab { font-size: 26px; }
  .da2-lab--t { font-size: 24px; }
  .da2-lab--w, .da2-lab--ok { font-size: 21px; }
  .dir-d .dd-fit__fig, .dir-d .dd-panel { padding: 14px; }
  .dd-diag text { font-size: 26px; }
  .dir-d .dd-ae__shot { display: none; }  /* the real screen is unreadable at phone width; the sample-verdict page shows it full size */
  .dd-band__fig img { aspect-ratio: 4 / 3; }
  .dd-bleed--wide img { aspect-ratio: 16 / 10; }
  .dd-cta .v-btn { flex: 1 1 100%; }
  .dd-vid--hero .dd-vid__btn { bottom: 9%; right: 7%; }
}
.dir-d .dd-ae__shot { max-width: 980px; margin-left: auto; margin-right: auto; }