@charset "utf-8";
/* ==========================================================================
   DOVIUM — visual.css
   The Supply Intelligence System: hero network, vendor signal wall, the
   Source → Structure → Move spine, the product explorer, the BOM
   consolidation panel and the robotics band.

   Loaded after site.css, which still owns the tokens, typography, buttons,
   header, footer and forms. Nothing here introduces a colour: every state is
   a change in light intensity, scale or position.
   ========================================================================== */

:root {
  --lit: rgba(255, 255, 255, 0.92);
  --half-lit: rgba(255, 255, 255, 0.58);
  --rest: rgba(255, 255, 255, 0.40);
  --mark-scale: 1;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1. Moment rhythm — adjacent sections never share a density
   -------------------------------------------------------------------------- */
.moment { position: relative; }
.moment--quiet { padding-block: clamp(42px, 4.4vw, 68px); }
.moment--dense { padding-block: clamp(60px, 6.4vw, 98px); }
.moment--bleed { padding-block: 0; }

.moment__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 60ch;
  margin-bottom: clamp(24px, 2.8vw, 42px);
}
.moment__head .h2 { max-width: 20ch; }
.moment__lede {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 56ch;
}

/* ==========================================================================
   2. HERO — the sourcing network
   ========================================================================== */
.vhero {
  position: relative;
  min-height: clamp(520px, 72vh, 740px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.vhero__canvas {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
}
/* Keeps the network from competing with the headline on the left. */
.vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(100deg, var(--bg) 8%, rgba(11, 12, 14, 0.86) 34%,
      rgba(11, 12, 14, 0.06) 58%, rgba(11, 12, 14, 0.30) 100%),
    linear-gradient(180deg, rgba(11, 12, 14, 0.7) 0%, rgba(11, 12, 14, 0) 22%,
      rgba(11, 12, 14, 0) 78%, rgba(11, 12, 14, 0.8) 100%);
}
.vhero__inner {
  position: relative;
  width: 100%;
  padding-block: clamp(64px, 8vh, 100px);
}
.vhero__body { max-width: 40rem; }
.vhero__eyebrow { margin-bottom: clamp(18px, 2.4vw, 26px); }
.vhero__title {
  font-size: clamp(2.75rem, 6.6vw, 5rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
.vhero__lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  margin-bottom: clamp(28px, 3.2vw, 38px);
}

/* Phase readout — the mono caption that names what the network is doing */
.vhero__phase {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(20px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-700);
  pointer-events: none;
}
.vhero__phase b {
  color: var(--fg-4);
  font-weight: 500;
  min-width: 15ch;
}
.vhero__ticks { display: flex; gap: 4px; }
.vhero__ticks i {
  width: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 420ms var(--ease);
}
.vhero__ticks i[data-on="true"] { background: var(--lit); }
@media (max-width: 700px) { .vhero__phase { display: none; } }

/* ==========================================================================
   3. VENDOR SIGNAL WALL
   ========================================================================== */
.wall {
  display: grid;
  gap: clamp(10px, 1.6vw, 22px);
  padding-block: clamp(10px, 1.4vw, 18px);
  overflow: hidden;
}
.wall__track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.2vw, 18px);
  will-change: transform;
}
/* Ambient drift: ±9px, slow, asynchronous. Nothing ever leaves reach. */
.wall__track[data-track="0"] { animation: dv-drift-a 34s ease-in-out infinite; }
.wall__track[data-track="1"] { animation: dv-drift-b 41s ease-in-out infinite; }
@keyframes dv-drift-a {
  0%, 100% { transform: translate3d(-9px, 0, 0); }
  50%      { transform: translate3d(9px, 0, 0); }
}
@keyframes dv-drift-b {
  0%, 100% { transform: translate3d(7px, 0, 0); }
  50%      { transform: translate3d(-7px, 0, 0); }
}
.wall[data-paused="true"] .wall__track { animation-play-state: paused; }

/* Narrow screens: the drifting tracks hand over to a deliberate 2 × 7 grid.
   14 divides exactly, so every row is full — no orphan cell at any width. */
@media (max-width: 840px) {
  .wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .wall__track { display: contents; }
  .vendor { border-bottom: 1px solid var(--line); border-radius: 0; }
  .vendor:nth-child(odd) { border-right: 1px solid var(--line); }
  .wall__track[data-track="1"] .vendor:nth-last-child(-n+2) { border-bottom: 0; }
  .vendor__trace { display: none; }
}

.vendor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Uniform cell height: marks range from 15 px to 40 px tall, and equal
     cells are what make two rows of seven read as a designed grid. */
  min-height: clamp(68px, 7vw, 96px);
  padding: 10px clamp(14px, 2.2vw, 30px) 18px;
  border-radius: var(--radius);
  isolation: isolate;
  transition: background 420ms var(--ease);
}
.vendor::before {
  /* hairline container, only visible once the cell is engaged */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 420ms var(--ease), background 420ms var(--ease);
}

/* The mark itself. CSS masking gives full control of light intensity while
   the SVG stays an external, cacheable file. Simple Icons ship as
   single-colour silhouettes, so nothing is lost in the conversion. */
.vendor__mark {
  display: block;
  width: calc(var(--mw) * var(--mark-scale));
  height: calc(var(--mh) * var(--mark-scale));
  background-color: var(--rest);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 420ms var(--ease), transform 420ms var(--ease-out);
}

.vendor__cat {
  /* Absolutely positioned so the hidden caption can never set the cell's
     width — a wide caption under a narrow mark was what pushed the last
     cell of a full track onto an orphan row. */
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translate(-50%, 4px);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey-700);
  opacity: 0;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease-out);
  white-space: nowrap;
}

/* The trace: a hairline that reaches toward the neighbouring brand. */
.vendor__trace {
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--half-lit), rgba(255, 255, 255, 0));
  transition: width 620ms var(--ease-out);
  pointer-events: none;
}

/* One engaged state, reached by hover, focus or the ambient sweep. */
.vendor:hover,
.vendor:focus-visible,
.vendor[data-lit="true"] { background: rgba(255, 255, 255, 0.035); }
.vendor:hover::before,
.vendor:focus-visible::before,
.vendor[data-lit="true"]::before { border-color: var(--line-2); }

.vendor:hover .vendor__mark,
.vendor:focus-visible .vendor__mark,
.vendor[data-lit="true"] .vendor__mark {
  background-color: var(--lit);
  transform: translateY(-2px);
}
.vendor:hover .vendor__cat,
.vendor:focus-visible .vendor__cat,
.vendor[data-lit="true"] .vendor__cat { opacity: 1; transform: translate(-50%, 0); }
.vendor:hover .vendor__trace,
.vendor:focus-visible .vendor__trace,
.vendor[data-lit="true"] .vendor__trace { width: clamp(10px, 2.4vw, 30px); }

/* Neighbours of the engaged cell come half up — this is what reads as a
   network rather than a list of tiles. */
.vendor[data-near="true"] .vendor__mark { background-color: var(--half-lit); }

.wall-note {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--grey-700);
  max-width: 84ch;
}
.wall-hint {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey-700);
  margin-bottom: clamp(8px, 1vw, 12px);
}

@media (max-width: 900px) { :root { --mark-scale: 0.86; } }
@media (max-width: 600px) { :root { --mark-scale: 0.74; } }
@media (max-width: 400px) { :root { --mark-scale: 0.66; } }

/* ==========================================================================
   4. SOURCE → STRUCTURE → MOVE
   ========================================================================== */
.spine {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
/* The grid item stretches to the full row so the panel inside it has room
   to travel; the panel itself is what sticks. */
.spine__side { position: relative; height: 100%; }
.spine__visual {
  position: sticky;
  top: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-inset);
  padding: clamp(16px, 2vw, 24px);
  overflow: hidden;
}
.spine__visual svg { width: 100%; height: auto; display: block; }
.spine__cap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-700);
}
.spine__cap b { color: var(--fg-4); font-weight: 500; }

.spine__steps { display: grid; }
.stage {
  padding-block: clamp(28px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  align-content: center;
  min-height: clamp(0px, 20vh, 220px);
  opacity: 0.42;
  transition: opacity 520ms var(--ease);
}
.stage:first-child { border-top: 0; }
.stage[data-active="true"] { opacity: 1; }
.stage__no {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}
.stage[data-active="true"] .stage__no { color: var(--fg); }
.stage__title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.stage__line { font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); max-width: 44ch; }
.stage__pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.stage__pts li {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
}

@media (max-width: 940px) {
  .spine { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .spine__side { height: auto; }
  .spine__visual { position: sticky; top: 72px; z-index: 2; margin-bottom: 4px; }
  .stage { min-height: 0; padding-block: clamp(26px, 5vw, 40px); opacity: 1; }
}

/* ==========================================================================
   5. PRODUCT EXPLORER

   One copy of each category in the DOM. On desktop `display: contents` lifts
   the trigger and the content out of their wrapper so the grid can place all
   seven triggers in the left column and stack the seven contents in the
   right. On mobile the wrapper returns and the same markup is an accordion.
   No duplicated copy, so the word budget is paid once.
   ========================================================================== */
.explorer {
  display: grid;
  grid-template-columns: minmax(200px, 0.32fr) minmax(0, 0.68fr);
  /* Seven explicit rows: without them `grid-row: 1 / -1` on the content
     resolves to a single row and the first trigger inherits the full height
     of the figure, pushing the rest of the list down. */
  grid-template-rows: repeat(7, min-content);
  column-gap: clamp(24px, 3.4vw, 56px);
  border-top: 1px solid var(--line);
  align-content: start;
}
.exp-item { display: contents; }

.exp-trigger {
  position: relative;
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 4px 16px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-4);
  font: 500 0.9375rem/1.3 var(--font);
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color 260ms var(--ease), padding-left 320ms var(--ease-out);
}
.exp-trigger::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 0;
  background: var(--white);
  transition: height 320ms var(--ease-out);
}
.exp-trigger__no {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--grey-700);
  transition: color 260ms var(--ease);
}
.exp-trigger__sign { display: none; }
.exp-trigger:hover { color: var(--fg-2); }
.exp-trigger[aria-selected="true"],
.exp-trigger[aria-expanded="true"] { color: var(--fg); padding-left: 22px; }
.exp-trigger[aria-selected="true"]::before,
.exp-trigger[aria-expanded="true"]::before { height: 58%; }
.exp-trigger[aria-selected="true"] .exp-trigger__no { color: var(--fg-4); }

.exp-content {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-content: start;
  padding-block: clamp(14px, 1.6vw, 20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 560ms var(--ease-out),
    visibility 0s linear 420ms;
}
.exp-content[data-shown="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Place each trigger on its own row. */
.exp-item:nth-child(1) > .exp-trigger { grid-row: 1; }
.exp-item:nth-child(2) > .exp-trigger { grid-row: 2; }
.exp-item:nth-child(3) > .exp-trigger { grid-row: 3; }
.exp-item:nth-child(4) > .exp-trigger { grid-row: 4; }
.exp-item:nth-child(5) > .exp-trigger { grid-row: 5; }
.exp-item:nth-child(6) > .exp-trigger { grid-row: 6; }
.exp-item:nth-child(7) > .exp-trigger { grid-row: 7; }

.exp-figure {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-inset);
  aspect-ratio: 2.15 / 1;
  overflow: hidden;
}
.exp-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.exp-copy { display: grid; gap: 12px; justify-items: start; }
.exp-copy__title { font-size: clamp(1.25rem, 1.9vw, 1.5rem); letter-spacing: -0.022em; color: var(--fg); }
.exp-copy__text { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); max-width: 52ch; }

/* Mobile: the wrapper returns and the same markup becomes an accordion. */
@media (max-width: 860px) {
  .explorer { display: block; grid-template-rows: none; }
  .exp-item { display: block; border-bottom: 1px solid var(--line); }
  .exp-trigger {
    border-bottom: 0;
    padding: 18px 0;
    font-size: 1.0625rem;
    color: var(--fg);
  }
  .exp-trigger::before { display: none; }
  .exp-trigger[aria-expanded="true"] { padding-left: 0; }
  .exp-trigger__sign {
    display: block;
    margin-left: auto;
    width: 12px; height: 12px;
    position: relative;
    flex: none;
  }
  .exp-trigger__sign::before,
  .exp-trigger__sign::after {
    content: "";
    position: absolute;
    background: var(--fg-3);
    transition: transform 300ms var(--ease-out), opacity 200ms var(--ease);
  }
  .exp-trigger__sign::before { left: 0; top: 5px; width: 12px; height: 1px; }
  .exp-trigger__sign::after { left: 5px; top: 0; width: 1px; height: 12px; }
  .exp-trigger[aria-expanded="true"] .exp-trigger__sign::after {
    transform: rotate(90deg);
    opacity: 0;
  }
  .exp-content {
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 22px;
  }
  .exp-content[data-shown="true"] { display: grid; }
}

/* ==========================================================================
   5b. Spine states — one diagram, cross-faded
   ========================================================================== */
.spine-svg .sp-state {
  opacity: 0;
  transition: opacity 520ms var(--ease);
  pointer-events: none;
}
.spine-svg[data-stage="0"] .sp-state[data-st="0"],
.spine-svg[data-stage="1"] .sp-state[data-st="1"],
.spine-svg[data-stage="2"] .sp-state[data-st="2"] { opacity: 1; }

/* ==========================================================================
   6. ENTERPRISE & AI — the consolidation panel
   ========================================================================== */
.consol {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 60%),
    var(--bg-raised);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(24px, 2.8vw, 42px);
  align-items: center;
}
@media (max-width: 940px) { .consol { grid-template-columns: minmax(0, 1fr); } }
.consol__copy { display: grid; gap: 16px; }
.consol__labels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.consol__labels li {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 8px 13px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--bg-inset);
}
.consol__figure { position: relative; }
.consol__figure svg { width: 100%; height: auto; display: block; }

/* ==========================================================================
   7. ROBOTICS BAND — full bleed, cinematic
   ========================================================================== */
.band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-inset);
  overflow: hidden;
}
.band__stage {
  position: relative;
  height: clamp(270px, 26vw, 372px);
}
.band__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.band__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.9) 0%, rgba(8, 9, 11, 0) 26%,
    rgba(8, 9, 11, 0) 62%, rgba(8, 9, 11, 0.96) 100%);
}
.band__copy {
  position: relative;
  padding-block: clamp(24px, 2.6vw, 38px) clamp(32px, 3.6vw, 54px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 860px) { .band__copy { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.band__title {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.034em;
  color: var(--fg);
}
.band__meta {
  position: absolute;
  right: var(--gutter);
  top: clamp(18px, 2.4vw, 28px);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-700);
  text-align: right;
  line-height: 1.9;
  pointer-events: none;
}
@media (max-width: 700px) { .band__meta { display: none; } }

/* ==========================================================================
   8. FOUNDER + CLOSING CTA
   ========================================================================== */
.founder-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding-block: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) { .founder-strip { grid-template-columns: minmax(0, 1fr); } }
.founder-strip__id { display: grid; gap: 4px; min-width: 15ch; }
.founder-strip__name { color: var(--fg); font-weight: 500; font-size: 1.0625rem; letter-spacing: -0.014em; }
.founder-strip__role {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.founder-strip__body { display: grid; gap: 14px; align-items: start; }

.close {
  position: relative;
  border-top: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
}
.close__inner {
  position: relative;
  padding-block: clamp(52px, 5vw, 76px);
  display: grid;
  gap: clamp(22px, 2.6vw, 32px);
  justify-items: start;
  max-width: 48rem;
}
.close__title {
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.038em;
  color: var(--fg);
}
.close__line { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.close__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}
.close__field svg { width: 100%; height: 100%; }

/* ==========================================================================
   9. PRODUCTS PAGE — visual index and compact records
   ========================================================================== */
.cat-index {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
@media (max-width: 900px) { .cat-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cat-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-index__item {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: clamp(16px, 2vw, 22px) 10px;
  border-right: 1px solid var(--line);
  color: var(--fg-4);
  text-decoration: none;
  text-align: center;
  transition: color 260ms var(--ease), background 260ms var(--ease);
}
.cat-index__item:last-child { border-right: 0; }
.cat-index__item:hover { color: var(--fg); background: rgba(255, 255, 255, 0.035); }
.cat-index__item svg { width: 40px; height: 26px; }
.cat-index__label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .cat-index__item:nth-child(4n) { border-right: 0; }
  .cat-index__item:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .cat-index__item:nth-child(2n) { border-right: 0; }
  .cat-index__item { border-bottom: 1px solid var(--line); }
}

.prec {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: start;
  padding-block: clamp(34px, 4.4vw, 60px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.prec:last-of-type { border-bottom: 1px solid var(--line); }
.prec:nth-of-type(even) .prec__fig { order: -1; }
@media (max-width: 860px) {
  .prec { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .prec:nth-of-type(even) .prec__fig { order: 0; }
}
.prec__body { display: grid; gap: 14px; align-content: start; justify-items: start; }
.prec__fig {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-inset);
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}
.prec__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Progressive disclosure for the requirement lists */
.disclose { width: 100%; border-top: 1px solid var(--line); }
.disclose > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-4);
  transition: color 200ms var(--ease);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { color: var(--fg-2); }
.disclose > summary::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 280ms var(--ease-out);
}
.disclose[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.disclose .checklist { padding-bottom: 12px; }

/* Compact audience segmentation */
.segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (max-width: 780px) { .segments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .segments { grid-template-columns: minmax(0, 1fr); } }
.segment {
  display: grid;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 26px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 300ms var(--ease);
}
.segment:hover { background: rgba(255, 255, 255, 0.03); }
.segment__no { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.14em; color: var(--grey-700); }
.segment__name { color: var(--fg); font-weight: 500; font-size: 0.9375rem; letter-spacing: -0.01em; }
.segment__note { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-4); }

/* ==========================================================================
   10. Shared figure primitives used by every generated diagram
   ========================================================================== */
.dg-grid   { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.dg-line   { stroke: rgba(255, 255, 255, 0.30); stroke-width: 1.25; fill: none; }
.dg-line-2 { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; fill: none; }
.dg-fill   { fill: rgba(255, 255, 255, 0.06); }
.dg-node   { fill: rgba(255, 255, 255, 0.30); }
.dg-node-lit { fill: rgba(255, 255, 255, 0.92); }
.dg-label {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  fill: rgba(255, 255, 255, 0.32);
  text-transform: uppercase;
}
.dg-pulse {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 3 200;
  animation: dg-run 6s linear infinite;
}
@keyframes dg-run { from { stroke-dashoffset: 203; } to { stroke-dashoffset: 0; } }

/* ==========================================================================
   11. Reduced motion — every animation has a composed still
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none !important; transform: none !important; }
  .dg-pulse { animation: none !important; stroke-dasharray: none; stroke: rgba(255, 255, 255, 0.5); }
  .exp-figure svg { transition: none !important; }
  .stage { opacity: 1 !important; }
  .spine__visual { position: static; }
}

/* --------------------------------------------------------------------------
   12. Products / Company support
   -------------------------------------------------------------------------- */
.rule-note {
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--fg-4);
  max-width: 74ch;
}
.segments--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 780px) { .segments--3 { grid-template-columns: minmax(0, 1fr); } }
.prec__body .idx { display: block; }
.panel .consol__labels { margin-top: 16px; }