/* ============================================================================
   MISSION SECTION — 4 candidate formats (PREVIEW ONLY)
   Namespaced per variant so they never collide. The chosen variant's rules
   get promoted into index.css and this file is deleted.
   Message: off-the-shelf platforms (Salesforce, GoHighLevel) are
   one-size-fits-all; we build to each company's exact needs and keep
   building as they grow.
   ============================================================================ */

/* ---- Variant 1: Manifesto ---------------------------------------------- */
.mission-manifesto { background: var(--color-surface); }
.mission-manifesto__headline {
  font-size: clamp(2.25rem, 3.4vw + 0.5rem, 3.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  max-width: 18ch;
  margin: var(--space-6) 0 0;
}
.mission-manifesto__headline .accent-words { color: var(--color-accent); }
.mission-manifesto__body {
  margin-top: var(--space-8);
  max-width: 58ch;
  font-size: var(--fs-body-lead);
  line-height: var(--lh-loose);
  color: var(--color-ink-72);
}

/* ---- Variant 2: Mission + 3 principles --------------------------------- */
.mission-principles__header { max-width: 62ch; }
.mission-principles__header h2 { font-size: var(--fs-h1); margin-top: var(--space-4); }
.mission-principles__lede {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lead);
  color: var(--color-ink-72);
  max-width: 56ch;
}
.mission-principles__grid {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.mission-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.mission-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}
.mission-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }
.mission-card p { color: var(--color-ink-72); line-height: var(--lh-body); }
@media (max-width: 900px) { .mission-principles__grid { grid-template-columns: 1fr; } }

/* ---- Variant 3: Split narrative ---------------------------------------- */
.mission-split__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
}
.mission-split__intro h2 { font-size: var(--fs-h1); margin-top: var(--space-4); }
.mission-split__intro p {
  margin-top: var(--space-5);
  font-size: var(--fs-body-lead);
  color: var(--color-ink-72);
  line-height: var(--lh-loose);
  max-width: 46ch;
}
.mission-split__list { display: grid; gap: var(--space-5); }
.mission-split__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  font-size: var(--fs-body-lead);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}
.mission-split__list svg {
  width: 22px; height: 22px;
  color: var(--color-accent);
  margin-top: 2px;
  flex-shrink: 0;
}
@media (max-width: 900px) { .mission-split__grid { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---- Variant 4: Numbered steps ----------------------------------------- */
.mission-steps__header { max-width: 50ch; }
.mission-steps__header h2 { font-size: var(--fs-h1); margin-top: var(--space-4); }
.mission-steps__list {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-8);
  max-width: 820px;
}
.mission-steps__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.mission-steps__list li:first-child { border-top: none; padding-top: 0; }
.mission-steps__num {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  line-height: 1;
}
.mission-steps__list h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.mission-steps__list p { color: var(--color-ink-72); max-width: 62ch; line-height: var(--lh-body); }

/* ---- Concept: Wayfinding / Environmental Graphic Design ---------------- */
.mission-wayfind {
  position: relative;
  background: var(--color-surface);
  overflow: hidden;
  /* faint blueprint coordinate grid */
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}
/* registration / crop marks in the four corners (technical-drawing language) */
.wf__crop { position: absolute; width: 20px; height: 20px; border: 2px solid var(--color-ink-40); pointer-events: none; z-index: 2; }
.wf__crop--tl { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.wf__crop--tr { top: 22px; right: 22px; border-left: 0; border-bottom: 0; }
.wf__crop--bl { bottom: 22px; left: 22px; border-right: 0; border-top: 0; }
.wf__crop--br { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }

.wf__inner { position: relative; z-index: 1; }
.wf__code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-ink-56);
}
.wf__title {
  font-size: clamp(2.5rem, 4.4vw + 0.5rem, 4rem);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-top: var(--space-4);
  max-width: 16ch;
}
.wf__title em { color: var(--color-accent); font-style: normal; }

/* the route */
.wf__route {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
}
.wf__node { position: relative; padding-right: var(--space-5); }
.wf__badge {
  display: inline-grid; place-items: center;
  width: 66px; height: 66px;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 1.5rem; font-weight: var(--fw-medium);
  color: var(--color-ink);
}
.wf__node--dest .wf__badge { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.wf__node h3 {
  margin-top: var(--space-5);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.wf__node p { margin-top: var(--space-2); color: var(--color-ink-72); max-width: 24ch; line-height: var(--lh-body); }
.wf__here {
  display: inline-block; margin-left: var(--space-3); vertical-align: middle;
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--color-accent);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 3px 9px;
}
/* connecting leg with a dashed rail + directional arrowhead */
.wf__leg {
  align-self: start;
  margin-top: 30px;               /* center on the 66px badge */
  width: 64px;
  display: flex; align-items: center;
  color: var(--color-accent);
}
.wf__leg::before {
  content: ""; flex: 1; height: 0;
  border-top: 2px dashed var(--color-accent);
}
.wf__leg svg { width: 20px; height: 20px; flex-shrink: 0; margin-left: -2px; }

/* off-the-shelf dead-end contrast */
.wf__deadend {
  margin-top: var(--space-16);
  display: inline-flex; align-items: center; gap: var(--space-3);
  border-top: 1px dashed var(--color-border-strong);
  padding-top: var(--space-6);
  font-family: var(--font-mono); font-size: var(--fs-body-sm);
  color: var(--color-ink-56); letter-spacing: 0.02em;
}
.wf__deadend svg { width: 22px; height: 22px; color: var(--color-ink-40); }

@media (max-width: 820px) {
  .wf__route { grid-template-columns: 1fr; }
  .wf__leg { margin: var(--space-5) 0; transform: rotate(90deg); transform-origin: left center; }
}

/* ============================================================================
   IMMERSIVE CONCEPTS (preview) — departure board / network / supergraphic
   ============================================================================ */

/* ---- Concept: Departure board (split-flap) ----------------------------- */
.mission-board { background: var(--color-bg); }
.mission-board__lead { max-width: 60ch; margin-bottom: var(--space-10); }
.mission-board__lead .kicker { display: inline-block; margin-bottom: var(--space-3); }
.mission-board__lead h2 { font-size: var(--fs-h1); }
.board {
  background: #0B1220;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.6vw, 36px);
  box-shadow: var(--shadow-lg);
}
.board__bar {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.board__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); box-shadow: 0 0 10px var(--color-warning); animation: board-pulse 1.6s ease-in-out infinite; }
@keyframes board-pulse { 50% { opacity: 0.35; } }
.board__bar strong { color: #fff; font-weight: 500; letter-spacing: var(--ls-caps); }
.board__bar span:last-child { margin-left: auto; color: var(--color-warning); }
.board__rows { display: grid; gap: 3px; perspective: 900px; }
.board__row {
  display: grid;
  grid-template-columns: 1.1fr auto 2fr auto auto;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: rgba(255,255,255,0.035);
  font-family: var(--font-mono); color: #fff;
  transform-origin: top center;
  opacity: 0; transform: rotateX(-90deg);
}
.mission-board.in-view .board__row {
  animation: flap 0.55s var(--ease-out) forwards;
  animation-delay: calc(var(--d) * 0.13s + 0.15s);
}
@keyframes flap {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  55%  { transform: rotateX(14deg);  opacity: 1; }
  100% { transform: rotateX(0);      opacity: 1; }
}
.board__sys { font-weight: 500; letter-spacing: 0.06em; }
.board__arrow { color: rgba(255,255,255,0.45); }
.board__dest { color: rgba(255,255,255,0.85); font-family: var(--font-body); }
.board__code { color: rgba(255,255,255,0.5); letter-spacing: 0.05em; }
.board__status {
  justify-self: end; font-size: var(--fs-caption); letter-spacing: var(--ls-caps);
  color: #0B1220; background: var(--color-warning);
  border-radius: var(--radius-sm); padding: 4px 9px;
}
.board__row--next { background: rgba(217,119,6,0.08); border: 1px dashed rgba(217,119,6,0.4); }
.board__row--next .board__sys { color: var(--color-warning); letter-spacing: 0.35em; }
.board__status--live { background: var(--color-success); color: #04160B; }
.board__caption { margin-top: var(--space-6); color: var(--color-ink-56); font-size: var(--fs-body-sm); }
@media (max-width: 760px) {
  .board__row { grid-template-columns: 1fr auto; }
  .board__arrow, .board__code { display: none; }
}

/* ---- Concept: You-are-here network ------------------------------------- */
.mission-map { background: var(--color-surface); }
.mission-map__head { max-width: 62ch; margin-bottom: var(--space-12); }
.mission-map__head .kicker { display: inline-block; margin-bottom: var(--space-3); }
.mission-map__head h2 { font-size: var(--fs-h1); }
.map-stage {
  display: grid;
  grid-template-columns: 0.8fr auto 1.2fr;
  gap: var(--space-8);
  align-items: center;
}
.map-generic { display: grid; gap: var(--space-3); }
.map-generic__label { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-ink-40); margin-bottom: var(--space-2); }
.map-chip {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-ink-40);
  background: rgba(15,23,42,0.02);
  font-size: var(--fs-body-sm);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.map-chip span { font-family: var(--font-mono); font-size: var(--fs-caption); }
.map-arrow { display: grid; place-items: center; color: var(--color-ink-40); }
.map-arrow svg { width: 40px; height: 40px; }
/* custom network */
.map-net { position: relative; aspect-ratio: 5 / 4; }
.map-net__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-net__line { stroke: var(--color-accent); stroke-width: 1.5; fill: none; opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mission-map.in-view .map-net__line { transition: stroke-dashoffset 1s var(--ease-out); transition-delay: 0.2s; stroke-dashoffset: 0; }
.map-you {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 2; text-align: center;
}
.map-you__ring { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--color-accent); display: grid; place-items: center; margin: 0 auto var(--space-2); background: var(--color-surface); box-shadow: 0 0 0 6px rgba(30,58,95,0.08); position: relative; }
.map-you__ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-accent); animation: you-pulse 2s ease-out infinite; }
@keyframes you-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.map-you__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); }
.map-you__label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-accent); }
.map-node {
  position: absolute; z-index: 2; transform: translate(-50%,-50%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm); font-weight: 500; white-space: nowrap;
  border: 1.5px solid; background: var(--color-surface);
  opacity: 0;
}
.mission-map.in-view .map-node { animation: node-pop 0.4s var(--ease-out) forwards; animation-delay: calc(var(--np) * 0.12s + 0.7s); }
@keyframes node-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.6); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.map-node--a { border-color: #1E3A5F; color: #1E3A5F; }
.map-node--b { border-color: #0F766E; color: #0F766E; }
.map-node--c { border-color: #B45309; color: #B45309; }
.map-node--d { border-color: #6D28D9; color: #6D28D9; }
.map-node--e { border-color: #15803D; color: #15803D; }
.map-caption { margin-top: var(--space-10); color: var(--color-ink-56); font-size: var(--fs-body-sm); }
@media (max-width: 820px) {
  .map-stage { grid-template-columns: 1fr; gap: var(--space-10); }
  .map-arrow svg { transform: rotate(90deg); }
  .map-net { aspect-ratio: 1 / 1; max-width: 420px; margin-inline: auto; }
}

/* ---- Concept: Environmental supergraphic ------------------------------- */
.mission-super { background: var(--color-accent); color: var(--color-bg); overflow: hidden; }
.super {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16); align-items: center;
}
.super__kick { font-family: var(--font-mono); letter-spacing: var(--ls-caps); font-size: var(--fs-caption); text-transform: uppercase; color: rgba(245,240,230,0.65); }
.super__head {
  color: var(--color-bg);
  font-size: clamp(4rem, 11vw, 10rem);
  line-height: 0.84; letter-spacing: -0.035em;
  text-transform: uppercase; margin-top: var(--space-5);
}
.super__head span { display: block; opacity: 0; transform: translateY(0.25em); }
.mission-super.in-view .super__head span { animation: super-rise 0.6s var(--ease-out) forwards; }
.mission-super.in-view .super__head span:nth-child(2) { animation-delay: 0.1s; }
.mission-super.in-view .super__head span:nth-child(3) { animation-delay: 0.2s; }
@keyframes super-rise { to { opacity: 1; transform: translateY(0); } }
.super__head em { color: var(--color-warning); font-style: normal; }
.super__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.super__tile {
  border: 1px solid rgba(245,240,230,0.25);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-color var(--duration-base), background var(--duration-base);
}
.super__tile:hover { border-color: var(--color-warning); background: rgba(245,240,230,0.04); }
.super__tile svg { width: 30px; height: 30px; color: var(--color-bg); }
.super__tile b { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); }
.super__tile em { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(245,240,230,0.55); }
.super__say { grid-column: 1 / -1; margin-top: var(--space-6); max-width: 62ch; color: rgba(245,240,230,0.82); font-size: var(--fs-body-lead); line-height: var(--lh-loose); }
@media (max-width: 860px) {
  .super { grid-template-columns: 1fr; gap: var(--space-10); }
}

/* ============================================================================
   DASHBOARD SHOWCASE (preview) — representative product mockup + 2 framings
   ============================================================================ */

/* ---- The dashboard mockup (shared) ------------------------------------- */
.dash {
  --d-card: #FFFFFF; --d-bg: #F1F3F7; --d-ink: #101828; --d-mut: #667085;
  --d-line: #E4E7EC; --d-accent: #1E3A5F; --d-green: #16A34A; --d-amber: #D97706;
  background: var(--d-bg);
  border: 1px solid rgba(16,24,40,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  color: var(--d-ink);
  width: 100%;
}
.dash__chrome {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 10px 14px; background: #FBFBFC; border-bottom: 1px solid var(--d-line);
}
.dash__dots { display: inline-flex; gap: 6px; }
.dash__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D7DBE2; }
/* macOS traffic lights */
.dash__dots i:nth-child(1) { background: #FF5F57; }
.dash__dots i:nth-child(2) { background: #FEBC2E; }
.dash__dots i:nth-child(3) { background: #28C840; }
.dash__url { font-family: var(--font-mono); font-size: 11px; color: var(--d-mut); background: #fff; border: 1px solid var(--d-line); border-radius: var(--radius-pill); padding: 3px 12px; }
.dash__body { display: grid; grid-template-columns: 180px 1fr; min-height: 420px; }
.dash__side { background: #FBFBFC; border-right: 1px solid var(--d-line); padding: var(--space-4); }
.dash__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin-bottom: var(--space-5); }
.dash__logo { width: 20px; height: 20px; border-radius: 6px; background: var(--d-accent); }
.dash__nav { display: grid; gap: 2px; }
.dash__nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--d-mut); }
.dash__nav a svg { width: 16px; height: 16px; }
.dash__nav a.is-active { background: rgba(30,58,95,0.08); color: var(--d-accent); font-weight: 600; }
.dash__main { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; }
.dash__head { display: flex; align-items: center; gap: var(--space-3); }
.dash__head h4 { font-family: var(--font-body); font-size: 16px; font-weight: 600; }
.dash__pill { font-size: 11px; font-weight: 600; color: var(--d-green); background: rgba(22,163,74,0.1); border-radius: var(--radius-pill); padding: 2px 10px; display: inline-flex; align-items: center; gap: 5px; }
.dash__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--d-green); animation: board-pulse 1.6s infinite; }
.dash__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.dash__kpi { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--radius-md); padding: var(--space-4); }
.dash__kpi span { font-size: 11px; color: var(--d-mut); text-transform: uppercase; letter-spacing: 0.04em; }
.dash__kpi b { display: block; font-size: 22px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -0.01em; }
.dash__kpi em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--d-green); }
.dash__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-3); }
.dash__card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: var(--radius-md); padding: var(--space-4); }
.dash__card-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; margin-bottom: var(--space-4); }
.dash__card-h span { font-weight: 400; font-size: 11px; color: var(--d-mut); }
.dash__bars { display: flex; align-items: flex-end; gap: 10px; height: 120px; }
.dash__bars i { flex: 1; background: linear-gradient(var(--d-accent), #33557f); border-radius: 4px 4px 0 0; height: var(--h); transform-origin: bottom; transform: scaleY(0); }
.dash-annotated.in-view .dash__bars i, .dash-immersive.in-view .dash__bars i, .dash-clean.in-view .dash__bars i { animation: bar-grow 0.7s var(--ease-out) forwards; }
.dash__bars i:nth-child(1){animation-delay:.15s} .dash__bars i:nth-child(2){animation-delay:.22s} .dash__bars i:nth-child(3){animation-delay:.29s} .dash__bars i:nth-child(4){animation-delay:.36s} .dash__bars i:nth-child(5){animation-delay:.43s} .dash__bars i:nth-child(6){animation-delay:.5s} .dash__bars i:nth-child(7){animation-delay:.57s}
@keyframes bar-grow { to { transform: scaleY(1); } }
.dash__feed ul { display: grid; gap: 11px; }
.dash__feed li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--d-ink); }
.dash__feed li em { margin-left: auto; color: var(--d-mut); font-style: normal; font-size: 11px; }
.dash__feed .dot { width: 7px; height: 7px; border-radius: 50%; }
.dash__feed .dot.g { background: var(--d-green); } .dash__feed .dot.b { background: var(--d-accent); } .dash__feed .dot.a { background: var(--d-amber); }
.dash__table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dash__table td { padding: 9px 6px; border-top: 1px solid var(--d-line); color: var(--d-ink); }
.dash__table td:first-child { font-weight: 600; }
.dash__table td:nth-child(2), .dash__table td:last-child { color: var(--d-mut); }
.dash__table .tag { font-size: 10px; font-weight: 600; border-radius: var(--radius-pill); padding: 2px 8px; }
.dash__table .tag.ok { color: var(--d-green); background: rgba(22,163,74,0.1); }
.dash__table .tag.warn { color: var(--d-amber); background: rgba(217,119,6,0.1); }
@media (max-width: 720px) {
  .dash__body { grid-template-columns: 1fr; }
  .dash__side { display: none; }
  .dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .dash__grid { grid-template-columns: 1fr; }
}

/* ---- Framing 1: annotated product shot (EGD callouts) ------------------ */
.dash-annotated { background: var(--color-surface); }
.dash-annotated__head { max-width: 60ch; margin: 0 auto var(--space-12); text-align: center; }
.dash-annotated__head .kicker { display: inline-block; margin-bottom: var(--space-3); }
.dash-annotated__head h2 { font-size: var(--fs-h1); }
.dash-annotated__stage { position: relative; max-width: 960px; margin-inline: auto; padding: 26px; }
.dash-annotated__stage .wf__crop { position: absolute; }
.dash-annotated__stage .wf__crop--tl { top: 0; left: 0; }
.dash-annotated__stage .wf__crop--tr { top: 0; right: 0; }
.dash-annotated__stage .wf__crop--bl { bottom: 0; left: 0; }
.dash-annotated__stage .wf__crop--br { bottom: 0; right: 0; }
.dash-callouts { list-style: none; }
.dash-callout {
  position: absolute; z-index: 3; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent); background: var(--color-bg);
  border: 1px solid var(--color-accent); border-radius: var(--radius-pill);
  padding: 4px 11px; white-space: nowrap;
}
.dash-callout--1 { top: 32%; left: -14px; }
.dash-callout--2 { top: 6%; right: -10px; }
.dash-callout--3 { bottom: 10%; left: 40px; }
.dash-annotated__note { text-align: center; margin-top: var(--space-8); color: var(--color-ink-56); font-size: var(--fs-body-sm); }
@media (max-width: 760px) { .dash-callout { display: none; } }

/* ---- Framing 2: immersive tilted ------------------------------------- */
.dash-immersive { background: var(--color-accent); color: var(--color-bg); overflow: hidden; }
.dash-immersive__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); align-items: center; }
.dash-immersive__copy .kicker { color: rgba(245,240,230,0.6); display: inline-block; margin-bottom: var(--space-4); }
.dash-immersive__copy h2 { color: var(--color-bg); font-size: var(--fs-h1); }
.dash-immersive__copy p { color: rgba(245,240,230,0.8); margin-top: var(--space-5); font-size: var(--fs-body-lead); line-height: var(--lh-loose); max-width: 42ch; }
.dash-immersive__copy .btn { margin-top: var(--space-7); }
.dash-immersive__frame { perspective: 1600px; }
.dash-immersive__frame .screen {
  transform: rotateY(-14deg) rotateX(6deg) scale(0.98);
  box-shadow: -30px 40px 80px rgba(0,0,0,0.35);
  transition: transform 0.8s var(--ease-out);
}
.dash-immersive.in-view .dash-immersive__frame .screen { transform: rotateY(-9deg) rotateX(3deg) scale(1); }
@media (max-width: 860px) {
  .dash-immersive__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .dash-immersive__frame .screen { transform: none; box-shadow: var(--shadow-lg); }
  .dash-immersive.in-view .dash-immersive__frame .screen { transform: none; }
}
/* inverted button so the CTA reads on the navy field */
.dash-immersive .btn-primary { background: var(--color-bg); color: var(--color-accent); box-shadow: none; }
.dash-immersive .btn-primary:hover { background: #fff; }

/* ---- Framing 3: clean tilt on cream (no color block) ------------------- */
.dash-clean { background: var(--color-bg); overflow: hidden; }
.dash-clean__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--space-16); align-items: center; }
.dash-clean__copy .kicker { display: inline-block; margin-bottom: var(--space-4); }
.dash-clean__copy h2 { font-size: var(--fs-h1); }
.dash-clean__copy p { color: var(--color-ink-72); margin-top: var(--space-5); font-size: var(--fs-body-lead); line-height: var(--lh-loose); max-width: 42ch; }
.dash-clean__copy .btn { margin-top: var(--space-7); }
.dash-clean__frame { perspective: 1800px; }
.dash-clean__frame .screen {
  transform: rotateY(-11deg) rotateX(5deg) scale(0.97);
  box-shadow: -24px 34px 60px rgba(15,23,42,0.13), -6px 10px 22px rgba(15,23,42,0.06);
  transition: transform 0.9s var(--ease-out);
}
.dash-clean.in-view .dash-clean__frame .screen { transform: rotateY(-7deg) rotateX(3deg) scale(1); }
@media (max-width: 900px) {
  .dash-clean__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .dash-clean__frame .screen, .dash-clean.in-view .dash-clean__frame .screen { transform: none; box-shadow: var(--shadow-lg); }
}

/* ---- Shared "screen" panel (dashboard / flow / agent) ------------------ */
.screen { background: #fff; border: 1px solid rgba(16,24,40,0.08); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); width: 100%; font-family: var(--font-body); color: #101828; }

/* ---- View: Analytics (standout = drawing chart + live point) ----------- */
.an__body { padding: var(--space-6); background: #fff; display: grid; gap: var(--space-5); }
.an__head { display: flex; align-items: center; gap: var(--space-3); }
.an__head h4 { font-size: 15px; font-weight: 600; }
.an__pill { font-size: 11px; font-weight: 600; color: #16A34A; background: rgba(22,163,74,0.1); border-radius: var(--radius-pill); padding: 2px 10px; display: inline-flex; align-items: center; gap: 5px; }
.an__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; animation: board-pulse 1.6s infinite; }
.an__tabs { margin-left: auto; display: flex; gap: 4px; }
.an__tab { font-size: 11px; color: #667085; padding: 4px 11px; border-radius: var(--radius-pill); }
.an__tab.is-active { background: rgba(30,58,95,0.08); color: var(--color-accent); font-weight: 600; }
.an__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.an__kpi span { font-size: 11px; color: #667085; text-transform: uppercase; letter-spacing: 0.04em; }
.an__kpi b { display: block; font-size: 24px; font-weight: 700; margin-top: 3px; letter-spacing: -0.01em; }
.an__kpi em { font-style: normal; font-size: 11px; font-weight: 600; color: #16A34A; }
.an__chartwrap { position: relative; border: 1px solid #E4E7EC; border-radius: var(--radius-md); padding: var(--space-5) var(--space-4) var(--space-3); }
.an__svg { width: 100%; height: auto; display: block; overflow: visible; }
.an__grid line { stroke: #EEF1F5; stroke-width: 1; }
.an__area { fill: url(#anGrad); opacity: 0; }
.dash-clean.in-view .an__area { transition: opacity 0.8s ease 0.5s; opacity: 1; }
.an__line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dash-clean.in-view .an__line { transition: stroke-dashoffset 1.4s var(--ease-out) 0.2s; stroke-dashoffset: 0; }
.an__pt { fill: #fff; stroke: var(--color-accent); stroke-width: 3; opacity: 0; }
.dash-clean.in-view .an__pt { transition: opacity 0.3s ease 1.5s; opacity: 1; }
.an__ping { fill: none; stroke: var(--color-accent); stroke-width: 2; opacity: 0; }
.dash-clean.in-view .an__ping { animation: an-ping 2.2s ease-out 1.6s infinite; }
@keyframes an-ping { 0% { r: 5; opacity: 0.6; } 100% { r: 22; opacity: 0; } }
.an__labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: #98A2B3; font-family: var(--font-mono); }
.an__tip { position: absolute; top: 8px; right: 14px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 4px 9px; opacity: 0; }
.dash-clean.in-view .an__tip { transition: opacity 0.4s ease 1.6s, transform 0.4s ease 1.6s; opacity: 1; }

/* ---- Composition: zigzag showcase (3 alternating rows, one section) ---- */
.zig__head { max-width: 760px; margin: 0 auto var(--space-24); text-align: center; }
.zig__head .kicker { display: inline-block; margin-bottom: var(--space-3); }
.zig__head h2 { font-size: var(--fs-h1); text-wrap: balance; }
.zig__head p { color: var(--color-ink-72); margin-top: var(--space-4); font-size: var(--fs-body-lead); }
.zig .dash-clean__copy p { margin-top: var(--space-6); }
.zig__rows { display: grid; gap: var(--space-32); }
.zig__row { position: relative; }
/* flipped row: screen left, copy right, mirrored tilt */
.zig__row--flip .dash-clean__copy { order: 2; }
.zig__row--flip .dash-clean__frame { order: 1; }
.zig__row--flip.dash-clean .dash-clean__frame .screen {
  transform: rotateY(11deg) rotateX(5deg) scale(0.97);
  box-shadow: 24px 34px 60px rgba(15,23,42,0.13), 6px 10px 22px rgba(15,23,42,0.06);
}
.zig__row--flip.dash-clean.in-view .dash-clean__frame .screen { transform: rotateY(7deg) rotateX(3deg) scale(1); }
/* row-level background must not repaint over the section; rows must not
   clip the screens' navy glow */
.zig .dash-clean, .zig.dash-clean { background: transparent; overflow: visible; }
.zig { background: var(--color-bg); }
/* larger stage: rows get a wider container than the standard 1200px content
   column, so the screens and their copy carry more of the viewport */
.zig .container--content { max-width: 1320px; }
.zig .zig__row .dash-clean__copy h2 { font-size: clamp(2rem, 2.8vw + 0.5rem, 2.75rem); }
.zig .zig__row .dash-clean__copy p { font-size: 1.25rem; max-width: 44ch; }
@media (max-width: 900px) {
  .zig__rows { gap: var(--space-20); }
  .zig__row--flip .dash-clean__copy, .zig__row--flip .dash-clean__frame { order: initial; }
  .zig__row--flip.dash-clean .dash-clean__frame .screen,
  .zig__row--flip.dash-clean.in-view .dash-clean__frame .screen { transform: none; box-shadow: var(--shadow-lg); }
}

/* closing "and much more" strip */
.zig__more { margin-top: var(--space-24); text-align: center; }
/* tighten the gap to the next section: the strip is the section's visual
   full-stop, so most of the bottom padding is redundant */
.zig.section { padding-bottom: var(--space-8); }
/* the calculator's dramatic 30dvh entrance pad was designed for sitting
   directly under the hero; with the showcase in between it reads as dead
   space, so fall back to standard section padding */
.zig + .roi-calc { padding-top: var(--space-24); }
/* all-around navy glow on the screen panels: no offset, so it rings the
   whole panel evenly and fades into the cream (offset shadows read as a
   hard cut-off line on the tilted panels). !important overrides the
   tilt/in-view ink-shadow variants in one rule; the variant declarations
   get deleted properly when this is promoted. */
.zig .screen {
  box-shadow: 0 0 20px rgba(30, 58, 95, 0.14),
              0 0 56px 10px rgba(30, 58, 95, 0.09) !important;
}
.zig__more-kicker {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--color-ink-56); margin-bottom: var(--space-5);
}
.zig__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.zig__chip {
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--color-ink-72);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: transparent;
}
.zig__chip--open { border-style: dashed; color: var(--color-accent); border-color: var(--color-accent); }
.zig__more-line { margin-top: var(--space-5); color: var(--color-ink-56); font-size: var(--fs-body-sm); }

/* ---- View: Automations full (standout = spark traveling the wire) ------ */
.autofull .auto__canvas { gap: 12px; }
.autofull .auto__stat { margin-top: var(--space-5); }

/* ---- Composition: three-view showcase (analytics / CRM / automations) -- */
.showcase__head { max-width: 62ch; margin: 0 auto var(--space-16); text-align: center; }
.showcase__head .kicker { display: inline-block; margin-bottom: var(--space-3); }
.showcase__head h2 { font-size: var(--fs-h1); }
.showcase__head p { color: var(--color-ink-72); margin-top: var(--space-4); font-size: var(--fs-body-lead); }
.showcase__trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  perspective: 1800px;
  align-items: center;
}
.showcase__item { display: grid; gap: var(--space-4); justify-items: center; }
.showcase__item .screen { transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
.showcase__item--l .screen { transform: rotateY(9deg) scale(0.97); box-shadow: 14px 24px 44px rgba(15,23,42,0.10); }
.showcase__item--c .screen { transform: translateY(-14px) scale(1.02); box-shadow: 0 30px 60px rgba(15,23,42,0.14); z-index: 2; }
.showcase__item--r .screen { transform: rotateY(-9deg) scale(0.97); box-shadow: -14px 24px 44px rgba(15,23,42,0.10); }
.showcase__item:hover .screen { transform: translateY(-10px) scale(1.03); box-shadow: 0 34px 64px rgba(15,23,42,0.16); z-index: 3; }
.showcase__tag {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--color-ink-56);
}
.showcase__tag b { color: var(--color-ink); font-weight: var(--fw-medium); }
/* compact the screens for 1/3 width */
.showcase .an__body { padding: var(--space-4); gap: var(--space-3); }
.showcase .an__kpis { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.showcase .an__kpi b { font-size: 17px; }
.showcase .an__kpi span { font-size: 9px; }
.showcase .an__kpi em { font-size: 10px; }
.showcase .an__head h4, .showcase .crm__head h4 { font-size: 13px; }
.showcase .an__tabs { display: none; }
.showcase .crm__body { padding: var(--space-4); }
.showcase .crm__board { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.showcase .crm__deal b { font-size: 11px; }
.showcase .crm__deal span { font-size: 10px; }
.showcase .dash__chrome { padding: 8px 10px; }
.showcase .dash__url { font-size: 9.5px; padding: 2px 9px; }
@media (max-width: 980px) {
  .showcase__trio { grid-template-columns: 1fr; gap: var(--space-10); max-width: 460px; margin-inline: auto; }
  .showcase__item--l .screen, .showcase__item--c .screen, .showcase__item--r .screen { transform: none; box-shadow: var(--shadow-lg); }
}

/* ---- View: Automations mini (standout = pulse traveling the wire) ------ */
.auto__body { padding: var(--space-5) var(--space-4); background: #fff; }
.auto__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.auto__head h4 { font-size: 13px; font-weight: 600; }
.auto__head .an__pill { margin-left: auto; }
.auto__canvas { position: relative; display: grid; gap: 14px; padding: 4px 2px; }
.auto__node {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid #E4E7EC; border-radius: 8px;
  padding: 10px 12px; font-size: 12px; font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.auto__node svg { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; }
.auto__node em { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: #98A2B3; margin-left: auto; }
.auto__node--done { border-left: 3px solid #16A34A; }
.auto__wire { position: absolute; left: 22px; top: 40px; bottom: 40px; width: 2px; background: #E4E7EC; z-index: 0; }
.auto__spark { position: absolute; left: 17px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(30,58,95,0.14), 0 0 12px rgba(30,58,95,0.5); z-index: 2; opacity: 0; }
.dash-clean.in-view .auto__spark { animation: spark-travel 3.2s var(--ease-standard) infinite; }
@keyframes spark-travel {
  0% { top: 34px; opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: calc(100% - 46px); opacity: 0; }
}
.auto__stat { margin-top: var(--space-4); border-top: 1px solid #E4E7EC; padding-top: var(--space-3); font-size: 11px; color: #667085; display: flex; justify-content: space-between; }
.auto__stat b { color: #101828; font-size: 12px; }
.auto__stat span { color: #16A34A; font-weight: 600; }

/* ---- View: CRM pipeline (standout = live deal sliding in) -------------- */
.crm__body { padding: var(--space-5); background: #F1F3F7; }
.crm__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.crm__head h4 { font-size: 15px; font-weight: 600; }
.crm__head .an__pill { margin-left: auto; }
.crm__board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crm__col { background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; padding: 10px; }
.crm__col-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #667085; display: flex; justify-content: space-between; margin-bottom: 10px; }
.crm__count { color: #98A2B3; }
.crm__deal { background: #fff; border: 1px solid #E4E7EC; border-radius: 6px; padding: 9px 10px; margin-bottom: 7px; box-shadow: var(--shadow-sm); }
.crm__deal:last-child { margin-bottom: 0; }
.crm__deal b { display: block; font-size: 12px; font-weight: 600; }
.crm__deal span { color: #667085; font-size: 11px; }
.crm__deal--won { border-left: 3px solid #16A34A; }
.crm__deal--new { opacity: 0; }
.dash-clean.in-view .crm__deal--new { animation: deal-in 5s ease-in-out infinite; }
@keyframes deal-in {
  0% { opacity: 0; transform: translateY(-14px) scale(0.96); box-shadow: 0 0 0 3px rgba(30,58,95,0.18); }
  10% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 3px rgba(30,58,95,0.18); }
  22% { box-shadow: var(--shadow-sm); }
  92% { opacity: 1; }
  100% { opacity: 1; }
}
@media (max-width: 720px) { .crm__board { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   ANIMATED GRAPHIC A — live automation flow (n8n-style)
   ============================================================================ */
.flow__body { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-4); padding: var(--space-5); background: #F1F3F7; }
.flow__col-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: var(--space-4); color: #101828; }
.flow__live { margin-left: auto; font-size: 11px; font-weight: 600; color: #16A34A; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.flow__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; animation: board-pulse 1.4s infinite; }
.flow__canvas { position: relative; }
.flow__rail { position: absolute; left: 9px; top: 16px; bottom: 16px; width: 2px; background: #E2E8F0; }
.flow__pulse { position: absolute; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px rgba(30,58,95,0.16), 0 0 14px rgba(30,58,95,0.55); z-index: 3; opacity: 0; }
.dash-immersive.in-view .flow__pulse { animation: flow-travel 4s var(--ease-standard) infinite; }
@keyframes flow-travel { 0% { top: 8px; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 22px); opacity: 0; } }
.flow__steps { display: grid; gap: 10px; padding-left: 28px; }
.flow__step { position: relative; }
.flow__mark { position: absolute; left: -23px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #CBD5E1; z-index: 2; }
.flow__box { background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; transition: border-color 0.3s, box-shadow 0.3s; }
.flow__box em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #94A3B8; margin-left: auto; }
.flow__badge { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--color-accent); border-radius: 4px; padding: 2px 5px; margin-left: auto; }
.flow__score { color: #16A34A; font-weight: 700; }
.dash-immersive.in-view .flow__step .flow__mark { animation: mark-lit 4s var(--ease-standard) infinite; }
.dash-immersive.in-view .flow__step .flow__box { animation: box-lit 4s var(--ease-standard) infinite; }
.dash-immersive.in-view .flow__step:nth-child(1) .flow__mark, .dash-immersive.in-view .flow__step:nth-child(1) .flow__box { animation-delay: 0.35s; }
.dash-immersive.in-view .flow__step:nth-child(2) .flow__mark, .dash-immersive.in-view .flow__step:nth-child(2) .flow__box { animation-delay: 1.1s; }
.dash-immersive.in-view .flow__step:nth-child(3) .flow__mark, .dash-immersive.in-view .flow__step:nth-child(3) .flow__box { animation-delay: 1.9s; }
.dash-immersive.in-view .flow__step:nth-child(4) .flow__mark, .dash-immersive.in-view .flow__step:nth-child(4) .flow__box { animation-delay: 2.7s; }
.dash-immersive.in-view .flow__step:nth-child(5) .flow__mark, .dash-immersive.in-view .flow__step:nth-child(5) .flow__box { animation-delay: 3.5s; }
@keyframes mark-lit { 0% { background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 0 5px rgba(30,58,95,0.18); } 16% { background: var(--color-accent); border-color: var(--color-accent); } 34%, 100% { background: #fff; border-color: #CBD5E1; box-shadow: none; } }
@keyframes box-lit { 0% { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(30,58,95,0.08); } 34%, 100% { border-color: #E4E7EC; box-shadow: none; } }
.flow__log { background: #fff; border: 1px solid #E4E7EC; border-radius: var(--radius-md); padding: var(--space-4); }
.flow__log ul { display: grid; gap: 10px; }
.flow__log li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #101828; opacity: 0; }
.dash-immersive.in-view .flow__log li { animation: log-in 0.5s var(--ease-out) forwards; }
.dash-immersive.in-view .flow__log li:nth-child(1) { animation-delay: 0.5s; }
.dash-immersive.in-view .flow__log li:nth-child(2) { animation-delay: 1.25s; }
.dash-immersive.in-view .flow__log li:nth-child(3) { animation-delay: 2.05s; }
.dash-immersive.in-view .flow__log li:nth-child(4) { animation-delay: 2.85s; }
.dash-immersive.in-view .flow__log li:nth-child(5) { animation-delay: 3.65s; }
@keyframes log-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
.flow__log li .dot { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; flex-shrink: 0; }
.flow__log li em { margin-left: auto; color: #94A3B8; font-style: normal; font-family: var(--font-mono); font-size: 11px; }
.flow__sum { margin-top: var(--space-4); border-top: 1px solid #E4E7EC; padding-top: var(--space-4); font-size: 12px; }
.flow__sum b { display: block; font-size: 15px; }
.flow__sum span { color: #16A34A; font-weight: 600; }

/* ============================================================================
   ANIMATED GRAPHIC B — AI assistant at work
   ============================================================================ */
.agent__body { padding: var(--space-5); background: #F1F3F7; display: grid; gap: 12px; min-height: 420px; align-content: start; }
.agent__bar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.agent__bar .flow__live { margin-left: auto; }
.agent__msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; }
.agent__msg--user { justify-self: end; background: var(--color-accent); color: #fff; border-bottom-right-radius: 4px; }
.agent__msg--ai { justify-self: start; background: #fff; border: 1px solid #E4E7EC; border-bottom-left-radius: 4px; }
.agent__typing { display: inline-flex; gap: 4px; }
.agent__typing i { width: 6px; height: 6px; border-radius: 50%; background: #94A3B8; animation: type-bounce 1.2s infinite; }
.agent__typing i:nth-child(2) { animation-delay: 0.2s; }
.agent__typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes type-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.agent__cites { display: flex; gap: 6px; flex-wrap: wrap; }
.agent__cite { font-family: var(--font-mono); font-size: 10px; color: var(--color-accent); background: rgba(30,58,95,0.08); border-radius: var(--radius-pill); padding: 3px 9px; opacity: 0; }
.dash-immersive.in-view .agent__cite { animation: node-pop 0.4s var(--ease-out) forwards; }
.dash-immersive.in-view .agent__cite:nth-child(1) { animation-delay: 0.6s; }
.dash-immersive.in-view .agent__cite:nth-child(2) { animation-delay: 0.8s; }
.dash-immersive.in-view .agent__cite:nth-child(3) { animation-delay: 1.0s; }
.agent__action { background: #fff; border: 1px solid #E4E7EC; border-left: 3px solid #16A34A; border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; opacity: 0; }
.dash-immersive.in-view .agent__action { animation: log-in 0.5s var(--ease-out) 1.3s forwards; }
.agent__action-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.agent__check { width: 16px; height: 16px; border-radius: 50%; background: #16A34A; color: #fff; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; }
.agent__caret { display: inline-block; width: 2px; height: 1em; background: var(--color-accent); vertical-align: text-bottom; margin-left: 2px; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }