/* =================================================================
   INXM site v4 — re-skin per uploaded reference (4 section screenshots).
   Light-canonical. Calm, generous typography.
   ================================================================= */

/* =================================================================
   GLOBAL — eyebrow
   Satoshi all-caps with a // prefix in accent orange.
   ================================================================= */
.eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 64px;
  font-weight: 500;
}
/* Render the // prefix via ::before so the JSX text only contains the label */
.eyebrow::before {
  content: "//";
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0;
  font-weight: 500;
  margin-right: 8px;
  text-transform: none;
}
/* Neutralize legacy inner spans if present */
.eyebrow .ey-slash { display: none; }
.eyebrow .ey-label { color: inherit; text-transform: inherit; letter-spacing: inherit; }

/* =================================================================
   BUTTONS — mono per reference
   ================================================================= */
.btn {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  padding: 0 22px;
  height: 44px;
  border-radius: 9999px;
  font-weight: 400;
  text-transform: none;
}

/* =================================================================
   HERO — typographic, sparse coral dot field
   ================================================================= */
.hero {
  position: relative;
  /* Fill the viewport minus the sticky header so the hero feels like
     a self-contained intro screen. Inner content is vertically centered. */
  min-height: 100vh;
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-canvas);
}
.hero .inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-dots {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}
.hero-dots svg { width: 100%; height: 100%; display: block; }

/* Animated canvas grid in the hero — restore from BackgroundGrid component */
.hero .bg-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--head-medium);
  margin: 0 0 56px;
  max-width: 22ch;
  text-wrap: balance;
}

.hero-intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--head-medium);
  margin: 0 auto 56px;
  max-width: 56ch;
  text-wrap: pretty;
}
.hero-intro p {
  margin: 0 0 4px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
}
.hero-intro p:last-child { margin-bottom: 0; }

.hero-sub {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--head-medium);
  margin: 0 auto 56px;
  max-width: 56ch;
  text-wrap: pretty;
}
.hero-sub strong {
  color: var(--head-strong);
  font-weight: 600;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--head-strong);
  font-weight: 500;
  text-wrap: balance;
  margin: 0 auto 96px;
  max-width: 32ch;
}
.hero-tagline .hl-orange {
  display: inline;
  color: var(--accent);
  background: transparent;
  padding: 0;
}
/* Dark mode — slimmer underline so it reads as a hairline */
:root:not([data-theme="light"]) .hero-tagline .hl-orange,
.theme-shell:not([data-theme="light"]) .hero-tagline .hl-orange {
  color: var(--accent);
}

.hero-ctas { display: flex; gap: 14px; align-items: center; justify-content: center; }

/* =================================================================
   BUBBLE TOKEN CHART — horizontal row, no card chrome
   ================================================================= */
.bubble-chart {
  position: relative;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-sizing: border-box;
}
.bc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.bc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bc-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.bc-counter-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.bc-counter-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  color: var(--head-strong);
  letter-spacing: -0.02em;
  min-width: 4ch;
  text-align: right;
  line-height: 1;
}
.bc-counter-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.bc-stage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  min-height: 380px;
  padding: 64px 0 0;
  border-bottom: 1px solid var(--border-hair);
}
.bc-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border: 0;
}
.bc-bubble-wrap {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
}
.bc-bubble {
  border-radius: 50%;
  background: var(--head-medium);
  opacity: 0.85;
  transition: width 80ms linear, height 80ms linear;
  flex: 0 0 auto;
}
.bc-bubble--directllm {
  background: #6B8290;  /* dusty slate blue */
  opacity: 1;
}
.bc-bubble--langchain {
  background: #8A6E84;  /* muted plum */
  opacity: 1;
}
.bc-bubble--autogen {
  background: #4A4A55;  /* warm charcoal */
  opacity: 1;
}
.bc-bubble--hero {
  background: var(--accent);
  opacity: 1;
  box-shadow: 0 0 0 1px rgba(255, 89, 0, 0.16), 0 0 32px rgba(255, 89, 0, 0.22);
}

/* Tokens label color follows bubble color */
.bc-cell--directllm .bc-tokens-value { color: #6B8290; }
.bc-cell--langchain .bc-tokens-value { color: #8A6E84; }
.bc-cell--autogen   .bc-tokens-value { color: #4A4A55; }

/* Dark mode — slightly desaturated tints so they sit on the dark canvas */
:root:not([data-theme="light"]) .bc-bubble--directllm,
.theme-shell:not([data-theme="light"]) .bc-bubble--directllm { background: #7A95A4; }
:root:not([data-theme="light"]) .bc-bubble--langchain,
.theme-shell:not([data-theme="light"]) .bc-bubble--langchain { background: #A582A0; }
:root:not([data-theme="light"]) .bc-bubble--autogen,
.theme-shell:not([data-theme="light"]) .bc-bubble--autogen { background: #6F6F7B; }
:root:not([data-theme="light"]) .bc-cell--directllm .bc-tokens-value,
.theme-shell:not([data-theme="light"]) .bc-cell--directllm .bc-tokens-value { color: #7A95A4; }
:root:not([data-theme="light"]) .bc-cell--langchain .bc-tokens-value,
.theme-shell:not([data-theme="light"]) .bc-cell--langchain .bc-tokens-value { color: #A582A0; }
:root:not([data-theme="light"]) .bc-cell--autogen .bc-tokens-value,
.theme-shell:not([data-theme="light"]) .bc-cell--autogen .bc-tokens-value { color: #B0B0BA; }
.bc-cell-foot {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 56px;
}
.bc-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--head-strong);
  letter-spacing: -0.005em;
}
.bc-cell--hero .bc-name {
  color: var(--accent);
}
.bc-tokens {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
  display: inline-flex;
  gap: 5px;
  justify-content: center;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.bc-tokens-value {
  color: var(--head-medium);
  font-weight: 500;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.005em;
}
.bc-tokens--hero .bc-tokens-value {
  color: var(--accent);
}
.bc-tokens-unit {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bc-caption {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.bc-caption strong {
  color: var(--head-strong);
  font-weight: 600;
}
.bc-caption-rule {
  flex: 0 0 28px;
  height: 1px;
  background: var(--accent);
}

/* Token chart inside the Product section */
.product-chart {
  margin-top: 96px;
  padding-top: 24px;
}

@container page (max-width: 768px) {
  .bc-stage {
    grid-template-columns: 1fr 1fr;
    min-height: 0;
    row-gap: 24px;
  }
  .bc-cell { padding-bottom: 24px; }
  .bc-counter-value { font-size: 30px; }
}

/* =================================================================
   VISION
   ================================================================= */
.section--vision { padding-top: 96px; padding-bottom: 120px; }
.vision-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.section--vision h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--head-medium);
  margin: 0 0 48px;
  text-wrap: balance;
  max-width: 22ch;
}
.vision-body {
  font-family: var(--font-sans);
}
.vision-body p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0 0 32px;
  max-width: 48ch;
}
.vision-body p:last-child { margin-bottom: 0; }
.vision-body p strong {
  color: var(--accent);
  font-weight: 500;
}
.vision-kicker {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.65;
  color: var(--head-strong);
  font-weight: 500;
}

.vision-image {
  position: relative;
}
.vision-image img.vision-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
.vision-image image-slot {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

/* =================================================================
   PRODUCT
   ================================================================= */
.section--product { padding-top: 80px; padding-bottom: 96px; }
.product-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 64px;
}
.product-h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--head-strong);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
/* "Process Execution Engine" — orange solid */
.product-h2 .h2-orange {
  color: var(--accent);
  font-weight: 500;
}
/* "Compiled AI." — dark with an orange underline */
.product-h2 .h2-underline {
  color: var(--accent);
  font-weight: 500;
}
.product-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-secondary);
  max-width: 56ch;
}
.product-body p {
  margin: 0 0 6px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
}
.product-body p:last-child {
  margin-bottom: 0;
  color: var(--head-strong);
  margin-top: 16px;
}

.product-kicker {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.product-kicker .kicker-head {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--head-strong);
  font-weight: 500;
}
.product-kicker .kicker-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--head-medium);
  font-weight: 400;
  margin: 0;
  max-width: 78ch;
}
.product-kicker .kicker-claim {
  /* "AI shapes the workflow. Orchestrator runs it reliably." */
  color: var(--head-strong);
  font-weight: 500;
}

/* =================================================================
   COMPILE PIPELINE — tighter, rounded card frames
   ================================================================= */
.section--product .compile-row {
  grid-template-columns: 0.7fr 2fr 0.7fr;
  gap: 24px;
  align-items: stretch;
}
.section--product .compile-side {
  border: 1px solid var(--border-hair);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 24px 24px 24px;
  gap: 12px;
}
.section--product .compile-side .label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: 0;
  text-transform: none;
}
.section--product .compile-side .title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--head-strong);
  margin-bottom: 8px;
}
.section--product .compile-side .desc {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-tertiary);
}
.section--product .compile-pipeline {
  border: 1px solid var(--border-hair);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 24px;
  gap: 8px;
}
.section--product .compile-pipeline .stage {
  background: var(--bg-surface);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 16px;
}
.section--product .compile-pipeline .stage.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* =================================================================
   COMPILE PIPELINE — illustrative single-stage run-through.
   Each scene is a small abstract SVG using the same visual vocabulary
   as the value-section pillar graphics. Scenes slide+fade in/out of
   a fixed stage with caption below.
   ================================================================= */
.section--product .cp-runthrough {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section--product .cp-stage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
  align-items: stretch;
}
.section--product .cp-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.2,0,0.2,1);
  pointer-events: none;
  position: relative;
}
.section--product .cp-scene.is-past,
.section--product .cp-scene.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.section--product .cp-scene.is-active {
  }
/* (Previously: orange bar under the active step. Removed — the SVG
   alone carries the accent now, matching the Blissful minimal mode.) */

/* =================================================================
   Inactive scenes — strip the orange accent so only the running
   step carries colour. Override --accent locally to a neutral grey;
   all the cp-art/cp-accent-* primitives that read var(--accent) pick
   this up automatically.
   ================================================================= */
.section--product .cp-scene:not(.is-active) {
  --accent: var(--fg-tertiary, #b8b8b6);
}
/* Soften the whole scene a touch so the active one reads as primary. */
.section--product .cp-scene.is-past .cp-art,
.section--product .cp-scene.is-future .cp-art {
  opacity: 0.55;
  transition: opacity 240ms ease;
}
.section--product .cp-scene.is-active .cp-art { opacity: 1; }
/* Caption stays the same colour regardless of active state — no
   orange number, no orange label. The SVG is the only carrier. */
.section--product .cp-scene__num,
.section--product .cp-scene__label {
  color: var(--fg-secondary);
}
.section--product .cp-scene:not(.is-active) .cp-scene__num,
.section--product .cp-scene:not(.is-active) .cp-scene__label {
  color: var(--fg-tertiary, #8a8a87);
}

/* =================================================================
   COMPILE PIPELINE TIMELINE — under-stage progress strip
   5 thin segments fill with accent as the cycle runs. Single
   "Show all" toggle on the right. No labels — the scene captions
   above already carry them.
   ================================================================= */
.cp-timeline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 24px auto 0;
  padding: 4px 4px 0;
  max-width: 1000px;
  width: 100%;
}
.cp-timeline__track {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.cp-timeline__seg {
  margin: 0;
}
.cp-timeline__btn {
  display: block;
  width: 100%;
  height: 14px;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cp-timeline__btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--bg-sunken, rgba(0,0,0,0.08));
  border-radius: 999px;
}
.cp-timeline__fill {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: background 240ms ease;
}
.cp-timeline__seg.is-past .cp-timeline__fill {
  background: var(--accent);
}
.cp-timeline__seg.is-active .cp-timeline__btn::before {
  background: var(--accent-soft, rgba(255,89,0,0.16));
}
.cp-timeline__btn:hover .cp-timeline__fill { background: var(--accent-press, var(--accent)); }
.cp-timeline__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.cp-timeline__toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-hair);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
  white-space: nowrap;
}
.cp-timeline__toggle:hover {
  color: var(--fg-strong);
  border-color: var(--fg-secondary);
}
.cp-timeline__toggle.is-on {
  background: var(--accent-soft, rgba(255,89,0,0.10));
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 640px) {
  .cp-timeline {
    gap: 12px;
    margin-top: 24px;
    padding-top: 14px;
  }
  .cp-timeline__toggle {
    padding: 7px 12px;
    font-size: 11px;
  }

  /* When the JS detects mobile and applies `.is-mobile`, every
     scene renders at full state — disable the per-line reveal
     animation on the detail cards so all content is visible
     immediately, not staggered. */
  .cp-runthrough.is-mobile .cp-detail__line,
  .cp-runthrough.is-mobile .cp-scene.is-active .cp-detail__line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Scenes stack vertically with a hairline separator instead of
     dimming past/future. */
  .cp-runthrough.is-mobile .cp-scene {
    opacity: 1 !important;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-hair);
  }
  .cp-runthrough.is-mobile .cp-scene:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .cp-runthrough.is-mobile .cp-scene .cp-art {
    opacity: 1 !important;
  }
}

/* =================================================================
   Per-scene use-case detail · the concrete RUN-4412 example
   shown beneath each abstract illustration. Mono content, hairline
   surfaces. Inactive scenes desaturate to match the SVG above.
   ================================================================= */
.section--product .cp-scene {
  /* allow extra vertical room for the detail card */
  align-items: stretch;
}
.cp-detail {
  margin: 14px auto 0;
  padding: 12px 12px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  width: 100%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: var(--fg-strong);
  transition: opacity 240ms ease, border-color 240ms ease;
}
.section--product .cp-scene.is-active .cp-detail {
  border-color: var(--border-strong);
}
.section--product .cp-scene.is-past .cp-detail,
.section--product .cp-scene.is-future .cp-detail {
  opacity: 0.55;
}
.cp-detail__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hair);
}
.cp-detail__byline { color: var(--fg-tertiary); }
.cp-detail__id {
  color: var(--fg-secondary);
  font-feature-settings: "tnum";
  text-transform: none;
  letter-spacing: 0.02em;
}
.cp-detail__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
  font-weight: 500;
  text-wrap: pretty;
}
.cp-detail__q { color: var(--fg-tertiary); }
.cp-detail__code {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--fg-strong);
  white-space: pre;
  overflow-x: auto;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  background: transparent;
}
.cp-detail__code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  letter-spacing: 0;
}
.cp-detail__kv {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-detail__kv > div {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  align-items: baseline;
}
.cp-detail__kv dt {
  color: var(--fg-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.cp-detail__kv dd {
  margin: 0;
  color: var(--fg-strong);
  font-feature-settings: "tnum";
}

/* =================================================================
   Sequential line reveal — animates each line of the snippet card
   one after another. Only the currently-active scene runs the
   animation; past/future scenes show all lines at rest.
   Each .cp-detail__line carries a `--i` custom prop driving its
   delay (0, 1, 2, …). Stagger is 220ms per line.
   ================================================================= */
.cp-detail__line {
  display: inline;
  --i: 0;
}
.cp-detail__codeline {
  display: block;
  white-space: pre;
}
.cp-detail__kv .cp-detail__line {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 6px;
  align-items: baseline;
}

.section--product .cp-scene.is-active .cp-detail__line {
  animation: cp-detail-line 420ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
  animation-delay: calc(0.18s + var(--i) * 0.22s);
}
.section--product .cp-scene:not(.is-active) .cp-detail__line {
  opacity: 1;
  transform: none;
  animation: none;
}
@keyframes cp-detail-line {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   Plan-pipeline shared SVG primitives
   ink-*  reads currentColor (always the page foreground)
   accent-* reads var(--accent), which is overridden to grey on
   inactive scenes — so only the running scene shows colour.
   ================================================================= */
.cp-ink-fill     { fill: currentColor; }
.cp-ink-stroke   { stroke: currentColor; fill: none; }
.cp-accent-fill  { fill: var(--accent); }
.cp-accent-stroke{ stroke: var(--accent); fill: none; }
.section--product 
.section--product .cp-scene__art {
  width: 100%;
  aspect-ratio: 200 / 120;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section--product .cp-scene__art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.section--product .cp-scene__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.section--product .cp-scene__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-tertiary);
  letter-spacing: 0.06em;
}
.section--product .cp-scene__label {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--head-strong);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 20ch;
}
.section--product .cp-scene__desc { display: none; }
.section--product .cp-scene__desc {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-tertiary);
  max-width: 32ch;
}

/* ── Shared illustration primitives ────────────────────────────── */
.cp-art {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cp-art__frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.5;
}
.cp-art__line {
  fill: currentColor;
  opacity: 0.42;
}
.cp-art__caret {
  fill: var(--accent);
  animation: cp-blink 720ms steps(2, jump-none) infinite;
}
@keyframes cp-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 1 · REQUEST — speech-bubble frame + typed lines */
.cp-art--request .cp-art__tail {
  fill: var(--bg-canvas);
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.5;
}

/* 2 · BUILD — DAG nodes + edges */
.cp-art__edge {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.55;
}
.cp-art__node {
  fill: currentColor;
  opacity: 0.65;
}
.cp-art__node--heal {
  fill: var(--accent);
  opacity: 1;
}

/* 3 · APPROVE — button + cursor */
.cp-art__btn {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  transition: fill 220ms;
}
.cp-art__btn.is-pressed { fill: var(--accent); }
.cp-art__btn-lbl {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  fill: var(--accent);
  transition: fill 220ms;
}
.cp-art__btn.is-pressed + .cp-art__btn-lbl { fill: var(--bg-canvas); }
.cp-art__cursor path {
  fill: var(--head-strong);
  stroke: var(--bg-canvas);
  stroke-width: 0.8;
}

/* 4 · EXECUTE — rows tick off */
.cp-art__mark {
  fill: var(--bg-canvas);
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.5;
  transition: fill 240ms, stroke 240ms, opacity 240ms;
}
.cp-art__row.is-done .cp-art__mark,
.cp-art__row.is-active .cp-art__mark {
  fill: var(--accent);
  stroke: var(--accent);
  opacity: 1;
}
.cp-art__chk {
  fill: none;
  stroke: var(--bg-canvas);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp-art__bar {
  fill: currentColor;
  opacity: 0.18;
}
.cp-art__bar-fill {
  fill: var(--accent);
  transition: width 200ms linear;
}

/* 5 · RESULT — document + stamp */
.cp-art__doc rect {
  fill: var(--bg-canvas);
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.85;
}
.cp-art__doc line {
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.4;
}
.cp-art__stamp rect {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
}
.cp-art__stamp text {
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
  fill: var(--accent);
  letter-spacing: 0.08em;
}

/* ── On-art SVG text — body-sized type inside illustrations ── */
.cp-art__prompt {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--accent);
}
.cp-art__text {
  font-family: var(--font-display);
  font-size: 10px;
  fill: var(--head-strong);
}
.cp-art__caret-inline {
  fill: var(--accent);
  font-size: 11px;
  animation: cp-blink 720ms steps(2, jump-none) infinite;
}
.cp-art__hint,
.cp-art__count {
  font-family: var(--font-mono);
  font-size: 7.5px;
  fill: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.cp-art__caption-top {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--accent);
  letter-spacing: 0.06em;
}
.cp-art__caption-sub {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.cp-art__node-lbl {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--head-strong);
  letter-spacing: 0.02em;
}
.cp-art__row-lbl {
  font-family: var(--font-sans);
  font-size: 9px;
  fill: var(--head-strong);
  font-weight: 500;
}
.cp-art__row-sys {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.cp-art__row.is-done .cp-art__row-sys,
.cp-art__row.is-active .cp-art__row-sys {
  fill: var(--accent);
}
.cp-art__row-rule {
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0.2;
}
.cp-art__row-rule-fill {
  stroke: var(--accent);
  stroke-width: 0.6;
}
.cp-art__doc-h {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  fill: var(--head-strong);
  letter-spacing: -0.01em;
}
.cp-art__doc-meta {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--fg-tertiary);
  letter-spacing: 0.04em;
}
.cp-art__doc-mark {
  stroke: var(--accent);
  stroke-width: 1.4;
}
.cp-art__doc-rule {
  stroke: currentColor;
  stroke-width: 0.6;
  opacity: 0.24;
}
.cp-art__doc-k {
  font-family: var(--font-sans);
  font-size: 8px;
  fill: var(--fg-tertiary);
}
.cp-art__doc-v {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--head-strong);
  font-weight: 500;
}
.cp-art--approve .cp-art__btn-lbl {
  font-size: 10px;
}


/* =================================================================
   COST TILE — full-width pillar layout: text bottom-left, big chart right.
   Cost-effective pillar (nth-child(5)) gets its own internal grid.
   ================================================================= */

/* =================================================================
   PROMISE — value pillar tiles in a 12-col bento grid, each with its
   own small illustrative SVG that animates on hover.
   ================================================================= */
.section--promise { padding-top: 80px; padding-bottom: 120px; }
.section--promise .promise-h2 {
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0 0 64px;
  max-width: 28ch;
}
.section--promise .promise-h2 .promise-line-1 {
  color: var(--fg-tertiary);
  display: block;
}
.section--promise .promise-h2 .promise-line-2 {
  color: var(--head-strong);
  display: block;
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  grid-auto-rows: auto;
}
.promise-pillar {
  background: var(--bg-surface);
  border: 1px solid var(--border-hair);
  border-radius: 10px;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
  position: relative;
  transition: border-color 220ms ease, background 220ms ease;
}
.promise-pillar:hover {
  border-color: var(--border-strong, rgba(0,0,0,0.18));
  z-index: 5;
}
.promise-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--head-strong);
  line-height: 1.25;
}
.promise-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.promise-desc__line { text-wrap: pretty; }
.promise-desc__line:nth-child(2) {
  color: var(--fg-quaternary, var(--fg-tertiary));
  opacity: 0.78;
}
.promise-graphic {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.pg {
  width: 140px;
  height: 72px;
}

/* Bento sizing — Cost spans 2 rows tall on the right, other 5 tile in 8×2 on the left. */
.promise-grid--6 .promise-pillar:nth-child(1) { grid-column: 1 / span 4; grid-row: 1; }
.promise-grid--6 .promise-pillar:nth-child(2) { grid-column: 5 / span 4; grid-row: 1; }
.promise-grid--6 .promise-pillar:nth-child(3) { grid-column: 1 / span 3; grid-row: 2; }
.promise-grid--6 .promise-pillar:nth-child(4) { grid-column: 4 / span 3; grid-row: 2; }
.promise-grid--6 .promise-pillar:nth-child(6) { grid-column: 7 / span 2; grid-row: 2; }
.promise-grid--6 .promise-pillar:nth-child(5) { grid-column: 9 / -1; grid-row: 1 / span 2; }

/* Cost tile keeps the chart wrap but in a normal pillar slot now. */
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  color: var(--head-strong);
  letter-spacing: -0.005em;
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header__lbl {
  font-size: 14px;
  font-weight: 500;
  color: var(--head-strong);
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header__sep {
  width: 1px;
  height: 12px;
  background: var(--border-strong, rgba(0,0,0,0.18));
  align-self: center;
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header__count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--head-strong);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
  display: inline-block;
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header__unit {
  font-size: 13px;
  color: var(--fg-tertiary);
  font-weight: 400;
}
.promise-grid--6 .promise-pillar:nth-child(5) .promise-graphic {
  flex: 1 1 auto;
  height: auto;
  min-height: 200px;
  width: 100%;
}
.promise-grid--6 .promise-pillar:nth-child(5) .pg--cost {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────
   PILLAR GRAPHICS — small illustrative SVGs that animate on hover.
   ───────────────────────────────────────────────────────────────── */

/* =================================================================
   VALUE PILLAR GRAPHICS — shared line-weight system
   Three weights only, applied across every pillar so the row reads
   harmoniously:
     --pg-w-hair    0.8  → secondary lines (DAG edges)
     --pg-w-base    1.2  → primary outlines, shapes, trails
     --pg-w-accent  1.6  → orange accent flourishes (check, arrow)
   ================================================================= */
.pg {
  --pg-w-hair:   0.8;
  --pg-w-base:   1.2;
  --pg-w-accent: 1.6;
}

/* 1. Audit log: rows tick off */
.pg--audit .pg-audit__line {
  fill: currentColor;
  opacity: 0.22;
  transform-origin: left center;
  transform-box: fill-box;
  transform: scaleX(0.4);
  transition: transform 360ms cubic-bezier(0.2,0,0.2,1), opacity 220ms;
  transition-delay: calc(var(--i) * 70ms);
}
.pg--audit .pg-audit__chk {
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--pg-w-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity 220ms, transform 240ms cubic-bezier(0.34,1.56,0.64,1);
  transition-delay: calc(var(--i) * 70ms + 220ms);
}
.promise-pillar:hover .pg--audit .pg-audit__line { transform: scaleX(1); opacity: 0.44; }
.promise-pillar:hover .pg--audit .pg-audit__chk  { opacity: 1; transform: translateX(0); }

/* 2. EU compliance: grey dots → blue flag + yellow stars */
.pg--eu { overflow: visible; }
.pg--eu .pg-eu__flag {
  fill: #003399;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.94);
  transition: opacity 320ms cubic-bezier(0.2,0,0.2,1), transform 360ms cubic-bezier(0.2,0,0.2,1);
}
.promise-pillar:hover .pg--eu .pg-eu__flag { opacity: 1; transform: scale(1); }
.pg--eu .pg-eu__bubble {
  fill: #B4B4B0;
  opacity: 0.7;
  transition: opacity 320ms;
  transition-delay: calc(var(--i) * 22ms);
}
.promise-pillar:hover .pg--eu .pg-eu__bubble {
  opacity: 0;
  transition-delay: calc(var(--i) * 22ms + 180ms);
}
.pg--eu .pg-eu__star polygon {
  fill: #FFCC00;
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 280ms, transform 320ms cubic-bezier(0.34,1.56,0.64,1);
  transition-delay: calc(var(--i) * 28ms + 360ms);
}
.promise-pillar:hover .pg--eu .pg-eu__star polygon { opacity: 1; transform: scale(1); }

/* 3. Vendor agnostic: orchestrator hub draws spokes to satellites */
.pg--vendor .pg-vendor__shape {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linejoin: round;
  opacity: 0.5;
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0.92);
  transition: opacity 240ms, stroke 240ms, transform 320ms cubic-bezier(0.34,1.56,0.64,1);
  transition-delay: calc(var(--i) * 40ms + 120ms);
}
.pg--vendor .pg-vendor__hub {
  fill: var(--bg-canvas);
  stroke: currentColor;
  stroke-width: var(--pg-w-base);
  opacity: 0.6;
  transition: fill 280ms, stroke 280ms, opacity 280ms;
}
.pg--vendor .pg-vendor__hub-core {
  fill: currentColor;
  opacity: 0.55;
  transition: fill 280ms, opacity 280ms;
}
.pg--vendor .pg-vendor__spoke {
  stroke: var(--accent);
  stroke-width: var(--pg-w-base);
  stroke-linecap: round;
  stroke-dasharray: 56;
  stroke-dashoffset: 56;
  opacity: 0;
  transition: stroke-dashoffset 420ms cubic-bezier(0.2,0,0.2,1), opacity 220ms;
  transition-delay: calc(var(--i) * 70ms + 80ms);
}
.promise-pillar:hover .pg--vendor .pg-vendor__shape {
  opacity: 1;
  stroke: var(--accent);
  transform: scale(1);
}
.promise-pillar:hover .pg--vendor .pg-vendor__hub {
  fill: var(--accent);
  stroke: var(--accent);
  opacity: 1;
}
.promise-pillar:hover .pg--vendor .pg-vendor__hub-core {
  fill: var(--bg-canvas);
  opacity: 1;
}
.promise-pillar:hover .pg--vendor .pg-vendor__spoke {
  stroke-dashoffset: 0;
  opacity: 0.7;
}

/* 4. NL: bubble → arrow → DAG */
.pg--nl .pg-nl__bubble > rect:first-child,
.pg--nl .pg-nl__plan > rect:first-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: 0.5;
  transition: stroke 220ms, opacity 220ms;
}
.pg--nl .pg-nl__txt { fill: currentColor; opacity: 0.4; }
.pg--nl .pg-nl__edge {
  stroke: currentColor;
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: opacity 220ms, stroke-dashoffset 340ms cubic-bezier(0.2,0,0.2,1);
  transition-delay: calc(var(--i) * 22ms + 260ms);
}
.pg--nl .pg-nl__node {
  fill: currentColor;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity 200ms, transform 240ms cubic-bezier(0.34,1.56,0.64,1), fill 220ms;
  transition-delay: calc(var(--i) * 32ms + 380ms);
}
.pg--nl .pg-nl__node--mid,
.pg--nl .pg-nl__node--out { fill: var(--accent); }
.pg--nl .pg-nl__arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--pg-w-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transition: stroke-dashoffset 320ms cubic-bezier(0.2,0,0.2,1);
  transition-delay: 120ms;
}
.promise-pillar:hover .pg--nl .pg-nl__arrow { stroke-dashoffset: 0; }
.promise-pillar:hover .pg--nl .pg-nl__plan > rect:first-child {
  stroke: var(--accent);
  opacity: 1;
}
.promise-pillar:hover .pg--nl .pg-nl__edge {
  opacity: 0.45;
  stroke-dashoffset: 0;
}
.promise-pillar:hover .pg--nl .pg-nl__node {
  opacity: 0.9;
  transform: scale(1);
}
.promise-pillar:hover .pg--nl .pg-nl__node--mid,
.promise-pillar:hover .pg--nl .pg-nl__node--out { opacity: 1; }

/* 5. Cost: trails draw behind dots */
.pg--cost { overflow: visible; }
/* Axis baseline removed — see PillarGraphics.jsx; the trails alone
   carry the chart. The `.pg-cost__axis` selector stays here only as
   a safeguard in case the element ever returns. */
.pg--cost .pg-cost__axis { display: none; }
.pg--cost .pg-cost__trail {
  fill: none;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 220ms ease;
}
.pg--cost .pg-cost__trail--other { stroke: #6B6B6B; }
.pg--cost .pg-cost__trail--inxm  { stroke: var(--accent); }
.promise-pillar:hover .pg--cost .pg-cost__trail--other { opacity: 0.7; }
.promise-pillar:hover .pg--cost .pg-cost__trail--inxm  { opacity: 1; }
.pg--cost .pg-cost__dot { transition: opacity 200ms, fill 220ms; }
.pg--cost .pg-cost__dot--other { fill: #4A4A55; }
.pg--cost .pg-cost__dot--inxm {
  /* Stays neutral at rest; turns accent on hover only. */
  fill: var(--fg-secondary, #4A4A55);
  filter: drop-shadow(0 0 0 rgba(255,89,0,0));
  transition: filter 220ms, opacity 200ms, fill 220ms;
}
.promise-pillar:hover .pg--cost .pg-cost__dot--inxm {
  fill: var(--accent);
  filter: drop-shadow(0 0 2px rgba(255,89,0,0.45));
}




.pg--cost .pg-cost__val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 3.8px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms;
}
.pg--cost .pg-cost__val--inxm  { fill: var(--accent); }
.pg--cost .pg-cost__val--other { fill: var(--fg-secondary, #4A4A55); }
.promise-pillar:hover .pg--cost .pg-cost__val { opacity: 1; }

/* 6. Deterministic: three waves drift, snap into alignment */
.pg--det { overflow: visible; }
.pg--det .pg-det__line {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--pg-w-base);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  transform-origin: center;
  transform-box: fill-box;
  transform: translate(calc((var(--i) - 1) * 3px), calc((var(--i) - 1) * 5px));
  transition: transform 520ms cubic-bezier(0.2,0,0.2,1),
              opacity 340ms ease,
              stroke 280ms ease;
  transition-delay: calc(var(--i) * 40ms);
}
.pg--det .pg-det__seed,
.pg--det .pg-det__out {
  fill: currentColor;
  opacity: 0.45;
  transition: fill 280ms, opacity 280ms;
}
.promise-pillar:hover .pg--det .pg-det__line {
  transform: translate(0, 0);
  opacity: 0.95;
  stroke: var(--accent);
}
.promise-pillar:hover .pg--det .pg-det__seed,
.promise-pillar:hover .pg--det .pg-det__out {
  fill: var(--accent);
  opacity: 1;
}

/* =================================================================
   WHO WE ARE
   ================================================================= */
.section--who { padding-top: 96px; padding-bottom: 120px; }
.section--who .who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 0;
}
.section--who .who-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.section--who h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--head-medium);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.section--who h2 .t-secondary {
  color: var(--head-medium);
}
.who-image img.who-photo {
  display: block;
  width: 100%;
  height: auto;
  /* let the natural aspect ratio of the photo dictate height — no cropping */
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
}
.who-image image-slot {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
.who-body {
  max-width: 56ch;
}
.who-body p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-secondary);
  margin: 0 0 16px;
}
.who-body p:last-child { margin-bottom: 0; }
.who-body p strong {
  color: var(--head-strong);
  font-weight: 600;
}

/* =================================================================
   FINAL CTA — hidden (merged into footer)
   ================================================================= */
.final-cta { display: none !important; }

/* =================================================================
   FOOTER — dark, with embedded closing headline
   ================================================================= */
.site-footer {
  background: #1a1a1a;
  color: #e8e8e8;
  border-top: 0;
  padding: 120px 80px 56px;
}
.site-footer .inner {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-headline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 80px;
}
.footer-h2 {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1.0;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  max-width: 13ch;
  text-wrap: balance;
}
.footer-h2 .hl-orange {
  display: inline;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.logo--pill-foot {
  display: inline-flex;
  align-items: center;
  align-self: end;
}
.logo--pill-foot .logo-pill {
  height: 56px;
  width: auto;
  display: block;
}

.footer-divider {
  height: 1px;
  background: rgba(255,255,255,0.14);
  margin: 0;
}

.site-footer .row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 56px 0;
  margin: 0;
  align-items: start;
}

.site-footer h6 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 28px;
  font-weight: 400;
}
.site-footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}
.site-footer ul a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.site-footer ul a:hover { color: var(--accent); }

.footer-address {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  margin: 0 0 24px;
}
.footer-email {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}
.footer-email:hover { color: var(--accent-press); }

.site-footer .legal {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}

/* =================================================================
   NAV — `//` prefix
   ================================================================= */
.site-nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--head-medium);
  text-transform: none;
  display: inline-flex;
  gap: 4px;
  font-weight: 400;
  white-space: nowrap;
}
.site-nav a .nav-slash { color: var(--accent); }
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover .nav-slash { color: var(--accent); }

.site-header { background: var(--bg-canvas); border-bottom: 0; }

/* =================================================================
   RESPONSIVE — container queries
   The .page element is a size container, so breakpoints fire against
   its own width. Inside the 1440px design canvas → always desktop.
   In the deployed standalone site → responds to viewport.
   ================================================================= */
.page {
  container-type: inline-size;
  container-name: page;
  overflow: visible;
}

/* --- Large tablet / small desktop ----------------------------- */
@container page (max-width: 1280px) {
  .hero { padding: 72px 56px 120px; }
  .section { padding: 96px 56px; }
  .site-footer { padding: 96px 56px 48px; }
  .site-header { padding: 0 56px; }

  .hero h1 { font-size: 52px; }
  .footer-h2 { font-size: 76px; }

  .product-head,
  .vision-grid,
  .section--who .who-grid {
    gap: 56px;
  }
}

/* --- Tablet landscape ----------------------------------------- */
@container page (max-width: 1024px) {
  .hero { padding: 64px 40px 96px; }
  .section { padding: 80px 40px; }
  .site-footer { padding: 80px 40px 40px; }
  .site-header { padding: 0 40px; height: 72px; }

  .hero h1 { font-size: 44px; max-width: 18ch; }
  .hero-tagline { font-size: 20px; margin-bottom: 64px; }

  .section--vision h2,
  .section--promise .promise-h2 { font-size: 30px; }
  .product-h2 { font-size: 28px; }
  .section--who h2 { font-size: 26px; }

  .footer-h2 { font-size: 60px; }

  .promise-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .promise-pillar { grid-column: span 2; }
  .promise-grid .promise-pillar:nth-child(4),
  .promise-grid .promise-pillar:nth-child(5) { grid-column: span 2; }

  .site-footer .row {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
  }

  .section--product .compile-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* --- Tablet portrait ----------------------------------------- */
@container page (max-width: 768px) {
  .site-header {
    padding: 0 24px;
    height: 64px;
  }
  .site-nav { display: none; }
  .site-header .actions { gap: 8px; }
  .site-header .actions .btn-primary { padding: 0 16px; height: 38px; }
  .lang-toggle { height: 38px; }
  .theme-toggle { width: 38px; height: 38px; }

  .hero { padding: 48px 24px 80px; }
  .section { padding: 64px 24px; }
  .site-footer { padding: 56px 24px 32px; }

  .hero h1 { font-size: 36px; margin-bottom: 32px; max-width: none; }
  .hero-intro { font-size: 14px; margin-bottom: 32px; }
  .hero-sub { font-size: 14px; margin-bottom: 32px; }
  .hero-tagline { font-size: 18px; margin-bottom: 48px; }
  .hero-ctas { flex-wrap: wrap; gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: space-between; }

  .eyebrow { margin-bottom: 40px; font-size: 11.5px; }

  .vision-grid,
  .product-head,
  .section--who .who-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .section--who .who-text { gap: 24px; }

  .section--vision h2,
  .section--promise .promise-h2 { font-size: 26px; margin-bottom: 32px; }
  .product-h2 { font-size: 24px; }
  .section--who h2 { font-size: 22px; }

  .vision-body p,
  .product-body,
  .who-body p { font-size: 14px; }
  .vision-kicker, .product-kicker { font-size: 14px; }

  .promise-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .promise-pillar,
  .promise-grid .promise-pillar:nth-child(4),
  .promise-grid .promise-pillar:nth-child(5) {
    grid-column: span 1;
    padding: 24px;
    min-height: 0;
  }

  .footer-headline {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 56px;
  }
  .footer-h2 { font-size: 44px; max-width: none; }
  .logo--pill-foot .logo-pill { height: 40px; }

  .site-footer .row {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    padding: 40px 0;
  }
  .footer-col--about { grid-column: 1 / -1; }

  .site-footer .legal {
    justify-content: flex-start;
    font-size: 10.5px;
  }

  .section--product .compile-pipeline { padding: 16px; }
  .section--product .compile-pipeline .stage {
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
  .section--product .compile-pipeline .stage .stage-time { display: none; }
  .section--product .compile-pipeline .stage .stage-content { white-space: normal; }
}

/* --- Small mobile -------------------------------------------- */
@container page (max-width: 480px) {
  .site-header { padding: 0 16px; }
  .site-header .actions .btn-primary { display: none; }
  .site-header .actions { gap: 6px; }

  .hero { padding: 40px 20px 64px; }
  .section { padding: 56px 20px; }
  .site-footer { padding: 48px 20px 24px; }

  .hero h1 { font-size: 30px; line-height: 1.15; }
  .hero-tagline { font-size: 17px; }

  .section--vision h2,
  .section--promise .promise-h2 { font-size: 22px; }
  .product-h2 { font-size: 20px; }
  .section--who h2 { font-size: 20px; }
  .product-kicker { font-size: 16px; }

  .footer-h2 { font-size: 34px; letter-spacing: -0.03em; }
  .logo--pill-foot .logo-pill { height: 32px; }

  .site-footer .row {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* Sticky top nav — bump z-index above all section content. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}


/* Scroll-down indicator at the bottom of the full-height hero. */
.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--head-medium);
  transition: color 220ms ease, transform 220ms ease;
}
.hero-scroll:hover {
  color: var(--accent);
}
.hero-scroll__lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-scroll__arrow {
  display: block;
  color: currentColor;
  animation: hero-scroll-bob 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Responsive hero padding overrides for the full-height variant. */
@container page (max-width: 1280px) { .hero { padding: 72px 56px; } }
@container page (max-width: 1024px) { .hero { padding: 64px 40px; } }
@container page (max-width: 768px)  { .hero { padding: 48px 24px; min-height: 100vh; } .hero-scroll { bottom: 20px; } }
@container page (max-width: 480px)  { .hero { padding: 40px 20px; } }


/* =================================================================
   Underline policy: only <a> links carry an underline.
   Every other element that previously used text-decoration / box-shadow
   to draw an underline now just renders the orange accent color.
   ================================================================= */
.hl-orange,
.h2-underline,
.footer-h2 .hl-orange,
.theme-shell .hl-orange,
.page .hl-orange,
.theme-shell .footer-h2 .hl-orange,
.page .footer-h2 .hl-orange,
.hero-tagline .hl-orange,
.product-h2 .h2-underline,
.vision-body p strong,
:root:not([data-theme="light"]) .hero-tagline .hl-orange,
.theme-shell:not([data-theme="light"]) .hero-tagline .hl-orange {
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--accent) !important;
}


/* =================================================================
   Anchor link scrolling — smooth motion + offset for sticky header.
   ================================================================= */
html { scroll-behavior: smooth; }
.page { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html, .page { scroll-behavior: auto; }
}
/* Sections targeted by anchor links land below the sticky header. */
.section,
.section--vision,
.section--product,
.section--promise,
.section--who,
.site-footer,
#what-we-do,
#product,
#values,
#who-we-are {
  scroll-margin-top: 88px;
}


/* .u-thin — emphasis class; renders as medium-weight body text only. */
.u-thin {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}


/* Vision body — second paragraph reads medium weight for emphasis. */
.vision-body p:nth-of-type(2) {
  font-weight: 500;
  color: var(--head-strong);
}


/* HTML legend below the chart (INXM marker + label, Others marker + label). */
.pg-cost-legend {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--head-medium);
}
.pg-cost-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pg-cost-legend__mark {
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  display: inline-block;
}
.pg-cost-legend__item--other .pg-cost-legend__mark {
  background: #6B6B6B;
}
.pg-cost-legend__lbl {
  color: var(--head-strong);
  font-weight: 500;
}

/* Header sits above the chart. */
.promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-header {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  color: var(--head-strong);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}


/* Footer email — orange underline applies only to the address itself,
   not the leading `// ` mono prefix. */
.site-footer .footer-email,
.site-footer a.footer-email {
  text-decoration: none;
}
.site-footer .footer-email .footer-email__slash {
  text-decoration: none;
  color: var(--accent);
}
.site-footer .footer-email .footer-email__addr {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.site-footer a.footer-email:hover .footer-email__addr {
  color: var(--accent-press);
  text-decoration-color: var(--accent-press);
}


/* =====================================================================
   MOBILE OPTIMIZATION — illustrations & cards
   Tightens spacing, stacks grids, and constrains illustrations on
   small screens. Three breakpoints:
     ≤900px  → tablet portrait + small landscape phones
     ≤640px  → standard mobile
     ≤420px  → small mobile (iPhone SE, narrow Android)
   ===================================================================== */

/* ─── ≤900px · tablet portrait ─────────────────────────────────────── */
@media (max-width: 900px) {

  /* Hero ─ tighter padding, smaller headline scale */
  .hero {
    padding: 56px 24px 64px;
  }
  .hero h1 {
    font-size: clamp(34px, 7vw, 52px);
    max-width: 18ch;
  }
  .hero-intro {
    padding: 0;
    max-width: none;
    font-size: 15px;
  }
  .hero-ctas {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  /* Hero hub illustration — clip a little so it fills available
     width without forcing horizontal scroll. */
  .hero-product-wrap {
    margin-top: 16px;
    width: 100%;
    overflow: hidden;
  }
  .hov-flow {
    margin: 0 -12px;       /* let the SVG breathe past inner padding */
  }

  /* Value pillar cards ─ 2-up, less padding */
  .promise-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .promise-pillar {
    padding: 18px 18px 20px;
    min-height: 0;
    gap: 12px;
  }

  /* Compile pipeline ─ scenes wrap to 2 columns, captions shorter */
  .section--product .cp-stage {
    grid-template-columns: 1fr 1fr;
    gap: 28px 12px;
  }
  .section--product .cp-runthrough {
    padding: 24px 16px 32px;
  }
}


/* ─── ≤640px · standard mobile ─────────────────────────────────────── */
@media (max-width: 640px) {

  /* Section paddings — compress vertical rhythm */
  section[class*="section--"], .hero {
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero {
    padding-top: 40px;
    padding-bottom: 48px;
    min-height: 0;
  }
  .hero h1 {
    font-size: clamp(28px, 8.5vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .hero-intro p {
    font-size: 14.5px;
    line-height: 1.55;
  }
  .hero-ctas .btn {
    padding: 12px 18px;
    font-size: 14px;
  }
  .hero-scroll { display: none; }

  /* Hero illustration ─ scale the SVG box down so the small details
     (input labels, pill text, hub label) don't crush */
  .hov-flow__lbl { font-size: 14px; }
  .hov-flow__lbl--hub { font-size: 15px; letter-spacing: 0.10em; }
  .hov-flow__pill-lbl { font-size: 13px; letter-spacing: 0.04em; }

  /* Value pillars ─ collapse to single column, generous touch padding */
  .promise-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .promise-pillar {
    padding: 18px 18px 20px;
    min-height: 0;
  }
  /* Suppress the per-pillar SVG hover animations on touch — they
     never trigger without a hover pointer and the static frame is
     already the "rest" state, so this is a no-op safeguard. */
  @media (hover: none) {
    .promise-pillar .pg { animation: none !important; }
  }

  /* Compile pipeline ─ single column stack */
  .section--product .cp-stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .section--product .cp-scene__art {
    max-width: 240px;
    margin: 0 auto;
  }
  .cp-detail {
    max-width: 360px;
    margin: 14px auto 0;
  }

  /* Customer logos ─ wrap to 3 columns */
  .cl-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px 12px;
  }
  .cl-cell {
    padding: 10px 6px !important;
  }

  /* Testimonial ─ vertical stack, smaller quote */
  .testimonial {
    padding: 28px 20px !important;
    gap: 20px !important;
  }
  .testimonial-quote,
  .tquote {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  /* Use-cases carousel ─ snap-scroll on mobile, card width capped */
  .use-cases,
  .uc-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .use-cases::-webkit-scrollbar,
  .uc-track::-webkit-scrollbar { display: none; }
  .uc-card,
  .use-card {
    min-width: 280px;
    scroll-snap-align: start;
  }

  /* Plans bar / token chart ─ horizontal scroll instead of squish */
  .plans-bar,
  .compile-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* "Who we are" / About / final imagery sections */
  .who-photo,
  .who img,
  img.full-bleed {
    width: 100%;
    height: auto;
  }
}


/* ─── ≤420px · narrow mobile ────────────────────────────────────────── */
@media (max-width: 420px) {

  .hero h1 {
    font-size: 30px;
    line-height: 1.06;
  }
  .hero-intro p { font-size: 14px; }
  .hero-ctas {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }
  .promise-pillar {
    padding: 16px;
  }
  .cl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cp-detail {
    max-width: none;
    padding: 10px;
  }
  .cp-detail__head { gap: 4px; }
  .cp-detail__byline { font-size: 9px; }
  .cp-detail__id { font-size: 9px; }
  .cp-detail__code { font-size: 9.5px; }
}


/* ─── Universal mobile safeguards ──────────────────────────────────── */
@media (max-width: 900px) {
  /* Stop SVGs from forcing horizontal scroll */
  svg { max-width: 100%; height: auto; }
  /* Ensure any fixed-width content shrinks */
  .promise-pillar,
  .cp-detail,
  .uc-card,
  .testimonial { max-width: 100%; }
}

/* =====================================================================
   HERO · hide the orchestrator illustration on phones
   The animated SVG doesn't read at <640px and the prior vertical
   stack attempt didn't sell the story. Cleanest answer: drop it on
   mobile. The Product section below already tells the same story
   in scrollable detail, so nothing's lost — the hero just becomes
   pure type + CTA, which mobile users actually want.
   ===================================================================== */
@media (max-width: 640px) {
  .hero-product-wrap { display: none !important; }
  .hov-flow,
  .hov-mobile { display: none !important; }
}


/* ─────────────────────────────────────────────────────────────────────
   MOBILE OVERRIDES — forced
   These were the actual reported issues:
   1. Hero illustration: too dense on phones — instead of hiding it, scale
      it up to a wide fixed width and pan the camera left→right so users
      see (a) inputs, (b) the hub, (c) the plans pipeline in turn.
   2. "Built for Europe" pillar bento grid: collapse the explicit
      grid-column / grid-row positions that were leaving cells empty
      and producing the broken layout on small screens.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {

  /* 1. Hero illustration — scale up + auto-pan ──────────────────── */
  .hero-product-wrap {
    width: 100%;
    overflow: hidden;
    margin-top: 18px;
    /* Full-bleed beyond the inner padding so the panning SVG has the
       whole viewport to work with. The negative margin matches the
       hero's horizontal padding at ≤640px (18px) and ≤420px (18px). */
    margin-left: -18px;
    margin-right: -18px;
  }
  .hov-flow {
    overflow: hidden;
    height: 220px;
    margin: 0;
  }
  .hov-flow__svg {
    /* Render at a fixed wide width so labels stay legible. */
    width: 980px;
    height: 220px;
    max-width: none;        /* override the universal mobile clamp */
    transform-origin: 0 50%;
    animation: hov-mobile-pan 14s ease-in-out infinite;
    will-change: transform;
  }
  /* Pan: dwell on INPUTS → glide to HUB → dwell on BELT → loop back.
     Percentages are of the SVG's own width (980px). The dwell windows
     are short enough that the user always sees motion. */
  @keyframes hov-mobile-pan {
    0%,   18% { transform: translateX(0); }            /* inputs       */
    32%,  48% { transform: translateX(-32%); }         /* hub centred  */
    62%,  88% { transform: translateX(-62%); }         /* belt visible */
    100%      { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hov-flow__svg { animation: none; transform: translateX(-32%); }
  }

  /* 2. Built-for-Europe bento grid — force clean single column ───── */
  .promise-grid,
  .promise-grid--6 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
  }
  .promise-grid--6 .promise-pillar,
  .promise-grid--6 .promise-pillar:nth-child(1),
  .promise-grid--6 .promise-pillar:nth-child(2),
  .promise-grid--6 .promise-pillar:nth-child(3),
  .promise-grid--6 .promise-pillar:nth-child(4),
  .promise-grid--6 .promise-pillar:nth-child(5),
  .promise-grid--6 .promise-pillar:nth-child(6) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
  }
  .promise-grid--6 .promise-pillar:nth-child(5) .pg-cost-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}


/* =================================================================
   HERO — orchestrator flow illustration
   Connector data flows → Orchestrator hub → Plans (as pills) out.
   Pure hairlines + dashed flow lines. Only the active Plan pill
   and the inner hub ring carry the accent.
   ================================================================= */

/* Let the hero .inner remain centered AND stretch its children
   (h1, intro, CTAs, product flow) to align centered horizontally.
   The original .hero .inner had margin: 0 auto but no flex layout;
   adding a flex column ensures the SVG inside hero-product-wrap and
   the headline + intro all share the same center axis. */
.hero--product .inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero--product .inner > h1,
.hero--product .inner > .hero-intro,
.hero--product .inner > .hero-ctas,
.hero--product .inner > .hero-product-wrap {
  margin-left: auto;
  margin-right: auto;
}

.hero-product-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.hov-flow {
  width: 100%;
  max-width: 1200px;
  color: var(--fg-strong);
  position: relative;
}
.hov-flow__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── connector nodes ── */
.hov-flow__node-ring {
  fill: var(--bg-canvas);
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.85;
}
.hov-flow__node-dot {
  fill: currentColor;
  opacity: 0.5;
}
.hov-flow__lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--fg-tertiary);
}
.hov-flow__lbl--hub {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  fill: var(--fg-secondary);
  font-weight: 500;
}

/* ── flow paths (dashed bezier, gently moving) ── */
.hov-flow__path {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
  animation: hov-flow-march 6s linear infinite;
}
.hov-flow__path--in {
  /* feeds toward the hub */
  animation-direction: normal;
}
.hov-flow__path--bridge {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
  animation: none;
  stroke-dasharray: none;
}
@keyframes hov-flow-march {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -28; }
}

/* ── conveyor belt ── */
.hov-flow__rail {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.35;
}
.hov-flow__tick {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.55;
}
.hov-flow__belt-flow {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.45;
  animation: hov-flow-march 4s linear infinite;
}
.hov-flow__arrow {
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}

/* ── hub ── */
.hov-flow__ring {
  stroke: currentColor;
  stroke-width: 1;
}
.hov-flow__ring--outer { opacity: 0.25; }
.hov-flow__ring--mid   { opacity: 0.55; }
.hov-flow__ring--accent {
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 1;
}
.hov-flow__hub-dot {
  fill: var(--accent);
  transform-origin: center;
  transform-box: fill-box;
  animation: hov-hub-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes hov-hub-pulse {
  0%, 100% { opacity: 1;   r: 6; }
  50%      { opacity: 0.6; r: 7.5; }
}

/* ── plan pills ── */
.hov-flow__plan { transition: opacity 320ms ease; }
.hov-flow__pill {
  fill: var(--bg-raised);
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.6;
  transition: opacity 320ms ease,
              stroke 320ms ease,
              stroke-width 320ms ease;
}
.hov-flow__pill-dot {
  fill: currentColor;
  opacity: 0.55;
  transition: fill 320ms ease, opacity 320ms ease;
}
.hov-flow__pill-lbl {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  fill: var(--fg-strong);
  font-weight: 500;
  text-transform: uppercase;
}
.hov-flow__pill-slash {
  fill: var(--fg-tertiary);
  letter-spacing: 0;
}
.hov-flow__plan.is-active .hov-flow__pill {
  stroke: var(--accent);
  stroke-width: 1.4;
  opacity: 1;
}
.hov-flow__plan.is-active .hov-flow__pill-dot {
  fill: var(--accent);
  opacity: 1;
}
.hov-flow__plan.is-active .hov-flow__pill-lbl {
  fill: var(--fg-strong);
}

/* ── responsive ── */
@media (max-width: 900px) {
  .hov-flow__lbl { font-size: 10px; }
  .hov-flow__pill-lbl { font-size: 12px; }
}

/* =================================================================
   Hero · discrete plan pipeline
   Plans live in 3 SVG slots, positioned via SVG transform attribute
   (not CSS) for pixel-correct alignment with the rails. The slide
   animation is intentionally instant — the pop animation provides
   the visual feedback when a new plan emerges; existing pills
   simply re-render in their new slot at the next state tick.
   ================================================================= */
.hov-flow__plan-slot {
  /* Nothing to do — SVG transform attr handles position. */
}
.hov-flow__plan-pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hov-plan-pop 560ms cubic-bezier(0.2, 0, 0.2, 1) backwards;
}
.hov-flow__plan-pop.is-init {
  /* Skip pop animation for seed plans rendered on first paint. */
  animation: none;
}
@keyframes hov-plan-pop {
  0%   { opacity: 0; transform: scale(0.55); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Fresh plan (just popped) reads slightly heavier so the eye snaps to
   it; once it shifts right (slot > 0) it relaxes to ink. */
.hov-flow__pill.is-fresh {
  stroke: var(--accent);
  stroke-width: 1.3;
  opacity: 1;
  transition: stroke 480ms ease 240ms,
              stroke-width 480ms ease 240ms,
              opacity 480ms ease 240ms;
}
.hov-flow__pill-dot.is-fresh {
  fill: var(--accent);
  opacity: 1;
  transition: fill 480ms ease 240ms, opacity 480ms ease 240ms;
}

/* Hub "working" state — the center dot pulses faster + larger. */
.hov-flow__hub.is-working .hov-flow__hub-dot {
  animation: hov-hub-work 360ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hov-flow__hub.is-working .hov-flow__ring--accent {
  stroke-width: 1.8;
  opacity: 1;
}
@keyframes hov-hub-work {
  0%, 100% { r: 5; opacity: 1; }
  50%      { r: 9; opacity: 0.65; }
}

/* Subtle input-active flourish — the currently-pulsing glyph
   becomes a touch heavier so the eye picks it up. Kept extremely
   restrained — no colour change, just stroke weight. */
.hov-flow__input {
  transition: stroke-width 320ms ease, opacity 320ms ease;
}
.hov-flow__input.is-active circle,
.hov-flow__input.is-active rect,
.hov-flow__input.is-active path,
.hov-flow__input.is-active line {
  stroke-width: 1.3;
}
/* Halo behind chosen inputs — fades in for the duration of a batch
   so the user can read which ingredients were picked. */
.hov-flow__input.is-active text {
  fill: var(--accent);
}
.hov-flow__input.is-active::after {
  content: none;
}
.hov-flow__path--in.is-active {
  stroke: var(--accent);
  opacity: 0.95;
  stroke-width: 1.1;
}

/* =================================================================
   Hero · particles
   Position is driven by SVG <animateMotion>, so the dots track the
   flow paths in SVG user units (no CSS-px mismatch). CSS only
   handles the fade-in/out and glow.
   ================================================================= */
.hov-flow__particle {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px rgba(255, 89, 0, 0.35));
  opacity: 0;
}
.hov-flow__particle--in {
  animation: hov-particle-fade 980ms ease backwards;
}
.hov-flow__particle--out {
  animation: hov-particle-fade-out 580ms ease backwards;
}
@keyframes hov-particle-fade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hov-particle-fade-out {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}


/* =================================================================
   PRODUCT — technical walkthrough (replaces the abstract pipeline)
   5 stages of one real Plan: Request · Compile · Approve · Execute
   · Result. Tabs at top, full-width artefact panel below.
   Visual language: hairlines, mono for technical content, // bylines
   for meta, single accent (orange) on the active tab + critical
   accents inside content (caret, approval, "→ approval received").
   ================================================================= */
.section--product .wt {
  width: 100%;
  max-width: 1100px;
  margin: 72px auto 0;
  color: var(--fg-strong);
  font-family: var(--font-marketing);
  text-align: left;
}

/* ── tab strip ── */
.wt-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--border-hair);
}
.wt-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  cursor: pointer;
  color: var(--fg-tertiary);
  transition: color 240ms var(--ease-standard),
              border-color 240ms var(--ease-standard);
  border-right: 1px solid var(--border-hair);
}
.wt-tab:last-child { border-right: none; }
.wt-tab:hover { color: var(--fg-secondary); }
.wt-tab.is-active {
  color: var(--fg-strong);
  border-bottom-color: var(--accent);
}
.wt-tab__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-tertiary);
}
.wt-tab.is-active .wt-tab__num { color: var(--accent); }
.wt-tab__lbl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: inherit;
}
.wt-tab__cap {
  font-family: var(--font-marketing);
  font-size: 12px;
  color: var(--fg-tertiary);
  letter-spacing: -0.005em;
  line-height: 1.45;
}

/* ── panel ── */
.wt-panel {
  padding: 28px 0 0;
  min-height: 480px;
}
.wt-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: wt-fade 360ms var(--ease-standard);
}
@keyframes wt-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── shared row · byline left + id right ── */
.wt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hair);
}
.wt-row--foot {
  border-bottom: none;
  border-top: 1px solid var(--border-hair);
  padding-top: 12px;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.wt-byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.wt-id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--fg-secondary);
  font-feature-settings: "tnum";
  text-align: right;
}

/* ── Request input ── */
.wt-input {
  display: flex;
  gap: 14px;
  padding: 22px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg-strong);
}
.wt-input__prompt {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 22px;
  margin-top: 2px;
}
.wt-input__text {
  flex: 1;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.wt-input__caret {
  color: var(--accent);
  font-size: 22px;
  align-self: center;
  animation: wt-blink 720ms steps(2, jump-none) infinite;
}
@keyframes wt-blink {
  50% { opacity: 0.18; }
}

.wt-kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  margin: 0;
}
.wt-kv > div {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-hair);
}
.wt-kv > div:nth-last-child(-n+2) { border-bottom: none; }
.wt-kv dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  min-width: 130px;
}
.wt-kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-strong);
  font-feature-settings: "tnum";
}

/* ── Code / YAML / diff ── */
.wt-code {
  margin: 0;
  padding: 22px 26px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--fg-strong);
  overflow-x: auto;
  font-feature-settings: "tnum";
  white-space: pre;
}
.wt-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: 0;
  background: transparent;
  padding: 0;
}

.wt-diff--add {
  color: var(--signal-green, #4A7A4A);
}
.wt-diff--chg {
  color: var(--accent);
}
.wt-diff--rm {
  color: var(--fg-tertiary);
  text-decoration: line-through;
}

/* ── Validation pills under compiled plan ── */
.wt-validations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.wt-validation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  padding: 4px 10px;
  border: 1px solid var(--border-hair);
  border-radius: 999px;
}
.wt-validation.is-ok {
  color: var(--signal-green, #4A7A4A);
  border-color: color-mix(in oklch, var(--signal-green, #4A7A4A) 35%, transparent);
}

/* ── Approval card ── */
.wt-approval {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
}
.wt-approval__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wt-approval__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
}
.wt-approval__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.wt-approval__cta {
  display: flex;
  gap: 8px;
}
.wt-btn {
  font-family: var(--font-marketing);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-strong);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.wt-btn--ghost:hover { background: var(--bg-sunken); }
.wt-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.wt-btn--primary:hover {
  background: var(--accent-press, var(--accent));
}

/* ── Execution log ── */
.wt-log {
  margin: 0;
  padding: 20px 26px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--fg-strong);
  overflow-x: auto;
  font-feature-settings: "tnum";
  white-space: pre;
}
.wt-log__line {
  display: grid;
  grid-template-columns: 76px 16px 1fr;
  gap: 8px;
  align-items: baseline;
}
.wt-log__t {
  color: var(--fg-tertiary);
  white-space: nowrap;
}
.wt-log__sym {
  display: inline-block;
  text-align: center;
  color: var(--fg-tertiary);
}
.wt-log__m { color: var(--fg-strong); }
.wt-log__line.is-ok .wt-log__sym       { color: var(--signal-green, #4A7A4A); }
.wt-log__line.is-done .wt-log__sym     { color: var(--signal-green, #4A7A4A); }
.wt-log__line.is-done .wt-log__m       { font-weight: 500; }
.wt-log__line.is-wait .wt-log__sym     { color: var(--accent); }
.wt-log__line.is-wait .wt-log__m       { color: var(--accent); }
.wt-log__line.is-accent .wt-log__sym   { color: var(--accent); }
.wt-log__line.is-accent .wt-log__m     { color: var(--accent); font-weight: 500; }

.wt-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
  animation: wt-live-pulse 1500ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wt-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Result grid ── */
.wt-result__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg-strong);
}
.wt-result__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-raised);
}
.wt-result__cell {
  padding: 18px 22px;
  border-right: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-hair);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
}
.wt-result__cell:nth-child(3n) { border-right: none; }
.wt-result__cell:nth-last-child(-n+3) { border-bottom: none; }
.wt-result__cell--hero {
  grid-column: span 1;
}
.wt-result__k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.wt-result__v {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fg-strong);
  font-feature-settings: "tnum";
  letter-spacing: 0;
}
.wt-result__v--mono { letter-spacing: 0.02em; }
.wt-result__big {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  font-feature-settings: "tnum";
}
.wt-result__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-tertiary);
  letter-spacing: 0.02em;
}

/* ── responsive ── */
@media (max-width: 900px) {
  .wt-tabs {
    grid-template-columns: repeat(5, minmax(90px, 1fr));
    overflow-x: auto;
  }
  .wt-tab { padding: 12px 12px 14px; }
  .wt-tab__lbl { font-size: 15px; }
  .wt-tab__cap { display: none; }
  .wt-input { font-size: 17px; padding: 18px 20px; }
  .wt-kv { grid-template-columns: 1fr; }
  .wt-code, .wt-log { font-size: 11.5px; padding: 16px 18px; }
  .wt-result__grid { grid-template-columns: 1fr 1fr; }
  .wt-result__cell:nth-child(3n) { border-right: 1px solid var(--border-hair); }
  .wt-result__cell:nth-child(2n) { border-right: none; }
  .wt-result__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--border-hair); }
  .wt-result__cell:nth-last-child(-n+2) { border-bottom: none; }
  .wt-approval { flex-direction: column; align-items: flex-start; }
}


/* =================================================================
   Inline "Compiled AI" link — orange underline.
   ================================================================= */
.compiled-ai-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
  transition: text-decoration-color var(--dur-fast);
}
.compiled-ai-link:hover,
.compiled-ai-link:focus-visible {
  color: inherit;
  text-decoration-color: var(--accent-press);
}


/* =================================================================
   Footer trust badges (EU GDPR · DE made-in-Germany) — inline in .legal
   ================================================================= */
.footer-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 5px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  text-transform: none;
  letter-spacing: 0;
}
.footer-badge__flag {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.footer-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.footer-badge__title {
  font-family: var(--font-display, "Satoshi", sans-serif);
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-on-dark, #ffffff);
  letter-spacing: -0.005em;
}
.footer-badge__sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
  margin-top: 1px;
  text-transform: none;
}

@media (max-width: 640px) {
  .footer-badges { gap: 8px; }
  .footer-badge__flag { width: 18px; height: 18px; }
  .footer-badge__title { font-size: 10.5px; }
  .footer-badge__sub { font-size: 9px; }
}