/* ─────────────────────────────────────────────────────────────────────────
   Voice agents — the home-page trio and the /agents/ pages.

   Third file on purpose: site.css dresses the studio pages, landing.css
   dresses the per-trade landings, and this one dresses the agent surfaces.
   It borrows site.css's tokens and adds nothing to the palette — the whole
   set is still slate / atoll / candy / ice / muted, and candy stays the one
   bright thing on the page.

   Loaded only where it is needed: the home page and /agents/.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the rail: three cards scattered, not a row ─────────────────────────── */

.agent-rail {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  justify-items: center;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  transform: translateX(var(--rail-x, 0px));
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
@media (min-width: 900px) {
  .agent-rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem 0 5.5rem;          /* room for the lifts and the tilt */
  }
  /* Each one sits at its own height and its own angle — a handful of cards
     dropped on the page, not a tidy row of three. */
  .agent-card[data-index="0"] { --lift: 2rem;   --tilt: -4.5deg; justify-self: start; }
  .agent-card[data-index="1"] { --lift: 5rem;   --tilt:  2.5deg; justify-self: center; }
  .agent-card[data-index="2"] { --lift: 0rem;   --tilt:  5.5deg; justify-self: end; }
}

.agent-card {
  position: relative;
  width: 100%;
  max-width: 21.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in srgb, var(--atoll) 55%, var(--slate));
  color: var(--ice);
  box-shadow: inset 0 0 0 1px var(--line);
  transform:
    translateX(var(--tx, 0px))
    translateY(var(--lift, 0rem))
    translateZ(var(--tz, 0px))
    rotate(var(--tilt, 0deg))
    scale(var(--sc, 1));
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}

/* Picked: it straightens up, steps towards the reader and lights its edge. */
.agent-card:hover, .agent-card:focus-within {
  --tilt: 0deg;
  --tz: 46px;
  --sc: 1.05;
  box-shadow: 0 30px 68px -26px rgba(2, 2, 2, .95),
              inset 0 0 0 1px color-mix(in srgb, var(--candy) 62%, transparent);
  z-index: 4;
}

/* ── the portrait ───────────────────────────────────────────────────────── */

.ag-shot { position: relative; aspect-ratio: 5 / 4; }
.ag-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  filter: saturate(.88) brightness(.9);
  transition: filter .4s ease;
}
.agent-card:hover .ag-shot img, .agent-card:focus-within .ag-shot img { filter: none; }

/* The portraits are lit blue; this settles them onto our near-black ground. */
.ag-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--slate) 12%, transparent) 0%,
      color-mix(in srgb, var(--slate) 28%, transparent) 45%,
      color-mix(in srgb, var(--slate) 82%, transparent) 100%);
}

.ag-role-pill, .ag-real, .ag-open { position: absolute; z-index: 2; }
.ag-role-pill {
  top: .7rem; left: .7rem;
  font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--slate) 62%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 16%, transparent);
  backdrop-filter: blur(6px);
}
.ag-real {
  top: .7rem; left: 50%; transform: translateX(-50%);
  font-size: .5rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 999px;
  background: var(--candy); color: var(--slate); font-weight: 700;
}
.ag-open {
  top: .6rem; right: .6rem;
  width: 1.8rem; height: 1.8rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--slate) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 16%, transparent);
  backdrop-filter: blur(6px);
  opacity: .7; transition: opacity .25s ease, background .25s ease;
}
.ag-open:hover { opacity: 1; background: var(--candy); color: var(--slate); }

/* ── the play strip: the button, the circumstances, the rhythm ──────────── */

.ag-strip {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .65rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--slate) 60%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 15%, transparent);
}
.ag-cue {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--candy); color: var(--slate);
  transition: transform .2s ease;
}
.ag-cue:hover { transform: scale(1.09); }
.ag-cue .ico-stop { display: none; }
.ag-cue[data-playing="true"] .ico-play { display: none; }
.ag-cue[data-playing="true"] .ico-stop { display: inline-block; }

.ag-cue-text { flex: 1 1 auto; min-width: 0; font-size: .6875rem; line-height: 1.35; }
.ag-cue-text .ag-who { font-size: .5rem; letter-spacing: .1em; margin-bottom: .1rem; }
.ag-say-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── the body under the portrait ───────────────────────────────────────── */

.ag-glass {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ag-glass-head { display: flex; align-items: center; gap: .7rem; }
.ag-ico {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--slate);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--candy) 40%, transparent),
              0 0 0 6px color-mix(in srgb, var(--candy) 8%, transparent);
}
.agent-card h3 { font-size: 1.15rem; line-height: 1.05; }
.ag-for {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .5625rem; letter-spacing: .09em; text-transform: uppercase;
  margin-top: .2rem;
}
.ag-muted { color: var(--muted); }
.ag-line { font-size: .8125rem; line-height: 1.5; margin-top: .85rem; }

.ag-metrics { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }
.ag-metric {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .5625rem; letter-spacing: .04em;
  padding: .26rem .5rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  white-space: nowrap;
}

.ag-actions { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── the waveform: each agent's own rhythm ──────────────────────────────── */

.wave { display: flex; align-items: center; gap: 2px; height: 2.6rem; margin-top: 1rem; }
.ag-strip .wave { flex: 0 0 3.1rem; height: 1.5rem; margin: 0; gap: 1.5px; }
.wave i {
  display: block; width: 3px; flex: 1 1 auto; max-width: 4px; min-width: 2px;
  border-radius: 2px; background: currentColor; opacity: .32;
  height: calc(var(--h) * 1%);
  transform-origin: center;
  transition: opacity .3s ease;
}
.agent-card:hover .wave i, .agent-card:focus-within .wave i { opacity: .55; }
.wave.is-live i {
  opacity: .95;
  color: var(--candy);
  animation: wave-bob calc(var(--wave-tempo, 100ms) * 8) ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * var(--wave-tempo, 100ms) / 2);
}
@keyframes wave-bob {
  from { transform: scaleY(.35); }
  to   { transform: scaleY(1.25); }
}

.wave-label {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: .55rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.ag-play {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .95rem .55rem .55rem;
  border-radius: 999px;
  font-size: .8125rem; font-weight: 600;
  background: var(--candy); color: var(--slate);
  transition: transform .2s ease;
}
.ag-play:hover { transform: translateY(-2px); }
.ag-play .dot {
  width: 1.55rem; height: 1.55rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--slate); color: var(--candy);
}
.ag-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem; border-radius: 999px;
  font-size: .8125rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  transition: background .2s ease, transform .2s ease;
}
.ag-ghost:hover { transform: translateY(-2px); background: color-mix(in srgb, currentColor 10%, transparent); }

/* ── transcript bubbles ─────────────────────────────────────────────────── */

.ag-thread { display: flex; flex-direction: column; gap: .5rem; }
.ag-bubble {
  max-width: 88%;
  padding: .7rem .9rem;
  border-radius: 1.1rem;
  font-size: .875rem;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s ease, transform .32s ease;
}
.ag-bubble.in { opacity: 1; transform: none; }
.ag-bubble.from-agent {
  align-self: flex-start;
  background: var(--candy); color: var(--slate);
  border-bottom-left-radius: .35rem;
}
.ag-bubble.from-them {
  align-self: flex-end;
  background: color-mix(in srgb, var(--ice) 10%, transparent);
  color: var(--ice);
  box-shadow: inset 0 0 0 1px var(--line);
  border-bottom-right-radius: .35rem;
}
.ag-who {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .62; display: block; margin-bottom: .2rem;
}
.ag-idle {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 45%, transparent);
  margin-bottom: .1rem;
}
.ag-bubble.is-preview { opacity: .6; }
.ag-bubble.is-preview span:last-child {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* The page-sized transcript window next to the sampler. */
.ag-thread-page {
  height: 19rem;
  overflow-y: auto;
  justify-content: flex-end;
  padding: 1rem;
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--atoll) 55%, var(--slate));
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── the load card, as it comes back in the panel ───────────────────────── */

.ld-card {
  border-radius: 1.5rem;
  padding: 1.25rem 1.3rem 1.3rem;
  background: color-mix(in srgb, var(--atoll) 82%, var(--slate));
  box-shadow: inset 0 0 0 1px var(--line);
}
.ld-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ld-state {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--candy); color: var(--slate); font-weight: 700;
}
.ld-when { text-align: right; font-size: .6875rem; line-height: 1.45; }
.ld-faint { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.ld-lane {
  display: flex; align-items: center; gap: .45rem;
  font-size: 1.15rem; font-weight: 700; margin-top: .9rem;
}
.ld-lane svg { color: var(--candy); flex: none; }
.ld-meta { font-size: .6875rem; color: var(--muted); margin-top: .3rem; }

.ld-cols { display: grid; gap: 1.1rem; margin-top: 1.1rem; }
@media (min-width: 560px) { .ld-cols { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

.ld-head {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--candy);
  margin-bottom: .5rem;
}
.ld-rows { display: grid; gap: .3rem; }
.ld-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; align-items: baseline; }
.ld-row dt { font-size: .6875rem; color: var(--muted); }
.ld-row dd { font-size: .8125rem; }
.ld-row dd b { font-size: .9375rem; }
.ld-row dd.is-agreed b { color: var(--ok); }
.ld-permile { font-size: .6875rem; color: var(--muted); margin-left: .4rem; }
.ld-masked {
  display: inline-block; width: 7rem; height: .85rem; border-radius: .25rem;
  background: repeating-linear-gradient(115deg,
    color-mix(in srgb, var(--ice) 15%, transparent) 0 6px,
    color-mix(in srgb, var(--ice) 8%, transparent) 6px 12px);
  vertical-align: -2px;
}
.ld-block { margin-top: 1.1rem; }
.ld-note { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ld-note p { font-size: .8125rem; line-height: 1.5; }
.ld-foot { font-size: .625rem; margin-top: .9rem; line-height: 1.5; }

/* the three-chip summary used beside the waveform */
.ld-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ld-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; padding: .35rem .65rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
}
.ld-chip b { color: var(--ok); }

/* ── the demo dialog ───────────────────────────────────────────────────── */

dialog.ag-demo {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(88vh, 46rem);
  padding: 0;
  border: 0;
  color: var(--ice);
  background: var(--atoll);
  border-radius: 1.75rem;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(2,2,2,.9);
}
dialog.ag-demo::backdrop { background: rgba(2, 2, 2, .72); backdrop-filter: blur(3px); }

.ag-demo-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 1.5rem 1rem;
}
.ag-demo-x {
  width: 2.25rem; height: 2.25rem; border-radius: 999px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ice) 8%, transparent); color: var(--ice);
}
.ag-demo-x:hover { background: color-mix(in srgb, var(--ice) 16%, transparent); }

.ag-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
}
.ag-badge .led { width: .4rem; height: .4rem; border-radius: 999px; background: var(--muted); }
.ag-badge.is-live { color: var(--candy); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--candy) 40%, transparent); }
.ag-badge.is-live .led { background: var(--candy); animation: led-pulse 1.4s ease-in-out infinite; }
@keyframes led-pulse { 50% { opacity: .25; } }

.ag-demo-body {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  padding: 0 1.5rem 1.5rem;
  overflow-y: auto;
}
@media (min-width: 720px) { .ag-demo-body { grid-template-columns: 15rem 1fr; } }

.ag-orb-wrap { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.ag-orb {
  position: relative; width: 9.5rem; height: 9.5rem; border-radius: 999px;
  background: radial-gradient(70% 70% at 35% 30%,
              color-mix(in srgb, var(--candy) 70%, transparent),
              color-mix(in srgb, var(--atoll) 92%, var(--slate)) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--candy) 30%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.ag-orb::before, .ag-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--candy) 45%, transparent);
  opacity: 0;
}
.ag-orb.speaking::before { animation: orb-ring 1.8s ease-out infinite; }
.ag-orb.speaking::after  { animation: orb-ring 1.8s ease-out .9s infinite; }
@keyframes orb-ring {
  from { opacity: .7; transform: scale(1); }
  to   { opacity: 0;  transform: scale(1.45); }
}
.ag-timer { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.5rem; letter-spacing: .04em; }

.ag-demo-thread { min-height: 13rem; max-height: 22rem; overflow-y: auto; padding-right: .25rem; }
.ag-demo-note {
  padding: 1rem 1.1rem; border-radius: 1.1rem;
  background: color-mix(in srgb, var(--slate) 55%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .875rem; line-height: 1.55;
}

.ag-demo-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--slate) 45%, var(--atoll));
}

/* ── detail page: hero ─────────────────────────────────────────────────── */

.ag-hero { position: relative; padding: 3rem 0 2rem; overflow: hidden; }
.ag-hero-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .ag-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3rem; } }

.ag-watermark {
  position: absolute; left: 0; right: 0; bottom: -1.5rem;
  font-family: Archivo, Inter, sans-serif; font-weight: 900;
  font-size: clamp(4rem, 15vw, 12rem); line-height: .8; letter-spacing: -.04em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
  color: color-mix(in srgb, var(--ice) 5%, transparent);
  pointer-events: none; user-select: none;
}

.ag-status {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ice) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ag-status .led { width: .42rem; height: .42rem; border-radius: 999px; background: var(--candy);
                  animation: led-pulse 1.8s ease-in-out infinite; }

.ag-floats { display: grid; gap: .75rem; margin-top: 2rem; }
@media (min-width: 680px) { .ag-floats { grid-template-columns: repeat(3, 1fr); } }
.ag-float {
  padding: 1rem 1.1rem; border-radius: 1.1rem;
  background: color-mix(in srgb, var(--atoll) 70%, var(--slate));
  box-shadow: inset 0 0 0 1px var(--line);
}
.ag-float h4 { font-size: .9375rem; font-weight: 700; }
.ag-float p { font-size: .8125rem; line-height: 1.5; margin-top: .35rem; color: var(--muted); }
.ag-float .ico {
  width: 1.9rem; height: 1.9rem; border-radius: .7rem; margin-bottom: .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ice); color: var(--slate);
}

.ag-panel {
  border-radius: 1.5rem; padding: 1.25rem;
  background: color-mix(in srgb, var(--atoll) 82%, var(--slate));
  box-shadow: inset 0 0 0 1px var(--line);
}
.ag-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ag-rows { margin-top: 1rem; display: grid; gap: .5rem; }
.ag-row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; align-items: baseline;
  padding: .6rem .8rem; border-radius: .8rem;
  background: color-mix(in srgb, var(--slate) 55%, transparent);
}
.ag-row dt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ag-row dd { font-size: .875rem; font-weight: 500; }
.ag-figures { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.ag-figure { padding: .9rem .8rem; border-radius: .9rem; background: color-mix(in srgb, var(--slate) 55%, transparent); }
.ag-figure b { display: block; font-family: Archivo, Inter, sans-serif; font-size: 1.75rem; line-height: 1; }
.ag-figure span { display: block; margin-top: .35rem; font-size: .6875rem; color: var(--muted);
                  font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; }

/* ── wins / limits ─────────────────────────────────────────────────────── */

.ag-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .ag-split { grid-template-columns: 1fr 1fr; } }

.ag-col { border-radius: 1.75rem; padding: 1.75rem; }
.ag-col.wins  { background: var(--atoll); color: var(--ice); }
.ag-col.limits { background: var(--slate); color: var(--ice); box-shadow: inset 0 0 0 1px var(--line); }
.ag-col h2 { font-size: 2rem; line-height: .98; }

.ag-item { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.ag-item:first-of-type { border-top: 0; }
.ag-item h3 { font-size: 1.0625rem; font-weight: 700; display: flex; gap: .65rem; align-items: baseline; }
.ag-item p { color: var(--muted); font-size: .9375rem; line-height: 1.6; margin-top: .4rem; }
.ag-item .mark { color: var(--candy); flex: none; font-family: "JetBrains Mono", ui-monospace, monospace; }
.ag-col.limits .ag-item .mark { color: var(--muted); }

/* ── steps, stack, faq ─────────────────────────────────────────────────── */

.ag-steps { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ag-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ag-steps { grid-template-columns: repeat(4, 1fr); } }
.ag-step {
  border-radius: 1.5rem; padding: 1.4rem;
  background: color-mix(in srgb, var(--atoll) 46%, var(--slate));
  box-shadow: inset 0 0 0 1px var(--line);
  min-height: 11rem; display: flex; flex-direction: column;
}
.ag-step .n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .6875rem;
              letter-spacing: .12em; color: var(--muted); }
.ag-step h3 { font-size: 1.25rem; margin-top: auto; }
.ag-step p { font-size: .875rem; color: var(--muted); margin-top: .45rem; line-height: 1.55; }

.ag-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ag-chip { padding: .45rem .8rem; border-radius: 999px; font-size: .8125rem;
           box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }

.ag-faq { border-top: 1px solid var(--line); }
.ag-faq details { border-bottom: 1px solid var(--line); }
.ag-faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 0;
  font-size: 1.0625rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::after {
  content: "+"; color: var(--candy); font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.15rem; flex: none;
}
.ag-faq details[open] summary::after { content: "−"; }
.ag-faq p { color: var(--muted); padding-bottom: 1.15rem; max-width: 60ch; line-height: 1.65; }

/* ── motion off ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .agent-rail, .agent-card { transition: none; }
  .agent-card { --ry: 0deg !important; --tz: 0px !important; --tx: 0px !important; --sc: 1 !important; }
  .agent-rail { --rail-x: 0px !important; }
  .wave.is-live i { animation: none; transform: scaleY(.9); }
  .ag-orb.speaking::before, .ag-orb.speaking::after { animation: none; opacity: 0; }
  .ag-badge.is-live .led, .ag-status .led { animation: none; }
  .ag-bubble { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   The three of them, all at once — words on the left, figures on the right.

   No scroll trickery: the whole thing is on screen the moment the section is.
   Each figure is cut out of its background and stands in its own light, with
   the line it opens a call with beside it and a play button under its name.
   ───────────────────────────────────────────────────────────────────────── */

.va { padding: 1rem 0 2rem; }

.va-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) {
  .va-grid { grid-template-columns: .88fr 1.12fr; gap: 3.5rem; }
}

/* ── the words ──────────────────────────────────────────────────────────── */

.va-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.va-eyebrow svg { color: var(--candy); }
.va-head { font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.02; margin-top: 1.2rem; max-width: 15ch; }
.va-lede { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; margin-top: 1.1rem; max-width: 38ch; }

.va-checks { margin-top: 1.7rem; display: grid; gap: .85rem; list-style: none; padding: 0; }
.va-checks li {
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: .9375rem; line-height: 1.5;
  color: color-mix(in srgb, var(--ice) 88%, transparent);
}
.va-checks svg { color: var(--candy); flex: none; margin-top: .25rem; }
.va-actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

/* ── the stage ──────────────────────────────────────────────────────────── */

.va-stage { display: grid; gap: 2.5rem; position: relative; }
.va-agent { position: relative; margin: 0; text-align: center; }

.va-cut {
  display: block; position: relative; z-index: 2;
  width: 100%; height: auto;
  /* the figures are cut mid-torso, so the bottom edge fades into the page */
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
  filter: drop-shadow(0 18px 40px rgba(2, 2, 2, .8));
}
.va-halo {
  position: absolute; left: 50%; top: 44%; z-index: 1;
  width: 112%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
              color-mix(in srgb, var(--candy) 20%, transparent), transparent 72%);
  pointer-events: none;
}

.va-cap {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: -.6rem; flex-wrap: wrap;
}
.va-play {
  flex: none; width: 2.7rem; height: 2.7rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--candy); color: var(--slate);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--candy) 12%, transparent);
  transition: transform .2s ease;
}
.va-play:hover { transform: scale(1.09); }
.va-play .ico-stop { display: none; }
.va-play[data-playing="true"] .ico-play { display: none; }
.va-play[data-playing="true"] .ico-stop { display: inline-block; }

.va-name { font-size: .9375rem; font-weight: 700; }
.va-real {
  position: absolute; top: 4%; right: 2%; z-index: 4;
  font-size: .5rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .25rem .5rem; border-radius: 999px;
  background: var(--candy); color: var(--slate);
}

.va-wave {
  position: relative; z-index: 3;
  justify-content: center; height: 1.4rem; margin: .6rem auto 0;
  max-width: 7rem; opacity: 0; transition: opacity .3s ease;
}
.va-wave.is-live { opacity: 1; }

.va-name { transition: color .2s ease; }
.va-name:hover { color: var(--candy); }

/* who it is for */
.va-for {
  position: relative; z-index: 4;
  display: inline-block; margin: 0 auto .9rem;
  padding: .38rem .8rem; border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ice) 80%, transparent);
  background: color-mix(in srgb, var(--atoll) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--candy) 24%, transparent);
  white-space: nowrap;
}

/* ── laid out like the reference, once there is room ────────────────────── */

@media (min-width: 980px) {
  .va-stage { display: block; aspect-ratio: 1 / .95; }
  .va-agent { position: absolute; }
  .va-agent[data-pos="1"] { left: 1%;   top: 13%;   width: 33%; }
  .va-agent[data-pos="2"] { right: 2%;  top: 9%;    width: 30%; }
  .va-agent[data-pos="3"] { left: 34%;  bottom: 1%; width: 34%; }

  /* the lines sit outside the triangle, clear of every name */
  /* sits just above each figure, where the line used to be */
  .va-for { position: absolute; margin: 0; left: 50%; transform: translateX(-50%); }
  .va-agent[data-pos="1"] .va-for { top: -9%; }
  .va-agent[data-pos="2"] .va-for { top: -10%; }
  .va-agent[data-pos="3"] .va-for { top: -8%; }
}

@media (prefers-reduced-motion: reduce) {
  .va-play, .va-wave { transition: none; }
  .va-wave { opacity: 1; }
}

/* ── the candy field: what an agent is up against ───────────────────────── */

.va-opt {
  display: flex; flex-direction: column;
  min-height: 11.5rem; padding: 1.4rem;
  border-radius: 1.25rem;
  background: var(--slate); color: var(--ice);
}
.va-opt .n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .6875rem; letter-spacing: .12em; color: var(--muted);
}
.va-opt h3 { font-size: 1.25rem; line-height: 1.1; margin-top: auto; }
.va-opt p { font-size: .875rem; line-height: 1.55; margin-top: .55rem; color: var(--muted); }

.va-answer {
  margin-top: 2.2rem; padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--slate) 20%, transparent);
}
.va-answer .mono { color: color-mix(in srgb, var(--slate) 55%, transparent); }
.va-answer-line {
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  line-height: 1.28;
  margin-top: .9rem;
  max-width: 46ch;
}

/* a recording with no card of its own: say what is playing */
.ag-heard {
  display: flex; flex-direction: column; justify-content: center;
  gap: .7rem; text-align: left;
}
.ag-heard-line { font-size: 1.0625rem; line-height: 1.55; max-width: 34ch; }