.featured-card-2 {
  width: 100%;
  position: relative;
  container-type: inline-size;
}

.featured-card-2 svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.featured-card-2.is--landscape svg {
  width: 110.622%;
  margin: 0 -5.2352% 0 -5.38695%;
}

.fc2-frame-shadow {
  pointer-events: none;
  z-index: 0;
  border-radius: 4.321cqw;
  width: 90.3978cqw;
  height: 76.6804cqw;
  position: absolute;
  top: -5.144cqw;
  left: 4.8697cqw;
  box-shadow: 0 0 2.7435cqw #00000005, 0 2.7435cqw 5.487cqw -1.3717cqw #0000000d;
}

.fc2-frame-shadow--portrait {
  border-radius: 8.1186cqw;
  width: 136.34cqw;
  height: 115.722cqw;
  top: -4.5103cqw;
  left: -18.1701cqw;
  box-shadow: 0 0 5.1546cqw #00000005, 0 5.1546cqw 10.3093cqw -2.5773cqw #0000000d;
}

.featured-card-2.is--portrait {
  display: none;
}

@media (orientation: portrait) {
  .featured-card-2.is--landscape {
    display: none;
  }

  .featured-card-2.is--portrait {
    display: block;
  }

  .featured-card-2.is--portrait svg {
    width: 110.567%;
    margin: -1.15979% -5.28351% -9.40722%;
  }
}

/* Held while the card fades in. Paused rather than removed: several of the
   idle loops carry a negative animation-delay so they start mid-cycle, and
   `animation: none` parks the node at its authored position instead. On
   release the animation resolved straight to its delayed phase and the
   floating pills snapped a few px. Paused holds them AT that phase, so
   there is nothing to jump to. */
.featured-card-2.is--idle-held, .featured-card-2.is--idle-held * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: no-preference) {
  .featured-card-2 path[stroke-dasharray="7.97 91.67"] {
    animation: 3s linear infinite fc2-flow;
  }

  .featured-card-2 path[d^="M175.679 92.5356"], .featured-card-2 path[d^="M62.5825 91.5"] {
    animation-delay: 0s;
  }

  .featured-card-2 path[d^="M365 162.286"], .featured-card-2 path[d^="M180.452 116.5"] {
    animation-delay: .6s;
  }

  .featured-card-2 path[d^="M404.857 242"], .featured-card-2 path[d^="M246.483 211.5"] {
    animation-delay: 1.2s;
  }

  .featured-card-2 rect[width="88"][rx="44"][fill="#3B82F6"] {
    transform-box: fill-box;
    transform-origin: center;
    animation: 4.8s ease-in-out infinite fc2-hub;
  }

  .featured-card-2 .fc2-cursor {
    transform-box: view-box;
    transform-origin: 402px 277px;
    animation: 4s ease-in-out infinite fc2-cursor;
  }

  .featured-card-2 rect[x="321"][width="88"][rx="44"][fill="#3B82F6"] {
    animation: 4s ease-out infinite fc2-hub-click;
  }

  .featured-card-2 .fc2-float {
    transform-box: view-box;
    will-change: transform;
    animation: 5.4s ease-in-out infinite fc2-float;
  }

  .featured-card-2 .fc2-float-2 {
    animation-duration: 4.8s;
    animation-delay: -1.8s;
  }

  .featured-card-2 .fc2-float-3 {
    animation-duration: 5.9s;
    animation-delay: -3.1s;
  }

  .featured-card-2 rect[width="25"][rx="12.5"][fill="#3B82F6"] {
    animation: 3.6s ease-in-out infinite fc2-chip;
  }
}

@keyframes fc2-flow {
  from {
    stroke-dashoffset: 99.64px;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fc2-hub {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes fc2-chip {
  0%, 100% {
    fill-opacity: .21;
  }

  50% {
    fill-opacity: .45;
  }
}

@keyframes fc2-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes fc2-cursor {
  0%, 12% {
    transform: translate(0) scale(1);
  }

  32%, 36% {
    transform: translate(-26px, -24px) scale(1);
  }

  40% {
    transform: translate(-26px, -24px) scale(.86);
  }

  46% {
    transform: translate(-26px, -24px) scale(1);
  }

  70%, 100% {
    transform: translate(0) scale(1);
  }
}

@keyframes fc2-hub-click {
  0%, 36% {
    transform: scale(1);
  }

  42% {
    transform: scale(.93);
  }

  52% {
    transform: scale(1.07);
  }

  64%, 100% {
    transform: scale(1);
  }
}