.pricing-switch {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 5px;
  margin: -10px auto 42px;
  padding: 5px;
  border: 1px solid #d5e0d8;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 41, 31, .07);
}

.pricing-switch button {
  min-height: 48px;
  padding: 0 23px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #526159;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.pricing-switch button:hover { color: #174b35; background: #f0f7f2; }
.pricing-switch button[aria-selected="true"] { color: #fff; background: #10291f; box-shadow: 0 8px 20px rgba(16, 41, 31, .2); }
.pricing-switch button:focus-visible { outline: 3px solid rgba(44, 139, 88, .28); outline-offset: 2px; }
.pricing-panel[hidden] { display: none; }
.pricing-panel.is-entering { animation: pricingFade .24s ease both; }
.pricing-panel-note { max-width: 760px; margin: -19px auto 32px; color: #5f6b64; text-align: center; }
.pricing-panel .card { height: 100%; }
.eshop-card .price { font-size: 2.75rem; }
.eshop-card .features { margin-bottom: 30px; }
.eshop-card .once { min-height: 42px; }

@keyframes pricingFade {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 660px) {
  .pricing-switch { width: 100%; grid-template-columns: 1fr 1fr; margin: -4px auto 32px; }
  .pricing-switch button { min-height: 46px; padding-inline: 12px; font-size: .9rem; }
  .pricing-panel-note { margin-top: -10px; text-align: left; }
  .eshop-card .price { font-size: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-panel.is-entering { animation: none; }
}