.earmagic-bento-actions,
.earmagic-bento-grid {
  --bento-glow-rgb: 115, 88, 223;
  position: relative;
  isolation: isolate;
}

.earmagic-bento-spotlight {
  position: absolute;
  z-index: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(var(--bento-glow-rgb), 0.13) 0%,
    rgba(var(--bento-glow-rgb), 0.07) 22%,
    rgba(var(--bento-glow-rgb), 0.025) 46%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
}

body.v4-page.earmagic-page .hero .magic-bento-entry {
  --bento-glow-x: 50%;
  --bento-glow-y: 50%;
  --bento-glow-intensity: 0;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.16) !important;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

body.v4-page.earmagic-page .hero .magic-bento-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    170px circle at var(--bento-glow-x) var(--bento-glow-y),
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.22)) 0%,
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.1)) 34%,
    transparent 68%
  );
}

.magic-bento-entry__label {
  position: relative;
  z-index: 2;
}

body.v4-page.earmagic-page .hero .magic-bento-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    150px circle at var(--bento-glow-x) var(--bento-glow-y),
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.88)) 0%,
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.34)) 40%,
    transparent 72%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

body.v4-page.earmagic-page .hero .magic-bento-entry:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 28px rgba(0, 0, 0, 0.2),
    0 0 24px rgba(var(--bento-glow-rgb), 0.1) !important;
}

body.v4-page.earmagic-page .hero .magic-bento-entry.btn-primary {
  --bento-glow-rgb: 207, 255, 74;
  color: var(--v4-ink) !important;
  background: var(--v4-lime) !important;
  border-color: var(--v4-lime) !important;
}

body.v4-page.earmagic-page .hero .magic-bento-entry.btn-primary:hover {
  color: var(--v4-ink) !important;
  background: #dcff75 !important;
}

body.v4-page.earmagic-page .magic-bento-card {
  --bento-glow-x: 50%;
  --bento-glow-y: 50%;
  --bento-glow-intensity: 0;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 250ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

body.v4-page.earmagic-page .magic-bento-card:focus-visible {
  outline: 2px solid rgba(var(--bento-glow-rgb), 0.9);
  outline-offset: 4px;
}

body.v4-page.earmagic-page .service-card.featured.magic-bento-card {
  color: #fff;
  background: var(--v4-violet) !important;
  border-color: var(--v4-violet) !important;
}

body.v4-page.earmagic-page .magic-bento-card > * {
  position: relative;
  z-index: 2;
}

body.v4-page.earmagic-page .magic-bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--bento-glow-x) var(--bento-glow-y),
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.16)) 0%,
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.065)) 36%,
    transparent 68%
  );
}

body.v4-page.earmagic-page .magic-bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--bento-glow-x) var(--bento-glow-y),
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.9)) 0%,
    rgba(var(--bento-glow-rgb), calc(var(--bento-glow-intensity) * 0.36)) 42%,
    transparent 72%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

body.v4-page.earmagic-page .magic-bento-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--bento-glow-rgb), 0.48);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.11),
    0 0 30px rgba(var(--bento-glow-rgb), 0.08);
}

.earmagic-bento-particle {
  position: absolute;
  z-index: 2;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(var(--bento-glow-rgb), 0.95);
  box-shadow: 0 0 7px rgba(var(--bento-glow-rgb), 0.62);
  animation: earmagic-bento-star var(--bento-duration, 2.4s) ease-in-out var(--bento-delay, 0s) infinite alternate;
}

.earmagic-bento-ripple {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(var(--bento-glow-rgb), 0.3) 0%,
    rgba(var(--bento-glow-rgb), 0.12) 35%,
    transparent 70%
  );
  transform: scale(0);
  animation: earmagic-bento-ripple 280ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes earmagic-bento-star {
  from {
    opacity: 0.18;
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  to {
    opacity: 0.9;
    transform: translate3d(var(--bento-dx, 0), var(--bento-dy, 0), 0) scale(1);
  }
}

@keyframes earmagic-bento-ripple {
  0% {
    opacity: 0.9;
    transform: scale(0);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@media (max-width: 768px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.v4-page.earmagic-page .hero .magic-bento-entry {
    --bento-glow-intensity: 0;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }

  body.v4-page.earmagic-page .magic-bento-card {
    --bento-glow-intensity: 0;
    transform: none;
  }

  body.v4-page.earmagic-page .hero .magic-bento-entry::before,
  body.v4-page.earmagic-page .hero .magic-bento-entry::after,
  body.v4-page.earmagic-page .magic-bento-card::before,
  body.v4-page.earmagic-page .magic-bento-card::after,
  .earmagic-bento-spotlight,
  .earmagic-bento-particle,
  .earmagic-bento-ripple {
    display: none;
  }
}

body.v4-page.earmagic-page .hero .earmagic-audio-toggle {
  min-height: 44px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  transition:
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

body.v4-page.earmagic-page .hero .earmagic-audio-toggle[aria-pressed="true"] {
  color: var(--v4-ink);
  background: var(--v4-lime);
  border-color: var(--v4-lime);
}

body.v4-page.earmagic-page .hero .earmagic-audio-toggle:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  body.v4-page.earmagic-page .hero .earmagic-audio-toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  body.v4-page.earmagic-page .hero .earmagic-audio-toggle[aria-pressed="true"]:hover {
    color: var(--v4-ink);
    background: #dcff75;
    border-color: #dcff75;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v4-page.earmagic-page .hero .earmagic-audio-toggle:active {
    transform: none;
  }
}