.avg-el {
  --avg-cream: #12151c;
  --avg-ink: #fdfcfc;
  --avg-muted: #9a9a9a;
  --avg-ring: rgba(255, 255, 255, 0.075);
}

/* Composer floats over the voice portraits inside the hero card. */
.avg-hero-prompt {
  position: absolute;
  top: 1.25rem;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
}

@media (min-width: 640px) {
  .avg-hero-prompt {
    top: 1.5rem;
    padding: 0 2rem;
  }
}

.avg-scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.avg-scrollbar-none::-webkit-scrollbar {
  display: none;
}

.avg-type-2xs {
  font-size: 0.6875rem;
  line-height: 1rem;
}

.avg-type-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.avg-type-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.avg-type-base {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.avg-type-2xl {
  font-size: 1.375rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .avg-type-2xl {
    font-size: 1.5rem;
  }
}

.avg-ring-inset {
  box-shadow: inset 0 0 0 0.5px var(--avg-ring);
}

.avg-rounded-2-5xl {
  border-radius: 1.25rem;
}

.avg-voice-slot {
  position: absolute;
  left: 50%;
  transform-origin: top center;
  transition-property: transform, opacity;
  transition-duration: 360ms;
  transition-timing-function: ease;
}

/* Gradient spheres roll like planets: surface bands move, lighting stays put. */
.avg-globe-spin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 14%,
    #000 86%,
    transparent 100%
  );
}

.avg-globe-bands {
  position: absolute;
  top: -35%;
  bottom: -35%;
  left: 0;
  width: 200%;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.42) 8%,
    rgba(255, 255, 255, 0) 16%,
    rgba(0, 0, 0, 0.2) 27%,
    rgba(0, 0, 0, 0) 38%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 62%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0) 86%,
    rgba(255, 255, 255, 0) 100%
  );
  background-repeat: repeat-x;
  background-size: 50% 100%;
  mix-blend-mode: soft-light;
  filter: blur(8px);
  animation: avg-globe-roll 16s linear infinite;
}

.avg-globe-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.08) 22%,
      transparent 46%
    ),
    radial-gradient(circle at 74% 78%, rgba(0, 0, 0, 0.28), transparent 42%),
    linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.2) 0%,
      transparent 24%,
      transparent 70%,
      rgba(0, 0, 0, 0.3) 100%
    );
  box-shadow:
    inset 8px 6px 18px rgba(255, 255, 255, 0.12),
    inset -16px -8px 28px rgba(0, 0, 0, 0.22);
}

@keyframes avg-globe-roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avg-globe-bands {
    animation: none;
  }
}

.avg-voice-slot.is-dragging {
  transition-duration: 0ms;
  transition-property: none;
}

/* Exact --w formula from the pasted ElevenLabs second-section HTML. */
.avg-cards-track {
  container-type: inline-size;
  --gap: 1rem;
  --n: 3;
  --fit: 0;
  --full-bleed: 0px;
  --scroll-inset: 0px;
  --bleed-fix-l: 0px;
  --bleed-fix-r: 0px;
  --container: 100%;
  --cols: 1;
  --gaps: 1;
  --peek: calc(2rem - var(--full-bleed));
  --max: 20rem;
  --fits: calc(var(--fit) * clamp(0, var(--cols) - var(--n) + 1, 1));
  --fit-cols: calc(var(--cols) - var(--fits) * (var(--cols) - var(--n)));
  --fit-gaps: calc(var(--gaps) - var(--fits) * (var(--gaps) - var(--n) + 1));
  --fit-peek: calc(var(--peek) * (1 - var(--fits)));
  --fit-max: calc(var(--max) * (1 - var(--fits)) + 999rem * var(--fits));
  --w: max(0px, min(var(--fit-max), calc((var(--container) - var(--gap) * var(--fit-gaps) - var(--fit-peek)) / var(--fit-cols))));
}

@media (min-width: 640px) {
  .avg-cards-track {
    --cols: 2;
    --gaps: 2;
  }
}

@media (min-width: 1024px) {
  .avg-cards-track {
    --cols: 3;
    --gaps: 2;
    --peek: 0px;
    --max: 999rem;
    --fit-max: 999rem;
  }
}

.avg-feature-photo::before,
.avg-feature-photo::after {
  display: none;
}

@supports (container-type: inline-size) {
  .avg-cards-track {
    --container: calc(100cqw - var(--full-bleed) * 2);
  }
}