.cc_b3eorip4_EmcSEGqiVc .sg-bi { min-width: 0; }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__in {
  display: grid; justify-items: start; align-content: start; gap: 14px; height: 100%;
  color: inherit; text-decoration: none;
}
.cc_b3eorip4_EmcSEGqiVc .sg-bi__mark { position: relative; display: inline-grid; flex-shrink: 0; }
/* back box: sits rotated behind the tile, fans out on hover */
.cc_b3eorip4_EmcSEGqiVc .sg-bi__mark::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--bi-radius, 14px);
  background: color-mix(in srgb, var(--bi-tint, var(--ben-tile, var(--sg-accent))) 22%, transparent);
  transform: translate(5px, 6px) rotate(6deg);
  transition: transform calc(520ms * var(--sg-speed, 1)) var(--sg-ease-spring);
}
.cc_b3eorip4_EmcSEGqiVc .sg-bi__tile {
  position: relative; display: grid; place-items: center;
  width: calc(var(--ben-icon, 26px) * 2.15); height: calc(var(--ben-icon, 26px) * 2.15);
  border-radius: var(--bi-radius, 14px);
  background: var(--bi-tint, var(--ben-tile, var(--sg-surface-2)));
  /* item tint → its readable colour (--bi-on, set in TSX); then the section icon colour,
     the readable colour of the section tile colour, and finally the text colour */
  color: var(--bi-on, var(--ben-icon-color, var(--ben-on-tile, var(--sg-text, var(--sg-ink)))));
  transition: transform calc(520ms * var(--sg-speed, 1)) var(--sg-ease-spring);
}
/* ripple ring: only drawn when a "ripple" motion rule gives it content;
   parents can recolour / thicken it (--bi-wave, --bi-wave-w) so it reads on their background */
.cc_b3eorip4_EmcSEGqiVc .sg-bi__mark::after {
  position: absolute; inset: 0; border-radius: var(--bi-radius, 14px); pointer-events: none;
  border: var(--bi-wave-w, 1.5px) solid var(--bi-wave, var(--bi-ring, var(--bi-tint, var(--sg-accent)))); opacity: 0;
}
.cc_b3eorip4_EmcSEGqiVc .sg-bi__icon { width: var(--ben-icon, 26px); height: var(--ben-icon, 26px); transition: transform var(--sg-t-mid) var(--sg-ease-out); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__img { object-fit: contain; }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__text { display: grid; gap: 4px; min-width: 0; }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__title { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__desc { font-size: var(--sg-fs-sm); line-height: 1.55; color: var(--sg-text-2, var(--sg-ink-2)); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi__go { align-self: center; opacity: 0; transform: translateX(-6px); transition: opacity var(--sg-t-mid), transform var(--sg-t-mid) var(--sg-ease-out); }

@media (hover: hover) and (pointer: fine) {
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__in:hover .sg-bi__tile { transform: translateY(-5px) rotate(-5deg); }
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__in:hover .sg-bi__mark::before { transform: translate(9px, 3px) rotate(13deg); }
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__in:hover .sg-bi__icon { transform: rotate(5deg) scale(1.08); }
  .cc_b3eorip4_EmcSEGqiVc .sg-bi--link .sg-bi__in:hover .sg-bi__title { text-decoration: underline; text-underline-offset: 3px; }
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__in:hover .sg-bi__go { opacity: 1; transform: none; }
}

/* per-item icon motion (overrides the section default) */
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-float .sg-bi__tile { animation: cc_b3eorip4_sg-float calc(3600ms * var(--sg-speed, 1)) var(--sg-ease-in-out) infinite; animation-delay: calc(var(--sg-i, 0) * -600ms); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-pulse .sg-bi__icon { animation: cc_b3eorip4_EmcSEGqiVc_sg-bi-beat calc(2400ms * var(--sg-speed, 1)) var(--sg-ease-in-out) infinite; animation-delay: calc(var(--sg-i, 0) * 300ms); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-wiggle .sg-bi__icon { animation: cc_b3eorip4_EmcSEGqiVc_sg-bi-wiggle calc(3200ms * var(--sg-speed, 1)) ease-in-out infinite; animation-delay: calc(var(--sg-i, 0) * 400ms); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-spin .sg-bi__icon { animation: cc_b3eorip4_sg-spin calc(9s * var(--sg-speed, 1)) linear infinite; }
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-bounce .sg-bi__tile { transform-origin: 50% 100%; animation: cc_b3eorip4_EmcSEGqiVc_sg-bi-bounce calc(2800ms * var(--sg-speed, 1)) ease-in-out infinite; animation-delay: calc(var(--sg-i, 0) * 180ms); }
.cc_b3eorip4_EmcSEGqiVc .sg-bi--m-ripple .sg-bi__mark::after { content: ""; animation: cc_b3eorip4_EmcSEGqiVc_sg-bi-ripple calc(2600ms * var(--sg-speed, 1)) var(--sg-ease-out) infinite; animation-delay: calc(var(--sg-i, 0) * 450ms); }
@keyframes cc_b3eorip4_EmcSEGqiVc_sg-bi-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } 60% { transform: scale(0.98); } }
@keyframes cc_b3eorip4_EmcSEGqiVc_sg-bi-wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-10deg); } 80% { transform: rotate(9deg); } 90% { transform: rotate(-5deg); } }
/* a small hop with squash on take-off and landing; items hop one after another */
@keyframes cc_b3eorip4_EmcSEGqiVc_sg-bi-bounce {
  0%, 50%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.07, 0.93); }
  25% { transform: translateY(-9px) scale(0.97, 1.03); }
  40% { transform: translateY(0) scale(1.04, 0.96); }
}
/* sonar ring leaving the icon box */
@keyframes cc_b3eorip4_EmcSEGqiVc_sg-bi-ripple { 0% { transform: scale(1); opacity: 0.8; } 75%, 100% { transform: scale(1.55); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__tile, .cc_b3eorip4_EmcSEGqiVc .sg-bi__icon, .cc_b3eorip4_EmcSEGqiVc .sg-bi__mark::before { animation: none !important; transition: none; }
  .cc_b3eorip4_EmcSEGqiVc .sg-bi__mark::after { animation: none !important; display: none; }
}