/* ─────────────────────────────────────────────────────────────────────────
   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 { position: relative; z-index: 1;
                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; }

/* ─────────────────────────────────────────────────────────────────────────
   Integrations — the cloud of tools the agents write into.
   ───────────────────────────────────────────────────────────────────────── */

.itg { padding: 3rem 0 1rem; text-align: center; }
.itg-kicker { color: var(--muted); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; }
.itg-head {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1;
  margin: .9rem auto 0; max-width: 24ch;
}

.itg-cloud { position: relative; margin-top: 2.25rem; display: grid;
               gap: clamp(.5rem, 1.5vw, 1.5rem); }
.itg-glow {
  /* sized off the cloud itself, so adding a row does not leave it stranded */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(58rem, 96%); height: 112%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--candy) 18%, transparent), transparent 70%);
}

.itg-row {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(.45rem, 3.4vw, 3rem);
}
.itg-mid { gap: clamp(.55rem, 3.8vw, 3.4rem); }

/* Once there is room, the middle row becomes three columns so the card lands
   on the page's centre line whatever the two names beside it are wide — on a
   narrow screen it stays a wrapping flex row. */
.itg-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.itg-mid > .itg-card:first-child { justify-self: end; }
.itg-mid > .itg-card:last-child  { justify-self: start; }



.itg-card {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(.35rem, .8vw, .6rem);
  padding: clamp(.5rem, 1vw, 1.05rem) clamp(.75rem, 1.7vw, 1.7rem); border-radius: .95rem;
  background: var(--ice); color: var(--slate);
  font-size: clamp(.8125rem, 1.05vw, 1.0625rem); font-weight: 600; white-space: nowrap;
  box-shadow: 0 14px 30px -18px rgba(2, 2, 2, .9);
}
/* The brand's own mark, in the brand's own colour, at one optical size so
   eighteen different logos still read as one row. */
.itg-ico { flex: 0 0 auto; width: clamp(1rem, 1.3vw, 1.25rem); height: clamp(1rem, 1.3vw, 1.25rem); display: block; }
/* and the stand-in where the set has no mark: a letter, not a fake logo */
.itg-mono {
  display: grid; place-items: center; border-radius: .4rem;
  background: var(--atoll); color: var(--ice);
  font-family: Archivo, Inter, sans-serif; font-weight: 800;
  font-size: .75rem; line-height: 1;
}

/* a little life, so the row does not read as a table */
.itg-row .itg-card:nth-child(odd)  { transform: translateY(-.45rem); }
.itg-row .itg-card:nth-child(even) { transform: translateY(.45rem); }

.itg-pill {
  display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: clamp(.65rem, 1.4vw, 1rem) clamp(.85rem, 2.4vw, 2rem); border-radius: 1.3rem;
  background: var(--candy); color: var(--slate);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--candy) 10%, transparent),
              0 22px 45px -20px rgba(2, 2, 2, .95);
}
.itg-pill em {
  font-style: normal; font-size: .6875rem; letter-spacing: .06em;
  color: color-mix(in srgb, var(--slate) 62%, transparent);
}
/* set the way the banner at the top of the page is set — same family, same
   weight, same tight tracking, just smaller */
.itg-hub-mark {
  display: block; margin: .2rem 0;
  font-size: clamp(1.45rem, 3.4vw, 2.3rem);
  font-weight: 900; line-height: 1; letter-spacing: -.035em;
  white-space: nowrap;
}
.itg-hub-foot { display: inline-flex; align-items: center; gap: .4rem; }

/* ── the web ────────────────────────────────────────────────────────────────
   Every tile is wired to the hub, with a few lines between neighbours so it
   reads as a net rather than a star. Positions come from the layout itself,
   so it follows whatever the tiles do when the row wraps. */
.itg-web {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.itg-web line {
  stroke: color-mix(in srgb, var(--candy) 38%, transparent);
  stroke-width: 1; stroke-linecap: round;
}
.itg-web line.to-hub {
  stroke: color-mix(in srgb, var(--candy) 58%, transparent);
  stroke-dasharray: 3 7;
  animation: itg-flow 2.4s linear infinite;
}
@keyframes itg-flow { to { stroke-dashoffset: -20; } }

.itg-note { margin-top: 2rem; font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  .itg-row .itg-card { transform: none; }
  .itg-web line.to-hub { animation: none; }
}

/* ══ the cloud: three names and one voice ═══════════════════════════════════

   The figure on the right is one image used twice — a sharp copy and a
   blurred, brightened one under it — both on `screen`, which drops the
   picture's own near-black background into the page's. They drift on
   different clocks, so the shape never repeats itself; waking it only
   shortens those clocks, lights the glow and starts the mouth.

   --voice is the colour of whoever is talking; everything that lights up
   reads from it, so adding an agent is one line.                           */

.cl { position: relative; padding: .5rem 0 1rem; --voice: var(--candy); }
.cl[data-voice="dispatcher"] { --voice: #7FB0FF; }
.cl[data-voice="marketing"]  { --voice: #CFEDFF; }

.cl-intro { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.cl-intro .va-head { margin-inline: auto; }
.cl-intro .va-lede { margin-inline: auto; }
.cl-intro .va-eyebrow { justify-content: center; }

.cl-grid {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: center; gap: clamp(1.25rem, 3vw, 3rem);
}

/* ── the three lines ─────────────────────────────────────────────────────── */

.cl-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.cl-row + .cl-row { margin-top: .25rem; }

/* The row is two controls side by side: the name, which opens what is
   included, and the round button, which plays the call. The rule under them
   belongs to the row, not to either button. */
.cl-head {
  display: flex; align-items: center; gap: clamp(.6rem, 1.2vw, 1rem);
  border-bottom: 1px solid color-mix(in srgb, var(--ice) 11%, transparent);
  transition: border-color .28s ease;
}
.cl-row:first-child .cl-head { border-top: 1px solid color-mix(in srgb, var(--ice) 11%, transparent); }
.cl-row:hover .cl-head, .cl-row:focus-within .cl-head {
  border-color: color-mix(in srgb, var(--voice) 40%, transparent);
}

.cl-line {
  position: relative; display: flex; align-items: center; gap: clamp(.8rem, 1.4vw, 1.2rem);
  flex: 1 1 auto; min-width: 0; padding: clamp(.8rem, 1.4vw, 1.15rem) .25rem;
  background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
  transition: padding-left .28s cubic-bezier(.2,.7,.3,1);
}
.cl-line:hover, .cl-line:focus-visible { padding-left: .9rem; }
.cl-line:focus-visible { outline: 2px solid var(--voice); outline-offset: 4px; }

.cl-chev {
  flex: 0 0 auto; margin-left: auto; color: var(--muted);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), color .28s ease;
}
.cl-line[aria-expanded="true"] .cl-chev { transform: rotate(180deg); color: var(--voice); }

/* what is included, under the name */
.cl-inc {
  padding: .2rem .25rem 1.1rem clamp(1.6rem, 3vw, 2.6rem);
  animation: cl-inc-in .3s cubic-bezier(.2, .7, .3, 1);
}
.cl-inc[hidden] { display: none; }
@keyframes cl-inc-in { from { opacity: 0; transform: translateY(-.35rem); } }
.cl-inc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cl-inc li {
  position: relative; padding-left: 1.05rem;
  font-size: .875rem; line-height: 1.5; color: var(--muted);
}
.cl-inc li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .35rem; height: .35rem; border-radius: 50%; background: var(--voice);
}
.cl-inc-more {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem;
  font-size: .875rem; color: var(--ice);
}
.cl-inc-more:hover { color: var(--voice); }

@media (prefers-reduced-motion: reduce) {
  .cl-inc { animation: none; }
  .cl-chev { transition: none; }
}

.cl-n { flex: 0 0 auto; font-size: .6875rem; letter-spacing: .1em; color: var(--muted); }
.cl-text { flex: 1 1 auto; min-width: 0; }
.cl-name {
  display: block; font-family: Archivo, Inter, sans-serif; font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.05; letter-spacing: -.02em;
  transition: color .28s ease;
}
.cl-for { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--muted); }

.cl-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: color-mix(in srgb, var(--ice) 10%, transparent); color: var(--ice);
  opacity: .5; transition: opacity .28s ease, background .28s ease, color .28s ease;
}
.cl-line:hover .cl-ico, .cl-line:focus-visible .cl-ico { opacity: 1; }
.cl-row.is-on .cl-name { color: var(--voice); }
.cl-row.is-on .cl-ico  { background: var(--voice); color: var(--slate); opacity: 1; }

.cl-ico .ico-stop { display: none; }
.cl-line[data-playing="true"] .ico-play { display: none; }
.cl-line[data-playing="true"] .ico-stop { display: block; }

.cl-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.6rem; font-size: .75rem; color: var(--muted);
}
.cl-more { display: inline-flex; align-items: center; gap: .5rem; color: var(--ice); font-size: .875rem; }
.cl-more:hover { color: var(--voice); }

/* ── the cloud ───────────────────────────────────────────────────────────── */

.cl-stage { position: relative; width: 100%; aspect-ratio: 1.42 / 1; isolation: isolate; }

.cl-glow {
  position: absolute; left: 50%; top: 52%; width: 78%; aspect-ratio: 1.6 / 1;
  translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--voice) 22%, transparent), transparent 72%);
  opacity: .85; transition: opacity .5s ease, transform .5s ease;
}

.cl-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: screen; will-change: transform, filter;
  /* `screen` drops the picture's black, but not the dark navy it actually
     sits on, nor the floor reflection — so the frame is masked off to an
     ellipse around the cloud and the whole rectangle disappears with it. */
  -webkit-mask-image: radial-gradient(ellipse 70% 56% at 50% 45%,
                      #000 48%, rgba(0,0,0,.5) 70%, transparent 86%);
          mask-image: radial-gradient(ellipse 70% 56% at 50% 45%,
                      #000 48%, rgba(0,0,0,.5) 70%, transparent 86%);
}
.cl-base {
  z-index: 2;
  animation: cl-drift 7.5s ease-in-out infinite alternate,
             cl-breathe 2.6s ease-in-out infinite alternate;
}
.cl-aura {
  z-index: 1; opacity: .4;
  animation: cl-drift-b 9.5s ease-in-out infinite alternate,
             cl-swell 1.9s ease-in-out infinite alternate;
}

@keyframes cl-drift {
  from { transform: rotate(-1.1deg) scale(1.005); }
  to   { transform: rotate( 1.2deg) scale(1.035); }
}
@keyframes cl-drift-b {
  from { transform: rotate( 1.5deg) scale(1.06); }
  to   { transform: rotate(-1.7deg) scale(1.11); }
}
@keyframes cl-breathe {
  from { filter: brightness(.94) contrast(1.12) saturate(1); }
  to   { filter: brightness(1.08) contrast(1.2) saturate(1.12); }
}
@keyframes cl-swell {
  from { filter: blur(14px) brightness(1.2) contrast(1.15) saturate(1.1); opacity: .26; }
  to   { filter: blur(24px) brightness(1.65) contrast(1.25) saturate(1.4); opacity: .5; }
}

/* One pace, always. Changing animation-duration mid-flight makes the browser
   jump to the new phase, which is the twitch you got whenever the pointer
   came near — so nothing here touches the body's clocks. Choosing an agent
   lifts the light and the voice, both of which transition rather than cut. */
.cl.is-awake .cl-glow { opacity: 1; transform: scale(1.06); }

.cl-ripple {
  position: absolute; left: 50%; top: 52%; width: 56%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0;
  border: 1px solid color-mix(in srgb, var(--voice) 50%, transparent);
  animation: cl-ripple 3.8s ease-out infinite;
}
.cl-ripple:nth-of-type(2) { animation-delay: 1.9s; }
@keyframes cl-ripple {
  from { transform: scale(.68); opacity: .5; }
  to   { transform: scale(1.45); opacity: 0; }
}

/* ── what it is saying ───────────────────────────────────────────────────── */

.cl-voice {
  position: absolute; left: 50%; bottom: 2%; translate: -50% 0; z-index: 4;
  width: min(92%, 30rem); text-align: center; pointer-events: none;
}

/* The waveform runs from the moment the page loads — the cloud is listening
   whether or not anyone is pointing at it. --wave-tempo is its resting pace
   until a name sets its own. */
.cl-mouth {
  justify-content: center; height: 1.8rem; margin: 0 auto;
  color: var(--voice); --wave-tempo: 96ms; opacity: .72;
  transition: opacity .4s ease;
}
.cl-mouth i { max-width: 3px; }
.cl-mouth.is-live i { color: var(--voice); }
.cl.is-awake .cl-mouth { opacity: 1; }

.cl-say { opacity: 0; transition: opacity .35s ease; }
.cl.is-awake .cl-say { opacity: 1; }

.cl-say {
  margin-top: .7rem; font-size: .9375rem; line-height: 1.45;
  color: color-mix(in srgb, var(--ice) 88%, transparent);
  text-shadow: 0 2px 18px rgba(2, 2, 2, .95);
}
.cl.is-talking .cl-say { color: var(--muted); font-size: .8125rem; letter-spacing: .04em; }

/* ── narrow: the voice on top, the names under it ────────────────────────── */

@media (max-width: 62rem) {
  .cl-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cl-stage { order: -1; aspect-ratio: 4 / 3; max-width: 32rem; margin: 0 auto; }
  .cl-foot { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  /* Now that the cloud runs on its own, this is the only thing standing
     between somebody who asked for stillness and a page that never stops. */
  .cl-base, .cl-aura, .cl-ripple, .cl.is-awake .cl-ripple { animation: none; }
  .cl-aura { filter: blur(20px) brightness(1.4) contrast(1.2) saturate(1.2); opacity: .4; }
  .cl-mouth i, .cl-mouth.is-live i { animation: none; }
  .cl-line { transition: none; }
}

/* ── who it is for ─────────────────────────────────────────────────────────
   One line under the hero, before the page starts arguing. */
.ag-audience {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .9rem;
  margin: 0 0 .5rem; padding: 1.1rem 1.3rem;
  border-radius: 1.25rem; background: color-mix(in srgb, var(--atoll) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 8%, transparent);
  font-size: .9375rem; line-height: 1.55; color: var(--ice);
}
.ag-audience .mono { flex: 0 0 auto; color: var(--muted); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }

/* ── the panel, photographed ──────────────────────────────────────────────
   Three real screens out of a live account. They are wide and busy, so each
   gets its own row and the full width of the column — a three-up grid would
   shrink the type past reading. The frame is a thin ice hairline on near
   black, which is what the app's own chrome looks like. */
.pn-shots { display: grid; gap: 2rem; }
.pn-shot { margin: 0; }
.pn-shot img {
  display: block; width: 100%; height: auto; border-radius: 1.25rem;
  background: #060607;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 9%, transparent),
              0 30px 60px -30px rgba(0, 0, 0, .75);
}
.pn-shot figcaption {
  margin-top: .85rem; max-width: 64ch;
  font-size: .9375rem; line-height: 1.6; color: var(--muted);
}
@media (max-width: 640px) { .pn-shots { gap: 1.5rem; } }

.pn-shot a { display: block; position: relative; border-radius: 1.25rem; }
.pn-zoom {
  position: absolute; right: .9rem; bottom: .9rem; padding: .35rem .7rem;
  border-radius: 999px; background: color-mix(in srgb, var(--slate) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 16%, transparent);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ice);
  opacity: 0; transition: opacity .2s ease;
}
.pn-shot a:hover .pn-zoom, .pn-shot a:focus-visible .pn-zoom { opacity: 1; }
@media (hover: none) { .pn-zoom { opacity: 1; } }

/* ── the redraw, held against the screen it was drawn from ────────────────
   The load card in the right column is ours — hand-built, so it stays sharp
   and reflows on a phone. These are cut straight out of the panel. They sit
   under the whole tile rather than in the column, because at half the tile's
   width the type in a screenshot stops being readable. */
.ld-real { margin-top: 2.25rem; padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--ice) 10%, transparent); }
.ld-real-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-bottom: 1.25rem; }
.ld-real-head .mono { flex: 0 0 auto; color: var(--candy); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; }
.ld-real-head p:last-child { max-width: 58ch; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.ld-real a { display: block; position: relative; border-radius: .9rem; }
.ld-real a + a { margin-top: .75rem; }
.ld-real img { display: block; width: 100%; height: auto; border-radius: .9rem; background: #0a0a0c;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ice) 9%, transparent); }

/* ── the hero's right half: the voice, not a table about it ──────────────
   The same cloud as the front page, breathing on its own CSS clocks, with
   the real recording under it. :has() lifts the light while the call runs —
   the button owns playback, this only reacts to it. */
.ag-voice { --voice: var(--candy); display: grid; gap: 1rem; }
.ag-cloud { max-width: 34rem; margin: 0 auto; width: 100%; }
.ag-voice:has([data-playing="true"]) .cl-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.ag-voice:has([data-playing="true"]) .cl-mouth { opacity: 1; }

.ag-hear { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.ag-hear-meta {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ag-hear-note { max-width: 42ch; font-size: .875rem; line-height: 1.6; color: var(--muted); }

/* ── the word behind the hero, drawn ─────────────────────────────────────
   Only the wheels move. The hero grid is lifted above it so the drawing
   stays behind the cards rather than over them. */
.ag-truck {
  position: absolute; right: -2%; bottom: -1rem; z-index: 0;
  width: clamp(17rem, 44vw, 36rem); height: auto;
  color: color-mix(in srgb, var(--ice) 10%, transparent);
  pointer-events: none; user-select: none;
}
.ag-truck .wh { transform-box: fill-box; transform-origin: 50% 50%;
                animation: ag-roll 1.5s linear infinite; }
@keyframes ag-roll { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ag-truck .wh { animation: none; } }