@charset "utf-8";
/* ============================================================================
   page-industries.css — page-scoped styles for industries.html
   Design system: see _build/PATTERNS.md. Tokens only — no raw colour values.
   Document order:
     1. Hero (.ihero + .branchfield)
     2. Tiers statement (.tiers)
     3. Vertical markets (.vmarkets / .vm)
     4. Lanes (.lanes / .lane)
     5. Shared: chipsets + human-owned boundary plates
     6. Bottlenecks (.bnecks)
     7. Mapping questions (.qs)
     8. Applicability (.applies)
     9. Closing CTA (.icta)
    10. Responsive: 1024 / 768 / 375
    11. Reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   0. BAND TONES — light-primary rhythm.
   The page is all-light except the closing CTA, so separation has to come from
   a deliberate tonal ladder: paper → white → paper → sky-tint → white → …
   Card-bearing bands keep a tinted ground so white cards read as objects.
   ------------------------------------------------------------------------ */

.tone-white {
  --bg: #fff;
  background-color: #fff;
  background-image: none;
}

/* A gradient set through the `background` shorthand resets background-color to
   transparent, so the band reported the dark root colour underneath it and its
   light-band ink failed at 1.03:1. Paint the colour AND the gradient. */
.tone-sky {
  --bg: #EFF5FB;
  background-color: #EFF5FB;
  background-image: linear-gradient(180deg, #EBF2F9 0%, #F6F9FC 62%, #F3F7FA 100%);
}

.ihero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ihero__eyebrow {
  margin: 0;
}

.ihero__title {
  max-width: 17ch;
  text-wrap: balance;
  margin: 0;
  font-size: clamp(2.5rem, 4.3vw, 4rem);
  letter-spacing: -.032em;
  line-height: 1.03;
}

/* Two-tone display heading: the second clause inks DOWN toward navy.
   The tail stop used to land on the pale channel teal, so the final word
   ("first.") fell to ~2.5:1 on near-white. Every stop now stays deep ink. */
.ihero__accent {
  display: block;
  background: linear-gradient(96deg, var(--blue-deep) 8%, #135C79 58%, #0F5566 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .ihero__accent { color: var(--blue-deep); }
}

.ihero__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(var(--s-10), 4.5vw, var(--s-16));
}

.ihero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  min-width: 0;
}

.ihero__lead {
  max-width: 42ch;
  margin: var(--s-1) 0 0;
  color: var(--body);
}

.ihero__cta {
  flex-wrap: wrap;
  align-items: center;
  margin: var(--s-2) 0 0;
}

.ihero__fine {
  margin: 0;
  color: var(--muted);
}

.ihero__fine strong {
  color: var(--ink);
  font-weight: 600;
}

/* Structural facts strip — counts of what is on this page, not client metrics. */
.ihero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(var(--s-10), 4vw, var(--s-16)) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.istat {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-6) var(--s-6) var(--s-5) 0;
  border-right: 1px solid var(--line-soft);
}

.istat:last-child { border-right: 0; }
.istat + .istat { padding-left: var(--s-6); }

/* Every cell is built the same way: label, numeral, one line of payoff. The
   fourth cell is the page's single action, so it — and only it — is amber. */

.istat__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

.istat__value {
  display: flex;
  align-items: baseline;
  gap: .14em;
  margin: var(--s-1) 0 0;
  font-family: var(--font-display);
  /* the numerals were undersized for the whitespace they sit in — the strip is
     a full-width band, so the figures carry it */
  font-size: clamp(2.9rem, 4.6vw, 4.25rem);
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-deep);
}

.istat__value i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.istat--amber .istat__value { color: var(--amber); }

.istat__note {
  margin: var(--s-2) 0 0;
  max-width: 26ch;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--body);
  /* four short captions on one baseline — none of them may drop a lone word */
  text-wrap: balance;
}

/* the action cell: same anatomy, amber numeral, and it is a link */
.istat--amber .istat__label { color: color-mix(in srgb, var(--amber) 52%, var(--ink)); }

/* This caption is the amber cell's action, so it is a real tap target, not an
   inline word. The rule is drawn with text-decoration rather than a border so it
   still hugs each wrapped line once the box is padded out past 44px. */
.istat__note a {
  display: inline-block;
  min-height: 44px;
  min-width: 44px;
  padding: var(--s-2) 0;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 34%, transparent);
  transition: text-decoration-color var(--d-2) var(--e-out), color var(--d-2) var(--e-out);
}

.istat__note a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   MICRO-LABEL — the quiet in-card label.
   The mono uppercase eyebrow with its leading em-rule is the SECTION signal.
   It was also being used for every list header inside every card (ten of them),
   which turned a signal into a tic. Inside a card the label is sentence case,
   unspaced, and sits under a short hairline instead.
   ------------------------------------------------------------------------ */
.microlabel {
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-sans, inherit);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* Jump index — mono link row under the hero copy, on its own hairline. */
.ihero__index {
  width: 100%;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.ihero__index > :first-child {
  margin-bottom: var(--s-4);
}

/* the index already sits on its own hairline — don't stack a second one */
.ihero__index .microlabel {
  border-top: 0;
  padding-top: 0;
}

.ihero__index ul,
.ihero__index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}

.ihero__index li {
  margin: 0;
}

.ihero__index a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--body);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  text-decoration: none;
  transition:
    border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}

.ihero__index a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-card-2);
  transform: translateY(-1px);
}

/* --- hero figure ---------------------------------------------------------- */

/* White card plate under the hero diagram — depth on light is shadow, not glow. */
.ihero__figure {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  min-width: 0;
  padding: clamp(var(--s-4), 1.8vw, var(--s-7));
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background:
    linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--paper) 60%, #fff) 100%);
  box-shadow: var(--shadow-lift, 0 24px 60px -28px rgba(9, 32, 56, .35));
}

.ihero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(115% 85% at 80% 8%,
    color-mix(in srgb, var(--blue) 14%, transparent), transparent 68%);
  filter: blur(34px);
  transform: scale(1.04);
}

.ihero__figure .branchfield[viewBox] {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin-inline: auto;
}

.branchfield--stack { display: none; }

@media (max-width: 760px) {
  .ihero__figure .branchfield--wide  { display: none; }
  .ihero__figure .branchfield--stack { display: block; max-width: 420px; }
}

/* ---------------------------------------------------------------------------
   SHARED DIAGRAM KIT — geometry contract (ART-DIRECTION §4)
   Channel 2.5 · output 3 · port r4 · node r17 (rings 32/44) · human amber 2 / 4 4
   Labels IBM Plex Mono 10.5 / 1.4 tracking · plate corners 10, chips 6.
   Colour resolves through --rf-* theme variables; the literals are fallbacks
   only, so a band that flips still repaints correctly.
   ------------------------------------------------------------------------ */

.branchfield,
.railfig,
.lanefig,
.bneck__fig {
  --dg-ch-0: var(--rf-ch-0, #2F9AA8);
  --dg-ch-1: var(--rf-ch-1, #1077D7);
  --dg-ch-2: var(--rf-ch-2, #0B4F8A);
  --dg-node: var(--rf-node-0, #1077D7);
  --dg-out: var(--rf-out, #0B4F8A);
  --dg-port-c: var(--rf-port, #2F9AA8);
  --dg-ring-c: var(--rf-ring, rgba(16, 119, 215, .16));
  --dg-amber: var(--rf-amber, #E7A63A);
  --dg-amber-ink: var(--rf-amber-ink, #8A5D05);
  --dg-label-c: var(--rf-label, #4A5B68);
  --dg-ink: var(--ink, #0E1C28);
  --dg-face: var(--paper-card, #fff);
}

/* --- marks ---------------------------------------------------------------- */

.branchfield .dg-channel,
.railfig .dg-channel,
.lanefig .dg-channel,
.bneck__fig .dg-channel {
  fill: none;
  stroke: var(--dg-ch-1);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.branchfield .dg-output,
.railfig .dg-output,
.lanefig .dg-output,
.bneck__fig .dg-output {
  fill: none;
  stroke: var(--dg-out);
  stroke-width: 3;
  stroke-linecap: round;
}

.branchfield .dg-port,
.railfig .dg-port,
.lanefig .dg-port,
.bneck__fig .dg-port {
  fill: var(--dg-port-c);
  stroke: none;
}

.branchfield .dg-port .dg-channel,
.railfig .dg-port .dg-channel,
.lanefig .dg-port .dg-channel { stroke: var(--dg-port-c); }

.branchfield .dg-node,
.railfig .dg-node,
.lanefig .dg-node {
  fill: var(--dg-face);
  stroke: var(--dg-node);
  stroke-width: 3;
}

.branchfield .dg-ring,
.railfig .dg-ring {
  fill: none;
  stroke: var(--dg-ring-c);
  stroke-width: 1.5;
}

.branchfield .dg-human,
.railfig .dg-human,
.lanefig .dg-human,
.bneck__fig .dg-human {
  fill: none;
  stroke: var(--dg-amber);
  stroke-width: 2;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.branchfield .dg-human-dot,
.railfig .dg-human-dot,
.lanefig .dg-human-dot,
.bneck__fig .dg-human-dot {
  fill: var(--dg-amber);
  stroke: var(--dg-face);
  stroke-width: 1.5;
}

/* --- plates and type ------------------------------------------------------ */

.branchfield .dg-plate,
.railfig .dg-plate,
.lanefig .dg-plate,
.bneck__fig .dg-plate {
  fill: var(--dg-face);
  stroke: color-mix(in srgb, var(--dg-ch-2) 30%, transparent);
  stroke-width: 1.5;
}

.branchfield .dg-plate--human,
.railfig .dg-plate--human,
.lanefig .dg-plate--human,
.bneck__fig .dg-plate--human {
  stroke: color-mix(in srgb, var(--dg-amber) 78%, transparent);
  stroke-width: 2;
  fill: color-mix(in srgb, var(--dg-amber) 8%, var(--dg-face));
}

.branchfield text,
.railfig text,
.lanefig text,
.bneck__fig text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  fill: var(--dg-label-c);
}

.branchfield .dg-plate-label,
.railfig .dg-plate-label,
.lanefig .dg-plate-label,
.bneck__fig .dg-plate-label { fill: var(--dg-ink); }

/* the secondary line inside a plate was reading as grey noise at a glance —
   it keeps its rank but inks toward the plate label */
.branchfield .dg-plate-sub,
.railfig .dg-plate-sub,
.lanefig .dg-plate-sub,
.bneck__fig .dg-plate-sub { fill: color-mix(in srgb, var(--dg-label-c) 50%, var(--dg-ink)); }

.branchfield .dg-label,
.railfig .dg-label,
.lanefig .dg-label,
.bneck__fig .dg-label { fill: color-mix(in srgb, var(--dg-label-c) 62%, var(--dg-ink)); }

/* --- the hero figure is the one diagram read from a metre away -------------
   It sits alone on a 600px plate, so it carries a heavier weight of the same
   marks: type one tier up, channels one half-step thicker. Geometry unchanged. */
.branchfield text { font-size: 11.5px; }
.branchfield .dg-plate-label { font-size: 13px; letter-spacing: 1.3px; }
.branchfield .dg-plate-sub   { font-size: 10.5px; }

.branchfield .dg-channel { stroke-width: 3; }
.branchfield .dg-human   { stroke-width: 2.75; stroke-dasharray: 5 4; }
.branchfield .dg-node    { stroke-width: 3.5; }
.branchfield .dg-plate   { stroke-width: 1.75; }
.branchfield .dg-plate--human { stroke-width: 2.5; }

.branchfield .dg-label--accent { fill: var(--dg-ch-2); }

.branchfield .dg-label--human,
.railfig .dg-label--human,
.lanefig .dg-label--human,
.bneck__fig .dg-label--human { fill: var(--dg-amber-ink); }

/* --- branchfield specifics ------------------------------------------------ */

.bf-spine        { stroke: color-mix(in srgb, var(--dg-ch-2) 30%, transparent); }
.bf-kicker       { fill: var(--dg-ch-0); }
.bf-teal         { stroke: var(--dg-ch-0); }
.bf-blue         { stroke: var(--dg-ch-1); }

.bf-dot--teal    { fill: var(--dg-ch-0); }
.bf-dot--blue    { fill: var(--dg-ch-1); }

.bf-rule--teal   { stroke: color-mix(in srgb, var(--dg-ch-0) 52%, transparent); }
.bf-rule--blue   { stroke: color-mix(in srgb, var(--dg-ch-1) 48%, transparent); }

.bf-t-teal       { fill: color-mix(in srgb, var(--dg-ch-0) 62%, var(--dg-ink)); }
.bf-t-blue       { fill: var(--dg-ch-2); }
.bf-t-amber      { fill: var(--dg-amber-ink); }

/* solid, not dashed: on this page a dashed line means "a person decides", and
   plugging your rules into the shared model is not a decision point */
.bf-config {
  fill: none;
  stroke: color-mix(in srgb, var(--dg-ch-2) 55%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.bf-config-pill  { stroke: color-mix(in srgb, var(--dg-ch-2) 26%, transparent); }
.bf-config-text  { fill: var(--dg-ch-2); }

/* the amber plate is the single focal point — give it a soft lift */
.branchfield .bf-rule--amber {
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--dg-amber) 30%, transparent));
}

/* Signal packets ride the three connector paths out of the governed node. */
.branchfield__packets {
  pointer-events: none;
}

.bpk {
  offset-rotate: 0deg;
  opacity: 0;
  animation: bpk-run 3.4s linear infinite;
}

.bpk--1 {
  fill: var(--dg-ch-0);
  offset-path: path("M318 128 C 334 112, 336 62, 348 62");
  animation-delay: 0s;
}

.bpk--2 {
  fill: var(--dg-ch-1);
  offset-path: path("M323 140 H348");
  animation-delay: .5s;
}

.bpk--3 {
  fill: var(--dg-amber);
  offset-path: path("M318 152 C 334 168, 336 218, 348 218");
  animation-delay: 1s;
}

/* without motion-path support the circles would pile up at 0,0 — hide them */
@supports not (offset-path: path("M0 0 H10")) {
  .branchfield__packets {
    display: none;
  }
}

@keyframes bpk-run {
  0%        { offset-distance: 0%;   opacity: 0; }
  12%       { opacity: 1; }
  60%       { offset-distance: 100%; opacity: 1; }
  72%, 100% { offset-distance: 100%; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   2. TIERS STATEMENT
   ------------------------------------------------------------------------ */

.tiers {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--s-8), 4vw, var(--s-12));
  padding-top: var(--s-10);
  border-top: 1px solid var(--line);
}

.tiers__statement {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.tiers__line {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.tiers__line .serif-accent {
  display: block;
  margin-top: var(--s-2);
  color: var(--blue-deep);
}

.tiers__note {
  margin: 0;
  max-width: 34ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

.tiers__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.tier {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
  transition: border-color var(--d-2) var(--e-out), box-shadow var(--d-3) var(--e-out);
}

.tier:hover {
  box-shadow: var(--shadow-lift, 0 18px 40px -20px rgba(9, 32, 56, .28));
}

/* the leading badge must not stretch to the column width */
.tier > :first-child {
  justify-self: start;
}

.tier:first-child {
  border-left-color: var(--blue);
}

.tier__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

.tier:first-child .tier__title {
  color: var(--blue-deep);
}

.tier__text {
  margin: 0;
  max-width: 56ch;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   3. VERTICAL MARKETS
   ------------------------------------------------------------------------ */

.vmarkets {
  gap: var(--s-6);
  align-items: stretch;
}

.vm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  container-type: inline-size;
  container-name: vmcard;
  transition:
    box-shadow var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out),
    border-color var(--d-2) var(--e-out);
}

.vm:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  box-shadow: var(--shadow-lift, 0 26px 60px -26px rgba(9, 32, 56, .34));
}

.vm:hover .rf-live { stroke: var(--blue-deep); }

.vm__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: 30px;
}

/* Same anatomy as the lanes below: the industry name is the small mono label,
   the expensive moment is the headline (MARKETING-RESEARCH §4a). */
.vm__cat {
  margin: calc(var(--s-2) * -1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.vm__name {
  margin: 0;
  max-width: 22ch;
  color: var(--ink);
  letter-spacing: -.015em;
  text-wrap: balance;
}

.vm__figure {
  width: 100%;
  margin: var(--s-1) 0 0;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
}

/* --- railfig / lanefig: the record path inside each card -------------------
   Every rail on this page is composed the same way: the source label top-left,
   the record path across the bottom, and the amber human gate pinned to the
   top-right as a plate. Only WHERE the amber branch leaves the line changes —
   which is the argument both bands are making. */

/* the leader that carries the source into the first station */
.railfig .rf-in {
  stroke: var(--dg-port-c);
}

/* the one focal point in each rail — same soft lift as the hero figure */
.railfig .dg-plate--human,
.lanefig .dg-plate--human {
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--dg-amber) 16%, transparent));
}

.railfig .rf-track {
  fill: none;
  stroke: color-mix(in srgb, var(--dg-ch-2) 16%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.railfig .rf-end,
.lanefig .rf-end,
.bneck__fig .rf-end {
  fill: var(--dg-out);
}

/* --- page-local kit extensions (same geometry contract, .dg-* namespace) ---
   .dg-gap   a broken / dead stretch of path
   .dg-miss  a station that should have fired and did not
   .dg-hint  the faint content lines inside a record plate
   .dg-plate--filled  a record already on file
   ------------------------------------------------------------------------ */

.branchfield .dg-gap,
.railfig .dg-gap,
.lanefig .dg-gap,
.bneck__fig .dg-gap {
  fill: none;
  stroke: var(--dg-amber);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bneck__fig .dg-miss {
  fill: var(--dg-face);
  stroke: var(--dg-amber);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
}

.lanefig .dg-hint,
.bneck__fig .dg-hint {
  fill: none;
  stroke: color-mix(in srgb, var(--dg-ch-2) 26%, transparent);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.bneck__fig .dg-hint--human {
  stroke: color-mix(in srgb, var(--dg-amber) 62%, transparent);
}

.lanefig .dg-plate--filled,
.bneck__fig .dg-plate--filled {
  fill: color-mix(in srgb, var(--dg-ch-1) 16%, var(--dg-face));
  stroke: color-mix(in srgb, var(--dg-ch-1) 52%, transparent);
}

/* .dg-chase — a link the system is still chasing. Dashed like the human branch
   but in the channel colour, so it never competes with the one amber focal point. */
.lanefig .dg-chase {
  fill: none;
  stroke: color-mix(in srgb, var(--dg-ch-1) 55%, transparent);
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

/* specificity has to beat core.css's `main svg[viewBox]:not([width])` cap */
.vm .vm__figure > svg[viewBox] {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
  margin-inline: auto;
}

/* Below ~470px of card width the wide rail would push its mono labels under 9px
   and hide the amber gate behind a horizontal scroll — the one mark that must be
   seen. Same model, drawn as a vertical spine instead (as the hero does). */
.branchfield--stack,
.vm .vm__figure > svg.railfig--stack[viewBox] { display: none; }

@container vmcard (max-width: 480px) {
  .vm .vm__figure > svg.railfig--wide[viewBox]  { display: none; }
  .vm .vm__figure > svg.railfig--stack[viewBox] { display: block; max-width: 280px; margin-inline: 0; }
}

/* full-width card (single-column layouts): let the rail breathe a little more */
@container vmcard (min-width: 640px) {
  .vm .vm__figure > svg[viewBox] {
    max-width: 580px;
  }
}

.vm__systems {
  display: grid;
  gap: var(--s-3);
  width: 100%;
}

.vm__systems > :first-child {
  margin: 0;
}

.vm__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Bilingual is revenue capture, not an accessibility footnote. Teal, not amber —
   amber on this page means "a person must decide". */
.bicap {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto;
  gap: var(--s-4) clamp(var(--s-6), 3vw, var(--s-10));
  margin-top: var(--s-6);
  padding: var(--s-6) clamp(var(--s-6), 3vw, var(--s-8));
  border: 1px solid var(--line);
  border-left: 3px solid var(--rf-ch-0, #2F9AA8);
  border-radius: var(--r-xl);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
}

.bicap__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rf-ch-0, #2F9AA8) 60%, var(--ink));
}

.bicap__line {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--body);
}

.bicap__line strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 860px) {
  .bicap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3);
  }
}

/* ---------------------------------------------------------------------------
   4. LANES
   ------------------------------------------------------------------------ */

.lanes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6);
}

.lane {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  background: var(--paper-card, #fff);
  transition:
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out);
}

.lane:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: var(--shadow-lift, 0 20px 46px -22px rgba(9, 32, 56, .3));
}

/* Every lane carries the same anatomy as the two market cards above it, in the
   same order: who / the expensive moment / the rail / what breaks / the boundary
   / one link. The category name is the SMALL type — the moment is the headline. */
.lane__id {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lane__id .card__index {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lane__cat {
  color: var(--blue-deep);
}

/* the expensive moment is the largest object in the card */
.lane__moment {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.6vw, 1.65rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}

.lane__who,
.lane__breaks {
  display: grid;
  gap: var(--s-3);
  width: 100%;
}

.lane__who > :first-child,
.lane__breaks > :first-child {
  margin: 0;
}

/* what breaks here — a scannable column, never prose */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.ticks > li {
  position: relative;
  margin: 0;
  padding-left: var(--s-6);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--body);
}

.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 62%, transparent);
}

.lane__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Each lane carries the same micro-rail so the band is not four text blocks.
   The only thing that differs between them is where the amber gate sits and
   what it is called — which is the whole point of the band. */
.lane__fig {
  width: 100%;
  margin: 0;
  padding: var(--s-5) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--paper) 55%, #fff) 100%);
}

.lane .lane__fig > svg[viewBox] {
  display: block;
  width: 100%;
  height: auto;
  max-width: 420px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   5. SHARED — chipsets + human-owned boundary
   ------------------------------------------------------------------------ */

.chipset {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chipset > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--body);
  white-space: nowrap;
}

.chipset > li a {
  color: inherit;
  text-decoration: none;
}

.chipset > li:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.chipset--sm > li {
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Human-owned boundary — amber means a person decides. Never decorative.
   This block repeats six times on the page, so it carries the MEANING of amber
   (a 2px rule + an amber-ink label) without the FILL: six tinted panels would
   spend the page's one attention colour on repeated legal fine print. */
.bound {
  display: grid;
  gap: var(--s-1);
  width: 100%;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
  border: 0;
  border-left: 2px solid var(--amber-bright, var(--amber));
  border-radius: 0;
  background: none;
}

.bound__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
}

/* raw amber is only ~2.5:1 on paper — deepen it toward the band's ink so the
   label stays real copy at 4.5:1+ while keeping the amber meaning */
.band--light .bound__label,
.band--paper-white .bound__label,
.band--light .q--human .q__num,
.band--paper-white .q--human .q__num {
  color: color-mix(in srgb, var(--amber) 52%, var(--ink));
}

.band--light .bound,
.band--paper-white .bound {
  border-left-color: var(--amber-bright, #E7A63A);
}

.bound__text {
  margin: 0;
  max-width: 60ch;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--body);
}

/* ---------------------------------------------------------------------------
   6. BOTTLENECKS
   ------------------------------------------------------------------------ */

/* headline accents ink DOWN toward navy — never wash out to grey on light */
.bn__accent {
  background: linear-gradient(96deg, var(--blue-deep) 6%, #135C79 66%, #0F5566 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .bn__accent { color: var(--blue-deep); }
}

.bnecks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}

.bneck {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-3) var(--e-out),
    transform var(--d-3) var(--e-out);
}

.bneck:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: var(--shadow-lift, 0 18px 40px -20px rgba(9, 32, 56, .3));
}

.bneck__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}

.bneck__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-2);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* --- micro-figures: each names the failure in one glance ------------------ */

.bneck__fig {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: var(--s-2) 0 var(--s-1);
  align-self: end;
}

/* every bottleneck figure shares one skeleton: a 320×68 field, the label row on
   the same baseline, one amber event, and nothing else competing for the eye */
.bneck__fig[viewBox] {
  aspect-ratio: 320 / 68;
}

.bneck__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-card);
  color: var(--link);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

.bneck__link svg {
  flex: none;
  transition: transform var(--d-2) var(--e-out);
}

.bneck__link:hover {
  border-color: var(--line-strong);
  background: var(--bg-card-2);
}

.bneck__link:hover svg {
  transform: translateX(3px);
}

/* The one synthetic-data line on this page.
   A demonstration running on invented data is a normal fact about a demonstration,
   not a confession — so it is stated once, at footnote weight, on a hairline.
   It is deliberately NOT `.synthetic-note`: the amber slab is the loudest object
   in the system and amber on this page means "a person must decide here". */
.synth-line {
  margin: var(--s-8) 0 0;
  padding-top: var(--s-4);
  max-width: 72ch;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   7. MAPPING QUESTIONS
   ------------------------------------------------------------------------ */

/* The five mapping questions render as a horizontal rail on a white plate:
   five stations, one of which (04) is the amber human gate. */
.qs {
  position: relative;
  list-style: none;
  margin: 0;
  padding: clamp(var(--s-8), 3vw, var(--s-12)) clamp(var(--s-6), 3vw, var(--s-10)) var(--s-8);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
}

/* the rail the stations sit on */
.qs::before {
  content: "";
  position: absolute;
  left: clamp(var(--s-6), 3vw, var(--s-10));
  right: clamp(var(--s-6), 3vw, var(--s-10));
  top: calc(clamp(var(--s-8), 3vw, var(--s-12)) + 7px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--blue) 55%, transparent) 0%,
    color-mix(in srgb, var(--blue) 55%, transparent) 58%,
    var(--amber-bright, #E7A63A) 58%, var(--amber-bright, #E7A63A) 78%,
    color-mix(in srgb, var(--rf-ch-0, #2F9AA8) 65%, transparent) 78%);
}

.q {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
}

.q__node {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--paper-card, #fff);
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 4px var(--paper-card, #fff);
}

.q__num {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .12em;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
}

.q__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title-3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}

/* 04 — the human gate. The one amber focal point in this band. */
.q--human .q__node {
  border-color: var(--amber-bright, #E7A63A);
  background: var(--amber-bright, #E7A63A);
  box-shadow:
    0 0 0 4px var(--paper-card, #fff),
    0 0 0 8px color-mix(in srgb, var(--amber-bright, #E7A63A) 26%, transparent);
}

.q--human .q__num { color: var(--amber); }

.q--record .q__node { border-color: var(--rf-ch-0, #2F9AA8); }
.q--record .q__num  { color: color-mix(in srgb, var(--rf-ch-0, #2F9AA8) 58%, var(--ink)); }

.qs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-8);
}

.qs__key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* legend swatches mirror the three node states */
.qs__key > * {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.qs__key > *::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}

.qs__key > *:nth-child(2)::before { background: var(--amber-bright, #E7A63A); }
.qs__key > *:nth-child(3)::before { background: var(--rf-ch-0, #2F9AA8); }

/* ---------------------------------------------------------------------------
   8. APPLICABILITY
   ------------------------------------------------------------------------ */

.applies {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(var(--s-8), 4vw, var(--s-16));
}

.applies__body {
  margin: var(--s-5) 0 0;
  max-width: 42ch;
  color: var(--body);
}

.applies__right {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.applies__caption {
  margin: 0;
}

.applies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.applies__list > li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper-card, #fff);
  box-shadow: var(--shadow-card);
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ink);
  transition: border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out);
}

.applies__list > li:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  transform: translateY(-2px);
}

.applies__list > li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 62%, transparent);
}

.applies__note {
  margin: 0;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   9. CLOSING CTA
   ------------------------------------------------------------------------ */

.icta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
  .ihero__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--s-10);
  }

  /* two rich cards side by side get too narrow for their rail diagrams */
  .vmarkets {
    grid-template-columns: minmax(0, 1fr);
  }

  .applies__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bnecks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .ihero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .istat {
    padding: var(--s-5) var(--s-4) var(--s-5) 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .istat + .istat { padding-left: 0; }

  .istat:nth-child(2n) {
    padding-left: var(--s-5);
    border-right: 0;
  }

  .istat:nth-last-child(-n + 2) { border-bottom: 0; }

  .ihero__title {
    max-width: 20ch;
  }

  .ihero__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-12);
  }

  .ihero__figure {
    max-width: 560px;
    margin-inline: 0;
  }

  .tiers {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  /* the five-station rail becomes a vertical list */
  .qs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .qs::before { display: none; }

  .q {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--s-5);
    row-gap: var(--s-1);
    align-items: center;
    padding: var(--s-5) 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .q:last-child { border-bottom: 0; }

  .q__node {
    grid-row: 1 / span 2;
    align-self: center;
    box-shadow: none;
  }

  .q--human .q__node {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber-bright, #E7A63A) 26%, transparent);
  }

  .q__num { margin: 0; }

  .applies {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .applies__body {
    max-width: 60ch;
  }
}

@media (max-width: 700px) {
  .lane {
    padding: var(--s-6);
  }

  .bnecks,
  .tiers__legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .applies__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below ~480px the lane card is narrow enough that a 340-unit rail would render
   its mono labels around 8px. ART-DIRECTION §4.6: never squash — so the rails
   keep their geometry and the type steps up instead, landing back near 10px. */
@media (max-width: 480px) {
  .lane__fig {
    padding: var(--s-5) var(--s-2);
  }

  .lanefig text {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .ihero__title {
    max-width: none;
  }

  .ihero__figure {
    max-width: 100%;
  }

  .ihero__cta .btn {
    width: 100%;
  }

  .ihero__index a {
    font-size: var(--t-micro);
  }

  /* the rail diagram would shrink its labels below legibility — let it keep a
     readable size and scroll inside its own plate instead */
  .vm__figure {
    padding: var(--s-4) var(--s-3);
  }

  .chipset > li {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   11. REDUCED MOTION
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* packets rest mid-wire instead of travelling */
  .bpk {
    animation: none;
    opacity: .9;
    offset-distance: 62%;
  }

  .ihero__index a,
  .lane,
  .vm,
  .bneck,
  .tier,
  .applies__list > li,
  .bneck__link {
    transition: none;
  }

  .ihero__index a:hover,
  .lane:hover,
  .vm:hover,
  .bneck:hover,
  .applies__list > li:hover {
    transform: none;
  }
}