/* ==========================================================================
   Omni Agents — page styles (scoped .agents-*)
   Hero "Atelier" · pipeline demo · four moves · roster · routing · quality loop.
   Logical properties only (RTL-safe).
   ========================================================================== */

/* ==========================================================================
   HERO — atelier
   ========================================================================== */
.agents-hero {
  --orb: clamp(340px, min(36vw, 62svh), 560px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: max(100svh, 720px);
  padding-block: calc(var(--header-h) + clamp(28px, 4vw, 56px)) clamp(20px, 2.5vw, 32px);
  overflow: hidden;
  isolation: isolate;
}
.agents-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42% 46% at 50% 60%, color-mix(in oklab, var(--blue) 20%, transparent), transparent 70%),
    radial-gradient(26% 30% at 60% 66%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 70%);
  pointer-events: none;
}
.agents-hero__bg .grid-lines {
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, black 5%, transparent 60%);
  mask-image: radial-gradient(ellipse at 50% 60%, black 5%, transparent 60%);
  opacity: 0.35;
}

.agents-hero__stage {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) var(--orb) minmax(0, 0.88fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 24px;
}
.agents-hero__head {
  grid-column: 1 / 3;
  grid-row: 1;
  /* never reach the orb's centre line: the top orbit mark stays visible with long translations */
  max-width: calc(100% - var(--orb) / 2 - 32px);
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 22px;
  pointer-events: none;
}
.agents-hero__head > * { pointer-events: auto; }
.agents-hero__title {
  font-size: clamp(44px, 5.6vw, 92px);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--text);
  text-shadow: 0 2px 30px color-mix(in oklab, var(--bg-0) 60%, transparent);
}
.agents-hero__title .accent { font-size: 1.06em; letter-spacing: -0.02em; }

.agents-hero__readout {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  z-index: 3;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 4px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-1) 50%, transparent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.agents-hero__readout [data-readout] { color: var(--text); }
.agents-hero__readout-sep { color: var(--text-3); opacity: 0.6; }
.agents-hero__readout-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 10px var(--gold-2); }

/* Orb + orbit */
.agents-hero__orb {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  position: relative;
  width: var(--orb);
  aspect-ratio: 1;
  z-index: 1;
}
.agents-orb {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 45%, color-mix(in oklab, var(--bg-3) 90%, transparent), var(--bg-0) 72%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ice) 10%, transparent), 0 40px 120px -30px color-mix(in oklab, var(--blue) 45%, transparent), inset 0 0 80px color-mix(in oklab, var(--bg-0) 90%, transparent);
}
.agents-orb__poster {
  --dots-a:
    radial-gradient(circle at 30% 40%, color-mix(in oklab, var(--ice) 90%, transparent) 0 0.7px, transparent 1.3px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 20%, color-mix(in oklab, var(--blue-2) 90%, transparent) 0 0.8px, transparent 1.4px) 0 0 / 11px 13px,
    radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--ice) 70%, transparent) 0 0.6px, transparent 1.2px) 0 0 / 13px 17px,
    radial-gradient(circle at 60% 60%, var(--ice-2) 0 0.9px, transparent 1.6px) 0 0 / 23px 29px;
  --dots-b:
    radial-gradient(circle at 30% 40%, color-mix(in oklab, var(--gold-3) 90%, transparent) 0 0.7px, transparent 1.3px) 0 0 / 9px 7px,
    radial-gradient(circle at 70% 20%, color-mix(in oklab, var(--gold-2) 90%, transparent) 0 0.8px, transparent 1.4px) 0 0 / 13px 11px,
    radial-gradient(circle at 20% 80%, color-mix(in oklab, var(--gold-3) 70%, transparent) 0 0.6px, transparent 1.2px) 0 0 / 17px 13px,
    radial-gradient(circle at 60% 60%, var(--gold-3) 0 0.9px, transparent 1.6px) 0 0 / 29px 23px;
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 1.2s var(--ease-out);
}
.agents-orb__poster::before,
.agents-orb__poster::after {
  content: "";
  position: absolute;
  inset: 0;
}
.agents-orb__poster::before {
  background: var(--dots-a), radial-gradient(closest-side at 41% 50%, color-mix(in oklab, var(--blue-2) 32%, transparent), transparent);
  -webkit-mask-image: radial-gradient(34% 40% at 41% 50%, black 0 30%, color-mix(in oklab, var(--bg-0) 45%, transparent) 62%, transparent 100%);
  mask-image: radial-gradient(34% 40% at 41% 50%, black 0 30%, color-mix(in oklab, var(--bg-0) 45%, transparent) 62%, transparent 100%);
}
.agents-orb__poster::after {
  background: var(--dots-b), radial-gradient(closest-side at 59% 50%, color-mix(in oklab, var(--gold) 24%, transparent), transparent);
  -webkit-mask-image: radial-gradient(34% 40% at 59% 50%, black 0 30%, color-mix(in oklab, var(--bg-0) 45%, transparent) 62%, transparent 100%);
  mask-image: radial-gradient(34% 40% at 59% 50%, black 0 30%, color-mix(in oklab, var(--bg-0) 45%, transparent) 62%, transparent 100%);
}
.agents-orb .fx { z-index: 1; }
.agents-orb .fx.is-live ~ .agents-orb__vignette { opacity: 1; }
.agents-orb__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, color-mix(in oklab, var(--bg-0) 55%, transparent) 72%, color-mix(in oklab, var(--bg-0) 95%, transparent) 100%);
  pointer-events: none;
}
.agents-hero__orb:has(.fx.is-live) .agents-orb__poster { opacity: 0; }

.agents-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.agents-orbit__ring { fill: none; stroke: color-mix(in oklab, var(--ice) 32%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.agents-orbit__ring--dash { stroke: color-mix(in oklab, var(--ice) 14%, transparent); stroke-dasharray: 0.3 1.1; }

.agents-orbit__track {
  --turn: 0;
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--turn) * 90deg));
  transition: transform 1.6s var(--ease-in-out);
  pointer-events: none;
}
.agents-orbit__dot {
  position: absolute;
  inset-block-start: 0.6%;
  inset-inline: 0;
  margin-inline: auto;
  width: 58px;
  height: 58px;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold-3) 75%, transparent), color-mix(in oklab, var(--gold) 25%, transparent) 40%, transparent 70%);
  filter: blur(2px);
}
.agents-orbit__mark {
  --a: calc(var(--i) * 90deg);
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  transform: rotate(var(--a)) translateY(calc(var(--orb) * -0.494)) rotate(calc(var(--a) * -1));
  transition: color var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
  z-index: 2;
}
[dir="rtl"] .agents-orbit__mark { --a: calc(var(--i) * -90deg); }
[dir="rtl"] .agents-orbit__track { transform: rotate(calc(var(--turn) * -90deg)); }
.agents-orbit__mark.is-active {
  color: var(--bg-0);
  background: var(--gold-2);
  border-color: var(--gold-3);
  box-shadow: 0 0 24px color-mix(in oklab, var(--gold-2) 60%, transparent);
}

/* Aside: lead + CTAs */
.agents-hero__aside {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-block-end: clamp(8px, 2vw, 24px);
}
.agents-hero__lead { max-width: 36ch; font-size: clamp(16px, 1.3vw, 19px); }

/* Latest result card */
.agents-result {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: end;
  justify-self: end;
  z-index: 2;
  width: min(100%, 340px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-l);
  margin-block-end: clamp(8px, 2vw, 24px);
}
.agents-result__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 4px; }
.agents-result__status { padding: 4px 10px 4px 8px; font-size: 12px; }
.agents-result__status .icon { width: 13px; height: 13px; }
.agents-result__preview {
  position: relative;
  aspect-ratio: 16 / 10.5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.agents-mini {
  --cream: color-mix(in oklab, var(--gold-3) 22%, var(--ice-2));
  --ink: color-mix(in oklab, var(--bg-2) 85%, var(--amber));
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 7%;
  padding: 0 7% 7%;
  background: var(--cream);
}
.agents-mini__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 14%;
  margin-inline: -8%;
  padding-inline: 5%;
  background: color-mix(in oklab, var(--cream) 85%, var(--bg-3));
}
.agents-mini__bar i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--ink) 30%, var(--cream)); }
.agents-mini__bar span { flex: 1; height: 5px; margin-inline: 12%; border-radius: 4px; background: color-mix(in oklab, var(--ink) 12%, var(--cream)); }
.agents-mini__nav { display: flex; align-items: center; gap: 6%; }
.agents-mini__nav b { width: 16%; height: 6px; border-radius: 3px; background: var(--ink); }
.agents-mini__nav span { width: 9%; height: 4px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 35%, var(--cream)); }
.agents-mini__nav span:first-of-type { margin-inline-start: auto; }
.agents-mini__hero { flex: 1; display: grid; grid-template-columns: 1fr 0.9fr; gap: 7%; align-items: center; }
.agents-mini__copy { display: flex; flex-direction: column; gap: 7px; }
.agents-mini__copy span { display: block; border-radius: 3px; background: var(--ink); }
.agents-mini__l1 { height: 8px; width: 100%; }
.agents-mini__l2 { height: 8px; width: 72%; }
.agents-mini__l3 { height: 4px; width: 88%; opacity: 0.35; }
.agents-mini__btn { height: 12px !important; width: 44%; margin-block-start: 3px; border-radius: 99px !important; background: var(--grad-gold) !important; }
.agents-mini__img {
  height: 100%;
  min-height: 40px;
  border-radius: 8px;
  background:
    radial-gradient(40% 32% at 38% 58%, color-mix(in oklab, var(--gold-2) 80%, var(--ice-2)), transparent 70%),
    radial-gradient(46% 36% at 62% 52%, color-mix(in oklab, var(--amber) 80%, var(--bg-1)), transparent 72%),
    radial-gradient(70% 50% at 50% 90%, color-mix(in oklab, var(--amber) 50%, var(--bg-0)), transparent 70%),
    linear-gradient(160deg, color-mix(in oklab, var(--gold-3) 60%, var(--cream)), color-mix(in oklab, var(--amber) 55%, var(--bg-1)));
}
.agents-mini__form { display: grid; grid-template-columns: 1fr 1fr 0.6fr; gap: 5%; }
.agents-mini__form span { height: 11px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--ink) 22%, var(--cream)); background: color-mix(in oklab, var(--ice-2) 50%, var(--cream)); }
.agents-mini__form .agents-mini__go { border: 0; background: var(--ink); }

.agents-result__prompt { padding-inline: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-3); font-style: italic; }
.agents-result__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 4px 2px;
  border-block-start: 1px solid var(--line);
}
.agents-result__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agents-result__title { font-size: 16px; font-weight: 450; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); }
.agents-result__dot { color: var(--text-3); margin-inline: 2px; }
.agents-result__state { color: var(--gold-2); }
.agents-result__by { display: flex; align-items: center; gap: 10px; }
.agents-result__by-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.agents-result__avatars { display: flex; }
.agents-result__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ice);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 2px var(--bg-1);
}
.agents-result__avatar + .agents-result__avatar { margin-inline-start: -6px; }
.agents-result__avatar:first-child { color: var(--gold-2); border-color: color-mix(in oklab, var(--gold-2) 40%, transparent); }
.agents-result__avatar .icon { width: 12px; height: 12px; }
.agents-result__link {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--text-2);
  transition: color var(--dur-fast);
}
.agents-result__link .icon {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), background-color var(--dur);
}
.agents-result__link:hover { color: var(--gold-2); }
.agents-result__link:hover .icon { border-color: color-mix(in oklab, var(--gold-2) 50%, transparent); background: color-mix(in oklab, var(--gold) 8%, transparent); transform: rotate(45deg); }
[dir="rtl"] .agents-result__link:hover .icon { transform: scaleX(-1) rotate(45deg); }

/* Stage rail */
.agents-hero__rail { position: relative; z-index: 2; margin-block-start: clamp(20px, 3vw, 36px); }
.agents-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
}
.agents-rail__item {
  --stage-ms: 4200ms;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--text-3);
  transition: color var(--dur) var(--ease-out);
}
.agents-rail__num { font-size: 11px; letter-spacing: 0.1em; }
.agents-rail__label { font-size: 15px; }
.agents-rail__bar {
  grid-column: 1 / -1;
  order: -1;
  position: relative;
  height: 1px;
  margin-block-end: 12px;
  background: var(--line-strong);
  overflow: hidden;
}
/* transform-only fill (scaleX from the inline start) */
.agents-rail__bar span {
  position: absolute;
  inset: 0;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir="rtl"] .agents-rail__bar span { transform-origin: right center; }
.agents-rail__item.is-active { color: var(--text); }
.agents-rail__item.is-active .agents-rail__num { color: var(--gold-2); }
.agents-rail__item.is-active .agents-rail__bar span { animation: agents-fill var(--stage-ms) linear forwards; }
.agents-rail__item.is-done .agents-rail__bar span { transform: none; opacity: 0.35; }
@keyframes agents-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.no-js .agents-rail__item.is-active .agents-rail__bar span,
.agents-hero:not(.is-cycling) .agents-rail__item.is-active .agents-rail__bar span { animation: none; transform: none; }
.agents-hero.is-held .agents-rail__bar span { animation-play-state: paused; }

/* ==========================================================================
   PIPELINE demo
   ========================================================================== */
.agents-pipeline__stage { position: relative; isolation: isolate; }
.agents-pipeline__stage::before {
  content: "";
  position: absolute;
  inset: 10% 4% -6%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 50%, color-mix(in oklab, var(--blue) 28%, transparent), transparent),
    radial-gradient(closest-side at 75% 50%, color-mix(in oklab, var(--gold) 16%, transparent), transparent);
  filter: blur(50px);
  pointer-events: none;
}

/* ==========================================================================
   FOUR MOVES
   ========================================================================== */
.agents-moves__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.agents-move {
  display: grid;
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 96px);
  border-block-end: 1px solid var(--line);
}
.agents-move__num {
  align-self: start;
  font-size: clamp(64px, 8.4vw, 144px);
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, color-mix(in oklab, var(--ice) 55%, transparent), color-mix(in oklab, var(--ice) 3%, transparent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.agents-move:hover .agents-move__num { background-image: linear-gradient(180deg, var(--gold-3), color-mix(in oklab, var(--gold-2) 4%, transparent) 90%); }
.agents-move__body { display: flex; flex-direction: column; gap: 16px; }
.agents-move__title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.12; letter-spacing: -0.025em; }
.agents-move__text { font-size: 16px; color: var(--text-2); max-width: 52ch; }
.agents-move__points { margin-block-start: 6px; }

.agents-viz {
  position: relative;
  margin: 0;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--ice) 5%, transparent), color-mix(in oklab, var(--ice) 1.5%, transparent)),
    var(--bg-1);
  box-shadow: var(--shadow-1);
}
.agents-viz__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.agents-viz__tag--gold { color: var(--gold-2); }

/* 01 reformulate */
.agents-viz--reform { display: flex; flex-direction: column; gap: 0; }
.agents-viz__before {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radius-m);
  border: 1px dashed var(--line-strong);
}
.agents-viz__prompt { font-size: 18px; font-weight: 300; color: var(--text-2); }
.agents-viz__arrow { display: flex; flex-direction: column; align-items: center; padding-block: 4px; }
.agents-viz__line { width: 1px; height: 16px; background: linear-gradient(180deg, var(--line-strong), var(--gold-2)); }
.agents-viz__node {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--gold-2);
  border: 1px solid color-mix(in oklab, var(--gold-2) 45%, transparent);
  background: color-mix(in oklab, var(--gold) 8%, transparent);
  box-shadow: 0 0 20px color-mix(in oklab, var(--gold) 25%, transparent);
}
.agents-viz__node .icon { width: 16px; height: 16px; }
.agents-viz__after {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius-m);
  border: 1px solid color-mix(in oklab, var(--gold-2) 28%, transparent);
  background: color-mix(in oklab, var(--gold) 4%, transparent);
}
.agents-viz__brief { display: grid; gap: 8px; }
.agents-viz__brief li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--text); }
.agents-viz__brief .mono { font-size: 11px; color: var(--gold-2); }

/* 02 split */
.agents-viz--split { display: flex; flex-direction: column; gap: 0; }
.agents-tree__root {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 450;
  border: 1px solid color-mix(in oklab, var(--gold-2) 40%, transparent);
  background: color-mix(in oklab, var(--gold) 8%, transparent);
}
.agents-tree__root .icon { width: 17px; height: 17px; color: var(--gold-2); }
.agents-viz .agents-tree__branches {
  display: grid;
  gap: 12px;
  margin-inline-start: 26px;
  padding-block-start: 14px;
  border-inline-start: 1px solid var(--line-strong);
}
.agents-tree__branch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-inline-start: 24px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--ice) 3%, transparent);
}
.agents-tree__branch::before {
  content: "";
  position: absolute;
  inset-inline-start: -25px;
  inset-block-start: 50%;
  width: 24px;
  height: 1px;
  background: var(--line-strong);
}
.agents-tree__branch::after {
  content: "";
  position: absolute;
  inset-inline-start: -28px;
  inset-block-start: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
}
.agents-tree__task { font-size: 14.5px; color: var(--text); }
.agents-tree__agent {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ice);
  background: color-mix(in oklab, var(--blue) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--blue-2) 30%, transparent);
}

/* 03 resources */
.agents-viz--res { display: grid; gap: 0; }
.agents-res__row {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding-block: 14px;
  border-block-start: 1px solid var(--line);
}
.agents-res__row:first-child { border-block-start: 0; padding-block-start: 0; }
.agents-res__row:last-child { padding-block-end: 0; }
.agents-res__row dt { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.agents-res__row dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.agents-res__chip {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-3);
  border: 1px solid var(--line);
}
.agents-res__chip.is-on { color: var(--bg-0); background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 0 18px color-mix(in oklab, var(--gold) 35%, transparent); }
.agents-res__compute { flex-direction: column; align-items: stretch; gap: 8px !important; }
.agents-res__meter {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--bg-1) calc(10% - 2px) 10%),
    color-mix(in oklab, var(--ice) 8%, transparent);
  overflow: hidden;
}
/* the fill spans the whole meter (segments line up with the notches); only its clip animates */
.agents-res__meter span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue-2), var(--gold-2));
  -webkit-mask-image: repeating-linear-gradient(90deg, black 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  mask-image: repeating-linear-gradient(90deg, black 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  clip-path: inset(0 38% 0 0);
  animation: agents-meter 5s var(--ease-in-out) infinite alternate;
}
[dir="rtl"] .agents-res__meter span {
  background: linear-gradient(270deg, var(--blue-2), var(--gold-2));
  -webkit-mask-image: repeating-linear-gradient(270deg, black 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  mask-image: repeating-linear-gradient(270deg, black 0 calc(10% - 2px), transparent calc(10% - 2px) 10%);
  clip-path: inset(0 0 0 38%);
  animation-name: agents-meter-rtl;
}
@keyframes agents-meter { from { clip-path: inset(0 62% 0 0); } to { clip-path: inset(0 26% 0 0); } }
@keyframes agents-meter-rtl { from { clip-path: inset(0 0 0 62%); } to { clip-path: inset(0 0 0 26%); } }
.agents-res__note { font-size: 13px; color: var(--text-3); }

/* 04 verify */
.agents-viz--verify { display: flex; flex-direction: column; gap: 16px; }
.agents-checks { display: grid; gap: 10px; }
.agents-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: color-mix(in oklab, var(--ice) 3%, transparent);
  font-size: 14.5px;
  color: var(--text);
}
.agents-checks__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--bg-0);
  background: var(--gold-2);
  box-shadow: 0 0 12px color-mix(in oklab, var(--gold) 50%, transparent);
}
.agents-checks__icon .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.agents-checks__done {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  color: var(--bg-0);
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, var(--amber));
  box-shadow: 0 12px 32px -12px color-mix(in oklab, var(--gold) 70%, transparent);
}
.agents-checks__done .icon { width: 18px; height: 18px; }

/* ==========================================================================
   ROSTER
   ========================================================================== */
.agents-roster { isolation: isolate; overflow: hidden; }
.agents-roster__glow {
  position: absolute;
  inset-block-start: 30%;
  inset-inline: 0;
  height: 60%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in oklab, var(--blue) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.agents-roster__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.agents-agent { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .agents-agent { display: flex; flex-direction: column; }
  .agents-agent__mission { min-height: 4.65em; }
}
.agents-agent__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 10px; }
.agents-agent__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--ice);
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--blue-2) 28%, transparent), color-mix(in oklab, var(--blue-2) 4%, transparent));
  border: 1px solid color-mix(in oklab, var(--blue-2) 30%, transparent);
}
.agents-agent__icon .icon { width: 21px; height: 21px; }
.agents-agent__id { font-size: 11px; letter-spacing: 0.1em; color: var(--text-3); }
.agents-agent__name { font-size: 24px; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.agents-agent__mission { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.agents-agent__handoff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: start;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
}
.agents-agent__handoff-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); }
.agents-agent__handoff-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; line-height: 1.4; color: var(--text); }
.agents-agent__handoff-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold-2); }
.agents-agent__handoff-to { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); }
.agents-agent--lead { box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in oklab, var(--gold-2) 20%, transparent), 0 30px 80px -30px color-mix(in oklab, var(--gold) 35%, transparent); }
.agents-agent--lead .agents-agent__icon {
  color: var(--gold-2);
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--gold) 30%, transparent), color-mix(in oklab, var(--gold) 4%, transparent));
  border-color: color-mix(in oklab, var(--gold-2) 40%, transparent);
}

/* ==========================================================================
   ROUTING (many models)
   ========================================================================== */
.agents-models {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-1) 20%, transparent), color-mix(in oklab, var(--bg-2) 50%, transparent) 50%, color-mix(in oklab, var(--bg-1) 20%, transparent));
}
.agents-models__split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.agents-models__copy { --stack-gap: 22px; }
.agents-models__points { margin-block: 6px 4px; }

.agents-route {
  --cycle: 8s;
  position: relative;
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(40% 40% at 50% 50%, color-mix(in oklab, var(--gold) 10%, transparent), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg-1);
  box-shadow: var(--shadow-2);
}
.agents-route__board {
  position: relative;
  display: grid;
  grid-template-columns: 33% 34% 33%;
  height: clamp(320px, 30vw, 400px);
}
.agents-route__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .agents-route__wires { transform: scaleX(-1); }
.agents-route__wire {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 5;
  animation: agents-wire var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--cycle) / 4);
}
@keyframes agents-wire {
  0% { stroke: var(--gold-2); stroke-dasharray: none; opacity: 1; }
  22% { stroke: var(--gold-2); stroke-dasharray: none; opacity: 1; }
  26%, 100% { stroke: var(--line-strong); stroke-dasharray: 3 5; opacity: 1; }
}
.agents-route__col { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; position: relative; z-index: 1; }
.agents-route__tasks { justify-items: end; }
.agents-route__slots { justify-items: start; }
.agents-route__task,
.agents-route__slot {
  max-width: 100%;
  padding: 9px 13px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  font-size: 13px;
  line-height: 1.3;
  color: var(--text-2);
  animation: agents-pill var(--cycle) linear infinite;
  animation-delay: calc(var(--i) * var(--cycle) / 4);
}
.agents-route__slot { display: flex; flex-direction: column; gap: 2px; }
.agents-route__slot-k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
@keyframes agents-pill {
  0%, 22% { border-color: color-mix(in oklab, var(--gold-2) 60%, transparent); color: var(--text); box-shadow: 0 0 24px -4px color-mix(in oklab, var(--gold) 45%, transparent); }
  26%, 100% { border-color: var(--line-strong); color: var(--text-2); box-shadow: none; }
}
.agents-route__hub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.agents-route__hub-core {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--gold-2);
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--gold) 28%, transparent), var(--bg-1) 70%);
  border: 1px solid color-mix(in oklab, var(--gold-2) 50%, transparent);
  box-shadow: 0 0 0 10px color-mix(in oklab, var(--bg-1) 90%, transparent), 0 0 50px color-mix(in oklab, var(--gold) 35%, transparent);
  animation: agents-hub calc(var(--cycle) / 4) var(--ease-out) infinite;
}
.agents-route__hub-core .icon { width: 28px; height: 28px; }
@keyframes agents-hub {
  0% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--bg-1) 90%, transparent), 0 0 0 10px color-mix(in oklab, var(--gold) 35%, transparent), 0 0 50px color-mix(in oklab, var(--gold) 35%, transparent); }
  60%, 100% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--bg-1) 90%, transparent), 0 0 0 26px color-mix(in oklab, var(--gold) 0%, transparent), 0 0 50px color-mix(in oklab, var(--gold) 35%, transparent); }
}
.agents-route__hub-label { position: absolute; inset-block-start: calc(50% + 50px); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); }
.agents-route__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-start: 18px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.agents-route__foot .icon { width: 17px; height: 17px; color: var(--gold-2); }

/* ==========================================================================
   QUALITY LOOP
   Ring in the middle; each step sits in the quadrant of its numbered node:
   01 top-start · 02 top-end · 03 bottom-end · 04 bottom-start (clockwise, like the runner).
   ========================================================================== */
.agents-loop__grid {
  --ring: clamp(320px, 32vw, 440px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ring) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 4vw, 72px);
  row-gap: 16px;
  align-items: center;
}
.agents-loop__ring { grid-column: 2; grid-row: 1 / 3; }
.agents-loop .agents-loop__steps { display: contents; }
.agents-loop__step { display: flex; flex-direction: column; gap: 8px; }
.agents-loop__step--0 { grid-column: 1; grid-row: 1; }
.agents-loop__step--1 { grid-column: 3; grid-row: 1; }
.agents-loop__step--2 { grid-column: 3; grid-row: 2; }
.agents-loop__step--3 { grid-column: 1; grid-row: 2; }
.agents-loop__step--0,
.agents-loop__step--3 { align-items: flex-end; text-align: end; }
.agents-loop__num { font-size: 11px; letter-spacing: 0.1em; color: var(--gold-2); }
.agents-loop__step--2 .agents-loop__num { color: var(--blue-2); }
.agents-loop__title { font-size: clamp(22px, 2vw, 28px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.agents-loop__step p { font-size: 15px; color: var(--text-2); max-width: 34ch; }

.agents-loop__ring { position: relative; width: var(--ring); aspect-ratio: 1; }
.agents-loop__ring::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 14%, transparent), transparent 70%);
  filter: blur(10px);
}
.agents-loop__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.agents-loop__track { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.agents-loop__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: agents-spin 7s linear infinite;
}
.agents-loop__arc {
  fill: none;
  stroke: url(#agents-loop-grad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 25 75;
}
.agents-loop__stop-a { stop-color: var(--gold-2); stop-opacity: 0; }
.agents-loop__stop-b { stop-color: var(--gold-2); stop-opacity: 1; }
.agents-loop__halo { fill: color-mix(in oklab, var(--gold-2) 22%, transparent); }
.agents-loop__head { fill: var(--ice-2); filter: drop-shadow(0 0 4px var(--gold-2)); }
[dir="rtl"] .agents-loop__svg { scale: -1 1; }
@keyframes agents-spin { to { rotate: 360deg; } }

/* nodes on the diagonals of the ring (radius = 0.4 × ring, × cos 45°) */
.agents-loop__node {
  --r: calc(var(--ring) * 0.4 * 0.7071);
  --dx: 0;
  --dy: 0;
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  max-width: 46%;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-2);
  transform: translate(calc(var(--dx) * var(--r) * var(--dir, 1)), calc(var(--dy) * var(--r)));
  z-index: 1;
}
[dir="rtl"] .agents-loop__node { --dir: -1; }
.agents-loop__node--0 { --dx: -1; --dy: -1; }
.agents-loop__node--1 { --dx: 1; --dy: -1; }
.agents-loop__node--2 { --dx: 1; --dy: 1; }
.agents-loop__node--3 { --dx: -1; --dy: 1; }
.agents-loop__node-num { color: var(--gold-2); }
.agents-loop__node--2 .agents-loop__node-num { color: var(--blue-2); }
.agents-loop__node-label { overflow: hidden; text-overflow: ellipsis; }

.agents-loop__center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.agents-loop__center-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-block-end: 6px;
  border-radius: 50%;
  color: var(--bg-0);
  background: radial-gradient(circle at 35% 30%, var(--ice-2), var(--gold-3) 45%, var(--gold-2));
  box-shadow: 0 0 40px color-mix(in oklab, var(--gold) 50%, transparent);
}
.agents-loop__center-icon .icon { width: 24px; height: 24px; stroke-width: 2; }
.agents-loop__center-label { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.agents-loop__center-note { font-size: 13px; color: var(--text-3); }

.agents-loop__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-block-start: clamp(40px, 5vw, 72px);
  color: var(--text-3);
  font-size: 15px;
  text-align: center;
}
.agents-loop__note .icon { width: 18px; height: 18px; color: var(--gold-2); flex-shrink: 0; }

/* ---------- CSS loops pause while offscreen (agents.js toggles .is-paused) ---------- */
[data-agents-anim].is-paused,
[data-agents-anim].is-paused *,
[data-agents-anim].is-paused *::before,
[data-agents-anim].is-paused *::after { animation-play-state: paused; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
  .agents-roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .agents-hero { --orb: clamp(340px, min(38vw, 60svh), 460px); }
  .agents-hero__stage { grid-template-columns: minmax(0, 1fr) var(--orb) minmax(0, 0.9fr); }
  .agents-move { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .agents-move__num { grid-column: 1 / -1; font-size: clamp(56px, 7vw, 96px); }
}

@media (max-width: 1040px) {
  /* headline → lead + CTAs → orb → result card: the CTAs stay in the first screen */
  .agents-hero { min-height: 0; --orb: min(78vw, 460px); }
  .agents-hero__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    row-gap: clamp(28px, 4vw, 40px);
  }
  .agents-hero__head { grid-column: 1; grid-row: auto; max-width: none; order: 0; }
  .agents-hero__aside { grid-column: 1; grid-row: auto; order: 1; align-self: start; padding-block-end: 0; }
  .agents-hero__orb { grid-column: 1; grid-row: auto; order: 2; justify-self: center; margin-block: 12px 0; }
  .agents-hero__readout { grid-column: 1; grid-row: auto; order: 3; justify-self: center; margin-block: -8px 0; }
  .agents-result { grid-column: 1; grid-row: auto; order: 4; justify-self: center; align-self: start; width: min(100%, 400px); margin-block-end: 0; }
  .agents-hero__lead { max-width: 52ch; }
  /* the stage rail is synced to the orb: it only makes sense beside it */
  .agents-hero__rail { display: none; }
  .agents-models__split { grid-template-columns: minmax(0, 1fr); }
  .agents-loop__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; row-gap: clamp(32px, 5vw, 48px); }
  .agents-loop__ring { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-block-end: 8px; }
  .agents-loop__step--0, .agents-loop__step--1, .agents-loop__step--2, .agents-loop__step--3 { grid-column: auto; grid-row: auto; align-items: flex-start; text-align: start; align-self: start; }
}

/* tablet: headline + CTAs at the start, the result card beside them, the orb centred below */
@media (min-width: 821px) and (max-width: 1040px) {
  .agents-hero__stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); column-gap: clamp(28px, 4vw, 48px); }
  .agents-hero__head { grid-column: 1; grid-row: 1; }
  .agents-hero__aside { grid-column: 1; grid-row: 2; }
  .agents-result { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; width: 100%; }
  .agents-hero__orb { grid-column: 1 / -1; grid-row: 3; }
  .agents-hero__readout { grid-column: 1 / -1; grid-row: 4; }
}

@media (max-width: 820px) {
  .agents-move { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 640px) {
  .agents-hero { --orb: min(86vw, 380px); }
  .agents-hero__title { font-size: clamp(40px, 12vw, 60px); }
  .agents-result { width: 100%; justify-self: stretch; }
  .agents-hero__actions { flex-direction: column; align-items: stretch; }
  .agents-hero__actions .btn { justify-content: space-between; }
  .agents-hero__actions .btn--glass { justify-content: center; }
  .agents-orbit__mark { width: 32px; height: 32px; font-size: 11px; }
  /* roster: a horizontal, snapping row (cards keep aligned rows through the subgrid) */
  .agents-roster .agents-roster__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 300px);
    column-gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 18px;
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .agents-agent { scroll-snap-align: start; }
  .agents-route__board { grid-template-columns: 36% 28% 36%; height: 360px; }
  .agents-route__task, .agents-route__slot { padding: 7px 9px; font-size: 12px; }
  .agents-route__hub-core { width: 54px; height: 54px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--bg-1) 90%, transparent), 0 0 40px color-mix(in oklab, var(--gold) 35%, transparent); }
  .agents-route__hub-core .icon { width: 22px; height: 22px; }
  .agents-route__hub-label { inset-block-start: calc(50% + 38px); }
  .agents-loop__grid { --ring: min(72vw, 300px); grid-template-columns: minmax(0, 1fr); }
  .agents-loop__node { height: 28px; gap: 6px; padding-inline: 8px 10px; font-size: 10px; letter-spacing: 0.06em; }
  .agents-res__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .agents-tree__branch { flex-direction: column; align-items: flex-start; }
  .agents-loop__note { flex-direction: column; gap: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .agents-orbit__track { transition: none; }
  .agents-route__wire, .agents-route__task, .agents-route__slot, .agents-route__hub-core,
  .agents-loop__spin, .agents-res__meter span { animation: none; }
  .agents-route__wire:nth-child(-n + 2) { stroke: var(--gold-2); stroke-dasharray: none; }
  .agents-route__task:first-child, .agents-route__slot:first-child { border-color: color-mix(in oklab, var(--gold-2) 60%, transparent); color: var(--text); }
  .agents-rail__item.is-active .agents-rail__bar span { animation: none; transform: none; }
}