/* Platform (Orchestration Platform) — built in the x3 design language
   (2026-07-20). Page: /platform/  (.p-platform)
   Mono labels, dark/bright rhythm, big display type, chips, compact rows.
   Sections: hero · consolidation statement · capabilities (8 tabs) ·
   why enterprises choose Incode · faq · cta. */

.p-platform {
  background: var(--color-black);
  color: var(--color-white);
}

.p-platform .plat-mono {
  font-family: var(--font-sans);
}
.p-platform .plat-label {
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-wide);
  color: rgba(255, 255, 255, 0.5);
}
.p-platform .plat-label--light {
  color: var(--color-kicker-on-white);
}

.p-platform .plat-caps__inner,
.p-platform .plat-build__inner,
.p-platform .plat-why__inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 768px) {
  .p-platform .plat-caps__inner,
  .p-platform .plat-build__inner,
  .p-platform .plat-why__inner {
    padding-block: var(--space-section);
  }
}
@media (min-width: 1024px) {
  .p-platform .plat-caps__inner,
.p-platform .plat-build__inner,
.p-platform .plat-why__inner {
    padding-inline: 32px;
  }
}

/* shared section title */
.p-platform .plat-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 26px;
  line-height: 1.05;
}
@media (min-width: 640px) { .p-platform .plat-title { font-size: 32px; } }
@media (min-width: 768px) { .p-platform .plat-title { font-size: 36px; } }

/* chips */
.p-platform .plat-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}
.p-platform .plat-chip--light {
  border-color: var(--color-border-light);
  background: var(--color-white);
  color: var(--color-grey-500);
}

/* ---------- hero ----------
   Shell, copy lockup, AND ground (dot grid + corner wash + blue foot
   wash) all come from the shared HubHero component (components/HubHero
   .astro + hub-hero.css, 2026-07-28 unification with /products/) — this
   page keeps ONLY the capability fan below. */
/* proof band under the hero: one quiet centered strip of count-up stats —
   same value+caption vocabulary as the product proof strips */
.p-platform .plat-statband {
  background: var(--color-background);
  color: var(--color-foreground);
  border-top: 1px solid var(--color-border-light);
}
.p-platform .plat-statband__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 72px;
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 44px 20px;
}
.p-platform .plat-statband__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.p-platform .plat-statband__value {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  line-height: 1.1;
}
.p-platform .plat-statband__cap {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-grey-on-white);
}

/* capability fan: the seven capability cards spread across the hero foot
   like a held hand — center card frontmost, sides receding with a tilt.
   --fan-i runs -3..3 from the markup; distance from center drives rotation,
   drop and stacking. Hovering lifts a card straight up. */
.p-platform .plat-hero__fan {
  --fan-w: clamp(220px, 18.5vw, 300px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  /* pinned to the hero's foot and cropped mid-card, like the products-page
     orbit horizon (Sofia, 2026-07-25): the container shows ~62% of the
     center card's height (cards are 4:5, so height = 1.25 × width) and
     hides the rest — the card bottoms never appear, at any viewport */
  /* flex:none so the hub stage's flex-grow can't stretch past the crop */
  flex: none;
  margin-top: auto;
  padding-top: 48px;
  height: calc(var(--fan-w) * 1.25 * 0.62 + 48px);
  overflow: hidden;
}
/* the visual IS the card (Sofia, 2026-07-25): the scene fills the whole
   tile edge to edge, the title floats on top over a white → transparent
   fade so it stays readable — no inner container, no card chrome */
.p-platform .plat-fan__card {
  position: relative;
  display: block;
  width: clamp(220px, 18.5vw, 300px);
  aspect-ratio: 4 / 5;
  margin-inline: -14px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--color-white);
  text-align: left;
  text-decoration: none;
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-black) 8%, transparent);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--fan-i) * 4deg))
    translateY(calc(var(--fan-i) * var(--fan-i) * 16px));
  transition: transform 0.34s var(--ease-out-expo), box-shadow 0.34s ease;
}
/* stacking: cards closer to the center sit on top */
.p-platform .plat-fan__card:nth-child(1),
.p-platform .plat-fan__card:nth-child(5) { z-index: 1; }
.p-platform .plat-fan__card:nth-child(2),
.p-platform .plat-fan__card:nth-child(4) { z-index: 2; }
.p-platform .plat-fan__card:nth-child(3) { z-index: 3; }
.p-platform .plat-fan__card:hover {
  z-index: 10;
  transform: rotate(0deg)
    translateY(calc(var(--fan-i) * var(--fan-i) * 16px - 14px));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-blue) 30%, transparent);
}
/* title bar floating over the scene, fading white → transparent below */
.p-platform .plat-fan__head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  /* dramatic fade: solid white holds past the title and pours down the
     card before releasing the artwork (Sofia, 2026-07-25) */
  padding: 18px 16px 116px;
  background: linear-gradient(
    180deg,
    var(--color-white) 0%,
    var(--color-white) 30%,
    color-mix(in oklab, var(--color-white) 92%, transparent) 50%,
    color-mix(in oklab, var(--color-white) 72%, transparent) 66%,
    color-mix(in oklab, var(--color-white) 45%, transparent) 80%,
    color-mix(in oklab, var(--color-white) 20%, transparent) 91%,
    transparent 100%
  );
  pointer-events: none;
}
.p-platform .plat-fan__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--color-blue-100) 80%, var(--color-white));
  color: var(--color-blue);
}
.p-platform .plat-fan__name {
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-black);
  text-align: left;
}
/* home-page capability scene fills the card edge to edge; hovering the
   card zooms the artwork gently (the scrim itself never changes) */
.p-platform .plat-fan__media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 62%;
  transition: transform 0.5s var(--ease-out-expo);
}
.p-platform .plat-fan__card:hover .plat-fan__media { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .p-platform .plat-fan__media { transition: none; }
  .p-platform .plat-fan__card:hover .plat-fan__media { transform: none; }
}
/* narrow screens: the fan folds into a tidy two-column grid — fully
   visible, so the crop and the bottom-pinning come off */
@media (max-width: 1099px) {
  /* the fan folds into a grid and shows fully — release the fixed
     viewport height so nothing crops */
  .p-platform .plat-hero { height: auto; min-height: 100svh; }
  .p-platform .plat-hero .hub-hero__inner { padding-bottom: 48px; }
  .p-platform .plat-hero__fan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 40px;
    padding-top: 0;
    height: auto;
    overflow: visible;
  }
  .p-platform .plat-fan__card {
    width: auto;
    aspect-ratio: 16 / 10;
    margin-inline: 0;
    transform: none;
  }
  .p-platform .plat-fan__card:hover { transform: none; }
}

/* ---------- capabilities (dark, tabs) ---------- */
.p-platform .plat-caps {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-black);
}
.p-platform .plat-caps__intro {
  margin-top: 16px;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: rgba(255, 255, 255, 0.7);
}
.p-platform .plat-caps__tabs { margin-top: 40px; }
.p-platform .plat-caps__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.p-platform .plat-caps__tab {
  height: 38px;
  padding-inline: 16px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.p-platform .plat-caps__tab:hover { color: var(--color-white); border-color: rgba(255, 255, 255, 0.4); }
.p-platform .plat-caps__tab.is-active {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}
.p-platform .plat-caps__panel {
  display: none;
  margin-top: 32px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
.p-platform .plat-caps__panel.is-active {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .p-platform .plat-caps__panel.is-active {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}
.p-platform .plat-caps__main { padding: 32px; }
.p-platform .plat-caps__line {
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-2xl);
  line-height: 1.35;
}
@media (min-width: 768px) { .p-platform .plat-caps__line { font-size: 24px; } }
.p-platform .plat-caps__points {
  margin-top: 24px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-platform .plat-caps__points li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.75);
}
.p-platform .plat-caps__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-x3-blue-bright);
}
/* side tile: capability glyph on the aurora-tinted panel */
.p-platform .plat-caps__side {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 95% at 15% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 45%, transparent), transparent 65%),
    color-mix(in oklab, var(--color-x3-blue-deep) 12%, var(--color-black));
}
@media (min-width: 900px) {
  .p-platform .plat-caps__side {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }
}
.p-platform .plat-caps__icon {
  width: 72px;
  height: 72px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.p-platform .plat-caps__num {
  position: absolute;
  right: 20px;
  bottom: 16px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- why enterprises choose incode (bright, numbered rows) ---------- */
.p-platform .plat-why {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-platform .plat-why .plat-title { color: var(--color-black); }
.p-platform .plat-why__rows {
  margin-top: 48px;
  border-top: 1px solid var(--color-border-light);
}
.p-platform .plat-why__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  padding-block: 28px;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 900px) {
  .p-platform .plat-why__row {
    grid-template-columns: 56px minmax(0, 1.6fr) auto;
    gap: 32px;
  }
}
.p-platform .plat-why__name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  font-size: var(--fs-2xl);
  line-height: 1.15;
  color: var(--color-black);
}
@media (min-width: 768px) { .p-platform .plat-why__name { font-size: 24px; } }
.p-platform .plat-why__line {
  margin-top: 6px;
  max-width: 560px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-grey-on-white);
}
.p-platform .plat-why__num {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-blue);
}
/* the proof stat: the number is the hero — Incode Blue display value over
   a tracked caption (statband anatomy, blue for presence on the bright
   ground; the white pill it replaces read washed out) */
.p-platform .plat-why__proof {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 900px) {
  .p-platform .plat-why__proof {
    align-items: flex-end;
    text-align: right;
  }
}
.p-platform .plat-why__value {
  font-weight: 500;
  letter-spacing: var(--track-tighter);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) { .p-platform .plat-why__value { font-size: 34px; } }
.p-platform .plat-why__cap {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
}

/* faq retired 2026-08-03 — the page uses the unified FaqSection (components/faq-section.css) */

/* ---------- workflow demo (interactive) ----------
   #workflow-demo (.plat-build), between capabilities and why. Interaction
   lives in /js/behaviors/workflow-demo.js; the canvas reuses the hero board's
   vocabulary (dot grid, white node cards, blue connector dots, mono state
   labels). Yes/No elbows are bordered divs (border-top + border-left/right
   with one rounded corner), same construction as the age-assurance-2
   reference; --wfd-gap on the branch row keeps the horizontal segment meeting
   the stem regardless of column width. */
.p-platform .plat-build {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-background);
  color: var(--color-foreground);
}
.p-platform .plat-build .plat-title { color: var(--color-black); }
.p-platform .plat-build__intro {
  margin-top: 16px;
  max-width: 640px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}
.p-platform .plat-build__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 40px;
}
@media (min-width: 1024px) {
  .p-platform .plat-build__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
  }
}

/* palette */
.p-platform .plat-build__palette-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-black);
}
.p-platform .plat-build__palette-hint {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
}
.p-platform .plat-build__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.p-platform .plat-build__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  text-align: left;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.p-platform .plat-build__chip:active { cursor: grabbing; }
.p-platform .plat-build__chip:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-blue) 40%, transparent);
}
.p-platform .plat-build__chip:disabled { cursor: default; }
.p-platform .plat-build__chip.is-used {
  border-color: color-mix(in oklab, var(--color-blue) 30%, transparent);
  background: color-mix(in oklab, var(--color-blue-100) 45%, var(--color-white));
  opacity: 0.5;
}
.p-platform .plat-build__chip.is-full { opacity: 0.4; }
.p-platform .plat-build__chip-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.p-platform .plat-build__chip-label {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-black);
}
.p-platform .plat-build__chip-mark {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--color-grey-300);
}
.p-platform .plat-build__chip.is-used .plat-build__chip-mark { color: var(--color-blue); }

/* canvas — same recipe as the hero's plat-board */
.p-platform .plat-build__canvas {
  position: relative;
  min-height: 480px;
  padding: 20px;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  background:
    radial-gradient(circle at 1px 1px, var(--color-grey-100) 1px, transparent 0) 0 0 / 22px 22px,
    var(--color-white);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
@media (min-width: 640px) { .p-platform .plat-build__canvas { padding: 28px 32px; } }
.p-platform .plat-build__canvas.is-over {
  border-color: var(--color-blue);
  background:
    radial-gradient(circle at 1px 1px, var(--color-blue-200) 1px, transparent 0) 0 0 / 22px 22px,
    color-mix(in oklab, var(--color-blue-100) 40%, var(--color-white));
}
.p-platform .plat-build__canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.p-platform .plat-build__canvas-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-black);
}
.p-platform .plat-build__reset {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wider);
  color: var(--color-grey-on-white);
  transition: color 0.2s ease;
}
.p-platform .plat-build__reset:hover { color: var(--color-black); }

/* the flow scrolls horizontally when the nested branches need width */
.p-platform .plat-build__scroll { overflow-x: auto; }
.p-platform .plat-build__empty {
  margin: 40px auto 0;
  width: 100%;
  max-width: 340px;
  padding: 56px 24px;
  border: 2px dashed var(--color-grey-200);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-grey-300);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.p-platform .plat-build__drop {
  width: 100%;
  padding: 16px 12px;
  border: 2px dashed var(--color-grey-200);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-grey-300);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.p-platform .plat-build__canvas.is-over .plat-build__empty,
.p-platform .plat-build__canvas.is-over .plat-build__drop {
  border-color: color-mix(in oklab, var(--color-blue) 60%, transparent);
  background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
}

.p-platform .plat-build__tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px auto 0;
  min-width: 440px;
  max-width: 560px;
}
.p-platform .plat-build__lane { width: 100%; max-width: 300px; }
.p-platform .plat-build__split { width: 100%; max-width: 520px; }

/* node cards — same vocabulary as plat-board__node */
.p-platform .plat-build__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  background: var(--color-white);
  animation: plat-build-in 0.3s var(--ease-out-expo);
  transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
@keyframes plat-build-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
}
.p-platform .plat-build__node-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.p-platform .plat-build__node-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-black);
}
.p-platform .plat-build__node-state {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-widest);
  color: var(--color-green-600);
}
.p-platform .plat-build__node-x {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--color-grey-300);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.p-platform .plat-build__node:hover .plat-build__node-x,
.p-platform .plat-build__node-x:focus-visible { opacity: 1; }
.p-platform .plat-build__node-x:hover {
  color: var(--color-red-500);
  border-color: var(--color-red-300);
}
@media (hover: none) { .p-platform .plat-build__node-x { opacity: 1; } }
.p-platform .plat-build__node--decision {
  border-color: color-mix(in oklab, var(--color-blue) 35%, var(--color-border-light));
  background: color-mix(in oklab, var(--color-blue-100) 55%, var(--color-white));
}
.p-platform .plat-build__node-diamond {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-blue);
}
.p-platform .plat-build__node-glyph {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.p-platform .plat-build__node--pass .plat-build__node-glyph { color: var(--color-green-600); }
.p-platform .plat-build__node--fail .plat-build__node-glyph { color: var(--color-red-500); }

/* vertical connector: segment · blue dot · segment */
.p-platform .plat-build__vline {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}
.p-platform .plat-build__vline-seg {
  width: 1px;
  height: 8px;
  background: var(--color-grey-200);
}
.p-platform .plat-build__vline-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-blue);
}

/* Yes/No split: stem + two elbow columns */
.p-platform .plat-build__branch { width: 100%; }
.p-platform .plat-build__branch--outer { --wfd-gap: 20px; }
.p-platform .plat-build__branch--inner { --wfd-gap: 12px; }
.p-platform .plat-build__stem {
  display: block;
  margin-inline: auto;
  width: 1px;
  height: 10px;
  background: var(--color-grey-200);
}
.p-platform .plat-build__branch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wfd-gap, 20px);
}
.p-platform .plat-build__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.p-platform .plat-build__col > * { width: 100%; }
.p-platform .plat-build__elbow {
  position: relative;
  height: 36px;
  width: 100%;
  flex-shrink: 0;
}
.p-platform .plat-build__elbow-line {
  position: absolute;
  top: 0;
  bottom: 0;
}
.p-platform .plat-build__elbow--yes .plat-build__elbow-line {
  left: 50%;
  right: calc(var(--wfd-gap, 20px) / -2);
  border-top: 1.5px solid var(--color-green-600);
  border-left: 1.5px solid var(--color-green-600);
  border-top-left-radius: 8px;
}
.p-platform .plat-build__elbow--no .plat-build__elbow-line {
  right: 50%;
  left: calc(var(--wfd-gap, 20px) / -2);
  border-top: 1.5px solid var(--color-red-500);
  border-right: 1.5px solid var(--color-red-500);
  border-top-right-radius: 8px;
}
.p-platform .plat-build__elbow-label {
  position: absolute;
  top: 6px;
  left: 50%;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}
.p-platform .plat-build__elbow--yes .plat-build__elbow-label {
  transform: translateX(calc(-100% - 7px));
  color: var(--color-green-600);
}
.p-platform .plat-build__elbow--no .plat-build__elbow-label {
  transform: translateX(7px);
  color: var(--color-red-500);
}
.p-platform .plat-build__elbow-dot {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-blue);
}

/* run-session states: a traveling glow driven by .is-lit from the behavior */
.p-platform .plat-build__canvas.is-running .plat-build__node:not(.is-lit) { opacity: 0.55; }
.p-platform .plat-build__node.is-lit {
  border-color: color-mix(in oklab, var(--color-blue) 55%, var(--color-border-light));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-blue) 18%, transparent);
}
.p-platform .plat-build__node--pass.is-lit {
  border-color: color-mix(in oklab, var(--color-green-600) 55%, var(--color-border-light));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-green-600) 20%, transparent);
}
.p-platform .plat-build__node.is-pop { animation: plat-build-pop 0.5s var(--ease-out-expo); }
@keyframes plat-build-pop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.08); }
  80% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* footer: run button + post-run caption, then the quiet cross-link */
.p-platform .plat-build__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-light);
}
.p-platform .plat-build__footer .btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.p-platform .plat-build__caption {
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  color: var(--color-grey-on-white);
  animation: plat-build-caption 0.4s var(--ease-out-expo);
}
@keyframes plat-build-caption {
  from { opacity: 0; transform: translateY(6px); }
}
.p-platform .plat-build__more {
  margin-top: 16px;
  font-size: var(--fs-sm);
  color: var(--color-grey-on-white);
}
.p-platform .plat-build__more a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.p-platform .plat-build__more a:hover {
  color: var(--color-blue);
  text-decoration-color: currentColor;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-platform .plat-build__node,
  .p-platform .plat-build__node.is-pop,
  .p-platform .plat-build__caption { animation: none; }
}