.plans .grid article {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, var(--green), #58b8a1 48%, var(--blue)) border-box;
  box-shadow: 0 12px 28px #0b35540d;
  transition: transform var(--motion-micro-duration) var(--motion-micro-easing), box-shadow var(--motion-micro-duration) var(--motion-micro-easing);
}
.plans .grid article::before,
.plans .grid article::after {
  position: absolute;
  inset: -4px;
  display: block;
  z-index: -1;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  opacity: 1;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--green), #58b8a1 48%, var(--blue));
  content: "";
  pointer-events: none;
  transition: transform var(--motion-large-duration) var(--motion-large-easing), filter var(--motion-ui-duration) var(--motion-ui-easing), opacity var(--motion-ui-duration) var(--motion-ui-easing);
}
.plans .grid article::after {
  filter: blur(17px);
  opacity: .13;
  transform: translate3d(0,0,0) scale(.96);
}
.plans .grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 42px #0b35541c;
}
.plans .grid article:hover::before { transform: rotate(-3deg) scale(1.025); }
.plans .grid article:hover::after { filter: blur(22px); opacity: .24; }

/* The 200, 400, and 800 Mega plans share the green treatment and white type. */
.plans .grid article:first-child,
.plans .grid article:nth-child(2),
.plans .grid article:last-child {
  border-color: transparent;
  background: linear-gradient(150deg, #14764a 0%, #0e5f3b 100%) padding-box,
    linear-gradient(140deg, #c6ef87, #4b9d4a 48%, var(--blue)) border-box;
  color: #fff;
  box-shadow: 0 16px 36px #0e5f3b26;
}
.plans .grid article:first-child *,
.plans .grid article:nth-child(2) *,
.plans .grid article:last-child * { color: #fff; }
.plans .grid article:first-child > small:first-child,
.plans .grid article:nth-child(2) > small:first-child,
.plans .grid article:last-child > small:first-child {
  border: 1px solid #ffffff55;
  background: #ffffff20;
  color: #fff;
}
.plans .grid article:first-child > small:first-child::before,
.plans .grid article:nth-child(2) > small:first-child::before,
.plans .grid article:last-child > small:first-child::before { background: #c6ef87; }
.plans .grid article:first-child h3,
.plans .grid article:first-child h3 em,
.plans .grid article:first-child .plan-price,
.plans .grid article:first-child .plan-price strong,
.plans .grid article:first-child .plan-price small,
.plans .grid article:first-child > p:not(.plan-price),
.plans .grid article:nth-child(2) h3,
.plans .grid article:nth-child(2) h3 em,
.plans .grid article:nth-child(2) .plan-price,
.plans .grid article:nth-child(2) .plan-price strong,
.plans .grid article:nth-child(2) .plan-price small,
.plans .grid article:nth-child(2) > p:not(.plan-price),
.plans .grid article:last-child h3,
.plans .grid article:last-child h3 em,
.plans .grid article:last-child .plan-price,
.plans .grid article:last-child .plan-price strong,
.plans .grid article:last-child .plan-price small,
.plans .grid article:last-child > p:not(.plan-price) { color: #fff; }
.plans .grid article:first-child > .whatsapp-link,
.plans .grid article:first-child > .whatsapp-link:link,
.plans .grid article:first-child > .whatsapp-link:visited,
.plans .grid article:nth-child(2) > .whatsapp-link,
.plans .grid article:nth-child(2) > .whatsapp-link:link,
.plans .grid article:nth-child(2) > .whatsapp-link:visited,
.plans .grid article:last-child > .whatsapp-link,
.plans .grid article:last-child > .whatsapp-link:link,
.plans .grid article:last-child > .whatsapp-link:visited {
  border-color: #78c999;
  background: linear-gradient(120deg, #0b5637, #073f2a);
  color: #fff;
  box-shadow: 0 8px 18px #062d1f45;
}
.plans .grid article:first-child > .whatsapp-link:hover,
.plans .grid article:first-child > .whatsapp-link:focus-visible,
.plans .grid article:first-child > .whatsapp-link:active,
.plans .grid article:nth-child(2) > .whatsapp-link:hover,
.plans .grid article:nth-child(2) > .whatsapp-link:focus-visible,
.plans .grid article:nth-child(2) > .whatsapp-link:active,
.plans .grid article:last-child > .whatsapp-link:hover,
.plans .grid article:last-child > .whatsapp-link:focus-visible,
.plans .grid article:last-child > .whatsapp-link:active {
  border-color: #8ed3ee;
  background: linear-gradient(120deg, #0d6b9e, #084d78);
  color: #fff;
}

/* The 600 Mega card carries the blue fill. */
.plans .grid article:nth-child(3) {
  border-color: transparent;
  background: linear-gradient(145deg, #147db5, #0c5e91) padding-box,
    linear-gradient(140deg, var(--green), #58b8a1 48%, #78cdf2) border-box;
  color: #fff;
  box-shadow: 0 12px 28px #0b35540d;
}
.plans .grid article:nth-child(3)::before,
.plans .grid article:nth-child(3)::after { display: block; }
.plans .grid article:nth-child(3) > small:first-child {
  border: 1px solid #ffffff55;
  background: #ffffff20;
  color: #eaffdf;
}
.plans .grid article:nth-child(3) h3,
.plans .grid article:nth-child(3) h3 em,
.plans .grid article:nth-child(3) .plan-price,
.plans .grid article:nth-child(3) .plan-price strong,
.plans .grid article:nth-child(3) .plan-price small,
.plans .grid article:nth-child(3) > p:not(.plan-price) { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .plans .grid article,
  .plans .grid article::before,
  .plans .grid article::after { transition-duration: .01ms; }
  .plans .grid article:hover { transform: none; }
  .plans .grid article:hover::before { transform: none; }
}