.feature-grid i {
  font-size: 0;
}

.feature-grid i::before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: currentColor;
  -webkit-mask: var(--feature-icon) center / contain no-repeat;
  mask: var(--feature-icon) center / contain no-repeat;
}

.feature-grid article:nth-child(1) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0ZM10 12h4'/%3E%3C/svg%3E"); }
.feature-grid article:nth-child(2) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9M13 13h4M13 17h4'/%3E%3C/g%3E%3C/svg%3E"); }
.feature-grid article:nth-child(3) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4'/%3E%3C/svg%3E"); }
.feature-grid article:nth-child(4) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 19V5M4 19h16M7 15l4-4 3 2 5-6M15 7h4v4'/%3E%3C/svg%3E"); }
.feature-grid article:nth-child(5) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' d='m13 2-8 12h7l-1 8 8-12h-7l1-8Z'/%3E%3C/svg%3E"); }
.feature-grid article:nth-child(6) i { --feature-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M8 16l-3 3'/%3E%3C/g%3E%3C/svg%3E"); }

.wa {
  width: 58px;
  height: 58px;
  padding: 13px;
  gap: 0;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  transition: width .3s ease, border-radius .3s ease, box-shadow .3s ease;
}

.wa::before {
  content: "";
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3A13 13 0 0 0 5 22.9L3.3 29l6.3-1.7A13 13 0 1 0 16 3Zm0 23.7a10.7 10.7 0 0 1-5.5-1.5l-.4-.2-3.7 1 1-3.7-.3-.4A10.8 10.8 0 1 1 16 26.7Zm5.9-8c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2l-1 1.2c-.2.2-.4.3-.7.1-2-.9-3.3-2.3-4.2-4.2-.2-.3 0-.5.1-.7l.8-1.1c.1-.2.1-.4 0-.6l-1-2.4c-.2-.6-.5-.6-.7-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.4c.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.7.2 1.4.2 2 .1.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.7-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3A13 13 0 0 0 5 22.9L3.3 29l6.3-1.7A13 13 0 1 0 16 3Zm0 23.7a10.7 10.7 0 0 1-5.5-1.5l-.4-.2-3.7 1 1-3.7-.3-.4A10.8 10.8 0 1 1 16 26.7Zm5.9-8c-.3-.2-1.9-1-2.2-1.1-.3-.1-.5-.2-.7.2l-1 1.2c-.2.2-.4.3-.7.1-2-.9-3.3-2.3-4.2-4.2-.2-.3 0-.5.1-.7l.8-1.1c.1-.2.1-.4 0-.6l-1-2.4c-.2-.6-.5-.6-.7-.6h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7s1.2 3.1 1.3 3.4c.2.2 2.3 3.5 5.5 4.9.8.3 1.4.5 1.9.7.7.2 1.4.2 2 .1.6-.1 1.9-.8 2.2-1.5.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.7-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wa span {
  display: grid;
  min-width: 130px;
  margin-left: 12px;
  color: #fff;
  line-height: 1.25;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease .06s, transform .25s ease .04s;
}

.wa:hover,
.wa:focus-visible {
  width: 210px;
  border-radius: 29px;
  box-shadow: 0 17px 42px #145f3857;
}

.wa:hover span,
.wa:focus-visible span {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 620px) {
  .wa:hover,
  .wa:focus-visible {
    width: 58px;
    border-radius: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa,
  .wa span { transition: none; }
}